/* ==========================================================================
   Harashsuq - "neo-souq" design system
   A trading floor rendered as circuitry: obsidian ground, neon violet and
   cyan for the machine, brass gold for the market. Depth comes from a live
   3D canvas behind everything and glass panels floating above it.
   ========================================================================== */

@layer tokens, base, layout, components, motion, utilities;

/* ------------------------------------------------------------------ */
@layer tokens {

:root {
  /* Spectrum */
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --cyan-300:   #67e8f9;
  --cyan-400:   #22d3ee;
  --cyan-500:   #06b6d4;
  --gold-300:   #fcd34d;
  --gold-400:   #fbbf24;
  --gold-500:   #f59e0b;
  --rose-400:   #fb7185;
  --mint-400:   #34d399;

  /* Ground */
  --bg:            #05060c;
  --bg-sunken:     #03040a;
  --bg-elevated:   #0b0d18;
  --surface:       rgba(20, 23, 40, 0.62);
  --surface-solid: #141728;
  --surface-hover: rgba(32, 36, 60, 0.78);
  --border:        rgba(140, 152, 200, 0.14);
  --border-strong: rgba(150, 162, 215, 0.30);

  --text:        #eef0fa;
  --text-muted:  #9aa3c4;
  --text-subtle: #6a7398;

  --accent:          var(--violet-500);
  --accent-hover:    var(--violet-400);
  --accent-contrast: #ffffff;
  --accent-soft:     rgba(139, 92, 246, 0.16);
  --accent-ring:     rgba(139, 92, 246, 0.55);
  --accent-2:        var(--cyan-400);
  --accent-3:        var(--gold-400);

  --success: var(--mint-400);
  --warning: var(--gold-400);
  --danger:  var(--rose-400);
  --info:    var(--cyan-400);

  /* Signature gradients */
  --grad-primary: linear-gradient(135deg, var(--violet-500) 0%, var(--cyan-400) 100%);
  --grad-gold:    linear-gradient(135deg, var(--gold-400) 0%, var(--rose-400) 100%);
  --grad-text:    linear-gradient(100deg, #fff 0%, var(--violet-300) 40%, var(--cyan-300) 70%, #fff 100%);

  /* Glow */
  --glow-accent: 0 0 0 1px rgba(139, 92, 246, 0.35), 0 8px 32px -8px rgba(139, 92, 246, 0.55);
  --glow-cyan:   0 0 0 1px rgba(34, 211, 238, 0.32), 0 8px 30px -10px rgba(34, 211, 238, 0.5);
  --glow-gold:   0 0 0 1px rgba(251, 191, 36, 0.34), 0 8px 30px -10px rgba(251, 191, 36, 0.45);

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

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

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow:    0 10px 30px -12px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.85);

  --glass-blur: 16px;

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

  --header-h: 68px;
  --max-w: 1280px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 200ms var(--ease);

  /* Scrollbars and native controls follow the theme, not the OS. */
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;

  --bg:            #f4f5fb;
  --bg-sunken:     #eaecf6;
  --bg-elevated:   #ffffff;
  --surface:       rgba(255, 255, 255, 0.78);
  --surface-solid: #ffffff;
  --surface-hover: rgba(255, 255, 255, 0.95);
  --border:        rgba(30, 40, 90, 0.12);
  --border-strong: rgba(30, 40, 90, 0.24);

  --text:        #10121f;
  --text-muted:  #4d5573;
  --text-subtle: #78809e;

  --accent:       var(--violet-600);
  --accent-hover: var(--violet-500);
  --accent-soft:  rgba(124, 58, 237, 0.10);

  --success: #059669;
  --warning: #b45309;
  --danger:  #e11d48;
  --info:    #0891b2;

  --grad-text: linear-gradient(100deg, #10121f 0%, var(--violet-600) 45%, var(--cyan-500) 75%, #10121f 100%);

  --shadow:    0 10px 30px -14px rgba(16, 24, 60, 0.28);
  --shadow-lg: 0 30px 60px -24px rgba(16, 24, 60, 0.35);
  --glass-blur: 12px;
}

}

/* ------------------------------------------------------------------ */
@layer base {

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The live 3D field. Sits behind everything, never intercepts input. */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

/* Warm haze so the canvas reads as atmosphere rather than decoration. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 12% -5%,  rgba(139, 92, 246, 0.16), transparent 65%),
    radial-gradient(800px 500px at 92% 10%,  rgba(34, 211, 238, 0.11),  transparent 65%),
    radial-gradient(700px 500px at 60% 100%, rgba(251, 191, 36, 0.07),  transparent 65%);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(900px 600px at 12% -5%,  rgba(139, 92, 246, 0.14), transparent 65%),
    radial-gradient(800px 500px at 92% 10%,  rgba(34, 211, 238, 0.12), transparent 65%);
}

.site-header, .site-main, .site-footer { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  line-height: 1.18;
  font-weight: 680;
  letter-spacing: -0.03em;
}
h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); }
h3 { font-size: 1.12rem; }
p  { margin: 0 0 var(--space-3); }

a { color: var(--accent-hover); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--cyan-300); }
[data-theme="light"] a:hover { color: var(--violet-600); }

img, svg { max-width: 100%; }

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

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

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-sunken); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--violet-600), var(--cyan-500));
  border-radius: 99px;
  border: 3px solid var(--bg-sunken);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff;
  padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.noscript-notice {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--bg); color: var(--text); font-size: 1.1rem; padding: var(--space-6);
}

}

/* ------------------------------------------------------------------ */
@layer layout {

.site-main { flex: 1; width: 100%; }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (max-width: 640px) { .container { padding-inline: var(--space-4); } }

.section { padding-block: var(--space-8); }
.section-tight { padding-block: var(--space-6); }

.stack    { display: flex; flex-direction: column; gap: var(--space-4); }
.row      { display: flex; align-items: center; gap: var(--space-3); }
.row-wrap { flex-wrap: wrap; }
.spread   { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.grow     { flex: 1; min-width: 0; }

.grid { display: grid; gap: var(--space-4); }
.grid-assets { grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.split-sidebar { display: grid; grid-template-columns: 268px 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 900px) { .split-sidebar { grid-template-columns: 1fr; } }

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: var(--space-6); align-items: start; }
@media (max-width: 940px) { .detail-layout { grid-template-columns: 1fr; } }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-5);
}
.section-head h2 { margin: 0; }

}

/* ------------------------------------------------------------------ */
@layer components {

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border-bottom: 1px solid var(--border);
}
/* Hairline of light along the header edge. */
.site-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--violet-500), var(--cyan-400), transparent);
  opacity: 0.55;
}

