:root{
  --ink:#1b1b3a; --indigo:#5455f6; --indigo-soft:#eeeefe; --orange:#ff8132;
  --orange-soft:#fff1e6; --line:#d9d9f2; --muted:#6b6b8c; --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--ink);
  background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--indigo)}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
code{background:var(--indigo-soft);color:var(--indigo);padding:2px 7px;border-radius:6px;font-weight:600}
.wrap{max-width:940px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.small{font-size:13px}
.err{color:#d4351c;font-size:15px;min-height:22px}
.hidden{display:none}

/* кнопки и поля */
.btn{display:inline-block;background:var(--indigo);color:#fff;padding:13px 26px;
  border-radius:var(--r);font-weight:600;font-size:16px;text-decoration:none;text-align:center}
.btn:hover{background:#4344e0}
.btn.small{padding:7px 15px;font-size:14px}
label{display:block;font-size:14px;font-weight:600;margin-bottom:14px}
input,select{display:block;width:100%;margin-top:5px;padding:11px 13px;font-size:16px;
  border:2px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-family:inherit}
.code-input{font-size:24px;text-align:center;padding:15px;border-width:3px;letter-spacing:1px}
.code-input::placeholder{color:#b9b9d4}
.lbl-big{font-size:16px}
form.inline{margin:0;display:inline}

/* вход */
body.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-box{width:100%;max-width:440px;text-align:center}
.login-box h1{font-size:32px;margin:10px 0 8px;letter-spacing:-.5px}
.login-box .btn{width:100%;margin-top:6px}
.login-box label{text-align:left}
.hint{margin-top:22px;font-size:14px;color:var(--muted)}
.sheet{max-width:520px;margin:60px auto;padding:0 20px}
.sheet h1{font-size:28px}
.warn{background:var(--orange-soft);border:2px solid var(--orange);padding:14px 16px;border-radius:var(--r)}

/* шапка */
header{border-bottom:2px solid var(--line);position:sticky;top:0;background:#fff;z-index:10}
.bar{display:flex;align-items:center;gap:16px;padding:14px 0;flex-wrap:wrap}
.who{font-weight:600}
.group-chip{font-size:13px;color:var(--indigo);background:var(--indigo-soft);
  padding:3px 10px;border-radius:20px;margin-left:8px;font-weight:600}
.purse{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--orange-soft);
  border:2px solid var(--orange);padding:6px 16px 6px 10px;border-radius:30px}
.purse .n{font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.purse .lbl{font-size:13px;color:var(--muted)}
.tabs{display:flex;gap:4px;overflow-x:auto}
.tab{padding:10px 18px;border-radius:10px 10px 0 0;font-weight:600;color:var(--muted);
  border-bottom:3px solid transparent;text-decoration:none;white-space:nowrap}
.tab.on{color:var(--indigo);border-bottom-color:var(--indigo);background:var(--indigo-soft)}
.tab.out{margin-left:auto;color:#a0a0bd}
.badge{background:var(--orange);color:#fff;border-radius:20px;padding:1px 7px;font-size:12px;margin-left:6px}
main{padding:26px 0 70px}
h2{font-size:22px;margin:0 0 4px;letter-spacing:-.3px}
h3{font-size:17px;margin:0 0 10px}
.sub{color:var(--muted);margin:0 0 20px;font-size:15px}
.note{background:var(--indigo-soft);border:2px solid var(--indigo);padding:12px 16px;
  border-radius:var(--r);margin-bottom:20px;font-weight:600}
.note.good{background:#eaf7ef;border-color:#2e9e5b}
.note.bad{background:#fdeceb;border-color:#d4351c}

/* товары */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.card{border:2px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.card.owned{border-color:var(--indigo)}
.preview{aspect-ratio:3/2;display:grid;place-items:center;background-color:#fafaff;
  background-image:linear-gradient(45deg,#f0f0fa 25%,transparent 25%,transparent 75%,#f0f0fa 75%),
                   linear-gradient(45deg,#f0f0fa 25%,transparent 25%,transparent 75%,#f0f0fa 75%);
  background-size:16px 16px;background-position:0 0,8px 8px;border-bottom:2px solid var(--line);
  overflow:hidden}
.preview img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.thumb-sm{width:60px;height:40px;object-fit:contain;border-radius:8px;border:1px solid var(--line);flex:none;background:#fff;padding:2px}
.card-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1;gap:8px}
.card h3{font-size:15px;margin:0;line-height:1.3}
.card .desc{font-size:13px;color:var(--muted);margin:0;flex:1}
.card-foot{display:flex;align-items:center;gap:10px}
.price{display:flex;align-items:center;gap:5px;font-weight:700;font-size:17px}
.buy{margin-left:auto;background:var(--orange);color:#fff;padding:8px 16px;border-radius:10px;font-weight:600;font-size:14px}
.buy:hover{background:#f0721f}
.buy[disabled]{background:#e8e8f0;color:#9a9ab5;cursor:not-allowed}
.have{margin-left:auto;font-size:14px;font-weight:600;color:var(--indigo)}
.card-foot .inline{margin-left:auto}

.cat-h{font-size:15px;font-weight:700;color:var(--indigo);text-transform:uppercase;
  letter-spacing:.6px;margin:26px 0 12px}
.cat-h:first-of-type{margin-top:4px}

/* панели, таблицы */
.panel{border:2px solid var(--line);border-radius:var(--r);padding:20px 22px}
.panel.narrow{max-width:560px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;font-size:13px;color:var(--muted);font-weight:600;
  padding:8px 10px;border-bottom:2px solid var(--line)}
.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.plus{color:#2e9e5b;font-weight:700}
.minus{color:#d4351c;font-weight:700}
.chip{background:var(--orange-soft);color:#b4500f;padding:1px 8px;border-radius:20px;font-size:12px;font-weight:600}
.big-code{font-size:18px;padding:4px 12px}

/* викторина */
.qnum{font-size:14px;color:var(--muted);margin-bottom:6px}
.qtext{font-size:20px;font-weight:600;margin:0 0 18px;line-height:1.35}
.opt{display:block;width:100%;text-align:left;padding:14px 16px;margin-bottom:10px;
  border:2px solid var(--line);border-radius:10px;font-size:16px;background:#fff}
.opt:hover{border-color:var(--indigo);background:var(--indigo-soft)}
.result{text-align:center}
.result .big{font-size:46px;font-weight:700;color:var(--orange);line-height:1}
.result h3{font-size:22px;margin:12px 0 6px}

/* рюкзак */
.empty{border:2px dashed var(--line);border-radius:var(--r);padding:44px 24px;text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}
.file-row{display:flex;align-items:center;gap:14px;padding:14px;border:2px solid var(--line);
  border-radius:var(--r);margin-bottom:10px}
.file-row .nm{font-weight:600;font-size:15px}
.file-row .meta{font-size:13px;color:var(--muted)}
.file-row .btn{margin-left:auto}

@media(max-width:640px){
  .cols{grid-template-columns:1fr}
  .purse{margin-left:0;width:100%;justify-content:center}
  .tbl{font-size:14px}
  .tbl th:nth-child(3),.tbl td:nth-child(3){display:none}
}

/* выбор языка */
.langs{display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:center;margin-top:26px}
.lng{font-size:13px;color:var(--muted);text-decoration:none;padding:4px 9px;border-radius:20px;
  border:1px solid transparent;white-space:nowrap}
.lng:hover{background:var(--indigo-soft);color:var(--indigo)}
.lng.on{background:var(--indigo);color:#fff;font-weight:600}
.foot{margin-top:44px;padding-top:20px;border-top:2px solid var(--line)}
.chip-ok{background:#eaf7ef;color:#1d7a43;padding:1px 9px;border-radius:20px;font-size:12px;font-weight:600}
.btn.danger{background:#fff;color:#c0341d;border:2px solid #f0c4bd}
.btn.danger:hover{background:#fdeceb}