/* ===== Fledge · комментатор — фирменный стиль Fledge =====
   Цвета, шрифты и скругления — из брендбука ~/Projects/fledge-brandbook/tokens.css (Fledge Style Guide 2025).
   Светлая бумага, чернильный фиолетовый для основных действий, лайм — для отправки комментария,
   коралл — для счётчиков и прогресса. Классы те же, что у Cue (val-commenter): шаблоны общие. */
@import url('/static/fonts/fonts.css');

:root{
  --fl-coral:#F16281; --fl-lime:#E1F753; --fl-blue:#8FD4FF; --fl-purple:#452464; --fl-magenta:#E858F2;
  --fl-black:#171717; --fl-paper:#F2F2F2; --fl-paper-2:#EAEAEA;
  --fl-coral-tint:#FCE3E9; --fl-lime-tint:#F6FBD3; --fl-blue-tint:#E7F4FF; --fl-purple-tint:#E7E0EE;
  --ink:#171717; --ink-soft:#6B6B6B; --ink-faint:#9A9A9A;
  --line:#E2E2E2; --line-2:#D6D6D6;
  --surface:#FFFFFF;
  --radius-sm:14px; --radius-md:20px; --radius-lg:28px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(23,23,23,.05),0 8px 24px rgba(23,23,23,.06);
  --shadow-2:0 10px 30px rgba(23,23,23,.10),0 30px 60px rgba(23,23,23,.08);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ok:#3E7B12; --ok-bg:#EAF6C4; --warn:#8A5A00; --warn-bg:#FFF1D6; --bad:#B4234A; --bad-bg:var(--fl-coral-tint);
  --font-display:'Rubik',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{font-size:15px;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);background:var(--fl-paper);
  font-family:var(--font-body);line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--fl-lime);color:var(--fl-black)}
a{color:var(--fl-purple);text-decoration:none}
a:hover{color:var(--fl-black)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0 0 .4em;color:var(--fl-black)}
h1{font-size:2.1rem}h2{font-size:1.3rem}h3{font-size:1.1rem}
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:var(--line-2);border-radius:6px}
:focus-visible{outline:3px solid rgba(69,36,100,.35);outline-offset:2px}

/* ---- topbar ---- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 20px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--fl-black);white-space:nowrap;flex:0 0 auto}
.brand img{height:26px;width:auto;display:block}
.brand-tag{font-family:var(--font-display);font-size:.78rem;font-weight:500;color:var(--fl-purple);
  background:var(--fl-purple-tint);padding:3px 10px;border-radius:var(--radius-pill)}
.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 13px;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:var(--fl-black);background:var(--fl-paper)}
.nav a.active{color:#fff;background:var(--fl-purple)}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--fl-coral);color:#fff;font-weight:700;font-size:.7rem;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(--fl-purple);background:var(--fl-lime);
  padding:5px 11px;border-radius:var(--radius-pill);white-space:nowrap}
.health{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--radius-pill);min-width:0;
  background:var(--surface);border:1px solid var(--line);font-size:.82rem;color:var(--ink-soft)}
.health:hover{color:var(--fl-black)}
.health .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.health-green .dot{background:#7DBB1F}
.health-yellow .dot{background:#F2A900}
.health-red .dot{background:var(--fl-coral)}
.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:4px 12px 4px 4px;
  border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);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(--fl-coral);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;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:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:7px;z-index:50}
.user-menu-body a{color:var(--ink);padding:4px 0}.user-menu-body a:hover{color:var(--fl-purple)}
.menu-sep{height:1px;background:var(--line);margin:2px 0}

/* ---- banners / flash ---- */
.banner{max-width:1200px;margin:12px auto 0;padding:12px 18px;border-radius:var(--radius-md);
  background:var(--bad-bg);color:var(--bad);font-weight:500}
