/* ===== Итоги: itogz.guloxy.com ===== */
[hidden]{display:none!important}

/* ---------- вход ---------- */
.login{max-width:520px;margin:0 auto;padding:36px 16px 60px}
.login__title{
  margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:min(30vw,170px);line-height:.82;letter-spacing:-.06em;
}
.login__title span{display:block}
.login__hl{
  display:inline-block!important;background:var(--signal);border:var(--b) solid var(--ink);box-shadow:var(--shadow);
  padding:.04em .1em 0 .06em;transform:rotate(-3deg);margin-top:.04em;
}
.login__lead{margin:34px 0 26px;font-size:16px;font-weight:500;line-height:1.45;color:var(--ink-2);max-width:380px}
.login__form{display:grid;gap:14px}
.field{display:block;border:var(--b) solid var(--ink);background:var(--paper-2);box-shadow:var(--shadow-sm)}
.field__label{
  display:block;background:var(--ink);color:var(--paper);padding:7px 12px;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.field input{
  display:block;width:100%;border:0;outline:0;background:transparent;border-radius:0;
  padding:14px;font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:.1em;
}
.field:focus-within{outline:3px solid var(--signal);outline-offset:3px}
.login__btn{height:60px;font-size:17px;background:var(--signal);color:var(--ink)}
.login__err{
  margin:0;background:var(--ink);color:var(--signal);padding:10px 12px;
  font-family:var(--mono);font-weight:700;font-size:13px;
}

/* ---------- верх ---------- */
.top{
  position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:var(--b) solid var(--ink);
  display:flex;align-items:center;gap:12px;padding:10px 16px;
}
.top__brand{
  font-family:var(--display);font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:-.04em;
  background:var(--ink);color:var(--paper);padding:5px 9px 3px;
}
.live{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.live i{width:10px;height:10px;background:var(--signal);border:2px solid var(--ink);animation:blink 1.6s steps(2) infinite}
.live.is-off i{background:var(--paper-3);animation:none}
.live.is-off span{color:var(--mute)}
@keyframes blink{50%{opacity:.25}}
.top__actions{margin-left:auto;display:flex;gap:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 13px;
  border:var(--b) solid var(--ink);background:var(--ink);color:var(--paper);box-shadow:var(--shadow-sm);
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border-radius:0;transition:transform .08s, box-shadow .08s;
}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn--ghost{background:var(--paper);color:var(--ink)}

/* ---------- раскладка ---------- */
.layout{max-width:1320px;margin:0 auto;padding:18px 16px 60px;display:grid;gap:18px}
.col{display:grid;gap:18px;align-content:start;min-width:0}
@media (min-width:1000px){
  .layout{grid-template-columns:minmax(380px,460px) 1fr;gap:28px;padding:28px 28px 80px}
  .col--stats{position:sticky;top:86px;max-height:calc(100vh - 100px);overflow:auto;padding:0 8px 8px 0;scrollbar-width:thin}
}

/* ---------- KPI ---------- */
.kpi{display:grid;grid-template-columns:1.35fr 1fr;border:var(--b) solid var(--ink);box-shadow:6px 6px 0 var(--signal);background:var(--ink);gap:var(--b);margin-right:6px}
.kpi__main{background:var(--ink);color:var(--paper);padding:14px 14px 16px}
.kpi__label{font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#A39B8C}
.kpi__avg{
  font-family:var(--display);font-weight:900;font-size:clamp(64px,19vw,96px);line-height:.95;letter-spacing:-.07em;color:var(--signal);
  margin:8px 0 6px -3px;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.kpi__avg small{font-size:.3em;letter-spacing:-.02em;color:var(--paper-3);margin-left:.15em}
.kpi__word{font-family:var(--display);font-weight:800;font-size:13px;text-transform:uppercase}
.kpi__side{display:grid;grid-template-rows:1fr 1fr;gap:var(--b)}
.kpi__cell{background:var(--paper);padding:12px 12px 10px;display:flex;flex-direction:column;justify-content:space-between}
.kpi__cell .kpi__label{color:var(--mute)}
.kpi__cell--hot{background:var(--signal)}
.kpi__cell--hot .kpi__label{color:var(--ink)}
.kpi__num{font-family:var(--display);font-weight:900;font-size:clamp(30px,9vw,42px);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.bump{animation:bump .5s var(--ease-slam)}
@keyframes bump{0%{transform:scale(1.25)}100%{transform:none}}

/* ---------- панели ---------- */
.panel{border:var(--b) solid var(--ink);background:var(--paper);box-shadow:var(--shadow);margin-right:5px;min-width:0}
.panel__head{display:flex;align-items:center;gap:10px;border-bottom:var(--b) solid var(--ink);padding:10px 12px;background:var(--paper-2)}
.panel__num{font-family:var(--display);font-weight:900;font-size:24px;line-height:1;color:transparent;-webkit-text-stroke:1.6px var(--ink);letter-spacing:-.06em}
.panel__head h2{margin:0;font-family:var(--display);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:-.01em}
.panel__count{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.06em;background:var(--ink);color:var(--paper);padding:3px 8px}

/* распределение */
.dist{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;align-items:end;height:190px;padding:16px 12px 0}
.dist__col{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;height:100%;min-width:0}
.dist__n{font-family:var(--mono);font-weight:700;font-size:11px;text-align:center;margin-bottom:4px;font-variant-numeric:tabular-nums}
.dist__bar{background:var(--ink);min-height:3px;transition:height .5s var(--ease-out)}
.dist__col.is-top .dist__bar{background:var(--signal);outline:var(--b) solid var(--ink);outline-offset:calc(-1 * var(--b))}
.dist__axis{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;padding:0 12px 12px;border-top:var(--b) solid var(--ink);margin:0 0 0}
.dist__axis span{text-align:center;font-family:var(--display);font-weight:900;font-size:14px;padding-top:6px}

/* формат */
.split{display:flex;height:46px;margin:16px 12px 0;border:var(--b) solid var(--ink);background:var(--paper-2);overflow:hidden}
.split i{display:flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--display);font-weight:900;font-size:14px;transition:flex-basis .5s var(--ease-out);min-width:0;overflow:hidden;white-space:nowrap}
.split i + i{border-left:var(--b) solid var(--ink)}
.split .s-yes{background:var(--signal)}
.split .s-maybe{background:var(--paper-3)}
.split .s-no{background:var(--ink);color:var(--paper)}
.split .s-none{background:repeating-linear-gradient(-45deg,var(--paper) 0 6px,var(--paper-2) 6px 12px)}
.legend{display:grid;grid-template-columns:1fr;gap:8px 14px;padding:14px 12px 14px}
.legend div{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.legend b{margin-left:auto;font-family:var(--mono);font-size:12.5px}
.legend em{width:14px;height:14px;border:2px solid var(--ink);flex:none}

/* по классам */
.classes{padding:6px 0}
.cls{
  display:grid;grid-template-columns:52px 1fr 46px;align-items:center;gap:10px;
  width:100%;padding:8px 12px;border:0;background:none;text-align:left;border-radius:0;
}
.cls + .cls{border-top:2px solid var(--paper-3)}
.cls:hover{background:var(--paper-2)}
.cls[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cls[aria-pressed="true"] .cls__track{background:#3a3733}
.cls__name{font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:-.03em}
.cls__mid{min-width:0}
.cls__track{display:block;height:12px;background:var(--paper-2);border:2px solid currentColor;position:relative}
.cls__track i{position:absolute;inset:0 auto 0 0;background:var(--signal);transition:width .5s var(--ease-out)}
.cls__meta{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;margin-top:4px;opacity:.75}
.cls__avg{font-family:var(--display);font-weight:900;font-size:18px;text-align:right;letter-spacing:-.04em}
.empty{padding:22px 12px;font-family:var(--mono);font-size:12.5px;color:var(--mute);text-align:center}

/* ---------- отзывы ---------- */
.filters{display:grid;gap:10px;padding:12px;border-bottom:var(--b) solid var(--ink)}
.search{
  width:100%;height:46px;border:var(--b) solid var(--ink);background:var(--paper-2);border-radius:0;outline:0;
  padding:0 12px;font-size:16px;font-weight:500;-webkit-appearance:none;appearance:none;
}
.search:focus{outline:3px solid var(--signal);outline-offset:2px}
.seg{display:grid;grid-template-columns:repeat(4,1fr);border:var(--b) solid var(--ink)}
.seg button{height:40px;border:0;background:var(--paper);font-family:var(--display);font-weight:800;font-size:13px;border-radius:0}
.seg button + button{border-left:var(--b) solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--signal)}
.filters__row{display:flex;gap:8px;flex-wrap:wrap}
.sel{flex:1 1 130px;position:relative}
.sel select{
  width:100%;height:42px;border:var(--b) solid var(--ink);background:var(--paper);border-radius:0;
  padding:0 30px 0 10px;font-weight:700;font-size:14px;-webkit-appearance:none;appearance:none;
}
.sel::after{content:"";position:absolute;right:12px;top:15px;width:8px;height:8px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg);pointer-events:none}
.toggle{
  flex:0 0 auto;height:42px;padding:0 12px;border:var(--b) solid var(--ink);background:var(--paper);border-radius:0;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
.toggle[aria-pressed="true"]{background:var(--signal)}

.feed{display:grid}
.card{display:grid;grid-template-columns:64px 1fr;border-bottom:var(--b) solid var(--ink);min-width:0}
.card:last-child{border-bottom:0}
.card__score{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:12px;
  border-right:var(--b) solid var(--ink);background:var(--paper-2);
  font-family:var(--display);font-weight:900;font-size:30px;line-height:1;letter-spacing:-.06em;
}
.card__score small{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--mute);margin-top:4px}
.card.is-high .card__score{background:var(--signal)}
.card.is-high .card__score small{color:var(--ink)}
.card.is-low .card__score{background:var(--ink);color:var(--paper)}
.card.is-low .card__score small{color:#A39B8C}
.card__body{padding:11px 12px 13px;min-width:0}
.card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.tag{
  display:inline-flex;align-items:center;height:22px;padding:0 7px;border:2px solid var(--ink);
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.tag--cls{background:var(--ink);color:var(--paper);font-family:var(--display);font-weight:900;font-size:12px;letter-spacing:-.02em}
.tag--yes{background:var(--signal)}
.tag--maybe{background:var(--paper-3)}
.tag--no{background:var(--paper);text-decoration:line-through;text-decoration-thickness:2px}
.card__time{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--mute);white-space:nowrap}
.card__text{margin:9px 0 0;font-size:15.5px;line-height:1.48;font-weight:500;white-space:pre-wrap;overflow-wrap:anywhere}
.card__text--none{color:var(--mute);font-family:var(--mono);font-size:12px;font-weight:500}
.card__foot{display:flex;align-items:center;gap:10px;margin-top:9px}
.card__src{font-family:var(--mono);font-size:10.5px;color:var(--mute);letter-spacing:.04em}
.card__del{
  margin-left:auto;height:28px;padding:0 9px;border:2px solid var(--ink);background:var(--paper);border-radius:0;
  font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.55;
}
.card__del:hover,.card__del:focus-visible{opacity:1}
.card__del.is-armed{opacity:1;background:var(--ink);color:var(--signal)}
.card mark{background:var(--signal);color:var(--ink);padding:0 2px}
.card.is-new{animation:newcard 1.8s ease}
@keyframes newcard{0%{background:var(--signal)}100%{background:transparent}}
.more{margin:14px auto;display:flex;width:calc(100% - 24px)}

/* ---------- тост ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;
  background:var(--ink);color:var(--paper);border:var(--b) solid var(--ink);box-shadow:4px 4px 0 var(--signal);
  padding:10px 14px;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.04em;white-space:nowrap;
  animation:rise .3s var(--ease-out);
}
@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}}

@media (min-width:430px){.legend{grid-template-columns:1fr 1fr}}
.kpi__sub{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;margin-top:4px}
@media (max-width:380px){
  .top__brand{font-size:18px}
  .live span{display:none}
  .kpi{grid-template-columns:1.2fr 1fr}
}
.shake{animation:shake .42s ease}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
