@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;1,300&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #0c0c0f;
  --bg2: #111116;
  --bg3: #16161d;
  --line: rgba(255,255,255,0.07);
  --text: #d4d4dc;
  --muted: #5c5c6e;
  --dim: #38383f;
  --accent: #7eb8a4;
  --accent-dim: rgba(126, 184, 164, 0.15);
  /* .topbar-inner height (52px) + its 1px bottom border */
  --topbar-h: 53px;
}

[data-theme="daylight"] {
  --bg: #f0ede8;
  --bg2: #e8e4de;
  --bg3: #dedad3;
  --line: rgba(0,0,0,0.08);
  --text: #1a1a20;
  --muted: #7a7a8a;
  --dim: #b0b0bc;
  --accent: #4a8a74;
  --accent-dim: rgba(74, 138, 116, 0.12);
}

[data-theme="midnight"] {
  --bg: #07090d;
  --bg2: #0c1015;
  --bg3: #11161e;
  --accent: #69b4cc;
  --accent-dim: rgba(105, 180, 204, 0.12);
}

[data-theme="bubblegum"] {
  --bg: #120910;
  --bg2: #190d17;
  --bg3: #20121e;
  --accent: #c47aaa;
  --accent-dim: rgba(196, 122, 170, 0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html.custom-cursor-active,
html.custom-cursor-active *,
html.custom-cursor-active *::before,
html.custom-cursor-active *::after { cursor: none !important; }

/* ── custom cursor base ── */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  will-change: left, top;
}

/* dot */
.custom-cursor.style-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  transition: width 0.1s, height 0.1s;
}
.custom-cursor.style-dot.clicking { width: 7px; height: 7px; }

/* ring */
.custom-cursor.style-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid #fff;
  mix-blend-mode: difference;
  transition: width 0.1s, height 0.1s;
}
.custom-cursor.style-ring.clicking { width: 13px; height: 13px; }

/* glow */
.custom-cursor.style-glow {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 4px var(--accent), 0 0 22px 8px var(--accent);
  opacity: 0.9;
  transition: width 0.1s, height 0.1s, opacity 0.1s;
}
.custom-cursor.style-glow.clicking { width: 5px; height: 5px; opacity: 1; }

/* cross */
.custom-cursor.style-cross {
  width: 20px;
  height: 20px;
  background: transparent;
  mix-blend-mode: difference;
  transition: opacity 0.1s;
}
.custom-cursor.style-cross .cross-arm {
  position: absolute;
  background: #fff;
  border-radius: 1px;
}
.custom-cursor.style-cross .cross-arm.h {
  width: 100%;
  height: 1.5px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.custom-cursor.style-cross .cross-arm.v {
  width: 1.5px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.custom-cursor.style-cross.clicking { opacity: 0.45; }

/* ── cursor style picker swatches ── */
.cursor-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.cursor-swatch {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg2);
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  transition: border-color 140ms;
}
.cursor-swatch.on { border-color: var(--accent); }
.cursor-swatch .cursor-preview {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cursor-swatch .cursor-preview .cp-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text);
}
.cursor-swatch .cursor-preview .cp-ring {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--text);
}
.cursor-swatch .cursor-preview .cp-glow {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 5px 2px var(--accent);
}
.cursor-swatch .cursor-preview .cp-cross {
  position: relative;
  width: 14px; height: 14px;
}
.cursor-swatch .cursor-preview .cp-cross::before,
.cursor-swatch .cursor-preview .cp-cross::after {
  content: '';
  position: absolute;
  background: var(--text);
  border-radius: 1px;
}
.cursor-swatch .cursor-preview .cp-cross::before {
  width: 100%; height: 1.5px;
  top: 50%; left: 0;
  transform: translateY(-50%);
}
.cursor-swatch .cursor-preview .cp-cross::after {
  width: 1.5px; height: 100%;
  left: 50%; top: 0;
  transform: translateX(-50%);
}
.cursor-swatch .cursor-preview .cp-off {
  font-size: 14px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}
.cursor-swatch .name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── ambient background ── */
#root {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#root::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80vw 60vh at 20% 10%, rgba(126,184,164,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60vw 50vh at 85% 80%, rgba(100,120,200,0.04) 0%, transparent 70%),
    var(--bg);
  animation: drift 24s ease-in-out infinite alternate;
}

@keyframes drift {
  0%   { background-position: 0% 0%, 100% 100%; }
  100% { background-position: 8% 12%, 92% 88%; }
}

