:root {
  /* Studio slate: cool mid-tone canvas bridges dark Grok covers */
  --ink: #14151c;
  --muted: #5c6170;
  --line: #c7cbda;
  --soft-line: #d5d9e6;
  --panel: #e8eaf3;
  --panel-elevated: #eef0f7;
  --card-body: #e4e7f2;
  --canvas: #d4d7e4;
  --charcoal: #252735;
  --pink: #e54b7a;
  --accent: #6b45e8;
  --accent-2: #3d7cff;
  --surface-hover: #dde0ec;
  --cover-matte: #12141c;
  --cover-fade: #e4e7f2;
  --sidebar-width: 280px;
  --header-height: 64px;
  --radius-lg: 18px;
  --content-max: 1100px;
  --elevated-shadow: 0 14px 36px rgba(36, 40, 70, .11);
  --elevated-shadow-soft: 0 8px 22px rgba(36, 40, 70, .07);
  --hero-grad: radial-gradient(circle at 88% 12%, rgba(229, 75, 122, .18), transparent 28%),
    linear-gradient(135deg, #10121a 0%, #1e2a42 55%, #35204a 100%);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(1100px 560px at 8% -8%, rgba(107, 69, 232, .11), transparent 52%),
    radial-gradient(900px 480px at 100% 0%, rgba(229, 75, 122, .08), transparent 46%),
    radial-gradient(760px 420px at 55% 110%, rgba(61, 124, 255, .06), transparent 52%),
    var(--canvas);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

button { color: inherit; }

a { color: inherit; text-decoration: none; }

.topbar {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px 0 20px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  backdrop-filter: blur(16px) saturate(1.15);
}

.brand { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 220px; }
.brand-word { font-size: 11px; font-weight: 850; letter-spacing: -.02em; }
.brand-arrow { margin-left: 8px; color: #555; font-size: 14px; }
.brand-mark { position: relative; width: 42px; height: 26px; display: inline-block; }
.dorakuai-mark { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(145deg, var(--pink), var(--accent)); box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 28%, transparent); font-size: 17px; font-weight: 900; font-style: italic; }
.lens { position: absolute; top: 8px; width: 16px; height: 13px; border: 3px solid var(--pink); border-radius: 50%; transform: rotate(8deg); }
.lens::after { content: ""; position: absolute; width: 4px; height: 4px; background: var(--pink); border-radius: 50%; top: 2px; left: 3px; }
.lens-left { left: 2px; }
.lens-right { right: 2px; transform: rotate(-8deg); }
.bridge { position: absolute; left: 18px; top: 12px; width: 7px; height: 3px; background: var(--pink); }
.bridge::before { content: ""; position: absolute; left: -14px; top: -9px; width: 39px; height: 8px; border-top: 2px solid var(--pink); transform: rotate(10deg); }

.topnav { display: flex; justify-content: center; align-items: center; gap: 8px; flex: 1; min-width: 0; white-space: nowrap; }
.topnav a { padding: 10px 15px; border-radius: 999px; color: #4a4e5c; font-size: 14px; transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.topnav a:hover { background: var(--surface-hover); color: var(--ink); transform: translateY(-1px); }
.topnav a.active {
  background: color-mix(in srgb, var(--panel-elevated) 82%, var(--accent) 18%);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.top-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.search-trigger { min-width: 128px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; cursor: pointer; }
.search-trigger svg, .search-field svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pill-button { height: 40px; min-width: 92px; padding: 0 21px; border-radius: 999px; font-weight: 700; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.pill-button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(21,22,25,.1); }
.login-button { background: var(--panel); border: 1px solid var(--ink); color: var(--ink); }
.join-button { background: var(--charcoal); border: 1px solid var(--charcoal); color: #fff; }

.mobile-menu { display: none; }
.icon-button { border: 0; background: transparent; }

.sidebar {
  position: fixed;
  z-index: 40;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.sidebar-close { display: none; }

.sidebar-scroll { height: 100%; padding: 22px 23px 36px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d8dadd transparent; }
.side-group { margin-top: 26px; }
.side-group h2 { margin: 0 0 9px 16px; font-size: 14px; font-weight: 500; color: #3e4045; }
.sidebar-row { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 11px; padding: 8px 16px; border: 0; border-radius: 9px; background: transparent; font-size: 14px; text-align: left; cursor: pointer; color: #55575d; transition: background .16s, color .16s, transform .16s; }
.sidebar-row > span:first-child { width: 17px; text-align: center; font-size: 15px; color: #555; }
.side-count { margin-left: auto; padding: 2px 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: var(--panel-elevated); font-size: 11px; font-style: normal; }
.sidebar-row:hover { background: var(--surface-hover); color: var(--ink); transform: translateX(2px); }
.sidebar-row.selected {
  color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 88%, #1a1028), var(--charcoal));
  box-shadow: inset 3px 0 0 var(--pink);
}
.sidebar-row.selected > span:first-child { color: #fff; }
.sidebar-row.locked > span:first-child { font-size: 17px; transform: rotate(180deg); }
.feed-row { margin-bottom: 6px; }
.feed-mode .feed-row { color: #fff; background: #303136; }
.feed-mode [data-section].selected { color: #55575d; background: transparent; }
.side-links .sidebar-row { min-height: 36px; }
.side-links .sidebar-row > span:first-child { font-size: 12px; }

.sidebar-scrim { display: none; }

.page-shell { margin-left: var(--sidebar-width); padding-top: var(--header-height); min-height: 100vh; }
.page-titlebar { height: 72px; background: var(--panel); border-bottom: 1px solid var(--line); }
.page-title-inner { height: 100%; max-width: 1100px; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 12px; }
.title-icon { filter: grayscale(1); font-size: 16px; }
.page-titlebar h1 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.feed-header-actions { display: none; align-items: center; gap: 18px; margin-left: auto; }
.feed-header-actions button { border: 0; background: transparent; cursor: pointer; }
.feed-header-actions .latest-button { font-size: 14px; padding: 6px 10px; border-radius: 999px; }
.feed-header-actions .latest-button.active { background: var(--surface-hover); font-weight: 700; }
/* Show sort control on category pages too */
.page-titlebar .feed-header-actions { display: flex; }
.feed-mode .feed-header-actions { display: flex; }
.feed-mode .title-icon { display: none; }

.content-area { max-width: 1100px; margin: 0 auto; padding: 26px 22px 72px; }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.filter-chip {
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-elevated);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  transition: border .18s, transform .18s, box-shadow .18s, background .18s;
}
.filter-chip:hover {
  border-color: color-mix(in srgb, var(--line) 40%, var(--accent) 60%);
  transform: translateY(-1px);
  box-shadow: var(--elevated-shadow-soft);
}
.filter-chip.active {
  border-color: var(--charcoal);
  background: color-mix(in srgb, var(--panel-elevated) 88%, var(--accent) 12%);
  box-shadow: inset 0 0 0 1px var(--charcoal);
}
.results-meta { min-height: 18px; margin: 0 0 4px; color: var(--muted); font-size: 13px; }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.article-card {
  min-width: 0;
  overflow: hidden;
  background: var(--card-body);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: var(--elevated-shadow-soft);
  transition: transform .24s ease, box-shadow .24s ease, border .24s ease;
}
.article-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--line) 55%, var(--accent) 45%);
  box-shadow: var(--elevated-shadow);
}
.cover {
  position: relative;
  height: 164px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.cover::before, .cover::after { content: ""; position: absolute; z-index: -1; }
.cover-tag { position: absolute; top: 13px; left: 13px; padding: 5px 9px; border-radius: 999px; color: rgba(255,255,255,.92); background: rgba(16,18,23,.42); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.cover-word { max-width: 88%; font-weight: 800; font-size: clamp(20px, 2vw, 30px); line-height: 1.03; letter-spacing: -.04em; text-align: center; }
.cover-word small { display: block; margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; opacity: .72; }

.cover-aurora { color: #fff; background: radial-gradient(circle at 72% 28%, #ff5964 0 2%, transparent 3%), radial-gradient(circle at 25% 65%, #ff625b 0 2%, transparent 3%), linear-gradient(135deg,#25173d,#294a65 48%,#be3a5f); }
.cover-aurora::before { inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size: 24px 24px; transform: perspective(200px) rotateX(50deg) scale(1.4); }
.cover-portrait { color: #fff; background: linear-gradient(120deg,#73513e,#d2a887 42%,#20252d 43%,#11151c); }
.cover-portrait::before { width: 118px; height: 142px; right: 26px; bottom: -18px; background: radial-gradient(circle at 50% 22%,#f0c0a1 0 19%,transparent 20%), linear-gradient(80deg,transparent 36%,#252935 37% 63%,transparent 64%); border-radius: 50%; opacity: .9; }
.cover-diffusion { color: #f8faff; background: radial-gradient(circle at 70% 60%,#1451c7,transparent 24%), linear-gradient(135deg,#06080c,#10172b 52%,#05070b); }
.cover-diffusion .cover-word span { color: #4d77ff; }
.cover-sky { color: #1c2432; background: linear-gradient(140deg,#dceeff,#fff 42%,#aac9ec); }
.cover-sky::before { width: 160%; height: 34px; left: -30%; top: 48%; background: rgba(255,255,255,.7); filter: blur(12px); transform: rotate(-12deg); }
.cover-paper { color: #3c3428; background: #eee1c4; }
.cover-paper::before { width: 210px; height: 145px; background: radial-gradient(ellipse at 20% 70%,#a97f31 0 4%,transparent 5%), radial-gradient(ellipse at 45% 35%,#768953 0 4%,transparent 5%), radial-gradient(ellipse at 72% 62%,#b45e3f 0 4%,transparent 5%); filter: blur(.2px); }
.cover-siri { color: #fff; align-items: flex-end; padding-bottom: 26px; background: radial-gradient(circle at 85% 18%,#173f7b,transparent 28%), linear-gradient(140deg,#111,#05090f); }
.cover-siri::before { inset: 0; background: repeating-linear-gradient(0deg,transparent 0 19px,rgba(82,150,250,.14) 20px); }
.cover-notebook { color: #15171c; align-items: flex-start; justify-content: flex-start; padding: 42px 25px; background: linear-gradient(150deg,#fff,#f8f9fc 58%,#dce8ff); }
.cover-notebook .cover-word { text-align: left; font-size: 26px; }
.cover-notebook .cover-word span { color: #5777c6; }
.cover-type { color: #594230; background: linear-gradient(110deg,#f2dfc9,#fff3d9); }
.cover-type .cover-word { font-family: Georgia,serif; font-size: 42px; color: #b86e2d; }
.cover-gemma { color: #a7c9ff; background: radial-gradient(circle at 52% 120%,#2146aa,transparent 42%), linear-gradient(140deg,#061024,#0c1e4b); }
.cover-gemma::before { inset: -50%; background: repeating-linear-gradient(70deg,transparent 0 32px,rgba(93,145,255,.16) 33px 34px); transform: rotate(-5deg); }
.cover-terminal { color: #95ff7a; align-items: flex-start; justify-content: flex-start; padding: 34px 24px; background: linear-gradient(145deg,#070908,#151915); }
.cover-terminal .cover-word { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 16px; text-align: left; line-height: 1.45; }
.cover-koi { color: #214165; background: radial-gradient(circle at 20% 40%,#f38c65 0 7%,transparent 8%), radial-gradient(circle at 80% 68%,#5bbfd3 0 6%,transparent 7%), linear-gradient(135deg,#eaf5ff,#c6e6ef); }
.cover-orange { color: #1b1a18; background: #df795b; }
.cover-orange::before { width: 180px; height: 116px; bottom: -20px; border: 8px solid #151515; border-radius: 48% 52% 12% 12%; background: #f1e2c2; }

.card-body {
  position: relative;
  min-height: 168px;
  padding: 28px 18px 14px;
  display: flex;
  flex-direction: column;
  background: var(--card-body);
}
/* Category accent rail on card body */
.article-card[data-cat] .card-body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: color-mix(in srgb, var(--accent) 55%, var(--line));
  opacity: .85;
}
.article-card[data-cat="product"] .card-body::before { background: #3d7cff; }
.article-card[data-cat="research"] .card-body::before,
.article-card[data-cat="paper"] .card-body::before { background: #6b45e8; }
.article-card[data-cat="news"] .card-body::before { background: #e08c3c; }
.article-card[data-cat="release"] .card-body::before { background: #2db48c; }
.article-card[data-cat="daily"] .card-body::before { background: linear-gradient(180deg, var(--pink), var(--accent)); }
.avatar {
  width: 39px;
  height: 39px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 42% 32%,#f3d8c9 0 17%,transparent 18%), linear-gradient(140deg,#74615a,#d3aa95);
  border: 2px solid var(--card-body);
  box-shadow: 0 1px 4px rgba(20, 22, 40, .2);
  font-size: 10px;
  font-weight: 800;
}
.card-avatar { position: absolute; top: -21px; left: 20px; z-index: 2; }
.card-cat {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-hover));
  color: color-mix(in srgb, var(--ink) 72%, var(--accent));
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .01em;
}
.card-series {
  display: inline-flex;
  align-self: flex-start;
  margin: -4px 0 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #6b45e8 10%, var(--surface-hover));
  color: color-mix(in srgb, var(--ink) 65%, #6b45e8);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme="dark"] .card-series {
  background: color-mix(in srgb, #6b45e8 18%, var(--surface-hover));
  color: #c4b0ff;
}
.article-card[data-cat="product"] .card-cat { background: color-mix(in srgb, #3d7cff 14%, var(--surface-hover)); color: #2a4f9e; }
.article-card[data-cat="research"] .card-cat,
.article-card[data-cat="paper"] .card-cat { background: color-mix(in srgb, #6b45e8 14%, var(--surface-hover)); color: #4a2fb0; }
.article-card[data-cat="news"] .card-cat { background: color-mix(in srgb, #e08c3c 16%, var(--surface-hover)); color: #8a4f12; }
.article-card[data-cat="release"] .card-cat { background: color-mix(in srgb, #2db48c 16%, var(--surface-hover)); color: #176b52; }
.article-card[data-cat="daily"] .card-cat { background: color-mix(in srgb, var(--pink) 16%, var(--surface-hover)); color: #a12855; }
html[data-theme="dark"] .article-card[data-cat="product"] .card-cat { color: #9bbcff; }
html[data-theme="dark"] .article-card[data-cat="research"] .card-cat,
html[data-theme="dark"] .article-card[data-cat="paper"] .card-cat { color: #c4b0ff; }
html[data-theme="dark"] .article-card[data-cat="news"] .card-cat { color: #f0c08a; }
html[data-theme="dark"] .article-card[data-cat="release"] .card-cat { color: #7ee0c0; }
html[data-theme="dark"] .article-card[data-cat="daily"] .card-cat { color: #ff9fbf; }
.article-card h2 {
  margin: 0 0 6px;
  font-size: 15.5px;
  line-height: 1.3;
  letter-spacing: -.015em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-meta { margin: 0 0 2px; color: var(--muted); font-size: 12px; }
.article-meta time { font-variant-numeric: tabular-nums; }
.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}
.card-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 4px 2px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  transition: color .16s, opacity .16s, transform .16s;
}
.card-action svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.card-action:hover { color: var(--pink); transform: scale(1.04); }
.card-action.liked { color: var(--pink); }
.card-action.liked svg { fill: rgba(237,76,128,.18); }
/* Zero likes: de-emphasize clutter */
.like-action.is-zero {
  opacity: .42;
}
.like-action.is-zero .like-count {
  display: none;
}
.article-card:hover .like-action.is-zero,
.feed-post:hover .like-action.is-zero {
  opacity: .72;
}
.like-action.liked .like-count,
.like-action:not(.is-zero) .like-count {
  display: inline;
  font-variant-numeric: tabular-nums;
  min-width: 0.8em;
}
.card-open-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity .16s, transform .16s, color .16s;
}
.article-card:hover .card-open-hint,
.article-card:focus-within .card-open-hint {
  opacity: .85;
  transform: none;
  color: color-mix(in srgb, var(--ink) 70%, var(--accent));
}

.empty-state { padding: 90px 20px; text-align: center; color: var(--muted); }
.empty-state > span { display: block; font-size: 42px; }
.empty-state h2 { margin: 8px 0 4px; color: var(--ink); }
.empty-state p { margin: 0 0 20px; }
.empty-state button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-elevated); cursor: pointer; }

.feed-area { max-width: 1030px; margin: 0 auto; padding: 26px 22px 80px; }
.feed-columns { display: grid; grid-template-columns: minmax(0,680px) 320px; align-items: start; gap: 24px; }
.feed-stream { min-width: 0; }
.feed-post { overflow: hidden; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-elevated); box-shadow: var(--elevated-shadow-soft); }
.feed-cover { height: 235px; position: relative; overflow: hidden; }
.cover-skate { color: #111; background: linear-gradient(90deg,#f9faf8 0 65%,#e8ff15 65% 100%); }
.cover-skate::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to right,#000,transparent 80%); }
.cover-skate > strong { position: absolute; left: 70px; top: 58px; font: italic 900 92px/1 Georgia,serif; letter-spacing: -.09em; transform: skew(-8deg); }
.skate-micro { position: absolute; left: 20px; top: 18px; font: 8px/1.4 ui-monospace,monospace; letter-spacing: .18em; }
.skate-accent { position: absolute; right: 22px; bottom: 17px; font: 800 24px ui-monospace,monospace; }
.skateboard { position: absolute; right: 105px; top: 72px; width: 135px; height: 28px; border: 8px solid #171717; border-width: 0 0 11px; border-radius: 45%; transform: rotate(-18deg); }
.skateboard i { position: absolute; bottom: -19px; width: 16px; height: 16px; border: 4px solid #111; border-radius: 50%; background: #fff; }
.skateboard i:first-child { left: 18px; }.skateboard i:last-child { right: 18px; }
.feed-post-body { padding: 22px 24px 24px; }
.feed-author-row { display: flex; align-items: flex-start; gap: 11px; }
.feed-author-row > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.feed-author-row strong { font-size: 14px; }
.feed-author-row div > span { display: flex; align-items: center; gap: 7px; }
.feed-author-row em { padding: 3px 6px; border-radius: 4px; background: #f0f1f3; font-size: 10px; font-style: normal; }
.feed-author-row time, .feed-author-row small { color: #777a80; font-size: 11px; }
.feed-author-row > button { border: 0; background: transparent; cursor: pointer; color: #595b61; }
.feed-post-body h2 { margin: 20px 0 10px; font-size: 23px; line-height: 1.22; letter-spacing: -.025em; }
.feed-post-body > p { margin: 0 0 18px; color: #55585f; line-height: 1.7; font-size: 14px; }
.demo-poster { position: relative; height: 640px; overflow: hidden; background: #eef2f4; border: 1px solid #e0e3e7; }
.poster-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(19,67,124,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(19,67,124,.08) 1px,transparent 1px); background-size: 34px 34px; }
.poster-portrait { position: absolute; right: -12%; top: 2%; width: 80%; height: 104%; overflow: hidden; border-radius: 46% 0 0 12%; filter: grayscale(1); background: radial-gradient(circle at 49% 23%,#d8c0b6 0 13%,transparent 13.5%),radial-gradient(ellipse at 50% 16%,#272526 0 19%,transparent 19.5%),linear-gradient(100deg,transparent 0 30%,#3b3d43 31% 72%,transparent 73%); }
.poster-portrait::after { content: ""; position: absolute; width: 190px; height: 190px; left: 40%; top: 13%; border: 2px solid #174d8b; border-radius: 50%; }
.poster-type { position: absolute; left: 38px; top: 180px; color: #163d6a; }
.poster-type strong { display: block; font: 900 68px/.86 Georgia,"Songti SC",serif; letter-spacing: -.08em; }
.poster-type span { display: block; margin-top: 20px; font: 10px ui-monospace,monospace; letter-spacing: .25em; }
.poster-stamp { position: absolute; left: 32px; top: 32px; padding: 9px; border-left: 4px solid #1a65aa; color: #315878; font: 9px/1.5 ui-monospace,monospace; letter-spacing: .12em; }
.feed-post-actions { display: flex; gap: 18px; padding-top: 18px; }
.feed-post-actions button { border: 0; background: transparent; cursor: pointer; color: #585b61; }
.compact-post .feed-cover { height: 210px; }
.cover-layout { background: #e9ddd1; }
.cover-layout strong { position: absolute; z-index: 2; left: 35px; bottom: 25px; font-size: 48px; line-height: .82; letter-spacing: -.06em; }
.layout-block { position: absolute; border-radius: 50%; }
.layout-block.one { width: 210px; height: 210px; right: 35px; top: -38px; background: #ef5b41; }
.layout-block.two { width: 170px; height: 170px; right: 150px; top: 85px; background: #354aa6; mix-blend-mode: multiply; }
.layout-block.three { width: 80px; height: 80px; left: 220px; top: 30px; background: #f3d53e; }
.trending-panel { position: sticky; top: 90px; padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); box-shadow: var(--elevated-shadow-soft); }
.trending-panel h2 { margin: 0 0 12px; font-size: 18px; }
.trending-panel button { width: 100%; display: flex; gap: 11px; padding: 9px 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.trend-avatar { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#e95e43,#9b172c); font-weight: 800; }
.trending-panel button > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.trending-panel strong { font-size: 13px; line-height: 1.35; }
.trending-panel small { color: #777a80; font-size: 11px; }

.modal { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 22px; border: 0; background: transparent; }
.modal[open] { display: grid; place-items: center; }
.modal::backdrop { background: rgba(17,18,22,.48); backdrop-filter: blur(4px); animation: fade-in .18s ease-out; }
.modal-card { position: relative; width: min(540px,100%); padding: 38px; border-radius: 20px; background: var(--panel); color: var(--ink); box-shadow: 0 28px 90px rgba(0,0,0,.25); animation: modal-in .22s ease-out; }
.modal-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-hover); font-size: 24px; line-height: 1; cursor: pointer; }
.modal-eyebrow { margin: 0 0 8px; color: #8a8d94; font-size: 11px; font-weight: 750; letter-spacing: .15em; }
.modal-card h2 { margin: 0 0 22px; font-size: 27px; letter-spacing: -.035em; }
.search-field { height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 1px solid #cdd0d5; border-radius: 12px; }
.search-field:focus-within { border-color: #222328; box-shadow: 0 0 0 3px rgba(25,26,30,.08); }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 16px; }
.search-field kbd { padding: 4px 6px; border: 1px solid #d6d8dc; border-radius: 5px; color: #7b7e85; background: #f5f6f7; font-size: 10px; }
.modal-helper { margin: 10px 0 0; color: #8a8d94; font-size: 12px; }
.modal-primary { width: 100%; height: 46px; margin-top: 28px; border: 0; border-radius: 999px; color: #fff; background: var(--charcoal); font-weight: 750; cursor: pointer; }
.article-modal-card { padding: 0; overflow: hidden; max-width: 620px; }
.article-modal-card.is-deep { max-width: min(720px, 100%); }
.article-modal-cover { height: 230px; }
.article-modal-body { padding: 30px 34px 34px; }
.article-modal-body h2 { font-size: 28px; line-height: 1.18; margin: 0 0 14px; }
.article-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.am-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-hover));
  color: color-mix(in srgb, var(--ink) 70%, var(--accent));
  font-size: 11px;
  font-weight: 650;
}
.am-pill-series {
  background: color-mix(in srgb, #6b45e8 12%, var(--surface-hover));
  color: color-mix(in srgb, var(--ink) 60%, #6b45e8);
}
.am-pill-muted {
  background: var(--surface-hover);
  color: var(--muted);
  font-weight: 550;
}
.article-modal-prose {
  color: #5f6269;
  line-height: 1.78;
  font-size: 14.5px;
  max-height: min(52vh, 480px);
  overflow: auto;
  padding-right: 4px;
  margin: 0 0 4px;
  scrollbar-width: thin;
}
.article-modal-prose p { margin: 0 0 12px; }
.article-modal-prose .am-h {
  margin: 18px 0 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.01em;
}
.article-modal-prose .am-h:first-child { margin-top: 0; }
.article-modal-prose .am-ul {
  margin: 0 0 12px;
  padding: 0 0 0 1.1em;
}
.article-modal-prose .am-ul li { margin: 0 0 4px; }
.article-modal-prose .am-bullet { margin: 0 0 6px; padding-left: 2px; }
.article-modal-prose .am-loading {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 8px;
}
.article-modal-prose .am-teaser { opacity: .85; }
.article-modal-prose .am-empty { color: var(--muted); }
html[data-theme="dark"] .article-modal-prose {
  color: color-mix(in srgb, var(--ink) 78%, #9aa3b5);
}
.article-modal-card.is-loading-body .article-modal-prose {
  min-height: 88px;
}
.article-series-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
  margin: 18px 0 6px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--soft-line);
}
.series-nav-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: var(--panel-elevated);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
  min-width: 0;
}
.article-series-nav > :last-child { align-items: flex-end; text-align: right; }
.series-nav-btn span { font-size: 11px; color: var(--muted); font-weight: 650; }
.series-nav-btn em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}
.series-nav-btn:hover:not(.is-disabled) {
  border-color: color-mix(in srgb, var(--line) 40%, var(--accent) 60%);
  background: var(--surface-hover);
}
.series-nav-btn.is-disabled { opacity: .45; cursor: default; }
.series-nav-pos {
  align-self: center;
  padding: 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
}
.am-section { margin-top: 16px; }
.am-section-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.am-series-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.am-chip {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: var(--panel-elevated);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.am-chip:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.am-chip.is-current {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: color-mix(in srgb, var(--ink) 40%, var(--accent));
  cursor: default;
}
.am-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.am-toc li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-hover) 70%, transparent);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.am-toc-mark {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 70%, #888);
}
.article-modal-links li.is-current {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--soft-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-elevated));
}
.article-card.is-open {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 18%, transparent);
}
html[data-theme="dark"] .am-pill-series { color: #c4b0ff; }
html[data-theme="dark"] .am-chip.is-current { color: #c4b0ff; }
.article-modal-author { display: flex; gap: 12px; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--soft-line); }
.article-modal-author div { display: flex; flex-direction: column; gap: 2px; }
.article-modal-author strong { font-size: 14px; }
.article-modal-author div span { color: var(--muted); font-size: 12px; }

.toast { position: fixed; z-index: 90; left: 50%; bottom: 28px; transform: translate(-50%,20px); padding: 11px 17px; border-radius: 999px; color: #fff; background: rgba(29,30,34,.94); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; font-size: 13px; box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.toast.show { opacity: 1; transform: translate(-50%,0); }

@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

@media (max-width: 1280px) {
  .topbar { padding-left: 28px; gap: 14px; }
  .brand { flex-basis: 170px; }
  .topnav a { padding-inline: 10px; }
  .search-trigger { min-width: 42px; width: 42px; }
  .search-trigger span { display: none; }
}

@media (max-width: 1060px) {
  :root { --sidebar-width: 242px; }
  .topnav a:nth-last-child(-n+2) { display: none; }
  .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .content-area, .page-title-inner { max-width: 790px; }
  .feed-columns { grid-template-columns: minmax(0,680px); justify-content: center; }
  .trending-panel { display: none; }
}

@media (max-width: 820px) {
  :root { --header-height: 60px; }
  .topbar { justify-content: space-between; padding: 0 16px; }
  .mobile-menu { width: 38px; height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
  .mobile-menu span { width: 19px; height: 2px; background: #222; border-radius: 4px; }
  .brand { flex: 0 0 auto; }
  .brand-arrow, .topnav, .login-button { display: none; }
  .top-actions { gap: 6px; }
  .pill-button.join-button { min-width: 65px; padding: 0 14px; }
  .sidebar { z-index: 70; top: 0; width: min(86vw,310px); transform: translateX(-105%); transition: transform .25s ease; box-shadow: 20px 0 60px rgba(0,0,0,.18); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
  .sidebar-scroll { padding-top: 62px; }
  .sidebar-scrim { position: fixed; z-index: 60; inset: 0; width: 100%; border: 0; background: rgba(10,11,14,.35); opacity: 0; pointer-events: none; display: block; transition: opacity .25s; }
  .sidebar-scrim.show { opacity: 1; pointer-events: auto; }
  .page-shell { margin-left: 0; }
  .page-titlebar { height: 64px; }
  .content-area { padding-top: 20px; }
  .feed-area { padding: 20px 15px 60px; }
}

@media (max-width: 620px) {
  .brand-word { font-size: 10px; }
  .brand-mark { width: 37px; transform: scale(.88); transform-origin: right center; }
  .top-actions .join-button { display: none; }
  .page-title-inner, .content-area { padding-left: 15px; padding-right: 15px; }
  .filter-row { gap: 7px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 7px; margin-right: -15px; scrollbar-width: none; }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-chip { white-space: nowrap; padding: 8px 14px; }
  .card-grid { grid-template-columns: 1fr; gap: 16px; }
  .cover { height: 176px; }
  .card-body { min-height: 168px; }
  .modal { padding: 12px; }
  .modal-card { padding: 30px 22px; border-radius: 16px; }
  .article-modal-card { padding: 0; }
  .article-modal-cover { height: 185px; }
  .article-modal-body { padding: 26px 22px 28px; }
  .article-modal-body h2 { font-size: 23px; }
  .feed-header-actions { gap: 8px; }
  .feed-header-actions .latest-button { display: none; }
  .feed-post { border-radius: 10px; margin-bottom: 16px; }
  .feed-cover { height: 190px; }
  .cover-skate > strong { left: 28px; top: 58px; font-size: 64px; }
  .skateboard { right: 45px; top: 72px; transform: rotate(-18deg) scale(.7); }
  .feed-post-body { padding: 18px 16px 20px; }
  .feed-post-body h2 { font-size: 20px; }
  .demo-poster { height: 460px; }
  .poster-type { left: 20px; top: 150px; }
  .poster-type strong { font-size: 49px; }
}

/* —— homepage / daily hero upgrades —— */
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 13px;
}
.skip-link:focus { top: 12px; }

.title-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-subtitle { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.page-titlebar h1 { line-height: 1.15; }

.daily-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 20px;
  margin-bottom: 22px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, #2a3148 70%, var(--accent) 30%);
  border-radius: 18px;
  background: var(--hero-grad);
  color: #f5f7fb;
  box-shadow: 0 20px 48px rgba(24, 28, 48, .22);
}
.daily-kicker {
  margin: 0 0 8px;
  color: rgba(255,255,255,.68);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.daily-hero-main h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -.03em;
  line-height: 1.15;
}
.daily-hero-main > p {
  margin: 0 0 16px;
  max-width: 58ch;
  color: rgba(245,247,251,.78);
  line-height: 1.65;
  font-size: 14px;
}
.daily-highlights {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
.daily-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
}
.daily-chip span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-size: 11px;
  white-space: nowrap;
}
.daily-chip p { margin: 0; color: rgba(255,255,255,.86); font-size: 13px; line-height: 1.5; }
.daily-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.daily-hero .join-button { background: #fff; color: #17181b; border-color: #fff; }
.daily-hero .login-button { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.daily-date-card {
  height: 100%;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  text-align: center;
}
.daily-date-card span { font-size: 11px; letter-spacing: .16em; opacity: .7; }
.daily-date-card strong { font-size: 18px; letter-spacing: -.02em; }
.daily-date-card small { opacity: .65; font-size: 11px; }

.article-excerpt {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-card { border-color: #c9ced8; box-shadow: 0 10px 28px rgba(27,30,35,.06); }
.featured-card .cover { height: 176px; }

.side-meta .side-note {
  margin: 0 8px;
  color: #7a7d84;
  font-size: 12px;
  line-height: 1.55;
}

.feed-intro {
  margin-bottom: 16px;
  padding: 4px 2px 8px;
}
.feed-intro h2 { margin: 0 0 4px; font-size: 18px; }
.feed-intro p { margin: 0; color: var(--muted); font-size: 13px; }

.trend-link {
  width: 100%;
  display: flex;
  gap: 11px;
  padding: 9px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.trend-link:hover strong { color: #111; }
.trend-link > span:last-child { display: flex; flex-direction: column; gap: 4px; }

.site-footer {
  margin-left: var(--sidebar-width);
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}
.footer-inner strong { color: var(--ink); margin-right: 8px; }
.footer-meta { display: flex; gap: 14px; flex-wrap: wrap; }

.card-body { min-height: 198px; }

@media (max-width: 1060px) {
  .daily-hero { grid-template-columns: 1fr; }
  .daily-date-card { min-height: 110px; flex-direction: row; justify-content: space-between; }
  .site-footer { margin-left: var(--sidebar-width); }
}

@media (max-width: 820px) {
  .site-footer { margin-left: 0; }
  .page-subtitle { display: none; }
  .daily-hero { padding: 18px 16px; border-radius: 14px; }
  .daily-hero-actions .pill-button { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* —— performance / polish —— */
.article-card { content-visibility: auto; contain-intrinsic-size: 360px; }
.skeleton-card {
  min-height: 320px;
  border-radius: 11px;
  border: 1px solid #e4e6ea;
  background:
    linear-gradient(90deg, #f0f1f3 25%, #f7f8fa 37%, #f0f1f3 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.article-modal-links {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.article-modal-links li a {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: var(--panel-elevated);
  transition: border-color .16s, background .16s;
}
.article-modal-links li a:hover {
  border-color: color-mix(in srgb, var(--line) 40%, var(--accent) 60%);
  background: var(--surface-hover);
}
.article-modal-links .link-tag {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-hover));
  color: var(--muted);
  font-size: 11px;
}
.article-modal-links .link-title {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}

.daily-hero[hidden] { display: none !important; }
.card-grid[aria-busy="true"] { opacity: .92; }

/* Focus visibility for keyboard users */
.filter-chip:focus-visible,
.sidebar-row:focus-visible,
.topnav a:focus-visible,
.pill-button:focus-visible,
.search-trigger:focus-visible,
.article-card:focus-visible {
  outline: 2px solid #303136;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-card { animation: none; background: #f0f1f3; }
}

/* —— homepage polish 20260715c —— */
.search-trigger { position: relative; }
.search-kbd {
  display: none;
  margin-left: 2px;
  padding: 2px 6px;
  border: 1px solid #d6d8dc;
  border-radius: 5px;
  color: #7b7e85;
  background: #f5f6f7;
  font-size: 10px;
  font-family: ui-monospace, monospace;
}
@media (min-width: 1281px) {
  .search-trigger .search-kbd { display: inline-block; }
}

.home-dashboard { margin-bottom: 22px; }
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-elevated);
  box-shadow: var(--elevated-shadow-soft);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.stat-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--line) 60%, var(--accent) 40%);
  box-shadow: var(--elevated-shadow);
}
.stat-card strong {
  font-size: 26px;
  letter-spacing: -.04em;
  line-height: 1.1;
}
.stat-card span { color: var(--muted); font-size: 13px; }

.home-picks {
  margin-bottom: 8px;
  padding: 18px 18px 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--elevated-shadow-soft);
}
.home-picks-head { margin-bottom: 12px; padding: 0 4px; }
.home-picks-head h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.02em; }
.home-picks-head p { margin: 0; color: var(--muted); font-size: 13px; }
.home-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 10px;
}
.home-pick-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-body);
  box-shadow: var(--elevated-shadow-soft);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.home-pick-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--line) 55%, var(--accent) 45%);
  box-shadow: var(--elevated-shadow);
}
.mini-cover { height: 96px !important; }
.mini-cover .cover-word { font-size: 16px !important; }
.home-pick-body {
  padding: 10px 12px 12px;
  background: var(--card-body);
  margin-top: -1px;
}
.home-pick-badge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-hover));
  color: color-mix(in srgb, var(--ink) 72%, var(--accent));
  font-size: 11px;
}
.home-pick-body h3 {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -.015em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-pick-body p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-empty { margin: 8px 4px 16px; color: var(--muted); font-size: 13px; }

.stream-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 12px;
  flex-wrap: wrap;
}
.stream-title { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.stream-hint { margin: 0; color: var(--muted); font-size: 13px; }

.pill-button.ghost-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  text-decoration: none;
}
.daily-hero .ghost-link:hover { background: rgba(255,255,255,.08); }

.search-results {
  margin-top: 14px;
  max-height: 280px;
  overflow: auto;
  display: grid;
  gap: 6px;
}
.search-hint { margin: 4px 0 0; color: #8a8d94; font-size: 13px; }
.search-hit {
  width: 100%;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid #e8eaed;
  border-radius: 10px;
  background: #fafbfc;
  text-align: left;
  cursor: pointer;
}
.search-hit:hover, .search-hit:focus-visible {
  border-color: #c9ced6;
  background: #fff;
  outline: none;
}
.search-hit-space {
  color: #6d7077;
  font-size: 12px;
  padding-top: 2px;
}
.search-hit-title {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
}

.article-modal-links .link-sub {
  display: block;
  margin-top: 3px;
  color: #7a7d84;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}
.article-modal-toolbar {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.modal-secondary {
  flex: 1;
  height: 46px;
  border: 1px solid #242529;
  border-radius: 999px;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}
.article-modal-toolbar .modal-primary { margin-top: 0; flex: 1; }

.footer-brand { display: flex; flex-direction: column; gap: 4px; max-width: 360px; }
.footer-tagline { margin: 4px 0 0; color: #8a8d94; font-size: 12px; line-height: 1.5; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.footer-nav a {
  color: #55575d;
  font-size: 13px;
}
.footer-nav a:hover { color: #111; text-decoration: underline; }

.back-top {
  position: fixed;
  z-index: 60;
  right: 20px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid #dde0e4;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  cursor: pointer;
  font-size: 16px;
  backdrop-filter: blur(8px);
}
.back-top:hover { transform: translateY(-2px); }

body.home-mode .sidebar-row[data-space="frontier"] { /* no forced select on home */ }

@media (max-width: 1060px) {
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat-card { padding: 12px 14px; }
  .stat-card strong { font-size: 22px; }
  .home-pick-grid { grid-template-columns: 1fr; }
  .home-picks { padding: 14px 12px 6px; }
  .stream-hint { display: none; }
  .back-top { right: 14px; bottom: 18px; }
  .article-modal-toolbar { flex-direction: column; }
}

/* —— continuous polish: theme tokens, archive, sticky filter, focus —— */
:root, html[data-theme="light"] {
  --ink: #14151c;
  --muted: #5c6170;
  --line: #c7cbda;
  --soft-line: #d5d9e6;
  --panel: #e8eaf3;
  --panel-elevated: #eef0f7;
  --card-body: #e4e7f2;
  --canvas: #d4d7e4;
  --charcoal: #252735;
  --pink: #e54b7a;
  --accent: #6b45e8;
  --accent-2: #3d7cff;
  --surface-hover: #dde0ec;
  --cover-matte: #12141c;
  --cover-fade: #e4e7f2;
  --elevated-shadow: 0 14px 36px rgba(36, 40, 70, .11);
  --elevated-shadow-soft: 0 8px 22px rgba(36, 40, 70, .07);
  --hero-grad: radial-gradient(circle at 88% 12%, rgba(229, 75, 122, .18), transparent 28%),
    linear-gradient(135deg, #10121a 0%, #1e2a42 55%, #35204a 100%);
  color-scheme: light;
}

html[data-theme="dark"] {
  --ink: #e8ebf3;
  --muted: #9aa1b0;
  --line: #2c3140;
  --soft-line: #232835;
  --panel: #161a24;
  --panel-elevated: #1c2130;
  --card-body: #1a1f2c;
  --canvas: #0e1118;
  --charcoal: #e8eaef;
  --pink: #ff6b9d;
  --accent: #9b7cff;
  --accent-2: #5b9bff;
  --surface-hover: #222836;
  --cover-matte: #0a0c12;
  --cover-fade: #1a1f2c;
  --elevated-shadow: 0 16px 36px rgba(0, 0, 0, .42);
  --elevated-shadow-soft: 0 8px 22px rgba(0, 0, 0, .28);
  --hero-grad: radial-gradient(circle at 88% 12%, rgba(255, 107, 157, .18), transparent 28%),
    linear-gradient(135deg, #0a0c12 0%, #162036 55%, #26162f 100%);
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(1000px 520px at 10% -10%, rgba(155, 124, 255, .12), transparent 50%),
    radial-gradient(800px 420px at 100% 0%, rgba(255, 107, 157, .08), transparent 45%),
    var(--canvas);
  background-attachment: fixed;
  color: var(--ink);
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .page-titlebar,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .home-picks,
html[data-theme="dark"] .trending-panel,
html[data-theme="dark"] .feed-post,
html[data-theme="dark"] .modal-card {
  background: var(--panel);
  border-color: var(--line);
}
html[data-theme="dark"] .topbar { background: rgba(18,20,26,.92); }
html[data-theme="dark"] .topnav a { color: #c5c9d2; }
html[data-theme="dark"] .topnav a:hover,
html[data-theme="dark"] .topnav a.active { background: #222631; color: #fff; }
html[data-theme="dark"] .search-trigger,
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .login-button,
html[data-theme="dark"] .modal-secondary,
html[data-theme="dark"] .archive-chip,
html[data-theme="dark"] .load-more {
  background: #1b1f28;
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .join-button,
html[data-theme="dark"] .modal-primary {
  background: #e8eaef;
  border-color: #e8eaef;
  color: #12141a;
}
html[data-theme="dark"] .sidebar-row:hover { background: #222631; }
html[data-theme="dark"] .sidebar-row.selected { background: #e8eaef; color: #12141a; }
html[data-theme="dark"] .sidebar-row.selected > span:first-child { color: #12141a; }
html[data-theme="dark"] .article-card:hover { border-color: #3a4150; box-shadow: var(--elevated-shadow); }
html[data-theme="dark"] .home-pick-card { background: #1b1f28; border-color: var(--line); }
html[data-theme="dark"] .search-hit { background: #1b1f28; border-color: var(--line); }
html[data-theme="dark"] .daily-hero {
  background: var(--hero-grad);
}
html[data-theme="dark"] .skeleton-card {
  background: linear-gradient(90deg, #1b1f28 25%, #242833 37%, #1b1f28 63%);
  background-size: 400% 100%;
  border-color: var(--line);
}
html[data-theme="dark"] .mobile-menu span { background: #eef0f4; }
html[data-theme="dark"] .side-count { background: #1b1f28; border-color: #333846; color: #c5c9d2; }
html[data-theme="dark"] .back-top { background: rgba(23,26,33,.96); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .toast { background: rgba(236,238,244,.94); color: #12141a; }
html[data-theme="dark"] .filter-chip.active { border-color: #e8eaef; box-shadow: inset 0 0 0 1px #e8eaef; }
html[data-theme="dark"] .article-modal-links li a { background: #1b1f28; border-color: var(--line); }

.theme-toggle {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  cursor: pointer;
  font-size: 16px;
  flex: 0 0 auto;
}
.theme-toggle:hover { transform: translateY(-1px); }
html[data-theme="light"] .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-icon-light { display: none; }

.daily-hero {
  background: var(--hero-grad);
}

.filter-bar {
  position: sticky;
  top: calc(var(--header-height) + 72px);
  z-index: 15;
  margin: 0 0 10px;
  padding: 8px 0 4px;
  background: linear-gradient(var(--canvas) 60%, transparent);
}
body.home-mode .filter-bar { top: calc(var(--header-height) + 64px); }
@media (max-width: 820px) {
  .filter-bar { top: var(--header-height); }
}

.daily-archive {
  margin: 0 0 18px;
  padding: 16px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--elevated-shadow-soft);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.daily-archive-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.daily-archive-titles { min-width: 0; flex: 1; }
.daily-archive-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
  letter-spacing: -.02em;
}
.daily-archive-sub {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.daily-archive-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 2px;
}
.daily-archive-count {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-hover));
  color: color-mix(in srgb, var(--ink) 70%, var(--accent));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.daily-archive-head a {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.daily-archive-head a:hover { color: var(--ink); }
.daily-archive-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: visible;
  padding: 0;
  margin: 0;
}
/* Legacy chip class kept for safety if any markup remains */
.archive-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.archive-chip:hover { transform: translateY(-1px); border-color: #cfd2d7; }
.archive-chip.active {
  border-color: #26272b;
  box-shadow: inset 0 0 0 1px #26272b;
}
html[data-theme="dark"] .archive-chip.active {
  border-color: #e8eaef;
  box-shadow: inset 0 0 0 1px #e8eaef;
}
.archive-chip strong { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.archive-chip span {
  font-size: 13px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rich archive cards (timeline list) */
.archive-card {
  position: relative;
  display: grid;
  grid-template-columns: 14px 48px 56px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 12px 10px 12px 0;
  border: 0;
  border-bottom: 1px solid var(--soft-line);
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .16s, transform .16s;
}
.archive-card:last-child { border-bottom: 0; }
.archive-card:hover {
  background: color-mix(in srgb, var(--canvas) 80%, transparent);
  border-radius: 12px;
  transform: none;
}
.archive-card.active {
  background: color-mix(in srgb, var(--canvas) 100%, transparent);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.archive-rail {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: stretch;
  width: 14px;
  padding-top: 6px;
}
.archive-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -12px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--soft-line);
  border-radius: 2px;
}
.archive-card:last-child .archive-rail::before { bottom: 8px; }
.archive-rail i {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c5c9d0;
  box-shadow: 0 0 0 3px var(--panel);
}
.archive-card.active .archive-rail i,
.archive-card:hover .archive-rail i {
  background: linear-gradient(145deg, #ed4c80, #6b3cff);
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px color-mix(in srgb, #ed4c80 18%, transparent);
}
.archive-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
  min-width: 0;
}
.archive-date-num {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.archive-date-wd {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .02em;
}
.archive-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--cover-matte) center/cover no-repeat;
  border: 1px solid color-mix(in srgb, var(--line) 50%, #000 50%);
  flex-shrink: 0;
  box-shadow:
    0 6px 14px rgba(20, 22, 40, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.archive-thumb-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #2a2d3a, var(--cover-matte));
  color: #fff;
  font-size: 18px;
  border: 0;
}
.archive-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-top: 1px;
}
.archive-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.archive-summary {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.archive-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.archive-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-hover));
  color: color-mix(in srgb, var(--ink) 75%, var(--muted));
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}
.archive-badge.today {
  background: linear-gradient(145deg, var(--pink), var(--accent));
  color: #fff;
}
.archive-badge.tag {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 500;
}
.daily-archive-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--soft-line);
  text-align: center;
}
.daily-archive-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: color .16s, background .16s;
}
.daily-archive-more:hover {
  color: var(--ink);
  background: var(--canvas);
}
html[data-theme="dark"] .daily-archive-count,
html[data-theme="dark"] .archive-badge {
  background: #242833;
  color: #c5c9d2;
}
html[data-theme="dark"] .archive-badge.today {
  background: linear-gradient(145deg, #ed4c80, #6b3cff);
  color: #fff;
}
html[data-theme="dark"] .archive-badge.tag {
  background: transparent;
  border-color: var(--line);
  color: #9aa1ad;
}
html[data-theme="dark"] .archive-card:hover,
html[data-theme="dark"] .archive-card.active {
  background: #1b1f28;
}
html[data-theme="dark"] .archive-rail i {
  box-shadow: 0 0 0 3px var(--panel);
}
html[data-theme="dark"] .archive-card.active .archive-rail i,
html[data-theme="dark"] .archive-card:hover .archive-rail i {
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px rgba(237, 76, 128, .22);
}

.load-more-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;
}
.load-more {
  min-width: 160px;
  height: 42px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-weight: 700;
  cursor: pointer;
}
.load-more:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.06); }
.load-more-meta { margin: 0; color: var(--muted); font-size: 12px; }

.article-card.is-focused {
  outline: 2px solid #303136;
  outline-offset: 2px;
  border-color: #b8bdc7;
}
html[data-theme="dark"] .article-card.is-focused {
  outline-color: #e8eaef;
  border-color: #5a6478;
}

.footer-keys {
  opacity: .75;
  font-size: 12px;
}

body.scrolled .topbar {
  box-shadow: 0 8px 24px rgba(16,18,23,.06);
}
html[data-theme="dark"] body.scrolled .topbar {
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

@media (max-width: 820px) {
  .theme-toggle { width: 36px; height: 36px; }
  .archive-card {
    grid-template-columns: 12px 44px 48px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 11px 6px 11px 0;
  }
  .archive-thumb { width: 48px; height: 48px; border-radius: 9px; }
  .archive-date-num { font-size: 13px; }
}

@media (max-width: 620px) {
  .top-actions .theme-toggle { order: -1; }
}

/* Ensure dark surfaces for remaining hard-coded whites */
html[data-theme="dark"] .page-shell,
html[data-theme="dark"] .content-area { background: transparent; }
html[data-theme="dark"] .filter-chip:hover { border-color: #4a5263; }
html[data-theme="dark"] .modal-close { background: #242833; color: #eef0f4; }
html[data-theme="dark"] .search-field { border-color: #333846; }
html[data-theme="dark"] .search-field:focus-within {
  border-color: #e8eaef;
  box-shadow: 0 0 0 3px rgba(232,234,239,.12);
}
html[data-theme="dark"] .search-field input { background: transparent; color: var(--ink); }
html[data-theme="dark"] .empty-state button {
  background: #1b1f28;
  border-color: var(--line);
  color: var(--ink);
}

/* —— continuous polish 20260715e: feed data, recent, progress —— */
.feed-side {
  display: grid;
  gap: 16px;
  align-content: start;
}
.feed-side .trending-panel { position: sticky; top: 90px; }
.feed-side .recent-panel { position: sticky; top: 90px; }
.feed-side .trending-panel + .trending-panel { position: sticky; top: 320px; }
.side-empty {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.feed-posts { display: grid; gap: 0; }
.feed-skeleton { min-height: 220px; margin-bottom: 16px; border-radius: 13px; }
.feed-featured { box-shadow: 0 12px 30px rgba(27,30,35,.08); }
html[data-theme="dark"] .feed-featured { box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.feed-cover { min-height: 180px; display: flex; align-items: center; justify-content: center; }
.feed-cover-word { z-index: 1; }
.feed-post { cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.feed-post:hover { transform: translateY(-2px); border-color: #cfd2d7; }
html[data-theme="dark"] .feed-post:hover { border-color: #3a4150; }
.feed-post:focus-visible { outline: 2px solid #303136; outline-offset: 2px; }
html[data-theme="dark"] .feed-post:focus-visible { outline-color: #e8eaef; }
.feed-item-links {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.feed-item-links a {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--canvas);
  font-size: 13px;
  line-height: 1.4;
}
.feed-item-links a:hover { border-color: #cfd2d7; }
.feed-post-actions .card-action { margin-right: 8px; }
.side-recent { display: grid; gap: 2px; }
.side-recent-row { font-size: 13px; }

.article-progress {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 3px;
  background: transparent;
}
.article-progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0.02);
  background: linear-gradient(90deg, #ed4c80, #6b3cff);
  transition: transform .08s linear;
}
.article-modal[open] { align-items: start; padding-top: 4vh; overflow: auto; }
.article-modal-card { margin: auto; }

/* a11y: stronger focus for chips/buttons in dark+light */
.filter-chip:focus-visible,
.load-more:focus-visible,
.archive-chip:focus-visible,
.archive-card:focus-visible,
.theme-toggle:focus-visible,
.search-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (max-width: 1060px) {
  .feed-side .trending-panel,
  .feed-side .recent-panel { position: static; }
}

/* —— layout redesign 20260715f: hierarchy, density, grid —— */
:root {
  --content-max: 1180px;
  --titlebar-height: 64px;
  --radius-lg: 18px;
  --radius-md: 12px;
}

.content-area {
  max-width: var(--content-max);
  padding: 20px 24px 64px;
}
.page-title-inner {
  max-width: var(--content-max);
}
.footer-inner {
  max-width: var(--content-max);
}

/* Compact titlebar on home — less chrome before content */
body.home-mode .page-titlebar {
  height: 56px;
  background: transparent;
  border-bottom: 0;
}
body.home-mode .page-title-inner {
  padding-top: 8px;
}
body.home-mode .page-titlebar h1 {
  font-size: 18px;
}
body.home-mode .content-area {
  padding-top: 8px;
}

/* Hero-first: more breathing room and stronger primary */
.daily-hero {
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.75fr);
  gap: 18px;
  margin-bottom: 18px;
  padding: 26px 28px;
  border-radius: var(--radius-lg);
}
.daily-hero-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.daily-date-card {
  min-height: 140px;
}
.stats-row-hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 !important;
}
.stats-row-hero .stat-card {
  padding: 10px 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #f5f7fb;
}
.stats-row-hero .stat-card strong {
  font-size: 18px;
  color: #fff;
}
.stats-row-hero .stat-card span {
  color: rgba(245,247,251,.72);
  font-size: 11px;
}
.stats-row-hero .stat-card:hover {
  background: rgba(255,255,255,.14);
  transform: none;
  box-shadow: none;
}

/* Home secondary: archive + picks side by side on wide screens */
.home-dashboard {
  margin-bottom: 22px;
}
.home-dashboard > .stats-row {
  margin-bottom: 14px;
}
body.home-mode .home-dashboard > .stats-row {
  display: none; /* stats move into hero on home */
}
.home-secondary {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.home-secondary .daily-archive,
.home-secondary .home-picks {
  margin: 0;
  height: 100%;
  min-height: 0;
}
.home-secondary .daily-archive {
  padding: 16px 14px 12px;
}
.home-secondary .daily-archive-list {
  display: flex;
  flex-direction: column;
}
.home-secondary .home-pick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.home-secondary .mini-cover {
  height: 72px !important;
}
.home-secondary .home-pick-body {
  padding: 10px 12px 12px;
}
.home-secondary .home-pick-body h3 {
  font-size: 13px;
}

/* Stream panel: visual grouping for filters + cards */
.stream-panel {
  padding: 16px 16px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
  box-shadow: var(--elevated-shadow-soft);
}
.stream-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0 4px;
}
.stream-head .stream-title {
  margin: 0 0 2px;
  font-size: 16px;
}
.stream-head .stream-hint {
  margin: 0;
}
.filter-bar {
  position: sticky;
  top: var(--header-height);
  z-index: 15;
  margin: 0 0 12px;
  padding: 8px 4px 10px;
  background: linear-gradient(var(--panel) 70%, transparent);
  border-bottom: 1px solid var(--soft-line);
}
body.home-mode .filter-bar {
  top: var(--header-height);
}
.stream-panel .card-grid {
  gap: 18px;
}
.stream-panel .results-meta {
  padding: 0 4px;
  margin-bottom: 10px;
}

/* Topbar density */
.topbar {
  padding: 0 22px 0 20px;
  gap: 16px;
}
.brand {
  flex: 0 0 auto;
  min-width: 0;
}
.topnav {
  gap: 4px;
}
.topnav a {
  padding: 9px 12px;
}
body.home-mode .top-actions .login-button {
  display: none;
}

/* Sidebar polish */
.sidebar {
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
  border-right-color: var(--line);
}
.sidebar-scroll {
  padding: 18px 16px 28px;
}
.side-group h2 {
  margin-left: 12px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Footer: clearer multi-column */
.site-footer {
  margin-top: 8px;
  background: color-mix(in srgb, var(--panel) 92%, var(--canvas) 8%);
}
.footer-inner {
  padding: 28px 24px 32px;
  align-items: flex-start;
  gap: 20px 28px;
}
.footer-nav {
  gap: 10px 18px;
}

/* Card grid density */
.card-grid {
  gap: 18px;
}
.article-card {
  border-radius: var(--radius-md);
}
.cover {
  height: 150px;
}

/* Reduce double chrome on non-home category pages */
body:not(.home-mode):not(.feed-mode) .page-titlebar {
  position: sticky;
  top: var(--header-height);
  z-index: 20;
}

@media (max-width: 1100px) {
  .home-secondary {
    grid-template-columns: 1fr;
  }
  .home-secondary .home-pick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .daily-hero {
    grid-template-columns: 1fr;
  }
  .stats-row-hero {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .content-area {
    padding: 14px 14px 48px;
  }
  .stream-panel {
    padding: 12px 10px 4px;
    border-radius: 14px;
  }
  .daily-hero {
    padding: 18px 16px;
  }
  .stats-row-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-secondary .home-pick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:not(.home-mode):not(.feed-mode) .page-titlebar {
    position: static;
  }
}

@media (max-width: 620px) {
  .home-secondary .home-pick-grid {
    grid-template-columns: 1fr;
  }
  .stream-panel {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    margin-inline: -14px;
    padding-inline: 14px;
  }
}

html[data-theme="dark"] .stream-panel {
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
  border-color: var(--line);
}
html[data-theme="dark"] .filter-bar {
  background: linear-gradient(var(--panel) 70%, transparent);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] body.home-mode .page-titlebar {
  background: transparent;
}

/* Photo covers (Grok / pipeline JPEGs) — matte frame blends dark art into slate UI */
.cover,
.cover-photo {
  position: relative;
}
.cover-photo {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: var(--cover-matte);
  height: 180px;
}
.cover-photo::before,
.cover-photo::after {
  display: none !important;
}
/* Stronger bottom fade into card-body color + soft side vignette */
.article-card .cover::after,
.article-card .cover-photo::after,
.home-pick-card .cover::after,
.home-pick-card .cover-photo::after,
.feed-cover-wrap .cover::after,
.feed-cover-wrap .cover-photo::after {
  display: block !important;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(8, 10, 18, .1) 0%,
      transparent 22%,
      transparent 48%,
      color-mix(in srgb, var(--cover-fade) 35%, transparent) 78%,
      var(--cover-fade) 100%
    ),
    linear-gradient(90deg, rgba(8, 10, 18, .1), transparent 14%, transparent 86%, rgba(8, 10, 18, .1));
}
/* Category-tinted cover wash for scanability */
.article-card .cover[data-cat="product"]::before,
.article-card .cover-photo[data-cat="product"]::before,
.home-pick-card .cover[data-cat="product"]::before {
  display: block !important;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(61, 124, 255, .18), transparent 55%);
}
.article-card .cover[data-cat="research"]::before,
.article-card .cover-photo[data-cat="research"]::before,
.article-card .cover[data-cat="paper"]::before,
.article-card .cover-photo[data-cat="paper"]::before {
  display: block !important;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(107, 69, 232, .2), transparent 55%);
}
.article-card .cover[data-cat="news"]::before,
.article-card .cover-photo[data-cat="news"]::before {
  display: block !important;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(229, 140, 60, .16), transparent 55%);
}
.article-card .cover[data-cat="release"]::before,
.article-card .cover-photo[data-cat="release"]::before {
  display: block !important;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(45, 180, 140, .16), transparent 55%);
}
.article-card .cover[data-cat="daily"]::before,
.article-card .cover-photo[data-cat="daily"]::before {
  display: block !important;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(229, 75, 122, .16), transparent 55%);
}
.cover-photo .cover-word-on-photo {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
}
.cover-photo .cover-tag,
.cover .cover-tag {
  position: relative;
  z-index: 2;
  background: rgba(16,18,23,.55);
  backdrop-filter: blur(10px);
  letter-spacing: .06em;
}
.article-card:hover .cover-photo {
  filter: brightness(1.04) saturate(1.05);
  transition: filter .24s ease;
}
.article-card .card-body {
  background: var(--card-body);
  border-top: 0;
  margin-top: -1px;
}
.feed-cover-wrap {
  position: relative;
  overflow: hidden;
}
.feed-cover-wrap .cover {
  height: 235px;
  min-height: 180px;
}
.feed-cover-wrap .cover-photo {
  height: 240px;
}
.compact-post .feed-cover-wrap .cover {
  height: 210px;
}
.article-modal-cover.cover-photo {
  background-size: cover;
  background-position: center;
  height: 260px;
  min-height: 220px;
}
.featured-card .cover-photo {
  height: 196px;
}
.home-pick-card .cover-photo.mini-cover {
  height: 110px !important;
}


/* homepage daily hero cover image (replaces TODAY/model chip) */
.daily-cover-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 180px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(0,0,0,.25);
  text-align: left;
}
.daily-cover-card img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  vertical-align: middle;
}
.daily-cover-badge,
.daily-cover-date {
  position: absolute;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10,12,18,.55);
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
  backdrop-filter: blur(6px);
}
.daily-cover-badge {
  top: 12px;
  left: 12px;
  font-weight: 700;
}
.daily-cover-date {
  right: 12px;
  bottom: 12px;
  letter-spacing: 0;
  font-weight: 600;
}
.daily-cover-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.daily-cover-card[hidden],
.daily-date-card[hidden] {
  display: none !important;
}
@media (max-width: 1100px) {
  .daily-cover-card img { height: 180px; }
}
@media (max-width: 620px) {
  .daily-cover-card img { height: 160px; }
}


/* daily hero: cover image as full background */
.daily-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(237,76,128,.12), transparent 28%),
    linear-gradient(135deg, #11131a 0%, #24304a 58%, #3a2148 100%);
  background-size: cover;
  background-position: center;
}
.daily-hero.has-cover {
  border-color: rgba(255,255,255,.12);
  background-color: #0c0e14;
  background-image:
    linear-gradient(
      105deg,
      rgba(8, 10, 16, .88) 0%,
      rgba(8, 10, 16, .72) 42%,
      rgba(8, 10, 16, .45) 68%,
      rgba(8, 10, 16, .55) 100%
    ),
    var(--daily-cover);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
html[data-theme="dark"] .daily-hero.has-cover {
  background-image:
    linear-gradient(
      105deg,
      rgba(6, 8, 14, .9) 0%,
      rgba(6, 8, 14, .75) 40%,
      rgba(6, 8, 14, .48) 70%,
      rgba(6, 8, 14, .58) 100%
    ),
    var(--daily-cover);
}
.daily-hero.has-cover .daily-hero-main,
.daily-hero.has-cover .daily-hero-side {
  position: relative;
  z-index: 1;
}
.daily-hero.has-cover .daily-chip {
  background: rgba(12, 14, 22, .42);
  border-color: rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
}
.daily-hero.has-cover .daily-cover-card {
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.2);
}
.daily-hero.has-cover .stats-row-hero .stat-card {
  background: rgba(12, 14, 22, .4);
  border-color: rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
}


/* ui-integrity 20260715m: tab shells + feed trailing-slash consistency */
body:not(.home-mode) .stream-panel {
  margin-top: 4px;
}
body:not(.home-mode) .daily-hero[hidden] + .home-dashboard[hidden] + .stream-panel,
body:not(.home-mode) .stream-panel {
  /* keep stream panel full width on category tabs */
}
.topnav a[data-nav="feed"] {
  /* ensure consistent hit target */
}
/* Avoid double-margin on footer when sidebar collapses */
@media (max-width: 820px) {
  .site-footer { margin-left: 0; }
}

/* —— palette cohesion 20260715w: slate canvas + dark cover harmony —— */
html[data-theme="light"] .search-field kbd,
html[data-theme="light"] .search-kbd {
  background: var(--surface-hover);
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="light"] .modal-card {
  background: var(--panel-elevated);
  box-shadow: 0 28px 90px rgba(30, 34, 60, .28);
}
html[data-theme="light"] .search-hit:hover,
html[data-theme="light"] .search-hit[aria-selected="true"] {
  background: var(--surface-hover);
}
html[data-theme="light"] .load-more {
  background: var(--panel-elevated);
  border-color: var(--line);
}
html[data-theme="light"] .load-more:hover {
  border-color: color-mix(in srgb, var(--line) 40%, var(--accent) 60%);
  box-shadow: var(--elevated-shadow-soft);
}
html[data-theme="light"] .skeleton-card {
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-elevated) 37%, var(--panel) 63%);
  background-size: 400% 100%;
  border: 1px solid var(--line);
}
html[data-theme="light"] .feed-author-row em {
  background: var(--surface-hover);
}
html[data-theme="light"] .back-top {
  background: color-mix(in srgb, var(--panel-elevated) 92%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--elevated-shadow-soft);
}
/* Soft matte frame around photo covers inside elevated cards */
html[data-theme="light"] .article-card,
html[data-theme="light"] .home-pick-card,
html[data-theme="light"] .feed-post {
  background: var(--card-body);
}
html[data-theme="dark"] .article-card .card-body,
html[data-theme="dark"] .home-pick-body {
  background: var(--card-body);
}
html[data-theme="dark"] .topbar {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}
html[data-theme="dark"] .topnav a.active {
  background: color-mix(in srgb, var(--panel) 70%, var(--accent) 30%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
html[data-theme="dark"] .sidebar-row.selected {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #12141a), #222836);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--pink);
}

/* —— 20260715x: stream dedupe UX, mobile hero, archive balance —— */
.stream-hint .stream-dedupe-note {
  color: var(--muted);
  font-size: 12px;
}

/* Archive: cap visual height, denser rows; match picks column */
.home-secondary .daily-archive-list {
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 2px;
}
.home-secondary .archive-card {
  padding: 10px 8px 10px 0;
  grid-template-columns: 12px 42px 48px minmax(0, 1fr);
  gap: 8px 10px;
}
.home-secondary .archive-thumb {
  width: 48px;
  height: 48px;
}
.home-secondary .archive-summary {
  -webkit-line-clamp: 1;
}
.home-secondary .home-pick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.home-secondary .mini-cover {
  height: 64px !important;
}
.home-secondary .home-pick-body p {
  -webkit-line-clamp: 2;
  font-size: 11.5px;
}

/* Sidebar edge on light canvas */
html[data-theme="light"] .sidebar {
  border-right: 1px solid color-mix(in srgb, var(--line) 80%, var(--accent) 20%);
  box-shadow: 4px 0 24px rgba(36, 40, 70, .04);
}

/* Mobile / tablet: compress hero */
@media (max-width: 820px) {
  .daily-hero {
    padding: 16px 14px !important;
    gap: 12px !important;
  }
  .daily-hero-main h2 {
    font-size: clamp(18px, 5.2vw, 24px) !important;
  }
  .daily-hero-main > p {
    margin-bottom: 10px !important;
    font-size: 13px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .daily-highlights {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .daily-chip {
    padding: 8px 10px !important;
  }
  .daily-chip p {
    font-size: 12px !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Hide large cover on narrow screens — Hero text is enough; stats stay */
  .daily-cover-card {
    display: none !important;
  }
  .daily-date-card {
    display: none !important;
  }
  .daily-hero-side {
    gap: 8px !important;
  }
  .stats-row-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .stats-row-hero .stat-card {
    padding: 8px 10px !important;
  }
  .stats-row-hero .stat-card strong {
    font-size: 16px !important;
  }
  .stats-row-hero .stat-card span {
    font-size: 10px !important;
  }
  .daily-hero-actions {
    gap: 8px !important;
  }
  .daily-hero-actions .pill-button {
    height: 36px;
    min-width: 0;
    padding: 0 14px;
    font-size: 13px;
  }
  /* Hide secondary CTAs on very small to free space */
  .daily-hero .login-button,
  .daily-hero .ghost-link {
    display: none;
  }
}

@media (max-width: 620px) {
  .stats-row-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .home-secondary .daily-archive-list {
    max-height: none;
  }
}

/* —— polish 20260715y: zero-like, cat rail, denser stream —— */
.stream-panel .article-card h2 {
  min-height: 2.6em;
}
.stream-panel .article-excerpt {
  min-height: 2.7em;
}
html[data-theme="dark"] .card-open-hint {
  color: var(--muted);
}
html[data-theme="dark"] .article-card:hover .card-open-hint {
  color: #c8b6ff;
}
/* Feed body shares card-body tone */
.feed-post-body {
  background: var(--card-body);
}
.feed-post[data-cat] .feed-post-body {
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  padding-left: calc(1em - 1px);
}
.feed-post[data-cat="product"] .feed-post-body { border-left-color: #3d7cff; }
.feed-post[data-cat="research"] .feed-post-body,
.feed-post[data-cat="paper"] .feed-post-body { border-left-color: #6b45e8; }
.feed-post[data-cat="news"] .feed-post-body { border-left-color: #e08c3c; }
.feed-post[data-cat="release"] .feed-post-body { border-left-color: #2db48c; }
.feed-post[data-cat="daily"] .feed-post-body { border-left-color: var(--pink); }

/* Empty / load more cohesion */
.load-more {
  background: var(--panel-elevated);
  border-color: var(--line);
  color: var(--ink);
}
.filter-chip.active {
  font-weight: 700;
}

/* Archive without today feels past-focused */
.home-secondary .daily-archive-sub {
  max-width: 28ch;
}

/* Reduce dead chrome: hide zero-like until hover on touch-less desktop */
@media (hover: hover) and (pointer: fine) {
  .article-card .like-action.is-zero {
    opacity: 0.28;
  }
  .article-card:hover .like-action.is-zero {
    opacity: 0.75;
  }
}