/* ==========================================================================
   GeoWeb v10 — PrismML + Terminal Green + PC-First Dashboard
   Black+green tech aesthetic. 1px border-grid. No shadows. Dense layout.
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  /* Deep blue-black — warm, not dead black */
  --bg: #0c1222;
  --bg-card: rgba(16, 22, 40, 0.65);
  --bg-hover: rgba(26, 34, 56, 0.7);
  --bg-input: rgba(12, 18, 34, 0.85);

  /* Text — warm white, readable */
  --text: #c8ccd8;
  --text-bright: #eef0f6;
  --text-dim: #5a6080;

  /* Accent — refined teal-green (not neon) */
  --accent: #34d399;
  --accent-dim: rgba(52, 211, 153, 0.08);
  --accent-border: rgba(52, 211, 153, 0.20);

  /* Semantic colors */
  --green: #34d399;
  --blue: #60a5fa;
  --yellow: #fbbf24;
  --orange: #fb923c;
  --red: #f87171;

  /* Borders — visible but subtle */
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);

  --radius: 12px;
  --radius-sm: 8px;

  /* Subtle shadow system — depth without heaviness */
  --shadow: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-card-hover: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.08);

  --font: 'Inter', 'Noto Sans TC', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --gap: 1px;
  --section-gap: 32px;
  --card-pad: 24px;

  --transition: 0.2s ease;

  /* Grade colors — softer, more refined */
  --grade-a: #34d399;
  --grade-b: #60a5fa;
  --grade-c: #fbbf24;
  --grade-d: #fb923c;
  --grade-f: #f87171;

  /* Aliases for JS inline styles */
  --bg-primary: #0c1222;
  --bg-secondary: #111830;
  --bg-surface: #111830;
  --bg-card-solid: #111830;
  --bg-input-legacy: #0e1428;
  --bg-elevated: #182040;
  --bg-elevated-solid: #182040;
  --bg-active: rgba(255, 255, 255, 0.06);
  --text-primary: #eef0f6;
  --text-secondary: #c8ccd8;
  --text-2: #c8ccd8;
  --text-3: #5a6080;
  --text-muted: #5a6080;
  --accent-light: #5eead4;
  --accent-hover: #2cc389;
  --accent-dark: #059669;
  --accent-glow: rgba(52, 211, 153, 0.10);
  --gradient-accent: linear-gradient(135deg, #34d399, #2dd4bf);
  --cyan: #22d3ee;
  --magenta: #f472b6;
  --status-pass: #34d399;
  --status-warn: #fbbf24;
  --status-fail: #f87171;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.3);
  --shadow-glow: 0 0 40px rgba(52,211,153,0.06);
  --font-family: 'Inter', 'Noto Sans TC', system-ui, sans-serif;
  --transition-val: all 0.2s ease;
  --transition-slow: all 0.4s ease;
  --header-height: 56px;
  --border-subtle: 1px solid rgba(255, 255, 255, 0.07);
  --border-card: 1px solid rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.12);
  --card-padding: 24px;
  --bg-card-hover: rgba(22, 28, 42, 0.8);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; border: none; outline: none; background: none; }
button { cursor: pointer; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }

/* ---------- Background — multi-layer depth ---------- */

/* Layer 1: Large color blobs — ambient light feel */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 20% -5%, rgba(52, 211, 153, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 85% 20%, rgba(96, 165, 250, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 60% 90%, rgba(139, 92, 246, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 5% 70%, rgba(244, 114, 182, 0.05) 0%, transparent 50%);
  animation: ambientShift 30s ease-in-out infinite alternate;
}
@keyframes ambientShift {
  0% { transform: scale(1) translate(0, 0); opacity: 1; }
  50% { transform: scale(1.05) translate(-10px, 5px); opacity: 0.85; }
  100% { transform: scale(1.02) translate(5px, -8px); opacity: 0.95; }
}

/* Layer 2: Fine grid lines — structure/depth */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 20%, transparent 80%);
}

/* Layer 2.5: Breathing glow — site-wide ambient pulse, centered.
   Sits between the 4-blob ambient (z=-3, slow drift) and the grid
   (z=-2, static), so the breath reads above the corner blobs but
   the grid's mask cuts cleanly across it. Color uses the existing
   accent green at low alpha — no new palette, no clash. */
/* Site-wide background mega-text — outline "GEO" pinned behind the
   content, slow breathing pulse. Replaces the earlier corner-glow
   approach because it reads as intentional brand decoration rather
   than a haze. Color uses the existing accent green (no new palette).
   Center is technically covered but stroke-only at low alpha keeps
   hero text fully legible. */
.bg-megatext {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font);
  font-size: clamp(72px, 15vw, 280px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  text-stroke: 1.5px var(--accent);
  user-select: none;
  white-space: nowrap;
  opacity: 0.20;
  /* Shine animation — a moving "light band" mask sweeps left→right
     across the text. Outside the band the mask is transparent, so
     the troughs are fully invisible (no residual ghost text). The
     band itself is wider than 0% so transitions feel like a graceful
     wash rather than a hard scanline. */
  -webkit-mask-image: linear-gradient(
    100deg,
    transparent 30%,
    rgba(0, 0, 0, 1) 50%,
    transparent 70%
  );
  mask-image: linear-gradient(
    100deg,
    transparent 30%,
    rgba(0, 0, 0, 1) 50%,
    transparent 70%
  );
  -webkit-mask-size: 280% 100%;
  mask-size: 280% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: bgMegaShine 6s linear infinite;
  will-change: mask-position, -webkit-mask-position;
}
@keyframes bgMegaShine {
  /* Start with the bright band off the right edge, sweep it across
     until it's off the left, then loop. The 1.5s "rest" between
     0%→25% and 75%→100% is empty space at either end so the user
     sees a clean "all dark" pause between sweeps. */
  0%   { -webkit-mask-position: 180% 0%; mask-position: 180% 0%; }
  100% { -webkit-mask-position: -80% 0%; mask-position: -80% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-megatext {
    animation: none;
    -webkit-mask-image: none; mask-image: none;
    opacity: 0.12;
  }
}
@media (max-width: 720px) {
  /* "GEOWEB.TW" is 9 chars + the dot has tighter advance than letters
     so the visual center is offset slightly right. Drop letter-spacing
     to 0 + reduce font-size so the whole word fits well inside the
     viewport with margin both sides. overflow:hidden on the layer
     itself prevents any residual edge clipping from looking lopsided. */
  .bg-megatext {
    font-size: clamp(28px, 9vw, 72px);
    letter-spacing: 0;
    overflow: hidden;
  }
}
@media (max-width: 380px) {
  .bg-megatext { font-size: clamp(24px, 8vw, 48px); }
}

/* Layer 3: Noise texture — subtle grain */
.bg-noise-layer {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.bg-dot-pattern, .bg-gradient-fade, .bg-gradient-mesh, .bg-noise { display: none !important; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-height);
  background: rgba(12, 18, 34, 0.85);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
}
.header-inner {
  max-width: 1280px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text-bright); }
.brand:hover { color: var(--text-bright); }
.brand-logo { width: 24px; height: 24px; opacity: 0.9; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name {
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-bright);
  font-family: var(--font-mono);
}
.brand-tagline {
  font-size: 12px; color: var(--text-dim); letter-spacing: 0.06em;
  font-family: var(--font-mono); text-transform: uppercase;
}
.main-nav { display: flex; gap: 2px; }
.nav-link {
  padding: 6px 14px; font-size: 14px; font-weight: 500;
  color: var(--text); border-radius: var(--radius-sm);
  transition: all var(--transition);
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nav-link:hover { color: var(--text-bright); background: var(--bg-hover); }
.nav-link.active {
  color: var(--accent); background: var(--accent-dim);
  border: 1px solid var(--accent-border);
}

/* ---------- Main Container ---------- */
.main-container {
  max-width: 1280px; margin: 0 auto;
  padding: calc(var(--header-height) + 48px) 32px 96px;
  position: relative; z-index: 1;
}

/* ---------- Hero ---------- */
.hero-section {
  text-align: center; padding: 48px 0 40px; position: relative;
}
.hero-section::before {
  content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 300px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(52, 211, 153, 0.06) 0%, transparent 70%);
  filter: blur(40px);
}
.hero-title {
  font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  color: var(--text-bright);
  font-family: var(--font);
}
.hero-desc {
  font-size: 14px; color: var(--text); max-width: 520px;
  margin: 16px auto 0; line-height: 1.7;
}
.hero-stat {
  font-size: 13px; color: var(--text-dim);
  margin: 14px auto 0;
  letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
}
.hero-stat strong {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0 2px;
}
.hero-stat[hidden] { display: none; }
/* Live indicator — green dot pulsing in sync with the 60s poll
   interval. Soft glow halo keeps it on-brand without screaming. */
.hero-stat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(62,231,154,0.55);
  animation: heroStatPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes heroStatPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(62,231,154,0.55);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(62,231,154,0);
    opacity: 0.55;
  }
}

/* ---------- Buttons (PrismML ghost style) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; font-size: 14px; font-weight: 600;
  border-radius: var(--radius-sm); transition: all var(--transition);
  white-space: nowrap; border: 1px solid var(--border);
  background: transparent; color: var(--text);
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-bright); }
.btn-primary {
  background: var(--accent); color: #0a0a0a; border: 1px solid var(--accent);
  font-weight: 700;
}
.btn-primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
.btn-secondary {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { color: var(--text-bright); border-color: var(--border-strong); }
.btn-lg { padding: 14px 28px; font-size: 15px; border-radius: var(--radius); }
.btn-pdf {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #0a0a0a; font-size: 14px;
  padding: 12px 24px; border-radius: var(--radius-sm);
  font-weight: 700; transition: all var(--transition);
  border: 1px solid var(--accent);
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn-pdf:hover {
  background: var(--accent-hover); color: #0a0a0a;
}
/* M3-40 — pdfRow lays out PDF (primary) + Consult (secondary) side
   by side; wraps on narrow viewports. */
.pdf-row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
/* M3-40 — secondary outline button matched to .btn-pdf's geometry
   so the two read as a CTA pair, not a primary + afterthought. */
.btn-consult {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--accent);
  font-size: 14px; padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: 700; transition: all var(--transition);
  border: 1px solid var(--accent);
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.btn-consult:hover {
  background: rgba(62,231,154,0.10); color: var(--accent);
}
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ---------- Input ---------- */
.url-input-wrapper {
  max-width: 640px; margin: 32px auto 0; position: relative;
}
.url-input-group {
  display: flex; gap: 0; align-items: stretch;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color var(--transition);
}
.url-input-group:focus-within {
  border-color: var(--accent);
}
.url-input-field {
  flex: 1; padding: 16px 20px; font-size: 14px;
  background: transparent; color: var(--text-bright);
  font-family: var(--font-mono);
}
.url-input-field::placeholder { color: var(--text-dim); font-family: var(--font-mono); }
.url-input-btn {
  padding: 10px 24px; margin: 6px;
  background: var(--accent); color: #0a0a0a;
  font-weight: 700; font-size: 14px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.url-input-btn:hover { background: var(--accent-hover); }
.url-input-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.url-input-error { color: var(--red); font-size: 13px; margin-top: 8px; text-align: center; font-family: var(--font-mono); }
.url-example { text-align: center; margin-top: 12px; font-size: 13px; color: var(--text-dim); font-family: var(--font-mono); }
.url-example a { color: var(--accent); font-family: var(--font-mono); }

/* ==========================================================================
   DASHBOARD — PrismML border-grid + v9 PC-first layout
   ========================================================================== */
.dashboard {
  max-width: 1280px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--section-gap);
}

