/*
 * MDSwap — rendered markdown preview, not raw editor.
 */

/* @critical-start */
:root,
:root[data-theme="midnight"] {
  --bg: #0a0b0e;
  --surface: #14161c;
  --surface-2: #1c1f27;
  --surface-3: #262932;
  --border: #2c2f38;
  --border-soft: #1f222a;
  --ink: #ecedef;
  --ink-soft: #b9bbc1;
  --muted: #8a8d96;
  --syntax: #555861;
  --accent: #67d4ff;
  --accent-strong: #94e3ff;
  --accent-hover: #94e3ff;
  --accent-bg: rgba(103, 212, 255, 0.12);
  --accent-ink: #021924;
  --link: #67d4ff;
  --good: #6ee7a3;
  --warn: #f5c46e;
  --bad: #ff7d7d;
  --danger: #ef6b6b;
  --info: #7fa9ff;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 1px 0 rgba(0, 0, 0, 0.25);
  /* shadcn-aligned shadow scale (dark) — used by refined surfaces. */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.65), 0 6px 10px -4px rgba(0, 0, 0, 0.5);
  /* shadcn radius scale: sm/md = default-margin offsets of --radius. */
  --radius: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.625rem;
  /* shadcn canonical aliases — resolve at use-time so per-theme overrides flow through. */
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--surface);
  --card-foreground: var(--ink);
  --popover: var(--surface);
  --popover-foreground: var(--ink);
  --primary: var(--accent);
  --primary-foreground: var(--accent-ink);
  --primary-hover: var(--accent-strong);
  --secondary: var(--surface-2);
  --secondary-foreground: var(--ink);
  --secondary-hover: var(--surface-3);
  --muted-foreground: var(--muted);
  --destructive: var(--bad);
  --destructive-foreground: #ffffff;
  --input: var(--border);
  /* NOTE: --ring is reserved in this project for a box-shadow glow expression
     (see :root[data-theme=...] overrides below). Use --accent for shadcn ring color. */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  color-scheme: dark;
}

:root[data-theme="purple"] {
  --bg: #0c0916;
  --surface: #161023;
  --surface-2: #1f1730;
  --surface-3: #2a1f40;
  --border: #322342;
  --border-soft: #221733;
  --ink: #f1eff7;
  --ink-soft: #cbc4dd;
  --muted: #9088a3;
  --syntax: #5a5070;
  --accent: #b58cff;
  --accent-strong: #d6b9ff;
  --accent-hover: #d6b9ff;
  --accent-bg: rgba(181, 140, 255, 0.16);
  --accent-ink: #14072a;
  --link: #c8a6ff;
  --good: #84e7b1;
  --warn: #f5c46e;
  --bad: #ff8b8b;
  --danger: #f47272;
  --info: #87b9ff;
  color-scheme: dark;
}

:root[data-theme="blue"] {
  --bg: #08101e;
  --surface: #0f1a2e;
  --surface-2: #15233c;
  --surface-3: #1e2f4d;
  --border: #2a3f5f;
  --border-soft: #1a2840;
  --ink: #ecf0f8;
  --ink-soft: #bfcadb;
  --muted: #7d89a4;
  --syntax: #495673;
  --accent: #5fa0ff;
  --accent-strong: #8cbdff;
  --accent-hover: #8cbdff;
  --accent-bg: rgba(95, 160, 255, 0.16);
  --accent-ink: #04132c;
  --link: #8cbdff;
  --good: #6ee7a3;
  --warn: #f5c46e;
  --bad: #ff8585;
  --danger: #ee6464;
  --info: #9ec8ff;
  color-scheme: dark;
}

:root[data-theme="forest"] {
  --bg: #07120c;
  --surface: #0f1c14;
  --surface-2: #15281c;
  --surface-3: #1d3527;
  --border: #284939;
  --border-soft: #16291e;
  --ink: #ecf0eb;
  --ink-soft: #bccdbc;
  --muted: #7e8b80;
  --syntax: #4b5b51;
  --accent: #5cca8b;
  --accent-strong: #8ee4b1;
  --accent-hover: #8ee4b1;
  --accent-bg: rgba(92, 202, 139, 0.16);
  --accent-ink: #042214;
  --link: #8ee4b1;
  --good: #8ee4b1;
  --warn: #f5c46e;
  --bad: #ff8585;
  --danger: #ee6464;
  --info: #7fb6e0;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

html {
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}

::selection {
  background: var(--accent-bg);
  color: var(--accent-strong);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

a:hover {
  border-bottom-color: var(--link);
}

a:visited {
  color: color-mix(in srgb, var(--link) 70%, var(--muted));
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ===== App layout ===== */
#app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Skip-link, hidden until focused. */
.skip-link {
  position: absolute;
  left: -1000px;
  top: -1000px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 14px;
  border-radius: 6px;
  z-index: 1000;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}
/* @critical-end */

/* Footer baseline. */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 48px;
  padding: 24px 28px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.86rem;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ===== Top app bar ===== */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 36px);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.04rem;
  border-bottom: 0;
}

.brand:hover {
  border-bottom: 0;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: -0.02em;
}

img.brand-mark {
  background: transparent;
  border-radius: 0;
  object-fit: contain;
  width: 40px;
  height: 40px;
  margin-right: -2px;
}

.footer-brand img.brand-mark.footer-brand-mark {
  width: 32px;
  height: 32px;
  margin-right: 0;
}

.appbar-spacer {
  flex: 1;
}

.appbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ===== Document area ===== */
.document {
  padding: 24px clamp(16px, 4vw, 36px) 96px;
}

.page {
  max-width: 1100px;
  margin: 0 auto;
}

.reading {
  max-width: 820px;
  margin: 0 auto;
}

/* ===== Filename pill (subtle MD callback) ===== */
.filename {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0;
  margin-bottom: 18px;
}

.filename .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.filename a {
  color: var(--ink-soft);
  border-bottom: 0;
}

.filename a:hover {
  color: var(--ink);
}

.filename .sep {
  color: var(--syntax);
}

.filename .file {
  color: var(--ink);
}

/* ===== Typography ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--sans);
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.18;
  margin: 0 0 0.4em;
  font-weight: 700;
}

h1 {
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.3em;
}

h2 {
  font-size: 1.55rem;
  margin-top: 2.2rem;
}

h3 {
  font-size: 1.18rem;
  margin-top: 1.6rem;
}

h4 {
  font-size: 1rem;
  color: var(--ink-soft);
  margin-top: 1.4rem;
  text-transform: none;
  letter-spacing: 0;
}

p {
  margin: 0 0 1em;
  color: var(--ink);
}

.lead {
  font-size: 1.18rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 1.5em;
  max-width: 680px;
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

li {
  margin: 0.2em 0;
}

li::marker {
  color: var(--muted);
}

blockquote {
  margin: 0 0 1.2em;
  padding: 8px 16px;
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink);
}

blockquote p {
  margin: 0;
}

hr {
  border: 0;
  height: 1px;
  background: var(--border-soft);
  margin: 2.4em 0;
}

code {
  padding: 2px 7px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--accent-strong);
}

pre {
  margin: 0 0 1.2em;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink);
}

pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

pre.fenced {
  position: relative;
  padding-top: 32px;
}

pre.fenced .fence-label {
  position: absolute;
  top: 8px;
  left: 16px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2em;
  font-size: 0.94rem;
}

th,
td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}

th {
  background: var(--surface-2);
  font-weight: 700;
}

img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}

/* ===== Buttons (shadcn-aligned variants) =====
   Default: secondary-style outline (border + surface bg, hover -> surface-2)
   Primary: brand fill (accent bg + accent-ink fg, hover -> accent-strong)
   Quiet:   ghost (no border/bg, hover -> surface-2)
   Outline: bordered, transparent bg (alias for default)
   Danger:  destructive (border, red text/border on hover)
   Icon:    square 40x40, --radius
*/
.btn,
.btn-primary,
.btn-quiet,
.btn-outline,
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.btn:hover,
.btn-primary:hover,
.btn-quiet:hover,
.btn-outline:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  border-bottom-color: var(--accent);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.btn-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ink-soft);
  box-shadow: none;
}

