:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #f3fff7;
  --muted: #a9c8b6;
  --subtle: #789b87;
  --navy: #07140f;
  --panel: #0d2118;
  --panel-2: #123124;
  --line: #244436;
  --mint: #63e68f;
  --mint-strong: #9af4b8;
  --gold: #ffd166;
  --red: #ff7b7b;
  --blue: #79b7e8;
  --radius: 20px;
}

body {
  background: radial-gradient(circle at top right, #11382a 0, #07140f 38%), var(--navy);
  color: var(--ink);
}

body::after { display: none; }

.sidebar {
  background: rgba(7, 20, 15, .96);
  border-color: var(--line);
  backdrop-filter: blur(16px);
}

.brand { gap: 10px; }
.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: url('/assets/fitcents-logo.png') center / cover no-repeat;
  box-shadow: none;
  font-size: 0;
  color: transparent;
}
.brand-name { font-size: 1.2rem; font-weight: 800; letter-spacing: -.045em; }
.brand-fit { color: var(--ink); font-weight: 800; }
.brand-cents { color: var(--mint); font-weight: 500; }
.brand-caption { color: var(--mint); font-family: inherit; font-weight: 800; letter-spacing: .08em; }
.nav-label, .eyebrow, .field label, .field legend, th, .account-role { font-family: inherit; font-weight: 800; }

.nav-link { border-radius: 12px; font-weight: 700; }
.nav-link:hover { background: #153827; color: #fff; }
.nav-link.active { background: #153827; color: #fff; border-color: #3a7352; }
.mobile-bar { background: rgba(7, 20, 15, .96); border-color: var(--line); }
.mobile-bar a.active { color: #062313; background: var(--mint); border-radius: 12px; }

.page-title, .onboard-heading, .onboard-side h1, .auth-intro h1 { letter-spacing: -.055em; }
.page-title, .card h2, .card h3, .tier-name, .faq button, .onboard-heading, .onboard-side h1 { color: var(--ink); }
.card, .clerk-card {
  background: linear-gradient(180deg, rgba(18, 49, 36, .88), rgba(10, 31, 22, .94));
  border-color: var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}
.stat-value, .price-row strong { font-family: inherit; font-weight: 900; }
.stat::after { border-color: rgba(99, 230, 143, .16); }
.icon-box, .nav-link.active, .onboard-step.active { background: #153827; color: var(--mint); }

.btn { border-radius: 999px; min-height: 46px; padding: 11px 18px; font-size: 13px; font-weight: 800; }
.btn-primary, .clerk-primary { background: linear-gradient(135deg, #2bcf68, #63e68f); color: #03200d; }
.btn-primary:hover:not(:disabled), .clerk-primary:hover { background: linear-gradient(135deg, #45db79, #86efaa); }
.btn-secondary { background: #10251b; border-color: var(--line); }
.btn-secondary:hover:not(:disabled) { background: #153827; border-color: #41765a; }

.pill-live, .notice.success { background: #0d321e; border-color: #2f6c45; }
.pill-review, .notice { background: #29250d; border-color: #67581c; }
.tier, .chip, .offer-preview, input, select, textarea { background: #071811; border-color: var(--line); }
input:focus, select:focus, textarea:focus { background: #091f16; border-color: var(--mint); }
.tier:nth-child(1) .tier-num, .tier-num, .meter > span, .progress span {
  background: linear-gradient(90deg, #2bcf68, #63e68f);
  color: #062313;
}
.tier:nth-child(3) .tier-num { background: #63e68f; }

.onboard-side { background: linear-gradient(180deg, #0d2118, #07140f); border-color: var(--line); }
.onboard-main { background: radial-gradient(circle at top right, rgba(99, 230, 143, .08), transparent 35rem); }
.onboard-step { border: 1px solid transparent; }
.onboard-step.active { border-color: #3a7352; }
.auth-page::before { border-color: rgba(99, 230, 143, .14); }
.auth-card { width: min(100%, 480px); }
.clerk-link, .auth-back { color: var(--mint); }
.upload-zone { background: #0d2b1b; border-color: #39734f; }
.empty { border-color: #37604a; }
.avatar { background: var(--mint); color: #062313; }

@font-face { font-family: Inter; src: url('/assets/fonts/inter-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url('/assets/fonts/inter-medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url('/assets/fonts/inter-semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url('/assets/fonts/inter-bold.ttf') format('truetype'); font-weight: 700 900; font-display: swap; }

html[data-theme="light"] {
  color-scheme: light;
  --ink: #102019;
  --muted: #5f7468;
  --subtle: #6f8277;
  --navy: #f4f8f5;
  --panel: #ffffff;
  --panel-2: #eaf3ed;
  --line: #ceddd4;
  --mint: #168653;
  --mint-strong: #0e6840;
  --gold: #b57908;
  --red: #c33e3e;
  --blue: #187ca4;
}
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] body { background: radial-gradient(circle at top right, #e2eee6 0, #f4f8f5 42%), var(--navy); }
html[data-theme="light"] .sidebar, html[data-theme="light"] .mobile-bar { background: rgba(244, 248, 245, .96); }
html[data-theme="light"] .card, html[data-theme="light"] .clerk-card { background: linear-gradient(180deg, #fff, #f8fbf9); box-shadow: 0 12px 30px rgba(16, 32, 25, .1); }
html[data-theme="light"] .nav-link:hover, html[data-theme="light"] .nav-link.active { background: var(--panel-2); color: var(--ink); border-color: #a9c3b4; }
html[data-theme="light"] .tier, html[data-theme="light"] .chip, html[data-theme="light"] .offer-preview, html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: #fff; color: var(--ink); }
html[data-theme="light"] input:focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus { background: #fff; }
html[data-theme="light"] .btn-secondary { background: var(--panel-2); color: var(--ink); }
html[data-theme="light"] .pill-live, html[data-theme="light"] .notice.success { background: #e4f7ea; border-color: #8dcaa3; color: #0e5a37; }
html[data-theme="light"] .pill-review, html[data-theme="light"] .notice { background: #fff8dc; border-color: #dfc25c; color: #5e4800; }
html[data-theme="light"] .onboard-side { background: linear-gradient(180deg, #fff, #eef5f0); }
html[data-theme="light"] .onboard-main { background: radial-gradient(circle at top right, rgba(22, 134, 83, .08), transparent 35rem); }
.card, .clerk-card { border-radius: 24px; }
input, select, textarea { border-radius: 16px; }