/* ============================================================
   PRISM — glossy, privacy-first toolbox
   Design system: dark-glassmorphism with light variant
   ============================================================ */

/* ---- Fonts (self-hosted, swap, non-blocking) ---- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/assets/fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Geist';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/assets/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/geistmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --font-display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --r-card: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-pill: 999px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* ---- DARK (default) ---- */
:root, [data-theme="dark"] {
  --bg-0: #080b16;
  --bg-1: #0c1122;

  --orb-indigo: #6366f1;
  --orb-cyan:   #22d3ee;
  --orb-violet: #8b5cf6;

  --glass-fill: rgba(255,255,255,.055);
  --glass-fill-2: rgba(255,255,255,.085);
  --glass-border: rgba(255,255,255,.12);
  --glass-border-hi: rgba(255,255,255,.22);
  --glass-blur: 16px;

  /* barrier film so text always clears WCAG over any orb */
  --film: rgba(10,14,28,.55);
  --film-strong: rgba(8,11,22,.72);

  --text: #f3f6ff;
  --text-2: #aeb9d6;
  --text-3: #7c87a6;

  --accent: #8b93ff;
  --accent-2: #38d9f0;
  --accent-grad: linear-gradient(135deg, #6f78ff 0%, #22d3ee 100%);
  --on-accent: #07101f;

  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #fb7185;

  --shadow-card: 0 10px 34px rgba(2,5,15,.46);
  --hl-top: inset 0 1px 0 rgba(255,255,255,.28);
  --hl-bottom: inset 0 -1px 0 rgba(0,0,0,.30);
  --field-bg: rgba(255,255,255,.04);
  --field-border: rgba(255,255,255,.13);
}

/* ---- LIGHT ---- */
[data-theme="light"] {
  --bg-0: #e8edf8;
  --bg-1: #dde4f3;

  --orb-indigo: #8b93ff;
  --orb-cyan:   #5ad6e8;
  --orb-violet: #b29bff;

  --glass-fill: rgba(255,255,255,.55);
  --glass-fill-2: rgba(255,255,255,.7);
  --glass-border: rgba(255,255,255,.7);
  --glass-border-hi: rgba(255,255,255,.95);
  --glass-blur: 18px;

  --film: rgba(255,255,255,.62);
  --film-strong: rgba(255,255,255,.82);

  --text: #131a2e;
  --text-2: #3f4a64;
  --text-3: #5d6884;

  --accent: #4f46e5;
  --accent-2: #0891b2;
  --accent-grad: linear-gradient(135deg, #4f46e5 0%, #0891b2 100%);
  --on-accent: #ffffff;

  --ok: #059669;
  --warn: #b45309;
  --bad: #e11d48;

  --shadow-card: 0 12px 32px rgba(40,55,95,.16);
  --hl-top: inset 0 1px 0 rgba(255,255,255,.9);
  --hl-bottom: inset 0 -1px 0 rgba(40,55,95,.06);
  --field-bg: rgba(255,255,255,.55);
  --field-border: rgba(40,55,95,.16);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* author display rules must not override the hidden attribute */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,h2,h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

::selection { background: color-mix(in oklab, var(--accent) 40%, transparent); color: var(--text); }

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; }

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

/* ============================================================
   BACKGROUND — orbs + grain
   ============================================================ */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background:
  radial-gradient(120% 120% at 50% -10%, var(--bg-1), var(--bg-0) 60%); }

.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .55;
  will-change: transform;
}
.orb--indigo { width: 52vw; height: 52vw; left: -12vw; top: -14vw;
  background: radial-gradient(circle, var(--orb-indigo), transparent 68%);
  animation: drift1 26s var(--ease-soft) infinite alternate; }
.orb--cyan { width: 46vw; height: 46vw; right: -10vw; top: 6vh;
  background: radial-gradient(circle, var(--orb-cyan), transparent 68%);
  opacity: .42; animation: drift2 32s var(--ease-soft) infinite alternate; }
