/* === 0t5 — Catppuccin-based theme ===
   Adapted from the Claude Design handoff (frappe/latte). */

:root {
  /* Frappé (dark) — default */
  --c-base: #303446;
  --c-mantle: #292c3c;
  --c-crust: #232634;
  --c-surface0: #414559;
  --c-surface1: #51576d;
  --c-surface2: #626880;
  --c-text: #c6d0f5;
  --c-subtext1: #b5bfe2;
  --c-subtext0: #a5adce;
  --c-overlay0: #737994;
  --c-overlay1: #838ba7;
  --c-overlay2: #949cbb;
  --c-mauve: #ca9ee6;
  --c-blue: #8caaee;
  --c-lavender: #babbf1;
  --c-red: #e78284;
  --c-green: #a6d189;
  --c-yellow: #e5c890;
  --c-peach: #ef9f76;
  --c-pink: #f4b8e4;
  --c-teal: #81c8be;
  --c-sky: #99d1db;
  --c-sapphire: #85c1dc;
  --c-rosewater: #f2d5cf;
  --c-maroon: #ea999c;
  --c-flamingo: #eebebe;
  --c-accent: var(--c-mauve);
  --c-accent-soft: color-mix(in oklab, var(--c-mauve) 18%, transparent);

  --fs-base: 16px;
  --density: 1;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --shadow: 0 1px 0 rgba(0,0,0,.18), 0 8px 24px -16px rgba(0,0,0,.45);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="latte"] {
  --c-base: #eff1f5;
  --c-mantle: #e6e9ef;
  --c-crust: #dce0e8;
  --c-surface0: #ccd0da;
  --c-surface1: #bcc0cc;
  --c-surface2: #acb0be;
  --c-text: #4c4f69;
  --c-subtext1: #5c5f77;
  --c-subtext0: #6c6f85;
  --c-overlay0: #9ca0b0;
  --c-overlay1: #8c8fa1;
  --c-overlay2: #7c7f93;
  --c-mauve: #8839ef;
  --c-blue: #1e66f5;
  --c-lavender: #7287fd;
  --c-red: #d20f39;
  --c-green: #40a02b;
  --c-yellow: #df8e1d;
  --c-peach: #fe640b;
  --c-pink: #ea76cb;
  --c-teal: #179299;
  --c-sky: #04a5e5;
  --c-sapphire: #209fb5;
  --c-rosewater: #dc8a78;
  --c-maroon: #e64553;
  --c-flamingo: #dd7878;
  --c-accent: var(--c-mauve);
  --c-accent-soft: color-mix(in oklab, var(--c-mauve) 14%, transparent);
  --shadow: 0 1px 0 rgba(76,79,105,.06), 0 8px 24px -18px rgba(76,79,105,.28);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-base);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .2s ease, color .2s ease;
}

::selection { background: var(--c-accent-soft); color: var(--c-text); }

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

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

/* === App shell === */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 32px;
  background: color-mix(in oklab, var(--c-base) 85%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--c-surface0) 60%, transparent);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: var(--c-text);
}
.logo .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-accent-soft);
}
.logo .from-to { color: var(--c-overlay1); font-weight: 500; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-subtext0);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease;
}
.nav a:hover, .nav a.active { color: var(--c-text); background: var(--c-surface0); }

.spacer { flex: 1; }

.search-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  background: var(--c-mantle);
  border: 1px solid color-mix(in oklab, var(--c-surface0) 70%, transparent);
  border-radius: 999px;
  color: var(--c-subtext0);
  font-size: 13px;
  min-width: 240px;
  cursor: text;
  transition: border-color .15s ease, background .15s ease;
}
.search-pill:hover { border-color: var(--c-surface1); }
.search-pill svg { color: var(--c-overlay0); }
.search-pill .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-overlay1);
  background: var(--c-surface0);
  padding: 2px 6px;
  border-radius: 4px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  color: var(--c-subtext1);
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--c-surface0); color: var(--c-text); }

.coffee-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-peach);
  background: color-mix(in oklab, var(--c-peach) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--c-peach) 22%, transparent);
  transition: background .15s ease, transform .15s ease;
}
.coffee-btn:hover { background: color-mix(in oklab, var(--c-peach) 20%, transparent); }
.coffee-btn:active { transform: translateY(1px); }

