/* QMT — интерфейс строго на токенах дизайн-системы re:premium (tokens.css). */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

*{box-sizing:border-box}
body{margin:0;background:var(--color-canvas);color:var(--color-ink);font-family:var(--font-sans);
     font-size:var(--text-body);line-height:var(--lh-normal)}
a{color:var(--color-accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:var(--text-title1);line-height:var(--lh-snug);margin:0 0 var(--space-4)}
h2{font-size:var(--text-title2);line-height:var(--lh-snug);margin:0 0 var(--space-3)}
h3{font-size:var(--text-title3);margin:0 0 var(--space-2)}
small,.muted{color:var(--color-ink-2);font-size:var(--text-subhead)}

/* ——— шапка ——— */
.topbar{background:var(--color-surface);border-bottom:1px solid var(--color-line);position:sticky;top:0;z-index:50}
.topbar__in{max-width:1440px;margin:0 auto;padding:var(--space-3) var(--space-5);display:flex;align-items:center;gap:var(--space-4)}
.topbar__logo img{height:26px;display:block}
.topbar__app{font-weight:var(--fw-extrabold);letter-spacing:-.01em}
.topbar__spacer{flex:1}
.topbar__user{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-subhead)}
.role-chip{background:var(--color-surface-2);border-radius:var(--radius-pill);padding:4px 12px;font-size:var(--text-footnote);
           color:var(--color-ink-2);white-space:nowrap}
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
      border-radius:var(--radius-pill);background:var(--color-surface-2);font-size:18px}
.bell__dot{position:absolute;top:2px;right:2px;min-width:18px;height:18px;border-radius:var(--radius-pill);background:var(--color-action);
           color:var(--color-on-action);font-size:var(--text-caption);font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;padding:0 var(--space-1)}

/* ——— меню ——— */
.nav{background:var(--color-surface);border-bottom:1px solid var(--color-line);overflow-x:auto}
.nav__in{max-width:1440px;margin:0 auto;padding:0 var(--space-5);display:flex;gap:var(--space-1)}
.nav a{padding:var(--space-3) var(--space-4);color:var(--color-ink-2);font-size:var(--text-subhead);
       font-weight:var(--fw-medium);border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--color-ink);text-decoration:none}
.nav a.active{color:var(--color-ink);border-bottom-color:var(--color-action);font-weight:var(--fw-semibold)}
.nav .cnt{background:var(--color-action);color:var(--color-on-action);border-radius:var(--radius-pill);padding:1px 7px;
          font-size:var(--text-caption);font-weight:var(--fw-bold);margin-left:6px}

/* ——— раскладка ——— */
.wrap{max-width:1440px;margin:0 auto;padding:var(--space-6) var(--space-5) var(--space-10)}
.grid{display:grid;gap:var(--space-4)}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--space-4);align-items:start}
@media(max-width:1100px){.split{grid-template-columns:1fr}}

/* ——— карточки ——— */
.card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);
      padding:var(--space-5);box-shadow:var(--shadow-sm)}
.card--tight{padding:var(--space-4)}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.tile{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:var(--space-4)}
.tile__label{font-size:var(--text-footnote);color:var(--color-ink-2);margin-bottom:6px}
.tile__value{font-size:var(--text-title1);font-weight:var(--fw-extrabold);line-height:1.1;letter-spacing:-.02em}
.tile__hint{font-size:var(--text-footnote);color:var(--color-ink-2);margin-top:4px}
.tile--alert{border-color:var(--color-action);background:var(--color-action-tint)}
.tile--ok .tile__value{color:var(--color-success-ink)}

/* ——— таблицы ——— */
table{width:100%;border-collapse:collapse;font-size:var(--text-subhead)}
th{text-align:left;color:var(--color-ink-2);font-weight:var(--fw-semibold);font-size:var(--text-footnote);
   padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-line);position:sticky;top:0;background:var(--color-surface)}
