/* ─────────────────────────────────────────────────────────────
   Capraseo — shared layout
   Loaded by every page. Page-specific styles live in css/<page>.css.
   ───────────────────────────────────────────────────────────── */

[hidden] { display: none !important; }

/* Pages marked data-auth="required" must not flash their UI to a
   signed-out visitor before auth.js redirects them to /login_signup/.
   auth.js adds .auth-ready once the session check resolves (or
   immediately, when the optimistic html.cs-known hint is set). */
body[data-auth="required"]:not(.auth-ready) { visibility: hidden; }

:root {
  color-scheme: dark;     /* renders native form controls (select, scrollbars) in dark theme */
  --bg: #0a0a0b;
  --panel: #121214;
  --panel-2: #17171a;
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.10);
  --text: #e8e8ea;
  --muted: #8a8a92;
  --muted-2: #5f5f67;
  --accent: #22c55e;
  --danger: #ff7a7a;
  --gold: #e6c47a;
  --glow: rgba(255, 255, 255, 0.04);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: linear-gradient(180deg, #0c0c0e 0%, #0a0a0b 100%);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow: hidden;
}

/* ── App shell ─────────────────────────────────────────────── */
.app {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  opacity: 0;
  animation: fadeIn 0.7s ease-out forwards;
}

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

/* ── Sidebar ───────────────────────────────────────────────── */
/* Apple-grade material: translucent base with backdrop blur (effective
   only where the page background contains tone), a subtle vertical
   luminance gradient overlay, a soft right-edge highlight, and an
   inner top highlight for "lit-from-above" depth. */
.sidebar {
  position: relative;
  /* Above the content layer: .stage is not a stacking context, so .center
     (z-index:3) competes with the sidebar directly in .app and — being
     later in the DOM — would paint page cards over the sidebar's popovers
     (focus switcher / account menu). Lift the whole sidebar above it;
     full-screen modals (z-index:100) still cover it. */
  z-index: 40;
  flex-shrink: 0;
  width: 232px;
  margin: 0;
  padding: 20px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background:
    /* faint vertical luminance lift, top→bottom (~3% delta) */
    linear-gradient(180deg, rgba(255,255,255,0.018) 0%, rgba(255,255,255,0) 60%, rgba(0,0,0,0.06) 100%),
    /* base translucent material */
    rgba(15, 15, 18, 0.72);
  border-right: 1px solid rgba(255,255,255,0.06);
  border-radius: 0;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset -1px 0 0 rgba(255,255,255,0.015),
    0 14px 50px -20px rgba(0,0,0,0.55);
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.sidebar.collapsed {
  width: 76px;
  padding: 20px 12px 18px;
}
/* Soft ambient glow that the blur can pick up (so the material has
   *something* to refract even on near-black backdrops). */
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.05), transparent 55%),
    radial-gradient(ellipse at 70% 90%, rgba(34,197,94,0.04), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -12px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #1c1c20, #141417);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  z-index: 4;
  opacity: 0.5;
  transform: translateY(-50%);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.6);
  transition: color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.sidebar-toggle:hover { color: var(--text); border-color: rgba(255,255,255,0.18); opacity: 1; }
.sidebar-toggle svg { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }

/* ── Workspace switcher (unified card + popover) ─────────────
   One clickable card surfaces the in-focus domain (primary) and
   its project (secondary). Click — or ⌘K from anywhere — opens a
   popover with all projects as sections, domains nested under
   each, search, and keyboard navigation. */