.banner a{color:var(--bad);text-decoration:underline}
.flash{max-width:1200px;margin:12px auto 0;padding:12px 18px;border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.page .flash{margin:0 0 16px;max-width:none}
.flash-ok{background:var(--ok-bg);border-color:transparent;color:#2F5C0D}
.flash-error{background:var(--bad-bg);border-color:transparent;color:var(--bad)}
.flash-info{background:var(--fl-blue-tint);border-color:transparent;color:#1F4E6E}

/* ---- layout ---- */
.page{max-width:1240px;margin:0 auto;padding:26px 20px 96px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;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(--line)}
.inline{display:inline-block}

/* ---- cards ---- */
.card{position:relative;background:var(--surface);border:1px solid rgba(23,23,23,.04);border-radius:var(--radius-lg);
  padding:20px 22px;margin-bottom:14px;box-shadow:var(--shadow-1)}
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 20px;border-radius:var(--radius-pill);border:1.5px solid var(--line-2);
  background:var(--surface);color:var(--fl-black);font-weight:600;line-height:1.2;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease)}
.btn:hover{border-color:var(--fl-black)}
.btn:active{transform:scale(.98)}
.btn-sm{padding:6px 14px;font-size:.85rem}
.btn-block{width:100%}
.btn-primary{background:var(--fl-purple);color:#fff;border-color:var(--fl-purple)}
.btn-primary:hover{background:#2F1846;border-color:#2F1846;color:#fff}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-soft)}
.btn-ghost:hover{background:var(--fl-paper);border-color:transparent;color:var(--fl-black)}
.btn-danger{background:var(--bad-bg);border-color:transparent;color:var(--bad)}
.btn-danger:hover{background:#F9CDD8;border-color:transparent}
.send-btn{background:var(--fl-lime);color:var(--fl-black);border-color:var(--fl-lime)}
.send-btn:hover{background:#D4EC2E;border-color:#D4EC2E}
.send-btn:disabled{opacity:.45;cursor:not-allowed}

/* ---- forms ---- */
.form{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.form>label,.form .row,.form>.fieldset-plain>label{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:6px;padding:11px 14px;border-radius:var(--radius-sm);
  background:var(--surface);border:1.5px solid var(--line-2);color:var(--ink);transition:border .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--fl-purple);box-shadow:0 0 0 4px rgba(69,36,100,.12)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;margin:0 7px 0 0;accent-color:var(--fl-purple);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='%23171717' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
fieldset{border:1.5px solid var(--line);border-radius:var(--radius-md);padding:14px 16px}
.fieldset-plain{border:0;padding:0;margin:0;min-width:0;display:contents}
fieldset:disabled input,fieldset:disabled select,fieldset:disabled textarea,input:disabled{background:var(--fl-paper);color:var(--ink-soft);cursor:not-allowed}
legend{padding:0 8px;color:var(--ink-soft);font-size:.82rem}
textarea{resize:vertical;min-height:70px}
input[type=file]{padding:8px;cursor:pointer}
input[type=file]::file-selector-button{border:0;border-radius:var(--radius-pill);background:var(--fl-purple-tint);color:var(--fl-purple);font:600 .9rem var(--font-body);padding:8px 16px;margin-right:12px;cursor:pointer}

/* ---- badges ---- */
.badge{display:inline-block;padding:3px 10px;border-radius:var(--radius-pill);font-size:.74rem;font-weight:600;
  background:var(--fl-paper);color:var(--ink-soft)}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-bad{background:var(--bad-bg);color:var(--bad)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-muted{background:var(--fl-paper)}
.badge-instagram{background:var(--fl-coral-tint);color:#A3244A}
.badge-tiktok{background:var(--fl-blue-tint);color:#1F4E6E}

/* ---- tables ---- */
.table-wrap{overflow-x:auto;border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-1);margin-bottom:16px}
.table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
.table th{text-align:left;padding:12px 14px;color:var(--ink-soft);font-weight:600;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line);background:var(--surface)}
.table th a{color:inherit}
.table td{padding:12px 14px;border-bottom:1px solid var(--line)}
.table tr:last-child td{border-bottom:0}
.table .badge{white-space:nowrap}
.table tr:hover td{background:#FAFAFA}
.bulk-actions{display:flex;gap:10px;align-items:center;margin:10px 0;flex-wrap:wrap}

/* ---- setup checklist ---- */
.progress{height:10px;background:var(--fl-paper-2);border-radius:999px;overflow:hidden;margin:10px 0 18px}
.progress-bar{height:100%;background:var(--fl-coral);border-radius:999px;transition:width .5s var(--ease)}
.checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.check-item{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--radius-md);margin:0}
.check-num{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;background:var(--fl-paper);color:var(--ink-soft)}
.check-item.ok .check-num{background:var(--fl-lime);color:var(--fl-black)}
.check-body{flex:1 1 auto;min-width:0}
.check-title{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.check-body .muted{font-size:.85rem}

/* ---- auth ---- */
.auth-card{max-width:420px;margin:8vh auto;padding:34px 30px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-1)}
.auth-card h1{text-align:center}
.auth-logo{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:14px}
.auth-logo img{height:40px;width:auto}

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

/* ---- feed ---- */
.feed{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.feed-item{display:flex;gap:16px;align-items:flex-start;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.feed-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.feed-item a{color:inherit}
.feed-thumb{flex:0 0 84px;width:84px;height:112px;border-radius:var(--radius-md);overflow:hidden;
  background:var(--fl-purple-tint);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-family:var(--font-display);font-weight:600;font-size:1.05rem}
.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:var(--ok-bg);color:var(--ok)}
.age-yellow{background:var(--warn-bg);color:var(--warn)}
.age-red{background:var(--bad-bg);color:var(--bad)}
.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:var(--fl-black)}
.meta{display:flex;gap:14px;align-items:center;margin:10px 0;flex-wrap:wrap}
.meta a{color:var(--fl-purple);font-weight:600}
.caption{font-size:.9rem;color:var(--ink-soft);white-space:pre-wrap}
.analysis .a-summary{font-family:var(--font-display);font-weight:500;font-size:1.15rem;margin-bottom:10px}
.a-summary-ru{margin:-4px 0 14px;font-size:.92rem}
.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:.5px}
.a-fields dd{margin:2px 0 0}
.transcript{white-space:pre-wrap;font-size:.85rem;background:var(--fl-paper);padding:12px 14px;
  border-radius:var(--radius-sm);overflow-x:auto}
.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:.98rem}
.variant-foot{display:flex;justify-content:flex-end;align-items:center;margin-top:10px;gap:10px;flex-wrap:wrap}
.variant-foot .counter{margin-right:auto}
.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;align-items:flex-end}
.regen-instruction .instruction{flex:1 1 240px}
.skip-form{display:flex;gap:9px;align-items:center;margin-top:10px;flex-wrap:wrap}
.skip-form select{width:auto;margin-top:0}
.history-set{border-top:1px solid var(--line);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(--line)}
.health-list li:last-child{border-bottom:0}
.pager{display:flex;gap:10px;margin-top:16px}

/* фикс переполнения топбара на средних десктопах */
@media (max-width:1180px){.mode-badge{display:none}}
@media (max-width:1000px){.brand-tag{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}
  .brand-tag{display:inline-block}
  .nav-bottom{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;justify-content:flex-start;
    gap:2px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));overflow-x:auto;scrollbar-width:none;
    background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .nav-bottom::-webkit-scrollbar{display:none}
  .nav-bottom a{font-size:.8rem;padding:8px 12px;white-space:nowrap}
  .grid-2{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr}
  .page{padding:20px 16px 96px}
  h1{font-size:1.75rem}
  .card{padding:16px 16px}
  .topbar-inner{padding:10px 16px}
  .variant-foot .counter{flex:1 0 100%}
  .variant-foot .btn{flex:1 1 0;padding-top:10px;padding-bottom:10px}
}

/* ---- 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;margin:8vh auto}
.error-code{font-family:var(--font-display);font-weight:600;font-size:4.5rem;line-height:1;color:var(--fl-coral);margin-bottom:6px}
.error-actions{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}

/* вертикальный ритм: между блоками страницы всегда есть воздух */
.page > section,
.page > form,
.page > .table-wrap,
.page > details,
.page > .filters,
.page > .card { margin-bottom: 16px; }
.page > *:last-child { margin-bottom: 0; }
.card > h2:first-child, section.card > h2:first-child { margin-top: 0; }
section.card + section.card, .card + .table-wrap, .table-wrap + .card { margin-top: 0; }