:root{
  color-scheme:light;
  --bg:#f6f8ff;
  --card:#fff;
  --ink:#17213b;
  --muted:#66718c;
  --line:rgba(53,72,191,.12);
  --blue:#5267e8;
  --blue-dark:#3548bf;
  --soft:#edf2ff;
  --success:#14784a;
  --danger:#b5404d;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-width:320px;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 2%,rgba(80,203,232,.10),transparent 28rem),
    radial-gradient(circle at 94% 22%,rgba(255,216,104,.12),transparent 27rem),
    var(--bg);
  font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
.progress-shell{width:min(1040px,calc(100% - 32px));margin:0 auto;padding:28px 0 56px}
.progress-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.back{color:#2946d8;font-weight:850}
.badge{padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#53617e;font-size:12px;font-weight:800}
.progress-hero{padding:64px 0 30px}
.eyebrow,.card-kicker{margin:0 0 12px;color:#4058ea;font-size:11px;font-weight:900;letter-spacing:.13em}
h1{margin:0;font-size:clamp(44px,7vw,76px);line-height:.98;letter-spacing:-.045em}
.lead{max-width:800px;margin:22px 0 0;color:var(--muted);font-size:18px;line-height:1.65}
.local-state{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding:20px 22px;border:1px solid var(--line);border-radius:20px;background:var(--soft)}
.local-state>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.local-state strong{font-size:16px}
.local-state p{grid-column:2;margin:4px 0 0;color:var(--muted);font-size:13px}
.local-dot{width:10px;height:10px;border-radius:50%;background:#4fc187;box-shadow:0 0 0 5px rgba(79,193,135,.12)}
.quiet-button{border:0;border-radius:12px;padding:10px 13px;background:#fff;color:#52617f;font-weight:800;cursor:pointer}
.actions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.action-card{padding:30px;border:1px solid var(--line);border-radius:28px;background:var(--card);box-shadow:0 20px 55px rgba(41,58,120,.08)}
.restore-card{grid-column:1/-1}
.action-icon{font-size:34px;margin-bottom:14px}
.action-card h2{margin:0 0 12px;font-size:28px;letter-spacing:-.025em}
.action-card>p{max-width:680px;margin:0;color:var(--muted);line-height:1.65}
.primary-button{display:inline-flex;align-items:center;justify-content:center;margin-top:20px;padding:14px 18px;border:0;border-radius:14px;background:var(--blue);color:#fff;font-weight:850;cursor:pointer;text-decoration:none}
.primary-button:hover{background:var(--blue-dark)}
.primary-button:disabled,.quiet-button:disabled{cursor:not-allowed;opacity:.5}
.mini-note{margin-top:14px;color:#8a95ad;font-size:12px;line-height:1.5}
.status{min-height:20px;margin-top:12px;color:var(--muted);font-size:13px;line-height:1.5}
.status.success{color:var(--success)}
.status.error{color:var(--danger)}
.file-picker{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:20px;padding:12px 16px;border:1px dashed #aeb9d9;border-radius:14px;background:#f8f9ff;color:#415174;font-weight:800;cursor:pointer}
.file-picker input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.verified-file{display:flex;align-items:center;gap:13px;margin-top:14px;padding:15px 16px;border:1px solid #cbe8d7;border-radius:16px;background:#effaf3}
.verified-file.hidden,.hidden{display:none!important}
.verified-mark{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#daf4e4;color:var(--success);font-size:20px;font-weight:900}
.verified-file strong{display:block}
.verified-file p{margin:3px 0 0;color:#577063;font-size:12px}
.agent-note{margin-top:18px;padding:24px 26px;border:1px solid var(--line);border-radius:22px;background:var(--soft)}
.agent-note strong{font-size:17px}
.agent-note p{margin:8px 0 0;color:var(--muted);line-height:1.55}
footer{text-align:center;margin-top:30px;color:#8b96af;font-size:11px}
@media(max-width:760px){
  .progress-shell{width:min(100% - 22px,1040px);padding-top:18px}
  .progress-topbar{align-items:flex-start}
  .badge{font-size:10px}
  .progress-hero{padding:44px 0 24px}
  .lead{font-size:16px}
  .local-state{align-items:flex-start;flex-direction:column}
  .actions-grid{grid-template-columns:1fr}
  .restore-card{grid-column:auto}
  .action-card{padding:24px;border-radius:22px}
  .primary-button{width:100%}
}

/* ===== 5E2: intuitive transfer inside "Мой прогресс" ===== */

.transfer-hub-card{
  grid-column:1/-1
}

.transfer-intro{
  max-width:760px
}

.transfer-directions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:22px
}

.transfer-direction{
  padding:22px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#f8f9ff
}

.transfer-direction h3{
  margin:0 0 10px;
  font-size:23px;
  letter-spacing:-.02em
}

.transfer-direction>p:not(.direction-kicker){
  margin:0;
  color:var(--muted);
  line-height:1.6
}

.direction-kicker{
  margin:0 0 9px;
  color:#4058ea;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em
}

.manual-transfer-label{
  display:block;
  margin-top:18px;
  color:#253656;
  font-size:12px;
  font-weight:850
}

.manual-transfer-input{
  display:block;
  width:100%;
  box-sizing:border-box;
  min-height:82px;
  margin-top:8px;
  padding:13px 15px;
  resize:vertical;
  border:1px solid #cfd9f1;
  border-radius:14px;
  outline:none;
  background:#fff;
  color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:15px;
  line-height:1.5
}

.manual-transfer-input:focus{
  border-color:#526bf1;
  box-shadow:0 0 0 3px rgba(82,107,241,.12)
}

.manual-transfer-input.input-error{
  border-color:#df5d68;
  box-shadow:0 0 0 3px rgba(223,93,104,.10)
}

.manual-transfer-button{
  margin-top:12px
}

.receive-direction .status.error{
  color:var(--danger)
}

.transfer-life-note{
  margin-top:16px;
  padding:15px 17px;
  border-radius:16px;
  background:var(--soft);
  color:var(--muted);
  font-size:13px;
  line-height:1.55
}

.transfer-life-note strong{
  color:var(--ink)
}

@media(max-width:760px){
  .transfer-directions{
    grid-template-columns:1fr
  }

  .transfer-hub-card{
    grid-column:auto
  }
}

/* ===== 5E3D: clearer file restore notices ===== */

/*
  Текст и JS намеренно не меняем.
  Усиливаем уже существующие status/result элементы внутри file restore card.
*/

.restore-card .product-status:not(:empty),
.restore-card .restore-status:not(:empty),
.restore-card .file-status:not(:empty),
.restore-card [id*="Status"]:not(:empty),
.restore-card [id*="status"]:not(:empty){
  display:block;
  margin-top:16px;
  padding:13px 15px;
  border:1px solid rgba(37,82,214,.18);
  border-radius:14px;
  background:#f1f5ff;
  font-weight:750;
  line-height:1.45;
  box-shadow:0 8px 22px rgba(36,58,120,.06)
}

.restore-card .success:not(:empty),
.restore-card [class*="success"]:not(:empty){
  border-color:rgba(24,154,92,.24);
  background:#edf9f2;
  color:#087a43
}

.restore-card .error:not(:empty),
.restore-card [class*="error"]:not(:empty){
  border-color:rgba(210,56,76,.22);
  background:#fff1f3;
  color:#b4233b
}

/* Если статус в текущей разметке не вложен в .restore-card,
   усиливаем известные продуктовые статусы без изменения текста. */
.progress-page .product-status:not(:empty){
  margin-top:16px;
  padding:13px 15px;
  border:1px solid rgba(37,82,214,.18);
  border-radius:14px;
  background:#f1f5ff;
  font-weight:750;
  line-height:1.45
}

.progress-page .product-status.success:not(:empty){
  border-color:rgba(24,154,92,.24);
  background:#edf9f2;
  color:#087a43
}

.progress-page .product-status.error:not(:empty){
  border-color:rgba(210,56,76,.22);
  background:#fff1f3;
  color:#b4233b
}

/* ===== 5E4: progress help entry ===== */

.progress-top-actions{
  display:flex;
  align-items:center;
  gap:10px
}

.help-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 14px;
  border:1px solid #cfd8f2;
  border-radius:999px;
  background:#fff;
  color:#3450df;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  transition:transform .15s ease,box-shadow .15s ease
}

.help-link:hover{
  transform:translateY(-1px);
  box-shadow:0 7px 18px rgba(50,72,150,.09)
}

@media(max-width:600px){
  .progress-topbar{
    gap:10px
  }

  .progress-top-actions{
    gap:6px
  }

  .help-link{
    padding:7px 10px;
    font-size:10px
  }

  .progress-top-actions .badge{
    display:none
  }
}

/* ===== 5E5: prevent iOS Safari form-control auto zoom ===== */
@media (max-width: 820px){
  input,
  select,
  textarea{
    font-size:16px !important;
  }

  input[type="file"]{
    font-size:16px !important;
  }
}


/* ===== 5E6: quick clear for manual secret code ===== */
.clear-manual-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  margin-top:8px;
  padding:9px 14px;
  border:1px solid #d3dbf1;
  border-radius:12px;
  background:#fff;
  color:#5e6d8d;
  font:inherit;
  font-size:13px;
  font-weight:850;
  cursor:pointer
}

.clear-manual-code:hover{
  border-color:#b9c5e8;
  color:#263a78
}

.clear-manual-code[hidden]{
  display:none!important
}