/* grain overlay */
#root::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── layout ── */
.shell {
  width: min(860px, calc(100% - 40px));
  margin: 0 auto;
}

/* ── nav ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(16px);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 52px;
  width: min(1200px, calc(100% - 40px));
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.brand em {
  font-style: normal;
  color: var(--accent);
}

.brand-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.85;
}

.nav-pill {
  display: inline-flex;
  gap: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-pill button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color 140ms, background 140ms;
}

.nav-pill button:hover { color: var(--text); }
.nav-pill button.active { color: var(--text); background: var(--bg3); }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.status-chip:hover { color: var(--text); }

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.35; }
}

/* ── hero ── */
.hero {
  flex: 1;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 32px;
}

/* Home fits one screen exactly: banner under the topbar, native under the footer,
   hero absorbing whatever is left over, so nothing scrolls. Desktop only. Below
   780px the banner swaps to the 300x250 and the native unit stacks into a tall
   column, which together are far too tall to fit; there the page just scrolls. */
@media (min-width: 780px) {
  main.home {
    height: calc(100dvh - var(--topbar-h));
    overflow: hidden;
  }

  main.home .ad-slot {
    margin: 10px 0;
  }
}

.hero-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.hero h1 {
  font-size: clamp(14px, 2.6vw, 36px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.15;
  font-style: italic;
  white-space: nowrap;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero-sub {
  color: var(--muted);
  font-size: 14px;
  max-width: 380px;
  line-height: 1.6;
}

/* ── launcher ── */
.launcher {
  width: 100%;
  max-width: 560px;
  display: grid;
  grid-template-columns: 1fr auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg2);
  overflow: hidden;
  transition: border-color 200ms;
}

.launcher:focus-within { border-color: rgba(255,255,255,0.15); }

.launcher input {
  border: 0;
  background: transparent;
  outline: none;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  padding: 14px 16px;
  width: 100%;
}

.launcher input::placeholder { color: var(--dim); }

.launcher button {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 0 18px;
  cursor: pointer;
  transition: background 140ms;
  white-space: nowrap;
}

.launcher button:hover { background: var(--accent-dim); }

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── buttons ── */
.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 7px;
  cursor: pointer;
  transition: color 140ms, border-color 140ms, background 140ms;
}

.btn:hover { color: var(--text); border-color: rgba(255,255,255,0.14); }
.btn.accent { color: var(--accent); border-color: var(--accent-dim); }
.btn.accent:hover { background: var(--accent-dim); }

.discord-btn { color: #7289da; border-color: rgba(114,137,218,0.3); text-decoration: none; position: relative; }
.discord-btn:hover { background: rgba(114,137,218,0.1); color: #7289da; }

.discord-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1e2024;
  color: #c9cdd4;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid rgba(114,137,218,0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
}

.discord-btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── status line ── */
.status-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  height: 16px;
}

.status-line.ok { color: var(--accent); }
.status-line.warn { color: #b8956a; }

/* ── quick grid ── */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 40px 0 80px;
}

.quick-card {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 20px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 160ms, border-color 160ms;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quick-card:hover { background: var(--bg2); border-color: rgba(255,255,255,0.12); }

.quick-card .qnum {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--dim);
  margin-bottom: 4px;
}

.quick-card .qtitle {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.quick-card .qsub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.quick-card .qarrow {
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--dim);
  transition: color 160ms;
}

.quick-card:hover .qarrow { color: var(--accent); }

/* ── page hero ── */
.page-hero {
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}

.page-hero h1 {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 300;
  letter-spacing: -0.02em;
  font-style: italic;
  margin-bottom: 8px;
}

.page-hero h1 em { font-style: normal; color: var(--accent); }

.page-hero .lede {
  color: var(--muted);
  font-size: 14px;
  max-width: 480px;
}

/* ── proxy page ── */
.proxy-wrap {
  padding: 0 0 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg2);
  padding: 24px;
}

.panel h3 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.panel .h-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}

.panel-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--dim);
  display: block;
  margin-bottom: 12px;
}

/* recents list */
.recents-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.recents-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.recents-list li:last-child { border-bottom: 0; }

.recents-list button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  transition: color 140ms;
  text-align: left;
}

.recents-list button:hover { color: var(--text); }