.btn-quiet:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: transparent;
}

.btn-outline {
  background: transparent;
}

.btn-danger {
  color: var(--bad);
  border-color: var(--border);
}

.btn-danger:hover {
  border-color: var(--bad);
  color: var(--destructive-foreground);
  background: var(--bad);
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius);
}

/* shadcn small-size button (h-9, text-xs). */
.btn-sm {
  height: 36px;
  padding: 0 12px;
  font-size: 0.8125rem;
  border-radius: var(--radius-md);
}

/* shadcn large-size button (h-11, px-8). */
.btn-lg {
  height: 44px;
  padding: 0 32px;
  font-size: 0.9375rem;
}

a.btn,
a.btn-primary,
a.btn-quiet,
a.btn-outline,
a.btn-icon {
  border-bottom: 1px solid var(--border);
}

/* Buttons rendered as <a> were inheriting the muted color from the global
   a:visited rule once their href had been clicked, which made the text
   blend into the button background (especially noticeable on the lavender
   "Publish an MD" CTA in the purple theme). Restore the unvisited foreground
   per button class so visited state is visually identical to fresh state. */
a.btn:visited,
a.btn:visited:hover { color: var(--ink); }
a.btn-primary:visited,
a.btn-primary:visited:hover { color: var(--accent-ink); }
a.btn-quiet:visited,
a.btn-quiet:visited:hover { color: var(--ink-soft); }
a.btn-outline:visited,
a.btn-outline:visited:hover { color: var(--ink); }
a.btn-icon:visited,
a.btn-icon:visited:hover { color: var(--ink); }
a.btn-danger:visited,
a.btn-danger:visited:hover { color: var(--bad); }

a.btn:hover,
a.btn-quiet:hover,
a.btn-outline:hover,
a.btn-icon:hover {
  border-bottom-color: var(--accent);
}

a.btn-primary {
  border-bottom-color: var(--accent);
}

a.btn-primary:hover {
  border-bottom-color: var(--accent-strong);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 14px 0 0;
}

.btn-row.spread {
  justify-content: space-between;
}

/* ===== Theme picker ===== */
.theme-picker {
  position: relative;
}

.theme-picker > .picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.86rem;
  cursor: pointer;
}

.theme-picker > .picker-trigger:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.theme-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.theme-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: none;
  z-index: 30;
}

.theme-picker.open .theme-popover {
  display: block;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  color: var(--ink);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 0.92rem;
}

.theme-option:hover,
.theme-option.active {
  background: var(--surface-2);
}

.theme-option.active::after {
  content: "✓";
  margin-left: auto;
  color: var(--accent);
  font-weight: 700;
}

/* Theme swatch fills (preview circles) */
.swatch-midnight { background: linear-gradient(135deg, #0a0b0e 50%, #67d4ff 50%); }
.swatch-purple { background: linear-gradient(135deg, #0c0916 50%, #b58cff 50%); }
.swatch-blue { background: linear-gradient(135deg, #08101e 50%, #5fa0ff 50%); }
.swatch-forest { background: linear-gradient(135deg, #07120c 50%, #5cca8b 50%); }
/* Custom swatch reads its two colors from inline CSS variables on the
   element so it reflects whichever colors the user picked, with sane
   fallbacks for first paint before app.js writes them. */
.swatch-custom {
  background: linear-gradient(135deg,
    var(--swatch-bg-color, var(--bg)) 50%,
    var(--swatch-accent-color, var(--accent)) 50%);
}

/* Custom theme inline panel inside the popover. */
.theme-custom-panel {
  margin-top: 6px;
  padding: 10px 10px 6px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-custom-hint {
  margin: 0 0 2px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.theme-custom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
}

.theme-custom-label {
  flex: 1;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.theme-custom-input {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.theme-custom-input::-webkit-color-swatch-wrapper { padding: 0; }
.theme-custom-input::-webkit-color-swatch { border: none; border-radius: 50%; }
.theme-custom-input::-moz-color-swatch { border: none; border-radius: 50%; }

.theme-custom-hex {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase;
  min-width: 60px;
  text-align: right;
}

/* ===== Notifications bell ===== */
.notif-bell {
  position: relative;
}

.notif-bell > .notif-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 1rem;
  cursor: pointer;
  position: relative;
}

.notif-bell > .notif-trigger:hover,
.notif-bell.open > .notif-trigger {
  border-color: var(--accent);
  color: var(--ink);
}

.notif-bell .notif-icon {
  font-size: 1rem;
  line-height: 1;
}

.notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bad, #ef5b5b);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 1px solid var(--surface);
}

.notif-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 30;
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.notif-list {
  overflow-y: auto;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-empty {
  padding: 16px 12px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-align: center;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 0;
  color: var(--ink);
  border-radius: var(--radius-sm);
  text-align: left;
  font: inherit;
  cursor: pointer;
  position: relative;
}

.notif-item:hover,
.notif-item:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.notif-item:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

.notif-item.unread {
  background: var(--surface-2);
}

.notif-item-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--accent);
}

.notif-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.notif-item-text {
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink);
  word-break: break-word;
}

.notif-item-meta {
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.notif-item-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.notif-footer {
  border-top: 1px solid var(--border);
  padding: 6px;
  display: flex;
  justify-content: flex-end;
}

.notif-mark-all {
  font-size: 0.82rem;
}

/* ===== Account pill ===== */
.account-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
}

.account-pill:hover {
  border-color: var(--accent);
  border-bottom-color: var(--accent);
}

.account-pill img,
.account-pill .avatar-fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.74rem;
}

.account-pill .handle {
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--ink-soft);
}

/* Boot-time skeleton — keeps appbar layout stable while
   ensureOwnProfileLoaded resolves so we don't flash a stale handle or
   the missing-admin-badge state pulled from the cached JWT. */
.account-pill-loading {
  cursor: default;
  opacity: 0.6;
}
.account-pill-loading:hover {
  border-color: var(--border);
  border-bottom-color: var(--border);
}

/* ===== Search bar (in app bar) — shadcn input aesthetic ===== */
.search-input {
  flex: 1;
  max-width: 480px;
  height: 40px;
  padding: 0 16px 0 38px;
  border-radius: var(--radius);
  border: 1px solid var(--input);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d808a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 14px center;
}

.search-input::placeholder {
  color: var(--muted);
}

.search-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* ===== Generic shadcn-style input/select/textarea =====
   Use this class on any new <input>/<select>/<textarea> to get the
   canonical shadcn surface. Existing class-based inputs keep their
   bespoke layout (search-input, handle-input-row, newsletter-form). */
.input,
.textarea,
.select {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  font-family: var(--sans);
  font-size: 0.875rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.textarea {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.5;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--muted);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ===== Frontmatter card (subtle MD callback) ===== */
.frontmatter {
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink-soft);
  display: grid;
  gap: 6px;
  position: relative;
}

.frontmatter::before,
.frontmatter::after {
  content: "---";
  display: block;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

.frontmatter .row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
}

.frontmatter .key {
  color: var(--accent);
  font-weight: 600;
}

.frontmatter .key::after {
  content: ":";
  color: var(--syntax);
}

.frontmatter .value {
  color: var(--ink);
  word-break: break-word;
}

.frontmatter .value a {
  color: var(--link);
  border-bottom: 1px solid transparent;
}

.frontmatter .value a:hover {
  border-bottom-color: var(--link);
}

.frontmatter .value .tag {
  display: inline-block;
  margin: 0 4px 2px 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent-strong);
  font-size: 0.78rem;
}

/* ===== Filter chips ===== */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 24px;
  align-items: center;
}

.chip-row .label {
  color: var(--muted);
  font-size: 0.82rem;
  margin-right: 4px;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--surface-2);
}

.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* shadcn-style badge — flat label with no border, more compact than .chip. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  font-family: var(--sans);
}

.badge-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--ink-soft);
}

