/* ============================================================
   Momentum — дизайн-система тренажёра «Волна» (фирменный синий)
   Подключается всеми страницами: <link href="/shared/momentum.css">
   ============================================================ */
:root{
  --bg:#f6f8ff; --card:#ffffff; --line:#e7ecf6; --ink:#0f1b3d; --body:#44506b; --muted:#7c88a3;
  --brand:#1e40af; --brand-2:#3b82f6; --indigo:#4f46e5; --cyan:#0ea5e9; --primary:#2563eb;
  --green:#12b76a; --amber:#f59e0b; --red:#ef4444;
  --grad:linear-gradient(120deg,#1e40af,#3b82f6);
  --grad2:linear-gradient(120deg,#4f46e5,#0ea5e9);
  --shadow:0 10px 40px -16px rgba(15,27,61,.18);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;color:var(--body);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
h1,h2,h3,.brand,.big{font-family:'Unbounded',sans-serif;color:var(--ink);letter-spacing:-.02em}
.tabular{font-variant-numeric:tabular-nums}
img,svg{max-width:100%}
a{color:var(--brand)}

/* фоновые пятна */
body::before{content:"";position:fixed;top:-140px;right:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.14),transparent 70%);z-index:0;pointer-events:none}
body::after{content:"";position:fixed;bottom:-160px;left:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,70,229,.12),transparent 70%);z-index:0;pointer-events:none}

/* ---------- ШАПКА ---------- */
.app-header,.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.85rem 1.6rem;
  background:rgba(246,248,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;font:800 1.06rem 'Unbounded';white-space:nowrap;color:var(--ink)}
.app-header h1{font-size:1.1rem;margin:0;display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.logo{width:34px;height:34px;flex:none;border-radius:11px;background:var(--grad);display:grid;place-items:center;
  box-shadow:0 8px 20px -6px rgba(37,99,235,.5)}
.logo svg{width:18px;height:18px}
.brand-logo{height:30px;width:auto;display:block}
.user-info{margin-left:auto;display:flex;align-items:center;gap:.9rem;color:var(--muted);font-size:.9rem;flex-wrap:wrap;justify-content:flex-end}
.user-info a{color:var(--brand);text-decoration:none;font-weight:700}

/* ---------- КАРКАС ---------- */
.container,.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:2.2rem 1.6rem 4rem}
.container.narrow{max-width:460px}

/* ---------- КАРТОЧКИ ---------- */
.card,section.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1.6rem;box-shadow:var(--shadow)}
.card+.card{margin-top:1.2rem}
.eyebrow{font:800 .72rem 'Plus Jakarta Sans';letter-spacing:.13em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}
h2{font-size:1.4rem;margin:0 0 .4rem}
h3{font-size:1.06rem}

/* ---------- ФОРМЫ ---------- */
label{display:block;font:700 .82rem 'Plus Jakarta Sans';color:var(--ink);margin:.9rem 0 .35rem}
input,select{width:100%;padding:.8rem .95rem;border-radius:13px;border:1px solid var(--line);background:#fff;color:var(--ink);
  font:600 .98rem 'Plus Jakarta Sans';outline:none;transition:.15s}