.user-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-overlay1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.user-chip a:hover { color: var(--c-red); }

.login-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-mantle);
  border: 1px solid color-mix(in oklab, var(--c-surface0) 80%, transparent);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.login-link:hover { background: var(--c-surface0); }

/* theme-toggle: show the icon for the theme you'd switch *to* */
.i-moon { display: none; }
[data-theme="latte"] .i-sun { display: none; }
[data-theme="latte"] .i-moon { display: inline; }

/* === Page container === */
.page {
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: calc(40px * var(--density)) 32px calc(64px * var(--density));
}
.page.narrow { max-width: 560px; }

/* === Flash === */
.flash {
  max-width: 1240px;
  margin: 18px auto 0;
  padding: 0 32px;
}
.flash-inner {
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  background: color-mix(in oklab, var(--c-yellow) 12%, transparent);
  border-left: 3px solid var(--c-yellow);
  color: var(--c-subtext1);
}

/* === Home === */
.home-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: calc(32px * var(--density));
}
.home-intro h1 {
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 10px;
  font-weight: 700;
}
.home-intro h1 .accent { color: var(--c-accent); }
.home-intro p {
  margin: 0;
  color: var(--c-subtext0);
  font-size: 15px;
  max-width: 560px;
}
.home-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-overlay1);
  white-space: nowrap;
  padding-bottom: 6px;
}
.home-meta .num { color: var(--c-text); }

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: calc(20px * var(--density));
}
.chip {
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font-mono);
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--c-subtext0);
  background: var(--c-mantle);
  border: 1px solid color-mix(in oklab, var(--c-surface0) 60%, transparent);
  cursor: pointer;
  transition: all .15s ease;
}
.chip:hover { color: var(--c-text); border-color: var(--c-surface1); }
.chip.active {
  color: var(--c-base);
  background: var(--c-accent);
  border-color: var(--c-accent);
}
[data-theme="latte"] .chip.active { color: #fff; }
.chip .count { margin-left: 4px; color: var(--c-overlay1); font-size: 11px; }
.chip.active .count { color: color-mix(in oklab, var(--c-base) 60%, transparent); }
[data-theme="latte"] .chip.active .count { color: rgba(255,255,255,.7); }

/* Article list */
.article-list { display: flex; flex-direction: column; }
.article-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: calc(18px * var(--density)) 0;
  border-bottom: 1px solid color-mix(in oklab, var(--c-surface0) 50%, transparent);
  transition: background .15s ease;
}
.article-row:hover { background: color-mix(in oklab, var(--c-mantle) 50%, transparent); }
.article-row:hover .article-title { color: var(--c-accent); }
.article-row .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-overlay0);
  padding-top: 4px;
}
.article-body { min-width: 0; }
.article-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--c-text);
  transition: color .15s ease;
}
.article-blurb {
  font-size: 14px;
  color: var(--c-subtext0);
  line-height: 1.5;
  margin: 0 0 8px;
}
.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--c-overlay1);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--cat-color, var(--c-accent)) 14%, transparent);
  color: var(--cat-color, var(--c-accent));
}
.tag.paid {
  background: color-mix(in oklab, var(--c-peach) 16%, transparent);
  color: var(--c-peach);
}
.tag.draft {
  background: color-mix(in oklab, var(--c-overlay0) 20%, transparent);
  color: var(--c-overlay2);
}
/* stable per-category colours (see data.go: catColorClass) */
.cat-0 { --cat-color: var(--c-peach); }
.cat-1 { --cat-color: var(--c-green); }
.cat-2 { --cat-color: var(--c-sapphire); }
.cat-3 { --cat-color: var(--c-mauve); }
.cat-4 { --cat-color: var(--c-blue); }
.cat-5 { --cat-color: var(--c-teal); }
.cat-6 { --cat-color: var(--c-yellow); }
.cat-7 { --cat-color: var(--c-pink); }
.cat-x { --cat-color: var(--c-overlay1); }

.dot-sep { color: var(--c-overlay0); }
.article-row .right {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-overlay1);
  text-align: right;
  white-space: nowrap;
  padding-top: 4px;
}
.list-empty {
  padding: 28px 0;
  color: var(--c-overlay1);
  font-size: 14px;
}