.badge-primary {
  background: var(--accent-bg);
  color: var(--accent-strong);
  border-color: transparent;
}

.badge-destructive {
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  color: var(--bad);
  border-color: transparent;
}

/* ===== Cards ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin: 0 0 32px;
}

/* Boot-time skeleton — same grid + card frame as the real listing so the
   grid doesn't reflow when results land, and a soft shimmer so the user
   reads it as loading rather than a stuck empty state. */
.skeleton-card {
  pointer-events: none;
  cursor: default;
}
.skeleton-card:hover {
  transform: none;
  border-color: var(--border);
  border-bottom-color: var(--border);
  box-shadow: none;
}
.skeleton-line {
  height: 1rem;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--border) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-title {
  height: 1.4rem;
  width: 78%;
}
.skeleton-meta {
  height: 0.85rem;
  width: 56%;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line { animation: none; }
  .skeleton-avatar { animation: none; }
}

/* Profile-page skeleton — same banner + stats + grid as renderProfilePage so
   the page does not reflow when the real profile lands. */
.skeleton-avatar {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--border) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border: 1px solid var(--border);
}
.profile-banner-text {
  display: grid;
  gap: 10px;
  align-content: center;
  min-width: 0;
}
.skeleton-name { height: 1.9rem; width: 38%; }
.skeleton-handle { height: 0.9rem; width: 18%; }
.skeleton-bio { height: 0.92rem; width: 72%; }
.skeleton-bio-short { height: 0.92rem; width: 48%; }
.skeleton-stat .key {
  visibility: hidden;
}
.skeleton-stat-value {
  height: 1.5rem;
  width: 60%;
  margin-top: 4px;
}

/* Listing-detail skeleton — mirrors the renderListing split layout so the
   page does not reflow when the real listing lands during the boot fetch. */
.listing-skeleton .frontmatter,
.new-swap-skeleton .form {
  margin-top: 12px;
}
.skeleton-heading { height: 2.2rem; width: 64%; margin: 14px 0 12px; }
.skeleton-lead { height: 1rem; width: 80%; margin-bottom: 18px; }
.skeleton-frontmatter-row .skeleton-frontmatter-value {
  display: inline-block;
  height: 0.9rem;
  width: 70%;
  vertical-align: middle;
}
.skeleton-frontmatter-row .key {
  visibility: hidden;
}
.skeleton-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 18px;
}
.skeleton-action {
  display: inline-block;
  height: 2.2rem;
  width: 8rem;
  border-radius: 999px;
}
.skeleton-markdown {
  display: grid;
  gap: 10px;
}
.skeleton-paragraph { height: 0.95rem; width: 96%; }
.skeleton-paragraph-short { width: 62%; }
.skeleton-side-heading { height: 1.1rem; width: 40%; margin-bottom: 10px; }

/* New-MD skeleton — shown when /new?branch=<slug> is opened before the source
   listing has hydrated, so the form does not flash with stale defaults. */
.skeleton-field {
  display: grid;
  gap: 8px;
}
.skeleton-field-label { height: 0.9rem; width: 24%; }
.skeleton-field-input { height: 2.4rem; width: 100%; }
.skeleton-field-textarea { height: 14rem; width: 100%; }

/* Daily-archive skeleton — mirrors the .daily-archive grid (date | title | meta)
   so /daily and /daily/<date> don't reflow when the real list lands. */
.daily-archive-skeleton li {
  list-style: none;
}
.daily-archive-skeleton .archive-row-skeleton {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  align-items: center;
}
.skeleton-archive-date { height: 0.95rem; width: 80px; }
.skeleton-archive-title { height: 1rem; width: 70%; }
.skeleton-archive-meta { height: 0.85rem; width: 90px; }

/* Daily-pick detail skeleton — mirrors .daily-hero (eyebrow + title + lead
   + meta + CTA row) so /daily/<date> doesn't reflow when the pick lands. */
.daily-hero-skeleton .skeleton-daily-title {
  height: 1.8rem;
  width: 70%;
  margin: 0 0 10px;
}
.daily-hero-skeleton .skeleton-daily-lead {
  height: 1.05rem;
  width: 85%;
  margin: 0 0 12px;
}
.daily-hero-skeleton .skeleton-daily-meta {
  height: 0.86rem;
  width: 40%;
  margin: 0 0 14px;
}
.daily-hero-skeleton .skeleton-daily-btn {
  height: 2.4rem;
  width: 120px;
  border-radius: var(--radius, 8px);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px;
  min-height: 180px;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--card-foreground);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  border-bottom-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.card-meta-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--muted);
}

.card-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent-strong);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.card-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 700;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-tagline {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 4px 0 0;
}

.card-tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
}

.card-tag::before {
  content: "#";
  color: var(--syntax);
  margin-right: 1px;
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.78rem;
  color: var(--muted);
}

.card-foot a {
  color: var(--ink-soft);
}

.card-foot a:hover {
  color: var(--accent);
}

/* Reddit-style: title pops, everything else collapses to a single muted line. */
.card-reddit {
  gap: 8px;
}
.card-reddit .card-title {
  -webkit-line-clamp: 2;
  font-size: 1.25rem;
  line-height: 1.3;
  /* Reserve 2 lines so single-line titles still anchor the meta below at the
     same y-offset as 2-line titles. Keeps the grid uniform regardless of how
     long the publisher's title is. */
  min-height: calc(2 * 1.3 * 1.25rem);
}
/* Fixed-slot meta grid: every card emits the same 4 rows so each field
   (type, AI flag, author, votes, downloads, license, age, tags) lives in
   the same coordinate regardless of which optional values are populated.
   Empty slots reserve their space via min-height on the row. */
.card-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.4;
}
.card-meta-grid .meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 1.4em;
}
.card-meta-grid .meta-row > span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.card-meta-grid .meta-row-tags {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 10px;
  min-height: 1.2em;
  overflow: hidden;
  max-height: 1.4em;
}
.card-meta-grid .meta-engagement {
  gap: 10px;
  flex-shrink: 0;
}
.card-meta-grid .meta-type {
  color: var(--accent-strong);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}