.recents-list .t {
  font-size: 11px;
  color: var(--dim);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

/* flow grid */
.flow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── inline links in prose ──
   there was no base anchor rule, so these fell back to the browser's default
   blue. derived from --accent so they track whichever theme is active. */
.panel a:not(.btn),
.h-sub a,
.lede a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  /* dropped by older engines, which just leaves a solid accent underline */
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  /* only the underline animates on hover. transitioning `color` here would pin
     it to its first resolved value, so theme switches wouldn't take effect. */
  transition: text-decoration-color 160ms;
}
.panel a:not(.btn):hover,
.h-sub a:hover,
.lede a:hover {
  text-decoration-color: currentColor;
}

.stack-list { list-style: none; display: flex; flex-direction: column; }
.stack-list li {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.stack-list li:last-child { border-bottom: 0; }
.stack-list .k { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.stack-list .v { color: var(--text); }
.stack-list .stat { color: var(--accent); font-size: 10px; }

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: var(--text); }

/* ── catalog ── */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.toolbar-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--dim);
}

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 140ms;
}

.chip:hover { color: var(--text); }
.chip.active { color: var(--bg); background: var(--accent); border-color: var(--accent); }

.search-wrap { position: relative; }

.search-input {
  width: 220px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg2);
  color: var(--text);
  padding: 0 12px 0 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  outline: none;
  transition: border-color 160ms;
}

.search-input:focus { border-color: rgba(255,255,255,0.15); }
.search-input::placeholder { color: var(--dim); }

.search-wrap::before {
  content: '⌕';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dim);
  font-size: 13px;
  pointer-events: none;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding-bottom: 80px;
}

.catalog-card {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 160ms, border-color 160ms, transform 160ms;
}

.catalog-card:hover {
  background: var(--bg2);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-2px);
}

.catalog-card .thumb {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.catalog-card .thumb .catalog-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

.catalog-card .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.catalog-card .name {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.catalog-card .id-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--dim);
}

.add-card .thumb { border: 1px dashed var(--line); background: transparent; }
.add-card .thumb::before {
  content: '+';
  font-size: 28px;
  font-weight: 300;
  color: var(--dim);
}

/* ── launch modal ── */
.modal-bg {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal {
  width: min(460px, 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg2);
  padding: 28px;
}

.modal-head {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.modal-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.modal-meta .kind {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.modal-meta h3 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.modal p {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
}

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

.add-own-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.add-own-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
  text-transform: lowercase;
}

.add-own-fields label em {
  font-style: normal;
  opacity: 0.5;
}

.add-own-input {
  background: var(--surface, #111);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.add-own-input:focus { border-color: var(--accent, #7fff7f); }

.add-own-err {
  font-size: 12px;
  color: #ff6b6b;
  margin: 0;
}

/* tinf0il TV */
.tv-embed-page {
  flex: 1;
  min-height: calc(100vh - 53px);
  display: flex;
  position: relative;
  background: var(--bg);
}

.tv-app-frame-wrap {
  flex: 1;
  min-height: calc(100vh - 53px);
  background: var(--bg);
}

html.cursor-in-iframe .custom-cursor { opacity: 0; pointer-events: none; }
html.cursor-in-iframe,
html.cursor-in-iframe * { cursor: auto !important; }

.tv-app-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 53px);
  border: 0;
  background: var(--bg);
}

.tv-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 10;
}

.tv-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.tv-loading-logo {
  width: 52px;
  height: 52px;
  opacity: 0.9;
  animation: tv-pulse 2s ease-in-out infinite;
}

@keyframes tv-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.06); }
}

.tv-loading-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.tv-loading-label em {
  color: var(--accent);
  font-style: normal;
}

.tv-loading-bar {
  width: 120px;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.tv-loading-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  animation: tv-bar 1.6s ease-in-out infinite;
  transform-origin: left;
}

@keyframes tv-bar {
  0%   { transform: scaleX(0)   translateX(0%); }
  50%  { transform: scaleX(0.6) translateX(40%); }
  100% { transform: scaleX(0)   translateX(200%); }
}

.tv-err {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  max-width: 260px;
  line-height: 1.6;
}

.tv-loading-notice {
  font-size: 11px;
  color: #f59e0b99;
  text-align: center;
  max-width: 300px;
  line-height: 1.6;
  margin-top: 10px;
}

/* ── settings ── */
.settings-wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  padding-bottom: 80px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.field-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
}

.field input {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg3);
  color: var(--text);
  padding: 0 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  outline: none;
  transition: border-color 160ms;
}