/* === Article page === */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: start;
}
.article-content { max-width: 720px; }
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--c-overlay1);
  margin-bottom: 18px;
}
.crumb:hover { color: var(--c-text); }
.article-content > h1 {
  font-size: clamp(28px, 3.2vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 14px;
  font-weight: 700;
  text-wrap: pretty;
}
.article-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in oklab, var(--c-surface0) 60%, transparent);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--c-overlay1);
}

/* article body (rendered markdown) */
.article-content h1 { font-size: 26px; margin: 40px 0 12px; font-weight: 700; }
.article-content h2 {
  font-size: 22px;
  margin: 40px 0 12px;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.article-content h3 { font-size: 17px; margin: 28px 0 8px; font-weight: 600; }
.article-content p {
  font-size: 15.5px;
  margin: 0 0 16px;
  color: var(--c-subtext1);
  line-height: 1.7;
}
.article-content p strong, .article-content li strong { color: var(--c-text); }
.article-content a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-content ul, .article-content ol {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--c-subtext1);
  font-size: 15.5px;
  line-height: 1.7;
}
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li::marker { color: var(--c-overlay1); }
.article-content blockquote {
  margin: 18px 0;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--c-surface2);
  color: var(--c-subtext0);
}
.article-content hr {
  border: 0;
  border-top: 1px solid color-mix(in oklab, var(--c-surface0) 60%, transparent);
  margin: 32px 0;
}
.article-content img { max-width: 100%; border-radius: var(--radius); }
.article-content code:not(pre code) {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--c-mantle);
  color: var(--c-peach);
  border: 1px solid color-mix(in oklab, var(--c-surface0) 60%, transparent);
}
[data-theme="latte"] .article-content code:not(pre code) { color: var(--c-teal); }
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 14.5px;
}
.article-content th, .article-content td {
  text-align: left;
  padding: 7px 12px;
  border: 1px solid color-mix(in oklab, var(--c-surface0) 60%, transparent);
}
.article-content th { background: var(--c-mantle); color: var(--c-text); }

/* Admin-authored callouts: <div class="callout tip|warn">…</div> */
.callout {
  padding: 14px 18px;
  border-radius: var(--radius);
  margin: 18px 0;
  font-size: 14.5px;
  line-height: 1.6;
  background: color-mix(in oklab, var(--c-blue) 10%, transparent);
  border-left: 3px solid var(--c-blue);
  color: var(--c-subtext1);
}
.callout.warn {
  background: color-mix(in oklab, var(--c-yellow) 10%, transparent);
  border-left-color: var(--c-yellow);
}
.callout.tip {
  background: color-mix(in oklab, var(--c-green) 10%, transparent);
  border-left-color: var(--c-green);
}

/* Code blocks (chroma) */
.article-content pre {
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--c-mantle);
  border: 1px solid color-mix(in oklab, var(--c-surface0) 70%, transparent);
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.65;
  overflow-x: auto;
  color: var(--c-text);
}
.article-content pre code { font-family: inherit; font-size: inherit; }
.article-content pre::-webkit-scrollbar { height: 8px; }
.article-content pre::-webkit-scrollbar-thumb { background: var(--c-surface1); border-radius: 4px; }
.article-content pre::-webkit-scrollbar-track { background: transparent; }

/* chroma token classes — theme-aware via Catppuccin vars */
.chroma .c, .chroma .ch, .chroma .cm, .chroma .cp, .chroma .cpf,
.chroma .c1, .chroma .cs { color: var(--c-overlay1); font-style: italic; }
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp,
.chroma .kr, .chroma .kt { color: var(--c-mauve); }
.chroma .o, .chroma .ow { color: var(--c-sky); }
.chroma .p { color: var(--c-overlay2); }
.chroma .nb, .chroma .bp, .chroma .nf, .chroma .fm { color: var(--c-blue); }
.chroma .nc, .chroma .nn, .chroma .no, .chroma .na, .chroma .py { color: var(--c-yellow); }
.chroma .nt { color: var(--c-mauve); }
.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .nl { color: var(--c-red); }
.chroma .nd, .chroma .ni, .chroma .ne { color: var(--c-peach); }
.chroma .s, .chroma .sb, .chroma .sc, .chroma .sd, .chroma .s2,
.chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr,
.chroma .s1, .chroma .ss, .chroma .dl { color: var(--c-green); }
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi,
.chroma .il, .chroma .mo, .chroma .mx { color: var(--c-peach); }
.chroma .l, .chroma .ld { color: var(--c-teal); }
.chroma .gd { color: var(--c-red); }
.chroma .gi { color: var(--c-green); }
.chroma .gh, .chroma .gu { color: var(--c-blue); font-weight: 600; }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: 600; }
.chroma .err { color: var(--c-red); }