.card-meta-grid .meta-author { color: var(--ink-soft); }
.card-meta-grid .meta-votes { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.card-meta-grid .meta-votes.positive { color: var(--good); }
.card-meta-grid .meta-votes.negative { color: var(--bad); }
.card-meta-grid .meta-downloads { color: var(--ink-soft); font-weight: 600; }
.card-meta-grid .meta-license { color: var(--muted); font-family: var(--mono); font-size: 0.875rem; }
.card-meta-grid .meta-age { color: var(--muted); }
.card-meta-grid .meta-tag { color: var(--muted); font-family: var(--mono); }
.card-meta-grid .meta-tag::before { content: "#"; color: var(--syntax); margin-right: 1px; }

.ai-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.listing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.field-checkbox .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}
.field-checkbox .checkbox-label input { margin: 0; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 32px;
  font-size: 0.95rem;
  color: var(--muted);
}
.pager-arrow {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.pager-arrow:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.pager-arrow:active:not(:disabled) { transform: translateY(1px); }
.pager-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pager-status { font-variant-numeric: tabular-nums; }

.card-insights {
  display: flex;
  align-items: center;
  gap: 8px;
  /* margin-top: auto pushes the sparkline footer to the bottom of the card,
     keeping the meta-flat row visually aligned across cards with and without
     insights. */
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
  font-size: 0.78rem;
  color: var(--muted);
}

.card-insights-label {
  font-weight: 600;
  color: var(--ink);
}

.sparkline {
  display: inline-block;
  vertical-align: middle;
  color: var(--accent);
  flex-shrink: 0;
}

.sparkline rect {
  fill: currentColor;
}

.author-insights-sparkline {
  margin: 4px 0 8px;
  color: var(--accent);
}

/* ===== Hero (home page) ===== */
.hero {
  padding: 36px 0 12px;
}

.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.03em;
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
}

.hero .lead {
  font-size: 1.22rem;
  margin-bottom: 24px;
}

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.daily-hero {
  margin: 0;
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%);
}

.daily-hero h2,
.daily-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

.daily-hero h2 a {
  color: inherit;
  text-decoration: none;
}

.daily-hero h2 a:hover {
  color: var(--accent);
}

.daily-hero-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.daily-hero-lead {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.daily-hero-meta {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0 0 14px;
}

.daily-hero-body {
  margin: 8px 0 14px;
  font-size: 0.96rem;
}

.daily-archive {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  gap: 8px;
}

.daily-archive li > a {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  align-items: center;
}

.daily-archive li > a:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0 28px;
}

.metric-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface);
}

.metric-label {
  font-size: 0.78rem;
  color: var(--muted);
}

.metric-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
}

.admin-top {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  font-size: 0.86rem;
}

.admin-top th,
.admin-top td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.admin-top th {
  color: var(--muted);
  font-weight: 600;
  border-bottom-color: var(--border);
}

.admin-widget {
  margin: 24px 0;
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}

.admin-widget h3 {
  margin: 8px 0 4px;
  font-size: 0.96rem;
  font-weight: 700;
}

/* ===== Admin nav (was inline style) ===== */
.admin-nav {
  display: flex;
  gap: 8px;
  margin: 12px 0 24px;
  flex-wrap: wrap;
}

/* ===== Admin queue table (was inline styles) ===== */
.admin-queue {
  width: 100%;
  border-collapse: collapse;
}

.admin-queue th,
.admin-queue td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border-soft);
}

.admin-queue th {
  border-bottom-color: var(--border);
}

.admin-queue td.created,
.admin-queue td.note {
  font-size: 0.86rem;
}

.admin-queue td.note {
  max-width: 24em;
}

.admin-queue td.actions {
  white-space: nowrap;
}

.admin-queue .select-cell {
  width: 28px;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

.admin-queue tr.row-selected td {
  background: var(--surface-soft, rgba(103, 212, 255, 0.08));
}

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft, rgba(103, 212, 255, 0.06));
}

.bulk-bar-count {
  font-size: 0.92rem;
}

.bulk-bar-reason {
  flex: 1 1 240px;
  min-width: 200px;
}

.bulk-bar-reason .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bulk-bar-reason input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  background: var(--bg);
  color: var(--ink);
}

.bulk-bar-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.bulk-bar-result {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.92rem;
}

.bulk-bar-result-warn {
  border-color: var(--warn, #c79b00);
  background: rgba(199, 155, 0, 0.08);
}

.bulk-bar-result-ok {
  border-color: var(--good, #2c8f55);
  background: rgba(44, 143, 85, 0.08);
}

.bulk-bar-failed {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 0.86rem;
}

.bulk-confirm-reason {
  word-break: break-word;
}

.admin-users-search {
  margin-bottom: 16px;
}

.admin-users-table .user-handle {
  font-family: var(--mono);
  font-weight: 500;
}

.admin-users-table .user-email {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.admin-users-table td.actions button {
  margin-right: 4px;
}

.admin-users-all-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.admin-users-all-pagination .btn-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.admin-users-all-pagination [aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.user-flag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  margin-right: 4px;
  white-space: nowrap;
}

.user-flag-active { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--border)); }
.user-flag-admin { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent-strong) 40%, var(--border)); }
.user-flag-shadow { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.user-flag-suspended { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }

.admin-reserved-form {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 720px) {
  .admin-reserved-form { grid-template-columns: 1fr; }
}

.admin-reserved-table code {
  font-family: var(--mono);
  font-weight: 500;
}

.reserved-kind {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.reserved-kind-swap { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent-strong) 40%, var(--border)); }
.reserved-kind-handle { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--border)); }

/* ===== Audit log (was inline styles) ===== */
.audit-log {
  list-style: none;
  padding: 0;
  margin: 0;
}

.audit-log li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.86rem;
}

/* ===== Validation feedback (was inline styles in publish form) ===== */
.validation-list {
  padding-left: 18px;
  margin: 0;
}

.validation-list li {
  color: var(--bad);
}

.validation-success {
  color: var(--good);
  margin: 0;
}

/* ===== Profile banner socials line (was inline style) ===== */
.profile-banner-links {
  margin-top: 8px;
  font-size: 0.86rem;
}

/* ===== Message thread status (was inline style) ===== */
.message-status-bar {
  padding: 0 14px 8px;
}

/* ===== Publish form bot-check note (was inline style) ===== */
.bot-check-note {
  font-size: 0.86rem;
}

/* ===== Newsletter form (transparency.html, community/conduct.html) ===== */
.newsletter-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0 16px;
}

.newsletter-form label {
  font-size: 0.86rem;
}

.newsletter-form input[type="email"] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  min-width: 240px;
}

.newsletter-disclaimer {
  font-size: 0.86rem;
}

/* ===== Account deletion-cancelled page (api/account.js) ===== */
.delete-page-body {
  font-family: system-ui, -apple-system, sans-serif;
  margin: 2em;
  max-width: 48em;
}

/* ===== Embed iframe (api/embed.js) ===== */
.embed-body {
  margin: 0;
  background: #0a0b0e;
  color: #ecedef;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.embed-card {
  padding: 14px 16px;
  border: 1px solid #2c2f38;
  border-radius: 10px;
  max-width: 640px;
  margin: 8px auto;
}

.embed-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8d96;
}

.embed-card h1 {
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0.4em 0;
}

.embed-card p.lead {
  font-size: 0.9rem;
  color: #b9bbc1;
  margin: 0 0 8px;
}

.embed-card pre {
  background: #14161c;
  border: 1px solid #2c2f38;
  border-radius: 8px;
  padding: 10px;
  overflow: auto;
  font-size: 0.86rem;
  line-height: 1.55;
  max-height: 240px;
}

.embed-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.embed-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid #2c2f38;
  border-radius: 8px;
  color: #ecedef;
  background: transparent;
  text-decoration: none;
  font-size: 0.86rem;
}

.embed-btn-primary {
  background: #67d4ff;
  color: #0a0b0e;
  border-color: #67d4ff;
}

.embed-source {
  font-size: 0.78rem;
  color: #8a8d96;
  margin-top: 6px;
}

.embed-source a {
  color: #94e3ff;
}

.embed-not-found {
  margin: 1.2em;
  font-family: system-ui, -apple-system, sans-serif;
}