.orb--violet { width: 50vw; height: 50vw; left: 28vw; bottom: -24vw;
  background: radial-gradient(circle, var(--orb-violet), transparent 68%);
  opacity: .4; animation: drift3 38s var(--ease-soft) infinite alternate; }

@keyframes drift1 { to { transform: translate3d(8vw, 6vh, 0) scale(1.1); } }
@keyframes drift2 { to { transform: translate3d(-7vw, 8vh, 0) scale(1.08); } }
@keyframes drift3 { to { transform: translate3d(5vw, -6vh, 0) scale(1.12); } }

.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   GLASS — the load-bearing material
   ============================================================ */
.glass {
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(155%) brightness(1.06);
  backdrop-filter: blur(var(--glass-blur)) saturate(155%) brightness(1.06);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card), var(--hl-top), var(--hl-bottom);
}
/* rim light: brighter top-left edge */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: linear-gradient(135deg, var(--glass-border-hi), transparent 40%, transparent 65%, rgba(255,255,255,.06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .9;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--film-strong); }
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 12px clamp(16px, 4vw, 40px);
  border-left: 0; border-right: 0; border-top: 0;
  border-radius: 0;
}
.topbar.glass::after { border-radius: 0; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand__mark { display: grid; place-items: center; filter: drop-shadow(0 2px 6px rgba(34,211,238,.4)); }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; }

.cmd-trigger {
  flex: 1; max-width: 460px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer;
  background: var(--field-bg); color: var(--text-3);
  border: 1px solid var(--field-border); border-radius: var(--r-pill);
  transition: border-color .2s, color .2s, background .2s;
}
.cmd-trigger:hover { border-color: var(--glass-border-hi); color: var(--text-2); }
.cmd-trigger__icon { font-size: 1.1rem; }
.cmd-trigger__text { flex: 1; text-align: left; font-size: .92rem; }
.cmd-trigger__kbd, kbd {
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-2);
  background: var(--glass-fill-2); border: 1px solid var(--field-border);
  border-radius: 7px; padding: 3px 7px; white-space: nowrap;
}
.cmd-trigger__kbd .mod { opacity: .85; }

.topbar__actions { display: flex; align-items: center; gap: 10px; }
.privacy-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ok) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--ok) 35%, transparent);
  color: var(--text); font-size: .8rem; font-weight: 600;
}
.privacy-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 70%, transparent); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--ok) 60%,transparent);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-md); cursor: pointer; color: var(--text-2);
  background: var(--field-bg); border: 1px solid var(--field-border);
  transition: color .2s, border-color .2s, transform .15s, background .2s;
}
.icon-btn:hover { color: var(--text); border-color: var(--glass-border-hi); transform: translateY(-1px); }

/* ============================================================
   LAYOUT
   ============================================================ */
main { max-width: var(--maxw); margin: 0 auto; padding: clamp(28px,5vw,64px) clamp(16px,4vw,40px) 96px; }

/* ---- HERO ---- */
.hero { text-align: center; padding: clamp(24px,6vw,64px) 0 clamp(28px,5vw,56px); }
.hero__eyebrow { text-transform: uppercase; letter-spacing: .28em; font-size: .74rem; font-weight: 600;
  color: var(--text-3); margin: 0 0 16px; }
.hero__title { font-size: clamp(2.1rem, 6vw, 4rem); font-weight: 800; margin: 0 auto; max-width: 16ch; }
.hero__grad { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { max-width: 60ch; margin: 22px auto 0; color: var(--text-2); font-size: clamp(1rem,2.2vw,1.12rem); }
.hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 12px 20px; border-radius: var(--r-pill); font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; transition: transform .15s var(--ease), box-shadow .2s, filter .2s, background .2s;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--accent-grad); color: var(--on-accent);
  box-shadow: 0 8px 26px color-mix(in oklab, var(--accent) 45%, transparent), var(--hl-top); }
.btn--primary:hover { filter: brightness(1.07); }
.btn--primary kbd { background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.25); color: inherit; }
.btn--ghost { background: var(--field-bg); color: var(--text); border-color: var(--field-border); }
.btn--ghost:hover { border-color: var(--glass-border-hi); }