.field input:focus { border-color: rgba(255,255,255,0.2); }

.cloak-browser-mock {
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  margin-top: 4px;
}

.cloak-tab-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 8px 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
}

.cloak-tab-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 5px;
  margin: 0;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: color-mix(in oklab, var(--bg3) 85%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.cloak-tab-pick img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.cloak-tab-pick.on {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--line);
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  padding-bottom: 6px;
  box-shadow: 0 1px 0 var(--bg3);
}

.cloak-import-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.cloak-import-row input {
  flex: 1;
  min-width: 0;
}

.cloak-import-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.cloak-import-err {
  margin: 6px 0 0;
  font-size: 12px;
  color: #c77;
}

.cloak-preview {
  border: none;
  border-radius: 0;
  overflow: hidden;
  margin-top: 0;
}

.cloak-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg3);
  border-bottom: 1px solid var(--line);
  width: fit-content;
  max-width: 100%;
}

.cloak-tab img { width: 14px; height: 14px; object-fit: contain; }
.cloak-tab .ttl { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.cloak-tab .x { color: var(--dim); font-size: 13px; margin-left: 8px; }

.cloak-bar {
  display: flex;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.theme-swatch {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 8px;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: border-color 140ms;
}

.theme-swatch.on { border-color: var(--accent); }

.theme-swatch .pal {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
}

.theme-swatch .pal i {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.theme-swatch .name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
}

.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.toggle:last-child { border-bottom: 1px solid var(--line); }

.toggle .lab { display: flex; flex-direction: column; gap: 2px; }
.toggle .lab strong { font-size: 13px; font-weight: 500; }
.toggle .lab span { font-size: 12px; color: var(--muted); }

.tg-switch {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg3);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms, border-color 160ms;
}

.tg-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: left 160ms, background 160ms;
}

.tg-switch.on { background: var(--accent-dim); border-color: var(--accent); }
.tg-switch.on::after { left: 18px; background: var(--accent); }

.panic-key-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  min-width: 120px;
  text-align: center;
}
.panic-key-btn.listening {
  border-color: var(--accent);
  color: var(--accent);
  animation: breathe 1s ease-in-out infinite;
}

/* ── about ── */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  padding-bottom: 80px;
}

.tile-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.tile {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg3);
}

.tile .num {
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.tile .lab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 4px;
}

/* ── footer ── */
.footer {
  border-top: 1px solid var(--line);
  padding: 24px 0 32px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.footer .small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--dim);
  text-decoration: none;
}

.footer a.small:hover {
  color: var(--text);
}

/* ── floating logo ── */
.floating-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 96px;
  height: 96px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 15;
  will-change: transform;
  filter: drop-shadow(0 0 12px rgba(126, 184, 164, 0.5))
          drop-shadow(0 0 28px rgba(126, 184, 164, 0.2));
}

/* ── animation keyframes ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── hero entrance (staggered) ── */
.hero-label   { animation: fadeIn   0.6s ease       both; }
.hero h1      { animation: fadeInUp 0.8s ease 0.1s  both; }
.hero-sub     { animation: fadeInUp 0.8s ease 0.22s both; }
.launcher     { animation: fadeInUp 0.8s ease 0.34s both; }
.hero-actions { animation: fadeIn   0.8s ease 0.46s both; }

/* ── quick-card scroll-in (staggered after hero) ── */
.quick-grid .quick-card {
  opacity: 0;
  animation: fadeInUp 0.55s ease forwards;
}
.quick-grid .quick-card:nth-child(1) { animation-delay: 0.58s; }
.quick-grid .quick-card:nth-child(2) { animation-delay: 0.72s; }
.quick-grid .quick-card:nth-child(3) { animation-delay: 0.86s; }