/* ===== Sections ===== */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 36px 0 16px;
}

.section-head h2 {
  margin: 0;
}

.section-head .meta {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--muted);
}

/* ===== Layouts ===== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px;
  align-items: start;
}

.split > .split-side {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 84px;
}

.side-block {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.side-block h3 {
  margin: 0 0 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.side-block p {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.side-block .meta-list {
  display: grid;
  gap: 6px;
}

.side-block .meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.86rem;
  color: var(--muted);
}

.side-block .meta-row strong {
  color: var(--ink);
  font-weight: 600;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.toc-list li {
  margin: 0;
}

.toc-list li::marker {
  display: none;
}

.toc-list a {
  display: block;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.3;
}

.toc-list a:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-bottom: 0;
}

.toc-list a.active {
  background: var(--accent-bg);
  color: var(--accent-strong);
  font-weight: 600;
}

.kbd-inline {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.2;
}

.shortcuts-grid {
  display: grid;
  gap: 8px;
  margin: 8px 0 16px;
}

.shortcuts-grid .row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 0.92rem;
}

.shortcuts-grid .row .keys {
  display: inline-flex;
  gap: 4px;
}

.shortcuts-grid .row .desc {
  color: var(--ink-soft);
}

/* ===== Listing actions ===== */
.listing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 28px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-items: center;
}

/* ===== Vote cluster (▲ green button — net score — ▼ red button) ===== */
.vote-cluster {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border-radius: 999px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--bg);
}
.btn-vote {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.btn-vote .vote-glyph {
  font-size: 1.05rem;
  line-height: 1;
}
.vote-cluster .vote-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 0 12px;
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2, var(--bg));
}
.vote-score.positive { color: var(--good); }
.vote-score.negative { color: var(--bad); }
.vote-score.neutral { color: var(--muted); }
.btn-vote.up:hover { color: var(--good); background: rgba(110, 231, 163, 0.12); }
.btn-vote.down:hover { color: var(--bad); background: rgba(255, 125, 125, 0.12); }
.btn-vote.up:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; }
.btn-vote.down:focus-visible { outline: 2px solid var(--bad); outline-offset: 2px; }
.btn-vote.up.active {
  background: var(--good);
  color: #052b16;
}
.btn-vote.down.active {
  background: var(--bad);
  color: #2c0a0a;
}
.btn-vote.up.active:hover { background: var(--good); }
.btn-vote.down.active:hover { background: var(--bad); }
.btn-vote:disabled { opacity: 0.5; cursor: not-allowed; }

.listing-actions .secondary-actions {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.listing-more {
  position: relative;
  margin-left: auto;
}

.listing-more-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 30;
  display: grid;
}

.listing-more-popover button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: var(--ink);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 0.92rem;
  cursor: pointer;
}

.listing-more-popover button:hover {
  background: var(--surface-2);
}

.listing-more-popover button.danger {
  color: var(--bad);
}

.listing-more-popover button.danger:hover {
  color: var(--danger);
}

/* ===== Markdown body (rendered preview) ===== */
.markdown {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

.markdown h1 {
  font-size: 1.85rem;
  margin-top: 0;
}

.markdown h2 {
  font-size: 1.45rem;
  margin-top: 1.8rem;
}

.markdown h3 {
  font-size: 1.16rem;
}

.markdown > * + * {
  margin-top: 0.9rem;
}

.markdown ul,
.markdown ol {
  padding-left: 1.5em;
}

.markdown blockquote {
  font-size: 1rem;
}

.markdown a {
  border-bottom: 1px solid var(--accent-bg);
  color: var(--link);
}

.markdown a:hover {
  border-bottom-color: var(--link);
}

.markdown details {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--surface);
}

.markdown summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--muted);
}

/* ===== Forms ===== */
.form {
  display: grid;
  gap: 16px;
}

.form .field {
  display: grid;
  gap: 6px;
}

.form .field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.form label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.96rem;
  transition: border-color 0.12s ease;
}

.form textarea {
  height: auto;
  min-height: 120px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.55;
  font-family: var(--mono);
  font-size: 0.92rem;
}

.form textarea.tall {
  min-height: 320px;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-bg);
  outline-offset: 0;
}

.form input:disabled,
.form input[readonly] {
  color: var(--muted);
  background: var(--surface-2);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.field-help {
  font-size: 0.82rem;
  color: var(--muted);
}

.status-line {
  font-size: 0.86rem;
  color: var(--muted);
  min-height: 18px;
}

.status-line.error { color: var(--bad); }
.status-line.success { color: var(--good); }
.status-line.pending { color: var(--ink-soft); }

/* ===== System notice ===== */
.system-notice {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.9rem;
}

.system-notice::before {
  content: "⚠ ";
  color: var(--warn);
  font-weight: 700;
}

.empty {
  padding: 28px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--surface);
}

.empty-state {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 36px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.empty-state svg {
  width: 48px;
  height: 48px;
  color: var(--muted);
}

.empty-state h2 {
  margin: 4px 0 0;
  font-size: 1.1rem;
  color: var(--ink);
}

.empty-state p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.empty-state .btn-row {
  margin-top: 8px;
}

.filter-result-count {
  /* Visually hidden — the same count is already shown in .section-head .meta;
     this node exists only so screen readers announce updates via aria-live. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Profile ===== */
.profile-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin: 8px 0 28px;
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  object-fit: cover;
  cursor: pointer;
}

.profile-avatar.placeholder {
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink-soft);
}

.profile-banner h1 {
  margin: 0;
}

.profile-handle {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 0.92rem;
}

.profile-handle .at { color: var(--syntax); }

/* ===== Admin badge ===== */
.admin-badge {
  display: inline-block;
  vertical-align: -0.15em;
  margin-left: 6px;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
  overflow: visible;
}

.admin-badge-sm { width: 1em; height: 1em; }
.admin-badge-lg {
  /* Profile-page hero variant — fixed pixel size so the badge reads as a
     hero-scale signifier next to the user's name (Issue #91). */
  width: 32px;
  height: 32px;
  margin-left: 0;
  vertical-align: middle;
}

.admin-badge-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 12px;
  cursor: help;
  outline-offset: 2px;
}

.admin-badge-wrap:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  border-radius: 4px;
}

.profile-admin-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent, #67d4ff);
  background: linear-gradient(90deg, rgba(103, 212, 255, 0.12), rgba(110, 231, 163, 0.08));
  border: 1px solid rgba(103, 212, 255, 0.35);
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
}

.profile-admin-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #67d4ff);
  box-shadow: 0 0 8px rgba(103, 212, 255, 0.7);
}

.profile-bio {
  max-width: 680px;
  margin-top: 6px;
  color: var(--ink);
}

.profile-actions {
  margin: 14px 0 0;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 24px 0;
}