/* ============================================================
   HOME GRID
   ============================================================ */
.cat { margin-top: clamp(28px,4vw,44px); }
.cat__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; padding-left: 4px; }
.cat__title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.cat__count { font-size: .8rem; color: var(--text-3); font-family: var(--font-mono); }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }

.card {
  border-radius: var(--r-card); padding: 20px; cursor: pointer; text-align: left;
  color: var(--text); display: flex; flex-direction: column; gap: 10px;
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
  animation: rise .55s var(--ease) backwards;
}
.card:hover { transform: translateY(-4px); border-color: var(--glass-border-hi); }
.card:hover .card__icon { transform: scale(1.06) rotate(-3deg); }
.card__icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--accent-grad); color: var(--on-accent);
  box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 40%, transparent), var(--hl-top);
  transition: transform .22s var(--ease);
}
.card__icon svg { width: 24px; height: 24px; }
.card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; }
.card__desc { color: var(--text-2); font-size: .88rem; line-height: 1.45; }
.card__cat { margin-top: auto; font-size: .72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .12em; }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ============================================================
   TOOL VIEW
   ============================================================ */
.tool { animation: fade .35s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

.tool__back {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px;
  color: var(--text-2); font-weight: 600; background: var(--field-bg);
  border: 1px solid var(--field-border); padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer;
  transition: color .2s, border-color .2s, transform .15s;
}
.tool__back:hover { color: var(--text); border-color: var(--glass-border-hi); transform: translateX(-2px); }

.tool__head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.tool__icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: var(--accent-grad); color: var(--on-accent); box-shadow: 0 8px 22px color-mix(in oklab,var(--accent) 40%,transparent), var(--hl-top); flex: none; }
.tool__icon svg { width: 28px; height: 28px; }
.tool__title { font-size: clamp(1.5rem,4vw,2rem); }
.tool__desc { color: var(--text-2); margin: 4px 0 0; }

.panel { border-radius: var(--r-card); padding: clamp(18px,3vw,28px); margin-top: 22px; }
.panel + .panel { margin-top: 16px; }

/* form atoms */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field > label, .lbl { font-size: .85rem; font-weight: 600; color: var(--text-2); }
.hint { font-size: .8rem; color: var(--text-3); }
input[type=text], input[type=number], input[type=password], input[type=search], textarea, select {
  width: 100%; font-family: var(--font-body); font-size: .98rem; color: var(--text);
  background: var(--field-bg); border: 1px solid var(--field-border);
  border-radius: var(--r-md); padding: 11px 13px; transition: border-color .18s, box-shadow .18s, background .18s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-2);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-2) 28%, transparent); }
textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.mono, textarea.mono, input.mono { font-family: var(--font-mono); font-size: .9rem; }
.tnum { font-variant-numeric: tabular-nums; }
select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%238a93b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px){ .grid2 { grid-template-columns: 1fr; } }

.btn-sm { padding: 9px 15px; border-radius: var(--r-md); font-size: .88rem; font-weight: 600; cursor: pointer;
  background: var(--field-bg); color: var(--text); border: 1px solid var(--field-border);
  transition: border-color .2s, transform .15s, background .2s; display: inline-flex; align-items: center; gap: 7px; }
.btn-sm:hover { border-color: var(--glass-border-hi); transform: translateY(-1px); }
.btn-sm--accent { background: var(--accent-grad); color: var(--on-accent); border-color: transparent;
  box-shadow: 0 6px 16px color-mix(in oklab,var(--accent) 35%,transparent); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.result { background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--r-md);
  padding: 14px; font-family: var(--font-mono); font-size: .92rem; word-break: break-word; white-space: pre-wrap;
  position: relative; min-height: 22px; }
.result--lg { font-size: 1.4rem; }

.copy-btn { position: absolute; top: 8px; right: 8px; }

