:root{
  --bg:#F2F4F8; --surface:#FFFFFF; --surface-2:#F8F9FC; --surface-3:#ECEFF5;
  --line:#E3E7EF; --line-2:#D3D9E4;
  --ink:#0D1B2A; --ink-2:#4B5870; --ink-3:#6B7589;
  --accent:#1D5BFF; --accent-2:#0B45E0; --accent-soft:#E5ECFF; --accent-ink:#FFFFFF; --btn:#1D5BFF; --btn-2:#0B45E0; --bubble-bg:#FFFFFF;
  --grp:#7A3FF2; --grp-soft:#EFE7FF;
  --up:#0E9F6E; --up-soft:#E2F6EE; --down:#E5374F; --down-soft:#FDEBEE;
  --star:#FFB21E; --star-soft:#FFF4DB;
  --scrim:rgba(13,27,42,.46); --feed-bg:#DCE6FF; --feed-fade:rgba(220,230,255,1);
  --toast:#0D1B2A; --toast-ink:#FFFFFF;
  --feed-bg:#DCE6FF; --feed-fade:rgba(220,230,255,1);
  --pop:0 24px 64px -24px rgba(13,27,42,.38), 0 2px 6px rgba(13,27,42,.06);
  --lift:0 1px 2px rgba(13,27,42,.07);
  --r-panel:24px; --r-input:14px;
  --bubble:20px 20px 20px 6px;
  --f-display:"Unbounded", "Onest", system-ui, sans-serif;
  --f-body:"Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A101C; --surface:#111A2B; --surface-2:#152035; --surface-3:#1B263D;
    --line:#223050; --line-2:#2D3C5E;
    --ink:#E9EEF8; --ink-2:#A8B3C9; --ink-3:#8591AB;
    --accent:#6F93FF; --accent-2:#8AA7FF; --accent-soft:rgba(111,147,255,.16); --btn:#3A66F2; --btn-2:#5478F5; --bubble-bg:#1C2842;
    --grp:#A98BFF; --grp-soft:rgba(169,139,255,.16);
    --up:#3AD29F; --up-soft:rgba(58,210,159,.14); --down:#FF7088; --down-soft:rgba(255,112,136,.14);
    --star:#FFC449; --star-soft:rgba(255,196,73,.14);
    --scrim:rgba(2,6,14,.66); --toast:#E9EEF8; --toast-ink:#0A101C; --feed-bg:#0D1729; --feed-fade:rgba(13,23,41,1); --feed-bg:#0A1428; --feed-fade:rgba(10,20,40,1);
    --pop:0 24px 64px -20px rgba(0,0,0,.7); --lift:0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A101C; --surface:#111A2B; --surface-2:#152035; --surface-3:#1B263D;
  --line:#223050; --line-2:#2D3C5E;
  --ink:#E9EEF8; --ink-2:#A8B3C9; --ink-3:#8591AB;
  --accent:#6F93FF; --accent-2:#8AA7FF; --accent-soft:rgba(111,147,255,.16); --btn:#3A66F2; --btn-2:#5478F5; --bubble-bg:#1C2842;
  --grp:#A98BFF; --grp-soft:rgba(169,139,255,.16);
  --up:#3AD29F; --up-soft:rgba(58,210,159,.14); --down:#FF7088; --down-soft:rgba(255,112,136,.14);
  --star:#FFC449; --star-soft:rgba(255,196,73,.14);
  --scrim:rgba(2,6,14,.66); --toast:#E9EEF8; --toast-ink:#0A101C; --feed-bg:#0D1729; --feed-fade:rgba(13,23,41,1); --feed-bg:#0A1428; --feed-fade:rgba(10,20,40,1);
  --pop:0 24px 64px -20px rgba(0,0,0,.7); --lift:0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:400 15px/1.55 var(--f-body); -webkit-font-smoothing:antialiased; min-height:100%}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:10px}
.num{font-variant-numeric:tabular-nums}
.ic{width:1.25em; height:1.25em; flex:none; vertical-align:middle}
.ic-fill{fill:currentColor}
.wrap{max-width:1240px; margin:0 auto; padding:0 24px}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
h1,h2,h3{margin:0; font-weight:600}
p{margin:0}

/* ---------- header ---------- */
.hdr{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:saturate(1.5) blur(16px); -webkit-backdrop-filter:saturate(1.5) blur(16px); border-bottom:1px solid var(--line)}
.hdr-in{display:flex; align-items:center; gap:28px; height:68px}
.brand{display:flex; align-items:center; gap:10px; font:600 19px/1 var(--f-display); letter-spacing:-.02em}
.brand svg{width:34px; height:34px}
.nav{display:flex; gap:4px}
.nav a{height:38px; padding:0 14px; display:flex; align-items:center; border-radius:999px; font-weight:500; color:var(--ink-2); transition:background .15s,color .15s}
.nav a:hover{color:var(--ink); background:var(--surface-3)}
.nav a[aria-current="page"]{color:var(--ink); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line)}
.hdr-search{flex:1; max-width:320px; position:relative; margin-left:auto}
.hdr-search > .ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-3)}
.hdr-search input{width:100%; height:40px; border-radius:999px; border:1px solid var(--line); background:var(--surface); padding:0 14px 0 42px; font-size:14px; outline:none; transition:border-color .15s, box-shadow .15s}
.hdr-search input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.hdr-actions{display:flex; align-items:center; gap:8px}
.hdr-search + .hdr-actions{margin-left:0}
.me{display:flex; align-items:center; gap:10px; height:40px; padding:0 6px 0 6px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-weight:600; font-size:14px}
.me .initials{width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font:600 12px/1 var(--f-display)}
.me span{padding-right:8px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border-radius:999px; font-weight:600; font-size:15px; line-height:1; border:1px solid transparent; white-space:nowrap; transition:background .15s, border-color .15s, color .15s, transform .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-2)}
.btn-soft{background:var(--accent-soft); color:var(--accent)}
.btn-soft:hover{background:color-mix(in srgb, var(--accent) 18%, transparent)}
.btn-ghost{background:var(--surface); border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--line-2); background:var(--surface-2)}
.btn-white{background:#fff; color:#0D1B2A}
.btn-white:hover{background:#EEF2FF}
.btn-sm{height:36px; padding:0 14px; font-size:14px}
.btn-xs{height:30px; padding:0 11px; font-size:13px; gap:6px}
.btn-icon{width:44px; padding:0}
.btn-sm.btn-icon{width:36px}
.btn[disabled]{opacity:.5; pointer-events:none}
.btn-block{width:100%}
.link{color:var(--accent); font-weight:600}
.link:hover{text-decoration:underline; text-underline-offset:3px}

/* vote & fav */
.vote{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px 0 11px; border-radius:999px; background:var(--surface-3); color:var(--ink); font-weight:600; font-size:14px; transition:background .15s,color .15s}
.vote:hover{background:var(--accent-soft); color:var(--accent)}
.vote.is-on{background:var(--accent); color:#fff}
.vote.is-on .ic{animation:pop .35s ease}
.vote-lg{height:44px; padding:0 18px 0 15px; font-size:15px}
.fav{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--ink-3); transition:color .15s, background .15s}
.fav:hover{background:var(--surface-3); color:var(--down)}
.fav.is-on{color:var(--down)}
.fav.is-on .ic{fill:currentColor}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-12deg)}100%{transform:scale(1)}}

/* chips */
.chip{display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:999px; background:var(--surface-3); color:var(--ink-2); font-size:12.5px; font-weight:500; white-space:nowrap}
.chip .ic{width:14px; height:14px}
.chip-ch{background:var(--accent-soft); color:var(--accent)}
.chip-gr{background:var(--grp-soft); color:var(--grp)}
.chip-up{background:var(--up-soft); color:var(--up)}
.chip-down{background:var(--down-soft); color:var(--down)}
.chip-star{background:var(--star-soft); color:color-mix(in srgb, var(--star) 70%, var(--ink))}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.verified{color:var(--accent); width:18px; height:18px}

/* ---------- surfaces ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel); padding:24px}
.panel-h{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.panel-h h2,.panel-h h3{font:600 17px/1.3 var(--f-body)}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.up{color:var(--up)} .down{color:var(--down)}

/* segmented */
.seg{display:inline-flex; background:var(--surface-3); border-radius:999px; padding:3px; gap:2px}
.seg :is(button,a){height:32px; padding:0 13px; border-radius:999px; font-weight:600; font-size:13.5px; color:var(--ink-2); transition:background .15s,color .15s; white-space:nowrap}
.seg :is(button,a):hover{color:var(--ink)}
.seg :is(button,a):is([aria-pressed="true"],[aria-current="true"],[aria-selected="true"]){background:var(--surface); color:var(--ink); box-shadow:var(--lift)}

/* fields */
.field{display:flex; flex-direction:column; gap:7px}
.field > label, .lbl{font-size:13.5px; font-weight:600; color:var(--ink-2)}
.input, .select, .textarea{width:100%; height:48px; border-radius:var(--r-input); border:1px solid var(--line-2); background:var(--surface); padding:0 14px; font-size:15px; outline:none; transition:border-color .15s, box-shadow .15s}
.textarea{height:auto; min-height:112px; padding:12px 14px; resize:vertical; line-height:1.5}
.select{appearance:none; -webkit-appearance:none; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9l-6 6-6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:18px; cursor:pointer}
.select-sm{width:auto; height:38px; border-radius:999px; font-size:14px; font-weight:600; padding:0 38px 0 14px; border-color:var(--line)}
.input:focus, .select:focus, .textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.input.is-bad, .textarea.is-bad{border-color:var(--down); box-shadow:0 0 0 3px var(--down-soft)}
.err{font-size:13px; color:var(--down); display:flex; gap:6px; align-items:center}
.hint{font-size:13px; color:var(--ink-3)}
.input-wrap{position:relative}
.input-wrap > .ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none}
.input-wrap > .input{padding-left:44px}
.input-wrap > .eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--ink-3)}
.input-wrap > .eye:hover{color:var(--ink); background:var(--surface-3)}
.check{display:flex; gap:10px; align-items:flex-start; cursor:pointer; font-size:14px; color:var(--ink-2); line-height:1.45}
.check input{appearance:none; -webkit-appearance:none; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-2); background:var(--surface); flex:none; margin:0; display:grid; place-items:center; cursor:pointer; transition:background .15s,border-color .15s}
.check input:checked{background:var(--accent); border-color:var(--accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-size:14px; background-position:center; background-repeat:no-repeat}
.check input[type="radio"]{border-radius:50%}
.check input[type="radio"]:checked{background-image:none; box-shadow:inset 0 0 0 4px var(--surface)}
.toggle{display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; font-size:14px; font-weight:500}
.toggle input{appearance:none; -webkit-appearance:none; width:42px; height:24px; border-radius:999px; background:var(--line-2); position:relative; flex:none; margin:0; cursor:pointer; transition:background .2s}
.toggle input::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s}
.toggle input:checked{background:var(--accent)}
.toggle input:checked::after{transform:translateX(18px)}

/* ---------- main & sections ---------- */
main{display:block; min-height:70vh}
.section{padding-top:40px; padding-bottom:40px}
.sec-h{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.sec-h h2{font:600 clamp(22px, 2.4vw, 28px)/1.15 var(--f-display); letter-spacing:-.02em}
.sec-h p{color:var(--ink-2); margin-top:6px; max-width:60ch}
.page-head{padding:36px 0 24px}
.page-head h1{font:600 clamp(28px, 3.6vw, 44px)/1.08 var(--f-display); letter-spacing:-.03em}
.page-head p{color:var(--ink-2); margin-top:10px; max-width:64ch; font-size:16px}
.crumbs{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink-3); margin-bottom:14px; flex-wrap:wrap}
.crumbs a:hover{color:var(--accent)}
.crumbs .ic{width:14px; height:14px}