.profile-stat {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.profile-stat .key {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.profile-stat .value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ===== Avatar uploader ===== */
.avatar-upload {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 14px;
}

.avatar-upload .preview {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.avatar-upload .preview.placeholder {
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink-soft);
}

.avatar-upload .help {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 0 0 8px;
}

/* ===== Reviews ===== */
.review {
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 10px;
}

.review .body {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.55;
}

.review .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ===== Modal / Dialog (shadcn-aligned) ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 50%, rgba(0, 0, 0, 0.7));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-card {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 51;
  width: min(480px, calc(100vw - 24px));
  max-height: calc(100vh - 60px);
  overflow: auto;
  transform: translate(-50%, -50%);
  padding: 24px;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.modal-card h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.modal-card p {
  margin: 0 0 16px;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.5;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.modal-close:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.handle-field {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.handle-field input {
  flex: 1;
}

.handle-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  padding: 0 10px;
  background: var(--background);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.handle-input-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.handle-input-row .handle-prefix {
  color: var(--muted);
  font-family: ui-monospace, Menlo, monospace;
}

.handle-input-row input {
  border: none;
  background: transparent;
  flex: 1;
  padding: 8px 0;
  outline: none;
  color: inherit;
  font-family: ui-monospace, Menlo, monospace;
}

.handle-input-row input:focus {
  outline: none;
}

.oauth-actions {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  gap: 10px;
}

/* ===== Listing auth gate (signed-out viewers on /swap/:slug) ===== */
.listing-gate {
  display: flex;
  flex-direction: column;
}

.listing-gate-meta {
  margin-top: -0.3em;
  font-size: 0.875rem;
}

.listing-gate-card {
  margin-top: 24px;
  padding: 24px;
  background: var(--popover, var(--surface));
  color: var(--popover-foreground, var(--ink));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md, var(--shadow-lg));
}

.listing-gate-card h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.listing-gate-card p {
  margin: 0 0 14px;
  color: var(--muted-foreground, var(--ink-soft));
  font-size: 0.9375rem;
  line-height: 1.5;
}

.listing-gate-card .oauth-actions {
  margin-top: 4px;
}

.listing-gate-back {
  margin-top: 16px;
  font-size: 0.875rem;
}

.oauth-btn {
  width: 100%;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius);
  gap: 12px;
  font-weight: 600;
  font-size: 0.9375rem;
  border-width: 1px;
}

.oauth-btn .oauth-btn-label {
  flex: 1;
  text-align: center;
}

.oauth-btn .oauth-mark {
  flex: 0 0 20px;
}

/* Google: white card per the sign-in branding guidelines so the four-color
   G stays legible regardless of theme. Foreground #1f1f1f / Roboto-stack
   approximation gives ≥ 7:1 contrast in light + dark. */
.oauth-btn--google {
  background: #ffffff;
  color: #1f1f1f;
  border-color: #dadce0;
}

.oauth-btn--google:hover,
.oauth-btn--google:focus-visible {
  background: #f5f6f8;
  border-color: #1a73e8;
  color: #1f1f1f;
}

/* GitHub: filled charcoal so the white octocat keeps WCAG AA contrast.
   currentColor on the SVG path picks up the foreground automatically. */
.oauth-btn--github {
  background: #24292f;
  color: #ffffff;
  border-color: #24292f;
}

.oauth-btn--github:hover,
.oauth-btn--github:focus-visible {
  background: #1b1f24;
  border-color: #1b1f24;
  color: #ffffff;
}

/* ===== Toast ===== */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  font-weight: 500;
  animation: toast-in 200ms ease-out;
}

.toast-stack .toast {
  position: static;
  pointer-events: auto;
}

/* ===== Messages ===== */
.thread-page {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  margin-top: 14px;
}

.thread-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  border-right: 1px solid var(--border-soft);
  background: var(--surface);
  max-height: 600px;
  overflow-y: auto;
}

.thread-list li {
  margin: 0;
  padding: 0;
}

.thread-list li::marker { display: none; }

.thread-summary {
  display: grid;
  gap: 3px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid transparent;
  cursor: pointer;
}

a.thread-summary {
  border-bottom: 1px solid var(--border-soft);
}

.thread-summary:hover {
  background: var(--surface-2);
}

.thread-summary.active {
  background: var(--surface-2);
  border-left-color: var(--accent);
}

.thread-summary .who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--ink);
}

.thread-summary .who img,
.thread-summary .who .avatar-fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.74rem;
  color: var(--ink);
  flex-shrink: 0;
}

.thread-summary .name {
  font-weight: 600;
}

.thread-summary .handle {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.thread-summary .preview {
  font-size: 0.82rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-summary .stamp {
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--mono);
}

.thread-empty {
  padding: 14px;
  color: var(--muted);
  font-size: 0.86rem;
}

.thread-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}

.thread-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}

.thread-header img,
.thread-header .avatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  font-weight: 700;
  font-family: var(--mono);
}

.thread-header .name {
  font-weight: 700;
  font-size: 0.96rem;
}

.thread-header .name-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.thread-header .name-link:hover {
  color: var(--accent);
}

.thread-header .handle {
  font-size: 0.82rem;
  color: var(--muted);
  font-family: var(--mono);
}

.thread-stream {
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: flex-end;
  min-height: 220px;
  max-height: 560px;
  background: var(--bg);
}

.message {
  width: fit-content;
  max-width: min(560px, 86%);
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.4;
}

.message .body {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message.group-start:not(:first-child) {
  margin-top: 10px;
}

.message.group-end {
  border-bottom-left-radius: 4px;
}

.message .stamp {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0;
}

.message.outgoing {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.message.outgoing.group-end {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}

.message.outgoing .stamp {
  color: color-mix(in srgb, var(--accent-ink) 50%, transparent);
}

.thread-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
}

.thread-compose textarea {
  min-height: 40px;
  max-height: 160px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.94rem;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
}

.thread-compose textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-bg);
}

.thread-no-selection {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

/* ===== Page error ===== */
.error-state {
  padding: 32px;
  border: 1px solid var(--bad);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  color: var(--ink);
}

/* ===== Source toggle (listing) ===== */
.source-toggle {
  margin-top: 22px;
}

.source-toggle summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.84rem;
  list-style: none;
}

.source-toggle summary::-webkit-details-marker {
  display: none;
}

.source-toggle summary:hover {
  border-color: var(--accent);
}

.source-toggle[open] summary {
  border-color: var(--accent);
  color: var(--ink);
}

.source-toggle pre {
  margin-top: 12px;
}

/* ===== Responsive ===== */
@media (max-width: 880px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .split > .split-side {
    position: static;
  }

  .thread-page {
    grid-template-columns: 1fr;
  }

  .thread-list {
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
    max-height: 220px;
  }

  .form .field-row {
    grid-template-columns: 1fr;
  }

  .profile-banner {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none; }
  .toast { animation: none; }
}

@media (max-width: 640px) {
  .search-input {
    order: 99;
    flex-basis: 100%;
    max-width: none;
  }

  .listing-actions .secondary-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .modal-card {
    width: calc(100vw - 20px);
  }
}

/* ===== Inline mod-actions kebab (Issue #93) ===== */
.card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}
.card-wrap > .card {
  flex: 1 1 auto;
  min-width: 0;
}

.mod-kebab-host {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
}

/* Inside the listing actions row the kebab sits inline, not absolute. */
.listing-actions .mod-kebab-host {
  position: static;
  margin-left: auto;
}

.mod-kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.mod-kebab:hover,
.mod-kebab:focus-visible {
  background: var(--surface-2);
  border-color: var(--ink-3, var(--ink));
}

.mod-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 30;
  display: grid;
}

.mod-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: var(--ink);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 0.92rem;
  cursor: pointer;
}

.mod-menu button:hover,
.mod-menu button:focus-visible {
  background: var(--surface-2);
}

.mod-menu button.danger {
  color: var(--bad);
}

.mod-menu button.danger:hover,
.mod-menu button.danger:focus-visible {
  color: var(--danger);
}

.card-mod-flags {
  display: flex;
  gap: 6px;
  /* margin-top: auto pins admin chips (PINNED/Hidden) to the bottom of the
     card so cards with and without flags share the same overall height. */
  margin-top: auto;
}

.card-mod-flag {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
}

.card-mod-flag.muted {
  color: var(--muted);
}