/* segmented control */
.seg { display: inline-flex; background: var(--field-bg); border: 1px solid var(--field-border);
  border-radius: var(--r-pill); padding: 4px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--text-2); padding: 7px 14px; border-radius: var(--r-pill);
  cursor: pointer; font-weight: 600; font-size: .86rem; transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--accent-grad); color: var(--on-accent); }

/* range */
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background: var(--field-border); outline: none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background: var(--accent-grad); cursor:pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4), var(--hl-top); border: 2px solid rgba(255,255,255,.5); }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border:2px solid #fff; border-radius:50%; background:var(--accent); cursor:pointer; }

/* checkboxes as chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: var(--r-pill);
  background: var(--field-bg); border: 1px solid var(--field-border); cursor: pointer; font-size: .88rem; user-select: none;
  transition: border-color .2s, background .2s; }
.chip:has(input:checked) { border-color: var(--accent-2); background: color-mix(in oklab, var(--accent-2) 14%, transparent); }
.chip input { accent-color: var(--accent); width: 16px; height: 16px; }

/* status badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 600; }
.badge--ok { background: color-mix(in oklab,var(--ok) 18%,transparent); color: var(--ok); border: 1px solid color-mix(in oklab,var(--ok) 40%,transparent); }
.badge--bad { background: color-mix(in oklab,var(--bad) 18%,transparent); color: var(--bad); border: 1px solid color-mix(in oklab,var(--bad) 40%,transparent); }
.badge--warn { background: color-mix(in oklab,var(--warn) 18%,transparent); color: var(--warn); border: 1px solid color-mix(in oklab,var(--warn) 40%,transparent); }

.meter { height: 8px; border-radius: 999px; background: var(--field-border); overflow: hidden; }
.meter__fill { height: 100%; border-radius: 999px; transition: width .3s var(--ease), background .3s; }

.stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--field-bg); border: 1px solid var(--field-border); }
.stat__num { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat__lbl { font-size: .78rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); }

table.amort { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .86rem; }
table.amort th, table.amort td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--field-border); }
table.amort th:first-child, table.amort td:first-child { text-align: left; }
table.amort th { color: var(--text-3); font-weight: 600; }

.swatch { width: 100%; height: 96px; border-radius: var(--r-md); border: 1px solid var(--glass-border); }
.color-out { display:flex; flex-direction:column; gap:8px; }
.color-out code { font-family: var(--font-mono); }

.split { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 760px){ .split { grid-template-columns: 1fr; } }
.md-preview { background: var(--field-bg); border:1px solid var(--field-border); border-radius: var(--r-md); padding:16px; overflow:auto; }
.md-preview h1,.md-preview h2,.md-preview h3{ font-family: var(--font-display); margin: .6em 0 .3em; }
.md-preview h1{ font-size:1.6rem; } .md-preview h2{ font-size:1.3rem; } .md-preview h3{ font-size:1.1rem; }
.md-preview p{ margin:.5em 0; } .md-preview code{ font-family:var(--font-mono); background:var(--glass-fill-2); padding:2px 6px; border-radius:6px; font-size:.88em; }
.md-preview pre{ background:var(--bg-1); padding:14px; border-radius:var(--r-md); overflow:auto; border:1px solid var(--field-border); }
.md-preview pre code{ background:none; padding:0; }
.md-preview blockquote{ border-left:3px solid var(--accent); margin:.6em 0; padding:.2em 0 .2em 14px; color:var(--text-2); }
.md-preview ul,.md-preview ol{ padding-left:22px; } .md-preview a{ color:var(--accent); }
.md-preview table{ border-collapse:collapse; } .md-preview th,.md-preview td{ border:1px solid var(--field-border); padding:6px 10px; }
.md-preview hr{ border:0; border-top:1px solid var(--field-border); margin:1em 0; }

.diff-out { font-family: var(--font-mono); font-size: .86rem; white-space: pre-wrap; word-break: break-word; }
.diff-add { background: color-mix(in oklab,var(--ok) 22%,transparent); display:block; }
.diff-del { background: color-mix(in oklab,var(--bad) 22%,transparent); display:block; }
.diff-eq { display:block; color: var(--text-2); }
.diff-add::before{ content:"+ "; color:var(--ok); } .diff-del::before{ content:"- "; color:var(--bad); } .diff-eq::before{ content:"  "; }

.qr-canvas { background:#fff; padding:16px; border-radius:var(--r-md); display:inline-block; }
.qr-canvas img, .qr-canvas canvas { display:block; image-rendering: pixelated; width: 220px; height: 220px; }

.timer-display { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(3rem,12vw,5.5rem);
  font-weight: 600; text-align: center; letter-spacing: -.02em; line-height: 1; }
.timer-phase { text-align:center; color: var(--text-2); text-transform: uppercase; letter-spacing:.2em; font-size:.85rem; margin-bottom: 8px; }

/* ============================================================
   COMMAND PALETTE
   ============================================================ */