td{padding:var(--space-3);border-bottom:1px solid var(--color-surface-2);vertical-align:middle}
tr:hover td{background:var(--color-surface-2)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.table-scroll{max-height:640px;overflow:auto;border-radius:var(--radius-md)}

/* ——— бейджи ——— */
.badge{display:inline-flex;align-items:center;gap:4px;border-radius:var(--radius-pill);padding:3px 10px;
       font-size:var(--text-caption);font-weight:var(--fw-semibold);white-space:nowrap}
.badge--ok{background:var(--color-success-tint);color:var(--color-success-ink)}
.badge--warn{background:var(--color-warning-tint);color:var(--color-warning-ink)}
.badge--bad{background:var(--color-action-tint);color:var(--color-action-600)}
.badge--neutral{background:var(--color-surface-2);color:var(--color-ink-2)}
.badge--info{background:var(--color-accent-tint);color:var(--color-accent)}

/* ——— кнопки ——— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--hit-min,44px);
     padding:10px var(--space-5);border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;
     font-family:inherit;font-size:var(--text-subhead);font-weight:var(--fw-semibold);transition:all var(--dur-fast,.15s) var(--ease,ease)}
.btn--primary{background:var(--color-action);color:var(--color-on-action)}
.btn--primary:hover{background:var(--color-action-600);text-decoration:none}
.btn--ghost{background:var(--color-surface);border-color:var(--color-line);color:var(--color-ink)}
.btn--ghost:hover{background:var(--color-surface-2);text-decoration:none}
.btn--sm{min-height:var(--control-h-sm,40px);padding:6px var(--space-4);font-size:var(--text-footnote)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ——— формы ——— */
label{font-size:var(--text-subhead);font-weight:var(--fw-medium)}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;padding:10px var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-md);
  font-family:inherit;font-size:var(--text-subhead);background:var(--color-surface);color:var(--color-ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--color-accent);outline-offset:1px;border-color:transparent}
.field{margin-bottom:var(--space-4)}
.field label{display:block;margin-bottom:6px}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:flex-end}

/* ——— плеер ——— */
.player{background:var(--color-dark);color:var(--color-on-dark);border-radius:var(--radius-lg);padding:var(--space-4)}
.player audio{width:100%;margin:var(--space-3) 0}
.player__meta{font-size:var(--text-footnote);color:color-mix(in srgb,var(--color-on-dark) 75%,transparent)}
.player__link{color:var(--color-on-dark);text-decoration:underline;text-underline-offset:2px}
.player__link:hover{color:var(--color-on-dark);opacity:.8}
.player__muted{color:color-mix(in srgb,var(--color-on-dark) 55%,transparent)}
.player__row{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.player .btn--ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:var(--color-on-dark)}
.player .btn--ghost:hover{background:rgba(255,255,255,.2)}
.tc{font-family:var(--font-mono);font-size:var(--text-footnote);color:var(--color-accent);cursor:pointer;
    background:var(--color-accent-tint);border-radius:var(--radius-sm);padding:2px 8px;border:none}

/* ——— критерии ——— */
.crit{padding:var(--space-3);border-bottom:1px solid var(--color-surface-2)}
.crit:last-child{border-bottom:none}
.crit__text{font-size:var(--text-subhead);margin-bottom:8px}
.crit__opts{display:flex;gap:var(--space-2);flex-wrap:wrap}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:inline-block;padding:7px 14px;border:1px solid var(--color-line);border-radius:var(--radius-pill);
          font-size:var(--text-footnote);cursor:pointer;background:var(--color-surface)}
.opt input:checked+span{background:var(--color-ink);color:var(--color-on-dark);border-color:var(--color-ink)}
.opt input:focus-visible+span{outline:2px solid var(--color-accent);outline-offset:2px}
.crit--critical{background:var(--color-action-tint);border-radius:var(--radius-md)}
.crit--critical .crit__text::after{content:"критичный";margin-left:8px;font-size:var(--text-caption);
  background:var(--color-action);color:var(--color-on-action);border-radius:var(--radius-pill);padding:2px 8px;vertical-align:middle}

/* ——— полоски и графики ——— */
.bar{height:8px;border-radius:4px;background:var(--color-surface-2);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--color-accent);border-radius:4px}
.bar--ok>i{background:var(--color-success)}
.bar--warn>i{background:var(--color-warning)}
.bar--bad>i{background:var(--color-action)}
.spark{display:flex;align-items:flex-end;gap:3px;height:56px}
.spark>i{flex:1;background:var(--color-accent-tint);border-radius:3px 3px 0 0;position:relative}
.spark>i>b{position:absolute;bottom:0;left:0;right:0;background:var(--color-accent);border-radius:3px 3px 0 0}

.alert{border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);
       font-size:var(--text-subhead)}
.alert--info{background:var(--color-accent-tint);color:var(--color-ink)}
.alert--warn{background:var(--color-warning-tint);color:var(--color-warning-ink)}
.alert--bad{background:var(--color-action-tint);color:var(--color-action-600)}
.alert--ok{background:var(--color-success-tint);color:var(--color-success-ink)}

.feed{list-style:none;padding:0;margin:0}
.feed li{display:flex;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--color-surface-2)}
.feed time{color:var(--color-ink-3);font-size:var(--text-footnote);min-width:130px}

.empty{text-align:center;color:var(--color-ink-2);padding:var(--space-8) var(--space-4)}
.score{font-size:var(--text-large);font-weight:var(--fw-extrabold);letter-spacing:-.02em}
.score--bad{color:var(--color-action-600)}
.score--ok{color:var(--color-success-ink)}