.listing-mod-banner {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 0.92rem;
}

.listing-mod-banner strong + strong {
  margin-left: 12px;
}

/* ===== Utility ===== */
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }

/* ============================================================
 * VISUAL REDESIGN — appended layer (frontend-only).
 * Overrides earlier rules where needed to upgrade the look to a
 * developer-tool aesthetic à la Linear / Vercel / Supabase.
 * No copy, no routes, no logic touched — purely visual.
 * ============================================================ */

/* ---- Refined design tokens (per theme) ---- */
:root,
:root[data-theme="midnight"] {
  --bg: #06080c;
  --surface: #0e1117;
  --surface-2: #161a22;
  --surface-3: #1d2230;
  --border: #232836;
  --border-soft: #181c26;
  --ink: #f5f6f8;
  --ink-soft: #c2c5cf;
  --muted: #7f8392;
  --syntax: #4a4d59;
  --accent: #67d4ff;
  --accent-strong: #9be6ff;
  --accent-bg: rgba(103, 212, 255, 0.10);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --ring: 0 0 0 1px rgba(103, 212, 255, 0.18);
  --grid-line: rgba(255, 255, 255, 0.04);
  --noise-opacity: 0.5;
}

:root[data-theme="purple"] {
  --bg: #08051a;
  --surface: #110b22;
  --surface-2: #1a1230;
  --border: #2b1d44;
  --border-soft: #1a112e;
  --ink: #f4f1fb;
  --ink-soft: #cdc4e0;
  --muted: #897fa3;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 60px -20px rgba(20, 6, 50, 0.7);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -8px rgba(20, 6, 50, 0.5);
  --ring: 0 0 0 1px rgba(181, 140, 255, 0.22);
  --grid-line: rgba(181, 140, 255, 0.05);
}

:root[data-theme="blue"] {
  --bg: #050b18;
  --surface: #0b1424;
  --surface-2: #111d34;
  --border: #213352;
  --border-soft: #16243a;
  --ink: #f0f4fa;
  --ink-soft: #c1ccdc;
  --muted: #758299;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 60px -20px rgba(2, 8, 25, 0.7);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -8px rgba(2, 8, 25, 0.5);
  --ring: 0 0 0 1px rgba(95, 160, 255, 0.22);
  --grid-line: rgba(95, 160, 255, 0.05);
}

:root[data-theme="forest"] {
  --bg: #050e09;
  --surface: #0b1611;
  --surface-2: #11211a;
  --border: #1e3a2a;
  --border-soft: #112218;
  --ink: #f0f4ee;
  --ink-soft: #bcccbb;
  --muted: #777f78;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 60px -20px rgba(2, 16, 8, 0.7);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -8px rgba(2, 16, 8, 0.5);
  --ring: 0 0 0 1px rgba(92, 202, 139, 0.22);
  --grid-line: rgba(92, 202, 139, 0.05);
}

/* Smoother base typography. */
html {
  font-feature-settings: "ss01", "cv11", "cv02";
}

body {
  background:
    radial-gradient(ellipse 1200px 600px at 50% -20%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Ambient grid backdrop — extremely subtle, behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
  opacity: 0.7;
}

#app { position: relative; z-index: 1; }

/* ---- Refined heading typography ---- */
h1 {
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h2 { letter-spacing: -0.025em; }

/* ---- App bar polish ---- */
.appbar {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  padding-top: 12px;
  padding-bottom: 12px;
}
.appbar::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--accent) 35%, transparent) 50%, transparent 100%);
  opacity: 0.5;
  pointer-events: none;
}

.brand {
  letter-spacing: -0.015em;
  font-weight: 600;
}
.brand:hover .brand-mark { transform: scale(1.05); }
.brand-mark { transition: transform 0.2s ease; }

.search-input {
  background-color: color-mix(in srgb, var(--surface) 80%, transparent);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: var(--ring), 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
  background-color: var(--surface);
}

.btn-quiet { font-weight: 500; }

/* ---- Hero — premium developer-tool look ---- */
.hero {
  position: relative;
  padding: 72px 0 40px;
  isolation: isolate;
}

/* Spotlight background — the Aceternity Spotlight feel, but restrained. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% 0 -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 30% 30%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 20%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 70%);
  filter: blur(40px);
  opacity: 0.9;
  animation: spotlight-drift 18s ease-in-out infinite alternate;
}

@keyframes spotlight-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2%, 1%, 0) scale(1.04); }
}

/* Hero dot-grid — premium texture without being busy. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 60% 60% at 30% 40%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 30% 40%, #000 20%, transparent 80%);
  opacity: 0.55;
}

.hero h1 {
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-weight: 800;
  background: linear-gradient(180deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 70%, var(--muted)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 18px;
  text-wrap: nowrap;
}

@media (max-width: 720px) {
  .hero h1 { text-wrap: balance; }
}

.hero .lead {
  font-size: 1.18rem;
  color: var(--ink-soft);
  max-width: 620px;
  line-height: 1.55;
}

/* Flat editorial kicker — replaces the previous pill so the homepage isn't
 * stacked with rounded chips. A short accent rule before the label keeps the
 * Magic UI feel without another pill. */
.hero-eyebrow {
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-strong);
  font-weight: 600;
  margin: 0 0 18px;
  overflow: visible;
}
.hero-eyebrow::before {
  content: "";
  position: static;
  inset: auto;
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent) 0%, transparent 100%);
  animation: none;
  mix-blend-mode: normal;
  pointer-events: none;
}

/* Hero CTA row — visually separated, more breathing room. */
.hero .btn-row {
  margin-top: 26px;
  gap: 12px;
}

/* ---- Filename pill polish ---- */
.filename {
  display: flex;
  width: fit-content;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--border-soft);
  font-size: 0.75rem;
  padding: 5px 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}
.filename .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ---- Buttons — refined primary with shimmer + restrained hover ---- */
.btn,
.btn-primary,
.btn-quiet,
.btn-icon {
  height: 42px;
  padding: 0 18px;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.btn-primary {
  position: relative;
  font-weight: 600;
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent-strong) 80%, var(--accent));
  color: var(--accent-ink);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
    0 6px 20px -6px color-mix(in srgb, var(--accent) 60%, transparent);
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: shiny-sweep 4s ease-in-out infinite;
  pointer-events: none;
}
.btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 0 0 1px color-mix(in srgb, var(--accent-strong) 70%, transparent),
    0 12px 28px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn-primary:active { transform: translateY(0); }

.btn {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

/* ---- Daily-hero card — border beam, premium card treatment ---- */
.daily-hero {
  position: relative;
  margin: 8px 0 36px;
  padding: 28px 32px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background:
    radial-gradient(ellipse 80% 100% at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%),
    color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
}

/* Border beam — Magic UI style, a conic-gradient ring rotating around the card. */
.daily-hero::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0deg,
    transparent 280deg,
    color-mix(in srgb, var(--accent) 90%, white) 320deg,
    color-mix(in srgb, var(--accent-strong) 90%, white) 340deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: beam-rotate 6s linear infinite;
}
@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes beam-rotate {
  to { --beam-angle: 360deg; }
}
/* Fallback for browsers without @property — fade beam in/out instead. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .daily-hero::before { display: none; }
}

/* Subtle inner highlight on top edge. */
.daily-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--accent) 40%, transparent) 50%, transparent 100%);
  pointer-events: none;
}

.daily-hero h2 a {
  background: linear-gradient(180deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 75%, var(--muted)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border-bottom: 0;
}
.daily-hero h2 a:hover {
  background: linear-gradient(180deg, var(--accent-strong) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.daily-hero-eyebrow {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-strong);
  font-weight: 600;
  margin-bottom: 14px;
}
.daily-hero-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 80%, transparent);
  flex: 0 0 auto;
}