.palette-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(4,6,14,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .2s; }
.palette { position: fixed; z-index: 91; inset: 0; display: grid; place-items: start center;
  padding-top: min(16vh, 130px); pointer-events: none; }
.palette__box { pointer-events: auto; width: min(620px, 92vw); border-radius: 18px; overflow: hidden;
  animation: pop .22s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(-8px); } }
.palette__inputwrap { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--glass-border); }
.palette__icon { font-size: 1.3rem; color: var(--text-3); }
.palette__input { border: 0; background: transparent; font-size: 1.1rem; padding: 0; }
.palette__input:focus { outline: none; box-shadow: none; }
.palette__esc { align-self: center; }
.palette__list { list-style: none; margin: 0; padding: 8px; max-height: min(52vh, 420px); overflow-y: auto; }
.palette__item { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: var(--r-md); cursor: pointer; }
.palette__item[aria-selected="true"] { background: color-mix(in oklab, var(--accent-2) 16%, transparent); }
.palette__item-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-grad); color: var(--on-accent); flex: none; }
.palette__item-icon svg { width: 18px; height: 18px; }
.palette__item-name { font-weight: 600; }
.palette__item-desc { font-size: .82rem; color: var(--text-3); }
.palette__item-cat { margin-left: auto; font-size: .72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; }
.palette__empty { padding: 22px; text-align: center; color: var(--text-3); }

/* ============================================================
   TOASTS
   ============================================================ */
.toast-region { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 120;
  display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: var(--r-pill);
  background: var(--film-strong); border: 1px solid var(--glass-border-hi); color: var(--text); font-weight: 600; font-size: .9rem;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-card);
  animation: toastin .3s var(--ease); }
.toast__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.toast--err .toast__dot { background: var(--bad); }
@keyframes toastin { from { opacity: 0; transform: translateY(14px); } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { max-width: var(--maxw); margin: 0 auto 28px; border-radius: var(--r-card);
  padding: clamp(22px,4vw,34px); display: grid; gap: 18px; grid-template-columns: 2fr 1fr;
  align-items: start; }
@media (max-width: 640px){ .footer { grid-template-columns: 1fr; } }
.footer__brand { font-family: var(--font-display); font-size: 1.2rem; }
.footer__col p { color: var(--text-2); margin: 8px 0 0; max-width: 50ch; font-size: .92rem; }
.footer__col--links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.footer__legal { grid-column: 1 / -1; border-top: 1px solid var(--glass-border); padding-top: 16px; margin: 0;
  color: var(--text-3); font-size: .85rem; display: flex; align-items: center; gap: 8px; }
.footer__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 2.4s infinite; }
.linklike { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.linklike:hover { text-decoration: underline; }

/* ============================================================
   MOTION / TRANSPARENCY PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
  .orb { animation: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .glass, .toast { -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: var(--film-strong) !important; }
  .palette-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(4,6,14,.8); }
  .orb { opacity: .25; }
}

/* utility */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--text-3); }
.center { text-align: center; }
.mt { margin-top: 16px; } .mt-sm { margin-top: 8px; }
.wrap-scroll { overflow-x: auto; }