.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--space-4);
  max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-5);
}
@media (max-width: 640px) { .header-inner { padding-inline: var(--space-4); gap: var(--space-2); } }

.brand {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-weight: 750; font-size: 1.08rem; color: var(--text);
  letter-spacing: -0.035em; flex-shrink: 0;
}
.brand:hover { color: var(--text); }

.brand-mark {
  position: relative;
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px; color: #fff;
  background: var(--grad-primary);
  /* Octagram silhouette - the khatam star of a souq lattice. */
  clip-path: polygon(50% 0%, 65% 18%, 88% 12%, 82% 35%, 100% 50%, 82% 65%, 88% 88%,
                     65% 82%, 50% 100%, 35% 82%, 12% 88%, 18% 65%, 0% 50%, 18% 35%, 12% 12%, 35% 18%);
  box-shadow: 0 0 22px -4px rgba(139, 92, 246, 0.85);
  animation: markSpin 18s linear infinite;
}
@keyframes markSpin {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

.brand-text {
  white-space: nowrap;
  background: var(--grad-text);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: sheen 7s linear infinite;
}
@keyframes sheen {
  to { background-position: -220% 0; }
}
@media (max-width: 520px) { .brand-text { display: none; } }

.header-search { flex: 1; max-width: 480px; position: relative; }
.header-search input { padding-left: 40px; }
.header-search .search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-subtle); pointer-events: none; display: flex;
  transition: color var(--transition);
}
.header-search:focus-within .search-icon { color: var(--accent-hover); }

.header-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }

.nav-link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--text-muted); font-weight: 550; font-size: 0.9rem; white-space: nowrap;
}
.nav-link::after {
  content: '';
  position: absolute; left: 50%; bottom: 4px;
  width: 0; height: 2px; border-radius: 2px;
  background: var(--grad-primary);
  transform: translateX(-50%);
  transition: width var(--transition);
}
.nav-link:hover { color: var(--text); }
.nav-link:hover::after, .nav-link.active::after { width: 56%; }
.nav-link.active { color: var(--text); }
@media (max-width: 860px) { .nav-link.hide-sm { display: none; } }

.icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--radius);
  background: transparent; border: 1px solid transparent; color: var(--text-muted);
  cursor: pointer; transition: var(--transition);
}
.icon-btn:hover {
  background: var(--surface-hover); color: var(--text);
  border-color: var(--border); transform: translateY(-1px);
}

.badge-count {
  position: absolute; top: 1px; right: 1px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px;
  background: var(--grad-gold); color: #2a1a02;
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
  border: 2px solid var(--bg); line-height: 1;
  box-shadow: 0 0 12px -2px var(--gold-400);
}

/* ---------- Avatar & menu ---------- */

.avatar {
  border-radius: 30%; display: grid; place-items: center; flex-shrink: 0;
  font-weight: 700; color: #fff; letter-spacing: -0.02em;
  background: linear-gradient(140deg, hsl(var(--hue, 260) 85% 62%), hsl(calc(var(--hue, 260) + 55) 80% 48%));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 14px -6px hsl(var(--hue, 260) 85% 50%);
}
.avatar-sm { width: 30px; height: 30px; font-size: 11px; }
.avatar-md { width: 40px; height: 40px; font-size: 14px; }
.avatar-lg { width: 78px; height: 78px; font-size: 27px; border-radius: 26%; }