/* ---- Section heads — refined hierarchy ---- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 24px 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.section-head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.section-head .meta {
  color: var(--muted);
  font-size: 0.82rem;
  font-family: var(--mono);
}

/* ---- Filter chips — refined feel ---- */
.chip-row {
  margin: 18px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  gap: 6px;
}
.chip-row .label {
  margin-right: 8px;
  margin-left: 4px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip {
  height: 30px;
  padding: 0 12px;
  font-size: 0.84rem;
  border-color: transparent;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.chip:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border);
}
.chip.active {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 4px 14px -4px color-mix(in srgb, var(--accent) 50%, transparent);
}
#sort-select.chip {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M2 4l3 3 3-3' stroke='%237f8392' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
  border: 1px solid var(--border);
}

/* ---- Cards — bento-grid feel, premium hover ---- */
.card-grid {
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.card {
  position: relative;
  padding: 20px 22px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent) 0%, color-mix(in srgb, var(--surface) 80%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 30%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 40%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow:
    var(--shadow-soft),
    0 12px 28px -10px color-mix(in srgb, var(--accent) 30%, transparent);
}
.card:hover::before { opacity: 1; }
.card:hover::after { opacity: 1; }
.card:hover .card-title { color: var(--accent-strong); }

.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  transition: color 0.2s ease;
}

.card-meta-grid .meta-type {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Search input ---- */
.search-input {
  border-radius: 12px;
}
.search-input::placeholder { color: var(--muted); }

/* ---- Theme picker ---- */
.theme-picker > .picker-trigger {
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.theme-picker > .picker-trigger:hover {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.theme-popover {
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  border-color: var(--border);
  padding: 8px;
}
.theme-option {
  border-radius: 8px;
  font-size: 0.88rem;
  padding: 8px 10px;
}
.theme-swatch {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 5%, transparent), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ---- Account pill ---- */
.account-pill {
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.account-pill:hover {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

/* ---- Notification bell ---- */
.notif-bell > .notif-trigger {
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- Vote cluster (listing detail) — refined ---- */
.btn-vote {
  transition: all 0.15s ease;
}
.btn-vote.active.up { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, var(--border)); background: color-mix(in srgb, var(--good) 10%, transparent); }
.btn-vote.active.down { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, var(--border)); background: color-mix(in srgb, var(--bad) 10%, transparent); }

/* ---- Code blocks — terminal window chrome (Magic UI Terminal feel) ---- */
pre {
  position: relative;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 85%, var(--surface));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding: 38px 18px 18px;
}
pre::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: color-mix(in srgb, var(--surface-2) 90%, var(--surface));
  border-bottom: 1px solid var(--border-soft);
  border-radius: 12px 12px 0 0;
}
pre::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow:
    14px 0 0 #febc2e,
    28px 0 0 #28c840;
}
pre.fenced .fence-label {
  top: 6px;
  left: 56px;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.08em;
}

code {
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border-color: var(--border-soft);
}

/* ---- Frontmatter — premium polish ---- */
.frontmatter {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, transparent) 0%, color-mix(in srgb, var(--surface) 75%, transparent) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

/* ---- Footer polish ---- */
.site-footer {
  position: relative;
  margin-top: 80px;
  padding: 32px clamp(16px, 4vw, 36px);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--accent) 30%, transparent) 50%, transparent 100%);
  opacity: 0.5;
  pointer-events: none;
}
.footer-links a {
  font-size: 0.84rem;
  transition: color 0.15s ease;
}

/* ---- Pager ---- */
.pager {
  margin: 24px 0;
}
.pager-arrow {
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- Selection + scrollbar ---- */
::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--ink);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 40%, var(--border));
  background-clip: padding-box;
}

/* ---- Restrained motion: entry animations ---- */
@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero .filename,
.hero-eyebrow,
.hero h1,
.hero .lead,
.hero .btn-row {
  opacity: 0;
  animation: fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.hero .filename       { animation-delay: 0.05s; }
.hero-eyebrow         { animation-delay: 0.12s; }
.hero h1              { animation-delay: 0.18s; }
.hero .lead           { animation-delay: 0.26s; }
.hero .btn-row        { animation-delay: 0.34s; }

.daily-hero {
  opacity: 0;
  animation: fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.42s forwards;
}

.card-grid > * {
  opacity: 0;
  animation: fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.card-grid > *:nth-child(1)  { animation-delay: 0.05s; }
.card-grid > *:nth-child(2)  { animation-delay: 0.10s; }
.card-grid > *:nth-child(3)  { animation-delay: 0.15s; }
.card-grid > *:nth-child(4)  { animation-delay: 0.20s; }
.card-grid > *:nth-child(5)  { animation-delay: 0.25s; }
.card-grid > *:nth-child(6)  { animation-delay: 0.30s; }
.card-grid > *:nth-child(7)  { animation-delay: 0.35s; }
.card-grid > *:nth-child(8)  { animation-delay: 0.40s; }
.card-grid > *:nth-child(n+9) { animation-delay: 0.45s; }

.section-head, .chip-row {
  opacity: 0;
  animation: fade-in 0.4s ease 0.36s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero-eyebrow::before,
  .btn-primary::before,
  .daily-hero::before {
    animation: none !important;
  }
  .hero .filename,
  .hero-eyebrow,
  .hero h1,
  .hero .lead,
  .hero .btn-row,
  .daily-hero,
  .card-grid > *,
  .section-head,
  .chip-row {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ---- Listing detail polish ---- */
.listing-actions {
  margin: 18px 0 24px;
  gap: 10px;
}

/* ---- Markdown body refinements ---- */
.markdown blockquote {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* ---- Mobile polish ---- */
@media (max-width: 640px) {
  .hero { padding: 48px 0 24px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .daily-hero { padding: 22px 20px; border-radius: 14px; }
  .card-grid { gap: 12px; grid-template-columns: 1fr; }
  .card { padding: 18px 18px; }
  .chip-row { padding: 8px; flex-wrap: wrap; }
  .chip-row .label { width: 100%; margin-bottom: 4px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .section-head .meta { font-size: 0.78rem; }
  .appbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .appbar .search-input { display: none; }
}

/* ---- Tablet polish ---- */
@media (min-width: 641px) and (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- OAuth buttons — re-assert brand colors after the redesign layer ----
 * The earlier `.btn { background: color-mix(...) }` rule in this redesign
 * block won the cascade against `.oauth-btn--google { background: #ffffff }`
 * because of source order, leaving the Google button with dark-on-dark text.
 * Re-state the OAuth brand colors here so they win regardless of theme. */
.oauth-btn--google,
.oauth-btn--google:visited {
  background: #ffffff !important;
  color: #1f1f1f !important;
  border-color: #dadce0 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.oauth-btn--google:hover,
.oauth-btn--google:focus-visible {
  background: #f5f6f8 !important;
  border-color: #1a73e8 !important;
  color: #1f1f1f !important;
}
.oauth-btn--github,
.oauth-btn--github:visited {
  background: #24292f !important;
  color: #ffffff !important;
  border-color: #24292f !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.oauth-btn--github:hover,
.oauth-btn--github:focus-visible {
  background: #1b1f24 !important;
  border-color: #1b1f24 !important;
  color: #ffffff !important;
}
/* Brand mark — transparent in the bar, the logo PNG carries its own shape. */
img.brand-mark {
  background: transparent;
  border-radius: 0;
}