/* ---------- hero ---------- */
.hero{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:56px; align-items:center; padding-top:52px; padding-bottom:36px}
.hero h1{font:700 clamp(34px, 5.1vw, 64px)/1.02 var(--f-display); letter-spacing:-.035em; max-width:13ch}
.hero .lead{font-size:clamp(16px, 1.4vw, 18px); color:var(--ink-2); margin-top:22px; max-width:46ch; line-height:1.6}
.bigsearch{margin-top:30px; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line-2); border-radius:20px; padding:7px 7px 7px 18px; max-width:560px; transition:border-color .15s, box-shadow .15s}
.bigsearch:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.bigsearch > .ic{color:var(--ink-3); width:22px; height:22px}
.bigsearch input{flex:1; min-width:0; border:0; outline:none; background:none; height:48px; font-size:16px}
.bigsearch .btn{height:48px; border-radius:14px}
.quick{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; align-items:center}
.quick span{font-size:13.5px; color:var(--ink-3); margin-right:2px}
.quick :is(button,a){height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:13.5px; color:var(--ink-2); transition:border-color .15s,color .15s}
.quick :is(button,a):hover{border-color:var(--accent); color:var(--accent)}
.totals{display:flex; gap:0; margin-top:34px; flex-wrap:wrap}
.totals > div{padding:0 26px; border-left:1px solid var(--line-2)}
.totals > div:first-child{padding-left:0; border-left:0}
.totals b{display:block; font:600 clamp(20px, 2.2vw, 26px)/1.1 var(--f-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.totals small{font-size:13px; color:var(--ink-3)}

/* chat feed (hero graphic) */
.feed{border-radius:28px; overflow:hidden; border:1px solid var(--line); background:var(--surface); box-shadow:var(--pop); display:flex; flex-direction:column}
.feed-top{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line)}
.feed-top svg.brandmark{width:42px; height:42px}
.feed-top b{display:block; font-size:15px}
.feed-top small{font-size:12.5px; color:var(--accent)}
.feed-top .ic{color:var(--ink-3); margin-left:auto}
.feed-body{height:420px; cursor:default; padding:16px 14px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; overflow:hidden; position:relative; background-color:var(--feed-bg); background-size:220px}
.feed-body::before{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, var(--feed-fade) 0, transparent 90px); z-index:1; pointer-events:none}
.msg{display:flex; gap:8px; align-items:flex-end; animation:msgIn .45s cubic-bezier(.2,.8,.2,1) both; flex:none}
.msg .ava{width:34px; height:34px}
.bubble{background:var(--surface); border-radius:18px 18px 18px 6px; padding:8px 12px 6px; max-width:84%; box-shadow:0 1px 1.5px rgba(13,27,42,.1); min-width:0}
.bubble .who{font-size:13.5px; font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bubble .txt{font-size:14px; line-height:1.45}
.bubble .txt b{font-variant-numeric:tabular-nums}
.bubble .meta{display:flex; align-items:center; justify-content:flex-end; gap:4px; font-size:11.5px; color:var(--ink-3); margin-top:2px}
.bubble .meta .ic{width:15px; height:15px; color:var(--accent)}
.bubble .spark{display:block; margin-top:6px}
.typing{display:flex; gap:4px; padding:12px 14px}
.typing i{width:7px; height:7px; border-radius:50%; background:var(--ink-3); animation:dot 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}
@keyframes msgIn{from{opacity:0; transform:translateY(14px) scale(.97)}to{opacity:1; transform:none}}
.kbd{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:10px; border-top:1px solid var(--line); background:var(--surface)}
.kbd button{height:38px; border-radius:12px; background:var(--surface-3); font-size:13.5px; font-weight:600; color:var(--accent); transition:background .15s}
.kbd button:hover{background:var(--accent-soft)}

/* ---------- cards ---------- */
.grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.ccard{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--bubble); padding:18px; display:flex; flex-direction:column; gap:14px; cursor:pointer; transition:border-color .15s}
.ccard:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}
.ccard-top{display:flex; gap:12px; align-items:flex-start}
.ccard-top .ava{width:52px; height:52px}
.ccard-name{min-width:0; flex:1}
.ccard-name a{font-weight:600; font-size:16px; line-height:1.3; display:flex; align-items:center; gap:4px}
.ccard-name a span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ccard-name small{display:block; color:var(--ink-3); font-size:13px; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ccard-desc{color:var(--ink-2); font-size:14px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:42px}
.ccard-stats{display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end; padding-top:14px; border-top:1px dashed var(--line-2)}
.stat small{display:block; font-size:12px; color:var(--ink-3); margin-bottom:2px}
.stat b{display:block; font:600 17px/1.2 var(--f-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
.stat .d{display:block; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:1px}
.stat .d.faint{font-weight:500}
.ccard-foot{display:flex; align-items:center; justify-content:space-between; gap:8px}
.stars{display:inline-flex; align-items:center; gap:5px; font-size:13.5px; font-weight:600}
.stars .ic{width:16px; height:16px; color:var(--star)}
.stars .ic{fill:currentColor}
.stars small{color:var(--ink-3); font-weight:500}

/* list rows */
.rows{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel); overflow:hidden}
.row{display:grid; grid-template-columns:44px minmax(0,1fr) auto auto; gap:14px; align-items:center; padding:12px 18px; border-top:1px solid var(--line); cursor:pointer; transition:background .15s}
.row:first-child{border-top:0}
.row:hover{background:var(--surface-2)}
.row .rank{font:600 17px/1 var(--f-display); color:var(--ink-3); text-align:center; font-variant-numeric:tabular-nums}
.row .who{display:flex; align-items:center; gap:12px; min-width:0}
.row .who .ava{width:44px; height:44px}
.row .who b{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .who b .verified, .pod b.nm .verified{width:16px; height:16px; margin-left:4px; vertical-align:-3px}
.row .who small{display:block; color:var(--ink-3); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .metric{text-align:right}
.row .metric b{font:600 16px/1.2 var(--f-display); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.row .metric small{display:block; font-size:12px; color:var(--ink-3)}
.row-list{grid-template-columns:minmax(0,1.6fr) repeat(4, minmax(0,.8fr)) auto; padding:14px 18px}
.row-list .cell small{display:block; font-size:12px; color:var(--ink-3)}
.row-list .cell b{font-weight:600; font-variant-numeric:tabular-nums}
.rows-head{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(4, minmax(0,.8fr)) 118px; gap:14px; padding:10px 18px; font-size:12.5px; color:var(--ink-3); background:var(--surface-2); border-bottom:1px solid var(--line)}

/* categories */
.cats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px}
.cat{display:flex; gap:14px; align-items:center; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--bubble); transition:border-color .15s}
.cat:hover{border-color:color-mix(in srgb, var(--c) 45%, var(--line))}
.cat .ci{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 13%, transparent); color:var(--c); flex:none}
.cat .ci .ic{width:24px; height:24px}
.cat b{display:block; font-weight:600; line-height:1.3}
.cat small{font-size:13px; color:var(--ink-3)}
.cat .g{margin-left:auto; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums}
.cats-lg .cat{flex-direction:column; align-items:flex-start; padding:20px; gap:16px}
.cats-lg .cat .g{margin-left:0}
.cats-lg .cat-foot{display:flex; justify-content:space-between; width:100%; align-items:flex-end; gap:8px}
.cats-lg .cat-foot b{font:600 20px/1.1 var(--f-display); letter-spacing:-.02em}

/* cta */
.duo{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:20px; align-items:stretch}
.cta{position:relative; overflow:hidden; border-radius:28px; background:var(--accent); color:#fff; padding:32px; display:flex; flex-direction:column; justify-content:space-between; gap:24px; min-height:360px}
.cta h2{font:600 clamp(24px, 2.4vw, 30px)/1.12 var(--f-display); letter-spacing:-.02em; max-width:14ch; position:relative}
.cta p{opacity:.86; margin-top:12px; max-width:34ch; position:relative}
.cta ul{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:8px; position:relative}
.cta li{display:flex; gap:8px; align-items:center; font-size:14.5px}
.cta li .ic{width:18px; height:18px}
.cta .art{position:absolute; right:-30px; bottom:-20px; width:260px; opacity:1; pointer-events:none}
.cta .btn{position:relative; align-self:flex-start}

/* ---------- catalog ---------- */
.stats-strip{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel); margin-top:22px}
.stats-strip > div{padding:16px 20px; border-left:1px solid var(--line)}
.stats-strip > div:first-child{border-left:0}
.stats-strip small{display:flex; gap:6px; align-items:center; font-size:13px; color:var(--ink-3)}
.stats-strip small .ic{width:16px; height:16px}
.stats-strip b{display:block; font:600 clamp(20px, 2vw, 26px)/1.2 var(--f-display); letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums}
.layout{display:grid; grid-template-columns:272px minmax(0,1fr); gap:28px; align-items:start; padding-bottom:56px}
.filters{position:sticky; top:calc(env(safe-area-inset-top,0px) + 88px); display:flex; flex-direction:column; gap:22px; max-height:calc(100vh - 110px); overflow:auto; padding:2px 6px 16px 2px; scrollbar-width:thin}
.fgroup h4{margin:0 0 10px; font-size:13.5px; font-weight:600; color:var(--ink-2); display:flex; justify-content:space-between}
.fgroup .opts{display:flex; flex-direction:column; gap:2px}
.fopt{display:flex; align-items:center; gap:10px; min-height:38px; padding:0 10px; border-radius:12px; font-size:14px; cursor:pointer; color:var(--ink); transition:background .15s; width:100%; text-align:left}
.fopt:hover{background:var(--surface-3)}
.fopt:is([aria-pressed="true"],[aria-current="true"],[aria-selected="true"]){background:var(--accent-soft); color:var(--accent); font-weight:600}
.fopt .ic{width:18px; height:18px; color:var(--c, var(--ink-3))}
.fopt:is([aria-pressed="true"],[aria-current="true"],[aria-selected="true"]) .ic{color:inherit}
.fopt em{margin-left:auto; font-style:normal; font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.fsizes{display:flex; flex-wrap:wrap; gap:6px}
.fsizes :is(button,a){height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:13.5px; color:var(--ink-2)}
.fsizes :is(button,a):is([aria-pressed="true"],[aria-current="true"],[aria-selected="true"]){border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600}
.tools{display:flex; flex-direction:column; gap:14px; margin-bottom:18px}
.search{position:relative}
.search > .ic{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-3); width:20px; height:20px}
.search input{width:100%; height:52px; border-radius:16px; border:1px solid var(--line-2); background:var(--surface); padding:0 48px; font-size:16px; outline:none; transition:border-color .15s, box-shadow .15s}
.search input:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.search .clear{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--ink-3)}
.search .clear[hidden]{display:none}
.search .clear:hover{background:var(--surface-3); color:var(--ink)}
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.toolbar .grow{flex:1}
.viewsw{display:inline-flex; gap:2px; background:var(--surface-3); border-radius:999px; padding:3px}
.viewsw :is(button,a){width:34px; height:32px; border-radius:999px; display:grid; place-items:center; color:var(--ink-3)}
.viewsw :is(button,a):is([aria-pressed="true"],[aria-current="true"],[aria-selected="true"]){background:var(--surface); color:var(--ink); box-shadow:var(--lift)}
.active-f{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.active-f .pill{display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 8px 0 12px; border-radius:999px; background:var(--ink); color:var(--bg); font-size:13px; font-weight:600}
.active-f .pill .ic{width:15px; height:15px; opacity:.7}
.active-f .reset{font-size:13px; color:var(--accent); font-weight:600; padding:0 6px}
.found{font-size:14px; color:var(--ink-2)}
.found b{color:var(--ink)}
.chiprow{display:none; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px}
.chiprow::-webkit-scrollbar{display:none}
.chiprow :is(button,a){flex:none; height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:14px; font-weight:500; display:flex; gap:6px; align-items:center; color:var(--ink-2)}
.chiprow :is(button,a) .ic{width:17px; height:17px; color:var(--c)}
.chiprow :is(button,a):is([aria-pressed="true"],[aria-current="true"],[aria-selected="true"]){background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chiprow :is(button,a):is([aria-pressed="true"],[aria-current="true"],[aria-selected="true"]) .ic{color:inherit}
.more{display:flex; justify-content:center; margin-top:24px}
.mobile-only{display:none}

/* empty */
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:48px 20px; background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--r-panel)}
.empty svg.art{width:200px; height:auto; margin-bottom:6px}
.empty .empty-t{font:600 20px/1.25 var(--f-display); letter-spacing:-.02em; margin:0}
.empty p{color:var(--ink-2); max-width:42ch}
.empty .btn{margin-top:10px}

/* ---------- category page ---------- */
.cathead{display:flex; gap:20px; align-items:center}
.cathead .ci{width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 14%, transparent); color:var(--c); flex:none}
.cathead .ci .ic{width:34px; height:34px}

