:root[data-theme="dark"] {
  --bg: #0A0D13;
  --surface: #12161F;
  --surface-2: #171C28;
  --surface-3: #1D2331;
  --border: #232A38;
  --border-strong: #2E3648;
  --text: #E7EAF1;
  --text-muted: #8B93A8;
  --text-faint: #5C6479;
  --accent: #2FD3D9;
  --accent-ink: #04211F;
  --accent-2: #6E6BF4;
  --success: #34D399;
  --success-bg: rgba(52, 211, 153, .12);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);
}

:root[data-theme="light"] {
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --surface-3: #EEF0F4;
  --border: #E3E6EC;
  --border-strong: #D2D6E0;
  --text: #12151C;
  --text-muted: #5B6272;
  --text-faint: #9AA1B1;
  --accent: #0C9CA3;
  --accent-ink: #EAFBFB;
  --accent-2: #4F4CD6;
  --success: #0E9F6E;
  --success-bg: #E6F8F1;
  --shadow: 0 1px 2px rgba(20, 25, 40, .04), 0 8px 24px rgba(20, 25, 40, .06);
}

* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--text); }
body { font-family: 'Inter', system-ui, sans-serif; font-size: 14.5px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: 0; color: var(--text); }
a { color: inherit; text-decoration: none; }
.mono { font-family: 'JetBrains Mono', monospace; }
.text-muted2 { color: var(--text-muted) !important; }
.text-faint { color: var(--text-faint) !important; }
.bg-surface2 { background: var(--surface-2); }
.border-c { border-color: var(--border) !important; }
.card-c { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.shadow-c { box-shadow: var(--shadow); }

.btn { border-radius: 8px; font-weight: 600; font-size: 13.5px; padding: .5rem 1rem; letter-spacing: 0; }
.btn-accent { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); }
.btn-accent:hover { filter: brightness(1.08); color: var(--accent-ink); }
.btn-outline-c { background: transparent; border: 1px solid var(--border-strong); color: var(--text); }
.btn-outline-c:hover { background: var(--surface-2); color: var(--text); }
.btn-ghost-c { background: transparent; border: 1px solid transparent; color: var(--text-muted); }
.btn-ghost-c:hover { background: var(--surface-2); color: var(--text); }

.public-nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--border); }
.public-links { font-size: 13.5px; font-weight: 500; }
.public-links a { color: var(--text-muted); }
.public-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: var(--text); line-height: 1; white-space: nowrap; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 34px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.brand-mark img { width: 150%; height: 150%; object-fit: contain; display: block; }
.icon-btn { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); border: 1px solid transparent; background: transparent; cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }

.hero-grid { background-image: radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0); background-size: 26px 26px; -webkit-mask-image: linear-gradient(to bottom, black, transparent 88%); mask-image: linear-gradient(to bottom, black, transparent 88%); }
.hero-title { font-size: clamp(34px, 5vw, 50px); max-width: 820px; margin: 0 auto; line-height: 1.1; }
.hero-copy, .section-copy { max-width: 620px; margin-inline: auto; font-size: 16px; }
.dashboard-preview { max-width: 940px; }
.window-dots span { width: 9px; height: 9px; border-radius: 99px; display: inline-block; margin-right: 3px; }
.window-dots span:nth-child(1) { background: #F76E6E; }
.window-dots span:nth-child(2) { background: #F5B94D; }
.window-dots span:nth-child(3) { background: #34D399; }
.preview-url { font-size: 11.5px; }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
.pill-dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.pill-neutral { background: var(--surface-3); color: var(--text-muted); }
.pill-success { background: var(--success-bg); color: var(--success); }
.feature-icon { width: 38px; height: 38px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 17px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; min-height: 108px; }
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.stat-value { font-size: 24px; font-weight: 700; letter-spacing: 0; margin-top: 4px; }
.stat-delta { font-size: 12px; font-weight: 600; }
.sync-live { font-size: 17px; }
.plan-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; min-height: 220px; }
.plan-card.featured { border-color: var(--accent); }
.plan-price { font-size: 24px; font-weight: 800; }
.footer-text { font-size: 12.5px; }

.auth-section .container { min-height: 82vh; }
.auth-card { width: min(100%, 380px); }
.auth-card-wide { width: min(100%, 440px); }
.auth-copy { font-size: 13px; }
.small-link { font-size: 12.5px; }
.accent-link { color: var(--accent); }
.form-control, .form-select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 13.5px; border-radius: 8px; }
.form-control:focus, .form-select:focus { background: var(--surface-2); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.form-control::placeholder { color: var(--text-faint); }
label.form-label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }

.text-muted,
.text-muted2,
.form-label,
.auth-copy,
.small-link {
  color: var(--text-muted) !important;
}

:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-muted2,
:root[data-theme="dark"] .form-label,
:root[data-theme="dark"] .auth-copy,
:root[data-theme="dark"] .small-link,
:root[data-theme="dark"] .text-faint {
  color: #B7BED0 !important;
}

.form-control,
.form-select {
  color: var(--text) !important;
}

.form-control::placeholder {
  color: color-mix(in srgb, var(--text-muted) 82%, var(--text)) !important;
  opacity: 1;
}

:root[data-theme="dark"] .form-control::placeholder {
  color: #AEB6C8 !important;
}