:root{
  --bg:#f6f7f9; --card:#fff; --line:#e5e7eb; --line2:#eef0f3;
  --ink:#111827; --ink2:#374151; --mute:#6b7280; --faint:#9ca3af;
  --accent:#1f3a68; --accent2:#2b4f8c; --accent-soft:#eef2f9;
  --comp:#1d4ed8; --comp-bg:#eff4ff;
  --ai:#6d28d9;   --ai-bg:#f4efff;
  --exp:#047857;  --exp-bg:#ecfaf3;
  --qm:#0e7490;   --qm-bg:#e9f8fa;
  --r:12px;
  --sans: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
a{color:inherit}
[hidden]{display:none!important}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.top-inner{max-width:1480px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:10px 20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:max-content}
.logo{width:34px;height:34px}
.logo *{stroke:none}
.logo .lg-bg{fill:var(--accent)}
.logo .lg-at{fill:#fff}
.logo .lg-dop{fill:#f5b301}
.brand-name{font-weight:700;font-size:20px;letter-spacing:-.01em;line-height:1.1}
.brand-name span{font-weight:400;color:#f5b301}
.brand-sub{font-size:12.5px;color:var(--mute);display:flex;align-items:center;gap:6px}
.dot-live{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px #d1fae5}
.dot-live.stale{background:#f59e0b;box-shadow:0 0 0 3px #fef3c7}
.search{flex:1;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:0 12px;max-width:640px;margin-left:auto}
.search:focus-within{border-color:var(--accent2);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.search svg{color:var(--faint)}
.search input{flex:1;border:0;background:none;outline:none;font:inherit;font-size:15px;padding:9px 0;min-width:0}
.top-actions{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 13px;font-size:15px;font-weight:600;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{background:#f9fafb;border-color:#d1d5db}
.btn.ghost{border-color:transparent;background:none}
.btn.ghost:hover{background:var(--bg)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent2)}
.btn.sm{padding:5px 11px;font-size:13.5px;border-radius:8px}
.btn.active{background:var(--accent-soft);border-color:#c7d3ea;color:var(--accent)}
.pill{font-size:12px;font-weight:700;background:var(--line2);color:var(--ink2);border-radius:99px;padding:1px 8px}
.pill.light{background:rgba(255,255,255,.2);color:#fff}
.icon-btn{border:0;background:none;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-size:17px;color:var(--mute)}
.icon-btn:hover{background:var(--bg);color:var(--ink)}
.spin svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- layout ---------- */
.layout{max-width:1480px;margin:0 auto;display:grid;grid-template-columns:264px minmax(0,1fr);gap:28px;padding:0 20px}
.side{position:sticky;top:110px;align-self:start;max-height:calc(100vh - 110px);overflow:auto;padding:22px 4px 30px 0;scrollbar-width:thin}
.side section{margin-bottom:22px}
.side h4{margin:0 0 8px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);display:flex;justify-content:space-between;align-items:center}
.link{border:0;background:none;color:var(--accent2);font-size:12px;text-transform:none;letter-spacing:0;padding:0}
.side-foot{font-size:12.5px;color:var(--faint);line-height:1.45}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 8px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;justify-content:center;color:var(--ink2)}
.seg button:hover{border-color:#cfd5de}
.seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.seg.small{grid-template-columns:repeat(4,1fr)}
.seg.small button{font-size:13px;padding:6px 4px}
.mdot{width:8px;height:8px;border-radius:50%}
.facet{display:flex;flex-direction:column;gap:1px}
.facet button{display:flex;align-items:center;gap:8px;border:0;background:none;text-align:left;padding:5px 8px;border-radius:7px;font-size:14.5px;color:var(--ink2)}
.facet button:hover{background:#eef0f3}
.facet button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.facet button .n{margin-left:auto;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.facet button.on .n{color:var(--accent2)}
.facet .sw{width:10px;height:10px;border-radius:3px;flex:none}
.facet.compact button{font-size:13.5px;padding:3px 8px}
.facet button.zero{opacity:.45}

/* ---------- toolbar ---------- */
.main{padding:18px 0 80px;min-width:0}
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:10px;min-height:36px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--mute);flex:1}
.crumbs b{color:var(--ink);font-weight:700;font-size:15px}
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:2px 6px 2px 10px;font-size:13px;color:var(--ink2)}
.chip button{border:0;background:none;padding:0 3px;color:var(--faint);font-size:14px;line-height:1}
.chip button:hover{color:var(--ink)}
.views{display:flex;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.views button{border:0;background:none;padding:7px 10px;color:var(--faint)}
.views button+button{border-left:1px solid var(--line)}
.views button.on{color:var(--accent);background:var(--accent-soft)}

.new-pill{position:sticky;top:122px;z-index:20;display:block;margin:0 auto 12px;border:0;background:var(--accent);color:#fff;font-weight:700;font-size:14px;padding:8px 18px;border-radius:99px;box-shadow:0 6px 20px rgba(31,58,104,.28)}

/* ---------- feed ---------- */
.day{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:22px 2px 10px;display:flex;align-items:center;gap:10px}
.day::after{content:"";flex:1;height:1px;background:var(--line)}
.day .n{font-weight:600;letter-spacing:0;text-transform:none;color:var(--faint)}
.feed.cards .day:first-child,.feed.list .day:first-child{margin-top:4px}

.card{display:grid;grid-template-columns:minmax(220px,34%) 1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden;transition:box-shadow .15s,border-color .15s;position:relative}
.card:hover{box-shadow:0 4px 18px rgba(17,24,39,.06);border-color:#dadde3}
.card.focus{outline:2px solid var(--accent2);outline-offset:2px}
.ga{background:#fff;border-right:1px solid var(--line2);display:flex;align-items:center;justify-content:center;padding:14px;cursor:zoom-in;min-height:200px}
.ga img{max-width:100%;max-height:300px;object-fit:contain;display:block}
.card.noimg{grid-template-columns:1fr}
.card.noimg .ga{display:none}
.body{padding:16px 20px 14px;min-width:0;display:flex;flex-direction:column}
.meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--faint);margin-bottom:6px}
.jbadge{display:inline-flex;align-items:center;font-weight:700;font-size:12.5px;color:#fff;border-radius:99px;padding:2px 10px;text-decoration:none;white-space:nowrap}
.kind{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--mute);background:var(--line2);border-radius:5px;padding:1px 6px;text-transform:uppercase}
.newdot{font-size:11px;font-weight:800;color:#b45309;background:#fef3c7;border-radius:5px;padding:1px 6px;letter-spacing:.04em}
.title{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.3;margin:0 0 6px;letter-spacing:-.005em}
.title a{text-decoration:none}
.title a:hover{color:var(--accent2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.authors{font-size:14.5px;color:var(--mute);margin-bottom:8px}
.authors .more{color:var(--accent2);border:0;background:none;padding:0;font-size:14px}
.abs{font-size:15px;color:var(--ink2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 10px}
.card.open .abs{-webkit-line-clamp:unset;display:block}
.abs.none{color:var(--faint);font-style:italic}
mark{background:#fff3b0;color:inherit;border-radius:2px;padding:0 1px}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.tag{font-size:12px;font-weight:600;border-radius:6px;padding:1px 7px;border:1px solid var(--line);color:var(--mute);background:#fff;cursor:pointer}
.tag:hover{border-color:#cbd1da;color:var(--ink2)}
.tag.m-Computational{color:var(--comp);background:var(--comp-bg);border-color:transparent}
.tag.m-AI\/ML{color:var(--ai);background:var(--ai-bg);border-color:transparent}
.tag.m-Experimental{color:var(--exp);background:var(--exp-bg);border-color:transparent}
.actions{display:flex;align-items:center;gap:6px;margin-top:auto;flex-wrap:wrap}
.act{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 10px;font-size:13.5px;font-weight:600;color:var(--ink2);text-decoration:none}
.act:hover{background:#f9fafb;border-color:#d1d5db}
.act.primary{background:var(--accent-soft);border-color:#d3dcee;color:var(--accent)}
.act.saved{color:#b45309;border-color:#fcd34d;background:#fffbeb}
.act.saved svg{fill:#f59e0b;stroke:#d97706}
.act svg{width:15px;height:15px}
.doi{margin-left:auto;font:12px var(--mono);color:var(--faint);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.doi:hover{color:var(--accent2)}

/* grid view */
.feed.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.feed.grid .day{grid-column:1/-1;margin:14px 2px 0}
.feed.grid .day:first-child{margin-top:0}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:box-shadow .15s,transform .15s}
.tile:hover{box-shadow:0 8px 24px rgba(17,24,39,.08);transform:translateY(-1px)}
.tile .ga{height:190px;min-height:0;border-right:0;border-bottom:1px solid var(--line2);padding:10px}
.tile .ga img{max-height:170px}
.tile .ph{width:100%;height:100%;border-radius:8px;display:grid;place-items:center;font:700 16px var(--serif);text-align:center;padding:10px}
.tile .tb{padding:10px 12px 12px}
.tile .tt{font:700 15px/1.3 var(--serif);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:6px 0 0}

/* list view */
.feed.list .card{display:block;margin-bottom:0;border-radius:0;border-width:0 0 1px;background:none}
.feed.list .card:hover{box-shadow:none;background:#fff}
.feed.list .ga,.feed.list .abs,.feed.list .tags,.feed.list .authors,.feed.list .actions{display:none}
.feed.list .body{padding:10px 8px;flex-direction:row;align-items:baseline;gap:12px}
.feed.list .meta{margin:0;flex:none;width:200px}
.feed.list .title{font-size:16px;margin:0}
.feed.list .card.open .abs,.feed.list .card.open .authors{display:block}

.empty{text-align:center;color:var(--mute);padding:70px 20px}
.empty h3{font-family:var(--serif);color:var(--ink);font-size:22px;margin:0 0 6px}
.skel{height:220px;border-radius:var(--r);margin-bottom:14px;background:linear-gradient(90deg,#eef0f3 25%,#f6f7f9 50%,#eef0f3 75%);background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(17,24,39,.32);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);background:#fff;z-index:50;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.08)}
.drawer.on{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 22px 8px}
.drawer-head h2{margin:0;font:700 26px var(--serif)}
.drawer-head p{margin:2px 0 0;color:var(--mute);font-size:14.5px}
.drawer-tools{padding:8px 22px 12px;border-bottom:1px solid var(--line)}
.drawer-tools input{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 11px;font:inherit;font-size:14.5px;outline:none;margin-bottom:10px}
.drawer-tools input:focus{border-color:var(--accent2);box-shadow:0 0 0 3px var(--accent-soft)}
.drawer-tools .row{display:flex;gap:8px}
.drawer-body{flex:1;overflow:auto;padding:6px 22px 20px}
.jgroup h5{margin:18px 0 6px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);display:flex;justify-content:space-between}
.jgroup h5 button{border:0;background:none;color:var(--accent2);font-size:12px;text-transform:none;letter-spacing:0}
.jrow{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:9px;cursor:pointer}
.jrow:hover{background:var(--bg)}
.jicon{width:38px;height:38px;border-radius:8px;color:#fff;display:grid;place-items:center;font-weight:800;font-size:11px;flex:none;letter-spacing:-.02em;text-align:center;line-height:1.05}
.jtxt{flex:1;min-width:0}
.jtxt b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.jtxt small{color:var(--faint);font-size:12.5px;display:flex;gap:6px;align-items:center}
.health{width:7px;height:7px;border-radius:50%;background:#d1d5db}
.health.ok{background:#10b981}.health.err{background:#ef4444}
.switch{width:40px;height:23px;border-radius:99px;background:#d1d5db;position:relative;flex:none;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.jrow.on .switch{background:var(--accent)}
.jrow.on .switch::after{transform:translateX(17px)}
.drawer-foot{border-top:1px solid var(--line);padding:12px 22px;display:flex;justify-content:space-between;align-items:center;color:var(--mute);font-size:14px}

/* ---------- lightbox / toast ---------- */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(255,255,255,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lightbox img{max-width:min(1100px,94vw);max-height:80vh;object-fit:contain}
.lb-cap{max-width:900px;text-align:center;font:700 18px/1.35 var(--serif);margin-top:16px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 16px;border-radius:10px;font-size:14px;z-index:70;box-shadow:0 8px 24px rgba(0,0,0,.18)}

/* ---------- responsive ---------- */
.only-mobile{display:none}
@media (max-width:1020px){
  .layout{grid-template-columns:1fr;padding:0 14px}
  .side{position:fixed;inset:0 auto 0 0;width:300px;max-height:none;background:#fff;z-index:50;padding:14px 18px;transform:translateX(-100%);transition:transform .25s;box-shadow:10px 0 40px rgba(0,0,0,.08)}
  .side.on{transform:none}
  .side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  .only-mobile{display:grid}
  .side-head.only-mobile{display:flex}
}
@media (max-width:720px){
  .top-inner{flex-wrap:wrap;gap:6px;padding:8px 10px}
  .logo{width:28px;height:28px}
  .brand-name{font-size:18px}
  .top-actions{gap:0}
  .top-actions .btn{padding:7px 9px}
  #btnSaved .pill{display:none}
  .search{order:5;flex-basis:100%;max-width:none}
  .top-actions{margin-left:auto}
  .hide-sm{display:none}
  .card{grid-template-columns:1fr}
  .ga{border-right:0;border-bottom:1px solid var(--line2);min-height:0}
  .ga img{max-height:240px}
  .title{font-size:18px}
  .doi{display:none}
  .feed.list .meta{width:auto}
  .feed.list .body{flex-direction:column;gap:2px}
  .new-pill{top:112px}
}

/* ---------- section tabs ---------- */
.tabs{max-width:1480px;margin:0 auto;display:flex;gap:4px;padding:0 20px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:flex;align-items:center;gap:6px;padding:9px 11px 10px;text-decoration:none;font-weight:600;font-size:14.5px;color:var(--mute);border-bottom:2.5px solid transparent;white-space:nowrap}
.tabs a svg{width:17px;height:17px}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--c,var(--accent));border-bottom-color:var(--c,var(--accent))}
.tabs .n{font-size:12px;font-weight:700;color:var(--faint);background:var(--line2);border-radius:99px;padding:0 7px}
.tabs .n:empty{display:none}
.tabs a.on .n{background:var(--accent-soft);color:inherit}
.tab-saved{margin-left:auto}

.sec-intro{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:14px}
.sec-intro:empty{display:none}
.sec-intro .ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex:none}
.sec-intro .ic svg{width:24px;height:24px}
.sec-intro .ic{background:color-mix(in srgb,var(--c) 10%,#fff);color:var(--c)}
.sec-intro h2{margin:0;font:700 21px/1.25 var(--serif)}
.sec-intro p{margin:3px 0 0;color:var(--mute);font-size:14.5px}
.stats{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:9px;font-size:13.5px;color:var(--ink2)}
.stats b{font-variant-numeric:tabular-nums}
.stats .mini{display:inline}
.stats .bar{margin-right:6px}
.stats .bar{display:inline-flex;align-items:flex-end;gap:2px;height:18px;vertical-align:middle}
.stats .bar i{display:block;width:6px;background:#c7d3ea;border-radius:1.5px}
.stats .bar i:last-child{background:var(--accent)}
.sec-intro .bar i:last-child{background:var(--c,var(--accent))}

.tag.sub{color:var(--ink2);background:#f3f4f6;border-color:transparent}
.tag.sub.ai{color:var(--ai);background:#faf7ff;border-color:#e9dcff}
.tag.sub.qm{color:var(--qm);background:#f0fbfc;border-color:#c9eef2}
.card.read .title a{color:#4b5563;font-weight:600}
.card.read .ga img{opacity:.8}
.card.read .meta::after{content:"opened";font-size:11px;color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:0 5px}
.tile.read .tt{color:#4b5563}
@media (max-width:720px){.sec-intro .ic{display:none}.sec-intro p{font-size:13.5px}.tabs .full{display:none}.tabs a .short{display:inline}.tabs{padding:0 8px}.tabs a{padding:8px 10px;font-size:14px}.side{top:0}.new-pill{top:150px}}

.tabs .short{display:none}

.btn{text-decoration:none}
.pill:empty{display:none}

/* tab scroller */
.tabs-wrap{position:relative;max-width:1480px;margin:0 auto}
.tabs{scroll-behavior:smooth}
.tab-arrow{position:absolute;top:0;bottom:2px;width:44px;border:0;font-size:24px;line-height:1;color:var(--ink2);z-index:2;display:none;cursor:pointer}
.tab-arrow.left{left:0;background:linear-gradient(90deg,#fff 55%,rgba(255,255,255,0));text-align:left;padding-left:10px}
.tab-arrow.right{right:0;background:linear-gradient(270deg,#fff 55%,rgba(255,255,255,0));text-align:right;padding-right:10px}
.tab-arrow:hover{color:var(--accent)}
.tabs-wrap.can-left .tab-arrow.left,.tabs-wrap.can-right .tab-arrow.right{display:block}

/* =================== v3 polish: header, tabs, headline =================== */
.top{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(17,24,39,.02)}
.top-inner{padding:14px 24px 10px;gap:22px}
.brand{gap:12px}
.logo{width:44px;height:44px;filter:drop-shadow(0 3px 8px rgba(31,58,104,.25))}
.brand-name{font-size:25px;font-weight:800;letter-spacing:-.025em;line-height:1.05;color:#13233f}
.brand-name span{font-weight:800;color:#f5b301}
.brand-sub{font-size:12.5px;color:var(--mute);display:flex;align-items:center;gap:10px;margin-top:3px;white-space:nowrap}
.brand-sub .status{display:inline-flex;align-items:center;gap:6px;color:var(--mute)}
.brand-sub .tagline{position:relative;padding-right:10px}
.brand-sub .tagline::after{content:"";position:absolute;right:0;top:50%;width:3px;height:3px;border-radius:50%;background:#c4c9d2;transform:translateY(-50%)}
.search{height:44px;border-radius:12px;background:#f3f5f8;border-color:transparent;max-width:620px}
.search:focus-within{background:#fff;border-color:#c7d3ea}
.top-actions{gap:4px}
.btn{border-radius:11px}
.btn.primary{box-shadow:0 2px 8px rgba(31,58,104,.22)}

/* pill tabs */
.tabs{gap:8px;padding:4px 24px 12px}
.tabs a{border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:#fff;font-size:14px;color:var(--ink2);border-bottom-width:1px;transition:background .15s,border-color .15s,color .15s}
.tabs a:hover{background:#f6f7f9;color:var(--ink);border-color:#d5d9e0}
.tabs a svg{width:16px;height:16px;color:var(--c,var(--mute));opacity:.85}
.tabs a.on{background:color-mix(in srgb,var(--c) 9%,#fff);border-color:color-mix(in srgb,var(--c) 38%,#fff);color:var(--c);border-bottom-color:color-mix(in srgb,var(--c) 38%,#fff)}
.tabs a.on svg{opacity:1}
.tabs .n{background:none;padding:0;font-weight:600;color:var(--faint)}
.tabs a.on .n{background:none;color:color-mix(in srgb,var(--c) 70%,#fff)}
.tab-arrow{bottom:8px;top:0}

/* layout offsets for taller header */
.side{top:128px;max-height:calc(100vh - 128px)}
.new-pill{top:138px}

/* section headline + sort */
.toolbar{align-items:flex-end;margin:6px 0 14px;gap:10px}
.headline{flex:1;min-width:0}
.headline h1{margin:0;font:700 26px/1.2 var(--serif);letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.headline h1::before{content:"";width:5px;height:22px;border-radius:3px;background:var(--c,var(--accent))}
.headline p{margin:4px 0 0 15px;color:var(--mute);font-size:14.5px}
.headline p b{color:var(--ink);font-weight:700}
.headline .dot{margin:0 8px;color:#c4c9d2}
.sort{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:0 6px 0 10px;height:36px;color:var(--mute)}
.sort svg{width:16px;height:16px}
.sort select{border:0;background:none;font:600 14px var(--sans);color:var(--ink2);padding:6px 2px;outline:none;cursor:pointer}
.views{height:36px}
.crumbs{margin:-4px 0 12px;flex:none}
.crumbs:empty{display:none}

/* cards */
.card{border-radius:14px}
.card:hover{box-shadow:0 6px 22px rgba(17,24,39,.07);transform:translateY(-1px)}
.card{transition:box-shadow .18s,transform .18s,border-color .18s}
.ga{background:#fcfcfd}
.title{font-size:19.5px}
.day{margin:20px 2px 12px}

@media (max-width:1100px){.brand-sub .tagline{display:none}}
@media (max-width:720px){
  .top-inner{padding:10px 12px 8px;gap:8px}
  .logo{width:36px;height:36px}
  .brand-name{font-size:21px}
  .tabs{padding:2px 12px 10px;gap:6px}
  .tabs a{padding:6px 11px}
  .side{top:0;max-height:none}
  .new-pill{top:160px}
  .headline h1{font-size:22px}
  .headline p{font-size:13.5px}
  .toolbar{flex-wrap:wrap}
  .sort select{font-size:13px}
}
@media (max-width:720px){
  .top-inner{flex-wrap:wrap}
  .brand{flex:1;min-width:0}
  .brand-sub{font-size:11.5px}
  .top-actions{margin-left:0}
  #btnRefresh{display:none}
  .top-actions .btn{padding:7px 8px}
  .headline{flex:1 1 100%}
  .headline h1::before{height:18px}
  .headline p{margin-left:15px}
  .toolbar{justify-content:space-between}
  .sort{margin-right:auto}
}

/* =================== v4: two-row section tabs, header offsets =================== */
:root{--hdr:150px}
@media (min-width:721px){
  .tabs{flex-wrap:wrap;overflow:visible;row-gap:8px;padding:2px 24px 12px}
  .tab-arrow{display:none!important}
}
.tabs a{padding:6px 12px;font-size:14px}
.side{top:calc(var(--hdr) + 4px);max-height:calc(100vh - var(--hdr) - 4px)}
.new-pill{top:calc(var(--hdr) + 10px)}
.seg.small{grid-template-columns:repeat(5,1fr)}
.seg.small button{font-size:12.5px;padding:6px 2px}
@media (max-width:720px){.side{top:0;max-height:none}}
@media (min-width:721px){.tabs{gap:8px}.tabs a{padding:6px 12px;font-size:14px}}
.pubpill{display:inline-flex;align-items:center;font:700 11.5px/1 var(--sans);letter-spacing:.03em;color:var(--pc);
  background:color-mix(in srgb,var(--pc) 8%,#fff);border:1px solid color-mix(in srgb,var(--pc) 35%,#fff);border-radius:99px;padding:4px 9px;cursor:pointer;white-space:nowrap}
.pubpill:hover{background:color-mix(in srgb,var(--pc) 14%,#fff)}
.tile .pubpill{padding:3px 7px;font-size:10.5px}
.feed.list .meta{width:290px}