/* ---------- rating ---------- */
.rbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:22px}
.podium{display:grid; grid-template-columns:1fr 1.08fr 1fr; gap:16px; align-items:end; margin-bottom:20px}
.pod{background:var(--surface); border:1px solid var(--line); border-radius:var(--bubble); padding:22px 18px 18px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; cursor:pointer; position:relative; transition:border-color .15s}
.pod:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}
.pod .ava{width:72px; height:72px}
.pod.p1{padding-top:34px; border-color:color-mix(in srgb, var(--star) 55%, var(--line)); background:linear-gradient(180deg, var(--star-soft), var(--surface) 55%)}
.pod.p1 .ava{width:88px; height:88px}
.pod .place{position:absolute; top:12px; left:14px; font:700 14px/1 var(--f-display); color:var(--ink-3)}
.pod.p1 .place{color:color-mix(in srgb, var(--star) 75%, var(--ink))}
.pod .crown{position:absolute; top:10px; right:12px; color:var(--star)}
.pod .crown .ic{fill:currentColor}
.pod b.nm{font-weight:600; font-size:16px; display:flex; gap:4px; align-items:center; justify-content:center}
.pod .val{font:600 22px/1 var(--f-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.pod small{font-size:12.5px; color:var(--ink-3)}
.medal{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; font:700 13px/1 var(--f-display)}

/* ---------- channel page ---------- */
.ch-hero{background:var(--surface); border:1px solid var(--line); border-radius:28px; overflow:hidden}
.cover{height:168px; position:relative}
.cover svg{position:absolute; inset:0; width:100%; height:100%}
.ch-id{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:20px; padding:0 28px 24px; align-items:end}
.ch-id .ava-wrap{position:relative; z-index:1; align-self:start; margin-top:-52px; border-radius:50%; padding:5px; background:var(--surface); display:inline-block}
.ch-id .ava{width:112px; height:112px; display:block}
.ch-id h1{font:600 clamp(24px, 3vw, 34px)/1.15 var(--f-display); letter-spacing:-.025em}
.ch-id h1 .verified{width:26px; height:26px; margin-left:8px; vertical-align:-3px}
.ch-id .handle{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; color:var(--ink-2); font-size:14.5px}
.copybtn{display:inline-flex; gap:6px; align-items:center; height:30px; padding:0 10px; border-radius:999px; background:var(--surface-3); font-size:13.5px; font-weight:500; color:var(--ink-2)}
.copybtn:hover{color:var(--accent)}
.copybtn .ic{width:15px; height:15px}
.ch-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.ch-pos{display:flex; gap:8px; flex-wrap:wrap; padding:16px 28px; border-top:1px solid var(--line); background:var(--surface-2)}
.ch-pos a{display:inline-flex; gap:8px; align-items:center; font-size:14px; color:var(--ink-2); height:34px; padding:0 12px 0 6px; border-radius:999px; background:var(--surface); border:1px solid var(--line)}
.ch-pos a:hover{border-color:var(--accent); color:var(--ink)}
.ch-pos a b{font:600 13px/1 var(--f-display); color:var(--ink); background:var(--surface-3); height:24px; min-width:24px; padding:0 7px; border-radius:999px; display:grid; place-items:center}
.metrics{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; margin:20px 0}
.metric-t{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:16px 16px 14px}
.metric-t small{display:flex; gap:6px; align-items:center; font-size:12.5px; color:var(--ink-3); line-height:1.3; min-height:32px}
.metric-t small .ic{width:16px; height:16px; flex:none}
.metric-t b{display:block; font:600 clamp(19px, 1.8vw, 24px)/1.15 var(--f-display); letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums}
.metric-t .d{font-size:12.5px; font-weight:600; margin-top:4px; display:block; font-variant-numeric:tabular-nums}
.qbar{height:6px; border-radius:999px; background:var(--surface-3); margin-top:10px; overflow:hidden}
.qbar i{display:block; height:100%; border-radius:inherit; background:var(--up)}
.cols{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; padding-bottom:56px}
.cols > div{display:flex; flex-direction:column; gap:20px; min-width:0}
.chart{position:relative; user-select:none; -webkit-user-select:none; touch-action:pan-y}
.chart svg{display:block; overflow:visible}
.chart .tip{position:absolute; pointer-events:none; background:var(--toast); color:var(--toast-ink); border-radius:12px 12px 12px 4px; padding:8px 11px; font-size:12.5px; line-height:1.4; white-space:nowrap; transform:translate(-50%, calc(-100% - 12px)); opacity:0; transition:opacity .12s; z-index:2}
.chart .tip b{font-size:14px; font-variant-numeric:tabular-nums}
.chart .axis text{font-size:11.5px; fill:var(--ink-3); font-family:var(--f-body)}
.chart-sum{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.chart-sum small{display:block; font-size:12.5px; color:var(--ink-3)}
.chart-sum b{font:600 17px/1.3 var(--f-display); letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.heat{display:grid; grid-template-columns:28px repeat(24, minmax(0,1fr)); gap:3px; font-size:11px; color:var(--ink-3)}
.heat i{aspect-ratio:1; border-radius:4px; display:block}
.heat span{display:flex; align-items:center}
.heat .hx{text-align:center; justify-content:center}
.heat-leg{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); margin-top:12px; justify-content:flex-end}
.heat-leg i{width:14px; height:14px; border-radius:4px; display:block}
.about p{color:var(--ink-2); line-height:1.6}
.kv{display:flex; flex-direction:column; margin-top:16px; border-top:1px solid var(--line)}
.kv > div{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px}
.kv > div:last-child{border-bottom:0}
.kv span{color:var(--ink-3); display:flex; gap:8px; align-items:center}
.kv span .ic{width:17px; height:17px}
.kv b{font-weight:600; text-align:right}
.rate-big{display:flex; gap:20px; align-items:center}
.rate-big .score{font:600 48px/1 var(--f-display); letter-spacing:-.04em}
.dist{display:flex; flex-direction:column; gap:6px; flex:1}
.dist > div{display:grid; grid-template-columns:12px 1fr 34px; gap:8px; align-items:center; font-size:12.5px; color:var(--ink-3)}
.dist i{height:6px; border-radius:999px; background:var(--surface-3); overflow:hidden; display:block}
.dist i b{display:block; height:100%; background:var(--star); border-radius:inherit}
.rate-me{margin-top:18px; padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.rate-me .lbl{font-size:14px}
.pick{display:flex; gap:2px}
.pick button{width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:var(--line-2); transition:transform .12s, color .12s}
.pick button .ic{width:26px; height:26px}
.pick button .ic{fill:currentColor}
.pick button.on{color:var(--star)}
.pick button:hover{transform:scale(1.12)}
.posts{display:flex; flex-direction:column; gap:12px}
.post{display:flex; gap:10px; align-items:flex-end}
.post .ava{width:36px; height:36px}
.post .bubble{max-width:100%; flex:1; background:var(--surface-2); box-shadow:none; border:1px solid var(--line); padding:10px 14px 8px}
.post .bubble .txt{font-size:14.5px}
.post .meta span{display:inline-flex; gap:4px; align-items:center; margin-right:auto}
.post .meta .ic{color:var(--ink-3)}
.reviews{display:flex; flex-direction:column; gap:14px}
.review{display:flex; gap:12px}
.review .initials{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font:600 14px/1 var(--f-display); color:#fff; flex:none}
.review .bubble{flex:1; max-width:none; background:var(--surface-2); box-shadow:none; border:1px solid var(--line); padding:12px 14px}
.review .top{display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:4px; flex-wrap:wrap}
.review .top b{font-size:14.5px}
.review .top small{color:var(--ink-3); font-size:12.5px}
.review .mini .ic{width:14px; height:14px; color:var(--star)}
.review .mini .ic{fill:currentColor}
.review .mini .off, .review .mini .off .ic{color:var(--line-2)}
.rform{display:flex; flex-direction:column; gap:12px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
.sim{display:flex; flex-direction:column; gap:4px}
.sim a{display:flex; gap:12px; align-items:center; padding:8px; margin:0 -8px; border-radius:14px; transition:background .15s}
.sim a:hover{background:var(--surface-3)}
.sim .ava{width:42px; height:42px}
.sim b{display:block; font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sim small{font-size:12.5px; color:var(--ink-3)}
.sim .d{margin-left:auto; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.ad-box{display:flex; gap:14px; align-items:center; padding:14px; border-radius:18px; background:var(--accent-soft); margin-top:14px}
.ad-box .ic{color:var(--accent); width:24px; height:24px}
.ad-box b{display:block; font-size:15px}
.ad-box small{font-size:13px; color:var(--ink-2)}

/* ---------- add wizard ---------- */
.wiz{display:grid; grid-template-columns:260px minmax(0,1fr); gap:28px; align-items:start; padding-bottom:56px}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; position:sticky; top:calc(env(safe-area-inset-top,0px) + 92px)}
.steps li{display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:14px; color:var(--ink-3); font-weight:500}
.steps li .n{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--line-2); font:600 13px/1 var(--f-display); flex:none; background:var(--surface)}
.steps li.cur{color:var(--ink); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line)}
.steps li.cur .n{border-color:var(--accent); background:var(--accent); color:#fff}
.steps li.done{color:var(--ink-2)}
.steps li.done .n{border-color:var(--up); background:var(--up); color:#fff}
.steps li .n .ic{width:16px; height:16px}
.wiz-card{background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:32px; display:flex; flex-direction:column; gap:22px}
.wiz-card h2{font:600 24px/1.2 var(--f-display); letter-spacing:-.02em}
.wiz-card > p{color:var(--ink-2); margin-top:-12px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-grid .full{grid-column:1/-1}
.preview{display:flex; gap:16px; align-items:center; padding:16px; border-radius:20px; border:1px solid var(--line); background:var(--surface-2)}
.preview .ava{width:64px; height:64px}
.preview b{font-size:17px; display:block}
.preview small{color:var(--ink-3)}
.wiz-nav{display:flex; justify-content:space-between; gap:12px; padding-top:6px; flex-wrap:wrap}
.verify{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.vopt{border:1.5px solid var(--line); border-radius:var(--bubble); padding:18px; display:flex; flex-direction:column; gap:10px; cursor:pointer; text-align:left; transition:border-color .15s, background .15s}
.vopt:hover{border-color:var(--line-2)}
.vopt:is([aria-pressed="true"],[aria-current="true"],[aria-selected="true"]){border-color:var(--accent); background:var(--accent-soft)}
.vopt .ic{width:26px; height:26px; color:var(--accent)}
.vopt b{font-size:15.5px}
.vopt p{font-size:13.5px; color:var(--ink-2)}
.code{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:16px; background:var(--surface-3); font:600 18px/1 var(--f-display); letter-spacing:.06em}
.done-art{width:180px; align-self:center}
.gate{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:40px; margin-bottom:56px}
.gate h1{font:600 clamp(24px, 2.6vw, 32px)/1.15 var(--f-display); letter-spacing:-.02em}
.gate p{color:var(--ink-2); margin-top:12px; max-width:44ch}
.gate .btns{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap}
.gate svg.art{width:100%; max-width:380px; justify-self:center}

/* ---------- profile ---------- */
.prof{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.prof .initials{width:84px; height:84px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font:600 28px/1 var(--f-display)}
.prof h1{font:600 clamp(24px, 3vw, 34px)/1.1 var(--f-display); letter-spacing:-.025em}
.prof p{color:var(--ink-2); margin-top:4px}
.prof .btn{margin-left:auto}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin:28px 0 22px; overflow-x:auto; scrollbar-width:none}
.tabs :is(button,a){height:44px; padding:0 14px; font-weight:600; color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; display:flex; gap:8px; align-items:center}
.tabs :is(button,a)[aria-selected="true"]{color:var(--ink); border-color:var(--accent)}
.tabs :is(button,a) em{font-style:normal; font-size:12px; background:var(--surface-3); border-radius:999px; padding:2px 8px; color:var(--ink-2)}
.mych{display:flex; gap:14px; align-items:center; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--bubble)}
.mych .ava{width:52px; height:52px}
.mych b{display:block; font-weight:600}
.mych small{color:var(--ink-3); font-size:13px}
.status{margin-left:auto; display:inline-flex; gap:6px; align-items:center; height:30px; padding:0 12px; border-radius:999px; font-size:13px; font-weight:600; background:var(--star-soft); color:color-mix(in srgb, var(--star) 65%, var(--ink))}
.status .ic{width:16px; height:16px}

/* ---------- modal / sheet ---------- */
.modal-back{position:fixed; inset:0; z-index:100; background:var(--scrim); display:grid; place-items:center; padding:20px; animation:fade .2s ease both; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.modal{position:relative; background:var(--surface); border-radius:28px; width:100%; max-width:920px; max-height:calc(100dvh - 40px); overflow:auto; box-shadow:var(--pop); animation:rise .28s cubic-bezier(.2,.8,.2,1) both}
.modal-sm{max-width:480px}
.modal-x{position:absolute; top:14px; right:14px; z-index:3; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--surface-3); color:var(--ink-2)}
.modal-x:hover{color:var(--ink)}
.modal-pad{padding:28px}
.modal h2, .auth-titles h1{font:600 22px/1.2 var(--f-display); letter-spacing:-.02em}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0; transform:translateY(24px) scale(.98)}to{opacity:1; transform:none}}
.auth{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); min-height:600px}
.auth-art{position:relative; background:var(--accent); color:#fff; padding:36px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden}
.auth-art p{opacity:.85; margin-top:12px; position:relative; max-width:32ch; font-size:14.5px}
.auth-art .auth-art-t{font:600 26px/1.15 var(--f-display); letter-spacing:-.02em; position:relative; max-width:14ch; opacity:1; margin-top:0}
.auth-art .brand{color:#fff; position:relative}
.auth-art .floaters{position:relative; display:flex; flex-direction:column; gap:10px}
.auth-art .fb{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-radius:18px 18px 18px 6px; padding:10px 14px; display:flex; gap:10px; align-items:center; font-size:14px; max-width:280px}
.auth-art .fb:nth-child(2){margin-left:36px}
.auth-art .fb:nth-child(3){margin-left:12px}
.auth-art .fb .ic{width:20px; height:20px}
.auth-form{padding:36px 36px 30px; display:flex; flex-direction:column; gap:18px}
.auth-form .seg{align-self:flex-start}
.auth-form form{display:flex; flex-direction:column; gap:14px}
.or{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink-3)}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--line)}
.tg-btn{background:#2AABEE; color:#fff}
.tg-btn:hover{background:#1C98DA}
.strength{display:flex; gap:4px; margin-top:2px}
.strength i{flex:1; height:4px; border-radius:999px; background:var(--surface-3); transition:background .2s}
.row2{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.reasons{display:flex; flex-direction:column; gap:8px; margin:18px 0}
.reasons label{padding:12px 14px; border:1px solid var(--line); border-radius:14px}
.sheet .modal{max-width:440px}
.sheet .sheet-body{padding:24px 20px 12px; display:flex; flex-direction:column; gap:22px}
.sheet .sheet-foot{position:sticky; bottom:0; background:var(--surface); padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); display:flex; gap:10px}
.spin{width:18px; height:18px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .7s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- toast ---------- */
.toasts{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:calc(100vw - 32px)}
.toast{background:var(--toast); color:var(--toast-ink); padding:12px 16px; border-radius:18px 18px 18px 6px; font-size:14.5px; font-weight:500; display:flex; gap:10px; align-items:center; box-shadow:var(--pop); animation:rise .25s ease both}
.toast .ic{width:20px; height:20px; flex:none}
.toast.ok .ic{color:var(--up)}
.toast.warn .ic{color:var(--star)}

/* ---------- footer & tabbar ---------- */
.foot{border-top:1px solid var(--line); padding:40px 0 48px; margin-top:24px; background:var(--surface)}
.foot-in{display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:32px}
.foot p{color:var(--ink-3); font-size:14px; margin-top:12px; max-width:36ch}
.foot .foot-h{margin:0 0 12px; font-size:14px; line-height:inherit; font-weight:600}
.foot nav{display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--ink-2)}
.foot nav a:hover, .foot nav button:hover{color:var(--accent)}
.foot nav button{text-align:left; color:inherit; font-size:inherit}
.foot-bot{display:flex; justify-content:space-between; gap:12px; margin-top:32px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3); flex-wrap:wrap}
.tabbar{display:none}

/* ---------- responsive ---------- */
@media (max-width: 1180px){
  .hdr-search{display:none}
  .hdr-actions{margin-left:auto}
  .metrics{grid-template-columns:repeat(3, minmax(0,1fr))}
  .cats{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (max-width: 1023px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .filters.side{display:none}
  .mobile-only{display:inline-flex}
  .chiprow{display:flex}
  .grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .hero{grid-template-columns:minmax(0,1fr); gap:36px; padding-top:36px}
  .hero h1{max-width:16ch}
  .cols{grid-template-columns:minmax(0,1fr)}
  .duo{grid-template-columns:minmax(0,1fr)}
  .wiz{grid-template-columns:minmax(0,1fr)}
  .steps{position:static; flex-direction:row; overflow-x:auto; scrollbar-width:none}
  .steps li{flex:none}
  .steps li:not(.cur) .t{display:none}
  .auth{grid-template-columns:minmax(0,1fr); min-height:0}
  .auth-art{display:none}
  .row-list{grid-template-columns:minmax(0,1.6fr) repeat(2, minmax(0,.8fr)) auto}
  .row-list .cell.hide-md, .rows-head .hide-md{display:none}
  .rows-head{grid-template-columns:minmax(0,1.6fr) repeat(2, minmax(0,.8fr)) 118px}
}
@media (max-width: 860px){
  .nav, .hdr-actions .hide-sm{display:none}
  .hdr-in{height:60px; gap:12px}
  .tabbar{display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:60; background:color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px); border-top:1px solid var(--line); padding:6px 6px env(safe-area-inset-bottom,0px)}
  .tabbar a{display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0 4px; font-size:11px; font-weight:600; color:var(--ink-3)}
  .tabbar a .ic{width:24px; height:24px}
  .tabbar a[aria-current="page"]{color:var(--accent)}
  .tabbar a.plus span.pl{width:44px; height:34px; border-radius:14px; background:var(--accent); color:#fff; display:grid; place-items:center; margin-bottom:1px}
  .tabbar a.plus .ic{width:22px; height:22px}
  main{padding-bottom:84px}
  .toasts{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .foot{padding-bottom:110px}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-in > div:first-child{grid-column:1/-1}
  .stats-strip{grid-template-columns:repeat(2, minmax(0,1fr))}
  .stats-strip > div:nth-child(3){border-left:0}
  .stats-strip > div:nth-child(n+3){border-top:1px solid var(--line)}
  .ch-id{grid-template-columns:minmax(0,1fr); padding:0 20px 20px; gap:14px}
  .ch-id .ava-wrap{margin-top:-56px; justify-self:start}
  .ch-id .ava{width:96px; height:96px}
  .ch-actions{justify-content:flex-start}
  .ch-pos{padding:14px 20px}
  .cover{height:128px}
  .podium{grid-template-columns:1fr 1fr 1fr; gap:8px}
  .pod{padding:30px 8px 14px}
  .pod .ava{width:52px; height:52px}
  .pod.p1 .ava{width:64px; height:64px}
  .pod .val{font-size:17px}
  .pod b.nm{font-size:13.5px}
  .pod .vote{display:none}
  .gate{grid-template-columns:minmax(0,1fr); padding:28px}
  .gate svg.art{max-width:260px; order:-1}
}
@media (max-width: 640px){
  .wrap{padding:0 16px}
  .section{padding-top:30px; padding-bottom:30px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .grid.hscroll{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:0 16px 4px; scroll-padding:0 16px; scrollbar-width:none}
  .grid.hscroll::-webkit-scrollbar{display:none}
  .grid.hscroll > *{scroll-snap-align:start}
  .totals{display:grid; grid-template-columns:1fr 1fr; gap:16px 0}
  .totals > div:nth-child(3){border-left:0; padding-left:0}
  .viewsw{display:none}
  .mobile-hide{display:none}
  .cats{grid-template-columns:minmax(0,1fr)}
  .cats.cats-lg{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
  .cats-lg .cat{padding:16px; gap:12px}
  .cats-lg .cat .ci{width:42px; height:42px}
  .cats-lg .cat-foot{flex-direction:column; align-items:flex-start; gap:2px}
  .cats-lg .cat-foot b{font-size:17px}
  .totals > div{padding:0 16px}
  .feed-body{height:360px}
  .metrics{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
  .chart-sum{grid-template-columns:repeat(2, minmax(0,1fr))}
  .panel{padding:18px; border-radius:22px}
  .row{grid-template-columns:28px minmax(0,1fr) auto auto; padding:12px 14px; gap:10px}
  .row .who{gap:10px}
  .row .who .ava{width:38px; height:38px}
  .row .metric b{font-size:14.5px}
  .row .vote{height:34px; padding:0 10px}
  .row-list{grid-template-columns:minmax(0,1fr) auto; padding:14px}
  .row-list .cell{display:none}
  .row-list .cell.keep{display:block; text-align:right}
  .rows-head{display:none}
  .form-grid, .verify{grid-template-columns:minmax(0,1fr)}
  .wiz-card{padding:22px; border-radius:24px}
  .modal-back{place-items:end center; padding:0}
  .modal{border-radius:26px 26px 0 0; max-height:calc(100dvh - 24px); animation:up .3s cubic-bezier(.2,.8,.2,1) both; padding-bottom:env(safe-area-inset-bottom,0px)}
  .auth-form{padding:26px 20px 22px}
  .modal-pad{padding:24px 20px}
  .toolbar .seg :is(button,a){padding:0 10px}
  .ccard-stats{grid-template-columns:1fr 1fr}
  .ccard-stats .spark-cell{display:none}
  .prof .btn{margin-left:0}
  .cta{padding:26px; min-height:0}
  .cta .art{width:190px; right:-40px; bottom:-30px; opacity:.55}
  .page-head{padding:26px 0 18px}
  .cathead .ci{width:56px; height:56px}
  .rate-big .score{font-size:40px}
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
}

/* extras */
.ch-actions .fav{width:44px; height:44px; border:1px solid var(--line); background:var(--surface)}
.post .initials{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; font:600 12px/1 var(--f-display); flex:none}
.pick:hover button{color:var(--star)}
.pick button:hover ~ button{color:var(--line-2)}
.row .who a:hover, .ccard-name a:hover span, .pod a:hover{color:var(--accent)}
.feed .msg .bubble{cursor:pointer}
.feed-top svg.brandmark{flex:none}
@media (max-width: 1180px){
  .ch-id{grid-template-columns:auto minmax(0,1fr)}
  .ch-actions{grid-column:1/-1; justify-content:flex-start}
}
@media (max-width: 860px){
  .ch-id{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 400px){
  .toolbar .seg :is(button,a){padding:0 8px; font-size:13px}
  .ch-actions .btn-primary{flex:1 1 100%}
}

.ava{flex:none}
@media (max-width: 640px){
  .row .vote .num{display:none}
  .row .vote{width:36px; padding:0; justify-content:center}
  .row .metric small{white-space:nowrap}
  .cta .art{display:none}
  .ch-actions{gap:6px}
  .ch-actions .btn-icon, .ch-actions .fav{width:40px; height:40px}
  .ch-actions .vote-lg{flex:1; justify-content:center; padding:0 10px; height:40px; min-width:0}
  .ch-actions .btn-primary{flex:1 1 100%}
  .heat i{border-radius:2px}
}

/* ===== UX pass ===== */
.btn-primary{background:var(--btn); color:#fff}
.btn-primary:hover{background:var(--btn-2)}
.vote.is-on{background:var(--btn); color:#fff}
.vote-lg{background:var(--accent-soft); color:var(--accent)}
.vote-lg:hover{background:color-mix(in srgb, var(--accent) 20%, transparent)}
.vote-lg.is-on{background:var(--up-soft); color:var(--up)}
.cta, .auth-art{background-color:var(--btn)}
.steps li.cur .n{background:var(--btn); border-color:var(--btn)}
.prof .initials, .me .initials{background:var(--btn)}
.tabbar a.plus span.pl{background:var(--btn)}
.bubble{background:var(--bubble-bg)}
.hero h1{max-width:15ch}
.bigsearch{position:relative}
.opt{font-weight:500; color:var(--ink-3); margin-left:6px}
button.chip, a.chip{height:32px; padding:0 12px; transition:background .15s,color .15s}
button.chip:hover, a.chip:hover{background:var(--accent-soft); color:var(--accent)}
.toasts{pointer-events:none}
.toast{pointer-events:auto}
.toast-act{margin-left:6px; font-weight:700; color:var(--toast-ink); text-decoration:underline; text-underline-offset:3px}
.hdr-sbtn{display:none}
.segs{display:flex; gap:10px; flex-wrap:wrap}
/* suggestions */
.suggest{position:absolute; left:0; right:0; top:calc(100% + 8px); background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--pop); padding:6px; z-index:80; max-height:min(440px, 68vh); overflow:auto; text-align:left}
.suggest[hidden]{display:none}
.sg-item{display:flex; gap:12px; align-items:center; padding:8px 10px; border-radius:12px; color:var(--ink)}
.sg-item:hover, .sg-item.is-active{background:var(--surface-3)}
.sg-item .ava{width:38px; height:38px}
.sg-item .ci{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 14%, transparent); color:var(--c); flex:none}
.sg-item > span:not(.ci):not(.chip){min-width:0; flex:1}
.sg-item b{display:block; font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sg-item small{display:block; font-size:12.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sg-item mark{background:var(--star-soft); color:inherit; border-radius:4px; padding:0 1px}
.sg-all{display:flex; gap:8px; align-items:center; width:100%; padding:11px 10px; border-radius:12px; color:var(--accent); font-weight:600; font-size:14px; border-top:1px solid var(--line); margin-top:4px}
.sg-all:hover, .sg-all.is-active{background:var(--accent-soft)}
.sg-empty{padding:14px; color:var(--ink-2); font-size:14px}
/* wizard how-to */
.howto{margin:0; padding:0; list-style:none; counter-reset:h; display:flex; flex-direction:column; gap:10px}
.howto li{counter-increment:h; display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); line-height:1.5}
.howto li::before{content:counter(h); flex:none; width:24px; height:24px; border-radius:50%; background:var(--surface-3); color:var(--ink); display:grid; place-items:center; font:600 12px/1 var(--f-display); margin-top:1px}
.howto b{color:var(--ink)}
.sheet .fsizes :is(button,a){display:inline-flex; gap:6px; align-items:center}
.sheet .fsizes :is(button,a) .ic{width:16px; height:16px; color:var(--c, var(--ink-3))}
.sheet .fsizes :is(button,a):is([aria-pressed="true"],[aria-current="true"],[aria-selected="true"]) .ic{color:inherit}
.empty .quick{justify-content:center; margin-top:4px}
.fav-strip{margin-bottom:56px}
.fav-strip h2{font:600 22px/1.2 var(--f-display); letter-spacing:-.02em; margin-bottom:6px}
.fav-strip > p{color:var(--ink-2); margin-bottom:18px}
.ccard-stats{align-items:start}
.metric-t[title]{cursor:help}
@media (max-width: 1180px){ .hdr-sbtn{display:inline-flex} }
@media (max-width: 640px){
  .toolbar{row-gap:12px}
  .toolbar .grow{display:none}
  .toolbar .select-sm{margin-left:auto; max-width:56%}
  .toolbar .segs{order:3; width:calc(100% + 32px); flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px}
  .toolbar .segs::-webkit-scrollbar{display:none}
  .toolbar .segs .seg{flex:none}
  .rbar > .seg:first-child{width:100%; scrollbar-width:none}
  .hero h1{max-width:none}
}

.sg-all{position:sticky; bottom:-6px; background:var(--surface)}
.howto li > span{flex:1}
@media (max-width: 640px){ .page-head.cat-intro > p{display:none} }

/* ===== SEO/GEO pass ===== */
.skip{position:absolute; left:-9999px; top:8px; z-index:300; background:var(--surface); color:var(--ink); padding:10px 14px; border-radius:12px; box-shadow:var(--pop); font-weight:600}
.skip:focus{left:16px}
main:focus{outline:none}
.hero{align-items:start}
.hero > div:first-child{padding-top:18px}
.hero-stats{background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:24px 24px 20px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--pop)}
.hs-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.hs-top h2{font:600 15px/1.3 var(--f-body); color:var(--ink-2)}
.hs-main small{display:block; font-size:13px; color:var(--ink-3)}
.hs-main b{display:block; font:700 clamp(40px, 4.6vw, 60px)/1 var(--f-display); letter-spacing:-.045em; margin:8px 0}
.hs-main span{font-weight:600; font-size:14.5px}
.hs-fig{margin:0}
.hero-chart{width:100%; height:110px; display:block}
.hs-axis{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-3); margin-top:6px}
.hs-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin:0; border-top:1px solid var(--line); padding-top:14px}
.hs-grid > div{padding:0 12px; border-left:1px solid var(--line)}
.hs-grid > div:first-child{padding-left:0; border-left:0}
.hs-grid dt{font-size:12.5px; color:var(--ink-3)}
.hs-grid dd{margin:3px 0 0; font:600 20px/1.2 var(--f-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.hs-foot{font-size:13px; color:var(--ink-3)}
.ccard-name h3{font-size:inherit; font-weight:inherit; margin:0; min-width:0}
ol.rows, ol.podium{list-style:none; margin:0; padding:0}
.podium{margin-bottom:20px}
.pod.p2{order:1} .pod.p1{order:2} .pod.p3{order:3}
.crumbs ol{display:flex; flex-wrap:wrap; align-items:center; list-style:none; margin:0; padding:0; gap:0}
.crumbs li{display:flex; align-items:center}
.crumbs li + li::before{content:"/"; margin:0 9px; color:var(--line-2)}
.crumbs li[aria-current]{color:var(--ink-2)}
.crumbs a:hover{color:var(--accent)}
.cat-sum, .ch-summary, .rt-sum{color:var(--ink-2); max-width:78ch; line-height:1.6; font-size:15.5px}
.cat-sum{margin-top:14px}
.ch-summary{margin:20px 0 0}
.rt-sum{margin-bottom:18px}
.metric-t dt{display:flex; gap:6px; align-items:center; font-size:12.5px; color:var(--ink-3); line-height:1.3; min-height:32px}
.metric-t dt .ic{width:16px; height:16px; flex:none}
.metric-t dd{margin:0}
.metric-t dd.v{display:block; font:600 clamp(19px, 1.8vw, 24px)/1.15 var(--f-display); letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums}
.kv{margin:16px 0 0}
.kv dt{color:var(--ink-3); display:flex; gap:8px; align-items:center}
.kv dt .ic{width:17px; height:17px}
.kv dd{margin:0; font-weight:600; text-align:right}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-size:14.5px; font-variant-numeric:tabular-nums}
.tbl th, .tbl td{padding:11px 12px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap}
.tbl thead th{font-size:12.5px; font-weight:500; color:var(--ink-3); border-bottom-color:var(--line-2)}
.tbl th:first-child, .tbl td:first-child{text-align:left; padding-left:0}
.tbl th[scope="row"]{font-weight:500}
.tbl tbody tr:last-child > *{border-bottom:0}
.tbl td{font-weight:600}
.faq-list{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel); overflow:hidden}
.faq-list.in-panel{border:0; border-radius:0; background:none}
.qa{border-top:1px solid var(--line)}
.qa:first-child{border-top:0}
.qa summary{list-style:none; cursor:pointer; padding:18px 22px; font-weight:600; font-size:16px; display:flex; justify-content:space-between; gap:16px; align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
.qa summary .ic{transition:transform .2s; color:var(--ink-3); flex:none}
.qa[open] summary .ic{transform:rotate(180deg)}
.qa p{padding:0 22px 20px; color:var(--ink-2); max-width:75ch; line-height:1.6; margin:0}
.in-panel .qa summary{padding:14px 0; font-size:15px}
.in-panel .qa p{padding:0 0 16px}
.review time{display:block; font-size:12.5px}
fieldset.fgroup{border:0; margin:0; padding:0; min-width:0}
.fgroup legend{padding:0; margin:0 0 10px; font-size:13.5px; font-weight:600; color:var(--ink-2)}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-bottom:56px}
.about-grid .wide{grid-column:1/-1}
.about-grid h2{font:600 19px/1.3 var(--f-display); letter-spacing:-.01em}
.about-grid p{color:var(--ink-2); line-height:1.65; margin-top:10px; max-width:75ch}
.about-grid .note{display:flex; gap:8px; align-items:flex-start; background:var(--star-soft); color:var(--ink); padding:10px 12px; border-radius:12px; font-size:14px}
.about-grid .note .ic{color:color-mix(in srgb, var(--star) 70%, var(--ink)); margin-top:2px}
.defs{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 32px; margin:16px 0 0}
.defs dt{font-weight:600}
.defs dd{margin:4px 0 0; color:var(--ink-2); line-height:1.55}
.foot-in{grid-template-columns:1.3fr repeat(4, minmax(0,1fr))}
@media (max-width: 1023px){ .hero > div:first-child{padding-top:0} .foot-in{grid-template-columns:1fr 1fr 1fr} .foot-in > div:first-child{grid-column:1/-1} }
@media (max-width: 860px){ .foot-in{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){
  .hs-grid{grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:14px}
  .hs-grid > div:nth-child(3){padding-left:0; border-left:0}
  .hero-stats{padding:20px; border-radius:24px}
  .about-grid, .defs{grid-template-columns:minmax(0,1fr)}
  .qa summary{padding:16px 18px; font-size:15px}
  .qa p{padding:0 18px 18px}
  .tbl th, .tbl td{padding:10px 8px}
}

.hero{grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr); gap:48px}
.hero h1{font-size:clamp(34px, 4.3vw, 58px); max-width:none}
.hs-grid{grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:14px}
.hs-grid > div:nth-child(3){padding-left:0; border-left:0}
@media (max-width: 1023px){ .hero{grid-template-columns:minmax(0,1fr)} }

/* порядок на странице канала: карточка, описание, статистика */
.about-wide{margin-top:20px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:8px 40px; align-items:start}
.about-wide h2{font:600 17px/1.3 var(--f-body); margin-bottom:12px}
.about-wide .kv{margin-top:0}
.stats-sec{margin-top:32px}
.stats-sec > h2{font:600 clamp(20px, 2vw, 24px)/1.2 var(--f-display); letter-spacing:-.02em}
.stats-sec .ch-summary{margin-top:8px}
.ch-id .chips .chip{height:32px; padding:0 12px}
@media (max-width: 860px){
  .about-wide{grid-template-columns:minmax(0,1fr)}
  .about-wide .kv{margin-top:16px}
  .stats-sec{margin-top:26px}
}

.tbl abbr{text-decoration:none}

/* ===== шапка канала без обложки ===== */
.ch-id{grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"ava name actions" "ava meta actions"; gap:8px 22px; padding:26px 28px; align-items:center}
.ch-id .ava-wrap{grid-area:ava; margin:0; padding:0; background:none; position:static; align-self:center}
.ch-id .ava{width:96px; height:96px}
.ch-name{grid-area:name; min-width:0; align-self:end}
.ch-name .handle{display:block; margin-top:4px; color:var(--ink-2); font-size:14.5px}
.ch-meta{grid-area:meta; display:flex; flex-wrap:wrap; gap:8px; align-items:center; align-self:start; margin-top:4px}
.ch-meta .chip, .ch-meta .copybtn{height:32px; padding:0 12px}
.ch-actions{grid-area:actions; align-self:center}
@media (max-width: 1180px){
  .ch-id{grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ava name" "ava meta" "actions actions"}
  .ch-actions{grid-area:actions; justify-content:flex-start; margin-top:10px}
}
@media (max-width: 860px){
  .ch-id{grid-template-columns:64px minmax(0,1fr); grid-template-areas:"ava name" "meta meta" "actions actions"; padding:20px; gap:12px 14px}
  .ch-id .ava-wrap{margin:0; justify-self:start}
  .ch-id .ava{width:64px; height:64px}
  .ch-id h1{font-size:23px}
  .ch-name{align-self:center}
  .ch-name .handle{font-size:14px; margin-top:2px}
  .ch-meta{margin-top:0}
  .ch-actions{margin-top:2px}
  .ch-pos{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .ch-pos::-webkit-scrollbar{display:none}
  .ch-pos a{flex:none}
}

/* ===== меню вместо нижней панели ===== */
.tabbar{display:none!important}
.hdr-menu{display:none}
@media (max-width: 860px){
  .hdr-menu{display:inline-flex}
  main{padding-bottom:0}
  .toasts{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .foot{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
}
.me .initials{font-size:11px; letter-spacing:-.03em}
.modal-back.drawer{place-items:stretch end; padding:0}
.drawer .modal.menu{height:100%; max-height:none; width:min(360px, 88vw); border-radius:24px 0 0 24px; padding:calc(14px + env(safe-area-inset-top,0px)) 18px calc(20px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:16px; overflow:auto; animation:slideIn .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
.menu-top{display:flex; justify-content:space-between; align-items:center; gap:12px}
.menu .modal-x{position:static}
.menu-user{display:flex; gap:12px; align-items:center; padding:12px; border-radius:18px; background:var(--surface-2); border:1px solid var(--line)}
.menu-user .initials{width:44px; height:44px; border-radius:50%; background:var(--btn); color:#fff; display:grid; place-items:center; font:600 14px/1 var(--f-display); flex:none}
.menu-user > span:not(.initials){min-width:0; flex:1}
.menu-user b{display:block; font-weight:600}
.menu-user small{display:block; color:var(--ink-3); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menu-user > .ic{color:var(--ink-3)}
.menu-auth{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.menu-nav{display:flex; flex-direction:column}
.menu-nav a{display:flex; align-items:center; gap:14px; min-height:50px; padding:0 12px; border-radius:14px; font-weight:600; font-size:16px}
.menu-nav a > span{flex:1}
.menu-nav a .ic:first-child{color:var(--ink-3); width:22px; height:22px}
.menu-nav a .ic:last-child{color:var(--line-2); width:18px; height:18px}
.menu-nav a:hover{background:var(--surface-3)}
.menu-nav a[aria-current="page"]{background:var(--accent-soft); color:var(--accent)}
.menu-nav a[aria-current="page"] .ic{color:var(--accent)}
.menu-cats .lbl{display:block; margin-bottom:10px}
.menu-cats .chip .ic{color:var(--c)}
.menu-theme{margin-top:auto; padding:14px 12px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); gap:12px}
.menu-theme > span{flex:1}
.menu-theme > .ic{color:var(--ink-3)}

/* ===== компактная карточка ===== */
.ccard{padding:14px 16px; gap:10px}
.cc-head{display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:12px; align-items:center}
.cc-head .ava{width:48px; height:48px}
.cc-main{min-width:0}
.cc-main h3{font-size:15.5px; font-weight:600; line-height:1.3; margin:0}
.cc-main h3 a{display:flex; align-items:center; gap:4px; min-width:0}
.cc-main h3 a > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cc-main h3 .verified{width:16px; height:16px; flex:none}
.cc-meta{display:flex; align-items:center; gap:10px; margin:3px 0 0; font-size:13px; color:var(--ink-3); white-space:nowrap; min-width:0}
.cc-meta > span{display:inline-flex; align-items:center; gap:4px; flex:none}
.cc-meta .ic{width:15px; height:15px}
.cc-meta .is-c > .ic{color:var(--accent)}
.cc-meta .is-g > .ic{color:var(--grp)}
.cc-meta b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.cc-meta .st{color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums}
.cc-meta .st .ic{color:var(--star)}
.cc-meta .st .ic{fill:currentColor}
.cc-meta .cc-cat{display:block; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
.cc-desc{margin:0; font-size:13.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cc-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; border-top:1px solid var(--line)}
.cc-grow{display:flex; align-items:center; gap:6px; min-width:0; font-variant-numeric:tabular-nums; white-space:nowrap}
.cc-grow > .ic{width:17px; height:17px}
.cc-grow b{font:600 16px/1 var(--f-display); letter-spacing:-.02em}
.cc-grow > span:not(.sr){font-size:12.5px; font-weight:600; opacity:.85}
.ccard .fav{width:34px; height:34px; align-self:start; margin:-4px -6px 0 0}
.ccard .vote{height:32px}
.grid{gap:12px}
@media (max-width: 640px){ .grid.hscroll{grid-auto-columns:88%} }

/* кнопки шапки прижаты вправо, когда поле поиска скрыто */
@media (max-width: 1180px){ .hdr-search + .hdr-actions{margin-left:auto} }
@media (max-width: 640px){ .tabs :is(button,a){padding:0 10px} .tabs{gap:0} }

/* ===== карточка: название, аудитория и динамика, описание, категория ===== */
.cc-head{grid-template-columns:48px minmax(0,1fr)}
.cc-main h3{font-size:16px}
.cc-meta{flex-wrap:wrap; row-gap:4px; gap:8px; white-space:normal; margin-top:4px; font-size:13.5px; color:var(--ink-2)}
.cc-subs{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.cc-subs .ic{width:16px; height:16px}
.cc-subs.is-c > .ic{color:var(--accent)}
.cc-subs.is-g > .ic{color:var(--grp)}
.cc-subs b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.cc-delta{display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px 0 7px; border-radius:999px; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.cc-delta .ic{width:15px; height:15px}
.cc-delta.up{background:var(--up-soft); color:var(--up)}
.cc-delta.down{background:var(--down-soft); color:var(--down)}
.cc-desc{font-size:14px}
.cc-foot{border-top:0; padding-top:2px}
.cc-cat{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px 0 10px; border-radius:999px; font-size:13.5px; font-weight:600; min-width:0; max-width:100%;
  background:color-mix(in srgb, var(--c) 12%, transparent); color:color-mix(in srgb, var(--c) 72%, var(--ink)); transition:background .15s}
.cc-cat:hover{background:color-mix(in srgb, var(--c) 20%, transparent)}
.cc-cat .ic{width:16px; height:16px; flex:none; color:var(--c)}
.cc-act{display:inline-flex; align-items:center; gap:6px; flex:none}
.ccard .cc-act .fav{margin:0; align-self:center}
.row-list .cc-cat{height:28px; font-size:13px}

.cc-head{grid-template-columns:48px minmax(0,1fr) auto; align-items:start}
.cc-head .ava{align-self:center}
.ccard .cc-head .fav{margin:-4px -6px 0 0}
.cc-meta{gap:4px 10px}
.cc-delta{height:auto; padding:0; background:none!important; gap:3px}
.cc-cat{white-space:nowrap; overflow:hidden; flex:0 1 auto}
.cc-cat > span{overflow:hidden; text-overflow:ellipsis; min-width:0}
.cc-foot .vote{flex:none}

.cc-meta{flex-direction:column; align-items:flex-start; gap:3px}
.cc-per{margin-left:3px; font-weight:500; color:var(--ink-3)}

/* ===== UX pass 3 ===== */
:root{--hdr-h:69px}
@media (max-width: 860px){ :root{--hdr-h:61px} }
/* закреплённая панель канала */
.ch-sticky{position:fixed; left:0; right:0; top:calc(env(safe-area-inset-top,0px) + var(--hdr-h)); z-index:45; background:color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px); border-bottom:1px solid var(--line); opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .2s, transform .2s}
.ch-sticky.is-on{opacity:1; transform:none; pointer-events:auto}
.cs-in{display:flex; align-items:center; gap:12px; height:60px}
.cs-id{display:flex; align-items:center; gap:10px; min-width:0; flex:1; text-align:left}
.cs-id .ava{width:36px; height:36px}
.cs-id > span{min-width:0}
.cs-id b{display:block; font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cs-id small{display:block; font-size:12.5px; color:var(--ink-3)}
.cs-act{display:flex; gap:8px; align-items:center; flex:none}
@media (max-width: 480px){ .cs-lbl{display:none} .cs-act .btn-primary{width:36px; padding:0} }
/* плавающие кнопки */
.fab{display:none}
@media (max-width: 1023px){
  .fab{display:inline-flex; align-items:center; gap:8px; position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:55; height:46px; padding:0 20px; border-radius:999px; background:var(--toast); color:var(--toast-ink); font-weight:600; font-size:15px; box-shadow:var(--pop); opacity:0; transform:translate(-50%, 16px); pointer-events:none; transition:opacity .2s, transform .2s}
  .fab.is-on{opacity:1; transform:translate(-50%, 0); pointer-events:auto}
  .fab .ic{width:18px; height:18px}
  .toasts{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
.to-top{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:55; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--pop); opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .2s, transform .2s}
.to-top.is-on{opacity:1; transform:none; pointer-events:auto}
.to-top .ic{transform:rotate(180deg)}
/* недавно просмотренные */
.recent-sec{padding-top:4px; padding-bottom:8px}
.rc-h{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px}
.rc-h h2{font:600 17px/1.3 var(--f-body)}
.rc-h .link{font-size:14px}
.recent{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px}
.recent::-webkit-scrollbar{display:none}
.rc{flex:none; display:flex; gap:10px; align-items:center; padding:8px 16px 8px 8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--bubble); max-width:250px; transition:border-color .15s}
.rc:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}
.rc .ava{width:38px; height:38px}
.rc > span{min-width:0}
.rc b{display:block; font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rc small{display:block; font-size:12.5px; color:var(--ink-3); white-space:nowrap}
@media (max-width: 640px){ .recent{margin:0 -16px; padding:0 16px 4px} }
/* подсказка клавиши поиска */
.kbd-hint{position:absolute; right:12px; top:50%; transform:translateY(-50%); font:600 12px/1 var(--f-body); color:var(--ink-3); border:1px solid var(--line-2); border-radius:6px; padding:3px 7px; background:var(--surface-2); pointer-events:none}
.hdr-search input:focus ~ .kbd-hint, .hdr-search input:not(:placeholder-shown) ~ .kbd-hint{display:none}
/* компактная статистика на телефоне */
@media (max-width: 640px){
  .stats-strip{display:flex; overflow-x:auto; scrollbar-width:none; margin-top:16px}
  .stats-strip::-webkit-scrollbar{display:none}
  .stats-strip > div{flex:none; padding:10px 18px; border-top:0!important; border-left:1px solid var(--line)!important}
  .stats-strip > div:first-child{border-left:0!important}
  .stats-strip b{font-size:18px; margin-top:2px}
}

.recent-sec{padding:0; margin-top:30px; max-width:560px}
.hero > div:first-child{min-width:0}
@media (max-width: 1023px){ .recent-sec{max-width:none} }

/* ===== шторка меню v2 ===== */
.drawer .modal.menu{width:min(340px, 86vw); gap:18px; padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
.menu > *{flex-shrink:0}
.menu-top{min-height:44px}
.menu-top .brand{font-size:18px}
.menu-top .brand svg{width:32px; height:32px}
.menu-x{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--ink-2); transition:background .15s}
.menu-x:hover{background:var(--surface-3)}
.m-auth{padding:14px; border-radius:18px; background:var(--surface-2); border:1px solid var(--line)}
.m-auth p{font-size:14px; line-height:1.45; color:var(--ink-2); margin:0 0 12px}
.m-auth-btns{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.m-auth-btns .btn{height:42px; padding:0 12px; font-size:14.5px}
.mnav, .msub{display:flex; flex-direction:column; gap:2px}
.mnav a, .msub a{display:flex; align-items:center; gap:14px; min-height:48px; padding:0 12px; border-radius:14px; font-weight:600; font-size:16px; color:var(--ink); transition:background .15s}
.mnav a .ic, .msub a .ic{width:22px; height:22px; color:var(--ink-3); flex:none}
.mnav a:hover, .msub a:hover{background:var(--surface-3)}
.mnav a[aria-current="page"], .msub a[aria-current="page"]{background:var(--accent-soft); color:var(--accent)}
.mnav a[aria-current="page"] .ic, .msub a[aria-current="page"] .ic{color:var(--accent)}
.madd{display:flex; align-items:center; gap:12px; padding:12px 14px 12px 12px; border-radius:18px; background:var(--accent-soft); transition:background .15s}
.madd:hover{background:color-mix(in srgb, var(--accent) 20%, transparent)}
.ma-ic{width:40px; height:40px; border-radius:50%; background:var(--btn); color:#fff; display:grid; place-items:center; flex:none}
.ma-ic .ic{width:20px; height:20px}
.madd > span:nth-child(2){flex:1; min-width:0}
.madd b{display:block; font-weight:600; font-size:15.5px; color:var(--ink)}
.madd small{display:block; font-size:13px; color:var(--ink-2)}
.madd > .ic{color:var(--accent); width:18px; height:18px}
.mc-h{display:flex; justify-content:space-between; align-items:baseline; margin:0 2px 10px}
.mc-h span{font-size:13.5px; font-weight:600; color:var(--ink-2)}
.mc-h .link{font-size:14px}
.mc-list{display:flex; flex-wrap:wrap; gap:8px}
.mc-list .cc-cat{height:34px; font-size:14px}
.msub{margin-top:auto; padding-top:10px; border-top:1px solid var(--line)}
.msub a{min-height:44px; font-size:15px; font-weight:500; color:var(--ink-2)}
.msub a .ic{width:20px; height:20px}

/* ===== карточка v4 ===== */
.ccard{padding:16px; gap:14px; transition:border-color .15s, transform .12s}
.ccard:active{transform:scale(.985)}
.cc-head{grid-template-columns:52px minmax(0,1fr) auto; gap:14px; align-items:center}
.cc-head .ava{width:52px; height:52px; align-self:center}
.cc-main{min-width:0; display:flex; flex-direction:column; gap:3px}
.cc-eyebrow{display:inline-flex; align-items:center; gap:5px; align-self:flex-start; max-width:100%; font-size:12.5px; font-weight:600; line-height:1.3; color:color-mix(in srgb, var(--c) 72%, var(--ink))}
.cc-eyebrow .ic{width:14px; height:14px; flex:none; color:var(--c)}
.cc-eyebrow > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cc-eyebrow:hover > span{text-decoration:underline; text-underline-offset:2px}
.cc-main h3{font-size:16.5px; line-height:1.25}
.cc-desc{font-size:13.5px; line-height:1.4; color:var(--ink-2)}
.ccard .cc-head .fav{align-self:start; margin:-6px -8px 0 0}
.cc-stats{display:flex; align-items:center; gap:18px; padding:9px 9px 9px 14px; border-radius:14px; background:color-mix(in srgb, var(--surface-3) 55%, var(--surface))}
.cc-stat{display:flex; flex-direction:column; min-width:0}
.cc-stat b{font:600 15.5px/1.15 var(--f-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink)}
.cc-stat small{font-size:12px; line-height:1.3; color:var(--ink-3); white-space:nowrap; margin-top:2px}
.cc-stat.up b{color:var(--up)}
.cc-stat.down b{color:var(--down)}
.cc-stats .vote{margin-left:auto; flex:none; height:36px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line)}
.cc-stats .vote:hover{background:var(--accent-soft); box-shadow:none}
.cc-stats .vote.is-on{background:var(--btn); color:#fff; box-shadow:none}
/* на сенсорных экранах ховер не залипает */
@media (hover: none){
  .ccard:hover, .pod:hover, .rc:hover, .cat:hover{border-color:var(--line)}
  .row:hover{background:transparent}
  .cc-stats .vote:hover{background:var(--surface); box-shadow:inset 0 0 0 1px var(--line)}
  .cc-stats .vote.is-on:hover{background:var(--btn)}
}
/* каталог с боковой панелью: две колонки, чтобы цифры не теснились */
@media (min-width: 1024px){ .layout .grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
/* подстройка под ширину самой карточки */
.ccard{container-type:inline-size}
@container (max-width: 330px){
  .cc-stats{gap:12px; padding-left:12px}
  .cc-stat b{font-size:14px}
}
@container (max-width: 290px){
  .cc-stats .vote .num{display:none}
  .cc-stats .vote{width:36px; padding:0; justify-content:center}
}

/* ===== рейтинг v2 ===== */
.rt-head{padding-bottom:18px}
.rt-note{display:flex; gap:8px; align-items:center; font-size:14.5px!important; color:var(--ink-2)}
.rt-note .ic{width:18px; height:18px; color:var(--ink-3); flex:none}
.rt-tabs{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin-bottom:12px}
.rt-tabs::-webkit-scrollbar{display:none}
.rt-tabs :is(button,a){flex:none; display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px 0 13px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-weight:600; font-size:14px; color:var(--ink-2); transition:background .15s, color .15s}
.rt-tabs :is(button,a) .ic{width:18px; height:18px}
.rt-tabs :is(button,a):is([aria-pressed="true"],[aria-current="true"],[aria-selected="true"]){background:var(--ink); color:var(--bg); border-color:var(--ink)}
.rt-filters{display:flex; gap:10px; align-items:center; margin-bottom:22px; flex-wrap:wrap}
.rt-filters .select-sm{min-width:0}
.podium{gap:12px; margin-bottom:14px}
.pod{padding:20px 12px 16px; gap:4px; justify-content:flex-end; border-color:var(--line)}
.pod .place, .pod .crown{display:none}
.pod-ava{position:relative; display:inline-block; margin-bottom:8px}
.pod .ava{width:64px; height:64px}
.pod.p1 .ava{width:80px; height:80px}
.pod-medal{position:absolute; right:-4px; bottom:-2px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font:700 13px/1 var(--f-display); color:#fff; border:3px solid var(--surface)}
.pod.p1 .pod-medal{background:#F5A623}
.pod.p2 .pod-medal{background:#98A2B6}
.pod.p3 .pod-medal{background:#D0864A}
.pod.p1{padding-top:26px; background:linear-gradient(180deg, color-mix(in srgb, #F5A623 16%, var(--surface)), var(--surface) 75%); border-color:color-mix(in srgb, #F5A623 40%, var(--line))}
.pod.p2{background:linear-gradient(180deg, color-mix(in srgb, #98A2B6 14%, var(--surface)), var(--surface) 75%)}
.pod.p3{background:linear-gradient(180deg, color-mix(in srgb, #D0864A 12%, var(--surface)), var(--surface) 75%)}
.pod b.nm{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:center; font-size:14.5px; line-height:1.3; min-height:2.6em}
.pod b.nm .verified{width:15px; height:15px; margin-left:3px; vertical-align:-2px}
.pod .val{font-size:20px; margin-top:4px}
.rt-sum{font-size:14px!important; color:var(--ink-3)!important; margin:0 0 18px}
@media (max-width: 640px){
  .rt-head h1{font-size:28px}
  .rt-tabs{margin:0 -16px 12px; padding:0 16px}
  .rt-filters{flex-wrap:nowrap}
  .rt-filters .seg{flex:none}
  .rt-filters .select-sm{flex:1; max-width:none}
  .podium{gap:8px}
  .pod{padding:16px 6px 12px}
  .pod.p1{padding-top:22px}
  .pod .ava{width:52px; height:52px}
  .pod.p1 .ava{width:64px; height:64px}
  .pod-medal{width:24px; height:24px; font-size:11.5px; border-width:2px}
  .pod b.nm{font-size:13px}
  .pod .val{font-size:16px}
}

/* ===== кабинет v2 ===== */
.prof-page{padding-top:28px}
.prof-card{display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"ava id out" "stats stats stats"; gap:18px 18px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:24px}
.prof-card .initials{grid-area:ava; width:72px; height:72px; border-radius:50%; background:var(--btn); color:#fff; display:grid; place-items:center; font:600 24px/1 var(--f-display); letter-spacing:-.03em}
.prof-id{grid-area:id; min-width:0}
.prof-id h1{font:600 clamp(21px, 2.6vw, 30px)/1.15 var(--f-display); letter-spacing:-.02em; overflow-wrap:anywhere}
.prof-id p{color:var(--ink-2); margin-top:3px; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prof-id .prof-since{display:flex; gap:6px; align-items:center; font-size:13px; color:var(--ink-3); margin-top:6px}
.prof-since .ic{width:15px; height:15px}
.prof-out{grid-area:out; align-self:start}
.prof-stats{grid-area:stats; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:0; padding-top:16px; border-top:1px solid var(--line)}
.prof-stats > div{padding:0 14px; border-left:1px solid var(--line)}
.prof-stats > div:first-child{padding-left:0; border-left:0}
.prof-stats dt{font-size:12.5px; color:var(--ink-3)}
.prof-stats dd{margin:3px 0 0; font:600 20px/1.2 var(--f-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.ptabs{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:24px 0 18px; gap:0}
.ptabs button{justify-content:center; padding:0 6px}
.pbody{padding-bottom:56px}
.mylist{display:flex; flex-direction:column; gap:10px}
.mych{align-items:center}
.mych-t{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.mych-t b, .mych-t small{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mych-t .status{margin:6px 0 0; height:26px; font-size:12.5px}
.mylist > .btn{margin-top:4px}
/* компактные пустые состояния */
.empty{padding:32px 20px; gap:8px}
.empty svg.art{width:150px; margin-bottom:2px}
.empty .empty-t{font-size:19px}
@media (max-width: 640px){
  .prof-page{padding-top:18px}
  .prof-card{grid-template-columns:56px minmax(0,1fr) auto; padding:18px; border-radius:24px; gap:14px}
  .prof-card .initials{width:56px; height:56px; font-size:19px}
  .prof-id h1{font-size:20px}
  .prof-id p{font-size:14px}
  .prof-out{width:36px; padding:0}
  .prof-out span{display:none}
  .prof-stats > div{padding:0 10px}
  .prof-stats dd{font-size:18px}
  .ptabs{margin:18px 0 14px}
  .ptabs button{font-size:14px; gap:6px}
  .empty{padding:24px 16px}
  .empty svg.art{width:118px}
  .empty .empty-t{font-size:17px}
  .empty p{font-size:14px}
}

.rt-sum{margin-top:14px!important}
.prof-id .prof-since{white-space:normal}
@media (max-width: 640px){
  .pod b.nm .verified{display:none}
  .rt-filters .seg :is(button,a){padding:0 10px}
}

/* ===== страница категории v2 ===== */
.cathead{align-items:flex-start}
.cathead .ci{margin-top:2px}
.cathead h1{overflow-wrap:anywhere}
.cat-intro{color:var(--ink-2); margin-top:10px; font-size:16px; line-height:1.5; max-width:60ch}
.p-sh, .tb-break{display:none}
.cat-about .cat-sum{margin-top:0}
.leaders{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:18px}
.leader{display:flex; flex-direction:column; gap:10px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--bubble); min-width:0; transition:border-color .15s}
.leader:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}
.ld-l{display:flex; gap:6px; align-items:center; font-size:12.5px; font-weight:600; color:var(--ink-3)}
.ld-l .ic{width:15px; height:15px}
.ld-c{display:flex; gap:10px; align-items:center; min-width:0}
.ld-c .ava{width:40px; height:40px}
.ld-c > span{min-width:0}
.ld-c b{display:block; font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ld-c small{display:block; font-size:13px; color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums}
.ld-c small.up{color:var(--up)}
@media (max-width: 640px){
  .cathead{gap:14px}
  .cathead .ci{width:44px; height:44px}
  .cathead .ci .ic{width:22px; height:22px}
  .cathead h1{font-size:23px; line-height:1.15}
  .cat-intro{font-size:14.5px; margin-top:6px}
  .leaders{grid-template-columns:minmax(0,1fr); gap:8px}
  .leader{flex-direction:row; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px}
  .leader .ld-l{order:2; flex:none; font-size:12px}
  .leader .ld-l .ic{display:none}
  .leader .ld-c{order:1}
  /* статистика: 2×2 без прокрутки */
  .stats-strip{display:grid!important; grid-template-columns:repeat(2, minmax(0,1fr)); overflow:visible}
  .stats-strip > div{padding:10px 14px; border-left:1px solid var(--line)!important; border-top:0!important}
  .stats-strip > div:nth-child(odd){border-left:0!important}
  .stats-strip > div:nth-child(n+3){border-top:1px solid var(--line)!important}
  .stats-strip b{font-size:18px}
  /* панель в две строки: фильтры + тип, период + сортировка */
  .toolbar .segs{display:contents}
  .toolbar > .mobile-only{order:1}
  .toolbar .seg-type{order:2; flex:none}
  .tb-break{display:block; order:3; flex-basis:100%; height:0}
  .toolbar .seg-period{order:4; flex:none}
  .toolbar .select-sm{order:5; flex:1 1 130px; max-width:none; margin-left:0}
  .toolbar .seg :is(button,a){padding:0 9px}
  .p-lg{display:none}
  .p-sh{display:inline}
}

@media (max-width: 640px){
  .toolbar .select-sm{flex:1 1 0; min-width:110px; width:0}
  .sec-h h2{font-size:21px}
  .leader .ld-l{max-width:45%; text-align:right; line-height:1.3}
}
@media (max-width: 640px){
  .leader{flex-direction:column; align-items:stretch; justify-content:flex-start; gap:8px; padding:12px 14px}
  .leader .ld-l{order:0; max-width:none; text-align:left; font-size:12px}
  .leader .ld-l .ic{display:inline-block}
  .leader .ld-c{order:1}
}

/* ===== главная v3 ===== */
.hero2{grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:48px; align-items:center; padding-top:40px; padding-bottom:28px}
.h2-main{min-width:0}
.live-badge{display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:18px}
.live-badge i{width:8px; height:8px; border-radius:50%; background:var(--up); box-shadow:0 0 0 0 color-mix(in srgb, var(--up) 50%, transparent); animation:live 2s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--up) 45%, transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero2 h1{font-size:clamp(32px, 4.2vw, 54px); line-height:1.04; max-width:17ch}
.hero2 .lead{margin-top:18px; max-width:52ch}
.hero2 .bigsearch{margin-top:26px}
.hero-kpis{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin:26px 0 0; max-width:600px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:14px 0}
.hero-kpis > div{padding:0 16px; border-left:1px solid var(--line); min-width:0}
.hero-kpis > div:first-child{border-left:0}
.hero-kpis dt{display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink-3); white-space:nowrap}
.hero-kpis dt .ic{width:14px; height:14px; flex:none}
.hero-kpis dd{margin:4px 0 0; font:600 clamp(18px, 1.8vw, 22px)/1.15 var(--f-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
.hero2 .recent-sec{margin-top:26px}
/* топ роста */
.lb{background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:20px; box-shadow:var(--pop); display:flex; flex-direction:column; gap:14px; min-width:0}
.lb-h{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.lb-h h2{display:flex; align-items:center; gap:8px; font:600 17px/1.3 var(--f-body)}
.lb-h h2 .ic{color:#F97316; width:20px; height:20px}
.lb-h .seg :is(button,a){padding:0 11px}
.lb-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.lb-row{display:grid; grid-template-columns:30px 42px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 8px; margin:0 -8px; border-radius:16px; transition:background .15s}
.lb-row:hover{background:var(--surface-2)}
.lb-list li + li .lb-row{border-top:1px solid var(--line); border-radius:0 0 16px 16px}
.lb-list li + li .lb-row:hover{border-top-color:transparent}
.lb-rank{font:600 15px/1 var(--f-display); color:var(--ink-3); text-align:center}
.lb-row .ava{width:42px; height:42px}
.lb-t{min-width:0}
.lb-t b{display:block; font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lb-t small{display:block; font-size:12.5px; font-weight:600; color:color-mix(in srgb, var(--c) 72%, var(--ink)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lb-g{text-align:right; white-space:nowrap}
.lb-g b{display:block; font:600 15.5px/1.2 var(--f-display); letter-spacing:-.02em; color:var(--up); font-variant-numeric:tabular-nums}
.lb-g small{font-size:12.5px; font-weight:600; color:var(--up); opacity:.8}
.lb .btn-block .ic{width:18px; height:18px}
/* возможности */
.feat-sec{padding-top:12px; padding-bottom:12px}
.feat-t{font:600 15px/1.3 var(--f-body); color:var(--ink-2); margin-bottom:12px}
.feats{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px}
.feats a{display:flex; gap:12px; align-items:flex-start; height:100%; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--bubble); transition:border-color .15s}
.feats a:hover{border-color:color-mix(in srgb, var(--c) 45%, var(--line))}
.fi{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; background:color-mix(in srgb, var(--c) 14%, transparent); color:var(--c)}
.fi .ic{width:21px; height:21px}
.feats b{display:block; font-weight:600; font-size:15px; line-height:1.3}
.feats small{display:block; font-size:13px; color:var(--ink-2); line-height:1.45; margin-top:3px}
/* категории */
.cts{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px}
.ct{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px 12px 12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--bubble); transition:border-color .15s}
.ct:hover{border-color:color-mix(in srgb, var(--c) 45%, var(--line))}
.ct .ci{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 13%, transparent); color:var(--c)}
.ct .ci .ic{width:20px; height:20px}
.ct-t{min-width:0}
.ct-t b{display:block; font-weight:600; font-size:14.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ct-t small{display:block; font-size:12.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ct-g{font-size:12.5px; font-weight:700; color:var(--up); font-variant-numeric:tabular-nums}
.ct-g.down{color:var(--down)}
@media (hover: none){ .lb-row:hover{background:none} .feats a:hover, .ct:hover{border-color:var(--line)} }
@media (max-width: 1180px){ .cts{grid-template-columns:repeat(3, minmax(0,1fr))} .feats{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 1023px){
  .hero2{grid-template-columns:minmax(0,1fr); gap:24px; padding-top:28px}
  .hero2 h1{max-width:20ch}
}
@media (max-width: 640px){
  .hero2{padding-top:22px; gap:20px}
  .live-badge{margin-bottom:14px; height:28px; font-size:12.5px}
  .hero2 h1{font-size:30px; line-height:1.08}
  .hero2 .lead{font-size:15.5px; margin-top:12px}
  .hero2 .bigsearch{margin-top:20px}
  .hero-kpis{grid-template-columns:repeat(2, minmax(0,1fr)); padding:0; margin-top:20px}
  .hero-kpis > div{padding:12px 14px}
  .hero-kpis > div:nth-child(odd){border-left:0}
  .hero-kpis > div:nth-child(n+3){border-top:1px solid var(--line)}
  .hero-kpis dd{font-size:19px}
  .hero2 .recent-sec{margin-top:22px}
  .lb{padding:16px; border-radius:24px; box-shadow:none}
  .lb-h h2{font-size:16px}
  .lb-row{grid-template-columns:26px 40px minmax(0,1fr) auto; gap:10px}
  .lb-row .ava{width:40px; height:40px}
  .feat-sec{padding-top:10px}
  .feats{grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
  .feats a{flex-direction:column; gap:10px; padding:14px}
  .feats b{font-size:14.5px}
  .feats small{font-size:12.5px}
  .fi{width:36px; height:36px; border-radius:11px}
  .cts{grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
  .ct{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"ic g" "t t"; gap:10px 8px; padding:12px}
  .ct .ci{grid-area:ic; width:36px; height:36px}
  .ct-g{grid-area:g; align-self:start}
  .ct-t{grid-area:t}
  .ct-t b{white-space:normal; font-size:14px}
}

.hero-kpis{max-width:640px}
.hero-kpis > div{padding:0 14px}
.hero-kpis dd{font-size:clamp(17px, 1.6vw, 20px)}
.nw{white-space:nowrap}
.cts-toggle{display:none}
@media (max-width: 640px){
  .nw{white-space:normal}
  .cts:not(.is-open) .ct-more{display:none}
  .cts-toggle{display:flex; margin-top:10px}
  .cts-toggle .ic{width:18px; height:18px; transition:transform .2s}
  .cts-toggle.is-open .ic{transform:rotate(180deg)}
}
.nw{white-space:normal}

/* ===== спокойная динамика и исправленные отступы ===== */
.hero-kpis{padding:14px 0}
.hero-kpis > div{padding:2px 16px}
.hero-kpis dt{margin-bottom:2px}
.lb-g b{font:600 14px/1.3 var(--f-body); letter-spacing:0; color:var(--up)}
.lb-g small{font-size:12px; font-weight:500; color:var(--ink-3); opacity:1}
.lb-t b{font-size:15.5px}
.cc-stat.up b, .cc-stat.down b{font:600 14px/1.25 var(--f-body); letter-spacing:0}
.cc-stat.up small, .cc-stat.down small{margin-top:3px}
@media (max-width: 640px){
  .hero-kpis{padding:0}
  .hero-kpis > div{padding:12px 16px 13px}
  .hero-kpis dd{font-size:19px}
  .lb-row{padding:11px 8px}
  .lb-g b{font-size:13.5px}
}

.hero2 h1{margin-top:0}

/* ===== народный рейтинг на главной ===== */
.lb-sub{font-size:13px; color:var(--ink-3); margin-top:2px}
.lb-empty{padding:2px 2px 16px; font-size:14px; line-height:1.5; color:var(--ink-2)}
.vr-panel{box-shadow:none}
.vr-panel .lb-h h2 .ic{color:var(--accent)}
.vr-row{display:flex; align-items:center; gap:10px}
.vr-list li + li{border-top:1px solid var(--line)}
.vr-link{flex:1; min-width:0; display:grid; grid-template-columns:30px 42px minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 8px; margin-left:-8px; border-radius:16px; transition:background .15s}
.vr-link:hover{background:var(--surface-2)}
.vr-link .ava{width:42px; height:42px}
.vr-bar{display:block; height:4px; border-radius:999px; background:var(--surface-3); margin-top:7px; overflow:hidden; max-width:220px}
.vr-bar i{display:block; height:100%; border-radius:inherit; background:color-mix(in srgb, var(--accent) 70%, transparent)}
.vr-v{text-align:right; white-space:nowrap}
.vr-v b{display:block; font:600 14.5px/1.3 var(--f-body); color:var(--ink); font-variant-numeric:tabular-nums}
.vr-v small{font-size:12px; color:var(--ink-3)}
.vr-row .vote{flex:none; width:38px; height:38px; padding:0; justify-content:center; background:var(--accent-soft); color:var(--accent)}
.vr-row .vote .num{display:none}
.vr-row .vote:hover{background:color-mix(in srgb, var(--accent) 20%, transparent)}
.vr-row .vote.is-on{background:var(--btn); color:#fff}
.vr-panel > .btn .ic, .lb > .btn .ic{width:18px; height:18px}
@media (hover: none){ .vr-link:hover{background:none} }
@media (max-width: 640px){
  .vr-link{grid-template-columns:26px 40px minmax(0,1fr) auto; gap:10px}
  .vr-link .ava{width:40px; height:40px}
  .vr-row .vote{width:36px; height:36px}
}

/* ===== шапка канала v3: как профиль в Telegram ===== */
.ch2 .ch2-top{display:grid; grid-template-columns:auto minmax(0,1fr) minmax(320px, 400px); grid-template-areas:"ava id acts"; gap:24px; align-items:center; padding:26px 28px}
.ch2-ava{grid-area:ava}
.ch2-ava .ava{width:96px; height:96px; display:block}
.ch2-id{grid-area:id; min-width:0}
.ch2 h1{font:600 clamp(24px, 3vw, 34px)/1.15 var(--f-display); letter-spacing:-.025em; overflow-wrap:anywhere}
.ch2 h1 .verified{width:24px; height:24px; margin-left:8px; vertical-align:-3px}
.ch2-handle{display:inline-flex; align-items:center; gap:6px; margin:6px 0 0 -6px; padding:3px 6px; border-radius:8px; font-size:15px; color:var(--ink-2); transition:background .15s}
.ch2-handle .ic{width:15px; height:15px; color:var(--ink-3)}
.ch2-handle:hover{background:var(--surface-3)}
.ch2-meta{margin-top:8px; font-size:14.5px; color:var(--ink-2); display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.ch2-meta .cc-eyebrow{font-size:14.5px}
.ch2-meta .cc-eyebrow .ic{width:16px; height:16px}
.ch2-acts{grid-area:acts; display:flex; flex-direction:column; gap:10px; min-width:0}
.ch2-open{height:48px; width:100%}
.ch2-tiles{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px}
.tile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; height:64px; padding:0 4px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); font-size:12.5px; font-weight:600; transition:background .15s, border-color .15s, color .15s, transform .12s}
.tile .ic{width:22px; height:22px; color:var(--accent)}
.tile span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.tile:hover{background:var(--accent-soft); border-color:transparent}
.tile:active{transform:scale(.96)}
.tile-muted .ic{color:var(--ink-3)}
.tile-vote.is-on{background:var(--accent-soft); border-color:transparent; color:var(--accent)}
.tile-vote.is-on .ic{animation:pop .35s ease}
.tile-fav.is-on{color:var(--down)}
.tile-fav.is-on .ic{color:var(--down)}
.tile-fav.is-on .ic{fill:currentColor}
.ch2-stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--line); background:var(--surface-2)}
.ch2-stats a{display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 8px; text-align:center; transition:background .15s}
.ch2-stats a + a{border-left:1px solid var(--line)}
.ch2-stats a:hover{background:var(--surface-3)}
.ch2-stats b{font:600 18px/1.2 var(--f-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.ch2-stats small{font-size:12.5px; color:var(--ink-3)}
@media (hover: none){ .tile:hover{background:var(--surface-2); border-color:var(--line)} .tile-vote.is-on:hover{background:var(--accent-soft)} .ch2-stats a:hover{background:none} }
@media (max-width: 1180px){
  .ch2 .ch2-top{grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ava id" "acts acts"; gap:20px 22px}
}
@media (max-width: 860px){
  .ch2 .ch2-top{grid-template-columns:minmax(0,1fr); grid-template-areas:"ava" "id" "acts"; justify-items:center; text-align:center; gap:14px; padding:24px 18px 18px}
  .ch2-ava .ava{width:88px; height:88px}
  .ch2 h1{font-size:25px}
  .ch2 h1 .verified{width:21px; height:21px; margin-left:6px}
  .ch2-handle{margin:4px 0 0}
  .ch2-meta{justify-content:center; margin-top:6px}
  .ch2-acts{width:100%; margin-top:4px}
  .tile{height:62px; font-size:12px}
}

.ch2-tiles{grid-template-columns:repeat(3, minmax(0,1fr))}
.ch2-stats small{white-space:nowrap}
.report-link{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:13.5px; color:var(--ink-3); padding:4px 0}
.report-link .ic{width:16px; height:16px}
.report-link:hover{color:var(--down)}
@media (max-width: 640px){
  /* хлебные крошки → ссылка назад на родительский раздел */
  .crumbs li{display:none}
  .crumbs li:nth-last-child(2){display:flex}
  .crumbs li:nth-last-child(2)::before{content:"‹"; margin:0 6px 0 0; font-size:20px; line-height:1; color:var(--ink-2)}
  .crumbs li:nth-last-child(2) a{color:var(--ink-2); font-weight:600}
  .ch2-stats b{font-size:16px}
  .ch2-stats a{padding:12px 6px}
}


/* ===== PHP-версия: серверная разметка ===== */
/* атрибут hidden сильнее любых display в стилях компонентов */
[hidden]{display:none!important}
/* ссылки в переключателях выравниваются как кнопки */
.seg a, .fsizes a, .quick a{display:inline-flex; align-items:center; justify-content:center}
.seg a{text-decoration:none}
/* иконка темы: луна в светлой теме, солнце в тёмной (без мигания при загрузке) */
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:inline-block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:inline-block}
  :root:not([data-theme="light"]) .theme-btn .i-moon{display:none}
}
/* кнопки «Применить» нужны только без JavaScript */
.js .js-hide{display:none!important}
/* переключатель «Канал / Группа» в форме добавления: радиокнопки в виде сегментов */
.seg-radio label{position:relative; display:inline-flex}
.seg-radio input{position:absolute; opacity:0; pointer-events:none}
.seg-radio span{height:32px; padding:0 13px; border-radius:999px; font-weight:600; font-size:13.5px; color:var(--ink-2); display:inline-flex; align-items:center; cursor:pointer; transition:background .15s,color .15s}
.seg-radio input:checked + span{background:var(--surface); color:var(--ink); box-shadow:var(--lift)}
.seg-radio input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
/* страницы входа, регистрации и восстановления пароля */
.auth-page{padding-top:32px; padding-bottom:56px}
.auth-card{background:var(--surface); border:1px solid var(--line); border-radius:28px; overflow:hidden; max-width:920px; margin:0 auto; box-shadow:var(--pop)}
.auth-card-sm{max-width:460px}
.auth-h{font:600 22px/1.2 var(--f-display); letter-spacing:-.02em}
.auth-form form[hidden]{display:none}
/* кабинет: кнопка «Выйти» внутри формы */
.prof-out-form{grid-area:out; align-self:start}
/* место под график до отрисовки */
.chart{min-height:280px}
.chart-wait{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:240px; padding:24px; text-align:center; background:var(--surface-2); border:1px dashed var(--line-2); border-radius:16px; color:var(--ink-2)}
.chart-wait > .ic{width:40px; height:40px; padding:9px; border-radius:50%; background:var(--accent-soft); color:var(--accent)}
.chart-wait p{max-width:38ch; font-size:14px; line-height:1.5}
.chart-wait b{display:block; margin-bottom:2px; color:var(--ink); font-size:15px}
@media (max-width: 560px){ .chart{min-height:220px} }
/* пока подгружаются результаты */
[data-region].is-loading{opacity:.55; transition:opacity .15s}
.is-busy button{pointer-events:none}
.btn .spin{width:16px; height:16px; border-width:2px}