/* SunCharts flagship theme for every public server-rendered page (sign-in, sign-up, reset, connect, invite, legal,
   privacy, account, OAuth results, magic-link landing, errors). One file so pages never drift.
   Link it LAST in <head> (after any page <style>) together with /assets/suncharts-bg.js (ECG background). */
:root, :root[data-theme="light"], :root[data-theme="dark"], :root:not([data-theme="light"]) {
  --fg: #eafaef; --dim: #7e9b86; --g1: #8df06a; --g2: #34c759; --g3: #159a3c; --glow: rgba(75,222,128,.45);
  --bg: #04060a; --card: rgba(10,22,14,.78); --card2: rgba(52,199,89,.06); --line: rgba(75,222,128,.18);
  --text: var(--fg); --text2: #b5cdbb; --text3: var(--dim);
  --ink900: var(--fg); --ink800: #cfe9d6; --ink700: #b5cdbb; --ink600: #9cb8a4; --ink500: var(--dim); --ink400: #5f7a67; --ink300: #b5cdbb;
  --ink200: rgba(75,222,128,.18); --ink100: rgba(52,199,89,.08); --ink50: #070b09; --navy: #04060a;
  --accent: var(--g1); --accent-weak: rgba(52,199,89,.14); --primary: var(--g2); --primary-text: #04130a;
  --info: var(--g1); --info-bg: rgba(52,199,89,.12); --normal: var(--g2); --normal-bg: rgba(52,199,89,.12);
  --caution: #f5a524; --caution-bg: rgba(245,165,36,.12); --crit: #ff6b6b; --crit-bg: rgba(255,107,107,.12);
  --radius: 14px; --radius-sm: 10px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
html { background: radial-gradient(1200px 700px at 85% -10%, rgba(52,199,89,.10), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(21,154,60,.10), transparent 60%), #04060a fixed; min-height: 100%; overflow-x: hidden; }
html, body, button, input, select, textarea { font-family: var(--font) !important; }
html { font-size: 15px; color: var(--fg); -webkit-font-smoothing: antialiased; scrollbar-color: rgba(75,222,128,.25) #04060a; }
body { margin: 0; color: var(--fg) !important; background: transparent !important; min-height: 100vh; line-height: 1.5; }
#sc-bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
body > *:not(#sc-bg):not(script) { position: relative; z-index: 1; }

h1, h2, h3 { color: var(--fg) !important; letter-spacing: -.015em; }
h1 { font-size: 1.6rem; font-weight: 750; margin: 0 0 .4rem; }
h2 { font-size: 1.1rem; font-weight: 650; }
p, li, dd { color: var(--text2); }
a { color: var(--g1) !important; text-decoration: none; } a:hover { text-decoration: underline; }
.muted, .note, dt { color: var(--dim) !important; }
code, .qr { background: rgba(52,199,89,.10) !important; color: #cfe9d6 !important; border-radius: 6px; padding: .1rem .35rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
pre { background: #020403 !important; color: #cfe9d6 !important; border: 1px solid var(--line); border-radius: 10px; padding: .8rem; white-space: pre-wrap; }
hr { border: 0; border-top: 1px solid var(--line); }

/* cards */
.card, .box, main.card, .panel { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 18px !important;
  box-shadow: 0 0 0 1px rgba(75,222,128,.06), 0 30px 80px -30px var(--glow) !important; backdrop-filter: blur(8px); color: var(--fg); }

/* forms */
label { display: block; color: var(--text2) !important; font-size: .85rem; font-weight: 600; margin: .85rem 0 .35rem; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  display: block; width: 100%; box-sizing: border-box; font-size: 1rem !important; color: var(--fg) !important;
  background: rgba(2,6,4,.72) !important; border: 1px solid rgba(75,222,128,.22) !important; border-radius: 12px !important;
  padding: .75rem .9rem !important; outline: none; transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: #557061; }
input:focus, select:focus, textarea:focus { border-color: var(--g2) !important; box-shadow: 0 0 0 3px rgba(52,199,89,.20) !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--g2); width: 1rem; height: 1rem; }
button, .btn, input[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; box-sizing: border-box;
  font-size: 1rem !important; font-weight: 700 !important; color: #04130a !important; cursor: pointer;
  background: linear-gradient(135deg, var(--g1), var(--g2)) !important; border: 0 !important; border-radius: 999px !important;
  padding: .8rem 1.25rem !important; text-decoration: none !important; box-shadow: 0 10px 30px -12px rgba(52,199,89,.7);
  transition: transform .12s, box-shadow .15s, filter .15s; }
button:hover, .btn:hover { filter: brightness(1.06); box-shadow: 0 0 0 1px rgba(141,240,106,.45), 0 12px 30px -10px var(--glow); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; box-shadow: none; }
button.secondary, .btn.secondary, button.ghost, .btn.ghost { background: transparent !important; color: var(--fg) !important; border: 1px solid var(--line) !important; box-shadow: none; }
button.danger, .btn.danger { background: transparent !important; color: var(--crit) !important; border: 1px solid rgba(255,107,107,.35) !important; box-shadow: none; }
.msg, .err { border-radius: 12px !important; padding: .7rem .9rem !important; border: 1px solid var(--line); font-size: .92rem; }
.msg.err, .err { background: var(--crit-bg) !important; color: #ffb3b3 !important; border-color: rgba(255,107,107,.3) !important; }
.msg.ok { background: var(--normal-bg) !important; color: #bff5cc !important; }
.badge { border-radius: 999px; }
.b-linked, .b-connected, .b-ok { background: var(--normal-bg) !important; color: var(--g1) !important; }
.b-unlinked, .b-pending { background: var(--caution-bg) !important; color: var(--caution) !important; }
.b-error, .b-reauthorization_required { background: var(--crit-bg) !important; color: var(--crit) !important; }
table { width: 100%; border-collapse: collapse; } th { color: var(--dim); text-align: left; } td, th { border-bottom: 1px solid var(--line); padding: .5rem .6rem; }
.pending { border: 1px dashed rgba(245,165,36,.6) !important; background: var(--caution-bg) !important; color: #ffd28a !important; border-radius: 12px; padding: .75rem 1rem; }
.hidden { display: none !important; }

/* brand */
.sc-logo { display: block; height: 40px; width: auto; }
.sc-powered { display: inline-flex; align-items: center; gap: .55rem; color: var(--dim) !important; font-size: .78rem; letter-spacing: .02em; text-decoration: none !important; }
.sc-powered img { height: 20px; width: auto; opacity: .9; }
.sc-powered:hover { color: var(--fg) !important; }

/* split auth layout (signin / signup / reset / connect) */
body.sc-split { display: grid; grid-template-columns: minmax(18rem, 30rem) 1fr; }
.hero { background: linear-gradient(180deg, rgba(4,10,6,.55), rgba(4,8,6,.25)) !important; border-right: 1px solid var(--line); color: var(--fg) !important;
  padding: 2.5rem 2.25rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; backdrop-filter: blur(4px); }
.hero .logo { display: flex; align-items: center; }
.hero .logo i, .hero .logo span[data-brand] { display: none; }
.hero h2 { font-size: 2rem !important; line-height: 1.15; margin: 0 0 .8rem; font-weight: 750; }
.hero h2 em, .hero h2 b { font-style: normal; background: linear-gradient(135deg, var(--g1), var(--g2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p, .hero li { color: var(--text2) !important; font-size: 1rem; }
.hero .foot { display: flex; flex-direction: column; gap: .8rem; font-size: .82rem; }
.hero .foot a { color: var(--dim) !important; }
.pane { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.pane .box { width: 100%; max-width: 27rem; padding: 2rem 2rem 1.6rem; box-sizing: border-box; }
.box form > * + * { margin-top: .15rem; }
.box button[type=submit], .box .btn.full { width: 100%; margin-top: 1.2rem; }
.links { margin-top: 1.2rem; font-size: .9rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.check-line { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; color: var(--text2) !important; }
.steps-mini { display: flex; gap: .35rem; margin: 0 0 1.1rem; }
.steps-mini span { flex: 1; height: 4px; border-radius: 4px; background: rgba(75,222,128,.15); }
.steps-mini span.on { background: linear-gradient(90deg, var(--g1), var(--g2)); }
.codes { columns: 2; font-family: ui-monospace, monospace; }
@media (max-width: 760px) { body.sc-split { grid-template-columns: 1fr; } .hero { padding: 1.25rem 1.4rem; border-right: 0; border-bottom: 1px solid var(--line); } .hero .pitch, .hero .foot { display: none; } }

/* single-column pages (invite, legal, privacy, account, OAuth results, magic landing, errors) */
body.sc-page { display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1rem 1.5rem; box-sizing: border-box; }
.sc-top { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; position: static !important; width: 100%; max-width: 46rem; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.sc-main { width: 100%; max-width: 46rem; padding: 1.8rem 2rem; box-sizing: border-box; }
.sc-main.narrow { max-width: 28rem; }
.sc-foot { margin-top: auto; padding-top: 2rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* account (clinician link page): keep its centered single column */
body.sc-account { max-width: 40rem; margin: 0 auto !important; padding: 2.5rem 1rem !important; }