.ws {
  position: relative;
  padding: 0 0 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ws-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: #1a1a1a;
  border: 0.5px solid #262626;
  border-radius: 8px;
  color: #f5f5f5;
  cursor: pointer;
  text-align: left;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.ws-card:hover { background: #1f1f1f; border-color: #333; }
.ws-card[aria-expanded="true"] { background: #1f1f1f; border-color: #333; }
.ws-card:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(34,197,94,0.40); }

.ws-card-avatar {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font: 600 11px/1 'Inter', sans-serif;
  color: #fff;
  background-image: linear-gradient(135deg, #333, #222);
  border: 1px solid rgba(255,255,255,0.06);
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

.ws-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ws-card-domain {
  font: 500 13px/1.2 'Inter', sans-serif;
  color: #f5f5f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-card-project {
  font: 500 10.5px/1.2 'Inter', sans-serif;
  color: #777;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-card-chev {
  color: rgba(255,255,255,0.45);
  flex-shrink: 0;
  transition: color 0.16s ease;
}
.ws-card:hover .ws-card-chev,
.ws-card[aria-expanded="true"] .ws-card-chev { color: rgba(255,255,255,0.85); }

/* Collapsed sidebar — only show the avatar */
.sidebar.collapsed .ws-card { padding: 6px; justify-content: center; }
.sidebar.collapsed .ws-card-text,
.sidebar.collapsed .ws-card-chev { display: none; }

/* The one-click "Analyze this domain" bundle control used to live here,
   under the domain switcher. It was removed in favour of the per-page
   "Fetch fresh data" button; js/bundle.js is now a headless engine those
   buttons drive. (Styles deleted with the markup.) */

/* Transient feedback shown on the "Last updated" pill after a refresh click
   (CapraseoGate.flashFreshness) — so a refresh that changed nothing still
   reads as "done", e.g. "Already up to date" / "Updated just now". */
.lu-flash {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(1px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.lu-flash.is-shown { opacity: 1; transform: none; }
.lu-flash--ok { color: var(--accent, #22c55e); }

/* ── Popover ─────────────────────────────────────────────── */
.ws-pop {
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  width: 280px;
  max-width: 360px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: #141414;
  border: 0.5px solid #2a2a2a;
  border-radius: 10px;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.02);
  z-index: 50;
  transform-origin: top left;
  animation: wsPopRise 0.15s ease-out;
}
.ws-pop[hidden] { display: none; }
@keyframes wsPopRise {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .ws-pop { animation: none; } }
@media (max-width: 900px) {
  .ws-pop { left: 0; top: calc(100% + 6px); transform-origin: top left; }
}
.sidebar.collapsed .ws-pop { left: calc(100% + 8px); top: 0; }

.ws-pop-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #1a1a1a;
  border-radius: 6px;
  position: sticky;
  top: 0;
  z-index: 1;
  flex-shrink: 0;
}
.ws-pop-search-icon { color: #777; flex-shrink: 0; }
.ws-pop-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #e8e8ea;
  font: 400 12px 'Inter', sans-serif;
}
.ws-pop-search input::placeholder { color: #666; }
.ws-pop-search-kbd {
  font: 500 10px 'Inter', sans-serif;
  color: #888;
  padding: 2px 5px;
  border: 0.5px solid #2a2a2a;
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.ws-pop-body {
  overflow-y: auto;
  padding-top: 4px;
  flex: 1;
  min-height: 0;
}

.ws-pop-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 4px;
  font: 500 10px/1 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 0;
  width: 100%;
}
.ws-pop-section-head:hover { color: #999; }
.ws-pop-section-chev {
  color: rgba(255,255,255,0.35);
  transition: transform 0.16s ease;
  flex-shrink: 0;
}
.ws-pop-section.collapsed .ws-pop-section-chev { transform: rotate(-90deg); }
.ws-pop-section.collapsed .ws-pop-domains { display: none; }

.ws-pop-domains { display: flex; flex-direction: column; }

.ws-pop-domain {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  color: inherit;
}
.ws-pop-domain:hover,
.ws-pop-domain.is-highlighted { background: #1f1f1f; }
.ws-pop-domain.is-active { background: #1a1a1a; }
.ws-pop-domain-avatar {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font: 600 9px/1 'Inter', sans-serif;
  color: #fff;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.06);
  background-image: linear-gradient(135deg, #333, #222);
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
.ws-pop-domain-text { flex: 1; min-width: 0; }
.ws-pop-domain-name {
  font: 500 12.5px/1.2 'Inter', sans-serif;
  color: #ddd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-pop-domain.is-active .ws-pop-domain-name { color: #f0f0f0; }
.ws-pop-domain-meta {
  font: 400 10px/1.2 'Inter', sans-serif;
  color: #777;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-pop-domain-check {
  color: #6ce0a8;
  flex-shrink: 0;
  opacity: 0;
}
.ws-pop-domain.is-active .ws-pop-domain-check { opacity: 1; }

.ws-pop-divider {
  height: 0.5px;
  background: #1f1f1f;
  margin: 6px 4px;
}

.ws-pop-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  color: #999;
  font: 500 12px 'Inter', sans-serif;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
.ws-pop-action:hover,
.ws-pop-action.is-highlighted { background: #1f1f1f; color: #fff; }
.ws-pop-action-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: inherit;
}

.ws-pop-empty {
  padding: 18px 10px;
  text-align: center;
  color: #666;
  font: 400 12px 'Inter', sans-serif;
}

.ws-pop-skeleton {
  height: 36px;
  margin: 4px 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #181818, #1f1f1f, #181818);
  background-size: 200% 100%;
  animation: wsSkel 1.2s linear infinite;
}
@keyframes wsSkel {
  from { background-position: 0% 0; }
  to   { background-position: -200% 0; }
}

.nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  transition: background 0.18s ease;
}
.nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); }
.nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); }

/* Shared-layout active indicator. JS positions this with translate3d
   to the active or hovered nav item, so the pill *moves* with the
   selection. We animate transform/opacity only — never layout props. */
.nav-tracker {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: translate3d(0, 0, 0);
  transition:
    transform 250ms cubic-bezier(0.32, 0.72, 0, 1),
    height 250ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 200ms ease-out;
}
.nav-tracker.visible { opacity: 1; }
.nav-tracker.no-anim { transition: none; }

/* Section headers — quieter, tighter, more architectural */
.nav-section {
  padding: 0 10px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,1);
  opacity: 0.4;
}
.nav-item + .nav-section,
.subnav + .nav-section { padding-top: 24px; }

.nav-item {
  position: relative;
  z-index: 1;                 /* sits above .nav-tracker */
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item .nav-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,0.7);
  opacity: 1;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item:hover {
  color: rgba(255,255,255,1);
  transform: translateX(1px);
}
.nav-item:hover .nav-icon { color: rgba(255,255,255,1); }

/* Press: brief tactile compression (transform-only, 80ms) */
.nav-item:active { transform: translateX(1px) scale(0.98); transition-duration: 80ms; }

/* Focus rings — accent-colored, only on keyboard focus */
.nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Active state — text and icon brighten, accent rail shows on the
   left, but the pill *background* lives on .nav-tracker so it can
   slide between selections. */
.nav-item.active { color: rgba(255,255,255,1); }
.nav-item.active .nav-icon {
  /* ~30% brand-accent mix into white. Static fallback first, then
     the modern color-mix override for browsers that support it. */
  color: #b8f3c3;
  color: color-mix(in srgb, var(--accent) 30%, #ffffff);
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(34,197,94,0.0)   0%,
    rgba(34,197,94,1.0)   30%,
    rgba(34,197,94,1.0)   70%,
    rgba(34,197,94,0.0) 100%);
  box-shadow: 0 0 10px rgba(34,197,94,0.55);
}

/* Locked — no domain in focus yet. Dimmed and inert; hover/press effects
   are suppressed and a not-allowed cursor signals it can't be opened. */
.nav-item.locked {
  opacity: 0.4;
  cursor: not-allowed;
}
.nav-item.locked:hover {
  color: rgba(255,255,255,0.85);
  transform: none;
}
.nav-item.locked:hover .nav-icon { color: rgba(255,255,255,0.7); }
.nav-item.locked:active { transform: none; }

.nav-item span:not(.nav-icon) {
  transition: opacity 0.18s ease, max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 0;
  gap: 0;
}
.sidebar.collapsed .nav-item span:not(.nav-icon) { opacity: 0; max-width: 0; }
.sidebar.collapsed .nav-section { opacity: 0; height: 0; padding: 0; overflow: hidden; }
.sidebar.collapsed .nav-item.active::before { left: -12px; }

@media (prefers-reduced-motion: reduce) {
  .nav-item, .nav-item .nav-icon, .nav-tracker { transition: none; }
  .nav-item:hover, .nav-item:active { transform: none; }
}

/* Nav row with a trailing action button (e.g. Chat row's "+" to start
   a fresh chat). Wraps a .nav-item and an absolutely-positioned
   .nav-row-action so the button sits flush right of the row without
   breaking the anchor's clickable area. Reveal on row hover. */
.nav-row { position: relative; }
.nav-row-action {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: rgba(200,200,210,0.55);
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.nav-row:hover .nav-row-action,
.nav-row:focus-within .nav-row-action,
.nav-row-action:focus-visible { opacity: 1; }
.nav-row-action:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.nav-row-action:active { transform: translateY(-50%) scale(0.9); transition-duration: 80ms; }
.nav-row-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.sidebar.collapsed .nav-row-action { display: none; }

/* ── Sub-nav (per-page section jump links) ─────────────────
   Lives inside the sidebar partial after a top-level nav-item.
   Hidden by default — shown only when the matching page is active
   (body[data-page="<key>"]). Each item smooth-scrolls to a section
   by data-target, handled in sidebar.js. */
.subnav {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 6px 0 8px 30px;
  margin: 2px 0 4px;
  position: relative;
}
.subnav::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 4px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
}
body[data-page="chat"] .subnav[data-for="chat"],
body[data-page="chat-history"] .subnav[data-for="chat"],
body[data-page="health"] .subnav[data-for="health"],
body[data-page="backlinks"] .subnav[data-for="backlinks"],
body[data-page="referring-domains"] .subnav[data-for="referring-domains"],
body[data-page="keywords"] .subnav[data-for="keywords"],
body[data-page="competitor-gap"] .subnav[data-for="competitor-gap"],
body[data-page="marketplace"] .subnav[data-for="marketplace"],
body[data-page="marketplace-item"] .subnav[data-for="marketplace"] {
  display: flex;
  animation: subnavRise 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes subnavRise {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.subnav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  color: rgba(200,200,210,0.50);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.subnav-item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.subnav-item:hover {
  background: rgba(255,255,255,0.03);
  color: var(--text);
}
.subnav-item:hover::before { background: rgba(255,255,255,0.35); }
.subnav-item.active { color: #f3f3f5; background: rgba(255,255,255,0.04); }
.subnav-item.active::before {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(34,197,94,0.55);
}
.sidebar.collapsed .subnav { display: none !important; }

/* Cart rows in the Marketplace submenu: a domain link plus a hover-reveal
   "×" remove button. The link flexes to fill the row so the dot/anchor
   styling from .subnav-item still applies. */
.subnav-cart-row { position: relative; display: flex; align-items: center; }
.subnav-cart-row .subnav-item {
  flex: 1; min-width: 0; padding-right: 22px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.subnav-cart-x {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 5px;
  color: rgba(200,200,210,0.45); cursor: pointer; opacity: 0;
  transition: opacity 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.subnav-cart-row:hover .subnav-cart-x,
.subnav-cart-x:focus-visible { opacity: 1; }
.subnav-cart-x:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.subnav-empty {
  padding: 2px 10px; font-size: 12px; font-style: italic;
  color: rgba(200,200,210,0.35);
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="chat"] .subnav[data-for="chat"],
  body[data-page="chat-history"] .subnav[data-for="chat"],
  body[data-page="health"] .subnav[data-for="health"],
  body[data-page="backlinks"] .subnav[data-for="backlinks"],
  body[data-page="referring-domains"] .subnav[data-for="referring-domains"],
  body[data-page="keywords"] .subnav[data-for="keywords"],
  body[data-page="competitor-gap"] .subnav[data-for="competitor-gap"],
  body[data-page="marketplace"] .subnav[data-for="marketplace"],
  body[data-page="marketplace-item"] .subnav[data-for="marketplace"] { animation: none; }
}

/* Chat-history subnav item is a standalone page link (not a scroll
   target), so its active state is driven by body[data-page] rather
   than the scroll-spy logic in sidebar.js. */
body[data-page="chat-history"] .subnav-item[data-page="chat-history"] {
  color: #f3f3f5;
  background: rgba(255,255,255,0.04);
}
body[data-page="chat-history"] .subnav-item[data-page="chat-history"]::before {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(34,197,94,0.55);
}

/* Token meter — sits just above the account block at the bottom of the
   sidebar. The flex-grow on .nav (which scrolls when needed) is what
   pushes this and .account-wrap to the bottom. */
.token-meter {
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.token-meter .tm-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.token-meter .tm-pct {
  color: var(--text);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.tm-bar {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
/* The fill animates its width on mount via transform-scale (no layout
   thrash), and carries a glow keyed to the warm end of the gradient so
   it "pulses" subtly — Apple-style under-light. */
.tm-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #7dd699 55%, var(--gold));
  box-shadow: 0 0 12px rgba(230,196,122,0.40);
  transform-origin: left center;
  transform: scaleX(0);
  animation: tmFill 600ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
  /* The real spend lands from /api/usage after mount; grow to it
     smoothly instead of snapping when --w is updated. */
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tmFill {
  to { transform: scaleX(1); }
}
/* At/over the $10 cap the bar goes red and pairs with the
   "Buy more tokens" CTA right below it. */
.token-meter.is-over .tm-fill {
  background: linear-gradient(90deg, var(--gold), var(--danger) 60%);
  box-shadow: 0 0 12px rgba(255,122,122,0.40);
}
/* Shimmer on hover — a soft highlight sweeps across the filled bar */
.token-meter:hover .tm-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.35) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: 200% 0;
  border-radius: inherit;
  animation: tmShimmer 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}
@keyframes tmShimmer {
  to { background-position: -100% 0; }
}
.tm-wallet {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: -0.005em;
  margin-top: -2px;
}
.tm-buy {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color 0.18s ease, gap 0.18s ease;
}
.tm-buy svg { opacity: 0.55; transition: opacity 0.18s ease; }
.tm-buy:hover { color: var(--text); gap: 7px; }
.tm-buy:hover svg { opacity: 1; }

/* Collapsed sidebar — keep only the bar */
.sidebar.collapsed .token-meter { padding: 0 6px; gap: 0; }
.sidebar.collapsed .tm-head,
.sidebar.collapsed .tm-buy { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tm-fill { animation: none; transform: scaleX(1); transition: none; }
  .token-meter:hover .tm-fill::after { animation: none; }
}

/* Account block — sits right under the token meter */
.account-wrap {
  position: relative;
}
.account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-top: 1px solid rgba(255,255,255,0.04);
  color: rgba(200,200,210,0.7);
  font-size: 13px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transition: background 0.18s ease, color 0.18s ease;
  border-radius: 8px;
}
.account:hover,
.account-wrap:hover .account,
.account-wrap:focus-within .account { background: rgba(255,255,255,0.03); color: var(--text); }
.account:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.10); }
.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2c2c33, #18181b);
  border: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 500;
  color: #d0d0d8;
}
.account-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
  transition: opacity 0.18s ease, max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 140px;
}
.account-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-id {
  font-size: 11px;
  color: var(--muted-2);
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-id:empty { display: none; }
.account-settings {
  color: var(--muted-2);
  opacity: 0.6;
  transition: opacity 0.18s ease, color 0.18s ease, transform 0.2s ease;
  display: inline-flex;
  flex-shrink: 0;
}
.account:hover .account-settings,
.account-wrap:hover .account-settings,
.account-wrap:focus-within .account-settings { opacity: 1; color: var(--text); }
.account-wrap:hover .account-settings,
.account-wrap:focus-within .account-settings { transform: rotate(180deg); }
.sidebar.collapsed .account {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}
.sidebar.collapsed .account-text,
.sidebar.collapsed .account-settings {
  opacity: 0;
  max-width: 0;
  width: 0;
  overflow: hidden;
}

/* Account hover menu (pops above the account block) */
.account-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 200px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(28,28,32,0.96), rgba(18,18,21,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow:
    0 20px 40px -12px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 20;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
/* Invisible bridge so a small gap doesn't drop hover */
.account-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 8px;
}
.account-wrap:hover .account-menu,
.account-wrap:focus-within .account-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.account-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #c0c0c8;
  font: 500 13px 'Inter', sans-serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: rgba(255,255,255,0.05);
  color: var(--text);
  outline: none;
}
.account-menu-item .ami-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.75;
}
.account-menu-item:hover .ami-icon,
.account-menu-item:focus-visible .ami-icon { opacity: 1; }
/* Account row: link grows, the dev "reset account" icon sits at the end. */
.account-menu-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.account-menu-row .account-menu-item { flex: 1 1 auto; width: auto; }
.ami-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #c0c0c8;
  cursor: pointer;
  opacity: 0.7;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.ami-reset:hover,
.ami-reset:focus-visible {
  background: rgba(255,255,255,0.05);
  color: var(--text);
  opacity: 1;
  outline: none;
}
.ami-reset.is-spinning svg { animation: ami-reset-spin 0.8s linear infinite; transform-origin: 50% 50%; }
@keyframes ami-reset-spin { to { transform: rotate(360deg); } }
.account-menu-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 6px 4px;
}
/* Collapsed sidebar: anchor menu to the avatar's left edge instead of stretching */
.sidebar.collapsed .account-menu {
  right: auto;
  left: 4px;
}

/* ── Stage (right side) ────────────────────────────────────── */
.stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.stage-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 36px;
  flex-shrink: 0;
}

.stage-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #f3f3f5;
  margin: 0;
}
.stage-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 0 0;
}

/* Generic centered content area (chat hero, account scroll area) */
.center {
  position: relative;
  /* Above .stage-top (z-index: 2). The header and the scroll area are
     non-overlapping flex siblings, so in normal flow nothing changes —
     but a dropdown opened near the top of the scroll area (e.g. the
     "Ask AI" model picker) extends up into the header's band. Keeping
     .center below the header trapped that menu behind it no matter how
     high the menu's own z-index went; lifting .center lets those
     popovers paint over the header where the user can actually see them. */
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  min-height: 0;
}

/* Footer */
.footer {
  position: relative;
  z-index: 1;
  padding: 28px 0 32px;
  text-align: center;
  color: var(--muted-2);
  font-size: 13px;
  flex-shrink: 0;
}
.footer a {
  color: #c8c8d0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Entrance animations ───────────────────────────────────── */
.anim {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.15s; }
.d3 { animation-delay: 0.25s; }
.d4 { animation-delay: 0.35s; }
.d5 { animation-delay: 0.45s; }
.d6 { animation-delay: 0.55s; }
.d7 { animation-delay: 0.65s; }
.d8 { animation-delay: 0.75s; }
.d9 { animation-delay: 0.85s; }

/* ── Login page ────────────────────────────────────────────── */
.login-page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(20,20,24,0.55), rgba(8,8,10,0.85)),
    linear-gradient(180deg, #0c0c0e 0%, #0a0a0b 100%);
}
/* The sign-in card is hidden by default — on cold tabs with a live session
   cookie, we redirect away before /auth/me resolves, so the user sees only
   the loader (.login-loader below) and never a flash of the card. The
   body.is-signed-out class is set once /auth/me confirms no session. */
.login-card {
  width: min(360px, calc(100% - 40px));
  padding: 28px 26px 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(28,28,32,0.95), rgba(18,18,21,0.95));
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 48px -16px rgba(0,0,0,0.7);
  display: none;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}
body.is-signed-out .login-card {
  display: flex;
  animation: login-card-in 0.22s ease-out both;
}
@keyframes login-card-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.login-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  pointer-events: none;
  animation: login-loader-fadein 0.5s ease-out 0.08s both;
}
body.is-signed-out .login-loader { display: none; }
.login-loader-ring {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.55);
  animation: login-loader-spin 0.9s linear infinite;
}
.login-loader-mark {
  font: 500 14px 'Inter', sans-serif;
  letter-spacing: 0.6px;
  color: var(--text);
  opacity: 0.7;
  animation: login-loader-pulse 1.8s ease-in-out infinite;
}
@keyframes login-loader-spin {
  to { transform: rotate(360deg); }
}
@keyframes login-loader-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}
@keyframes login-loader-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .login-loader-ring,
  .login-loader-mark,
  .login-loader,
  body.is-signed-out .login-card { animation: none; }
}

