:root{
      --bg:#080b11; --bg2:#0b0f16; --panel:#0f141d; --panel2:#121927;
      --line:#1e2734; --line2:#28323f;
      --ink:#eaf0f7; --mut:#8794a6; --dim:#5a6675;
      --total:#ff5a5f;
      --sans:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
      --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
    }
    *{margin:0;padding:0;box-sizing:border-box}
    html,body{overflow-x:hidden}
    body{
      font-family:var(--sans); color:var(--ink); font-size:14px; line-height:1.4;
      background:
        radial-gradient(1200px 600px at 78% -8%, rgba(255,90,95,.06), transparent 60%),
        radial-gradient(1000px 520px at 8% 4%, rgba(74,168,255,.05), transparent 55%),
        linear-gradient(180deg,var(--bg2),var(--bg));
      background-attachment:fixed;
      padding:28px clamp(14px,4vw,44px) 40px;
      -webkit-font-smoothing:antialiased;
    }
    body::before{ /* тонкая сетка */
      content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
      background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
                       linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
      background-size:44px 44px;
      -webkit-mask-image:radial-gradient(1200px 700px at 50% 0%, #000 40%, transparent 90%);
              mask-image:radial-gradient(1200px 700px at 50% 0%, #000 40%, transparent 90%);
    }
    .wrap{position:relative; z-index:1; max-width:1320px; margin:0 auto}

    header{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px}
    .brand{display:flex; align-items:baseline; gap:12px}
    .brand h1{font-size:20px; font-weight:600; letter-spacing:.2px}
    .brand .kick{font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--dim)}
    /* Правая колонка шапки: плашка обновления, под ней курс и вход в админку. */
    .head-right{display:flex; flex-direction:column; align-items:flex-end; gap:9px}
    .head-row{display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end}
    .admin-btn{font-family:var(--mono); font-size:11.5px; color:var(--mut); text-decoration:none;
      border:1px solid var(--line); border-radius:999px; padding:6px 13px; white-space:nowrap;
      background:rgba(255,255,255,.02); transition:color .12s, border-color .12s, background .12s}
    .admin-btn:hover{color:var(--ink); border-color:#3d7fd6}
    /* Переключатель вида: видно, смотришь ты как все или с админскими вкладками. */
    .viewmode{display:inline-flex; border:1px solid var(--line); border-radius:999px;
      overflow:hidden; background:rgba(255,255,255,.02)}
    .vm{font-family:var(--mono); font-size:11px; color:var(--mut); background:transparent;
      border:0; padding:6px 13px; cursor:pointer; white-space:nowrap;
      transition:color .12s, background .12s}
    .vm + .vm{border-left:1px solid var(--line)}
    .vm:hover:not([disabled]){color:var(--ink)}
    .vm.active{color:#fff; background:rgba(61,127,214,.18)}
    .vm[disabled]{opacity:.45; cursor:default}
    .admin-btn.in{color:#8ee0ab; border-color:rgba(63,208,122,.35); background:rgba(63,208,122,.06)}
    /* Курс в шапке крупнее, чем был в панелях: его смотрят чаще всего. */
    .rate-chip.hero{padding:6px 14px 6px 10px; border-color:var(--line2);
      background:rgba(255,255,255,.035)}
    .rate-chip.hero b{font-size:15px}
    .rc-src{font-style:normal; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
      color:var(--dim)}
    .rc-side{font-size:11px; color:var(--mut); white-space:nowrap}
    .rc-unit{font-size:10.5px; color:var(--dim)}
    /* Переключатель стороны: обе величины в рублях за USDT, поэтому меняется
       только то, по какому курсу дашборд считает USDT. */
    .rc-swap{font-family:var(--mono); font-size:11px; color:var(--mut); cursor:pointer;
      background:rgba(255,255,255,.04); border:1px solid var(--line2); border-radius:7px;
      padding:2px 7px; line-height:1.4; transition:color .12s, border-color .12s}
    .rc-swap:hover{color:#fff; border-color:#3d7fd6}

    .live{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.15em;
      text-transform:uppercase; color:var(--mut); border:1px solid var(--line); border-radius:999px; padding:5px 11px; background:rgba(255,255,255,.02)}
    .live .pulse{width:7px; height:7px; border-radius:50%; background:#3fd07a; box-shadow:0 0 0 0 rgba(63,208,122,.6); animation:pp 2.2s infinite}
    @keyframes pp{0%{box-shadow:0 0 0 0 rgba(63,208,122,.5)}70%{box-shadow:0 0 0 7px rgba(63,208,122,0)}100%{box-shadow:0 0 0 0 rgba(63,208,122,0)}}

    /* Вкладки: трафик / капча */
    /* Вкладок стало четыре — на телефоне они не помещаются. Панель прокручивается
       вбок, а не сжимает подписи в две строки. */
    .tabs{display:flex; align-items:center; gap:6px; margin-bottom:20px;
      border-bottom:1px solid var(--line); padding-bottom:0;
      overflow-x:auto; scrollbar-width:none}
    .tabs::-webkit-scrollbar{display:none}
    .tab{font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--mut);
      background:transparent; border:0; border-bottom:2px solid transparent;
      padding:9px 14px 10px; cursor:pointer; transition:color .12s, border-color .12s;
      white-space:nowrap; flex:0 0 auto}
    .tab:hover{color:var(--ink)}
    .tab.active{color:#fff; border-bottom-color:var(--total)}
    .tab-ext{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--dim);
      text-decoration:none; padding:6px 4px; white-space:nowrap; flex:0 0 auto}
    .tab-ext:hover{color:var(--mut)}
    /* Фрейм капчи: своя прокрутка, высота под экран */
    .cap-panel{padding-bottom:18px}
    .cap-frame{width:100%; height:calc(100vh - 230px); min-height:560px; border:0;
      border-radius:12px; background:#0b0f16; display:block}

    /* Календарь */
    .calendar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px}
    .cal-btn{position:relative; font-family:var(--mono); background:var(--panel); border:1px solid var(--line);
      border-radius:12px; color:var(--mut); padding:9px 15px; cursor:pointer; display:flex; flex-direction:column;
      align-items:center; gap:3px; min-width:66px; transition:transform .12s, border-color .12s, background .12s, color .12s}
    .cal-btn:hover{border-color:var(--line2); color:var(--ink); transform:translateY(-1px)}
    .cal-btn .cal-wd{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
    .cal-btn .cal-dm{font-size:16px; font-weight:600; letter-spacing:.02em}
    .cal-btn .cal-mark{position:absolute; top:8px; right:9px; width:5px; height:5px; border-radius:50%; background:transparent}
    .cal-btn.is-today .cal-mark{background:var(--total); box-shadow:0 0 8px var(--total)}
    .cal-btn.active{background:linear-gradient(180deg,rgba(74,168,255,.16),rgba(74,168,255,.05)); border-color:#3d7fd6; color:#fff}
    .cal-btn.active .cal-wd{color:#7cc0ff}

    /* KPI */
    .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:24px}
    @media(max-width:560px){.kpis{grid-template-columns:repeat(2,1fr)}}
    .kpi{position:relative; background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
      border-radius:14px; padding:16px 16px 15px; overflow:hidden}
    .kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c,var(--line2))}
    .kpi .k-top{display:flex; align-items:center; gap:7px; margin-bottom:2px}
    .kpi .k-dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--c,var(--mut)); box-shadow:0 0 8px -2px var(--c)}
    .kpi .k-label{font-size:12px; color:var(--mut); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
    .kpi .k-nick{font-family:var(--mono); font-size:14px; color:#d7dee7; font-weight:600; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
    .kpi .k-person{font-size:13px; color:var(--mut); font-weight:500; letter-spacing:.01em; margin:2px 0 10px 16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
    .kpi .k-val{font-family:var(--mono); font-size:30px; font-weight:600; line-height:1; letter-spacing:-.5px; font-variant-numeric:tabular-nums}
    .kpi .k-sub{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:7px}
    /* Средние — служебная сноска карточки: отделена волосяной линией, приглушена. */
    /* Итог за текущую неделю — то, что реально читают: заметнее средних, но
       не спорит с числом за день. */
    .kpi .k-week{display:flex; align-items:baseline; gap:7px; margin-top:11px; padding-top:9px;
      border-top:1px solid rgba(255,255,255,.055);
      font-family:var(--mono); font-size:13px; color:var(--mut); letter-spacing:.01em; white-space:nowrap}
    .kpi .k-week i{font-style:normal; font-size:10.5px; color:var(--dim)}
    .kpi .k-week b{font-weight:600; color:#e6edf5; font-variant-numeric:tabular-nums}
    /* Прошлая неделя за такой же отрезок + дельта */
    .kpi .k-prev{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:7px; row-gap:1px;
      margin-top:3px; font-family:var(--mono); font-size:11px; color:var(--dim); white-space:nowrap}
    .kpi .k-prev i{font-style:normal; font-size:10.5px}
    .kpi .k-prev b{font-weight:500; color:var(--mut); font-variant-numeric:tabular-nums}
    .kpi .k-prev em{font-style:normal; font-weight:600; font-size:10.5px; color:var(--dim)}
    .kpi .k-prev em.up{color:#3fd07a}
    .kpi .k-prev em.down{color:#ff7b72}
    /* flex-wrap: на узкой карточке вторая величина переносится на строку ниже,
       но НЕ обрезается (у команды числа 5-значные и в одну строку влезают не всегда). */
    .kpi .k-avg{display:flex; flex-wrap:wrap; column-gap:9px; row-gap:2px; margin-top:5px;
      font-family:var(--mono); font-size:10.5px; color:var(--dim); letter-spacing:.01em}
    .kpi .k-avg span{white-space:nowrap}
    .kpi .k-avg i{font-style:normal; opacity:.75}
    .kpi .k-avg b{font-weight:500; color:var(--mut)}
    .kpi--total{--c:var(--total)}
    .kpi--total{background:linear-gradient(180deg,rgba(255,90,95,.10),rgba(255,90,95,.02))}
    .kpi--total .k-val{font-size:38px; color:#fff}
    .kpi--total .k-label{color:#ffb3b5; letter-spacing:.02em; text-transform:uppercase; font-size:11px; letter-spacing:.16em}

    /* ── Ведомость за завершённую неделю ────────────────────────────────────
       Другой ритм, чем у «Трафика»: никаких графиков и живого пульса. Неделя
       закрыта, цифры окончательные — это документ, а не монитор. Читается сверху
       вниз: печать периода → итог → построчно кто сколько принёс. */
    .wk-head{position:relative; overflow:hidden; display:flex; align-items:flex-end;
      justify-content:space-between; gap:22px; flex-wrap:wrap; margin-bottom:18px;
      padding:20px 22px 18px; border:1px solid var(--line); border-radius:16px;
      background:linear-gradient(180deg,var(--panel2),var(--panel));
      box-shadow:0 12px 34px -22px rgba(0,0,0,.9)}
    .wk-head::after{content:""; position:absolute; right:-70px; top:-95px; width:270px; height:270px;
      border-radius:50%; pointer-events:none;
      background:radial-gradient(circle,rgba(255,90,95,.13),transparent 68%)}
    .wk-left{position:relative; z-index:1; display:flex; flex-direction:column; gap:7px}
    .wk-stamp{align-self:flex-start; font-family:var(--mono); font-size:10px; letter-spacing:.24em;
      text-transform:uppercase; color:#8ee0ab; border:1px solid rgba(63,208,122,.32);
      background:rgba(63,208,122,.06); border-radius:999px; padding:4px 11px}
    .wk-range{font-family:var(--mono); font-size:27px; font-weight:600; letter-spacing:-.4px; color:#fff}
    .wk-sub{font-size:12px; color:var(--dim); letter-spacing:.02em; max-width:44ch}
    .wk-right{position:relative; z-index:1; text-align:right}
    .wk-glab{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
      color:var(--dim); margin-bottom:7px}
    .wk-grand{font-family:var(--mono); font-size:46px; font-weight:600; line-height:1; color:#fff;
      letter-spacing:-1.4px; font-variant-numeric:tabular-nums}
    .wk-gsub{display:flex; align-items:baseline; justify-content:flex-end; flex-wrap:wrap;
      gap:9px; margin-top:9px; font-family:var(--mono); font-size:12.5px; color:var(--mut)}
    .wk-gsub b{color:#e6edf5; font-weight:600; font-variant-numeric:tabular-nums}
    .wk-gsub em{font-style:normal; font-weight:600; font-size:12px; color:var(--dim)}
    .wk-gsub em.up{color:#3fd07a}
    .wk-gsub em.down{color:#ff7b72}
    .wk-gsub .sep{color:var(--line2)}

    /* Печать периода: зелёная — неделя закрыта, янтарная — ещё идёт. */
    .wk-stamp.live{color:#f2c744; border-color:rgba(242,199,68,.32); background:rgba(242,199,68,.06)}
    .wk-stamp.neutral{color:var(--mut); border-color:var(--line2); background:rgba(255,255,255,.03)}
    .wk-proj{margin-top:9px; font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.02em}
    .wk-proj b{color:#cfd8e3; font-weight:600; font-variant-numeric:tabular-nums}
    /* Ещё не наступивший день недели — штриховка, а не пустая ячейка: видно, что
       столбца нет не потому, что человек не работал, а потому что дня ещё не было. */
    .wk-days span.fut{background:repeating-linear-gradient(135deg,
      rgba(255,255,255,.055) 0 3px, rgba(255,255,255,0) 3px 6px)}

    /* Плашка курса: значение, спарклайн за сутки и возраст. Курс живой (раз в
       минуту), поэтому возраст показываем честно, а протухший приглушаем. */
    .rate-chip{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
      font-size:11.5px; color:var(--mut); border:1px solid var(--line); border-radius:999px;
      padding:4px 12px 4px 9px; background:rgba(255,255,255,.02); white-space:nowrap}
    .rate-chip b{color:#e6edf5; font-weight:600; font-size:13px; font-variant-numeric:tabular-nums}
    .rate-chip i{font-style:normal; color:var(--dim); font-size:10.5px}
    .rate-chip.stale{opacity:.55}
    .rate-chip .spark{display:block; flex:0 0 auto}
    .rate-chip .spark path{fill:none; stroke:var(--sp,#7cc0ff); stroke-width:1.4;
      stroke-linejoin:round; stroke-linecap:round}
    /* USDT под рублями — вторичная величина, но читаемая. */
    .wk-rub u{display:block; text-decoration:none; font-size:11px; color:var(--dim);
      margin-top:2px; letter-spacing:.01em}
    /* Повышенная ставка в строке — чуть светлее рублей, но не спорит с USDT. */
    .wk-rub b{font-weight:600; color:#8ee0ab}
    .wk-row.foot .wk-rub u{color:#ffb3b5; font-size:12px}
    .wk-row.foot .wk-fix{font-size:10px}

    .wk-rate{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
      font-size:11px; letter-spacing:.05em; color:var(--dim); cursor:pointer}
    .wk-rate input{width:76px; background:#0a0f17; border:1px solid var(--line2); border-radius:8px;
      color:var(--ink); font-family:var(--mono); font-size:13px; padding:5px 8px; text-align:right}
    .wk-rate input:focus{outline:none; border-color:#3d7fd6; box-shadow:0 0 0 3px rgba(61,127,214,.16)}

    .wk-rows{min-width:860px}
    .wk-row{display:grid; align-items:center; gap:14px; padding:11px 14px;
      grid-template-columns:26px minmax(150px,1.25fr) 122px minmax(70px,1fr) 96px 48px 62px 112px;
      border-bottom:1px solid rgba(255,255,255,.035)}
    .wk-row .r{text-align:right}
    .wk-row.head{font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
      color:var(--dim); background:#0c111a; border-bottom:1px solid var(--line2); padding:9px 14px}
    .wk-row.body:hover{background:rgba(74,168,255,.05)}
    .wk-rank{font-family:var(--mono); font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums}
    .wk-row.top .wk-rank{color:var(--c); font-weight:600}
    .wk-who{display:flex; align-items:center; gap:9px; min-width:0}
    .wk-dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--c);
      box-shadow:0 0 8px -2px var(--c)}
    .wk-nick{font-family:var(--mono); font-size:13.5px; font-weight:600; color:#dbe3ec;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
    .wk-name{font-size:12.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
    /* Мини-график по дням: видно, ровно человек шёл всю неделю или отработал в два дня. */
    .wk-days{display:flex; align-items:flex-end; gap:3px; height:28px}
    .wk-days span{flex:1; height:100%; border-radius:3px; background:rgba(255,255,255,.045);
      position:relative; overflow:hidden}
    .wk-days span i{position:absolute; left:0; right:0; bottom:0; display:block; border-radius:3px;
      background:var(--c); opacity:.8}
    .wk-bar{height:9px; border-radius:999px; background:rgba(255,255,255,.05); overflow:hidden}
    .wk-bar i{display:block; height:100%; border-radius:999px; background:var(--c);
      box-shadow:0 0 12px -4px var(--c)}
    .wk-num{font-family:var(--mono); font-size:16px; font-weight:600; color:#eaf0f7;
      font-variant-numeric:tabular-nums; text-align:right}
    .wk-pct{font-family:var(--mono); font-size:12px; color:var(--mut); text-align:right;
      font-variant-numeric:tabular-nums}
    .wk-d{font-style:normal; font-family:var(--mono); font-size:11.5px; font-weight:600;
      color:var(--dim); display:block; text-align:right; font-variant-numeric:tabular-nums}
    .wk-d.up{color:#3fd07a}
    .wk-d.down{color:#ff7b72}
    /* Деньги: основная величина — USDT (в ней и считаемся), рубли под ней справочно. */
    .wk-rub{font-family:var(--mono); font-size:14px; color:#ffc9cb; text-align:right;
      font-variant-numeric:tabular-nums}
    /* Фикс — это статус, а не сумма, поэтому не число, а пилюля. */
    .wk-fix{justify-self:end; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
      color:#f2c744; border:1px solid rgba(242,199,68,.3); background:rgba(242,199,68,.06);
      border-radius:999px; padding:3px 10px; white-space:nowrap}
    .wk-row.foot{background:rgba(255,90,95,.07); border-top:1px solid var(--line2);
      border-bottom:0; padding-top:13px; padding-bottom:13px}
    .wk-row.foot .wk-nick{color:#fff}
    .wk-row.foot .wk-num{font-size:18px; color:#fff}
    .wk-row.foot .wk-rub{font-size:16px; color:#fff; font-weight:600}
    .wk-note{font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:12px;
      letter-spacing:.03em; line-height:1.55}
    .wk-empty{padding:36px 16px; text-align:center; color:var(--mut); font-size:13px}
    @keyframes wkIn{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
    .wk-row.anim{animation:wkIn .36s cubic-bezier(.22,.7,.3,1) backwards}
    @media(prefers-reduced-motion:reduce){.wk-row.anim{animation:none}}
    @media(max-width:640px){
      .wk-head{padding:16px 16px 14px}
      .wk-range{font-size:21px}
      .wk-grand{font-size:34px}
      /* Плашка курса в одну строку занимает ~580px и на телефоне растягивала всю
         страницу вбок — разрешаем ей переноситься и не давим шапку в строку. */
      header{flex-direction:column; align-items:stretch; gap:10px}
      .head-right{width:100%; align-items:stretch}
      .head-row{width:100%; justify-content:flex-start}
      .rate-chip{white-space:normal; flex-wrap:wrap; row-gap:3px; max-width:100%}
      .rate-chip .rc-side{white-space:normal}
      .live{align-self:flex-start}
    }

    /* ── Раскрывающаяся карточка: подробности по участнику ──────────────────
       Панель разворачивается ПОД сеткой карточек, а не внутри карточки: в 150px
       ширины таблица потерь не живёт. Открыта всегда одна — это разбор одного
       человека, а не сравнение. */
    .kpi.clickable{cursor:pointer; transition:border-color .14s, transform .14s, box-shadow .14s}
    .kpi.clickable:hover{transform:translateY(-1px); border-color:var(--line2)}
    .kpi.clickable:focus-visible{outline:2px solid var(--c,#4aa8ff); outline-offset:2px}
    .kpi.open{border-color:var(--c); box-shadow:inset 0 0 0 1px var(--c)}
    .kpi .k-chev{position:absolute; right:11px; bottom:9px; width:8px; height:8px;
      border-right:1.5px solid var(--dim); border-bottom:1.5px solid var(--dim);
      transform:rotate(45deg); transition:transform .18s, border-color .14s}
    .kpi.open .k-chev{transform:rotate(-135deg); border-color:var(--c)}

    .drawer{position:relative; margin:-8px 0 24px; padding:18px 18px 16px;
      border:1px solid var(--line); border-left:3px solid var(--c,var(--line2));
      border-radius:14px; background:linear-gradient(180deg,var(--panel2),var(--panel));
      box-shadow:0 16px 40px -28px rgba(0,0,0,.95)}
    @keyframes drIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
    .drawer{animation:drIn .22s cubic-bezier(.22,.7,.3,1)}
    @media(prefers-reduced-motion:reduce){.drawer{animation:none}}
    .dr-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:14px}
    .dr-dot{width:9px; height:9px; border-radius:50%; background:var(--c); flex:0 0 auto;
      box-shadow:0 0 8px -2px var(--c); align-self:center}
    .dr-nick{font-family:var(--mono); font-size:15px; font-weight:600; color:#e6edf5}
    .dr-name{font-size:13px; color:var(--mut)}
    .dr-date{font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.04em}
    .dr-close{margin-left:auto; background:transparent; border:1px solid var(--line);
      color:var(--dim); border-radius:8px; font-size:12px; line-height:1; padding:5px 9px;
      cursor:pointer; font-family:var(--mono)}
    .dr-close:hover{color:var(--ink); border-color:var(--line2)}

    /* Воронка: выдано → получено → забрано. Проценты между ступенями — то, ради
       чего всё и открывается. */
    .dr-funnel{display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; margin-bottom:16px}
    .fn{flex:1 1 130px; min-width:120px; padding:11px 13px; border-radius:11px;
      background:rgba(255,255,255,.025); border:1px solid var(--line)}
    .fn i{display:block; font-style:normal; font-family:var(--mono); font-size:9.5px;
      letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:5px}
    .fn b{font-family:var(--mono); font-size:21px; font-weight:600; color:#eaf0f7;
      font-variant-numeric:tabular-nums; letter-spacing:-.3px}
    .fn u{display:block; text-decoration:none; font-family:var(--mono); font-size:11px;
      color:var(--mut); margin-top:3px}
    .fn-arrow{align-self:center; font-family:var(--mono); font-size:11px; color:var(--dim);
      white-space:nowrap; padding:0 2px}
    .fn-loss{background:rgba(255,123,114,.07); border-color:rgba(255,123,114,.25)}
    .fn-loss b{color:#ff9d96}
    .fn-loss u{color:#ff9d96; opacity:.75}

    .dr-scope{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px}
    .seg{font-family:var(--mono); font-size:11.5px; color:var(--mut); background:rgba(255,255,255,.03);
      border:1px solid var(--line); border-radius:999px; padding:5px 13px; cursor:pointer;
      transition:color .12s, border-color .12s, background .12s}
    .seg:hover{color:var(--ink); border-color:var(--line2)}
    .seg.active{color:#fff; border-color:var(--c); background:rgba(255,255,255,.06)}
    .dr-slices{margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
    .dr-slices .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.14em;
      text-transform:uppercase; color:var(--dim); margin-right:2px}
    .chip{font-family:var(--mono); font-size:11px; color:var(--mut); background:transparent;
      border:1px dashed var(--line2); border-radius:999px; padding:5px 12px; cursor:pointer;
      transition:color .12s, border-color .12s, background .12s}
    .chip:hover{color:var(--ink); border-color:#3d7fd6; border-style:solid}
    .chip.active{color:#fff; border-style:solid; border-color:#3d7fd6; background:rgba(61,127,214,.12)}
    .chip[disabled]{opacity:.5; cursor:default}

    .dr-body{max-height:340px; overflow:auto; border:1px solid var(--line); border-radius:11px}
    .dr-body::-webkit-scrollbar{width:9px; height:9px}
    .dr-body::-webkit-scrollbar-thumb{background:#232d3a; border-radius:9px}
    .dr-body table{width:100%; border-collapse:collapse; font-family:var(--mono);
      font-variant-numeric:tabular-nums; font-size:12.5px; min-width:520px}
    .dr-body thead th{position:sticky; top:0; z-index:1; background:#0c111a; color:var(--mut);
      font-weight:500; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
      padding:8px 11px; text-align:right; border-bottom:1px solid var(--line2); white-space:nowrap}
    .dr-body thead th:first-child{text-align:left}
    .dr-body tbody td{padding:6px 11px; text-align:right;
      border-bottom:1px solid rgba(255,255,255,.03)}
    .dr-body tbody td:first-child{text-align:left; color:var(--mut)}
    .dr-body tbody tr:hover{background:rgba(74,168,255,.05)}
    .dr-body .loss{color:#ff9d96}
    .dr-body .loss.zero{color:var(--dim)}
    .dr-body .muted{color:var(--dim)}
    /* Свой ключ в общем списке — подсветить, чтобы не искать глазами. */
    .dr-body tbody tr.mine td{background:rgba(255,90,95,.06)}
    .dr-body tbody tr.mine td:first-child{color:#ffc9cb}
    .dr-body tbody tr.mine em{font-style:normal; font-size:10px; color:var(--dim);
      letter-spacing:.1em; text-transform:uppercase}
    .pd-range{display:inline-flex; align-items:center; gap:6px}
    .pd-dash{color:var(--dim); font-family:var(--mono)}
    .pd-date{font-family:var(--mono); font-size:12px; color:var(--ink);
      background:#0a0f17; border:1px solid var(--line2); border-radius:999px;
      padding:5px 12px; cursor:pointer}
    .pd-date:focus{outline:none; border-color:#3d7fd6; box-shadow:0 0 0 3px rgba(61,127,214,.16)}
    .pd-date::-webkit-calendar-picker-indicator{filter:invert(.6); cursor:pointer}
    /* Распределение по минутам: 8 столбиков, по одному на минуту жизни активации
       (TTL как раз 8 минут). Видно, приходит код сразу или на излёте. */
    /* Три источника активаций: заказано в боте / через API / принято извне.
       Раньше всё складывалось в одно число, и было не понять, что откуда. */
    .src{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
      gap:10px;margin-bottom:14px}
    .src-card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;
      padding:11px 12px;border-top:2px solid var(--sc,var(--dim))}
    .src-card .sc-t{font-size:11px;color:var(--mut);font-weight:600;letter-spacing:.04em;
      text-transform:uppercase}
    .src-card .sc-v{font-size:26px;font-weight:700;margin-top:6px;
      font-variant-numeric:tabular-nums;line-height:1.05}
    .src-card .sc-u{font-size:11px;color:var(--dim);margin-top:2px}
    .src-card .sc-b{margin-top:8px;height:3px;background:var(--line);border-radius:2px;
      overflow:hidden}
    .src-card .sc-b i{display:block;height:100%;background:var(--sc,var(--dim))}
    .src-card .sc-m{font-size:11px;color:var(--mut);margin-top:7px;
      border-top:1px solid var(--line);padding-top:6px}
    .src-card .sc-m b{color:var(--ink);font-weight:600}
    .src-card .sc-w{font-size:10.5px;color:var(--dim);margin-top:4px;word-break:break-all}
    .src-note{font-size:11px;color:var(--dim);margin:-6px 0 12px}
    .mins-wrap{border:1px solid var(--line); border-radius:11px; padding:12px 14px 10px;
      margin-bottom:12px; background:rgba(255,255,255,.02)}
    .mins-title{font-family:var(--mono); font-size:10px; letter-spacing:.14em;
      text-transform:uppercase; color:var(--dim); margin-bottom:10px}
    .mins-title span{color:var(--mut); letter-spacing:.04em; text-transform:none; font-size:11px}
    .mins{display:flex; align-items:flex-end; gap:8px}
    .min-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px}
    .min-bar{width:100%; height:46px; display:flex; align-items:flex-end;
      background:rgba(255,255,255,.04); border-radius:4px; overflow:hidden}
    .min-bar i{display:block; width:100%; background:#4aa8ff; border-radius:4px; opacity:.8}
    .min-col b{font-family:var(--mono); font-size:12px; color:#e6edf5;
      font-variant-numeric:tabular-nums}
    .min-col u{font-family:var(--mono); font-size:10px; color:var(--dim); text-decoration:none}
    .dr-body tbody td em{font-style:normal; font-size:10.5px; color:var(--dim)}
    .dr-msg{padding:26px 16px; text-align:center; color:var(--mut); font-size:13px}
    .dr-msg.err{color:#ff9d96}
    .dr-note{font-family:var(--mono); font-size:10.5px; color:var(--dim); margin-top:9px;
      line-height:1.5}

    /* Панели */
    .panel{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
      border-radius:16px; padding:18px 18px 14px; margin-bottom:20px; box-shadow:0 12px 34px -22px rgba(0,0,0,.9)}
    .panel-head{display:flex; align-items:baseline; justify-content:space-between;
      gap:12px; margin-bottom:8px; flex-wrap:wrap}
    .panel-title{font-size:15px; font-weight:600; letter-spacing:.2px}
    .panel-note{font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.04em}
    /* Подстраховка: если Plotly всё же нарисует шире контейнера, прокрутка
       будет внутри графика, а не у всей страницы. */
    .plot{width:100%; overflow-x:auto}
    /* Подсказка своего рисовальщика графиков — одна на все ряды, как было в
       готовой библиотеке. Курсор её не перехватывает, иначе она мигала бы. */
    .ch-tip{position:absolute; display:none; pointer-events:none; z-index:5;
      background:#0b0f16; border:1px solid var(--line2); border-radius:8px;
      padding:7px 9px; font-family:var(--mono); font-size:12px; color:var(--ink);
      white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.45)}
    .ch-tip b{display:block; color:var(--mut); font-weight:500; margin-bottom:4px}
    .ch-tip span{display:flex; align-items:center; gap:6px; line-height:1.55}
    .ch-tip i{width:8px; height:8px; border-radius:2px; flex:none}
    .ch-tip em{font-style:normal; margin-left:auto; padding-left:12px;
      font-variant-numeric:tabular-nums}
    #chart-hourly{height:340px}
    #chart-cumulative{height:320px}

    /* Таблица */
    .table-scroll{overflow-x:auto; border-radius:12px; border:1px solid var(--line)}
    .table-scroll::-webkit-scrollbar{height:9px}
    .table-scroll::-webkit-scrollbar-thumb{background:#232d3a; border-radius:9px}
    table{width:100%; border-collapse:collapse; font-family:var(--mono); font-variant-numeric:tabular-nums; min-width:760px}
    thead th{position:sticky; top:0; background:#0c111a; color:var(--mut); font-weight:500; font-size:11px;
      letter-spacing:.03em; padding:10px 12px; text-align:right; border-bottom:1px solid var(--line2); white-space:nowrap}
    thead th small{display:block; color:var(--dim); font-weight:400; font-size:10px; letter-spacing:.06em; text-transform:uppercase}
    thead th:first-child{text-align:left}
    tbody td{padding:7px 12px; text-align:right; border-bottom:1px solid rgba(255,255,255,.035); font-size:13px}
    tbody td:first-child{text-align:left; color:var(--mut); font-weight:500}
    tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
    tbody tr:hover{background:rgba(74,168,255,.06)}
    .col-h{color:var(--dim)}
    .total-col{background:rgba(255,90,95,.07); color:#ffc9cb; font-weight:600}
    thead .total-col{color:#ff9a9d}

    /* Вкладка «Серверы»: аренда командных машин, срок и остаток дней. */
    .srv-sum{display:flex; flex-wrap:wrap; gap:18px; margin:0 0 14px; font-family:var(--mono);
      font-size:12px; color:var(--dim); letter-spacing:.02em}
    .srv-sum b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
    .srv-table{min-width:980px}
    .srv-table tbody td:first-child{color:var(--ink); font-weight:600}
    .srv-table td, .srv-table th{text-align:left}
    .srv-table td:last-child, .srv-table th:last-child{text-align:right}
    .srv-ip{color:var(--mut)}
    .srv-plan{color:var(--dim); font-size:12px; white-space:nowrap}
    .srv-left{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
    .srv-dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:8px;
      vertical-align:middle}
    .srv-dot.srv-ok{background:#3fb950}
    .srv-dot.srv-amber{background:#d29922}
    .srv-dot.srv-red{background:#f85149}
    td.srv-ok{color:#7ee08a}
    td.srv-amber{color:#e3b341}
    td.srv-red{color:#ff7b72}
    .srv-assigned{color:var(--ink)}
    .srv-assigned .srv-who{display:block; white-space:nowrap; line-height:1.5}
    .srv-assigned .srv-who i{color:var(--dim); font-style:normal; font-size:11px}
    .srv-free{color:var(--dim)}
    .srv-price{white-space:nowrap}
    .srv-fee{color:var(--dim)}
    .srv-table thead th small{text-align:right}
    .srv-empty{color:var(--dim); font-family:var(--mono); font-size:12px; padding:14px 2px}
    .srv-empty code{color:var(--mut)}
    /* Вкладка «Экономика»: та же таблица, что у серверов, плюс
       подпись под названием статьи и строка-сноска с курсом. */    /* --- Экономика ------------------------------------------- */
    /* Главный вопрос вкладки — «сколько уходит за неделю», поэтому цифра
       одна и крупная, а разбивка живёт под ней плитками. */
    .exp-hero{display:flex; flex-wrap:wrap; align-items:flex-end; gap:20px;
      justify-content:space-between; padding:18px 20px; margin:2px 0 2px;
      border:1px solid var(--line); border-radius:12px;
      background:linear-gradient(180deg,var(--panel2),var(--panel))}
    .exp-hero-label{font-family:var(--mono); font-size:11px; letter-spacing:.08em;
      text-transform:uppercase; color:var(--mut)}
    .exp-hero-total{margin:7px 0 5px; font-size:clamp(30px,4.2vw,40px); font-weight:600;
      line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
    .exp-hero-total small{margin-left:9px; font-size:12px; font-weight:400; color:var(--mut);
      letter-spacing:.04em; text-transform:uppercase; vertical-align:middle}
    /* Прибыль зелёная, убыток красный — знак должен читаться без чтения цифры. */
    .exp-pos{color:#3fb950}
    .exp-neg{color:#ff7b72}
    /* Числовые колонки выравниваем вместе с их заголовками: .srv-table гасит
       глобальный right-align, из-за чего шапка оставалась слева, а цифры
       уезжали вправо — колонка читалась как «поехавшая». */
    .exp-table{table-layout:fixed; min-width:720px}
    .exp-table th:nth-child(n+3), .exp-table td:nth-child(n+3){text-align:right}
    .exp-table col.c1{width:30%} .exp-table col.c2{width:25%}
    .exp-table col.c3{width:15%} .exp-table col.c4{width:15%} .exp-table col.c5{width:15%}
    .exp-pnl th:nth-child(n+2), .exp-pnl td:nth-child(n+2){text-align:right}
    .exp-table td, .exp-table th{padding:9px 12px; vertical-align:top}
    .exp-table td:first-child{overflow-wrap:anywhere}
    .exp-delta{font-family:var(--mono); font-size:12px}
    .exp-delta i{font-style:normal; margin-left:6px; color:var(--dim)}
    .exp-delta.up{color:#ff7b72}
    .exp-delta.down{color:#3fb950}
    .exp-delta.flat{color:var(--mut)}
    .exp-chips{display:flex; flex-wrap:wrap; gap:8px}
    .exp-chip{min-width:108px; padding:9px 13px; border:1px solid var(--line);
      border-radius:10px; background:rgba(255,255,255,.02)}
    .exp-chip span{display:block; font-family:var(--mono); font-size:10px;
      letter-spacing:.06em; text-transform:uppercase; color:var(--dim)}
    .exp-chip b{display:block; margin-top:4px; font-size:15px; color:var(--ink);
      font-variant-numeric:tabular-nums}
    .exp-switch{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:16px 0 12px}
    .exp-seg{display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line);
      border-radius:10px; background:rgba(255,255,255,.02)}
    .exp-seg-btn{padding:6px 14px; border:0; border-radius:8px; background:transparent;
      color:var(--mut); font-family:var(--mono); font-size:11px; letter-spacing:.03em;
      cursor:pointer; transition:background .12s,color .12s}
    .exp-seg-btn:hover{color:var(--ink)}
    .exp-seg-btn.active{background:var(--panel2); color:var(--ink); font-weight:600;
      box-shadow:inset 0 0 0 1px var(--line2)}
    .exp-switch-hint{font-family:var(--mono); font-size:11px; color:var(--dim)}
    .exp-loading{opacity:.45; transition:opacity .12s}
    /* Калькулятор ставок: правишь копейки — пересчитывается вся вкладка. */
    .exp-calc{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px;
      padding:12px 14px; margin:0 0 6px; border:1px solid var(--line);
      border-radius:10px; background:rgba(255,255,255,.02)}
    .exp-calc-title{font-family:var(--mono); font-size:10px; letter-spacing:.06em;
      text-transform:uppercase; color:var(--dim); align-self:center; margin-right:2px}
    .exp-calc-field{display:flex; flex-direction:column; gap:4px;
      font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--mut)}
    .exp-calc-field input{width:88px; padding:6px 9px; border:1px solid var(--line2);
      border-radius:7px; background:var(--panel); color:var(--ink);
      font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums}
    .exp-calc-field input:focus{outline:none; border-color:var(--mut)}
    .exp-calc-btn{padding:7px 14px; border:1px solid var(--line2); border-radius:8px;
      background:transparent; color:var(--ink); font-family:var(--mono); font-size:11px;
      cursor:pointer}
    .exp-calc-btn:hover{border-color:var(--ink)}
    .exp-calc-btn.save{color:var(--mut)}
    .exp-calc-note{font-family:var(--mono); font-size:11px; color:var(--dim);
      margin-left:auto; align-self:center}
    .exp-block{margin-top:20px}
    .exp-block-head{display:flex; align-items:baseline; gap:12px; margin:0 0 9px}
    .exp-block-title{font-size:14px; font-weight:600; color:var(--ink); letter-spacing:.01em}
    .exp-block-sum{margin-left:auto; font-family:var(--mono); font-size:13px;
      color:var(--ink); font-variant-numeric:tabular-nums}
    .exp-block-sum i{font-style:normal; font-size:11px; color:var(--dim)}
    .exp-table{min-width:760px}
    .exp-table th{font-size:10px; letter-spacing:.06em; text-transform:uppercase;
      color:var(--dim); font-weight:500}
    .exp-detail{margin-top:3px; font-weight:400; font-size:11px; color:var(--mut);
      white-space:normal; letter-spacing:.01em; overflow-wrap:anywhere}
    .exp-fact{font-family:var(--mono); font-size:12px; color:var(--mut); white-space:nowrap}
    .exp-week{font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink);
      text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
    .exp-month{font-family:var(--mono); font-size:12px; color:var(--dim);
      text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
    /* Доля полоской: соотношение статей глаз ловит быстрее, чем проценты. */
    .exp-share{width:150px; text-align:right; white-space:nowrap}
    .exp-bar{position:relative; display:inline-block; width:84px; height:6px;
      margin-right:9px; border-radius:3px; background:var(--line); overflow:hidden;
      vertical-align:middle}
    .exp-bar::after{content:""; position:absolute; top:0; bottom:0; left:0; width:var(--w);
      border-radius:3px; background:linear-gradient(90deg,#4aa8ff,#7d5cff)}
    .exp-share-num{font-family:var(--mono); font-size:11px; color:var(--mut);
      font-variant-numeric:tabular-nums}
    /* Курс в шапке есть — значит и суммы имеет смысл держать в двух валютах. */
    .exp-usd{display:block; margin-top:2px; font-size:11px; font-weight:400;
      color:var(--dim); font-variant-numeric:tabular-nums}
    .exp-total td{border-top:1px solid var(--line2); padding-top:11px;
      font-weight:600; color:var(--ink)}
    .exp-total td:first-child{font-family:var(--sans); font-size:13px; letter-spacing:.02em}
    .exp-note{margin-top:14px; font-family:var(--mono); font-size:11px; color:var(--dim)}
    @media (max-width:720px){
      .exp-hero{padding:15px 16px}
      .exp-chips{width:100%}
      .exp-chip{flex:1 1 44%; min-width:0}
    }

    footer{text-align:center; color:var(--dim); font-family:var(--mono); font-size:11px; letter-spacing:.05em; margin-top:26px}
    footer b{color:var(--mut); font-weight:500}