/* article support strip */
.article-end {
  margin: 48px 0 0;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--c-peach) 8%, transparent);
  border: 1px dashed color-mix(in oklab, var(--c-peach) 30%, transparent);
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  color: var(--c-subtext1);
}
.article-end .em { font-size: 22px; }
.article-end .strip-title { color: var(--c-text); font-weight: 600; margin-bottom: 2px; }
.article-end .strip-sub { font-size: 13px; color: var(--c-subtext0); }
.article-end .small-coffee { margin-left: auto; white-space: nowrap; }

/* === Sidebar === */
.sidebar {
  position: sticky;
  top: 78px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.side-block {
  background: color-mix(in oklab, var(--c-mantle) 60%, transparent);
  border: 1px solid color-mix(in oklab, var(--c-surface0) 50%, transparent);
  border-radius: var(--radius);
  padding: 16px;
}
.side-title {
  font-size: 11.5px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-overlay1);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.side-title .swatch {
  width: 6px; height: 6px;
  border-radius: 999px;
  display: inline-block;
  background: var(--cat-color, var(--c-accent));
}
.side-list { display: flex; flex-direction: column; gap: 2px; }
.side-item {
  display: block;
  text-align: left;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--c-subtext0);
  line-height: 1.4;
  transition: background .15s ease, color .15s ease;
}
.side-item:hover { background: var(--c-surface0); color: var(--c-text); }
.side-item.current {
  background: var(--c-accent-soft);
  color: var(--c-text);
  position: relative;
}
.side-item.current::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--c-accent);
  border-radius: 2px;
}
.side-item .sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-overlay1);
  margin-top: 2px;
}

/* === Paywall === */
.paywall {
  margin-top: 32px;
  padding: 24px;
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--c-peach) 9%, transparent);
  border: 1px solid color-mix(in oklab, var(--c-peach) 28%, transparent);
}
.paywall h2 { margin: 0 0 6px; font-size: 18px; color: var(--c-text); }
.paywall p { margin: 0 0 16px; font-size: 14px; color: var(--c-subtext0); }
.paywall p:last-child { margin-bottom: 0; }

/* === Forms / buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  background: var(--c-accent);
  color: var(--c-base);
  border: 1px solid var(--c-accent);
  transition: filter .15s ease, transform .1s ease;
}
[data-theme="latte"] .btn { color: #fff; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.block { width: 100%; }
.btn.ghost {
  background: var(--c-mantle);
  color: var(--c-text);
  border-color: color-mix(in oklab, var(--c-surface0) 80%, transparent);
}
.btn.ghost:hover { background: var(--c-surface0); filter: none; }
.btn.peach {
  background: color-mix(in oklab, var(--c-peach) 16%, transparent);
  color: var(--c-peach);
  border-color: color-mix(in oklab, var(--c-peach) 30%, transparent);
}
.btn.peach:hover { background: color-mix(in oklab, var(--c-peach) 24%, transparent); filter: none; }
.btn.green { background: var(--c-green); border-color: var(--c-green); color: var(--c-base); }
.btn.danger-link {
  background: none; border: 0; padding: 0;
  color: var(--c-red); font-weight: 500; font-size: 13px;
}
.btn.danger-link:hover { text-decoration: underline; filter: none; }

.field { display: block; margin-bottom: 16px; }
.field .label {
  display: block;
  font-size: 13px;
  color: var(--c-subtext0);
  margin-bottom: 6px;
}
.input, .textarea, .select {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-mantle);
  border: 1px solid color-mix(in oklab, var(--c-surface0) 80%, transparent);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  transition: border-color .15s ease;
}
.textarea { resize: vertical; line-height: 1.6; }
.textarea.mono { font-family: var(--font-mono); font-size: 13px; }
.input:focus, .textarea:focus, .select:focus { outline: 0; border-color: var(--c-accent); }
.input::placeholder, .textarea::placeholder { color: var(--c-overlay0); }

.card {
  background: color-mix(in oklab, var(--c-mantle) 60%, transparent);
  border: 1px solid color-mix(in oklab, var(--c-surface0) 50%, transparent);
  border-radius: var(--radius);
  padding: 28px;
}
.card h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -0.02em; }
.card .lead { margin: 0 0 20px; color: var(--c-subtext0); font-size: 14px; }
.card.center { text-align: center; }
.card.center .lead { margin-bottom: 0; }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-overlay1);
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in oklab, var(--c-surface0) 70%, transparent);
}

.amount-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.amount-grid button {
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-subtext1);
  background: var(--c-mantle);
  border: 1px solid color-mix(in oklab, var(--c-surface0) 70%, transparent);
}
.amount-grid button.active {
  color: var(--c-accent);
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

/* === Search === */
.page-title { font-size: 28px; letter-spacing: -0.02em; margin: 0 0 18px; font-weight: 700; }
.search-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--c-mantle);
  border: 1px solid color-mix(in oklab, var(--c-surface0) 80%, transparent);
  border-radius: var(--radius);
  margin-bottom: 18px;
  transition: border-color .15s ease;
}
.search-input:focus-within { border-color: var(--c-accent); }
.search-input svg { color: var(--c-overlay1); flex-shrink: 0; }
.search-input input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--c-text);
  font-family: inherit;
  font-size: 16px;
}
.search-input input::placeholder { color: var(--c-overlay0); }

