/* ===== Комментатор Валеры — фирменный стиль Twinby DEEP ===== */
@font-face{font-family:'Suisse';font-weight:400;src:url('/static/fonts/SuisseIntl-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Suisse';font-weight:500;src:url('/static/fonts/SuisseIntl-Medium.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Suisse';font-weight:600;src:url('/static/fonts/SuisseIntl-SemiBold.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Suisse';font-weight:700;src:url('/static/fonts/SuisseIntl-Bold.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Coolvetica';font-weight:400;src:url('/static/fonts/coolvetica-rg.ttf') format('truetype');font-display:swap}

:root{
  --green:#00dc00; --green-bright:#00f500; --green-dark:#00a400; --purple:#8746FF;
  --cta-grad:linear-gradient(161deg,#A73CFF 0%,#AA2AD8 100%); --cta-text:#FBF2FF;
  --ink:#F4EFFB; --ink-soft:rgba(244,239,251,.66); --ink-faint:rgba(244,239,251,.42);
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07); --glass-3:rgba(255,255,255,.11);
  --hairline:rgba(255,255,255,.10); --hairline-soft:rgba(255,255,255,.055);
  --neon-glow:0 0 18px rgba(0,220,0,.5);
  --radius-sm:12px; --radius-md:18px; --radius-lg:24px; --radius-pill:999px;
  --shadow-dark:0 24px 64px rgba(10,6,24,.5);
  --ease:cubic-bezier(.19,1,.22,1);
  --ok:#00dc00; --bad:#FF5C7A; --warn:#FFB547;
}
*{box-sizing:border-box}
html{font-size:15px;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--ink);
  font-family:'Suisse',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.5;
  background:#1D172A;
  background-image:
    radial-gradient(1100px 600px at 12% -8%,rgba(135,70,255,.28),transparent 60%),
    radial-gradient(900px 500px at 100% 0%,rgba(0,220,0,.08),transparent 55%),
    linear-gradient(180deg,#241043 0%,#1D172A 46%,#15101F 100%);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}
::selection{background:var(--green);color:#15101F}
a{color:var(--ink);text-decoration:none}
a:hover{color:#fff}
h1,h2,h3{font-family:'Coolvetica','Suisse',sans-serif;font-weight:400;letter-spacing:.3px;line-height:1.1;margin:0 0 .4em}
h1{font-size:2rem}h2{font-size:1.35rem}
p{margin:0 0 .8em}
.muted{color:var(--ink-soft)}
.small{font-size:.82rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
input,textarea,select,button{font-family:inherit;font-size:1rem}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:6px}

/* ---- topbar ---- */
.topbar{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,rgba(26,18,42,.86),rgba(26,18,42,.5));
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--hairline)}
.topbar-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:11px 20px;flex-wrap:nowrap}
.brand{font-family:'Coolvetica',sans-serif;font-size:1.3rem;display:flex;align-items:center;color:#fff;white-space:nowrap;flex:0 0 auto}
.nav{display:flex;gap:2px;align-items:center}
.nav-top{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav-top::-webkit-scrollbar{display:none}
.nav a{padding:8px 12px;border-radius:var(--radius-pill);color:var(--ink-soft);font-weight:500;font-size:.95rem;
  white-space:nowrap;transition:color .18s var(--ease),background .18s var(--ease)}
.nav a:hover{color:#fff;background:var(--glass-2)}
.nav a.active{color:#fff;background:var(--glass-3)}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--green);color:#15101F;font-weight:700;font-size:.7rem;box-shadow:var(--neon-glow);margin-left:5px;vertical-align:middle}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.mode-badge{font-size:.74rem;font-weight:600;color:var(--warn);border:1px solid rgba(255,181,71,.4);
  background:rgba(255,181,71,.08);padding:5px 11px;border-radius:var(--radius-pill);white-space:nowrap}
.health{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--radius-pill);min-width:0;
  background:var(--glass-2);border:1px solid var(--hairline);font-size:.82rem;color:var(--ink-soft)}
.health .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.health-green .dot{background:var(--green);box-shadow:var(--neon-glow)}
.health-yellow .dot{background:var(--warn);box-shadow:0 0 12px rgba(255,181,71,.5)}
.health-red .dot{background:var(--bad);box-shadow:0 0 12px rgba(255,92,122,.55)}
.health-text{white-space:nowrap}
.user-menu{position:relative;flex:0 0 auto}
.user-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;
  border-radius:var(--radius-pill);background:var(--glass-2);border:1px solid var(--hairline);font-weight:600;font-size:.9rem}
.user-menu>summary::-webkit-details-marker{display:none}
.user-avatar{width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:var(--cta-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.user-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu-body{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;padding:12px;
  background:linear-gradient(180deg,rgba(40,28,64,.98),rgba(28,20,45,.98));border:1px solid var(--hairline);
  border-radius:var(--radius-md);box-shadow:var(--shadow-dark);display:flex;flex-direction:column;gap:7px;z-index:50}
.user-menu-body a{color:var(--ink-soft);padding:4px 0}.user-menu-body a:hover{color:#fff}
.menu-sep{height:1px;background:var(--hairline);margin:2px 0}

/* ---- banners / flash ---- */
.banner{max-width:1240px;margin:12px auto 0;padding:12px 18px;border-radius:var(--radius-md);
  background:rgba(255,92,122,.12);border:1px solid rgba(255,92,122,.4)}
.flash{max-width:1240px;margin:12px auto 0;padding:11px 16px;border-radius:var(--radius-md);
  border:1px solid var(--hairline);background:var(--glass-2)}
.flash-ok{border-color:rgba(0,220,0,.4);background:rgba(0,220,0,.1)}
.flash-error{border-color:rgba(255,92,122,.45);background:rgba(255,92,122,.12)}
.flash-info{border-color:rgba(135,70,255,.4);background:rgba(135,70,255,.12)}

/* ---- layout ---- */
.page{max-width:1240px;margin:0 auto;padding:22px 20px 96px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.page-actions{display:flex;gap:8px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>label{flex:1 1 180px}
.divider{display:flex;align-items:center;text-align:center;color:var(--ink-faint);font-size:.82rem;margin:18px 0;gap:12px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--hairline)}
.inline{display:inline-block}

/* ---- cards ---- */
.card{position:relative;background:linear-gradient(180deg,var(--glass-2),var(--glass));
  border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:14px;
  backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:0 12px 40px rgba(10,6,24,.28)}
details.card>summary{cursor:pointer;font-weight:600}
.card form + form{margin-top:14px}
.card > form + p,.card > p + form{margin-top:14px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
  padding:10px 18px;border-radius:var(--radius-pill);border:1px solid var(--hairline);
  background:var(--glass-2);color:#fff;font-weight:600;transition:all .2s var(--ease)}
.btn:hover{background:var(--glass-3);border-color:rgba(255,255,255,.22)}
.btn-sm{padding:6px 13px;font-size:.85rem}
.btn-block{width:100%}
.btn-primary{background:var(--cta-grad);color:var(--cta-text);border-color:transparent;
  box-shadow:0 6px 18px rgba(135,70,255,.26)}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 10px 26px rgba(135,70,255,.38)}
.btn-ghost{background:transparent}
.btn-danger{background:rgba(255,92,122,.16);border-color:rgba(255,92,122,.45);color:#FFC7D1}
.btn-danger:hover{background:rgba(255,92,122,.26)}
.send-btn{background:var(--green);color:#15101F;border-color:transparent;box-shadow:0 6px 16px rgba(0,220,0,.24)}
.send-btn:hover{background:var(--green-bright);box-shadow:0 10px 24px rgba(0,245,0,.34)}
.send-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ---- forms ---- */
.form{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.form>label,.form .row{align-self:stretch}
.form .btn-block{align-self:stretch}
label{display:block;font-size:.86rem;color:var(--ink-soft);font-weight:500}
input,textarea,select{width:100%;margin-top:5px;padding:10px 13px;border-radius:var(--radius-sm);
  background:rgba(10,6,24,.35);border:1px solid var(--hairline);color:var(--ink);transition:border .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,220,0,.18)}
input[type=checkbox],input[type=radio]{width:auto;margin:0 7px 0 0;accent-color:var(--green);vertical-align:middle}
select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F4EFFB' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
fieldset{border:1px solid var(--hairline);border-radius:var(--radius-md);padding:14px}
legend{padding:0 8px;color:var(--ink-soft);font-size:.82rem}
textarea{resize:vertical;min-height:70px}

/* ---- badges ---- */
.badge{display:inline-block;padding:3px 10px;border-radius:var(--radius-pill);font-size:.74rem;font-weight:600;
  border:1px solid var(--hairline);background:var(--glass-2);color:var(--ink-soft)}
.badge-ok{background:rgba(0,220,0,.14);border-color:rgba(0,220,0,.4);color:var(--green-bright)}
.badge-bad{background:rgba(255,92,122,.14);border-color:rgba(255,92,122,.4);color:#FFB0BE}
.badge-warn{background:rgba(255,181,71,.14);border-color:rgba(255,181,71,.4);color:var(--warn)}
.badge-muted{background:var(--glass-2)}

/* ---- tables ---- */
.table-wrap{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--hairline)}
.table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
.table th{text-align:left;padding:11px 12px;color:var(--ink-faint);font-weight:600;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--hairline)}
.table th a{color:inherit}
.table td{padding:11px 12px;border-bottom:1px solid var(--hairline-soft)}
.table tr:hover td{background:var(--glass)}
.bulk-actions{display:flex;gap:10px;align-items:center;margin:10px 0}

/* ---- setup checklist ---- */
.progress{height:9px;background:var(--glass-2);border-radius:999px;overflow:hidden;margin:10px 0 18px;border:1px solid var(--hairline)}
.progress-bar{height:100%;background:var(--cta-grad);border-radius:999px;transition:width .5s var(--ease)}
.checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.check-item{display:flex;align-items:center;gap:14px;padding:13px 18px;border-radius:var(--radius-md);margin:0}
.check-item.ok{border-color:rgba(0,220,0,.28)}
.check-num{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Coolvetica';font-size:.95rem;background:var(--glass-2);border:1px solid var(--hairline)}
.check-item.ok .check-num{background:rgba(0,220,0,.16);border-color:rgba(0,220,0,.45);color:var(--green-bright)}
.check-body{flex:1 1 auto;min-width:0}
.check-title{display:flex;gap:10px;align-items:center}
.check-body .muted{font-size:.85rem}

/* ---- auth ---- */
.auth-card{max-width:400px;margin:9vh auto;padding:34px 30px}
.auth-card h1{text-align:center}

/* ---- tabs / filters ---- */
.tabs{display:flex;gap:6px;margin:14px 0;flex-wrap:wrap;border-bottom:1px solid var(--hairline);padding-bottom:10px}
.tab{padding:9px 16px;border-radius:var(--radius-pill);color:var(--ink-soft);font-weight:600;transition:all .2s var(--ease)}
.tab:hover{color:#fff;background:var(--glass-2)}
.tab.active{background:var(--glass-3);color:#fff}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filters select{width:auto;min-width:150px}

/* ---- feed ---- */
.feed{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.feed-item{display:flex;gap:14px;align-items:flex-start;transition:transform .2s var(--ease),border-color .2s}
.feed-item:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.2)}
.feed-thumb{flex:0 0 84px;width:84px;height:112px;border-radius:var(--radius-md);overflow:hidden;
  background:rgba(10,6,24,.5);display:flex;align-items:center;justify-content:center}
.feed-thumb img{width:100%;height:100%;object-fit:cover}
.thumb-ph{color:var(--ink-faint);font-size:.78rem}
.feed-body{flex:1 1 auto;min-width:0}
.feed-line{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:5px}
.feed-blogger{font-weight:700;font-size:1.02rem}
.feed-summary{color:var(--ink-soft);font-size:.92rem}
.age{font-size:.74rem;padding:2px 10px;border-radius:999px;font-weight:700}
.age-green{background:rgba(0,220,0,.16);color:var(--green-bright)}
.age-yellow{background:rgba(255,181,71,.16);color:var(--warn)}
.age-red{background:rgba(255,92,122,.16);color:#FFB0BE}
.empty{padding:56px 0;text-align:center;color:var(--ink-faint)}

/* ---- post card ---- */
.post-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:20px;align-items:start}
.player{width:100%;max-height:72vh;border-radius:var(--radius-lg);background:#000;border:1px solid var(--hairline)}
.meta{display:flex;gap:14px;align-items:center;margin:10px 0;flex-wrap:wrap}
.meta a{color:var(--green);font-weight:600}
.caption{font-size:.9rem;color:var(--ink-soft);white-space:pre-wrap}
.analysis .a-summary{font-family:'Coolvetica';font-size:1.15rem;margin-bottom:10px}
.a-fields{display:grid;gap:8px;margin:0 0 12px}
.a-fields dt{font-size:.74rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.4px}
.a-fields dd{margin:2px 0 0}
.transcript{white-space:pre-wrap;font-size:.85rem;background:rgba(10,6,24,.4);padding:12px;
  border-radius:var(--radius-sm);overflow-x:auto;border:1px solid var(--hairline-soft)}
.variants{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.variant-head{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.variant-text{width:100%;resize:vertical;font-size:.95rem}
.variant-foot{display:flex;justify-content:space-between;align-items:center;margin-top:9px;gap:10px}
.scores{font-variant-numeric:tabular-nums}
.actions{display:flex;flex-direction:column;gap:12px}
.regen-instruction{display:flex;gap:9px;margin-top:9px;flex-wrap:wrap}
.regen-instruction .instruction{flex:1 1 240px}
.skip-form{display:flex;gap:9px;align-items:center;margin-top:10px}
.skip-form select{width:auto}
.history-set{border-top:1px solid var(--hairline-soft);padding:10px 0}
.history-variant{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:4px 0;font-size:.9rem}

/* ---- misc lists ---- */
.examples{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.examples li{color:var(--ink-soft)}
.health-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.health-list li{padding:9px 0;border-bottom:1px solid var(--hairline-soft)}
.pager{display:flex;gap:10px;margin-top:16px}

/* фикс переполнения топбара на средних десктопах */
@media (max-width:1120px){.mode-badge{display:none}}

/* ---- bottom nav (mobile) ---- */
.nav-bottom{display:none}
@media (max-width:820px){
  .nav-top{display:none}
  .user-name{display:none}
  .health-text{display:none}
  .nav-bottom{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;justify-content:space-around;
    gap:2px;padding:8px 6px calc(8px + env(safe-area-inset-bottom));overflow-x:auto;
    background:linear-gradient(180deg,rgba(28,20,45,.9),rgba(22,16,35,.98));
    backdrop-filter:blur(18px);border-top:1px solid var(--hairline)}
  .nav-bottom a{font-size:.78rem;padding:7px 10px;white-space:nowrap}
  .grid-2{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr}
  .page{padding-bottom:84px}
}

/* ---- feed refinements ---- */
.feed-comment{font-size:.98rem;color:var(--ink);margin:2px 0 5px}
.feed-stats{font-size:.82rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.page-head h1{margin:0}

/* ---- error page ---- */
.error-card{text-align:center;max-width:460px}
.error-code{font-family:'Coolvetica',sans-serif;font-size:4rem;line-height:1;color:var(--purple);
  text-shadow:0 0 24px rgba(135,70,255,.45);margin-bottom:6px}
.error-actions{display:flex;gap:10px;justify-content:center;margin-top:20px}