/* =========================================================
   КэшбеККер — самостоятельный шаблон (без Bootstrap).
   Дизайн-система концепта: аппбар, нижняя таб-навигация,
   карточки, статус-пилюли, степпер, светлая/тёмная тема.
   ========================================================= */

:root{
  --accent:#1683ec; --accent-strong:#0f6fd0; --accent-soft:#e6f1fd; --on-accent:#fff; --accent-rgb:22,131,236;
  --good:#0ea371; --good-soft:#dff5ec; --warn:#c9790a; --warn-soft:#fbeecd; --danger:#df473b; --danger-soft:#fbe4e1;
  --ink:#131722; --muted:#616b7d; --line:#e4e8f0; --line-soft:#eef1f6;
  --surface:#ffffff; --surface-2:#f4f6fa; --page-bg:#eef1f7;
  --shadow:0 12px 30px rgba(23,42,74,.12);
  --r-lg:20px; --r-md:16px; --r-sm:11px;
  --font:ui-rounded,"SF Pro Rounded","Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --accent:#3ba0ff; --accent-strong:#63b4ff; --accent-soft:#12304e; --on-accent:#04121f; --accent-rgb:59,160,255;
    --good:#33c48d; --good-soft:#0f3a2c; --warn:#e2a13a; --warn-soft:#3a2d12; --danger:#f2685c; --danger-soft:#3d2019;
    --ink:#eef2f8; --muted:#97a2b5; --line:#28313f; --line-soft:#1e2632;
    --surface:#141a25; --surface-2:#1a2130; --page-bg:#0a0d13; --shadow:0 16px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="light"]{
  --accent:#1683ec; --accent-strong:#0f6fd0; --accent-soft:#e6f1fd; --on-accent:#fff; --accent-rgb:22,131,236;
  --good:#0ea371; --good-soft:#dff5ec; --warn:#c9790a; --warn-soft:#fbeecd; --danger:#df473b; --danger-soft:#fbe4e1;
  --ink:#131722; --muted:#616b7d; --line:#e4e8f0; --line-soft:#eef1f6;
  --surface:#ffffff; --surface-2:#f4f6fa; --page-bg:#eef1f7; --shadow:0 12px 30px rgba(23,42,74,.12);
}
:root[data-theme="dark"]{
  --accent:#3ba0ff; --accent-strong:#63b4ff; --accent-soft:#12304e; --on-accent:#04121f; --accent-rgb:59,160,255;
  --good:#33c48d; --good-soft:#0f3a2c; --warn:#e2a13a; --warn-soft:#3a2d12; --danger:#f2685c; --danger-soft:#3d2019;
  --ink:#eef2f8; --muted:#97a2b5; --line:#28313f; --line-soft:#1e2632;
  --surface:#141a25; --surface-2:#1a2130; --page-bg:#0a0d13; --shadow:0 16px 40px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:var(--page-bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.4;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-strong)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

/* ---------- app shell ---------- */
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--surface);position:relative;
  display:flex;flex-direction:column;box-shadow:0 0 60px rgba(0,0,0,.06)}
.app.has-tabs{padding-bottom:70px}
.content{flex:1;padding:14px;display:flex;flex-direction:column;gap:13px}

/* ---------- appbar ---------- */
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:var(--surface);border-bottom:1px solid var(--line-soft)}
.appbar .aw{font-size:17px;font-weight:800;letter-spacing:-.01em}
.appbar .aw b{color:var(--accent)}
.appbar .title{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar .push{margin-left:auto}
.icobtn{width:38px;height:38px;flex:none;border-radius:11px;border:1px solid var(--line);background:var(--surface-2);
  display:grid;place-items:center;color:var(--ink);cursor:pointer;font-size:1rem}
.icobtn:hover{border-color:var(--accent)}
.mark{flex:none;filter:drop-shadow(0 4px 10px rgba(var(--accent-rgb),.35))}

/* ---------- bottom tabbar ---------- */
.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;z-index:30;
  display:flex;background:var(--surface);border-top:1px solid var(--line-soft)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 11px;
  color:var(--muted);font-size:11px;font-weight:600;position:relative;text-decoration:none}
.tab i{font-size:20px;line-height:1}
.tab.on{color:var(--accent)}
.tab .bdg{position:absolute;top:4px;left:calc(50% + 7px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--danger);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;font:inherit;font-weight:700;
  font-size:14px;padding:12px 15px;border-radius:12px;border:1px solid transparent;cursor:pointer;
  transition:transform .1s,filter .2s,background .2s;text-decoration:none}