.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in oklab, var(--c-surface0) 50%, transparent);
}
.filter-group .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-overlay1);
  margin-bottom: 8px;
}
.filter-group .opts { display: flex; gap: 6px; flex-wrap: wrap; }
.search-filters .chip { position: relative; }
.search-filters .chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.search-filters .chip:has(input:checked) {
  color: var(--c-base);
  background: var(--c-accent);
  border-color: var(--c-accent);
}
[data-theme="latte"] .search-filters .chip:has(input:checked) { color: #fff; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-overlay1);
  margin-bottom: 8px;
}
.btn-row { display: flex; gap: 10px; }
.card-actions { margin-top: 18px; }
.search-stats {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-overlay1);
  margin-bottom: 14px;
}
.search-empty { text-align: center; padding: 80px 20px; color: var(--c-overlay1); }
.search-empty .big {
  font-size: 32px;
  font-family: var(--font-mono);
  color: var(--c-surface2);
  margin-bottom: 12px;
}

/* === Admin === */
.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-overlay1);
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--c-surface0) 60%, transparent);
}
.admin-table tbody td {
  padding: 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--c-surface0) 40%, transparent);
  color: var(--c-subtext1);
}
.admin-table tbody tr:hover { background: color-mix(in oklab, var(--c-mantle) 50%, transparent); }
.admin-table .a-title { color: var(--c-text); font-weight: 600; }
.admin-table .a-slug { font-family: var(--font-mono); font-size: 11.5px; color: var(--c-overlay1); }
.admin-table a.link { color: var(--c-accent); }
.admin-table a.link:hover { text-decoration: underline; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

/* === Footer === */
.footer {
  margin-top: auto;
  border-top: 1px solid color-mix(in oklab, var(--c-surface0) 50%, transparent);
  padding: 36px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.footer-about {
  font-size: 13px;
  color: var(--c-subtext0);
  line-height: 1.6;
  max-width: 460px;
}
.footer-about .name {
  font-family: var(--font-mono);
  color: var(--c-text);
  font-weight: 600;
}
.footer-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-overlay1);
  white-space: nowrap;
}

/* === Responsive === */
@media (max-width: 960px) {
  .article-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .search-pill { min-width: 0; width: 36px; padding: 7px; }
  .search-pill .text, .search-pill .kbd { display: none; }
  .nav { display: none; }
}
@media (max-width: 640px) {
  .header { padding: 12px 16px; gap: 12px; }
  .page { padding: 24px 16px 48px; }
  .flash { padding: 0 16px; }
  .footer { grid-template-columns: 1fr; padding: 24px 16px; }
  .article-row { grid-template-columns: 1fr; gap: 8px; }
  .article-row .num, .article-row .right { display: none; }
  .form-grid { grid-template-columns: 1fr; }
}