/* URL pill + timestamp row */
.dashboard-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.score-url-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border);
  font-size: 14px; color: var(--text);
  font-family: var(--font-mono);
}
.analysis-timestamp {
  font-size: 13px; color: var(--text-dim);
  font-family: var(--font-mono);
}
.btn-reanalyze {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; font-size: 13px; font-weight: 600;
  color: var(--text); background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: all var(--transition); cursor: pointer;
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn-reanalyze:hover { color: var(--accent); border-color: var(--accent-border); }

/* ==========================================================================
   OVERVIEW ROW — Score + KPI + Radar + AI in ONE compact row
   ========================================================================== */
/* ==========================================================================
   RESULT HERO — Score + Stats + Radar in one beautiful section
   ========================================================================== */
.result-hero {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
}
.result-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(52,211,153,0.04) 0%, transparent 60%),
              radial-gradient(ellipse 50% 70% at 80% 50%, rgba(96,165,250,0.03) 0%, transparent 60%);
}
.result-hero-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 48px;
  padding: 40px 48px;
}
.result-hero-left {
  display: flex; align-items: center; gap: 40px; flex-shrink: 0;
}
.result-hero-score-wrap { flex-shrink: 0; }
.result-hero-stats {
  display: flex; flex-direction: column; gap: 16px;
}
.rh-stat {
  display: flex; align-items: baseline; gap: 10px;
}
.rh-stat-val {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  line-height: 1; letter-spacing: -0.02em;
}
.rh-stat-lbl {
  font-size: 14px; color: var(--text-dim); font-weight: 500;
}
.result-hero-right {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}
.result-hero-canvas {
  max-height: 260px; width: 100%;
}

/* Legacy compat — `.ai-panel` was the M3-9 era class that
   renderAiContentSection used; M3-13 now reuses `.agentic-web-panel` so
   the legacy class no longer needs to be hidden, but other entries
   (.kpi-strip, .score-radar etc.) are still legacy dashboards we don't
   render any more. */
.kpi-strip, .kpi-row, .score-radar, .score-radar-row, .overview-row { display: none; }

/* Panel generic (used inside border-grids) */
.panel {
  padding: var(--card-pad);
}
.panel-title {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

/* ==========================================================================
   SECTION LABELS (PrismML uppercase mono)
   ========================================================================== */
.section-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 16px 0 12px;
}
.section-label-lg {
  font-size: 16px;
  color: var(--accent);
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.scanned-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: 0.03em;
  margin-left: 8px;
  text-transform: none;
}
.scanned-pages-wrap {
  margin-bottom: 16px;
}
.scanned-file-main {
  color: var(--accent) !important;
  font-weight: 500 !important;
}
.scanned-file-url {
  color: var(--text);
}
.quick-score-tag {
  font-size: 10px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 4px;
  font-family: var(--font-mono);
}

/* ==========================================================================
   SCORE DISPLAY
   ========================================================================== */
.score-hero {
  text-align: center; padding: 0;
}
.score-circle-wrap {
  position: relative; width: 120px; height: 120px; margin: 0 auto;
}
.score-circle-wrap::before {
  content: ''; position: absolute; inset: -20px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.08) 0%, transparent 70%);
  border-radius: 50%; z-index: -1; filter: blur(12px);
}
.score-circle-glow { display: none; }
.score-circle-svg {
  width: 120px; height: 120px;
  transform: rotate(-90deg);
}
.score-circle-bg {
  fill: none; stroke: rgba(255, 255, 255, 0.04); stroke-width: 2;
}
.score-circle-fill {
  fill: none; stroke-width: 2; stroke-linecap: round;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.score-circle-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.score-number {
  font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.score-label {
  font-size: 13px; color: var(--text-dim); margin-top: 4px;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-family: var(--font-mono);
}
.score-a { color: var(--green); }
.score-b { color: var(--blue); }
.score-c { color: var(--yellow); }
.score-d { color: var(--orange); }
.score-f { color: var(--red); }

/* Stroke grade colors for SVG */
.stroke-a { stroke: var(--green); }
.stroke-b { stroke: var(--blue); }
.stroke-c { stroke: var(--yellow); }
.stroke-d { stroke: var(--orange); }
.stroke-f { stroke: var(--red); }

/* Grade badge */
.grade-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; margin-top: 16px;
  font-family: var(--font-mono);
}
.grade-a { background: rgba(0,230,118,0.08); color: var(--green); border: 1px solid rgba(0,230,118,0.15); }
.grade-b { background: rgba(68,138,255,0.08); color: var(--blue); border: 1px solid rgba(68,138,255,0.15); }
.grade-c { background: rgba(255,214,0,0.08); color: var(--yellow); border: 1px solid rgba(255,214,0,0.15); }
.grade-d { background: rgba(255,145,0,0.08); color: var(--orange); border: 1px solid rgba(255,145,0,0.15); }
.grade-f { background: rgba(255,82,82,0.08); color: var(--red); border: 1px solid rgba(255,82,82,0.15); }

/* ==========================================================================
   AI CONTENT SECTION (PrismML panel)
   ========================================================================== */
.ai-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.ai-content-section {
  /* Used as a wrapper class when section already has .ai-panel */
}
.ai-content-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.ai-content-title {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ai-content-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  font-family: var(--font-mono);
}
.ai-content-badge.low { background: rgba(0,230,118,0.08); color: var(--green); border: 1px solid rgba(0,230,118,0.12); }
.ai-content-badge.medium { background: rgba(255,214,0,0.08); color: var(--yellow); border: 1px solid rgba(255,214,0,0.12); }
.ai-content-badge.high { background: rgba(255,82,82,0.08); color: var(--red); border: 1px solid rgba(255,82,82,0.12); }
.ai-content-value {
  font-size: 24px; font-weight: 700; letter-spacing: -0.03em;
  margin-bottom: 4px;
  font-family: var(--font-mono);
}
.ai-content-label {
  font-size: 13px; color: var(--text-dim); margin-bottom: 16px;
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ai-content-meter {
  width: 100%; height: 2px; background: rgba(255,255,255,0.04);
  border-radius: 1px; overflow: hidden; margin-bottom: 12px;
}
.ai-content-meter-fill {
  height: 100%; border-radius: 1px;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-content-meter-fill.low { background: var(--green); }
.ai-content-meter-fill.medium { background: var(--yellow); }
.ai-content-meter-fill.high { background: var(--red); }
.ai-content-axis-note {
  font-size: 11px; color: var(--text-dim); line-height: 1.55;
  padding: 8px 10px; margin: 10px 0 12px;
  background: rgba(59, 130, 246, 0.08);
  border-left: 2px solid #3b82f6;
  border-radius: 2px;
}
.ai-content-axis-note strong { color: #60a5fa; font-weight: 600; }
.ai-content-signals {
  display: flex; flex-direction: column; gap: 6px;
}
.ai-content-signal {
  font-size: 14px; color: var(--text-dim); display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
.ai-content-signal::before {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: var(--text-dim); flex-shrink: 0;
}

/* ==========================================================================
   M3-9 — AGENT 就緒度 SECTION (informational, NOT in overall score)
   Mirrors the AI-content panel visual language; lives between dimension
   grid and external visibility score.
   ========================================================================== */
.agentic-web-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  background: var(--bg-card);
}
.agentic-web-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.agentic-web-title {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim);
}
.agentic-web-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; font-family: var(--font-mono);
}
.agentic-web-badge.good    { background: rgba(0,230,118,0.08);  color: var(--green);  border: 1px solid rgba(0,230,118,0.12); }
.agentic-web-badge.partial { background: rgba(255,214,0,0.08);  color: var(--yellow); border: 1px solid rgba(255,214,0,0.12); }
.agentic-web-badge.low     { background: rgba(255,82,82,0.08);  color: var(--red);    border: 1px solid rgba(255,82,82,0.12); }
.agentic-web-value {
  font-size: 24px; font-weight: 700; letter-spacing: -0.03em;
  margin-bottom: 4px; font-family: var(--font-mono);
}
.agentic-web-label {
  font-size: 12px; color: var(--text-dim); margin-bottom: 12px;
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
.agentic-web-meter {
  width: 100%; height: 2px; background: rgba(255,255,255,0.04);
  border-radius: 1px; overflow: hidden; margin-bottom: 12px;
}
.agentic-web-meter-fill {
  height: 100%; border-radius: 1px;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.agentic-web-meter-fill.good    { background: var(--green); }
.agentic-web-meter-fill.partial { background: var(--yellow); }
.agentic-web-meter-fill.low     { background: var(--red); }
.agentic-web-axis-note {
  font-size: 11px; color: var(--text-dim); line-height: 1.55;
  padding: 8px 10px; margin: 10px 0 12px;
  background: rgba(59, 130, 246, 0.08);
  border-left: 2px solid #3b82f6;
  border-radius: 2px;
}
.agentic-web-axis-note strong { color: #60a5fa; font-weight: 600; }
.agentic-web-signals {
  display: flex; flex-direction: column; gap: 6px;
}
.agentic-web-signal {
  font-size: 13px; color: var(--text-dim);
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
}
.agentic-web-signal-status {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0; min-width: 60px; text-align: center;
}
.agentic-web-signal.status-pass .agentic-web-signal-status { color: var(--green); }
.agentic-web-signal.status-warn .agentic-web-signal-status { color: var(--yellow); }
.agentic-web-signal.status-fail .agentic-web-signal-status { color: var(--red); }

/* ==========================================================================
   DIMENSION GRID — 2 col with shared borders (PrismML)
   ========================================================================== */
.dim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start; /* each column independent height */
}
.dim-col {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Dimension Cards (no border-left color, mono abbreviation, compact) */
.dim-card {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  transition: all var(--transition); position: relative;
}
.dim-card:last-child { border-bottom: none; }
.dim-card:hover {
  background: var(--bg-hover);
  box-shadow: inset 0 0 30px rgba(52, 211, 153, 0.02);
}
/* cards inside .dim-col: bottom border, last child none */
/* Handle odd last child */
/* removed — single column layout */

.dim-card:hover {
  background: var(--bg-hover);
}
.dim-header {
  display: flex; align-items: center; padding: 18px var(--card-pad);
  cursor: pointer; user-select: none; gap: 14px;
}
.dim-icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
  font-family: var(--font-mono);
  border: 1px solid var(--border);
  color: var(--text);
  background: transparent;
}
.dim-icon.pass { border-color: rgba(0,230,118,0.2); color: var(--green); background: rgba(0,230,118,0.06); }
.dim-icon.warn { border-color: rgba(255,214,0,0.2); color: var(--yellow); background: rgba(255,214,0,0.06); }
.dim-icon.fail { border-color: rgba(255,82,82,0.2); color: var(--red); background: rgba(255,82,82,0.06); }
.dim-info { flex: 1; min-width: 0; }
.dim-name { font-size: 16px; font-weight: 600; color: var(--text-bright); }
.dim-summary {
  font-size: 13px; color: var(--text-dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dim-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dim-score-bar { width: 48px; height: 2px; background: rgba(255,255,255,0.04); border-radius: 1px; overflow: hidden; }
.dim-score-fill { height: 100%; border-radius: 1px; transition: width 0.8s ease; }
.dim-score-num {
  font-size: 14px; font-weight: 700; min-width: 28px; text-align: right;
  font-family: var(--font-mono);
}
.dim-badges { display: flex; gap: 4px; }
.dim-badge {
  font-size: 12px; font-weight: 600; padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}
.dim-badge.pass-badge { color: var(--green); background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.12); }
.dim-badge.warn-badge { color: var(--yellow); background: rgba(255,214,0,0.08); border: 1px solid rgba(255,214,0,0.12); }
.dim-badge.fail-badge { color: var(--red); background: rgba(255,82,82,0.08); border: 1px solid rgba(255,82,82,0.12); }
.dim-chevron {
  width: 16px; height: 16px; color: var(--text-dim);
  transition: transform 0.2s ease; flex-shrink: 0;
}
.dim-card.expanded .dim-chevron { transform: rotate(180deg); }
.dim-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.dim-card.expanded .dim-body { max-height: 2000px; }
.dim-content { padding: 0 var(--card-pad) 20px; border-top: 1px solid var(--border); }

/* Check items */
.check-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.check-item:last-child { border-bottom: none; }
.check-icon {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0; margin-top: 6px;
}
.check-icon.pass { background: var(--green); }
.check-icon.warn { background: var(--yellow); }
.check-icon.fail { background: var(--red); }
.check-body { flex: 1; min-width: 0; }
.check-name { font-size: 15px; font-weight: 500; color: var(--text-bright); }
.check-value { font-size: 13px; color: var(--text-dim); margin-left: 8px; font-family: var(--font-mono); }
.check-rec { font-size: 14px; color: var(--text); margin-top: 4px; line-height: 1.6; }
.check-code { margin-top: 8px; }
.check-code pre {
  padding: 12px 16px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; line-height: 1.5; color: var(--text);
  font-family: var(--font-mono);
  overflow-x: auto; max-height: 200px;
}
.btn-copy {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; font-size: 13px; font-weight: 600;
  color: var(--text-dim); border: 1px solid var(--border);
  border-radius: var(--radius-sm); transition: all var(--transition); margin-bottom: 4px;
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn-copy:hover { color: var(--accent); border-color: var(--accent-border); }
.btn-copy.copied { color: var(--green); border-color: rgba(0,230,118,0.2); }

/* ==========================================================================
   BOTTOM ROW — side by side with shared border
   ========================================================================== */
.bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.bottom-row > .panel:first-child {
  border-right: 1px solid var(--border);
}

/* ---------- Priority Cards ---------- */
.priority-cards { display: flex; flex-direction: column; gap: 0; }
.priority-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: all var(--transition);
}
.priority-card:last-child { border-bottom: none; }
.priority-rank {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
  font-family: var(--font-mono);
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border);
}
.priority-rank.top { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); }
.priority-rank.normal { color: var(--text-dim); }
.priority-body { flex: 1; min-width: 0; }
.priority-dim {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-sm);
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  color: var(--accent); margin-bottom: 4px;
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.priority-issue { font-size: 14px; color: var(--text); line-height: 1.5; }
.priority-gain {
  flex-shrink: 0; font-size: 13px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

/* ==========================================================================
   PROGRESS
   ========================================================================== */
.progress-container {
  /* The progress stack (bar + status + chips) drives the layout and
     stays centered exactly as before — max-width 640 + margin auto,
     no flex/grid pushing it off-axis. The sonar floats outside on
     the left via absolute positioning so it can't squeeze or shift
     the centered content. */
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}
.progress-right { min-width: 0; }

/* ==========================================================================
   M3-35 — Sonar radar (logo-styled, mounted to the LEFT of the bar)
   ========================================================================== */
.sonar-wrap {
  /* Default (narrow viewport): in-flow above the centered progress
     stack so it's still visible without clipping off-screen. The
     `min-width: 1100px` rule below promotes it to a side-mounted
     absolute when there's room outside the 640px stack. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto 16px;
  pointer-events: none;
}
@media (min-width: 1100px) {
  /* Wide viewport: float outside the centered progress stack — left
     side, vertical center. Progress stays exactly mid-viewport. */
  .sonar-wrap {
    position: absolute;
    right: calc(100% + 24px);
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    margin: 0;
  }
}
.sonar-svg {
  width: 200px; height: 200px;
  display: block;
  filter: drop-shadow(0 0 16px rgba(62,231,154,0.10));
}
/* Two concentric rings echo the logo (r=20 + r=14 with opacity gap). */
.sonar-grid-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.5;
}
.sonar-grid-ring-outer { opacity: 0.30; }
.sonar-grid-ring-inner { opacity: 0.50; }
/* Crosshair tick marks — short stubs hugging the center node. */
.sonar-crosshair {
  stroke: var(--accent);
  stroke-width: 0.6;
  stroke-linecap: round;
  opacity: 0.6;
}
/* Inner analysis node — soft halo + crisp solid dot, matching logo. */
.sonar-center-halo {
  fill: var(--accent);
  opacity: 0.15;
}
.sonar-center-dot {
  fill: var(--accent);
  filter: drop-shadow(0 0 3px rgba(62,231,154,0.6));
}
/* Sweep arc — a single 90° quarter-arc, NOT a flood wedge. The whole
   <g> rotates around the SVG center. */
.sonar-sweep-arm {
  animation: sonarSweep 2.4s linear infinite;
  transform-origin: 50px 50px;
}
/* Per-segment opacity + stroke-width are set inline (24-segment
   smooth ease-out trail). CSS supplies the colour + linecap only. */
.sonar-sweep-arc {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
}
/* Leading radial line — center → outer ring along the sweep edge.
   Slightly soft via stroke-opacity so it doesn't read as a hard
   spoke. The whole sonar-sweep-arm <g> rotates so this line
   carries with it. */
.sonar-sweep-line {
  stroke: var(--accent);
  stroke-width: 0.7;
  stroke-linecap: round;
  opacity: 0.7;
}
@keyframes sonarSweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Outer nodes — three states. r + opacity are set inline per-variant
   in JS to give an uneven, scan-like distribution. */
.sonar-node {
  transition: r 0.25s ease, fill 0.25s ease, opacity 0.25s ease;
  fill: var(--accent);
}
.sonar-node-idle {
  /* idle uses inline opacity from variant table (0.40–0.70) */
}
.sonar-node-done {
  /* full opacity, no glow — a calmer "already scanned" look */
}
.sonar-node-current {
  filter: drop-shadow(0 0 3px rgba(62,231,154,0.9));
}
/* Ping — expanding circle that fades out. SMIL-driven; JS removes
   the DOM node ~0.9s in. */
.sonar-ping {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.6;
  pointer-events: none;
}

@media (max-width: 720px) {
  .sonar-svg { width: 120px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .sonar-sweep-arm { animation: none; }
}

.progress-bar-wrap {
  height: 2px; background: rgba(255,255,255,0.04);
  border-radius: 1px; overflow: hidden; margin-bottom: 16px;
  position: relative;
}
.progress-bar-fill {
  height: 100%; border-radius: 1px;
  background: var(--accent);
  transition: width 0.5s ease;
  position: relative;
}
.progress-bar-fill::after {
  content: '';
  position: absolute; right: 0; top: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
  animation: progressPulse 1.5s ease-in-out infinite;
}
@keyframes progressPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.6); }
}
.progress-status {
  text-align: center; font-size: 15px; color: var(--text); font-weight: 500;
  font-family: var(--font-mono);
}
.progress-steps {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 16px;
}
/* M3-36 — slow-last-step hint, fades in when the analysis hits the
   tail dim (external visibility + language naturalness can take 30s+
   on top of the per-dim work). Calm dim text, no scary alarm color. */
.progress-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 14px;
  letter-spacing: 0.02em;
  animation: fadeIn 0.4s ease-out;
}
.progress-hint::before {
  content: '⏳ ';
  margin-right: 4px;
  opacity: 0.7;
}
.progress-hint.hidden { display: none; }
.progress-step {
  font-size: 13px; padding: 4px 10px; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); transition: all var(--transition);
  font-family: var(--font-mono);
}
.progress-step.active {
  color: var(--accent); border-color: var(--accent-border);
}
.progress-step.done {
  color: var(--green); border-color: rgba(0,230,118,0.15);
}
.progress-step.done::before { content: '\2713 '; }