.login-card h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--text);
}
.login-card p.login-sub {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.login-card input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(22,22,25,0.55);
  color: var(--text);
  font: 500 14px 'Inter', sans-serif;
  letter-spacing: 0.4px;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.login-card input:focus {
  border-color: rgba(255,255,255,0.22);
  background: rgba(28,28,32,0.7);
}
.login-card button {
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, #2a2a30, #1a1a1d);
  color: var(--text);
  font: 500 14px 'Inter', sans-serif;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}
.login-card button:hover {
  background: linear-gradient(180deg, #35353c, #212125);
  border-color: rgba(255,255,255,0.16);
}
.login-card button:active { transform: translateY(1px); }
.login-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  padding: 11px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(48,48,54,0.95), rgba(34,34,38,0.95));
  border: 1px solid rgba(255,255,255,0.10);
  color: #f0f0f0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.06s ease, opacity 0.18s ease, border-color 0.18s ease;
}
.login-google-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(60,60,66,0.95), rgba(44,44,48,0.95));
  border-color: rgba(255,255,255,0.18);
}
.login-google-btn:active:not(:disabled) { transform: translateY(1px); }
.login-google-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18);
}
.login-google-btn:disabled { opacity: 0.55; cursor: progress; }
.login-google-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 4px;
  flex-shrink: 0;
}
.login-google-mark svg { display: block; }
.login-card .login-error {
  margin: 0;
  min-height: 16px;
  font-size: 12px;
  color: var(--danger);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.login-card .login-error.show { opacity: 1; }
.login-card.shake { animation: login-shake 0.36s cubic-bezier(.36,.07,.19,.97); }
@keyframes login-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* ── Shared button primitives (reused across pages) ────────── */
/* Buttons — layered material, Apple-easing, tactile press, keyboard rings.
   Same vocabulary as the upgrade pill on the chat page. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.10) 100%),
    linear-gradient(180deg, #2a2a30, #1a1a1d);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: var(--text);
  font: 500 13px 'Inter', sans-serif;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition:
    background 200ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 200ms cubic-bezier(0.32, 0.72, 0, 1),
    color 200ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 200ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 4px 12px -4px rgba(0,0,0,0.5);
}
.btn:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.10) 100%),
    linear-gradient(180deg, #35353c, #212125);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 6px 16px -4px rgba(0,0,0,0.55);
}
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn.btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
  color: rgba(200,200,210,0.7);
}
.btn.btn-ghost:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-color: rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.btn.btn-danger {
  border-color: rgba(255, 122, 122, 0.22);
  color: rgba(255, 200, 200, 0.85);
}
.btn.btn-danger:hover {
  border-color: rgba(255, 122, 122, 0.40);
  color: #ffd2d2;
}
.btn.btn-danger:focus-visible { outline-color: var(--danger); }
.btn.btn-sm { height: 28px; padding: 0 11px; font-size: 12px; gap: 6px; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* ── Domain page: "About this domain" LLM profile ─────────────── */
.profile-state {
  font-size: 13px;
  color: var(--muted);
  padding: 4px 0;
}
.profile-state-failed {
  color: var(--muted-2);
}
.profile-dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  row-gap: 12px;
  column-gap: 18px;
  margin: 0;
}
.profile-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  padding-top: 2px;
}
.profile-dd {
  margin: 0;
  font-size: 13px;
  color: var(--text);
}
.profile-value { line-height: 1.5; }
.profile-empty {
  color: var(--muted-2);
  font-size: 12px;
}
.profile-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.profile-chip {
  display: inline-block;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.10);
  color: #7fd99e;
  border: 1px solid rgba(34, 197, 94, 0.18);
}
@media (max-width: 640px) {
  .profile-dl {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .profile-label { padding-top: 8px; }
}

/* ── Shared full-screen modal (add new skill / domain, etc.) ──────────
   Used by the chat composer, the /skills/ page, and any other page that
   renders `.modal` / `.modal-card` markup. Lives here (not chat.css) so
   pages that don't load chat.css still pick it up. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  animation: modalIn 0.18s ease-out;
}
.modal[hidden] { display: none; }

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

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-card {
  position: relative;
  width: min(440px, 100%);
  padding: 28px 26px 22px;
  background: linear-gradient(180deg, rgba(28,28,32,0.96), rgba(18,18,21,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow:
    0 30px 60px -16px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.04);
  animation: modalCardIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modalCardIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: rgba(200,200,210,0.55);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: rgba(255,255,255,0.05); color: var(--text); }

.modal-title {
  margin: 0 0 6px 0;
  font-size: 17px;
  font-weight: 500;
  color: #f3f3f5;
  letter-spacing: -0.01em;
}
.modal-sub {
  margin: 0 0 20px 0;
  font-size: 13px;
  color: var(--muted);
}

.modal-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: 0;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.modal-input:focus {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}
.modal-input::placeholder { color: #5a5a63; }

.modal-body {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  margin-top: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  outline: 0;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.modal-body:focus {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}
.modal-body::placeholder { color: #5a5a63; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.modal-cancel,
.modal-confirm {
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.modal-cancel {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
}
.modal-cancel:hover {
  border-color: rgba(255,255,255,0.18);
  color: var(--text);
}
.modal-confirm {
  background: linear-gradient(180deg, #2a2a30, #1a1a1d);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f3f3f5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.modal-confirm:hover {
  background: linear-gradient(180deg, #35353c, #212125);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}
.modal-confirm:active { transform: translateY(0); }