.btn:active{transform:scale(.985)}
.btn.sm{font-size:13px;padding:9px 11px;border-radius:10px}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.good{background:var(--good);color:#fff}
.btn.good:hover{filter:brightness(1.05)}
.btn.ghost{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent)}
.btn.danger{background:var(--danger);color:#fff}
.btn.wb{background:transparent;color:#8a3ffb;border-color:#8a3ffb;font-size:13px}
.btn.wb:hover{background:#8a3ffb;color:#fff}
.btn .b{background:rgba(255,255,255,.24);border-radius:999px;padding:1px 8px;font-size:12px}
.btn[disabled]{opacity:.6;cursor:default}
.btn .spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;
  display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- pills / status ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.02em;
  padding:4px 10px;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.acc{background:var(--accent-soft);color:var(--accent-strong)}
.pill.dng{background:var(--danger-soft);color:var(--danger)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:5px}
.field label,.label{font-size:12px;font-weight:700;color:var(--muted);margin-left:2px}
.input,.select,textarea.input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;
  padding:12px 13px;font:inherit;font-size:15px;color:var(--ink)}
.input.big{text-align:center;font-size:16px;padding:14px}
.input:focus,.select:focus,textarea.input:focus{outline:none;background:var(--surface);
  border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.input::placeholder{color:var(--muted)}
.input:disabled{opacity:.7}
textarea.input{resize:vertical}
.select{appearance:none;-webkit-appearance:none;background-repeat:no-repeat;background-position:right 13px center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23616b7d' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  padding-right:34px;font-weight:600}
.hint{font-size:12px;color:var(--muted);text-align:center}
.row2{display:flex;gap:11px}
.row2>*{flex:1;min-width:0}

/* ---------- banner ---------- */
.banner{display:flex;align-items:center;gap:9px;background:var(--good-soft);color:var(--good);
  border-radius:12px;padding:11px 13px;font-size:13.5px;font-weight:700}

/* ---------- catalog cards ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.thumb{position:relative;background:var(--surface-2)}
.thumb img{display:block;width:100%;aspect-ratio:1/1.05;object-fit:cover}
.thumb .cb{position:absolute;top:8px;right:8px;background:var(--good);color:#fff;font-size:11px;font-weight:800;
  padding:3px 8px;border-radius:999px}
.pinfo{padding:9px 10px 11px;display:flex;flex-direction:column;gap:7px}
.pname{font-size:12.5px;font-weight:700;line-height:1.25}
.sizes{font-size:10.5px;font-weight:700;color:var(--warn)}
.prices{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.old{color:var(--muted);text-decoration:line-through;font-size:12.5px}
.now{font-size:16px;font-weight:800;color:var(--ink)}
.now sup{font-size:10px;font-weight:700;color:var(--muted)}

/* ---------- order cards ---------- */
.ocard{display:flex;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px;text-decoration:none;color:inherit;transition:transform .16s,box-shadow .16s}
.ocard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ocard .oimg{width:58px;height:58px;flex:none;border-radius:11px;border:1px solid var(--line);object-fit:cover;background:var(--surface-2)}
.ocard .om{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ocard .on{font-size:13px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ocard .od{font-size:11.5px;color:var(--muted);font-weight:600}

/* ---------- product detail ---------- */
.hero-img{width:100%;border-radius:14px;border:1px solid var(--line);display:block;background:var(--surface-2)}
.panel{display:flex;gap:10px}
.pbox{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.pbox .k{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pbox .v{font-size:19px;font-weight:800;margin-top:3px}
.pbox.you{background:var(--good-soft);border-color:transparent}
.pbox.you .v{color:var(--good)}
.pbox.wb .v{color:var(--danger)}
.rowline{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.h5{font-size:18px;font-weight:800;margin:0}

/* ---------- stepper ---------- */
.stepper{display:flex;justify-content:space-between;gap:2px;padding-top:4px}
.st{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.st::before{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:var(--line)}
.st:first-child::before{display:none}
.st.done::before,.st.cur::before{background:var(--good)}
.st .d{width:19px;height:19px;border-radius:50%;background:var(--surface);border:2px solid var(--line);z-index:1;
  display:grid;place-items:center;color:#fff;font-size:10px}
.st.done .d{background:var(--good);border-color:var(--good)}
.st.cur .d{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.st span{font-size:8.5px;font-weight:700;color:var(--muted);text-align:center;line-height:1.1}
.st.done span,.st.cur span{color:var(--ink)}

/* ---------- card / instruction ---------- */
.sheet-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.sheet-card .hd{padding:11px 14px;border-bottom:1px solid var(--line-soft);font-weight:700;font-size:14px}
.sheet-card .bd{padding:14px;font-size:13px;line-height:1.55;color:var(--muted)}
.sheet-card .bd b{color:var(--ink)}

/* ---------- modal (custom, без Bootstrap) ---------- */
.modal-back{position:fixed;inset:0;z-index:50;background:rgba(10,14,20,.55);
  display:none;align-items:flex-end;justify-content:center;padding:0}
.modal-back.open{display:flex}
.sheet{background:var(--surface);width:100%;max-width:480px;border-radius:20px 20px 0 0;
  padding:16px;display:flex;flex-direction:column;gap:13px;max-height:88vh;overflow:auto;
  animation:rise .22s ease}
@keyframes rise{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.sheet .mh{display:flex;align-items:center;justify-content:space-between}
.sheet .mh h3{margin:0;font-size:16px;font-weight:800}
.sheet .x{border:none;background:var(--surface-2);width:32px;height:32px;border-radius:9px;cursor:pointer;
  color:var(--ink);font-size:18px;line-height:1}
.preview-img{width:100%;max-height:230px;object-fit:contain;border-radius:12px;background:var(--surface-2)}
.file{width:100%;font:inherit;font-size:13px;color:var(--muted)}
.alert-inline{background:var(--danger-soft);color:var(--danger);border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
a:focus-visible,button:focus-visible,.btn:focus-visible,.input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}