/* ==========================================================================
   SHARE LINK
   ========================================================================== */
.share-section {
  /* Inside a panel, no extra border */
}
.share-row { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; }
.share-url {
  flex: 1; padding: 10px 14px; font-size: 13px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   COMPARE
   ========================================================================== */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-label {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-dim);
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}
.compare-column {
  display: flex; flex-direction: column; align-items: center;
}
.compare-vs {
  font-size: 14px; font-weight: 700; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
}

/* card-static for comparison page */
.card-static {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent;
}
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--card-pad);
  background: transparent;
  transition: all var(--transition);
}
.card:hover { border-color: var(--border-strong); }
.card-title {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--border); padding: 24px 0; margin-top: 64px;
  position: relative; z-index: 1;
}
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; text-align: center; }
.footer-text { font-size: 13px; color: var(--text-dim); letter-spacing: 0.04em; font-family: var(--font-mono); }

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-slide-up { animation: fadeInUp 0.3s ease-out; }
.animate-pulse { animation: pulse 2s infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.stagger-children > * { opacity: 0; animation: fadeInUp 0.3s ease-out forwards; }
.stagger-children > *:nth-child(1) { animation-delay: 0.03s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.08s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.13s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.18s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.23s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.28s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.33s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.38s; }
.stagger-children > *:nth-child(9) { animation-delay: 0.43s; }
.stagger-children > *:nth-child(10) { animation-delay: 0.48s; }

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.text-center { text-align: center; }
.text-xs { font-size: 13px; } .text-sm { font-size: 14px; }
.text-lg { font-size: 16px; } .text-xl { font-size: 24px; }
.font-medium { font-weight: 500; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; }
.text-primary { color: var(--text-bright); }
.text-secondary { color: var(--text); }
.text-muted { color: var(--text-dim); }
.mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.min-h-0 { min-height: 0; }
.w-full { width: 100%; }
.flex-shrink-0 { flex-shrink: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Page Transitions ---------- */
#app-root {
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* M3-18: pre-rendered SEO/AEO content hidden once SPA hydrates. The
   block stays in the DOM (so Google's JS renderer still sees it as
   supplementary content) but doesn't double up visually with the SPA
   hero. Non-JS crawlers and visitors with JS disabled never see this
   rule fire, so they get the full text content as primary view. */
body.spa-ready #seo-content {
  display: none;
}
#app-root.page-exit {
  opacity: 0;
  transform: translateY(4px);
}
#app-root.page-enter {
  animation: pageEnter 0.25s ease-out forwards;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Score Pill Row ---------- */
.score-pill-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 8px;
}

/* ---------- Stat Chips ---------- */
.stat-chips {
  display: flex; justify-content: center; gap: 8px; margin-top: 20px; flex-wrap: wrap;
}
.stat-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border);
  font-size: 13px; color: var(--text);
  font-family: var(--font-mono);
  transition: all var(--transition);
}
.stat-chip:hover { border-color: var(--border-strong); color: var(--text-bright); }
.stat-chip-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.stat-chip-dot.pass { background: var(--green); }
.stat-chip-dot.warn { background: var(--yellow); }
.stat-chip-dot.fail { background: var(--red); }

/* ---------- Focus States ---------- */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
input:focus-visible {
  border-color: var(--accent) !important;
}

/* ==========================================================================
   HEADER USER MENU
   ========================================================================== */