/* ── respect system reduce-motion preference ── */
@media (prefers-reduced-motion: reduce) {
  .hero-label, .hero h1, .hero-sub, .launcher, .hero-actions,
  .quick-grid .quick-card {
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 920px) {
  .tv-hero,
  .tv-stage {
    grid-template-columns: 1fr;
  }

  .tv-mark {
    width: 92px;
    height: 92px;
  }

  .tv-screen {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .tv-mood-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── reduce motion ── */
[data-reduce-motion] .floating-logo { display: none !important; }
[data-reduce-motion] *,
[data-reduce-motion] *::before,
[data-reduce-motion] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ── big text ── */
[data-big-text] body { font-size: 18px; }
[data-big-text] h1 { font-size: clamp(2.6rem, 7vw, 5.5rem) !important; }
[data-big-text] h2, [data-big-text] h3 { font-size: 22px !important; }
[data-big-text] p, [data-big-text] .lede, [data-big-text] .h-sub { font-size: 17px !important; }
[data-big-text] strong, [data-big-text] .toggle strong { font-size: 16px !important; }
[data-big-text] span, [data-big-text] .toggle span { font-size: 14px !important; }
[data-big-text] button, [data-big-text] .btn, [data-big-text] input { font-size: 15px !important; }
[data-big-text] .nav-pill button { font-size: 13px !important; }

/* ── responsive ── */
@media (max-width: 720px) {
  .settings-wrap, .about-grid, .flow-grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: 1fr; }
  .tile-row { grid-template-columns: 1fr 1fr; }
  .nav-pill { display: none; }
  .search-input { width: 160px; }
  .toolbar { flex-direction: column; align-items: flex-start; }
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .tv-hero { gap: 16px; }
  .tv-mark { display: none; }
  .tv-copy, .tv-screen { padding: 20px; }
  .tv-mood-grid { grid-template-columns: 1fr 1fr; }
  .tv-now { align-items: flex-start; flex-direction: column; }
}

/* ── account button (topbar) ── */
.account-btn {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg2);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 10px;
  cursor: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 150ms, background 150ms;
  white-space: nowrap;
  flex-shrink: 0;
}
.account-btn:hover { border-color: var(--accent); background: var(--bg3); }
.account-btn .acct-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.account-btn .acct-initial {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  flex-shrink: 0;
}

/* ── auth modal ── */
.auth-modal { max-width: 360px; width: 100%; }
.auth-fields { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; }
.auth-input {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
  transition: border-color 150ms;
}
.auth-input:focus { border-color: var(--accent); }
/* .modal p (0,1,1) outweighs a bare .auth-err, which left errors in muted grey */
.modal .auth-err,
.auth-err { font-size: 12px; color: #e07070; margin: 2px 0 0; }
.modal .auth-notice,
.auth-notice { font-size: 12px; color: var(--accent); margin: 2px 0 0; line-height: 1.5; }
.modal .auth-hint,
.auth-hint { font-size: 12px; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }

.verify-notice {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg3);
}
.auth-switch {
  font-size: 12px; color: var(--muted);
  text-align: center; margin-top: 14px;
}
.auth-switch button {
  appearance: none; background: none; border: none;
  color: var(--accent); font-size: 12px;
  text-decoration: underline; padding: 0;
}

/* ── account settings panel ── */
.account-info {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.account-info .acct-avatar-lg {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.account-info .acct-initial-lg {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600;
  flex-shrink: 0;
}
.account-info .acct-name { font-size: 14px; font-weight: 500; }
.account-info .acct-email { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sync-status {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
  margin-top: 12px;
}
.sync-status.ok { color: var(--accent); }

/* ── catalog favorites ── */
.catalog-card { position: relative; }
.fav-btn {
  position: absolute;
  top: 12px; right: 12px;
  appearance: none;
  background: rgba(0,0,0,0.45);
  border: none;
  border-radius: 50%;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 150ms, color 150ms;
  z-index: 2;
}
.catalog-card:hover .fav-btn { opacity: 1; }
.fav-btn.active { opacity: 1; color: #e07090; }
.fav-btn:hover { color: #e07090; }

/* ── ads ── */
/* No reserved min-height: a blocked unit should collapse to nothing rather than
   leave a hole, since a good share of this traffic runs an adblocker. */
.ad-slot {
  margin: 28px 0;
}
.ad-slot > div:empty { display: none; }
/* Centered rather than flexed: the native unit's container needs the full shell
   width, so only the fixed-size banner iframe gets centered. */
.ad-frame {
  border: 0;
  display: block;
  margin: 0 auto;
  max-width: 100%;
  color-scheme: light;
}

/* Rails centred in the gutters either side of the 860px shell. Each gutter is
   (100% - 860px) / 2, so centring a 160px rail puts it (gutter - 160px) / 2 from
   the screen edge, which reduces to 25% - 295px, mirrored left and right. Fixed
   rather than sticky so they hold position on pages long enough to scroll.
   Rendering is gated in JS at 1240px, see SideRails. */
.side-rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  z-index: 5;
}

.side-rail--left {
  left: calc(25% - 295px);
}

.side-rail--right {
  right: calc(25% - 295px);
}