.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 244px; z-index: 50;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  transform-origin: top right;
  animation: menuIn 220ms var(--ease);
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.menu-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: 9px var(--space-3); border-radius: var(--radius);
  color: var(--text); background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.9rem; text-align: left;
  transition: var(--transition);
}
.menu-item:hover {
  background: var(--accent-soft); color: var(--text);
  transform: translateX(3px);
}
.menu-item.danger { color: var(--danger); }
.menu-header { padding: var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); }
.menu-sep { height: 1px; background: var(--border); margin: var(--space-2) 0; }

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px var(--space-4); border-radius: var(--radius);
  font: inherit; font-size: 0.9rem; font-weight: 640; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  text-decoration: none; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition), border-color var(--transition), color var(--transition);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:not(:disabled):hover { transform: translateY(-2px); }
.btn:not(:disabled):active { transform: translateY(0); }

/* Light sweeps across on hover. */
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.26) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 620ms var(--ease);
}
.btn:not(:disabled):hover::before { transform: translateX(120%); }

.btn-primary {
  background: var(--grad-primary); color: #fff;
  box-shadow: 0 6px 22px -10px rgba(139, 92, 246, 0.9);
}
.btn-primary:not(:disabled):hover { box-shadow: 0 12px 30px -10px rgba(139, 92, 246, 1); color: #fff; }

.btn-secondary {
  background: var(--surface); color: var(--text); border-color: var(--border-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-secondary:not(:disabled):hover { border-color: var(--accent); color: var(--text); box-shadow: var(--glow-accent); }

.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:not(:disabled):hover { background: var(--surface-hover); color: var(--text); }

.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn-danger:not(:disabled):hover {
  background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger);
  box-shadow: 0 6px 22px -10px var(--danger);
}

/*
 * Sign in with Google. Google's branding terms require their own mark on a
 * plain white or plain dark surface, so this one button opts out of the
 * gradient treatment the others share - including the hover sweep, which would
 * wash over the four-colour mark.
 */
/* Dark is the default here, as everywhere else in this file. */
.btn-google {
  background: #131314; color: #e3e3e3; border-color: #8e918f;
  font-weight: 600;
}
.btn-google::before { content: none; }
.btn-google:not(:disabled):hover { background: #1e1f20; border-color: #a2a6a4; color: #e3e3e3; }
.btn-google .google-mark { flex: none; }
[data-theme="light"] .btn-google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
[data-theme="light"] .btn-google:not(:disabled):hover { background: #f7f8f8; border-color: #d2d5d9; color: #1f1f1f; }

/*
 * Sign in with Apple. Apple's guidelines are stricter than Google's: black on
 * light, white on dark, the mark in the same colour as the label, and nothing
 * layered over either - so this button opts out of the sweep for the same
 * reason the Google one does.
 */
.btn-apple {
  background: #fff; color: #000; border-color: #fff;
  font-weight: 600;
}
.btn-apple::before { content: none; }
.btn-apple:not(:disabled):hover { background: #e6e6e6; border-color: #e6e6e6; color: #000; }
/* The mark is a silhouette, so it takes the label's colour in both themes. */
.btn-apple .apple-mark { flex: none; fill: currentColor; }
[data-theme="light"] .btn-apple { background: #000; color: #fff; border-color: #000; }
[data-theme="light"] .btn-apple:not(:disabled):hover { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }

/* Stacked provider buttons share one gap, then one rule down to the form. */
.auth-providers { display: grid; gap: var(--space-3); }

/* "or" rule between the provider buttons and the email form. */
.auth-divider {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--text-subtle); font-size: 0.8rem;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.btn-lg { padding: 13px var(--space-5); font-size: 1rem; border-radius: var(--radius-lg); }
.btn-sm { padding: 6px var(--space-3); font-size: 0.82rem; }
.btn-block { width: 100%; }

.btn-spinner {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Forms ---------- */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field-label { font-size: 0.85rem; font-weight: 640; color: var(--text); }
.field-hint  { font-size: 0.8rem; color: var(--text-subtle); }
.field-error { font-size: 0.8rem; color: var(--danger); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], textarea, select {
  width: 100%; padding: 11px var(--space-3);
  background: color-mix(in srgb, var(--bg-sunken) 70%, transparent);
  color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font: inherit; font-size: 0.9rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
textarea { resize: vertical; min-height: 110px; line-height: 1.65; }
select {
  cursor: pointer; appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa3c4' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 22px -8px var(--accent);
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }

.checkbox { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: 0.9rem; }
.checkbox input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }

.input-prefix { position: relative; }
.input-prefix span {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-subtle); font-size: 0.9rem; pointer-events: none;
}
.input-prefix input { padding-left: 27px; }

.dropzone {
  position: relative;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5); text-align: center; cursor: pointer;
  background: color-mix(in srgb, var(--bg-sunken) 55%, transparent);
  transition: var(--transition);
}
.dropzone:hover, .dropzone.dragging {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: var(--glow-accent); transform: translateY(-2px);
}
.dropzone input { display: none; }
.dropzone-file { display: flex; align-items: center; gap: var(--space-3); text-align: left; }

.tag-input {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px;
  background: color-mix(in srgb, var(--bg-sunken) 70%, transparent);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
}
.tag-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tag-input input { border: 0; background: none; padding: 3px; flex: 1; min-width: 120px; box-shadow: none !important; }

.tag-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  background: var(--accent-soft); color: var(--violet-300);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 550;
}
[data-theme="light"] .tag-chip { color: var(--violet-600); }
.tag-chip button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; line-height: 1; font-size: 15px; }

/* ---------- Glass surfaces ---------- */

.card, .panel {
  position: relative;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card { padding: var(--space-5); }
.card-tight { padding: var(--space-4); }
.card-flush { padding: 0; overflow: hidden; }
.panel { overflow: hidden; }

/* Top-edge light on every glass surface. */
.card::before, .panel::before {
  content: '';
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

.panel-head {
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.panel-body { padding: var(--space-5); }
.panel-body-flush { padding: 0; }

/* ---------- Asset card ---------- */

.asset-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
}
.asset-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: var(--shadow-lg), 0 0 36px -14px var(--accent);
}

.asset-card__thumb {
  height: 142px; position: relative; display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 30% 20%, hsl(var(--hue, 260) 70% 26%), transparent 60%),
    linear-gradient(150deg, hsl(var(--hue, 260) 60% 15%), hsl(calc(var(--hue, 260) + 55) 65% 9%));
  overflow: hidden;
}
[data-theme="light"] .asset-card__thumb {
  background:
    radial-gradient(120% 120% at 30% 20%, hsl(var(--hue, 260) 85% 90%), transparent 60%),
    linear-gradient(150deg, hsl(var(--hue, 260) 75% 86%), hsl(calc(var(--hue, 260) + 55) 70% 78%));
}
/* Lattice texture over the thumbnail. */
.asset-card__thumb::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at 50% 45%, #000 25%, transparent 78%);
}
.asset-card__glyph {
  position: relative; z-index: 1;
  color: #fff; opacity: 0.92;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55));
  transition: transform 400ms var(--ease);
}
[data-theme="light"] .asset-card__glyph { color: hsl(var(--hue, 260) 60% 28%); }
.asset-card:hover .asset-card__glyph { transform: translateY(-4px) scale(1.09) rotate(-4deg); }

.asset-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.asset-card__title {
  font-weight: 660; font-size: 1rem; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.asset-card__summary {
  font-size: 0.85rem; color: var(--text-muted); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.asset-card__foot {
  margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.asset-card__price {
  font-weight: 750; font-size: 1.08rem;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.asset-card__link { position: absolute; inset: 0; z-index: 1; }
.asset-card__foot .btn { position: relative; z-index: 2; }

.ribbon {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  background: var(--grad-gold); color: #2a1a02;
  box-shadow: 0 4px 16px -4px var(--gold-400);
}

/* ---------- Badges & pills ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 650; letter-spacing: 0.015em;
  background: color-mix(in srgb, var(--surface-solid) 70%, transparent);
  color: var(--text-muted); border: 1px solid var(--border);
}
.badge-accent  { background: var(--accent-soft); color: var(--violet-300); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.badge-success { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.badge-warning { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.badge-danger  { background: color-mix(in srgb, var(--danger) 16%, transparent);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.badge-info    { background: color-mix(in srgb, var(--info) 16%, transparent);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 40%, transparent); }
[data-theme="light"] .badge-accent { color: var(--violet-600); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; font-size: 0.83rem; font-weight: 550;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  cursor: pointer; text-decoration: none;
  transition: var(--transition);
}
.pill:hover {
  border-color: var(--accent); color: var(--text);
  transform: translateY(-2px); box-shadow: var(--glow-accent);
}
.pill.active { background: var(--grad-primary); border-color: transparent; color: #fff; }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Stars ---------- */

.stars { display: inline-flex; align-items: center; gap: 1px; color: var(--gold-400); }
.stars svg { display: block; filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.45)); }
.star-empty { color: var(--border-strong); filter: none; }
.rating-line { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--text-muted); }

.star-picker { display: inline-flex; gap: 3px; }
.star-picker button {
  background: none; border: 0; cursor: pointer; padding: 2px;
  color: var(--border-strong); transition: var(--transition);
}
.star-picker button.on { color: var(--gold-400); transform: scale(1.12); }

.rating-bar { display: grid; grid-template-columns: 46px 1fr 34px; gap: var(--space-2); align-items: center; font-size: 0.8rem; color: var(--text-muted); }
.rating-bar__track { height: 7px; background: var(--bg-sunken); border-radius: 4px; overflow: hidden; }
.rating-bar__fill { height: 100%; background: var(--grad-gold); border-radius: 4px; transition: width 700ms var(--ease); }

/* ---------- Hero ---------- */

.hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero-inner { padding-block: var(--space-8); max-width: 820px; position: relative; z-index: 1; }
.hero h1 { margin-bottom: var(--space-4); }
/* The headline reads as lit glass. */
.hero h1 {
  background: var(--grad-text);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 9s linear infinite;
}
.hero-lede { font-size: 1.14rem; color: var(--text-muted); margin-bottom: var(--space-5); max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.hero-stat__value {
  font-size: 1.7rem; font-weight: 760; letter-spacing: -0.035em;
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stat__label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.hero-stat__note { font-size: 0.76rem; color: var(--text-subtle); margin-top: 2px; }
.hero-stat { min-width: 148px; }

/* ---------- Category tiles ---------- */

.cat-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  color: var(--text);
  transition: transform 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease);
}
.cat-tile::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--grad-primary);
  opacity: 0; transition: opacity 260ms var(--ease);
  mask-image: radial-gradient(circle at 80% 0%, #000, transparent 70%);
}
.cat-tile:hover {
  color: var(--text); transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: var(--shadow-lg), 0 0 30px -14px var(--accent);
}
.cat-tile:hover::after { opacity: 0.13; }
.cat-tile > * { position: relative; z-index: 1; }
.cat-tile__icon {
  width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--violet-300);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition: var(--transition);
}
[data-theme="light"] .cat-tile__icon { color: var(--violet-600); }
.cat-tile:hover .cat-tile__icon { background: var(--grad-primary); color: #fff; transform: rotate(-8deg) scale(1.06); }
.cat-tile__name { font-weight: 680; font-size: 1.02rem; }
.cat-tile__meta { font-size: 0.82rem; color: var(--text-subtle); }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.data th, table.data td { padding: var(--space-3) var(--space-4); text-align: left; }
table.data th {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-subtle); font-weight: 700; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data td { border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr { transition: background var(--transition); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--accent-soft); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.85em; }

/* ---------- Stats ---------- */

.stat {
  position: relative; overflow: hidden;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  transition: var(--transition);
}
.stat:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.stat::after {
  content: '';
  position: absolute; left: 0; top: 0; width: 3px; height: 100%;
  background: var(--grad-primary); opacity: 0.85;
}
.stat__label { font-size: 0.74rem; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; }
.stat__value { font-size: 1.75rem; font-weight: 760; letter-spacing: -0.035em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.stat__note { font-size: 0.8rem; color: var(--text-muted); }

.spark { display: block; width: 100%; height: 60px; }
.spark path { fill: none; stroke: url(#sparkGrad, var(--accent)); stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--accent-ring)); }
.spark .area { fill: var(--accent-soft); stroke: none; filter: none; }

/* ---------- Asset detail ---------- */

.asset-hero { padding-block: var(--space-7) var(--space-6); border-bottom: 1px solid var(--border); }
.breadcrumbs { font-size: 0.83rem; color: var(--text-subtle); margin-bottom: var(--space-3); }
.breadcrumbs a { color: var(--text-muted); }

.buy-box { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.buy-box__price {
  font-size: 2.35rem; font-weight: 780; letter-spacing: -0.04em;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.spec-list { display: flex; flex-direction: column; font-size: 0.87rem; }
.spec-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--border); }
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { color: var(--text-subtle); }
.spec-row dd { margin: 0; color: var(--text); text-align: right; font-weight: 550; word-break: break-word; }

/* ------------------------------------------------------------------ */
/* Coin picker                                                         */
/*                                                                     */
/* A searchable listbox rather than a <select>: the provider returns   */
/* over two hundred tickers, which no native dropdown makes scannable. */
/* ------------------------------------------------------------------ */

.coin-picker { position: relative; }

.coin-picker__trigger {
  width: 100%; display: flex; align-items: center; gap: var(--space-3);
  padding: 11px var(--space-4);
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; cursor: pointer; text-align: left;
  transition: border-color var(--transition), background var(--transition);
}
.coin-picker__trigger:hover { border-color: var(--border-strong); }
.coin-picker__trigger:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.coin-picker__sel { display: flex; align-items: baseline; gap: var(--space-2); flex: 1; min-width: 0; }
.coin-picker__chev { flex: none; color: var(--text-subtle); }
.coin-picker__trigger[aria-expanded="true"] .coin-picker__chev { transform: rotate(180deg); }

/* Height is bounded by the viewport, not by a guessed pixel count: the buy box
   is sticky, so the panel can open anywhere down the page. Search and chips keep
   their natural height and the list takes what is left, so the list is the only
   thing that ever scrolls. */
.coin-picker__panel {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  display: flex; flex-direction: column;
  max-height: min(62dvh, 420px); /* replaced by a measured value on open */
  background: var(--surface-solid);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.coin-picker__searchbar {
  display: flex; align-items: center; gap: var(--space-2); flex: none;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.coin-picker__searchicon { flex: none; color: var(--text-subtle); }
.coin-picker__search {
  flex: 1; min-width: 0; padding: 6px 0;
  background: none; border: 0; color: var(--text); font: inherit;
}
.coin-picker__search:focus { outline: none; }
.coin-picker__search::placeholder { color: var(--text-subtle); }

/* min-height:0 is what lets a flex child actually shrink and scroll. */
.coin-picker__list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: var(--space-2);
  /* Two hundred-odd rows in a 270px window put the thumb at about 3% of the
     track - a few pixels of default grey on a dark panel, which read as a
     rendering fault rather than a control. Thin but coloured is findable. */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  /* Without this, scrolling past either end of the list carries on into the
     page - which moves the sticky buy box, and takes the trigger out from
     under the panel while it is still open. */
  overscroll-behavior: contain;
  /* Keeps a row clear of the sticky group heading when the arrow keys land on
     the first entry under one. */
  scroll-padding-block: 30px var(--space-2);
}
.coin-picker__list::-webkit-scrollbar { width: 10px; }
.coin-picker__list::-webkit-scrollbar-track { background: transparent; }
.coin-picker__list::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
.coin-picker__list::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: content-box; }

/* Sticky, because "Popular" and "All coins" are the only things telling you
   where you are once the list is a few hundred rows deep. */
.coin-picker__group {
  position: sticky; top: 0; z-index: 1;
  padding: var(--space-2) var(--space-2) var(--space-1);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-subtle);
  background: var(--surface-solid);
}

.coin-opt {
  width: 100%; display: flex; align-items: center; gap: var(--space-3);
  padding: 9px var(--space-3);
  background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.coin-opt:hover:not(:disabled) { background: var(--surface-hover); }
.coin-opt:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.coin-opt__main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--space-2); }
.coin-opt__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Within Popular nearly every row says "Tether USD" or "USD Coin"; the network
   is what actually tells them apart, so it is a tag rather than an afterthought. */
.coin-opt__net {
  flex: none;
  font-size: 0.68rem; font-weight: 600; line-height: 1.6;
  padding: 0 7px; border-radius: 999px; white-space: nowrap;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.coin-opt__ticker {
  flex: none; font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--text-subtle); letter-spacing: 0.02em;
}


/* The tick marks the current choice; it holds its space so rows do not shift. */
.coin-opt__tick { flex: none; width: 15px; color: var(--accent); visibility: hidden; }
.coin-opt[aria-selected="true"] .coin-opt__tick { visibility: visible; }
.coin-opt[aria-selected="true"] { background: var(--accent-soft); }


/* Network chips: "the USDT on Tron" is really a network question, so make
   that one tap instead of a scroll. */
.coin-picker__chips {
  display: flex; gap: 6px; flex: none;
  /* One scrolling line rather than wrapping: on a narrow screen these wrapped to
     three rows and pushed the coins themselves off the bottom. */
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  overscroll-behavior-x: contain;
}
.coin-picker__chips::-webkit-scrollbar { display: none; }
.coin-chip { flex: none; }
.coin-chip {
  padding: 3px 10px; border-radius: 999px;
  background: none; border: 1px solid var(--border);
  color: var(--text-muted); font: inherit; font-size: 0.74rem; cursor: pointer;
  white-space: nowrap;
}
.coin-chip:hover { border-color: var(--border-strong); color: var(--text); }
.coin-chip:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.coin-chip.is-on {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent-hover); font-weight: 600;
}

/* Phones: the row has four things competing for ~320px, so the name gives up
   its width first and the ticker - the least readable part - drops out entirely.
   The network tag stays: it is the one that disambiguates. */
/* Opens upward when there is more room above than below - set by place(). */
.coin-picker__panel.is-above { top: auto; bottom: calc(100% + 6px); }

@media (max-width: 480px) {
  .coin-opt { gap: var(--space-2); padding: 10px var(--space-2); }
  .coin-opt__ticker { display: none; }
  .coin-picker__trigger { padding: 11px var(--space-3); }
  .coin-picker__trigger .coin-opt__ticker { display: inline; font-size: 0.68rem; }
}

.coin-picker__empty {
  padding: var(--space-4); margin: 0;
  text-align: center; font-size: 0.85rem; color: var(--text-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .coin-picker__trigger { transition: none; }
}

/* Long-form legal copy: one measured column, not the full grid width. */
.legal-doc { max-width: 72ch; margin: 0 auto; }
.legal-doc .prose h2 {
  font-size: 1.06rem; letter-spacing: -0.01em;
  margin-top: var(--space-7); margin-bottom: var(--space-2);
}
.legal-doc .prose h2:first-child { margin-top: 0; }
.legal-foot {
  margin-top: var(--space-7); padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
/* Footer legal links sit inline with the commission note. */
.footer-legal { display: inline-flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

.prose { font-size: 0.97rem; line-height: 1.78; color: var(--text); }
.prose h1, .prose h2, .prose h3 { margin-top: var(--space-6); }
.prose p { margin-bottom: var(--space-4); }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--accent-hover); }
.prose code {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--violet-300);
  padding: 2px 7px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.86em;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
[data-theme="light"] .prose code { color: var(--violet-600); }
.prose pre {
  background: color-mix(in srgb, var(--bg-sunken) 85%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-4); overflow-x: auto; margin-bottom: var(--space-4);
}
.prose pre code { background: none; border: 0; padding: 0; font-size: 0.85rem; color: var(--cyan-300); }
[data-theme="light"] .prose pre code { color: var(--cyan-500); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); font-size: 0.88rem; }
.prose th, .prose td { border: 1px solid var(--border); padding: var(--space-2) var(--space-3); text-align: left; }
.prose th { background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 680; }
.prose strong { font-weight: 680; color: var(--text); }
.prose blockquote {
  margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--accent); color: var(--text-muted);
  background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0;
}

.review { padding: var(--space-5) 0; border-bottom: 1px solid var(--border); }
.review:last-child { border-bottom: 0; }
.review__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.review__body { color: var(--text-muted); font-size: 0.9rem; margin: 0; white-space: pre-wrap; }

/* ---------- Cart & library ---------- */

.line-item {
  display: grid; grid-template-columns: 60px 1fr auto; gap: var(--space-4);
  align-items: center; padding: var(--space-4); border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.line-item:last-child { border-bottom: 0; }
.line-item:hover { background: var(--accent-soft); }
.line-item__thumb {
  width: 60px; height: 60px; border-radius: var(--radius); display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(150deg, hsl(var(--hue, 260) 60% 24%), hsl(calc(var(--hue, 260) + 55) 65% 14%));
  border: 1px solid var(--border);
}
[data-theme="light"] .line-item__thumb {
  background: linear-gradient(150deg, hsl(var(--hue,260) 75% 88%), hsl(calc(var(--hue,260) + 55) 70% 80%));
  color: hsl(var(--hue, 260) 60% 30%);
}
@media (max-width: 560px) {
  .line-item { grid-template-columns: 46px 1fr; }
  .line-item__actions { grid-column: 1 / -1; justify-content: flex-end; display: flex; gap: var(--space-2); }
}

.summary-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 0; font-size: 0.9rem; }
.summary-row.total {
  border-top: 1px solid var(--border); margin-top: var(--space-2); padding-top: var(--space-3);
  font-weight: 750; font-size: 1.12rem;
}

/* The per-item lines above the subtotal. Named rows rather than a bare count,
   because "Items (3)  $27.00" tells the buyer nothing about which three. */
.summary-lines {
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-2); padding-bottom: var(--space-1);
  max-height: 172px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  overscroll-behavior: contain;
}
.summary-row.sub { padding: 5px 0; font-size: 0.83rem; color: var(--text-muted); }
.summary-row.sub .truncate { min-width: 0; }

/* The facts that are true of the payment rather than the price. Set apart so
   they do not read as further charges on the total. */
.summary-meta {
  border-top: 1px dashed var(--border);
  margin-top: var(--space-2); padding-top: var(--space-2);
}
.summary-meta .summary-row { padding: 4px 0; }
.summary-meta .summary-row > span:last-child { text-align: right; }

.license-key {
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.05em;
  background: color-mix(in srgb, var(--cyan-400) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan-400) 30%, transparent);
  color: var(--cyan-300);
  padding: 5px 10px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer;
  transition: var(--transition);
}
.license-key:hover { box-shadow: var(--glow-cyan); }
[data-theme="light"] .license-key { color: var(--cyan-500); }

/* ---------- Filters ---------- */

.filters { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.filter-group { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.filter-group:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.filter-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-subtle); font-weight: 700; margin-bottom: var(--space-3); }
.filter-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 6px 8px; font-size: 0.88rem; color: var(--text-muted); cursor: pointer;
  background: none; border: 0; width: 100%; text-align: left; font-family: inherit;
  border-radius: var(--radius-sm); transition: var(--transition); text-decoration: none;
}
.filter-option:hover { color: var(--text); background: var(--surface-hover); transform: translateX(3px); }
.filter-option.active { color: var(--violet-300); background: var(--accent-soft); font-weight: 640; }
[data-theme="light"] .filter-option.active { color: var(--violet-600); }
.filter-option__count { font-size: 0.76rem; color: var(--text-subtle); }

/* ---------- Tabs ---------- */

.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); overflow-x: auto; }
.tab {
  position: relative;
  padding: var(--space-3) var(--space-4); background: none; border: 0;
  color: var(--text-muted); font: inherit; font-size: 0.9rem; font-weight: 580;
  cursor: pointer; white-space: nowrap; margin-bottom: -1px;
  transition: color var(--transition);
}
.tab::after {
  content: '';
  position: absolute; left: 12%; right: 12%; bottom: 0; height: 2px;
  background: var(--grad-primary); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform 260ms var(--ease);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.tab.active::after { transform: scaleX(1); }

/* ---------- Toasts & modal ---------- */

.toast-stack {
  position: fixed; bottom: var(--space-5); right: var(--space-5); z-index: 90;
  display: flex; flex-direction: column; gap: var(--space-2);
  max-width: min(400px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg); font-size: 0.88rem;
  animation: toastIn 320ms var(--ease);
  cursor: pointer;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.toast.leaving { opacity: 0; transform: translateX(24px); transition: var(--transition); }
.toast__icon { flex-shrink: 0; margin-top: 1px; }
.toast-success { border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.toast-success .toast__icon { color: var(--success); }
.toast-error   { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.toast-error   .toast__icon { color: var(--danger); }
.toast-info    .toast__icon { color: var(--info); }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(3, 4, 10, 0.72); backdrop-filter: blur(6px);
  padding: var(--space-4);
  animation: fade 200ms var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto;
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  animation: modalIn 320ms var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.modal-head { padding: var(--space-5) var(--space-5) 0; display: flex; justify-content: space-between; gap: var(--space-3); }
.modal-body { padding: var(--space-4) var(--space-5); }
.modal-foot { padding: 0 var(--space-5) var(--space-5); display: flex; justify-content: flex-end; gap: var(--space-3); }

/* ---------- Feedback ---------- */

.empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--text-muted); }
.empty__icon { color: var(--text-subtle); margin-bottom: var(--space-4); opacity: 0.7; animation: float 5s ease-in-out infinite; }
.empty__title { font-size: 1.12rem; font-weight: 680; color: var(--text); margin-bottom: var(--space-2); }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.alert {
  display: flex; gap: var(--space-3); padding: var(--space-4);
  border-radius: var(--radius); font-size: 0.88rem; border: 1px solid;
}
.alert-info    { background: color-mix(in srgb, var(--info) 11%, transparent);    border-color: color-mix(in srgb, var(--info) 32%, transparent);    color: var(--text); }
.alert-warning { background: color-mix(in srgb, var(--warning) 11%, transparent); border-color: color-mix(in srgb, var(--warning) 32%, transparent); color: var(--text); }
.alert-danger  { background: color-mix(in srgb, var(--danger) 11%, transparent);  border-color: color-mix(in srgb, var(--danger) 32%, transparent);  color: var(--text); }
.alert-success { background: color-mix(in srgb, var(--success) 11%, transparent); border-color: color-mix(in srgb, var(--success) 32%, transparent); color: var(--text); }
.alert__icon { flex-shrink: 0; margin-top: 2px; }

.skeleton {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--surface-solid) 60%, transparent) 25%,
    color-mix(in srgb, var(--accent) 12%, transparent) 50%,
    color-mix(in srgb, var(--surface-solid) 60%, transparent) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton-card { height: 300px; }
.skeleton-line { height: 12px; margin-bottom: 8px; border-radius: var(--radius-sm); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-7); }
.page-btn {
  min-width: 40px; height: 40px; padding: 0 var(--space-3); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  font: inherit; font-size: 0.88rem; cursor: pointer; transition: var(--transition);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text); transform: translateY(-2px); }
.page-btn.active { background: var(--grad-primary); border-color: transparent; color: #fff; font-weight: 700; }
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-sunken) 75%, transparent);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  margin-top: var(--space-8);
}
.footer-inner { padding-block: var(--space-7); display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-5); }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
.footer-col h4 { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-subtle); margin-bottom: var(--space-3); font-weight: 700; }
.footer-col a { display: block; color: var(--text-muted); font-size: 0.88rem; padding: 4px 0; transition: var(--transition); }
.footer-col a:hover { color: var(--accent-hover); transform: translateX(4px); }
.footer-bottom {
  border-top: 1px solid var(--border); padding-block: var(--space-4);
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between;
  font-size: 0.82rem; color: var(--text-subtle);
}

}

/* ------------------------------------------------------------------ */
@layer motion {

/* Elements enter as they scroll into view. `is-in` is added by motion.js.
   Without JS everything stays visible, so content is never trapped. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* Staggered children inside a revealed grid. */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal-stagger.is-in > * { opacity: 1; transform: none; }

/* Pointer-tracked 3D tilt, driven by motion.js writing --rx / --ry. */
.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
}

/* The escape hatch. motion.js adds this when a reveal has not completed in
   time - including the case where transitions never advance at all. It skips
   the animation rather than waiting on it, so content cannot stay hidden. */
.motion-off,
.motion-off > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

}

/* ------------------------------------------------------------------ */
@layer utilities {

.muted    { color: var(--text-muted); }
.subtle   { color: var(--text-subtle); }
.small    { font-size: 0.85rem; }
.tiny     { font-size: 0.78rem; }
.strong   { font-weight: 680; }
.center   { text-align: center; }
.right    { text-align: right; }
.nowrap   { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden   { display: none !important; }

.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); }
.gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }

}

/* ------------------------------------------------------------------ */
/* Anyone who asks for less motion gets a still, flat page.            */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .tilt { transform: none !important; }
  #bg-canvas { display: none; }
}