.header-user-menu {
  position: relative; display: flex; align-items: center;
}
.header-user-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border);
  cursor: pointer; transition: all var(--transition);
}
.header-user-trigger:hover { border-color: var(--border-strong); }
.header-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
  font-family: var(--font-mono);
}
.header-user-name {
  font-size: 14px; font-weight: 500; color: var(--text);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono);
}
.header-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 200px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; z-index: 200;
  animation: dropdownIn 0.1s ease-out;
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.header-dropdown-item {
  display: block; padding: 10px 16px; font-size: 14px;
  color: var(--text); transition: all var(--transition);
  cursor: pointer; text-decoration: none;
  font-family: var(--font-mono);
}
.header-dropdown-item:hover { background: var(--bg-hover); color: var(--text-bright); }
.header-dropdown-company {
  font-size: 12px; color: var(--text-dim); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); cursor: default;
  padding: 8px 16px;
  font-family: var(--font-mono);
}
.header-dropdown-company:hover { background: transparent; color: var(--text-dim); }
.header-dropdown-logout { color: var(--red); }
.header-dropdown-logout:hover { background: rgba(255,82,82,0.06); }

/* ---------- Hamburger (mobile) ---------- */
.hamburger-btn {
  display: none; width: 36px; height: 36px; border-radius: var(--radius-sm);
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  cursor: pointer; color: var(--text);
  transition: all var(--transition);
}
.hamburger-btn:hover { border-color: var(--border-strong); color: var(--text-bright); }
.hamburger-btn svg { width: 16px; height: 16px; }
.main-nav.nav-open {
  display: flex !important; position: absolute; top: var(--header-height);
  left: 0; right: 0; flex-direction: column; padding: 8px 16px;
  background: rgba(10, 10, 10, 0.96); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border); z-index: 100;
}
.main-nav.nav-open .nav-link { padding: 12px 16px; width: 100%; }

/* ==========================================================================
   REGISTRATION GATE
   ========================================================================== */