input:focus,select:focus{border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.btn,button.primary,button.secondary,.primary,.secondary{border:0;cursor:pointer;font:800 .95rem 'Plus Jakarta Sans';
  padding:.82rem 1.2rem;border-radius:13px;transition:.18s}
.primary,.btn-primary{background:var(--grad);color:#fff;box-shadow:0 14px 30px -12px rgba(37,99,235,.5)}
.primary:hover,.btn-primary:hover{transform:translateY(-2px)}
.secondary,.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.secondary:hover{background:#f2f6ff}
.hint{margin-top:1rem;font-size:.83rem;color:var(--muted)}
.hint code{color:var(--brand);background:rgba(37,99,235,.09);padding:1px 6px;border-radius:6px;font-family:inherit;font-weight:700}

/* сообщения */
.error,.success{padding:.7rem .9rem;border-radius:11px;font-size:.9rem;font-weight:600;margin-top:.6rem}
.error{color:#9b1c1c;background:#fdeaea;border:1px solid #f6c9c9}
.success{color:#0a6b45;background:#e6f7ef;border:1px solid #b7e6cf}

/* ---------- ЧИПЫ ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem}
.chip{font:700 .8rem 'Plus Jakarta Sans';padding:.34rem .8rem;border-radius:20px;border:1px solid var(--line);background:#fff;color:var(--body)}
.chip.on{border-color:transparent;background:var(--grad2);color:#fff}

/* ---------- ТАБЛИЦЫ ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font:800 .7rem 'Plus Jakarta Sans';letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  padding:.55rem .55rem;border-bottom:2px solid var(--line)}
td{padding:.62rem .55rem;border-bottom:1px solid var(--line);color:var(--ink)}
tr:last-child td{border-bottom:0}
td.ok{color:var(--green);font-weight:700}
td.bad{color:var(--red);font-weight:700}
.c-code{font:800 .82rem 'Unbounded';color:var(--indigo)}
.score-pill{display:inline-block;font:800 .8rem 'Unbounded';padding:.16rem .55rem;border-radius:9px;color:#fff}
.s-good{background:var(--green)}.s-mid{background:var(--amber)}.s-bad{background:var(--red)}

/* ---------- ПЛИТКИ ---------- */
.tiles{display:grid;gap:1.1rem;grid-template-columns:repeat(3,1fr);margin:1rem 0 1.4rem}
.tile{padding:1.4rem;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden}
.tile::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.15),transparent 70%);opacity:.6}
.tile .num{font:800 2.4rem 'Unbounded';color:var(--ink);line-height:1}
.tile .lbl{font:700 .74rem 'Plus Jakarta Sans';letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}
.pill{display:inline-flex;align-items:center;font:800 .74rem 'Plus Jakarta Sans';padding:.16rem .55rem;border-radius:20px}
.pill.up{color:var(--green);background:rgba(18,183,106,.12)}

/* ---------- ПОЛОСЫ (критерии) ---------- */
.bars,#d-criteria{display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem}
.bar-row{display:grid;grid-template-columns:210px 1fr 54px;align-items:center;gap:.7rem;font-size:.84rem;font-weight:600}
.bar-lbl{color:var(--body)}
.bar-track,.track{display:block;height:11px;border-radius:8px;background:#eef1f9;overflow:hidden}
.bar-fill,.fill{display:block;height:100%;border-radius:8px;background:var(--brand-2)}
.bar-val{text-align:right;color:var(--muted);font-weight:700}

/* ---------- АВАТАРЫ / прочее ---------- */
.avatar{width:32px;height:32px;flex:none;border-radius:11px;display:inline-grid;place-items:center;
  font:800 .78rem 'Unbounded';color:#fff;margin-right:.6rem;vertical-align:middle;background:var(--grad)}
.mrow{cursor:pointer;transition:.13s}
.mrow:hover td{background:#eff4ff}
.section-h{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;flex-wrap:wrap}
.section-h h3{margin:0}
.section-h .eyebrow{margin-left:auto}

/* ---------- АДАПТИВ ---------- */
@media(max-width:820px){ .tiles{grid-template-columns:repeat(3,1fr)} }
@media(max-width:680px){
  .app-header,.topbar{padding:.7rem 1rem;gap:.6rem;flex-wrap:wrap}
  .user-info{font-size:.82rem;gap:.6rem}
  .container,.wrap{padding:1.6rem 1rem 3rem}
  .card,section.card{padding:1.25rem;border-radius:18px}
  h2{font-size:1.4rem}.section-h h3{font-size:1rem}
  .brand-logo{height:25px}
  .tiles{grid-template-columns:1fr;gap:.8rem}
  .tile .num{font-size:2.1rem}
  .bar-row{grid-template-columns:1fr auto;row-gap:.35rem;column-gap:.6rem}
  .bar-lbl{order:1;font-size:.82rem}
  .bar-val{order:2}
  .bar-track,.track{order:3;grid-column:1 / -1}
}
@media(max-width:380px){ .brand,.app-header h1{font-size:.98rem} }
@media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }