/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-grad);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  transition: background 0.3s, color 0.3s;
}
.mono { font-family: 'JetBrains Mono', monospace; }
a { color: inherit; }
button { font-family: inherit; }

/* ===== Theme tokens ===== */
:root[data-theme="dark"] {
  --bg: #08080a;
  --bg-grad:
    radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 60%),
    #08080a;
  --panel: #0e0e11;
  --panel-2: #15151a;
  --panel-3: #1c1c22;
  --panel-soft: rgba(20,20,26,0.7);
  --border: #232329;
  --border-2: #2e2e36;
  --text: #f5f5f7;
  --text-muted: #9a9aa3;
  --text-faint: #5d5d66;
  --shadow-card: 0 30px 80px -20px rgba(0,0,0,0.6), 0 8px 24px -8px rgba(0,0,0,0.3);
  --shadow-glow: 0 20px 60px -20px color-mix(in srgb, var(--accent) 45%, transparent);
  --hero-tint: color-mix(in srgb, var(--accent-2) 18%, transparent);
  --hero-tint-2: color-mix(in srgb, var(--cyan) 10%, transparent);
  --tag-bg: rgba(16,185,129,0.1);
  --tag-text: #6ee7b7;
  --tag-border: rgba(16,185,129,0.2);
  --phone-shell: #000;
  --phone-shadow: 0 0 0 1px #2a2a30, 0 30px 80px -20px rgba(0,0,0,0.7);
  --bar-bg: linear-gradient(180deg, #131319, #0e0e13);
}
:root[data-theme="light"] {
  --bg: #fafafa;
  --bg-grad:
    radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 60%),
    #fafafa;
  --panel: #ffffff;
  --panel-2: #f7f7f9;
  --panel-3: #eeeef2;
  --panel-soft: rgba(255,255,255,0.85);
  --border: #e7e7eb;
  --border-2: #d4d4db;
  --text: #0a0a0d;
  --text-muted: #5a5a63;
  --text-faint: #9a9aa3;
  --shadow-card: 0 30px 80px -20px rgba(15,15,30,0.18), 0 8px 24px -8px rgba(15,15,30,0.08);
  --shadow-glow: 0 20px 60px -20px color-mix(in srgb, var(--accent) 35%, transparent);
  --hero-tint: color-mix(in srgb, var(--accent-2) 12%, transparent);
  --hero-tint-2: color-mix(in srgb, var(--cyan) 8%, transparent);
  --tag-bg: rgba(16,185,129,0.12);
  --tag-text: #047857;
  --tag-border: rgba(16,185,129,0.25);
  --phone-shell: #1a1a1d;
  --phone-shadow: 0 0 0 1px #d4d4db, 0 30px 80px -20px rgba(15,15,30,0.25);
  --bar-bg: linear-gradient(180deg, #fcfcfd, #f5f5f7);
}

/* Accents */
:root[data-accent="purple"] {
  --accent: #8b5cf6;
  --accent-2: #6366f1;
  --cyan: #06b6d4;
  --grad: linear-gradient(135deg, #8b5cf6 0%, #6366f1 45%, #06b6d4 100%);
  --accent-soft: rgba(139,92,246,0.12);
  --accent-soft-border: rgba(139,92,246,0.25);
  --accent-text: #c4b5fd;
}
:root[data-accent="orange"] {
  --accent: #FF7F50;
  --accent-2: #FB923C;
  --cyan: #F59E0B;
  --grad: linear-gradient(135deg, #FF7F50 0%, #FB923C 50%, #F59E0B 100%);
  --accent-soft: rgba(255,127,80,0.14);
  --accent-soft-border: rgba(255,127,80,0.3);
  --accent-text: #fdba74;
}
:root[data-theme="light"][data-accent="orange"] { --accent-text: #c2410c; }
:root[data-theme="light"][data-accent="purple"] { --accent-text: #6d28d9; }

:root {
  --success: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
}

/* ===== Top nav (shell) ===== */
.top-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}
.top-nav-inner {
  max-width: 1320px; margin: 0 auto; padding: 12px 32px;
  display: flex; align-items: center; gap: 28px;
}
.brand-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; color: var(--text); }
.brand-logo .mark {
  width: 28px; height: 28px; border-radius: 8px; background: var(--grad);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff;
}
.brand-logo .sub { font-size: 11px; color: var(--text-faint); font-weight: 500; margin-left: 4px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; }
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-links a {
  padding: 8px 14px; border-radius: 8px; text-decoration: none;
  color: var(--text-muted); font-size: 13px; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.nav-links a:hover { background: var(--panel-2); color: var(--text); }
.nav-links a.active { background: var(--accent-soft); color: var(--accent-text); }
.nav-actions { display: flex; gap: 10px; align-items: center; }

.theme-toggle, .accent-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px; font-size: 11px;
}
.theme-toggle button, .accent-toggle button {
  background: transparent; border: 0; padding: 5px 10px; border-radius: 999px;
  color: var(--text-muted); cursor: pointer; font-size: 11px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 5px;
}
.theme-toggle button.active, .accent-toggle button.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.accent-toggle .swatch { width: 10px; height: 10px; border-radius: 50%; }
.accent-toggle .swatch.purple { background: linear-gradient(135deg, #8b5cf6, #06b6d4); }
.accent-toggle .swatch.orange { background: linear-gradient(135deg, #FF7F50, #F59E0B); }

.btn-ghost {
  padding: 8px 14px; border-radius: 8px; background: transparent;
  border: 1px solid var(--border-2); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer;
}
.btn-primary {
  padding: 8px 16px; border-radius: 8px; background: var(--grad);
  color: #fff; font-size: 13px; font-weight: 600; border: 0; cursor: pointer;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ===== Page shell ===== */
.page { max-width: 1320px; margin: 0 auto; padding: 32px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; margin: 0; }
.page-head .crumbs { font-size: 12px; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; }
.page-head .crumbs .num { color: var(--accent-text); margin-right: 6px; }
.page-head .desc { font-size: 14px; color: var(--text-muted); margin-top: 4px; }

/* ===== Browser frame ===== */
.browser {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.browser-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--bar-bg);
}
.dots { display: flex; gap: 6px; }
.dots span { width: 12px; height: 12px; border-radius: 50%; }
.dots .d1 { background: #ff5f57; } .dots .d2 { background: #febc2e; } .dots .d3 { background: #28c840; }
.url {
  flex: 1; max-width: 480px; margin: 0 auto;
  background: var(--panel-3); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--text-muted); text-align: center;
}
.url .lock { color: var(--success); margin-right: 6px; }

/* ===== Home page ===== */
.home {
  position: relative; padding: 56px 64px 80px;
  background:
    radial-gradient(800px 400px at 50% -10%, var(--hero-tint), transparent 60%),
    radial-gradient(600px 400px at 100% 100%, var(--hero-tint-2), transparent 60%),
    var(--panel);
  min-height: 720px;
}
.home-hero { text-align: center; max-width: 760px; margin: 0 auto; }
.home-hero .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border-2);
  font-size: 12px; color: var(--text-muted);
}
.home-hero .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(16,185,129,0.18); }
.home-hero h1 {
  font-size: 60px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin: 24px 0 16px;
}
.home-hero h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.home-hero p { font-size: 17px; color: var(--text-muted); max-width: 560px; margin: 0 auto 40px; }

.search-box {
  max-width: 720px; margin: 0 auto;
  background: var(--panel-soft); backdrop-filter: blur(20px);
  border: 1px solid var(--border-2); border-radius: 20px; padding: 8px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,0.05);
}
.search-box .icon-search { padding: 0 14px; color: var(--text-faint); display: flex; }
.search-box input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--text); font-size: 16px; font-family: inherit; padding: 14px 0;
}
.search-box input::placeholder { color: var(--text-faint); }
.search-box .btn-mic {
  width: 40px; height: 40px; border-radius: 12px; background: var(--panel-3);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer;
}
.search-box .btn-go {
  width: 44px; height: 44px; border-radius: 12px; background: var(--grad);
  display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; border: 0;
}

.suggestions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.suggestions .chip {
  padding: 8px 14px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.suggestions .chip:hover { background: var(--panel-3); color: var(--text); }
.suggestions .chip svg { color: var(--accent); }

.home-strip {
  margin-top: 80px; display: flex; gap: 24px; justify-content: center; align-items: center;
  color: var(--text-faint); font-size: 12px; flex-wrap: wrap;
}
.home-strip .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); opacity: 0.5; }
.home-strip strong { color: var(--text); font-weight: 600; }

.home-features {
  margin-top: 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1080px; margin-left: auto; margin-right: auto;
}
.feature {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 20px;
}
.feature .ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-border);
  display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 12px;
}
.feature h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.feature p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.55; }

/* ===== Chat ===== */
.chat-app { display: grid; grid-template-columns: 260px 1fr 360px; height: 780px; }
.chat-side {
  background: var(--bg); border-right: 1px solid var(--border);
  padding: 20px 16px; display: flex; flex-direction: column; gap: 18px; overflow: hidden;
}
.chat-side .brand-mini { display: flex; align-items: center; gap: 10px; font-weight: 600; padding: 4px 6px; font-size: 14px; }
.chat-side .brand-mini .mark { width: 24px; height: 24px; border-radius: 7px; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; }

.btn-new {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-border);
  color: var(--accent-text); font-size: 13px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
}
.side-section { display: flex; flex-direction: column; gap: 2px; }
.side-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 6px; margin-bottom: 6px; font-weight: 600; }
.side-item {
  padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none;
}
.side-item:hover { background: var(--panel-2); }
.side-item.active { background: var(--panel-2); color: var(--text); }
.side-item .ico { color: var(--text-faint); font-size: 12px; }
.side-foot { margin-top: auto; padding: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-size: 13px; }
.side-foot .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #ef4444); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }

.chat-main { display: flex; flex-direction: column; background: var(--panel); overflow: hidden; min-width: 0; }
.chat-top { padding: 14px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chat-top .title { font-size: 14px; font-weight: 500; flex: 1; }
.chat-top .meta { font-size: 12px; color: var(--text-faint); }
.pill-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--success); padding: 3px 8px; background: rgba(16,185,129,0.1); border-radius: 6px; }
.pill-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

.chat-thread { flex: 1; overflow-y: auto; padding: 32px 24px; display: flex; flex-direction: column; gap: 24px; }
.msg-user { align-self: flex-end; max-width: 70%; padding: 12px 16px; background: var(--panel-3); border: 1px solid var(--border); border-radius: 16px 16px 4px 16px; font-size: 14px; line-height: 1.55; }

.msg-ai { display: flex; gap: 14px; }
.msg-ai .ai-av { width: 32px; height: 32px; border-radius: 10px; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; color: #fff; }
.msg-ai .body { flex: 1; min-width: 0; }
.msg-ai .body .name { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-ai .body .text { font-size: 14px; line-height: 1.65; color: var(--text); }
.msg-ai .body .text b { color: var(--text); font-weight: 700; }
.msg-ai .body .sources { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.msg-ai .body .sources .src { font-size: 11px; padding: 4px 8px; background: var(--panel-3); border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }

.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.product-card {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px;
  cursor: pointer; transition: border-color 0.2s, transform 0.2s;
}
.product-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.product-card .pimg { aspect-ratio: 16/10; border-radius: 10px; margin-bottom: 12px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-card .pimg.pc-1 { background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%); }
.product-card .pimg.pc-2 { background: linear-gradient(135deg, #134e4a 0%, #042f2e 100%); }
.product-card .pimg .badge { position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); color: #fff; font-weight: 600; border: 1px solid rgba(255,255,255,0.12); }
.product-card .pimg .badge.best { background: var(--grad); border: 0; color: #fff; }
.product-card .pimg .ghost { font-size: 36px; opacity: 0.85; }
.product-card .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.product-card .pname { font-size: 13px; font-weight: 600; line-height: 1.3; }
.product-card .price { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
.product-card .pmeta { display: flex; gap: 10px; font-size: 12px; color: var(--text-muted); margin-top: 6px; align-items: center; }
.product-card .stars { color: var(--warn); }
.product-card .summary { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }
.product-card .pros { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.product-card .pros .tag { font-size: 10px; padding: 3px 7px; border-radius: 5px; background: var(--tag-bg); color: var(--tag-text); border: 1px solid var(--tag-border); }

.chat-input-wrap { padding: 16px 24px 20px; border-top: 1px solid var(--border); }
.chat-input {
  background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 14px;
  padding: 8px 10px; display: flex; align-items: center; gap: 8px;
}
.chat-input input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 14px; font-family: inherit; padding: 8px 0; }
.chat-input input::placeholder { color: var(--text-faint); }
.chat-input .ibtn { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; border: 0; background: transparent; }
.chat-input .ibtn:hover { background: var(--panel-3); color: var(--text); }
.chat-input .send { background: var(--grad); color: #fff; }
.chat-foot-hint { font-size: 11px; color: var(--text-faint); text-align: center; margin-top: 10px; }

.chat-detail { background: var(--bg); border-left: 1px solid var(--border); padding: 20px; overflow-y: auto; }
.detail-img { aspect-ratio: 4/3; background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%); border-radius: 12px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; font-size: 48px; }
.detail-name { font-size: 16px; font-weight: 600; }
.detail-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.detail-price { font-size: 28px; font-weight: 700; margin: 16px 0 6px; letter-spacing: -0.02em; }
.detail-price-meta { font-size: 12px; color: var(--success); display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.detail-row { display: flex; justify-content: space-between; font-size: 13px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.detail-row .l { color: var(--text-muted); }
.detail-row .v { color: var(--text); font-weight: 500; }
.detail-actions { display: flex; gap: 8px; margin-top: 16px; }
.btn-buy { flex: 1; padding: 10px; background: var(--grad); color: #fff; border: 0; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-save { width: 40px; padding: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.review-block { margin-top: 20px; }
.review-block h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 0 0 12px; font-weight: 600; }
.review-bars { display: flex; flex-direction: column; gap: 8px; }
.review-bar { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-muted); }
.review-bar .label { width: 60px; flex-shrink: 0; }
.review-bar .bar { flex: 1; height: 6px; background: var(--panel-3); border-radius: 999px; overflow: hidden; }
.review-bar .fill { height: 100%; background: var(--grad); border-radius: 999px; }
.review-bar .pct { width: 32px; text-align: right; }

/* ===== Comparison ===== */
.compare {
  padding: 48px; min-height: 600px;
  background: radial-gradient(800px 400px at 50% -10%, var(--hero-tint-2), transparent 60%), var(--panel);
}
.compare-head { text-align: center; margin-bottom: 40px; }
.compare-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 600; border: 1px solid var(--accent-soft-border); letter-spacing: 0.06em; }
.compare-head h2 { font-size: 28px; font-weight: 600; margin: 16px 0 8px; letter-spacing: -0.02em; }
.compare-head p { color: var(--text-muted); font-size: 14px; }

.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
.compare-col {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; position: relative;
}
.compare-col.best { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.compare-col.best::before {
  content: 'AI VERDICT · BEST FIT';
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; padding: 4px 10px; border-radius: 6px;
  background: var(--grad); color: #fff; font-weight: 700; letter-spacing: 0.06em; z-index: 1;
}
.compare-col .cimg { aspect-ratio: 16/10; background: linear-gradient(135deg, #1e293b, #0f172a); display: flex; align-items: center; justify-content: center; font-size: 48px; opacity: 0.85; }
.compare-col.best .cimg { background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%); }
.compare-col .body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.compare-col .cname { font-size: 15px; font-weight: 600; }
.compare-col .price-row { display: flex; align-items: baseline; gap: 8px; }
.compare-col .price { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.compare-col .price-old { font-size: 13px; color: var(--text-faint); text-decoration: line-through; }
.compare-col .verdict { font-size: 13px; color: var(--text-muted); line-height: 1.6; padding: 12px; background: var(--panel-3); border-radius: 10px; border-left: 2px solid var(--accent); }
.compare-col .verdict b { color: var(--text); }
.compare-col .score-row { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.score { flex: 1; text-align: center; }
.score .v { font-size: 22px; font-weight: 700; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.score .l { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.compare-col .specs { display: flex; flex-direction: column; gap: 0; }
.compare-col .spec { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 12px; }
.compare-col .spec:last-child { border-bottom: 0; }
.compare-col .spec .l { color: var(--text-muted); }
.compare-col .spec .v { color: var(--text); font-weight: 500; }
.compare-col .cta { padding: 12px; background: var(--panel-3); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; margin-top: auto; }
.compare-col.best .cta { background: var(--grad); border: 0; color: #fff; box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent); }

/* ===== Recommendations ===== */
.reco { padding: 48px 56px; min-height: 600px; background: var(--panel); }
.reco-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.reco-head h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.reco-head .filters { display: flex; gap: 8px; flex-wrap: wrap; }
.reco-head .filter { padding: 6px 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; cursor: pointer; }
.reco-head .filter.active { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--accent-text); }
.reco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.reco-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, border-color 0.2s; }
.reco-card:hover { transform: translateY(-3px); border-color: var(--border-2); }
.reco-card .rimg { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; font-size: 48px; opacity: 0.85; position: relative; }
.reco-card .rimg .ai-pill {
  position: absolute; top: 12px; left: 12px;
  font-size: 10px; padding: 4px 8px; border-radius: 6px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(10px); color: #fff;
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.1); letter-spacing: 0.04em;
}
.reco-card .rimg .ai-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.reco-card .rbody { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.reco-card .rname { font-size: 14px; font-weight: 600; line-height: 1.3; }
.reco-card .meta-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.reco-card .stars { color: var(--warn); }
.reco-card .rprice { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.reco-card .rsum { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.reco-card .rsum .quote { color: var(--text); }
.reco-card .merchants { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--text-faint); flex-wrap: wrap; }
.reco-card .merchants .m { padding: 3px 7px; background: var(--panel-3); border-radius: 5px; border: 1px solid var(--border); }
.reco-card .actions { display: flex; gap: 8px; margin-top: auto; }
.reco-card .btn-compare { flex: 1; padding: 8px; background: var(--panel-3); border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); font-size: 12px; cursor: pointer; }
.reco-card .btn-buy-s { flex: 1; padding: 8px; background: var(--grad); color: #fff; border: 0; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }

.rimg.a1 { background: linear-gradient(135deg, #312e81, #1e1b4b); }
.rimg.a2 { background: linear-gradient(135deg, #134e4a, #042f2e); }
.rimg.a3 { background: linear-gradient(135deg, #7c2d12, #431407); }
.rimg.a4 { background: linear-gradient(135deg, #581c87, #3b0764); }
.rimg.a5 { background: linear-gradient(135deg, #0c4a6e, #082f49); }
.rimg.a6 { background: linear-gradient(135deg, #831843, #500724); }

/* ===== Mobile ===== */
.mobile-row {
  display: flex; gap: 60px; justify-content: center; align-items: flex-start;
  padding: 60px 40px; flex-wrap: wrap;
  background:
    radial-gradient(600px 400px at 30% 50%, var(--hero-tint), transparent 60%),
    radial-gradient(600px 400px at 70% 50%, var(--hero-tint-2), transparent 60%),
    var(--panel);
}
.phone {
  width: 320px; height: 680px; background: var(--phone-shell);
  border-radius: 44px; padding: 12px;
  box-shadow: var(--phone-shadow), 0 0 60px -20px color-mix(in srgb, var(--accent) 28%, transparent);
  position: relative; flex-shrink: 0;
}
.phone::before {
  content: ''; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 26px; background: var(--phone-shell); border-radius: 999px; z-index: 2;
}
.phone-screen {
  width: 100%; height: 100%; background: var(--panel); border-radius: 32px;
  overflow: hidden; display: flex; flex-direction: column;
}
.phone-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px 6px; font-size: 12px; font-weight: 600; }
.phone-top { padding: 30px 16px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.phone-top .back { color: var(--text-muted); font-size: 18px; }
.phone-top .ttl { font-size: 13px; font-weight: 600; flex: 1; }
.phone-top .menu { color: var(--text-muted); }
.phone-body { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.m-msg-user { align-self: flex-end; max-width: 80%; padding: 10px 12px; background: var(--panel-3); border: 1px solid var(--border); border-radius: 14px 14px 4px 14px; font-size: 12px; line-height: 1.5; }
.m-msg-ai { display: flex; gap: 8px; }
.m-msg-ai .av { width: 24px; height: 24px; border-radius: 8px; background: var(--grad); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; }
.m-msg-ai .body { flex: 1; font-size: 12px; color: var(--text); line-height: 1.5; }
.m-msg-ai .body b { color: var(--text); font-weight: 700; }
.m-prod { margin-top: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: flex; gap: 10px; }
.m-prod .mimg { width: 48px; height: 48px; border-radius: 8px; background: linear-gradient(135deg, #312e81, #1e1b4b); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.m-prod .info { flex: 1; min-width: 0; }
.m-prod .info .n { font-size: 11px; font-weight: 600; line-height: 1.3; }
.m-prod .info .p { font-size: 13px; font-weight: 700; margin-top: 4px; }
.m-prod .info .r { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.phone-input { padding: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }
.phone-input .field { flex: 1; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; color: var(--text-faint); font-size: 12px; }
.phone-input .ibtn { width: 32px; height: 32px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; color: #fff; }

.phone-home-hero { padding: 30px 16px 16px; text-align: center; }
.phone-home-hero .brand-mini { justify-content: center; margin-bottom: 12px; }
.phone-home-hero h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 12px 0; }
.phone-home-hero h2 .g { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.phone-home-hero p { font-size: 12px; color: var(--text-muted); }
.phone-search { margin: 20px 16px 0; background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 16px; padding: 14px; }
.phone-search .field { font-size: 13px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.phone-search .crow { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.phone-search .crow .chip { font-size: 10px; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); color: var(--accent-text); }

.phone-trending { padding: 16px; }
.phone-trending h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 600; margin: 0 0 12px; }
.phone-tcard { display: flex; gap: 10px; padding: 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; align-items: center; }
.phone-tcard .tcimg { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.phone-tcard .info { flex: 1; min-width: 0; }
.phone-tcard .info .t { font-size: 11px; font-weight: 600; line-height: 1.3; }
.phone-tcard .info .m { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.phone-tcard .arrow { color: var(--text-faint); font-size: 18px; }

/* ===== Footer ===== */
.foot { max-width: 1320px; margin: 0 auto; padding: 32px 32px 60px; color: var(--text-faint); font-size: 12px; text-align: center; }
.foot .links { display: flex; gap: 16px; justify-content: center; margin-top: 8px; }
.foot a { color: var(--text-muted); text-decoration: none; }
.foot a:hover { color: var(--text); }

/* ===== Print ===== */
@media print {
  .top-nav, .foot { display: none; }
  .browser { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
  .page { padding: 0; max-width: 100%; }
  body { background: #fff; color: #000; }
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .chat-app { grid-template-columns: 220px 1fr 300px; }
  .compare-grid { grid-template-columns: 1fr; max-width: 480px; }
  .reco-grid { grid-template-columns: repeat(2, 1fr); }
  .home-features { grid-template-columns: repeat(2, 1fr); }
  .home-hero h1 { font-size: 44px; }
}
@media (max-width: 820px) {
  .top-nav-inner { flex-wrap: wrap; gap: 14px; padding: 12px 20px; }
  .nav-links { order: 3; flex-basis: 100%; overflow-x: auto; }
  .chat-app { grid-template-columns: 1fr; height: auto; }
  .chat-side, .chat-detail { display: none; }
  .reco-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .home { padding: 32px 24px 48px; }
  .home-hero h1 { font-size: 32px; }
  .home-features { grid-template-columns: 1fr; }
  .page { padding: 20px; }
  .compare { padding: 24px; }
  .reco { padding: 24px; }
}

/* ============================================================
   Brand Hub · GEO Tracker
   ============================================================ */
.brand-hub { padding: 28px 36px 48px; background: var(--panel); }

.brand-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 28px; }
.toolbar-select {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; font-size: 13px; color: var(--text); cursor: pointer;
}
.toolbar-select .l { color: var(--text-faint); font-size: 11px; font-weight: 500; }
.toolbar-select .v { font-weight: 600; }
.toolbar-select .chevron { color: var(--text-faint); font-size: 10px; margin-left: 2px; }
.toolbar-select.brand-pick { padding-left: 8px; }
.toolbar-select .bavatar { width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #f59e0b, #b45309); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.toolbar-spacer { flex: 1; }
.btn-icon {
  padding: 8px 12px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; font-size: 13px; color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-icon.primary { background: var(--grad); color: #fff; border: 0; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); }

/* KPI strip */
.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; }
.kpi-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.kpi-card .label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.kpi-card .value { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.kpi-card .value .unit { font-size: 16px; color: var(--text-muted); font-weight: 500; margin-left: 4px; }
.kpi-card .delta { font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.kpi-card .delta.up { color: var(--success); }
.kpi-card .delta.down { color: var(--danger); }
.kpi-card .delta .vs { color: var(--text-faint); margin-left: 4px; }
.kpi-card .spark { height: 28px; margin-top: 2px; opacity: 0.9; }

/* Section heads */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 36px 0 14px; flex-wrap: wrap; gap: 8px; }
.section-head h3 { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -0.015em; }
.section-head .hint { font-size: 12px; color: var(--text-muted); }
.section-head .tabs { display: inline-flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.section-head .tabs button { background: transparent; border: 0; padding: 5px 10px; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 11px; font-weight: 500; }
.section-head .tabs button.active { background: var(--panel-3); color: var(--text); }

/* Platform grid */
.platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.platform-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; transition: border-color 0.2s, transform 0.2s; }
.platform-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.platform-card .phead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.platform-card .pico {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff;
}
.platform-card .pname { font-size: 13px; font-weight: 600; line-height: 1.2; }
.platform-card .pmeta { font-size: 10px; color: var(--text-faint); margin-top: 2px; }
.platform-card .pbadge {
  margin-left: auto; font-size: 9px; padding: 3px 7px; border-radius: 5px; font-weight: 700; letter-spacing: 0.05em;
}
.pbadge.exc { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.2); }
.pbadge.good { background: rgba(99,102,241,0.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.2); }
.pbadge.weak { background: rgba(245,158,11,0.15); color: #fcd34d; border: 1px solid rgba(245,158,11,0.2); }
.pbadge.miss { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.2); }
:root[data-theme="light"] .pbadge.exc { color: #047857; }
:root[data-theme="light"] .pbadge.good { color: #4338ca; }
:root[data-theme="light"] .pbadge.weak { color: #b45309; }
:root[data-theme="light"] .pbadge.miss { color: #b91c1c; }

.platform-card .stat-row { display: flex; gap: 12px; padding: 10px 0 0; border-top: 1px solid var(--border); }
.platform-card .stat-row .stat { flex: 1; }
.platform-card .stat-row .stat .v { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.platform-card .stat-row .stat .l { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; font-weight: 600; }
.platform-card .spark-mini { height: 22px; margin-top: 8px; }

/* Platform brand colors */
.pico-chatgpt { background: #10A37F; }
.pico-claude { background: #D97757; }
.pico-gemini { background: linear-gradient(135deg, #4285F4 0%, #9B72CB 50%, #F94A1F 100%); }
.pico-grok { background: #0d0d0d; border: 1px solid #333; }
.pico-deepseek { background: #4D6BFE; }
.pico-perplexity { background: #20808D; }
.pico-copilot { background: linear-gradient(135deg, #00A4EF, #7FBA00); }
.pico-meta { background: linear-gradient(135deg, #0064E1, #5B9DFF); }
.pico-mistral { background: linear-gradient(135deg, #FF7000, #FFA800); }
.pico-qwen { background: linear-gradient(135deg, #615CED, #BD60FF); }
.pico-kimi { background: #1a1a1a; border: 1px solid #444; }
.pico-ernie { background: #2932E1; }

/* Heatmap */
.heatmap { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; overflow-x: auto; }
.heat-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; font-size: 11px; color: var(--text-muted); }
.heat-legend .item { display: inline-flex; align-items: center; gap: 6px; }
.heat-cell { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; font-size: 11px; font-weight: 700; }
.heat-cell.t1 { background: rgba(16,185,129,0.85); color: #fff; }
.heat-cell.t2 { background: rgba(16,185,129,0.4); color: #fff; }
.heat-cell.t3 { background: rgba(245,158,11,0.35); color: #fcd34d; }
.heat-cell.t0 { background: rgba(239,68,68,0.18); color: #fca5a5; }
:root[data-theme="light"] .heat-cell.t2 { color: #064e3b; }
:root[data-theme="light"] .heat-cell.t3 { color: #b45309; }
:root[data-theme="light"] .heat-cell.t0 { color: #b91c1c; }

.heat-table { width: 100%; border-collapse: collapse; min-width: 780px; font-size: 12px; }
.heat-table th, .heat-table td { padding: 10px 6px; text-align: center; }
.heat-table th { font-weight: 600; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); }
.heat-table th .pico { display: inline-flex; width: 22px; height: 22px; border-radius: 5px; font-size: 10px; margin-bottom: 4px; }
.heat-table th .nm { display: block; font-size: 9px; }
.heat-table th:first-child, .heat-table td:first-child { text-align: left; color: var(--text); font-weight: 500; font-size: 12px; text-transform: none; letter-spacing: 0; padding-left: 4px; min-width: 240px; }
.heat-table td { border-bottom: 1px dashed var(--border); }
.heat-table tbody tr:last-child td { border-bottom: 0; }

/* Competitor */
.comp-bars { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.comp-row { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.comp-row .cname { width: 160px; flex-shrink: 0; }
.comp-row.you .cname { color: var(--accent-text); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.comp-row.you .cname .yu { font-size: 9px; padding: 2px 6px; border-radius: 4px; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); color: var(--accent-text); font-weight: 700; letter-spacing: 0.05em; }
.comp-row .cbar { flex: 1; height: 22px; background: var(--panel-3); border-radius: 6px; overflow: hidden; position: relative; }
.comp-row .cfill { height: 100%; border-radius: 6px; transition: width 0.4s; }
.comp-row.you .cfill { background: var(--grad); }
.comp-row .cfill.gray { background: linear-gradient(90deg, #475569, #334155); }
:root[data-theme="light"] .comp-row .cfill.gray { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.comp-row .cval { width: 60px; text-align: right; font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 13px; }

/* Suggestion cards */
.suggest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.suggest-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.suggest-card .stop { display: flex; align-items: flex-start; gap: 12px; }
.suggest-card .sicon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.suggest-card .stitle { font-size: 14px; font-weight: 600; margin: 0 0 4px; line-height: 1.3; }
.suggest-card .ssub { font-size: 12.5px; color: var(--text-muted); margin: 0; line-height: 1.55; }
.suggest-card .smeta { display: flex; gap: 6px; flex-wrap: wrap; }
.suggest-card .schip { font-size: 10px; padding: 3px 8px; background: var(--panel-3); border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.suggest-card .schip .swatch { width: 8px; height: 8px; border-radius: 50%; }
.suggest-card .slift { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 4px 10px; background: var(--tag-bg); color: var(--tag-text); border: 1px solid var(--tag-border); border-radius: 6px; font-weight: 600; align-self: flex-start; }
.suggest-card .sfoot { display: flex; gap: 8px; margin-top: 4px; align-items: center; }
.suggest-card .saction { padding: 7px 12px; background: var(--grad); color: #fff; border: 0; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.suggest-card .sskip { padding: 7px 12px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); font-size: 12px; cursor: pointer; }

/* Prompt optimizer */
.prompt-opt { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.prompt-opt .ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.prompt-opt .ph h4 { margin: 0; font-size: 14px; font-weight: 600; }
.prompt-opt .ph .pgear { font-size: 11px; color: var(--text-faint); }
.prompt-block { background: var(--panel-3); border: 1px solid var(--border); border-radius: 10px; padding: 14px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.8; color: var(--text); }
.prompt-block .add { background: rgba(16,185,129,0.18); color: #6ee7b7; padding: 1px 5px; border-radius: 3px; }
.prompt-block .rem { background: rgba(239,68,68,0.18); color: #fca5a5; padding: 1px 5px; border-radius: 3px; text-decoration: line-through; }
.prompt-block .note { color: var(--text-faint); font-style: italic; }
:root[data-theme="light"] .prompt-block .add { color: #047857; }
:root[data-theme="light"] .prompt-block .rem { color: #b91c1c; }
.prompt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.prompt-grid .pl { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 6px; }
.prompt-impact { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; }
.prompt-impact .pi { display: flex; flex-direction: column; gap: 2px; }
.prompt-impact .pi .l { color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.prompt-impact .pi .v { font-weight: 700; color: var(--text); }

@media (max-width: 1100px) {
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .suggest-grid { grid-template-columns: 1fr; }
  .prompt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .platform-grid { grid-template-columns: 1fr; }
  .kpi-strip { grid-template-columns: 1fr; }
  .brand-hub { padding: 20px; }
}

/* ============================================================
   AI Optimization Studio · Seller Backend
   ============================================================ */
.studio { padding: 28px 36px 48px; background: var(--panel); }

/* KPI strip variant for seller (reuses .kpi-strip / .kpi-card) */

/* Optimization studio: 3-column layout */
.opt-studio { display: grid; grid-template-columns: 280px 240px 1fr; gap: 16px; }

.source-panel, .pipeline, .output { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }

.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.panel-head h4 { font-size: 13px; font-weight: 600; margin: 0; }
.panel-head .ph-meta { font-size: 11px; color: var(--text-faint); }

/* Source panel */
.product-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.source-product { display: flex; gap: 10px; padding: 10px; background: var(--panel-3); border-radius: 10px; align-items: center; cursor: pointer; border: 1px solid transparent; }
.source-product.active { border-color: var(--accent-soft-border); background: var(--accent-soft); }
.source-product .sp-img { width: 36px; height: 36px; border-radius: 7px; background: linear-gradient(135deg, #312e81, #1e1b4b); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.source-product .sp-img.b2 { background: linear-gradient(135deg, #134e4a, #042f2e); }
.source-product .sp-img.b3 { background: linear-gradient(135deg, #581c87, #3b0764); }
.source-product .sp-name { font-size: 12px; font-weight: 600; line-height: 1.3; }
.source-product .sp-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.field-block { margin-top: 14px; }
.field-block .fl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 700; margin-bottom: 6px; display: flex; justify-content: space-between; }
.field-block .fl .src { color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 10px; }
.field-block .fv { font-size: 13px; color: var(--text); line-height: 1.5; }
.field-block .fv.small { font-size: 12px; color: var(--text-muted); }
.field-block .specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; font-size: 11px; }
.field-block .specs-grid .s { display: flex; justify-content: space-between; padding: 4px 8px; background: var(--panel-3); border-radius: 5px; }
.field-block .specs-grid .s .sl { color: var(--text-muted); }
.field-block .source-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.field-block .source-meta .sm { font-size: 10px; padding: 3px 7px; background: var(--panel-3); border-radius: 4px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.field-block .source-meta .sm.ok { color: #6ee7b7; }
:root[data-theme="light"] .field-block .source-meta .sm.ok { color: #047857; }

/* Pipeline */
.pipeline-step { padding: 12px; border-radius: 10px; background: var(--panel-3); margin-bottom: 18px; border: 1px solid var(--border); position: relative; }
.pipeline-step::after { content: ''; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--border-2); z-index: 1; }
.pipeline-step:last-child { margin-bottom: 0; }
.pipeline-step:last-child::after { display: none; }
.pipeline-step.active { background: var(--accent-soft); border-color: var(--accent-soft-border); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent); }
.pipeline-step .pn { font-size: 9px; color: var(--text-faint); font-weight: 700; letter-spacing: 0.06em; font-family: 'JetBrains Mono', monospace; }
.pipeline-step .pt { font-size: 13px; font-weight: 600; margin-top: 4px; }
.pipeline-step .pd { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }
.pipeline-step .pstat { font-size: 10px; color: var(--success); margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.pipeline-step.active .pstat { color: var(--accent-text); }
.pipeline-step .pstat.run { color: var(--accent-text); }
.pipeline-step .pstat .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Output panel */
.output .otabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.output .otab { padding: 6px 10px; border-radius: 8px; background: var(--panel-3); border: 1px solid var(--border); font-size: 11px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.output .otab .pico { width: 18px; height: 18px; border-radius: 4px; font-size: 9px; }
.output .otab.active { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--accent-text); }

.output-block { margin-bottom: 18px; }
.output-block:last-child { margin-bottom: 0; }
.output-block .ohead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 8px; }
.output-block .ol { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 700; }
.output-block .obadge { font-size: 10px; padding: 2px 8px; background: var(--tag-bg); color: var(--tag-text); border: 1px solid var(--tag-border); border-radius: 5px; font-weight: 600; }
.output-block .preview { background: var(--panel-3); border: 1px solid var(--border); border-radius: 10px; padding: 14px; font-size: 13px; line-height: 1.65; color: var(--text); }
.output-block .preview .you { background: var(--accent-soft); color: var(--accent-text); padding: 1px 5px; border-radius: 3px; font-weight: 600; border: 1px solid var(--accent-soft-border); }
.output-block .preview .um { display: flex; gap: 8px; align-items: flex-start; }
.output-block .preview .um .av { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; font-size: 10px; }
.output-block .preview .label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 4px; }

.output-block .code { background: var(--panel-3); border: 1px solid var(--border); border-radius: 10px; padding: 14px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text); line-height: 1.7; overflow-x: auto; }
.output-block .code .k { color: var(--accent-text); }
.output-block .code .s { color: #6ee7b7; }
.output-block .code .n { color: #fcd34d; }
:root[data-theme="light"] .output-block .code .s { color: #047857; }
:root[data-theme="light"] .output-block .code .n { color: #b45309; }

.output-block .pcoverage { display: flex; flex-direction: column; gap: 6px; }
.output-block .pcoverage .pc { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: var(--panel-3); border-radius: 8px; font-size: 12px; }
.output-block .pcoverage .pc .pq { color: var(--text); font-weight: 500; }
.output-block .pcoverage .pc .ps { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }
.output-block .pcoverage .pc .ps .dot { width: 6px; height: 6px; border-radius: 50%; }
.output-block .pcoverage .pc .ps.won { color: var(--success); }
.output-block .pcoverage .pc .ps.won .dot { background: var(--success); }
.output-block .pcoverage .pc .ps.pend { color: var(--warn); }
.output-block .pcoverage .pc .ps.pend .dot { background: var(--warn); }
.output-block .pcoverage .pc .ps.lost { color: var(--danger); }
.output-block .pcoverage .pc .ps.lost .dot { background: var(--danger); }

.output-block .diff { background: var(--panel-3); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.output-block .diff .d-row { display: flex; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; line-height: 1.65; padding: 4px 0; }
.output-block .diff .d-row .gutter { color: var(--text-faint); font-weight: 700; flex-shrink: 0; width: 20px; }
.output-block .diff .d-row.add { background: rgba(16,185,129,0.08); padding: 4px 8px; margin: 0 -8px; border-radius: 4px; }
.output-block .diff .d-row.add .gutter { color: #6ee7b7; }
.output-block .diff .d-row.rem { background: rgba(239,68,68,0.08); padding: 4px 8px; margin: 0 -8px; border-radius: 4px; color: var(--text-muted); text-decoration: line-through; }
.output-block .diff .d-row.rem .gutter { color: #fca5a5; text-decoration: none; }

.output-actions { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); margin-top: 14px; }
.output-actions .btn-push { padding: 10px 16px; background: var(--grad); color: #fff; border: 0; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.output-actions .btn-test { padding: 10px 14px; background: var(--panel-3); border: 1px solid var(--border); color: var(--text); border-radius: 10px; font-size: 13px; font-weight: 500; cursor: pointer; }
.output-actions .stamp { margin-left: auto; font-size: 11px; color: var(--text-faint); align-self: center; }

/* Sync grid */
.sync-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.sync-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; align-items: center; gap: 9px; }
.sync-card .pico { width: 26px; height: 26px; border-radius: 6px; font-size: 11px; flex-shrink: 0; }
.sync-card .sinfo { min-width: 0; flex: 1; }
.sync-card .sname { font-size: 11.5px; font-weight: 600; line-height: 1.2; }
.sync-card .sstatus { font-size: 10px; color: var(--text-faint); margin-top: 2px; display: inline-flex; align-items: center; gap: 4px; }
.sync-card .sstatus .dot { width: 5px; height: 5px; border-radius: 50%; }
.sync-card .sstatus.ok { color: var(--success); }
.sync-card .sstatus.ok .dot { background: var(--success); box-shadow: 0 0 4px var(--success); }
.sync-card .sstatus.warn { color: var(--warn); }
.sync-card .sstatus.warn .dot { background: var(--warn); }
.sync-card .sstatus.err { color: var(--danger); }
.sync-card .sstatus.err .dot { background: var(--danger); }

/* Funnel */
.funnel { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.funnel-row { display: grid; grid-template-columns: 180px 1fr 110px 100px; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px dashed var(--border); }
.funnel-row:last-child { border-bottom: 0; }
.funnel-row .fn { font-size: 13px; font-weight: 600; }
.funnel-row .fsub { font-size: 10px; color: var(--text-faint); font-weight: 400; display: block; margin-top: 3px; }
.funnel-row .fbar { height: 26px; background: var(--panel-3); border-radius: 6px; overflow: hidden; }
.funnel-row .ffill { height: 100%; background: var(--grad); border-radius: 6px; display: flex; align-items: center; padding-left: 10px; font-size: 11px; font-weight: 700; color: #fff; }
.funnel-row .fval { font-size: 16px; font-weight: 700; text-align: right; font-family: 'JetBrains Mono', monospace; }
.funnel-row .fconv { font-size: 11px; text-align: right; color: var(--text-faint); }
.funnel-row .fconv strong { color: var(--success); font-weight: 700; }

@media (max-width: 1100px) {
  .opt-studio { grid-template-columns: 1fr; }
  .sync-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .sync-grid { grid-template-columns: repeat(2, 1fr); }
  .studio { padding: 20px; }
  .funnel-row { grid-template-columns: 1fr; gap: 6px; }
  .funnel-row .fbar { order: 3; }
  .funnel-row .fval, .funnel-row .fconv { text-align: left; }
}

/* ============================================================
   Onboarding Wizard
   ============================================================ */
.onboarding { padding: 36px 48px 48px; background: var(--panel); }

.wiz-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 28px; }
.wiz-step { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wiz-step .wcircle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--panel-3); color: var(--text-faint); border: 1px solid var(--border); flex-shrink: 0; }
.wiz-step.done .wcircle { background: var(--success); color: #fff; border: 0; }
.wiz-step.active .wcircle { background: var(--grad); color: #fff; border: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.wiz-step .wlabel { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.wiz-step.active .wlabel, .wiz-step.done .wlabel { color: var(--text); font-weight: 600; }
.wiz-line { flex: 1; height: 2px; background: var(--border); border-radius: 99px; min-width: 16px; }
.wiz-line.done { background: var(--success); }

.wiz-content h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 6px; }
.wiz-content .ws { font-size: 14px; color: var(--text-muted); margin-bottom: 22px; }

.choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.choice-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; cursor: pointer; transition: border-color 0.2s, transform 0.2s; position: relative; }
.choice-card:hover { transform: translateY(-2px); border-color: var(--border-2); }
.choice-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.choice-card .clogo { width: 40px; height: 40px; border-radius: 10px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff; }
.clogo-shopify { background: #5A8E3B; }
.clogo-woo { background: #7F54B3; }
.clogo-csv { background: #475569; }
.clogo-api { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.clogo-magento { background: #EE672F; }
.choice-card h4 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.choice-card p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.choice-card .badge-pop { position: absolute; top: 12px; right: 12px; font-size: 9px; padding: 3px 7px; border-radius: 5px; background: var(--tag-bg); color: var(--tag-text); border: 1px solid var(--tag-border); font-weight: 700; letter-spacing: 0.04em; }

.wiz-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.wiz-actions .left { font-size: 12px; color: var(--text-faint); }
.wiz-actions .right { display: flex; gap: 10px; }
.btn-wiz-back { padding: 10px 16px; background: transparent; border: 1px solid var(--border-2); color: var(--text); border-radius: 10px; font-size: 13px; cursor: pointer; }
.btn-wiz-next { padding: 10px 20px; background: var(--grad); color: #fff; border: 0; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 28%, transparent); }

/* Scanning step */
.scan-stage { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
.scan-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.scan-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: spin 1.1s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.scan-head .sh-title { font-size: 16px; font-weight: 600; margin: 0; }
.scan-head .sh-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.scan-log { display: flex; flex-direction: column; gap: 8px; }
.scan-row { display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: var(--panel-3); border-radius: 10px; font-size: 13px; }
.scan-row .stime { color: var(--text-faint); width: 56px; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.scan-row .sicon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.scan-row.done .sicon { background: var(--success); color: #fff; }
.scan-row.running .sicon { background: var(--accent); color: #fff; }
.scan-row.pending .sicon { background: var(--panel); border: 1px solid var(--border); color: var(--text-faint); }
.scan-row .stext { color: var(--text); flex: 1; }
.scan-row .scount { color: var(--text-faint); font-size: 11px; font-family: 'JetBrains Mono', monospace; }
.scan-progress { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.scan-progress .pbar { height: 8px; background: var(--panel-3); border-radius: 99px; overflow: hidden; }
.scan-progress .pbar .pf { height: 100%; background: var(--grad); border-radius: 99px; transition: width 0.3s; }
.scan-progress .pmeta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.scan-progress .pmeta strong { color: var(--text); }

/* Success */
.success-banner { background: linear-gradient(135deg, color-mix(in srgb, var(--success) 22%, var(--panel-2)), var(--panel-2)); border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border)); border-radius: 16px; padding: 32px; text-align: center; margin-bottom: 20px; }
.success-banner .stick { width: 56px; height: 56px; border-radius: 50%; background: var(--success); display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 16px; color: #fff; font-weight: 700; }
.success-banner h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 8px; }
.success-banner p { font-size: 14px; color: var(--text-muted); margin: 0 0 18px; }
.success-banner .actions { display: flex; gap: 10px; justify-content: center; }
.success-banner .actions a { padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; }
.success-banner .actions .a-prim { background: var(--grad); color: #fff; }
.success-banner .actions .a-sec { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }

.live-stream { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.live-stream h4 { font-size: 13px; font-weight: 600; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.live-stream h4 .ldot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 20%, transparent); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.mention-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.mention-row:last-child { border-bottom: 0; }
.mention-row .pico { width: 24px; height: 24px; border-radius: 6px; font-size: 10px; flex-shrink: 0; }
.mention-row .mtext { flex: 1; color: var(--text-muted); line-height: 1.55; }
.mention-row .mtext b { color: var(--text); font-weight: 600; }
.mention-row .mtext .you { background: var(--accent-soft); color: var(--accent-text); padding: 1px 5px; border-radius: 3px; font-weight: 600; border: 1px solid var(--accent-soft-border); }
.mention-row .mtime { font-size: 11px; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.first-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0; }
.first-kpi .fk { background: var(--panel-3); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.first-kpi .fk .fv { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.first-kpi .fk .fl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ============================================================
   Pricing & Marketplace Contracts
   ============================================================ */
.pricing { padding: 48px 48px 56px; background: var(--panel); }
.pricing-hero { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.pricing-hero h2 { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 12px; }
.pricing-hero p { font-size: 16px; color: var(--text-muted); margin: 0 0 20px; }
.billing-toggle { display: inline-flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.billing-toggle button { background: transparent; border: 0; padding: 8px 18px; border-radius: 999px; color: var(--text-muted); cursor: pointer; font-size: 12px; font-weight: 500; }
.billing-toggle button.active { background: var(--accent-soft); color: var(--accent-text); }
.billing-toggle .save { font-size: 9px; padding: 2px 7px; background: var(--tag-bg); color: var(--tag-text); border-radius: 4px; font-weight: 700; margin-left: 6px; }

.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 48px; }
.tier-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 16px; padding: 24px 20px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.tier-card.featured { border-color: var(--accent); box-shadow: var(--shadow-glow); transform: scale(1.02); }
.tier-card.featured::before { content: 'MOST POPULAR'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: 0.08em; font-weight: 700; padding: 4px 12px; background: var(--grad); color: #fff; border-radius: 6px; }
.tier-name { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.tier-price { display: flex; align-items: baseline; gap: 6px; }
.tier-price .tp-cur { font-size: 18px; font-weight: 600; color: var(--text-muted); }
.tier-price .tp-val { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.tier-price .tp-per { font-size: 13px; color: var(--text-muted); }
.tier-tagline { font-size: 13px; color: var(--text-muted); line-height: 1.5; min-height: 36px; }
.tier-cta { padding: 11px; background: var(--panel-3); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; }
.tier-card.featured .tier-cta { background: var(--grad); border: 0; color: #fff; box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.feature-list { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 0; border-top: 1px solid var(--border); margin-top: 4px; }
.feature-list .f { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text); line-height: 1.5; }
.feature-list .f.no { color: var(--text-faint); }
.feature-list .f .fi { color: var(--success); flex-shrink: 0; margin-top: 2px; font-size: 12px; }
.feature-list .f.no .fi { color: var(--text-faint); }

/* Comparison matrix */
.compare-matrix { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 8px 16px; overflow-x: auto; margin-bottom: 48px; }
.compare-matrix table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 700px; }
.compare-matrix th, .compare-matrix td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--border); }
.compare-matrix th { font-weight: 600; font-size: 12px; color: var(--text-muted); }
.compare-matrix th.tier-h { color: var(--text); font-size: 14px; font-weight: 700; }
.compare-matrix th.featured-h, .compare-matrix td.featured-c { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.compare-matrix th:first-child, .compare-matrix td:first-child { text-align: left; color: var(--text); font-weight: 500; }
.compare-matrix .check { color: var(--success); font-size: 16px; }
.compare-matrix .dash { color: var(--text-faint); }
.compare-matrix tbody tr:last-child td { border-bottom: 0; }
.compare-matrix .row-cat td { background: var(--panel-3); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); padding: 8px 14px; }

/* Revenue share callout */
.revshare { background: linear-gradient(135deg, var(--accent-soft), transparent); border: 1px solid var(--accent-soft-border); border-radius: 16px; padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin-bottom: 48px; }
.revshare h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; }
.revshare p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0 0 16px; }
.revshare ul { list-style: none; padding: 0; margin: 0; }
.revshare ul li { padding: 6px 0; font-size: 13px; display: flex; gap: 8px; align-items: flex-start; line-height: 1.55; }
.revshare ul li::before { content: '→'; color: var(--accent); font-weight: 700; }
.revshare-illust { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.revshare-illust .rrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.revshare-illust .rrow .rlabel { flex: 1; font-size: 13px; color: var(--text-muted); }
.revshare-illust .rrow .rval { font-size: 16px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.revshare-illust .rfinal { padding: 14px 12px; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); border-radius: 10px; margin-top: 8px; display: flex; justify-content: space-between; align-items: center; }
.revshare-illust .rfinal .l { font-size: 12px; color: var(--accent-text); font-weight: 600; }
.revshare-illust .rfinal .v { font-size: 20px; font-weight: 700; color: var(--accent-text); font-family: 'JetBrains Mono', monospace; }

/* ROI calc */
.roi-calc { background: var(--panel-2); border: 1px solid var(--border); border-radius: 16px; padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 48px; }
.roi-input h3 { font-size: 20px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.02em; }
.roi-input .ri-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 20px; }
.roi-field { margin-bottom: 16px; }
.roi-field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 700; display: block; margin-bottom: 6px; }
.roi-field .ifield { display: flex; align-items: center; gap: 10px; background: var(--panel-3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.roi-field .ifield .prefix { color: var(--text-muted); font-size: 14px; }
.roi-field .ifield input { background: transparent; border: 0; outline: 0; color: var(--text); font-size: 18px; font-weight: 600; font-family: 'JetBrains Mono', monospace; width: 100%; }
.roi-output { background: var(--panel-3); border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
.roi-output .rol { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 700; margin-bottom: 12px; }
.roi-output .ro-big { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 6px; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.roi-output .ro-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }
.roi-breakdown { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--border); }
.roi-breakdown .rb { display: flex; justify-content: space-between; font-size: 12.5px; }
.roi-breakdown .rb .l { color: var(--text-muted); }
.roi-breakdown .rb .v { font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.roi-breakdown .rb.total { padding-top: 10px; border-top: 1px dashed var(--border); font-size: 14px; font-weight: 700; }
.roi-breakdown .rb.total .v { color: var(--success); }

/* Logos strip */
.trust-strip { text-align: center; padding: 24px 0 36px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 48px; }
.trust-strip .tlabel { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 700; margin-bottom: 18px; }
.trust-strip .tlogos { display: flex; gap: 32px; justify-content: center; align-items: center; flex-wrap: wrap; opacity: 0.7; }
.trust-strip .tlogos .tlogo { font-size: 18px; font-weight: 800; color: var(--text-muted); letter-spacing: -0.02em; }

/* FAQ */
.faq-section { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
.faq-section h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 10px; }
.faq-section .faq-intro p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.faq-item h4 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.faq-item p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.6; }

@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .choice-grid { grid-template-columns: repeat(2, 1fr); }
  .revshare, .roi-calc, .faq-section { grid-template-columns: 1fr; }
  .tier-card.featured { transform: none; }
  .first-kpi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
  .pricing-hero h2 { font-size: 32px; }
  .first-kpi { grid-template-columns: 1fr; }
  .onboarding { padding: 24px; }
  .pricing { padding: 24px; }
}

/* ============================================================
   Auth · Sign In & Get Started
   ============================================================ */
.auth-shell { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; min-height: 640px; }

.auth-left {
  padding: 56px 48px 48px;
  background:
    radial-gradient(600px 400px at 80% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(500px 400px at 10% 90%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 60%),
    var(--panel);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-left .ab-mark { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.auth-left .ab-mark .m { width: 32px; height: 32px; border-radius: 9px; background: var(--grad); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }
.quote-mark { font-size: 64px; color: var(--accent); opacity: 0.5; line-height: 1; font-family: Georgia, serif; }
.auth-left blockquote { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; margin: 12px 0 28px; max-width: 480px; color: var(--text); }
.auth-left .author { display: flex; align-items: center; gap: 12px; }
.auth-left .author .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #b45309); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 15px; }
.auth-left .author .name { font-weight: 600; font-size: 14px; }
.auth-left .author .role { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.auth-left .trust { display: flex; gap: 16px; font-size: 11px; color: var(--text-faint); margin-top: 40px; flex-wrap: wrap; }
.auth-left .trust .ti { display: inline-flex; align-items: center; gap: 6px; }
.auth-left .trust .ti .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

.auth-right { padding: 52px 64px; display: flex; flex-direction: column; justify-content: center; background: var(--panel); }
.auth-right h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 6px; }
.auth-right .auth-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 28px; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.field-row { display: flex; flex-direction: column; gap: 6px; }
.field-row label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 700; }
.field-row input {
  padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border-2);
  border-radius: 10px; color: var(--text); font-size: 14px; font-family: inherit; outline: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field-row input::placeholder { color: var(--text-faint); }
.field-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.field-row .input-wrap { position: relative; }
.field-row .input-wrap input { width: 100%; padding-right: 64px; }
.field-row .input-wrap .toggle-pw { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); cursor: pointer; font-size: 11px; font-weight: 600; background: transparent; border: 0; padding: 4px 8px; border-radius: 4px; }
.row-between { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-top: 2px; }
.row-between label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); cursor: pointer; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.row-between a { color: var(--accent-text); text-decoration: none; font-weight: 600; }

.btn-auth { padding: 13px; background: var(--grad); color: #fff; border: 0; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 30%, transparent); margin-top: 6px; }
.btn-magic { padding: 11px; background: transparent; border: 1px solid var(--border-2); color: var(--text); border-radius: 10px; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.social-btn { padding: 11px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.social-btn:hover { background: var(--panel-3); }
.social-btn .slogo { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 10px; color: #fff; }
.slogo-google { background: #fff; color: #4285F4; border: 1px solid #e5e7eb; }
.slogo-apple { background: #000; color: #fff; }
.slogo-github { background: #181717; color: #fff; }
.slogo-shopify { background: #5A8E3B; color: #fff; }

.auth-footer { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 28px; }
.auth-footer a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.legal-note { font-size: 11px; color: var(--text-faint); text-align: center; margin-top: 18px; line-height: 1.5; }
.legal-note a { color: var(--text-muted); text-decoration: underline; }

/* Get Started · path picker */
.gs-page { padding: 56px 32px 48px; background: var(--panel); }
.gs-hero { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.gs-hero .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-border);
  font-size: 11px; color: var(--accent-text); font-weight: 600; letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.gs-hero h2 { font-size: 42px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 10px; }
.gs-hero p { font-size: 16px; color: var(--text-muted); margin: 0; }

.gs-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; margin: 0 auto; }
.gs-path { background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px; padding: 32px; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; position: relative; display: flex; flex-direction: column; }
.gs-path:hover { transform: translateY(-4px); border-color: var(--border-2); }
.gs-path.featured { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.gs-path.featured::before { content: 'PRIMARY VALUE'; position: absolute; top: -10px; left: 32px; font-size: 10px; letter-spacing: 0.08em; font-weight: 700; padding: 4px 12px; background: var(--grad); color: #fff; border-radius: 6px; }
.gs-path .gp-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px; }
.gs-path.buyer .gp-icon { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.25); }
.gs-path h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.gs-path .gp-sub { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0 0 22px; }
.gs-path ul { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.gs-path ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text); line-height: 1.5; }
.gs-path ul li::before { content: '✓'; color: var(--success); font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.gs-path .gp-cta { padding: 13px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; border: 0; margin-top: auto; }
.gs-path .gp-cta.primary { background: var(--grad); color: #fff; box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 28%, transparent); }
.gs-path .gp-cta.secondary { background: var(--panel-3); border: 1px solid var(--border-2); color: var(--text); }
.gs-path .gp-meta { display: flex; gap: 14px; font-size: 11px; color: var(--text-faint); margin-top: 14px; }
.gs-path .gp-meta .gm { display: inline-flex; align-items: center; gap: 5px; }

.gs-alt { text-align: center; margin-top: 36px; font-size: 13px; color: var(--text-muted); }
.gs-alt a { color: var(--accent-text); text-decoration: none; font-weight: 600; }

@media (max-width: 1100px) {
  .auth-shell { grid-template-columns: 1fr; min-height: 0; }
  .auth-left { padding: 32px 28px; border-right: 0; border-bottom: 1px solid var(--border); }
  .auth-left blockquote { font-size: 20px; }
  .auth-right { padding: 32px 28px; }
  .gs-paths { grid-template-columns: 1fr; }
  .gs-hero h2 { font-size: 32px; }
  .gs-page { padding: 32px 20px; }
}

/* ============================================================
   Post sign-in Dashboard
   ============================================================ */
.dashboard { padding: 28px 36px 48px; background: var(--panel); }

/* Welcome banner */
.welcome-banner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--panel-2)), var(--panel-2));
  border: 1px solid var(--accent-soft-border);
  border-radius: 16px;
  padding: 22px 26px;
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 24px;
  position: relative; overflow: hidden;
}
.welcome-banner::before {
  content: ''; position: absolute; top: -120px; right: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.welcome-banner .wb-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px; color: #fff; flex-shrink: 0;
  position: relative; z-index: 1;
}
.welcome-banner .wb-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.welcome-banner h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.welcome-banner .wb-sub { font-size: 14px; color: var(--text-muted); }
.welcome-banner .wb-sub strong { color: var(--text); }
.welcome-banner .wb-actions { display: flex; gap: 10px; flex-shrink: 0; position: relative; z-index: 1; }

/* Action item cards */
.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }
.action-card {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 10px; position: relative;
  cursor: pointer; transition: border-color 0.2s, transform 0.2s;
}
.action-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.action-card.warn { border-left: 3px solid var(--warn); }
.action-card.info { border-left: 3px solid var(--accent); }
.action-card.success { border-left: 3px solid var(--success); }
.action-card .ac-head { display: flex; align-items: center; gap: 10px; }
.action-card .ac-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.action-card.warn .ac-icon { background: rgba(245,158,11,0.15); color: var(--warn); border: 1px solid rgba(245,158,11,0.25); }
.action-card.info .ac-icon { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-soft-border); }
.action-card.success .ac-icon { background: rgba(16,185,129,0.15); color: var(--success); border: 1px solid rgba(16,185,129,0.2); }
.action-card .ac-tag {
  margin-left: auto; font-size: 9px; padding: 3px 7px;
  border-radius: 4px; font-weight: 700; letter-spacing: 0.05em;
}
.action-card.warn .ac-tag { background: rgba(245,158,11,0.15); color: var(--warn); }
.action-card.info .ac-tag { background: var(--accent-soft); color: var(--accent-text); }
.action-card.success .ac-tag { background: rgba(16,185,129,0.15); color: var(--success); }
.action-card h4 { font-size: 14px; font-weight: 600; margin: 0; line-height: 1.3; }
.action-card p { font-size: 12.5px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.action-card .ac-cta {
  background: transparent; border: 0; color: var(--accent-text);
  font-size: 12px; font-weight: 600; padding: 0; cursor: pointer;
  text-align: left; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
}

/* Dashboard body grid */
.dash-body { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }

.activity-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.activity-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.activity-head h3 { font-size: 14px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.activity-head h3 .ldot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: pulse 1.5s infinite; box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 20%, transparent); }
.activity-head .filter { font-size: 11px; color: var(--text-muted); display: flex; gap: 8px; }
.activity-head .filter span { padding: 4px 8px; border-radius: 5px; background: var(--panel-3); border: 1px solid var(--border); cursor: pointer; }
.activity-head .filter span.active { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-soft-border); }
.activity-body { max-height: 620px; overflow-y: auto; }
.event-row {
  display: flex; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); align-items: flex-start;
}
.event-row:last-child { border-bottom: 0; }
.event-row .pico { width: 28px; height: 28px; border-radius: 7px; font-size: 12px; flex-shrink: 0; }
.event-row .ev-icon-sys {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-3); color: var(--text-muted); font-size: 13px;
  border: 1px solid var(--border);
}
.event-row .ev-text { flex: 1; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.event-row .ev-text b { color: var(--text); font-weight: 600; }
.event-row .ev-text .you {
  background: var(--accent-soft); color: var(--accent-text);
  padding: 1px 5px; border-radius: 3px; font-weight: 600;
  border: 1px solid var(--accent-soft-border);
}
.event-row .ev-text .quote { color: var(--text); font-style: italic; }
.event-row .ev-tag {
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  font-weight: 700; letter-spacing: 0.05em; margin-right: 4px;
  display: inline-block;
}
.event-row .ev-tag.win { background: rgba(16,185,129,0.15); color: var(--success); }
.event-row .ev-tag.alert { background: rgba(239,68,68,0.15); color: var(--danger); }
.event-row .ev-tag.sys { background: var(--panel-3); color: var(--text-muted); border: 1px solid var(--border); }
.event-row .ev-time {
  font-size: 11px; color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace; flex-shrink: 0;
}

/* Side panel */
.side-stack { display: flex; flex-direction: column; gap: 16px; }
.side-block { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.side-block h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); font-weight: 700; margin: 0 0 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.side-block h4 a { color: var(--accent-text); text-decoration: none; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 11px; }
.quick-nav-grid { display: flex; flex-direction: column; gap: 8px; }
.quick-nav-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--panel-3); border: 1px solid var(--border);
  border-radius: 10px; text-decoration: none; color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.quick-nav-row:hover { border-color: var(--accent); transform: translateX(2px); }
.quick-nav-row .qn-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); flex-shrink: 0;
}
.quick-nav-row .qn-text { flex: 1; min-width: 0; }
.quick-nav-row .qn-title { font-size: 13px; font-weight: 600; }
.quick-nav-row .qn-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.quick-nav-row .qn-arrow { color: var(--text-faint); font-size: 16px; }

.team-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.team-row:last-of-type { border-bottom: 0; }
.team-row .av {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  position: relative; flex-shrink: 0;
}
.team-row .av::after {
  content: ''; position: absolute; right: -2px; bottom: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-faint); border: 2px solid var(--panel-2);
}
.team-row.online .av::after { background: var(--success); }
.team-row.away .av::after { background: var(--warn); }
.team-row .t-info { flex: 1; min-width: 0; }
.team-row .t-name { font-size: 13px; font-weight: 600; }
.team-row .t-role { font-size: 11px; color: var(--text-muted); }
.team-row .t-stat { font-size: 10px; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; }
.team-add {
  margin-top: 12px; padding: 9px;
  background: transparent; border: 1px dashed var(--border-2);
  border-radius: 8px; color: var(--text-muted);
  font-size: 12px; font-weight: 500;
  cursor: pointer; width: 100%; text-align: center;
}

.changelog-row { padding: 10px 0; border-top: 1px dashed var(--border); font-size: 12px; }
.changelog-row:first-of-type { border-top: 0; padding-top: 0; }
.changelog-row .cl-tag {
  display: inline-block; font-size: 9px; padding: 2px 6px;
  border-radius: 4px; font-weight: 700; letter-spacing: 0.04em;
  margin-right: 6px;
}
.changelog-row .cl-tag.new { background: var(--tag-bg); color: var(--tag-text); border: 1px solid var(--tag-border); }
.changelog-row .cl-tag.fix { background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-soft-border); }
.changelog-row .cl-title { color: var(--text); font-weight: 500; }
.changelog-row .cl-date { color: var(--text-faint); font-size: 10px; margin-top: 2px; }

/* Signed-in nav variant */
.user-nav-actions { display: flex; gap: 10px; align-items: center; }
.notif-btn {
  width: 36px; height: 36px; padding: 0;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer; position: relative;
}
.notif-btn .nbadge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
}
.user-chip .av {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.user-chip .uc-text { font-size: 12px; font-weight: 600; line-height: 1.2; }
.user-chip .uc-brand { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.user-chip .chevron { color: var(--text-faint); font-size: 10px; margin-left: 4px; }

@media (max-width: 1100px) {
  .action-grid { grid-template-columns: 1fr; }
  .dash-body { grid-template-columns: 1fr; }
  .welcome-banner { flex-direction: column; align-items: flex-start; }
  .welcome-banner .wb-actions { width: 100%; }
}
@media (max-width: 820px) {
  .dashboard { padding: 20px; }
}

/* ============================================================
   Settings · Account & workspace
   ============================================================ */
.settings-page { padding: 28px 36px 48px; background: var(--panel); }
.settings-layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: flex-start; }
.settings-sidebar { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px; position: sticky; top: 80px; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; }
.settings-nav .sn-section { padding: 14px 12px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 700; }
.settings-nav .sn-item { padding: 9px 12px; border-radius: 8px; color: var(--text-muted); font-size: 13px; cursor: pointer; text-decoration: none; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.settings-nav .sn-item:hover { background: var(--panel-3); color: var(--text); }
.settings-nav .sn-item.active { background: var(--accent-soft); color: var(--accent-text); }
.settings-nav .sn-item.danger { color: var(--danger); }
.settings-nav .sn-item .ico { font-size: 14px; }
.settings-main { display: flex; flex-direction: column; gap: 16px; }
.settings-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
.settings-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 12px; }
.settings-card-head h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.02em; }
.settings-card-head .sh-sub { font-size: 13px; color: var(--text-muted); }
.profile-row { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px dashed var(--border); }
.profile-row:last-child { border-bottom: 0; }
.profile-row .pr-label { width: 160px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); padding-top: 4px; }
.profile-row .pr-content { flex: 1; min-width: 0; }
.profile-row .pr-value { font-size: 14px; color: var(--text); }
.profile-row .pr-hint { font-size: 12px; color: var(--text-faint); margin-top: 4px; line-height: 1.5; }
.profile-row .pr-input { padding: 10px 12px; background: var(--panel-3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; width: 100%; max-width: 380px; outline: 0; font-family: inherit; }
.profile-row .pr-edit { font-size: 12px; color: var(--accent-text); cursor: pointer; font-weight: 600; padding-top: 4px; }

.profile-avatar-row { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.profile-avatar-row .lg-av { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #b45309); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; }
.profile-avatar-row .av-actions { display: flex; gap: 8px; }
.profile-avatar-row .av-actions button { padding: 7px 12px; background: var(--panel-3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 12px; cursor: pointer; }
.profile-avatar-row .av-info { font-size: 12px; color: var(--text-faint); margin-top: 6px; }

.toggle-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--border); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row .tr-text { flex: 1; }
.toggle-row .tr-title { font-size: 13.5px; font-weight: 600; }
.toggle-row .tr-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.toggle-sw { width: 38px; height: 22px; background: var(--panel-3); border-radius: 999px; border: 1px solid var(--border); position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.2s; }
.toggle-sw::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); top: 2px; left: 2px; transition: transform 0.2s, background 0.2s; }
.toggle-sw.on { background: var(--accent); border-color: var(--accent); }
.toggle-sw.on::after { transform: translateX(16px); background: #fff; }

.api-key-row { background: var(--panel-3); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.api-key-row .key-val { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-key-row .key-action { padding: 4px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); font-size: 10px; font-weight: 700; cursor: pointer; letter-spacing: 0.05em; font-family: 'Inter', sans-serif; }
.api-key-row .key-action.rev { color: var(--danger); border-color: rgba(239,68,68,0.3); }

.integration-list { display: flex; flex-direction: column; gap: 8px; }
.integration-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--panel-3); border: 1px solid var(--border); border-radius: 10px; }
.integration-row .ilogo { width: 32px; height: 32px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 12px; }
.integration-row .iinfo { flex: 1; min-width: 0; }
.integration-row .iname { font-size: 13.5px; font-weight: 600; }
.integration-row .imeta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.integration-row .istat { font-size: 11px; color: var(--success); display: inline-flex; align-items: center; gap: 5px; }
.integration-row .istat.warn { color: var(--warn); }
.integration-row .istat .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.integration-row .ibtn { padding: 7px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: 11px; font-weight: 600; cursor: pointer; }

.session-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--border); }
.session-row:last-child { border-bottom: 0; }
.session-row .se-icon { width: 36px; height: 36px; background: var(--panel-3); border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.session-row .se-info { flex: 1; min-width: 0; }
.session-row .se-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.session-row .se-name .now { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(16,185,129,0.15); color: var(--success); font-weight: 700; letter-spacing: 0.04em; }
.session-row .se-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }
.session-row .se-action { font-size: 12px; color: var(--danger); cursor: pointer; font-weight: 600; }

.danger-card { background: color-mix(in srgb, var(--danger) 5%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); border-radius: 14px; padding: 20px 24px; }
.danger-card h3 { color: var(--danger); font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.danger-card .ds-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.danger-card .dz-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px dashed color-mix(in srgb, var(--danger) 20%, var(--border)); }
.danger-card .dz-row:first-of-type { border-top: 0; padding-top: 6px; }
.danger-card .dz-text { flex: 1; font-size: 13px; }
.danger-card .dz-text b { color: var(--text); }
.danger-card .dz-text .ds { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.danger-card .btn-danger { padding: 8px 14px; background: transparent; border: 1px solid var(--danger); color: var(--danger); border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; }

/* ============================================================
   Billing detail
   ============================================================ */
.billing-page { padding: 28px 36px 48px; background: var(--panel); }
.plan-overview { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 24px; }
.current-plan {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panel-2)), var(--panel-2));
  border: 1px solid var(--accent-soft-border);
  border-radius: 16px; padding: 26px; position: relative; overflow: hidden;
}
.current-plan::before { content: ''; position: absolute; top: -120px; right: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 70%); pointer-events: none; }
.current-plan > * { position: relative; z-index: 1; }
.current-plan .cp-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-text); font-weight: 700; margin-bottom: 8px; }
.current-plan h3 { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 4px; }
.current-plan .cp-price { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }
.current-plan .cp-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.current-plan .cp-meta .cpm-l { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 4px; }
.current-plan .cp-meta .cpm-v { font-size: 14px; font-weight: 600; color: var(--text); }
.current-plan .cp-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.payment-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.payment-card h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 700; margin: 0 0 14px; }
.card-pic { padding: 18px; background: linear-gradient(135deg, #1e293b, #0f172a); border-radius: 12px; color: #fff; margin-bottom: 14px; box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4); }
.card-pic .cb { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.card-pic .cb .ctype { font-size: 11px; color: #94a3b8; font-weight: 600; }
.card-pic .cb .clogo { font-size: 18px; font-weight: 800; letter-spacing: -0.04em; color: #fff; font-style: italic; }
.card-pic .cnum { font-family: 'JetBrains Mono', monospace; font-size: 14px; letter-spacing: 0.15em; margin-bottom: 8px; color: #fff; }
.card-pic .cmeta { display: flex; justify-content: space-between; font-size: 11px; color: #94a3b8; }
.payment-card .pmore { font-size: 12px; color: var(--accent-text); font-weight: 600; cursor: pointer; }

.usage-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 22px; margin-bottom: 24px; }
.usage-card h4 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.usage-card .uh-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 18px; }
.usage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.usage-row .ur-top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.usage-row .ur-top .ul { color: var(--text-muted); font-weight: 500; }
.usage-row .ur-top .uv { font-weight: 600; color: var(--text); font-family: 'JetBrains Mono', monospace; }
.usage-row .ubar { height: 6px; background: var(--panel-3); border-radius: 99px; overflow: hidden; }
.usage-row .ufill { height: 100%; background: var(--grad); border-radius: 99px; }
.usage-row .ufill.warn { background: var(--warn); }
.usage-row .ufill.danger { background: var(--danger); }
.usage-row .ur-bottom { font-size: 11px; color: var(--text-faint); margin-top: 4px; }

.invoice-table { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.invoice-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.invoice-table th, .invoice-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--border); }
.invoice-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 700; }
.invoice-table tbody tr:last-child td { border-bottom: 0; }
.invoice-table tbody tr:hover { background: var(--panel-3); }
.invoice-table .inum { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-muted); }
.invoice-table .iamount { font-weight: 600; color: var(--text); font-family: 'JetBrains Mono', monospace; }
.invoice-table .istatus { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 5px; letter-spacing: 0.04em; }
.invoice-table .istatus.paid { background: rgba(16,185,129,0.15); color: var(--success); }
.invoice-table .istatus.refund { background: var(--accent-soft); color: var(--accent-text); }
.invoice-table .iaction { font-size: 12px; color: var(--accent-text); cursor: pointer; font-weight: 600; text-decoration: none; }

/* ============================================================
   Notifications page
   ============================================================ */
.notif-page { padding: 28px 36px 48px; background: var(--panel); }
.notif-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.notif-toolbar .filters { display: flex; gap: 6px; flex-wrap: wrap; }
.notif-toolbar .filters .f { padding: 7px 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.notif-toolbar .filters .f.active { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-soft-border); }
.notif-toolbar .filters .f .count { background: var(--panel-3); color: var(--text-faint); padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.notif-toolbar .filters .f.active .count { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent-text); }
.notif-toolbar .actions { display: flex; gap: 8px; }
.notif-list { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.notif-row { display: flex; gap: 14px; padding: 16px 20px 16px 28px; border-bottom: 1px solid var(--border); align-items: flex-start; position: relative; transition: background 0.15s; cursor: pointer; }
.notif-row:hover { background: var(--panel-3); }
.notif-row:last-child { border-bottom: 0; }
.notif-row.unread::before { content: ''; position: absolute; left: 10px; top: 24px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.notif-row .nr-icon { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--panel-3); border: 1px solid var(--border); color: var(--text-muted); }
.notif-row .pico { width: 36px; height: 36px; border-radius: 9px; font-size: 14px; flex-shrink: 0; }
.notif-row .nr-body { flex: 1; min-width: 0; }
.notif-row .nr-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.notif-row.unread .nr-title { color: var(--text); }
.notif-row .nr-text { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.notif-row .nr-text b { color: var(--text); font-weight: 600; }
.notif-row .nr-text .you { background: var(--accent-soft); color: var(--accent-text); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--accent-soft-border); font-weight: 600; }
.notif-row .nr-text .quote { color: var(--text); font-style: italic; }
.notif-row .nr-meta { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.notif-row .nr-action { padding: 5px 11px; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); border-radius: 6px; color: var(--accent-text); font-size: 11px; font-weight: 600; cursor: pointer; }
.notif-row .nr-action.secondary { background: var(--panel-3); border-color: var(--border); color: var(--text-muted); }
.notif-row .nr-time { font-size: 11px; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.notif-tag { font-size: 9px; padding: 2px 7px; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em; display: inline-block; }
.notif-tag.win { background: rgba(16,185,129,0.15); color: var(--success); border: 1px solid rgba(16,185,129,0.2); }
.notif-tag.alert { background: rgba(239,68,68,0.15); color: var(--danger); border: 1px solid rgba(239,68,68,0.2); }
.notif-tag.sys { background: var(--panel-3); color: var(--text-muted); border: 1px solid var(--border); }
.notif-tag.team { background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-soft-border); }
.notif-tag.competitor { background: rgba(245,158,11,0.15); color: var(--warn); border: 1px solid rgba(245,158,11,0.2); }

@media (max-width: 1100px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-sidebar { position: static; }
  .plan-overview { grid-template-columns: 1fr; }
  .usage-grid { grid-template-columns: 1fr; }
  .profile-row { flex-direction: column; gap: 6px; }
  .profile-row .pr-label { width: auto; }
  .current-plan .cp-meta { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .settings-page, .billing-page, .notif-page { padding: 20px; }
}