.reg-gate {
  position: relative; overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px 40px;
  text-align: center;
  background: transparent;
}
.reg-gate-exit {
  animation: gateExit 0.3s ease-in forwards;
}
@keyframes gateExit {
  to { opacity: 0; transform: translateY(-12px); max-height: 0; padding: 0; margin: 0; overflow: hidden; }
}
.reg-gate-icon {
  font-size: 14px; margin-bottom: 16px; font-family: var(--font-mono);
  color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase;
}
.reg-gate-title {
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-bright);
  margin-bottom: 8px;
}
.reg-gate-subtitle {
  font-size: 15px; color: var(--text); max-width: 440px;
  margin: 0 auto 32px; line-height: 1.7;
}
.reg-gate-form {
  max-width: 400px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.reg-field { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.reg-field-label {
  font-size: 13px; font-weight: 600; color: var(--text);
  letter-spacing: 0.06em; font-family: var(--font-mono);
  text-transform: uppercase;
}
.reg-field-input {
  padding: 12px 14px; font-size: 15px;
  background: var(--bg); color: var(--text-bright);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
  font-family: var(--font-mono);
}
.reg-field-input::placeholder { color: var(--text-dim); }
.reg-field-input:focus {
  border-color: var(--accent);
}
.reg-field-input.reg-field-invalid {
  border-color: var(--red) !important;
}
.reg-field-error {
  font-size: 13px; color: var(--red); margin-top: 2px;
  font-family: var(--font-mono);
}
.reg-gate-submit {
  margin-top: 8px; padding: 14px 28px; font-size: 15px; font-weight: 700;
  color: #0a0a0a; border: none; border-radius: var(--radius-sm);
  background: var(--accent);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.reg-gate-submit:hover {
  background: var(--accent-hover);
}
.reg-gate-submit:active { transform: scale(0.98); }
.reg-gate-submit-loader {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; color: var(--text); font-size: 14px;
  font-family: var(--font-mono);
}
.spinner-sm {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.06);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.reg-gate-error {
  font-size: 13px; color: var(--red); text-align: center;
  padding: 8px; background: rgba(255,82,82,0.06);
  border-radius: var(--radius-sm); border: 1px solid rgba(255,82,82,0.12);
  font-family: var(--font-mono);
}
.reg-gate-login-section {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--border); text-align: center;
}
.reg-gate-login-link {
  font-size: 14px; color: var(--accent); cursor: pointer;
  transition: color var(--transition);
  font-family: var(--font-mono);
}
.reg-gate-login-link:hover { color: var(--accent-hover); }
.reg-gate-login-form {
  max-width: 400px; margin: 16px auto 0;
  display: flex; flex-direction: column; gap: 12px;
}

/* ---------- Dimension Card Lock Overlay ---------- */
.dim-card-locked {
  position: relative; overflow: hidden;
}
/* Header stays fully visible — title, score, badges all readable */
.dim-card-locked > .dim-header {
  opacity: 1; filter: none; pointer-events: none;
}
/* Body peeks out blurred — shows there's content behind */
.dim-card-locked > .dim-body {
  display: block; max-height: 80px; overflow: hidden;
  filter: blur(6px); opacity: 0.4;
  -webkit-filter: blur(6px);
  pointer-events: none;
}
/* Frosted glass overlay sits below header, over the body area */
.dim-lock-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  top: 58px; /* below header height */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(10, 10, 10, 0.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  z-index: 10;
}
/* Unified locked action button — used in dim cards, priority mask, share, PDF */
.locked-action-btn, .dim-lock-btn {
  font-size: 14px; color: var(--text-bright);
  font-weight: 600; font-family: var(--font);
  padding: 10px 24px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  cursor: pointer;
  transition: all 0.2s ease;
  pointer-events: auto;
  display: inline-block;
  text-align: center;
}
.locked-action-btn:hover, .dim-lock-btn:hover {
  background: rgba(52, 211, 153, 0.18);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.gated-tooltip-btn { margin-top: 8px; }
.locked-pdf-btn { width: 100%; margin-top: 8px; }

/* ---------- M3-29: Locked Signal Detail (AGENT 就緒度 / AI 程式生成跡象) ----
   Same visual contract as .dim-card-locked: header + score above remain
   visible (handled by leaving them outside this wrap); the detail rows
   become a fake "shape" placeholder that's blurred and overlaid with the
   register-to-unlock button. The placeholder rows are inert <div> stubs
   with no real check data, so DevTools snooping yields nothing useful.
   ------------------------------------------------------------------------ */
.locked-signal-wrap {
  position: relative;
  margin-top: 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: 168px;
}
.locked-signal-fake {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 4px;
  filter: blur(6px); opacity: 0.45;
  -webkit-filter: blur(6px);
  pointer-events: none;
  user-select: none;
}
.locked-signal-fake-row {
  display: flex; align-items: center; gap: 10px;
}
.locked-signal-fake-dot {
  flex: 0 0 auto;
  width: 56px; height: 18px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
}
.locked-signal-fake-bar {
  display: inline-block;
  height: 14px;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
}
.locked-signal-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,10,0.50);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------- Priority Locked Mask ---------- */
.priority-locked-mask {
  position: relative; padding: 24px 0; text-align: center;
  margin-top: -8px;
}
.priority-locked-mask::before {
  content: ''; position: absolute; top: -48px; left: 0; right: 0; height: 48px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.priority-locked-inner {
  font-size: 13px; color: var(--text-dim); font-weight: 500;
  padding: 10px 20px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Gated Overlay (Share/PDF) ---------- */
.gated-overlay-wrap {
  position: relative; overflow: hidden;
}
.gated-blur {
  filter: blur(4px); opacity: 0.15; pointer-events: none;
}
.gated-tooltip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  padding: 8px 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  z-index: 5; white-space: nowrap;
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn-pdf-locked {
  opacity: 0.3; cursor: not-allowed; pointer-events: none;
  position: relative; display: inline-flex; align-items: center;
  font-weight: 600; font-size: 14px; padding: 12px 24px;
  border-radius: var(--radius-sm); background: transparent;
  color: var(--text-dim); border: 1px solid var(--border);
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn-pdf-locked::after { display: none; }
.btn-pdf-lock-tip {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  font-size: 12px; white-space: nowrap; color: var(--text-dim);
  padding: 3px 10px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  font-family: var(--font-mono);
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; min-width: 280px; max-width: 400px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px; color: var(--text-bright);
  pointer-events: auto;
  font-family: var(--font-mono);
  transform: translateX(120%); opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.toast.toast-enter {
  transform: translateX(0); opacity: 1;
}
.toast.toast-exit {
  transform: translateX(120%); opacity: 0;
}
.toast-success { border-left: 2px solid var(--green); }
.toast-error { border-left: 2px solid var(--red); }
.toast-info { border-left: 2px solid var(--accent); }
.toast-icon {
  font-size: 13px; font-weight: 700; flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
}
.toast-success .toast-icon { background: var(--green); }
.toast-error .toast-icon { background: var(--red); }
.toast-info .toast-icon { background: var(--accent); }
.toast-message { flex: 1; line-height: 1.4; }
.toast-close {
  flex-shrink: 0; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-dim); cursor: pointer;
  border-radius: var(--radius-sm); transition: all var(--transition);
}
.toast-close:hover { color: var(--text-bright); background: var(--bg-hover); }

/* ---------- Shake Animation ---------- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
.shake { animation: shake 0.25s ease; }

/* ==========================================================================
   REGISTRATION MODAL (overlay)
   ========================================================================== */
.reg-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s ease-out;
}
.reg-modal-backdrop.reg-modal-exit {
  animation: fadeOut 0.25s ease-in forwards;
}
@keyframes fadeOut {
  to { opacity: 0; }
}
.reg-modal {
  position: relative;
  width: 90%; max-width: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  max-height: 90vh;
  overflow-y: auto;
}
.reg-modal-close {
  position: absolute; top: 12px; right: 16px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-mono);
}
.reg-modal-close:hover { color: var(--text-bright); border-color: var(--border-strong); }

/* ==========================================================================
   UNLOCK CTA BAR
   ========================================================================== */
.unlock-cta {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  background: var(--accent-dim);
  font-size: 15px; color: var(--text);
  flex-wrap: wrap;
}
.unlock-cta-btn {
  padding: 10px 24px; font-size: 14px; font-weight: 700;
  background: var(--accent); color: #0a0a0a;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--transition);
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.04em; white-space: nowrap;
}
.unlock-cta-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ==========================================================================
   M3-31 — Admin Dashboard (VIP-only funnel + event log)
   ========================================================================== */
.admin-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
.admin-window-bar {
  display: inline-flex; gap: 2px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 3px;
  font-family: var(--font-mono);
  margin: 0 0 24px;
}
.admin-window-btn {
  padding: 8px 18px; font-size: 13px; font-weight: 600;
  color: var(--text-dim); background: transparent;
  border: none; border-radius: 6px;
  cursor: pointer; letter-spacing: 0.03em;
  transition: all 0.18s ease;
}
.admin-window-btn:hover {
  color: var(--text); background: rgba(255,255,255,0.05);
}
.admin-window-btn.active {
  background: rgba(62,231,154,0.12);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(62,231,154,0.22);
}
.admin-card {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  background: linear-gradient(180deg,
    rgba(15,21,35,0.85) 0%,
    rgba(11,16,28,0.95) 100%);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset,
              0 12px 24px -16px rgba(0,0,0,0.5);
}
.admin-card-title {
  font-size: 16px; font-weight: 700;
  color: var(--text); margin: 0 0 18px;
  letter-spacing: 0.02em;
}
.admin-funnel-stages {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 24px;
}
.admin-funnel-row {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  align-items: center; gap: 14px;
}
.admin-funnel-label {
  display: flex; align-items: center; gap: 10px;
}
.admin-funnel-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(62,231,154,0.12);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
}
.admin-funnel-name {
  font-size: 14px; font-weight: 600; color: var(--text);
}
.admin-funnel-bar-wrap {
  position: relative;
  height: 32px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  overflow: hidden;
}
.admin-funnel-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), rgba(62,231,154,0.55));
  border-radius: 6px;
  transition: width 0.4s ease;
}
.admin-funnel-bar-text {
  position: absolute;
  top: 50%; left: 12px;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700;
  color: #0a0a0a;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
.admin-funnel-events {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  text-align: right;
}
.admin-rate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.admin-rate-card {
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
}
.admin-rate-label {
  font-size: 11.5px; color: var(--text-dim);
  font-family: var(--font-mono);
  margin-bottom: 6px;
}
.admin-rate-value {
  font-size: 22px; font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
}
.admin-log-head-row {
  display: flex; align-items: center;
  margin-bottom: 14px;
}
.admin-filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.admin-filter-chip {
  padding: 6px 14px; font-size: 12.5px; font-weight: 600;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-dim);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.18s ease;
}
.admin-filter-chip:hover {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}
.admin-filter-chip.active {
  color: #0a0a0a;
  font-weight: 700;
}
.admin-filter-chip-all.active            { background: var(--accent); border-color: var(--accent); }
.admin-filter-chip-page_view.active      { background: #7d8ef7; border-color: #7d8ef7; }
.admin-filter-chip-analyze_click.active  { background: #f5c544; border-color: #f5c544; }
.admin-filter-chip-register_open.active  { background: #ff9a9a; border-color: #ff9a9a; }
.admin-filter-chip-register_complete.active { background: #3ee79a; border-color: #3ee79a; }

.admin-filter-bar2 {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-top: 6px;
}
.admin-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.admin-toggle input { cursor: pointer; }
.admin-session-search {
  flex: 1 1 240px; max-width: 320px;
  padding: 7px 12px; font-size: 12.5px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
}
.admin-session-search:focus {
  outline: none;
  border-color: rgba(62,231,154,0.4);
}

.admin-log-table {
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
}
.admin-log-row {
  display: grid;
  grid-template-columns: 130px 90px 90px 200px 110px 1.2fr 1.5fr;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: center;
}
.admin-log-anon {
  color: rgba(255,255,255,0.25);
  font-style: italic;
}
.admin-log-user {
  display: flex; flex-direction: column; gap: 2px;
}
.admin-log-user-name {
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  font-family: var(--font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-log-user-code {
  font-size: 10.5px;
  color: rgba(255,255,255,0.35);
  font-family: var(--font-mono);
}
/* M3-31.2: VIP highlight — gold across the dropdown + log rows so the
   admin can spot paying customers at a glance. */
.admin-log-user-vip {
  color: #f5c544 !important;
}
.admin-user-select option.admin-user-option-vip {
  color: #f5c544;
  font-weight: 600;
}

/* Per-event-type "備註" formatting — replaces the old JSON dump with
   readable badges + truncated URLs. */
.admin-extra-badge {
  display: inline-block; padding: 1px 7px;
  border-radius: 3px; font-size: 10.5px;
  font-weight: 700; font-family: var(--font-mono);
  letter-spacing: 0.04em;
  margin-right: 6px;
}
.admin-extra-type-single  { background: rgba(125,142,247,0.22); color: #b0bcfa; }
.admin-extra-type-site    { background: rgba(62,231,154,0.22); color: #3ee79a; }
.admin-extra-type-compare { background: rgba(255,118,118,0.22); color: #ffb0b0; }
.admin-extra-vip          { background: rgba(245,197,68,0.22); color: #f5c544; }
.admin-extra-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}
.admin-extra-url-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted rgba(62,231,154,0.4);
  cursor: pointer;
  transition: color 0.15s ease, border-bottom-color 0.15s ease;
}
.admin-extra-url-link:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}
.admin-extra-url-link:visited {
  color: rgba(62,231,154,0.7);
}
.admin-extra-route {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(125,142,247,0.7);
}
/* M3-38 — traffic source pill on page_view rows. Each provider has
   a brand-recognisable hue; "direct" / "internal" / "other" use
   neutral greys so they never out-shout actual paid/organic sources. */
.admin-extra-source {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.admin-extra-source-direct   { background: rgba(148,163,184,0.18); color: #94a3b8; }
.admin-extra-source-internal { background: rgba(148,163,184,0.10); color: #64748b; }
.admin-extra-source-google   { background: rgba(96,165,250,0.20);  color: #93c5fd; }
.admin-extra-source-bing     { background: rgba(20,184,166,0.20);  color: #5eead4; }
.admin-extra-source-search   { background: rgba(167,139,250,0.20); color: #c4b5fd; }
.admin-extra-source-fb       { background: rgba(96,165,250,0.20);  color: #60a5fa; }
.admin-extra-source-ig       { background: rgba(244,114,182,0.20); color: #f472b6; }
.admin-extra-source-x        { background: rgba(255,255,255,0.10); color: #d1d5db; }
.admin-extra-source-yt       { background: rgba(255,118,118,0.20); color: #ff9a9a; }
.admin-extra-source-ln       { background: rgba(56,189,248,0.20);  color: #7dd3fc; }
.admin-extra-source-utm      { background: rgba(168,85,247,0.22);  color: #c084fc; }
.admin-extra-source-other    { background: rgba(245,197,68,0.18);  color: #f5c544; }
/* Raw source-of-truth chips: referrer URL, utm payload, click-ids.
   Multiple chips can appear next to the pill — each is independently
   truncated, full string on hover (title). */
.admin-extra-raw-ref {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  padding: 1px 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  display: inline-block;
}
/* Landing URL on our own site — slightly different colour so the
   admin can tell "where they entered" from "where they came from". */
.admin-extra-landing {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(62,231,154,0.7);
  padding: 1px 6px;
  background: rgba(62,231,154,0.06);
  border-radius: 3px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  display: inline-block;
}
.admin-extra-status-fail {
  background: rgba(255,82,82,0.28);
  color: #ff8a8a;
  border: 1px solid rgba(255,82,82,0.45);
}
.admin-extra-status-other {
  background: rgba(255,197,68,0.22);
  color: #f5c544;
}
.admin-extra-backfill {
  display: inline-block;
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 3px;
  padding: 0 5px;
  margin-left: 6px;
}
.admin-extra-empty {
  color: rgba(255,255,255,0.2);
}
.admin-log-dev {
  display: flex; flex-direction: column; gap: 2px;
}
.admin-log-dev-pivot {
  display: inline-block;
  background: transparent; border: none;
  padding: 0; margin: 0;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px dashed rgba(62,231,154,0.4);
}
.admin-log-dev-pivot:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}
.admin-log-ip {
  font-size: 10.5px;
  color: rgba(255,255,255,0.35);
  font-family: var(--font-mono);
}
.admin-log-ip-pivot {
  display: inline-block;
  background: transparent; border: none;
  padding: 0; margin: 0;
  cursor: pointer;
  border-bottom: 1px dashed rgba(255,255,255,0.2);
}
.admin-log-ip-pivot:hover {
  color: rgba(255,255,255,0.7);
  border-bottom-color: rgba(255,255,255,0.5);
}
.admin-user-select {
  flex: 1 1 280px;
  max-width: 380px;
  padding: 7px 10px; font-size: 12.5px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font);
  cursor: pointer;
  /* Tells the browser to render the native popup chrome (the option
     list) with the dark colour scheme — without this Chrome/Edge on
     Windows fall back to the OS default white-on-grey, which is
     unreadable against our dark theme. */
  color-scheme: dark;
}
.admin-user-select:focus {
  outline: none; border-color: rgba(62,231,154,0.4);
}
.admin-user-select option {
  /* Explicit option styling — Chrome/Edge respect these on the popup
     list; Firefox uses them for the closed-state too. Dark bg + light
     text matches the rest of the admin dashboard. */
  background: #0c1222;
  color: #e2e6ec;
  padding: 6px 10px;
}
.admin-user-select option:checked {
  background: rgba(62,231,154,0.15);
  color: var(--accent);
}
.admin-pivot-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; min-height: 0;
}
.admin-pivot-bar:empty { display: none; }
.admin-pivot-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(125,142,247,0.18);
  border: 1px solid rgba(125,142,247,0.4);
  border-radius: 6px;
  font-size: 12px;
  color: #c5cef9;
}
.admin-pivot-chip code {
  font-size: 11px;
  background: rgba(0,0,0,0.3);
  padding: 1px 6px; border-radius: 3px;
}
.admin-pivot-x {
  background: transparent; border: none;
  color: #c5cef9; cursor: pointer;
  font-size: 16px; line-height: 1;
  padding: 0 4px;
}
.admin-pivot-x:hover { color: white; }
.admin-log-row:last-child { border-bottom: none; }
.admin-log-head {
  background: rgba(255,255,255,0.04);
  font-weight: 700; color: var(--text);
}
.admin-log-cell {
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Timestamp cell — mono font + smaller size so 19-char "YYYY-MM-DD
   HH:MM:SS" fits in the 130px column without ellipsis. */
.admin-log-ts {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -0.02em;
}
.admin-log-extra { font-size: 11px; }
.admin-log-event {
  display: inline-block; padding: 2px 8px;
  border-radius: 4px; font-size: 11px; font-weight: 600;
}
.admin-log-event-page_view         { background: rgba(125,142,247,0.18); color: #a8b3f9; }
.admin-log-event-analyze_click     { background: rgba(245,197,68,0.18);  color: #f5c544; }
.admin-log-event-register_open     { background: rgba(255,118,118,0.18); color: #ff9a9a; }
.admin-log-event-register_complete { background: rgba(62,231,154,0.18);  color: #3ee79a; }
.admin-paywall {
  text-align: center; padding: 48px 32px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  max-width: 600px;
  margin: 0 auto;
}
.admin-paywall h3 {
  font-size: 19px; color: var(--text);
  margin: 12px 0; font-weight: 700;
}
.admin-paywall p {
  font-size: 14px; color: var(--text-dim);
  line-height: 1.6; margin: 0 0 22px;
}
@media (max-width: 980px) {
  .admin-log-row {
    grid-template-columns: 100px 80px 80px 140px 1fr;
  }
  /* Hide session + path + extra on mobile — device/user/event matter most */
  .admin-log-row > :nth-child(5),
  .admin-log-row > :nth-child(6),
  .admin-log-row > :nth-child(7) { display: none; }
}
@media (max-width: 720px) {
  .admin-funnel-row {
    grid-template-columns: 100px 1fr;
  }
  .admin-funnel-events { display: none; }
  .admin-log-row {
    grid-template-columns: 90px 70px 1fr;
  }
  /* Hide more aggressively on phone */
  .admin-log-row > :nth-child(4),
  .admin-log-row > :nth-child(5),
  .admin-log-row > :nth-child(6),
  .admin-log-row > :nth-child(7) { display: none; }
}

/* ==========================================================================
   M3-31 — Admin tab bar + 帳號 / 網站 list tables
   ========================================================================== */
.admin-tab-bar {
  display: flex; gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.admin-tab-btn {
  background: transparent;
  color: var(--text-dim);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 20px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  letter-spacing: 0.02em;
}
.admin-tab-btn:hover {
  color: var(--text);
}
.admin-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.admin-tab-content { min-height: 200px; }

.admin-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.admin-card-meta {
  font-size: 12px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.admin-table-wrap {
  overflow-x: auto;
  margin: 0 -8px;
}
.admin-table {
  display: flex; flex-direction: column;
  min-width: 100%;
  font-size: 13px;
}
.admin-table-row {
  display: grid;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  gap: 12px;
}
.admin-table-row:last-child { border-bottom: none; }
.admin-table-row:hover:not(.admin-table-head) {
  background: rgba(255,255,255,0.025);
}
.admin-table-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.02);
}
.admin-table-cell {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cell-left   { text-align: left; }
.admin-cell-right  { text-align: right;  font-variant-numeric: tabular-nums; }
.admin-cell-center { text-align: center; }
.admin-cell-sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.admin-cell-sortable:hover { color: var(--text); }
.admin-sort-arrow {
  display: inline-block;
  min-width: 12px;
  font-size: 10px;
  color: var(--accent);
  margin-left: 2px;
}
.admin-cell-main { color: var(--text); }
.admin-cell-sub  { color: var(--text-dim); font-size: 11px; margin-top: 2px; }

/* 帳號 tab — 8 cols: 公司 / Email / 電話 / 註冊 / 分析數 / 最後分析 / 事件數 / VIP */
.admin-users-table .admin-table-row {
  grid-template-columns: 1.4fr 1.4fr 0.9fr 1.1fr 70px 1.1fr 70px 60px;
}
.admin-row-vip {
  background: linear-gradient(90deg,
    rgba(245,197,68,0.05) 0%,
    rgba(245,197,68,0.0) 60%);
}
.admin-vip-star { color: #f5c544; }
.admin-vip-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(245,197,68,0.18);
  color: #f5c544;
  border-radius: 999px;
}

/* 網站 tab — 7 cols: URL / 類型 / 掃描次數 / 最新 / 平均 / 最後 / 用戶 */
.admin-sites-table .admin-table-row {
  grid-template-columns: 2fr 70px 90px 90px 80px 1.2fr 90px;
}
.admin-cell-url .admin-extra-url {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Score pill — reuse the 5-tier color scheme from .score-{a,b,c,d,f} */
.admin-score {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.admin-score-a { background: rgba(62,231,154,0.18);  color: #3ee79a; }
.admin-score-b { background: rgba(125,200,255,0.18); color: #7dc8ff; }
.admin-score-c { background: rgba(245,197,68,0.18);  color: #f5c544; }
.admin-score-d { background: rgba(255,154,90,0.18);  color: #ff9a5a; }
.admin-score-f { background: rgba(255,118,118,0.18); color: #ff7676; }

@media (max-width: 980px) {
  .admin-users-table .admin-table-row {
    grid-template-columns: 1.6fr 1.4fr 70px 1.1fr 60px;
  }
  /* Hide 電話 / 最後分析 / 事件數 first on tablet */
  .admin-users-table .admin-table-row > :nth-child(3),
  .admin-users-table .admin-table-row > :nth-child(6),
  .admin-users-table .admin-table-row > :nth-child(7) { display: none; }

  .admin-sites-table .admin-table-row {
    grid-template-columns: 2fr 70px 80px 80px 90px;
  }
  .admin-sites-table .admin-table-row > :nth-child(5),
  .admin-sites-table .admin-table-row > :nth-child(7) { display: none; }
}
@media (max-width: 720px) {
  .admin-users-table .admin-table-row {
    grid-template-columns: 1.6fr 60px 60px;
  }
  .admin-users-table .admin-table-row > :nth-child(2),
  .admin-users-table .admin-table-row > :nth-child(3),
  .admin-users-table .admin-table-row > :nth-child(4),
  .admin-users-table .admin-table-row > :nth-child(6),
  .admin-users-table .admin-table-row > :nth-child(7) { display: none; }

  .admin-sites-table .admin-table-row {
    grid-template-columns: 1.8fr 70px 80px;
  }
  .admin-sites-table .admin-table-row > :nth-child(2),
  .admin-sites-table .admin-table-row > :nth-child(5),
  .admin-sites-table .admin-table-row > :nth-child(6),
  .admin-sites-table .admin-table-row > :nth-child(7) { display: none; }
}

/* ==========================================================================
   M3-28 — TREND CHART (VIP-only, bottom of analysis reports)
   ========================================================================== */
.trend-chart-mount { margin-top: 32px; }
.trend-chart-section {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  background: linear-gradient(180deg,
    rgba(15,21,35,0.85) 0%,
    rgba(11,16,28,0.95) 100%);
  padding: 24px 28px 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset,
              0 12px 24px -16px rgba(0,0,0,0.5);
}
/* Header row: title block on the left, range selector on the right */
.trend-chart-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 14px; flex-wrap: wrap;
}
.trend-chart-title-box { flex: 1 1 auto; min-width: 260px; }
.trend-chart-heading {
  font-size: 17px; font-weight: 700; color: var(--text);
  margin: 0 0 4px; letter-spacing: 0.02em;
}
.trend-chart-subtitle {
  font-size: 12.5px; color: var(--text-dim);
  margin: 0; line-height: 1.55;
}
/* Range selector — pill row on the right (60D / 120D / 1Y / ALL) */
.trend-chart-range {
  display: inline-flex; gap: 2px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 3px;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.trend-chart-range-btn {
  padding: 6px 14px; font-size: 12px; font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  border: none; border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: all 0.18s ease;
}
.trend-chart-range-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.trend-chart-range-btn.active {
  background: rgba(62,231,154,0.12);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(62,231,154,0.22);
}
/* Chip-style legend below the header */
.trend-chart-legend {
  display: flex; flex-wrap: wrap; gap: 16px 24px;
  padding: 4px 0 14px;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
  margin-bottom: 14px;
}
.trend-chart-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 12.5px;
}
.trend-chart-chip-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px;
  align-self: center;
  box-shadow: 0 0 6px currentColor;
}
.trend-chart-chip-label {
  color: var(--text); font-weight: 600;
}
.trend-chart-chip-hint {
  color: var(--text-dim); font-size: 11.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
/* Canvas + states */
.trend-chart-canvas-wrap {
  position: relative;
  height: 360px; width: 100%;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 14px 16px;
}
.trend-chart-range-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 13px;
  font-family: var(--font-mono);
}
.trend-chart-loading,
.trend-chart-empty {
  padding: 20px; text-align: center;
  color: var(--text-dim); font-size: 13px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 10px;
}
.trend-chart-error { color: #ff7676; }
/* Footer note explaining axes + thresholds */
.trend-chart-footnote {
  margin-top: 12px;
  font-size: 11.5px; color: rgba(255,255,255,0.35);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
/* VIP paywall — blurred fake chart in the back, lock card on top.
   No real data ever reaches the DOM (the SVG is a hand-rolled silhouette),
   so DevTools snooping yields nothing of value. */
.trend-chart-preview {
  position: relative;
  height: 360px;
}
.trend-chart-blurred {
  position: absolute; inset: 0;
  height: 100%;
  filter: blur(6px) saturate(0.7);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.trend-chart-fake-svg {
  width: 100%; height: 100%;
  display: block;
}
.trend-chart-lock-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 32px 24px;
  background: radial-gradient(ellipse at center,
                rgba(11,16,28,0.72) 0%,
                rgba(11,16,28,0.95) 80%);
  border-radius: 10px;
}
.trend-chart-paywall-icon { font-size: 36px; margin-bottom: 12px; }
.trend-chart-lock-overlay h3 {
  font-size: 19px; color: var(--text);
  margin: 0 0 12px; font-weight: 700;
}
.trend-chart-lock-overlay p {
  font-size: 14px; color: var(--text-dim);
  margin: 0 auto 22px; max-width: 560px;
  line-height: 1.65;
}
.trend-chart-paywall-cta {
  display: inline-block; padding: 10px 26px;
  background: var(--accent); color: #0a0a0a;
  border-radius: 6px;
  font-weight: 700; font-size: 14px;
  text-decoration: none;
  font-family: var(--font-mono); letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all var(--transition);
}
.trend-chart-paywall-cta:hover { background: var(--accent-hover); }
@media (max-width: 720px) {
  .trend-chart-preview { height: 260px; }
  .trend-chart-lock-overlay { padding: 18px 14px; }
  .trend-chart-lock-overlay h3 { font-size: 16px; }
  .trend-chart-lock-overlay p { font-size: 12.5px; }
}
@media (max-width: 720px) {
  .trend-chart-section { padding: 18px 16px 14px; }
  .trend-chart-header { flex-direction: column; align-items: stretch; }
  .trend-chart-range { align-self: flex-end; }
  .trend-chart-canvas-wrap { height: 280px; padding: 8px 10px; }
  .trend-chart-chip-hint { display: none; }
}

/* ==========================================================================
   LANDING PAGE CONTENT
   ========================================================================== */
.landing-content {
  max-width: 1280px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 48px;
  padding: 24px 0 48px;
}
.landing-section { }

/* Stat Bar — 3 key numbers */
.landing-stat-bar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow-card);
}
.landing-stat {
  padding: 20px 24px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.landing-stat:last-child { border-right: none; }
.landing-stat-num {
  font-family: var(--font-mono); font-size: 28px; font-weight: 800;
  color: var(--accent); line-height: 1; letter-spacing: -0.03em;
}
.landing-stat-desc {
  font-size: 14px; color: var(--text); line-height: 1.5;
}

/* Why cards — 3 columns */
.landing-why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow-card);
}
.landing-why-card {
  padding: 24px; border-right: 1px solid var(--border);
}
.landing-why-card:last-child { border-right: none; }
.landing-why-abbr {
  font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--accent); opacity: 0.7; margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace; text-transform: uppercase;
}
.landing-why-title {
  font-size: 15px; font-weight: 700; color: var(--text-bright);
  margin-bottom: 8px;
}
.landing-why-desc {
  font-size: 15px; color: var(--text); line-height: 1.7;
}

/* Dim showcase code */
.dim-showcase-code {
  display: inline-block; font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; color: var(--accent);
  background: var(--accent-dim); border: 1px solid rgba(0,229,160,0.15);
  padding: 2px 6px; border-radius: 3px; margin-right: 6px;
  letter-spacing: 0.04em;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.step-card {
  padding: 28px 20px;
  background: transparent;
  border-right: 1px solid var(--border);
  text-align: center;
}
.step-card:last-child { border-right: none; }
.step-num {
  width: 32px; height: 32px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--accent);
  border: 1px solid var(--accent-border);
  border-radius: 50%;
  background: var(--accent-dim);
  font-family: var(--font-mono);
}
.step-title {
  font-size: 14px; font-weight: 600; color: var(--text-bright);
  margin-bottom: 6px;
}
.step-desc {
  font-size: 14px; color: var(--text); line-height: 1.6;
}

/* Dimension Showcase — 2x5 grid */
.dim-showcase-section {
  text-align: center;
}
.dim-showcase {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.dim-showcase-item {
  padding: 16px 12px;
  font-size: 14px; font-weight: 500; color: var(--text);
  text-align: center;
  background: transparent;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  transition: all var(--transition);
}
.dim-showcase-item:nth-child(5n) { border-right: none; }
.dim-showcase-item:nth-child(n+6) { border-bottom: none; }
.dim-showcase-item:hover {
  background: var(--bg-hover); color: var(--text-bright);
}

/* FAQ Section — accordion */
.faq-section {
  max-width: 720px; margin: 0 auto; width: 100%;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.faq-question {
  padding: 14px 20px;
  font-size: 15px; font-weight: 500; color: var(--text-bright);
  cursor: pointer;
  transition: all var(--transition);
  display: flex; align-items: center; justify-content: space-between;
  user-select: none;
}
.faq-question::after {
  content: '+';
  font-size: 16px; font-weight: 700; color: var(--text-dim);
  font-family: var(--font-mono);
  transition: transform 0.2s ease;
}
.faq-question.faq-open::after {
  content: '-';
}
.faq-question:hover { background: var(--bg-hover); }
.faq-answer {
  padding: 0 20px 16px;
  font-size: 14px; color: var(--text); line-height: 1.7;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* Header dropdown quota */
.header-dropdown-quota {
  font-size: 13px; color: var(--accent); font-weight: 600;
  border-bottom: 1px solid var(--border); cursor: default;
  padding: 8px 16px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.header-dropdown-quota:hover { background: transparent; color: var(--accent); }

/* ==========================================================================
   COMPARE PAYWALL
   ========================================================================== */
.compare-paywall-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 11, 18, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
}
.compare-paywall-card {
  text-align: center; padding: 48px 40px; max-width: 440px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}
.compare-paywall-title {
  font-size: 22px; font-weight: 700; color: var(--text-bright); margin-bottom: 12px;
}
.compare-paywall-desc {
  font-size: 15px; color: var(--text); line-height: 1.7; margin-bottom: 28px;
}
.compare-paywall-btn {
  display: inline-block; padding: 12px 32px;
  font-size: 15px; font-weight: 600;
  color: var(--bg); background: var(--accent);
  border-radius: var(--radius-sm); transition: all 0.2s ease;
}
.compare-paywall-btn:hover { opacity: 0.9; transform: translateY(-1px); color: var(--bg); }
.compare-paywall-email {
  font-size: 13px; color: var(--text-dim); margin-top: 12px;
  font-family: var(--font-mono);
}

/* ==========================================================================
   SCORE DISCLAIMER (M1-3 段 A)
   ========================================================================== */
.score-disclaimer {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  padding: 10px 14px;
  margin: 0 0 16px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #f59e0b;
  border-radius: 3px;
}
.score-disclaimer strong {
  color: #fbbf24;
  font-weight: 600;
}

/* ==========================================================================
   VIP BADGE (M1-7)
   ========================================================================== */
.header-dropdown-vip,
.my-analyses-quota-vip {
  color: #d4a017;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   LEGAL PAGES (Privacy, Terms)
   ========================================================================== */
.legal-page {
  max-width: 800px; margin: 0 auto; padding: 0 0 64px;
  color: var(--text); line-height: 1.8;
}
.legal-page h1 {
  font-size: 28px; font-weight: 700; color: var(--text-bright);
  margin-bottom: 8px;
}
.legal-page .legal-updated {
  font-size: 14px; color: var(--text-dim); margin-bottom: 32px;
}
.legal-page h2 {
  font-size: 18px; font-weight: 600; color: var(--text-bright);
  margin-top: 32px; margin-bottom: 12px;
  padding-top: 16px; border-top: 1px solid var(--border);
}
.legal-page h2:first-of-type { border-top: none; padding-top: 0; }
.legal-page p { margin-bottom: 12px; font-size: 15px; }
.legal-page ul, .legal-page ol {
  margin: 8px 0 16px 24px; font-size: 15px;
}
.legal-page li { margin-bottom: 6px; list-style: disc; }
.legal-page ol li { list-style: decimal; }
.legal-page a { color: var(--accent); }
.legal-page strong { color: var(--text-bright); }

/* ==========================================================================
   QUOTA EXCEEDED
   ========================================================================== */
.quota-modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 48px 40px; position: relative;
  max-width: 500px; width: 90%; text-align: center;
  box-shadow: 0 16px 64px rgba(0,0,0,0.4);
}
.quota-exceeded-card {
  max-width: 560px; margin: 0 auto; text-align: center;
  padding: 48px 32px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); box-shadow: var(--shadow-card);
}
.qe-title {
  font-size: 22px; font-weight: 700; color: var(--text-bright);
  margin-bottom: 12px;
}
.qe-desc {
  font-size: 15px; color: var(--text); line-height: 1.7;
  margin-bottom: 28px;
}
.qe-actions {
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.qe-contact-btn {
  display: inline-block; padding: 12px 28px;
  font-size: 15px; font-weight: 600;
  color: var(--bg); background: var(--accent);
  border-radius: var(--radius-sm); transition: all 0.2s ease;
}
.qe-contact-btn:hover { opacity: 0.9; transform: translateY(-1px); color: var(--bg); }
.qe-history-btn {
  font-size: 14px; color: var(--accent); font-weight: 500;
}
.qe-history-btn:hover { text-decoration: underline; }

/* ==========================================================================
   MY ANALYSES PAGE
   ========================================================================== */
.my-analyses-list { max-width: 1280px; margin: 0 auto; }
.my-analyses-quota {
  font-family: var(--font-mono); font-size: 14px; color: var(--accent);
  padding: 12px 20px; margin-bottom: 16px;
  border: 1px solid var(--accent-border); border-radius: var(--radius-sm);
  background: var(--accent-dim);
}
.my-analyses-table {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow-card);
}
.ma-row {
  display: grid; grid-template-columns: 1fr 80px 60px 150px 100px;
  align-items: center; border-bottom: 1px solid var(--border);
}
/* M3-10: 6-column layout when the table is in three-axis mode (URL +
   GEO 體質 + Agent 友善度 + 站外能見度 + 時間 + 操作). Letter grade
   column is gone — it lives on the analysis-result page only.
   Widths sized for the LONGEST header — "AGENT 友善度" with uppercase
   transform + 0.06em letter-spacing renders wider than the others, so
   it gets the largest budget. nowrap on .ma-axis-cell prevents two-line
   wrapping if the user's font metrics differ. */
.my-analyses-table.ma-three-axis .ma-row {
  grid-template-columns: 1fr 110px 140px 130px 150px 100px;
}
/* M3-11: four-axis layout adds 「技術衛生檢查」 between Agent and 站外. */
.my-analyses-table.ma-four-axis .ma-row {
  grid-template-columns: 1fr 100px 130px 130px 130px 140px 100px;
}
.ma-row:last-child { border-bottom: none; }
.ma-header {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim);
  background: rgba(255,255,255,0.02);
}
.ma-cell { padding: 14px 16px; font-size: 14px; }
.ma-url {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); font-size: 14px;
}
.ma-score { text-align: center; font-family: var(--font-mono); }
.ma-grade { text-align: center; }
.ma-grade-badge { font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.ma-axis-cell {
  text-align: center; font-family: var(--font-mono);
  padding: 14px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ma-axis-score { font-weight: 700; font-size: 16px; }
.ma-axis-na { color: var(--text-dim); opacity: 0.6; }
.ma-axis-status {
  /* Failure / processing message spans all score columns (3 in legacy
     three-axis mode, 4 in M3-11 four-axis mode). The .ma-four-axis
     override below extends the span when present. */
  grid-column: span 3; text-align: center; padding: 14px 16px;
  font-size: 14px; color: var(--text-dim);
}
.my-analyses-table.ma-four-axis .ma-axis-status { grid-column: span 4; }
.ma-date { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); }
.ma-action { text-align: center; }
.ma-view-btn {
  font-size: 13px; font-weight: 600; color: var(--accent);
  padding: 6px 14px; border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm); transition: all 0.2s ease;
  display: inline-block;
}
.ma-view-btn:hover {
  background: var(--accent-dim); color: var(--accent);
}

@media (max-width: 768px) {
  .ma-row { grid-template-columns: 1fr 60px 50px 100px; }
  /* Mobile three-axis: drop the longest-header padding pressure with
     smaller font + tighter columns; let nowrap+ellipsis catch overflow. */
  .my-analyses-table.ma-three-axis .ma-row {
    grid-template-columns: 1fr 70px 90px 80px;
  }
  .my-analyses-table.ma-three-axis .ma-header { font-size: 10px; letter-spacing: 0.04em; }
  .ma-action, .ma-date { display: none; }
  .ma-url { font-size: 13px; }
}

/* ==========================================================================
   M3-10 — Three-axis self-check row (analysis result page)
   GEO 體質 / Agent 友善度 / 站外能見度 — independent scores under the hero.
   ========================================================================== */
.three-axis-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin: 16px 0 24px;
}
/* M3-11: four-axis layout (GEO 體質 / Agent / 技術衛生 / 站外能見度) */
.three-axis-row.four-axis {
  grid-template-columns: repeat(4, 1fr);
}
.three-axis-cell {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card);
  padding: 16px 12px; text-align: center;
  box-shadow: var(--shadow-card);
}
.three-axis-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 10px;
}
.three-axis-value {
  font-family: var(--font-mono); font-size: 32px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px;
}
.three-axis-value.na { color: var(--text-dim); opacity: 0.5; font-size: 24px; }
.three-axis-value.score-a { color: var(--grade-a); }
.three-axis-value.score-b { color: var(--grade-b); }
.three-axis-value.score-c { color: var(--grade-c); }
.three-axis-value.score-d { color: var(--grade-d); }
.three-axis-value.score-f { color: var(--grade-f); }
.three-axis-hint {
  font-size: 10px; color: var(--text-dim); opacity: 0.7;
  font-family: var(--font-mono); letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .three-axis-row { grid-template-columns: 1fr; }
  .three-axis-row.four-axis { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) and (min-width: 769px) {
  /* Tablet — 4-axis becomes 2x2 grid */
  .three-axis-row.four-axis { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .kpi-cell:nth-child(3) { border-right: none; }
  .kpi-cell:nth-child(1), .kpi-cell:nth-child(2), .kpi-cell:nth-child(3) { border-bottom: 1px solid var(--border); }
  .score-radar { grid-template-columns: 1fr; }
  .sr-score { border-right: none; border-bottom: 1px solid var(--border); }
  .result-hero-inner { flex-direction: column; padding: 32px 24px; gap: 32px; }
  .result-hero-left { flex-direction: column; align-items: center; gap: 24px; }
  .result-hero-stats { flex-direction: row; gap: 24px; flex-wrap: wrap; justify-content: center; }
  .bottom-row {
    grid-template-columns: 1fr;
  }
  .bottom-row > .panel:first-child { border-right: none; border-bottom: 1px solid var(--border); }
  .dim-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi-cell:nth-child(2) { border-right: none; }
  .kpi-cell:nth-child(1),
  .kpi-cell:nth-child(2) { border-bottom: 1px solid var(--border); }
  .main-container { max-width: 100%; padding-left: 24px; padding-right: 24px; }
  .header-inner { max-width: 100%; padding: 0 24px; }
  .overview-row { grid-template-columns: 1fr 1fr; }
  .overview-score-cell { border-bottom: 1px solid var(--border); }
  .overview-kpi-grid { border-bottom: 1px solid var(--border); }
  .steps-grid { grid-template-columns: 1fr; }
  .landing-stat-bar { grid-template-columns: 1fr; }
  .landing-stat { border-right: none; border-bottom: 1px solid var(--border); }
  .landing-stat:last-child { border-bottom: none; }
  .landing-why-grid { grid-template-columns: 1fr; }
  .landing-why-card { border-right: none; border-bottom: 1px solid var(--border); }
  .landing-why-card:last-child { border-bottom: none; }
  .step-card { border-right: none; border-bottom: 1px solid var(--border); }
  .step-card:last-child { border-bottom: none; }
  .dim-showcase { grid-template-columns: repeat(2, 1fr); }
  .dim-showcase-item:nth-child(5n) { border-right: 1px solid var(--border); }
  .dim-showcase-item:nth-child(2n) { border-right: none; }
  .dim-showcase-item:nth-child(n+6) { border-bottom: 1px solid var(--border); }
  .dim-showcase-item:nth-last-child(-n+2) { border-bottom: none; }
  .unlock-cta { flex-direction: column; text-align: center; }
}

@media (max-width: 768px) {
  .hero-title { font-size: 24px; }
  .hero-desc { font-size: 15px; }
  .main-container { padding: calc(var(--header-height) + 20px) 16px 48px; }
  .header-inner { padding: 0 16px; }
  .compare-grid { grid-template-columns: 1fr; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kpi-cell:nth-child(2n) { border-right: none; }
  .kpi-cell { border-bottom: 1px solid var(--border); }
  .kpi-cell:nth-last-child(-n+2) { border-bottom: none; }
  .score-number { font-size: 32px; }
  .score-circle-wrap { width: 110px; height: 110px; }
  .score-circle-svg { width: 110px; height: 110px; }
  .brand-tagline { display: none; }
  .reg-gate { padding: 32px 20px; }
  .reg-gate-form { max-width: 100%; }
  .reg-gate-title { font-size: 20px; }
  .header-user-name { display: none; }
  .toast-container { bottom: 12px; right: 12px; left: 12px; }
  .toast { min-width: auto; max-width: 100%; }
  .dim-header { padding: 12px 16px; }
  .dim-content { padding: 0 16px 14px; }
  .kpi-value { font-size: 24px; }
  .kpi-value.grade { font-size: 26px; }
}

/* ==========================================================================
   EXTERNAL VISIBILITY SCORE
   ========================================================================== */
.external-card {
  display: flex;
  gap: 28px;
  background: var(--bg-card);
  border: var(--border-card);
  border-radius: var(--radius);
  padding: var(--card-padding);
  margin-bottom: 8px;
}
.ext-score-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 110px;
}
.ext-score-circle {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid var(--blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.ext-score-circle::before {
  content: '';
  position: absolute;
  inset: -14px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.10) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  filter: blur(10px);
}
.ext-score-number {
  font-size: 32px;
  font-weight: 900;
  color: var(--blue);
  line-height: 1;
}
.ext-score-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.ext-grade-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.04em;
}
.ext-dims-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.ext-dim-row {
  /* M3-15: was a flex row with label width:110px — wider CJK labels
     ("DuckDuckGo 知識圖譜" / "Wayback Machine 歷史") overflowed and
     visually intruded onto the score bar. Grid with `max-content` lets
     each label take exactly the space it needs and the bar fills the
     rest. `min-content` on the bar column prevents flex/grid blow-out
     when the value column is also tight. */
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
}
.ext-dim-label {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.ext-dim-bar-wrap {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.ext-dim-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
  /* M3-11 fix: even at score=0 (status="error" — e.g. Wayback 從未存檔),
     show a tiny visible sliver in the status color so the row doesn't
     look "empty / no data". Without this min-width an error row collapses
     to invisible and the user can't tell "score 0 (red)" from "no data". */
  min-width: 6px;
}
.ext-dim-bar.good { background: var(--green); }
.ext-dim-bar.warning { background: var(--yellow); }
.ext-dim-bar.error { background: var(--red); }
.ext-dim-bar.unavailable { background: rgba(255,255,255,0.10); min-width: 0; }
.ext-dim-val {
  width: 36px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.ext-dim-val.good { color: var(--green); }
.ext-dim-val.warning { color: var(--yellow); }
.ext-dim-val.error { color: var(--red); }
.ext-dim-val.unavailable { color: var(--text-dim); }

@media (max-width: 768px) {
  .external-card { flex-direction: column; align-items: center; gap: 18px; }
  .ext-dims-col { width: 100%; }
}

@media (max-width: 480px) {
  .url-input-group { flex-direction: column; }
  .url-input-btn { margin: 0 6px 6px; }
  .url-input-field { padding: 14px 16px; }
  .share-row { flex-direction: column; }
  .main-nav { display: none; }
  .hamburger-btn { display: flex; }
  .header-user-trigger { padding: 3px 6px 3px 3px; }
  .header-avatar { width: 24px; height: 24px; font-size: 12px; }
  .score-circle-wrap { width: 100px; height: 100px; }
  .score-circle-svg { width: 100px; height: 100px; }
  .score-number { font-size: 28px; }
}

/* ==========================================================================
   SITE-WIDE ANALYSIS
   ========================================================================== */

/* Progress */
.site-progress-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
}
.site-progress-text {
  font-size: 15px;
  color: var(--text-bright);
  margin: 0;
}
.site-progress-counter {
  font-size: 13px;
  color: var(--accent);
  font-family: var(--font-mono);
  margin: 0;
}

/* Result header */
.site-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.site-result-url {
  font-size: 14px;
  font-family: var(--font-mono);
  color: var(--accent);
  word-break: break-all;
}
.site-result-time {
  font-size: 12px;
  color: var(--text-dim);
  flex-shrink: 0;
  margin-left: 16px;
}

/* Score card — same layout as external-card */
.site-analysis-card {
  display: flex;
  gap: 28px;
  background: var(--bg-card);
  border: var(--border-card);
  border-radius: var(--radius);
  padding: var(--card-padding);
  margin-bottom: 8px;
}
.site-score-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 130px;
}
.site-crawl-info {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 8px;
  font-family: var(--font-mono);
}
.scanned-files-toggle {
  font-size: 11px; color: var(--accent); margin-top: 8px;
  font-family: var(--font-mono); cursor: pointer;
  padding: 4px 0; border: none; background: none;
}
.scanned-files-toggle:hover { text-decoration: underline; }
.scanned-files-list {
  margin-top: 6px; padding: 8px 12px;
  background: rgba(0,0,0,0.2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); max-height: 200px; overflow-y: auto;
}
.scanned-file-item {
  font-size: 11px; color: var(--text-dim); font-family: var(--font-mono);
  padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Dimension rows */
.site-dims-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.site-dim-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-dim-label {
  width: 130px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.site-dim-bar-wrap {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.site-dim-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}
.site-dim-bar.good { background: var(--green); }
.site-dim-bar.warning { background: var(--yellow); }
.site-dim-bar.error { background: var(--red); }
.site-dim-val {
  width: 36px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.site-dim-val.good { color: var(--green); }
.site-dim-val.warning { color: var(--yellow); }
.site-dim-val.error { color: var(--red); }

/* Page scores table */
.site-pages-table {
  background: var(--bg-card);
  border: var(--border-card);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.site-pages-thead {
  display: flex;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.site-pages-row {
  display: flex;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
  font-size: 13px;
}
.site-pages-row:last-child { border-bottom: none; }
.site-pages-row:hover { background: var(--bg-hover); }
.site-pages-cell { display: flex; align-items: center; }
.site-pages-url-cell {
  flex: 1;
  font-family: var(--font-mono);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-pages-row .site-pages-url-cell { color: var(--accent); }
.site-pages-score-cell {
  width: 60px;
  justify-content: flex-end;
  font-weight: 700;
  font-family: var(--font-mono);
}
.site-pages-grade-cell {
  width: 50px;
  justify-content: center;
  font-weight: 700;
}
.site-pages-score-cell.good, .site-pages-grade-cell.good { color: var(--green); }
.site-pages-score-cell.warning, .site-pages-grade-cell.warning { color: var(--yellow); }
.site-pages-score-cell.error, .site-pages-grade-cell.error { color: var(--red); }
.site-no-pages { color: var(--text-dim); text-align: center; padding: 24px; }

@media (max-width: 768px) {
  .site-analysis-card { flex-direction: column; align-items: center; gap: 18px; }
  .site-dims-col { width: 100%; }
  .site-dim-label { width: 100px; font-size: 12px; }
}
@media (max-width: 480px) {
  .site-pages-url-cell { max-width: 160px; }
}

/* ── Traffic analytics tab ──────────────────────────────────────────── */
.traffic-body { padding: 0; }

/* KPI row */
.traffic-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 16px;
}
.traffic-kpi-card {
  background: var(--bg-card);
  padding: 16px 12px; text-align: center;
}
.traffic-kpi-val {
  font-size: 22px; font-weight: 700;
  color: var(--accent); font-family: 'JetBrains Mono', monospace;
  margin-bottom: 4px;
}
.traffic-kpi-label {
  font-size: 11px; color: var(--text-dim);
}

/* Cards */
.traffic-card { margin-bottom: 16px; }
.traffic-card-title {
  font-size: 12px; font-weight: 700;
  color: var(--text-bright); letter-spacing: 0.05em;
  text-transform: uppercase; margin: 0 0 14px;
  font-family: 'JetBrains Mono', monospace;
}
.traffic-empty { color: var(--text-dim); font-size: 12px; padding: 8px 0; }

/* Layouts */
.traffic-row2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 0;
}
.traffic-row3 {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 0;
}
.traffic-row2 .admin-card,
.traffic-row3 .admin-card { margin-bottom: 16px; }

/* Horizontal bar list (referrers, UTM, countries) */
.traffic-bar-list { display: flex; flex-direction: column; gap: 8px; }
.traffic-bar-row { display: grid; grid-template-columns: 130px 1fr 70px; gap: 8px; align-items: center; }
.traffic-bar-label {
  font-size: 12px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.traffic-bar-track {
  background: rgba(255,255,255,0.06); border-radius: 2px; height: 6px; overflow: hidden;
}
.traffic-bar-fill {
  height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s ease;
}
.traffic-bar-count {
  font-size: 12px; color: var(--text-bright); text-align: right;
  font-family: 'JetBrains Mono', monospace;
}
.traffic-bar-pct { color: var(--text-dim); }

/* Pill list (device / browser / OS) */
.traffic-pill-list { display: flex; flex-direction: column; gap: 10px; }
.traffic-pill-row { display: grid; grid-template-columns: 90px 1fr 40px; gap: 8px; align-items: center; }
.traffic-pill-name { font-size: 12px; color: var(--text); }
.traffic-pill-bar-wrap {
  background: rgba(255,255,255,0.06); border-radius: 2px; height: 5px; overflow: hidden;
}
.traffic-pill-bar {
  height: 100%; background: #a78bfa; border-radius: 2px; transition: width 0.4s ease;
}
.traffic-pill-count {
  font-size: 11px; color: var(--text-dim); text-align: right;
  font-family: 'JetBrains Mono', monospace;
}

/* Daily chart */
.traffic-chart-wrap { overflow-x: auto; }
.traffic-chart-svg { width: 100%; max-width: 680px; display: block; }
.traffic-chart-legend {
  font-size: 11px; color: var(--text-dim); margin-top: 8px; display: flex;
  align-items: center; gap: 4px; flex-wrap: wrap;
}
.traffic-chart-legend-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 2px;
}

/* New vs returning */
.traffic-nr-wrap { display: flex; flex-direction: column; gap: 10px; }
.traffic-nr-bar {
  display: flex; height: 12px; border-radius: 6px; overflow: hidden; width: 100%;
}
.traffic-nr-new { background: var(--accent); }
.traffic-nr-ret { background: #475569; }
.traffic-nr-legend { font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.traffic-nr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; }
.traffic-nr-dot-new { background: var(--accent); }
.traffic-nr-dot-ret { background: #475569; }

/* Landing pages */
.traffic-landing-list { display: flex; flex-direction: column; gap: 6px; }
.traffic-landing-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.traffic-landing-row:last-child { border-bottom: none; }
.traffic-rank {
  font-size: 11px; color: var(--text-dim); min-width: 16px; text-align: right;
  font-family: 'JetBrains Mono', monospace;
}
.traffic-landing-path {
  flex: 1; font-size: 12px; color: var(--text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.traffic-landing-sessions {
  font-size: 11px; color: var(--text-dim); white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}

@media (max-width: 900px) {
  .traffic-kpi-row { grid-template-columns: repeat(3, 1fr); }
  .traffic-row2,
  .traffic-row3 { grid-template-columns: 1fr; }
  .traffic-bar-row { grid-template-columns: 110px 1fr 60px; }
}