:root {
  color-scheme: light;
  --canvas: #f5f7f6;
  --surface: #fff;
  --surface-soft: #f0f5f2;
  --surface-mint: #e4f2ed;
  --ink: #191c1b;
  --ink-soft: #3f4947;
  --muted: #6b7673;
  --primary: #0f766e;
  --primary-deep: #0b4a44;
  --border: #dfe5e2;
  --border-strong: #bec9c6;
  --danger: #a83e39;
  --radius: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-width: 0; background: var(--canvas); }
body { min-width: 0; min-height: 100vh; margin: 0; background: var(--canvas); color: var(--ink); font-size: 14px; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(15,118,110,.23); outline-offset: 2px; }
.boot-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); }
.brand-mark { display: inline-grid; width: 38px; height: 38px; place-items: center; flex: none; color: #fff; background: var(--primary); border-radius: 12px; font-size: 12px; font-weight: 800; letter-spacing: -.05em; }
.brand-mark--large { width: 48px; height: 48px; border-radius: 15px; font-size: 14px; }
.app { width: min(1080px, 100%); min-height: 100vh; margin: 0 auto; padding: 28px clamp(16px, 4vw, 42px) 52px; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 54px; }
.brand-lockup { display: flex; align-items: center; gap: 11px; }
.brand-copy { display: flex; flex-direction: column; gap: 4px; }
.brand-title { color: var(--ink); font-size: 13px; font-weight: 750; letter-spacing: -.02em; }
.brand-subtitle { color: var(--muted); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow { margin: 0 0 10px; color: var(--primary); font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.auth-shell { display: grid; grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr); gap: clamp(28px, 7vw, 82px); align-items: center; max-width: 900px; margin: 25px auto 64px; }
.auth-copy { padding: 24px 0; }
.auth-copy h1 { max-width: 500px; margin: 0 0 16px; font-size: clamp(34px, 5vw, 52px); font-weight: 690; letter-spacing: -.06em; line-height: 1.04; }
.auth-copy > p:not(.eyebrow) { max-width: 440px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.trust-note { display: flex; align-items: flex-start; gap: 10px; max-width: 420px; margin-top: 34px; padding: 13px 15px; color: var(--ink-soft); background: #fff; border: 1px solid var(--border); border-radius: 10px; font-size: 11px; line-height: 1.6; }
.trust-mark { display: grid; width: 22px; height: 22px; place-items: center; flex: none; color: var(--primary); background: var(--surface-mint); border-radius: 50%; font-weight: 800; }
.auth-card { padding: clamp(22px, 4vw, 34px); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 14px 42px rgba(24,45,38,.055); }
.auth-card h2 { margin: 0 0 7px; font-size: 23px; letter-spacing: -.04em; }
.auth-card > p { margin: 0 0 23px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.form-stack { display: grid; gap: 15px; }
.field-wrap { display: grid; gap: 7px; }
.field-wrap label { color: var(--ink-soft); font-size: 11px; font-weight: 650; }
.field-wrap input { width: 100%; min-width: 0; height: 44px; padding: 0 12px; color: var(--ink); background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; }
.field-wrap input::placeholder { color: #9ba5a1; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; color: var(--ink-soft); background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 12px; font-weight: 650; cursor: pointer; transition: .16s ease; }
.button:hover { border-color: #8fa69f; background: #f6f9f7; }
.button:disabled { opacity: .6; cursor: wait; }
.button-primary { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 3px 7px rgba(15,118,110,.12); }
.button-primary:hover { color: #fff; background: #0c665f; border-color: #0c665f; }
.button-quiet { border-color: transparent; background: transparent; }
.button-quiet:hover { color: var(--primary-deep); background: var(--surface-soft); }
.form-switch { margin: 15px 0 0; padding: 0; color: var(--primary-deep); background: none; border: 0; font-size: 11px; font-weight: 650; text-align: left; cursor: pointer; }
.form-switch:hover { text-decoration: underline; }
.form-error, .form-success { margin: 0; padding: 10px 12px; border: 1px solid; border-radius: 8px; font-size: 11px; line-height: 1.5; }
.form-error { color: var(--danger); background: #fff4f2; border-color: #f1d1cc; }
.form-success { color: var(--primary-deep); background: var(--surface-mint); border-color: #cee3dc; }
.verification-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 16px; padding: 12px 14px; color: var(--primary-deep); background: var(--surface-mint); border: 1px solid #cee3dc; border-radius: 9px; font-size: 11px; line-height: 1.55; }
.verification-notice.is-error { color: var(--danger); background: #fff4f2; border-color: #f1d1cc; }
.text-button { padding: 0; color: inherit; background: none; border: 0; font: inherit; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.text-button:disabled { opacity: .65; cursor: wait; }
.auth-footer { margin-top: 22px; color: #89938f; font-size: 10px; line-height: 1.6; }
.auth-footer a, .dashboard-footer a { color: var(--primary-deep); text-decoration: underline; text-underline-offset: 2px; }
.dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.dashboard-heading h1 { margin: 0 0 7px; font-size: clamp(27px, 4vw, 36px); letter-spacing: -.055em; }
.dashboard-heading p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 12px; }
.verified-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: var(--primary-deep); background: var(--surface-mint); border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.unverified-badge { color: #885817; background: #fbf1df; }
.referral-hero { position: relative; overflow: hidden; margin-bottom: 18px; padding: clamp(20px, 4vw, 30px); color: #fff; background: linear-gradient(112deg, #0b4a44, #0f766e 68%, #388d7f); border-radius: 15px; box-shadow: 0 13px 28px rgba(11,74,68,.15); }
.referral-hero::after { position: absolute; right: -56px; top: -82px; width: 230px; height: 230px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 26px rgba(255,255,255,.04), 0 0 0 54px rgba(255,255,255,.035); content: ""; pointer-events: none; }
.referral-hero > * { position: relative; z-index: 1; }
.referral-hero .eyebrow { color: #bce1d7; }
.referral-hero h2 { margin: 0 0 7px; font-size: 21px; letter-spacing: -.035em; }
.referral-hero p { max-width: 600px; margin: 0; color: rgba(255,255,255,.78); font-size: 11px; line-height: 1.65; }
.link-control { display: flex; gap: 8px; max-width: 700px; margin-top: 20px; }
.link-control input { min-width: 0; flex: 1; height: 42px; padding: 0 12px; color: #14332e; background: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 8px; font-size: 11px; }
.link-control .button { flex: none; color: var(--primary-deep); border-color: #d1e5de; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 0 0 20px; }
.stat-card { min-width: 0; padding: 18px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 3px 12px rgba(23,42,36,.035); }
.stat-label { color: var(--muted); font-size: 10px; }
.stat-value { margin: 10px 0 5px; color: #20312d; font-size: 29px; font-weight: 680; letter-spacing: -.055em; line-height: 1; }
.stat-foot { color: #87918e; font-size: 10px; line-height: 1.5; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 15px; align-items: start; }
.panel { min-width: 0; padding: 19px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 3px 12px rgba(23,42,36,.035); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.panel-heading h2 { margin: 0 0 5px; font-size: 14px; letter-spacing: -.02em; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.channel-list { display: grid; gap: 12px; }
.channel-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; align-items: center; color: var(--ink-soft); font-size: 11px; }
.channel-row strong { color: var(--ink); font-size: 11px; }
.channel-track { grid-column: 1 / -1; height: 5px; overflow: hidden; background: #eef2f0; border-radius: 99px; }
.channel-track span { display: block; height: 100%; min-width: 4px; background: var(--primary); border-radius: inherit; }
.referral-list { display: grid; }
.referral-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #edf1ef; }
.referral-row:first-child { padding-top: 2px; border-top: 0; }
.referral-name { display: block; margin-bottom: 3px; color: var(--ink); font-size: 11px; font-weight: 680; overflow-wrap: anywhere; }
.referral-contact, .referral-meta { display: block; color: var(--muted); font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.referral-stage { padding: 5px 8px; color: var(--primary-deep); background: var(--surface-mint); border-radius: 99px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.empty-state { padding: 20px 10px; color: var(--muted); background: #fafcfb; border: 1px dashed var(--border-strong); border-radius: 9px; font-size: 11px; line-height: 1.65; text-align: center; }
.privacy-note { margin-top: 16px; padding: 12px 14px; color: var(--ink-soft); background: var(--surface-soft); border-radius: 9px; font-size: 10px; line-height: 1.65; }
.privacy-note strong { color: var(--primary-deep); }
.dashboard-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; color: #89938f; font-size: 10px; }

@media (max-width: 760px) {
  .app-header { margin-bottom: 34px; }
  .auth-shell { grid-template-columns: 1fr; max-width: 540px; gap: 23px; margin-top: 0; }
  .auth-copy { padding: 0; }
  .auth-copy h1 { max-width: 480px; font-size: clamp(33px, 8vw, 43px); }
  .auth-copy > p:not(.eyebrow) { font-size: 13px; }
  .trust-note { margin-top: 20px; }
  .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .app { padding: 17px 15px 32px; }
  .app-header { margin-bottom: 28px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .brand-title { font-size: 12px; }
  .brand-subtitle { font-size: 8px; }
  .auth-shell { gap: 18px; }
  .auth-copy h1 { margin-bottom: 10px; font-size: 32px; }
  .auth-copy > p:not(.eyebrow) { font-size: 12px; }
  .trust-note { margin-top: 15px; padding: 10px 12px; }
  .auth-card { padding: 20px 17px; }
  .auth-card h2 { font-size: 21px; }
  .dashboard-heading { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 18px; }
  .dashboard-heading h1 { font-size: 28px; }
  .referral-hero { padding: 20px 17px; }
  .referral-hero h2 { font-size: 19px; }
  .link-control { flex-direction: column; }
  .link-control .button { width: 100%; }
  .link-control input { width: 100%; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 25px; }
  .stat-card:last-child { grid-column: 1 / -1; }
  .panel { padding: 15px; }
  .dashboard-footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }