/* ==========================================================================
   Grow One Trade — Design System (gos.css)  v0.1  (Phase 2)
   Dependency-free CSS. Brand tokens derived from the logo and PDF.
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* brand */
  --navy-950: #061230;
  --navy-900: #0a1f4d;
  --navy-800: #0f2d6b;
  --navy-700: #163d8a;
  --navy-600: #2354b0;
  --green-700: #137a31;
  --green-600: #178a38;
  --green-500: #22a447;
  --green-400: #3fbf5f;
  --green-300: #7fdc6f;
  --lime: #a6ee6b;

  /* neutrals */
  --bg: #f4f7fc;
  --bg-soft: #eaf0f9;
  --surface: #ffffff;
  --line: #dde5f1;
  --line-strong: #c6d2e5;
  --text: #0e1a34;
  --text-2: #3b4a68;
  --muted: #6a7a96;

  /* status */
  --ok: #178a38;      --ok-bg: #e5f6ea;
  --warn: #a36a00;    --warn-bg: #fff3d6;
  --danger: #c2332f;  --danger-bg: #fde8e7;
  --info: #1f58c4;    --info-bg: #e6eefc;
  --neutral-bg: #eef1f6;

  /* gradients */
  --g-brand: linear-gradient(135deg, var(--green-500), var(--green-600));
  --g-navy: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  --g-hero: radial-gradient(1200px 600px at 85% -10%, rgba(34,164,71,.45), transparent 60%),
            radial-gradient(900px 600px at -10% 20%, rgba(35,84,176,.55), transparent 60%),
            linear-gradient(160deg, var(--navy-950), var(--navy-900) 55%, #0b3a4a);

  /* type */
  --font-head: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* shape */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(10,31,77,.06), 0 2px 8px rgba(10,31,77,.05);
  --shadow-md: 0 6px 24px rgba(10,31,77,.10);
  --shadow-lg: 0 18px 50px rgba(10,31,77,.18);
  --shadow-glow: 0 10px 30px rgba(34,164,71,.35);

  --container: 1200px;
  --header-h: 72px;
  --sidebar-w: 268px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* 2. BASE ------------------------------------------------------------------ */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
h1,h2,h3,h4 { font-family: var(--font-head); line-height: 1.2; margin: 0 0 .5em; color: var(--navy-900); letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 1em; color: var(--text-2); }
a { color: var(--navy-600); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid rgba(34,164,71,.55); outline-offset: 2px; border-radius: 6px; }
.sr-only { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:absolute; left:-999px; top:8px; background:#fff; padding:8px 14px; border-radius:8px; z-index:999; }
.skip-link:focus { left: 8px; }

.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tint { background: var(--bg-soft); }
.section--dark { background: var(--g-hero); color: #dbe6ff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: #b9c9ea; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.flex { display:flex; } .items-center{align-items:center;} .between{justify-content:space-between;} .gap-2{gap:8px;} .gap-3{gap:16px;} .wrap{flex-wrap:wrap;}
.mt-2{margin-top:8px;} .mt-3{margin-top:16px;} .mt-4{margin-top:32px;} .mb-0{margin-bottom:0;}
.text-center{text-align:center;} .muted{color:var(--muted);} .small{font-size:.875rem;}
.green{color:var(--green-500);} .nowrap{white-space:nowrap;}

.eyebrow { display:inline-flex; align-items:center; gap:10px; font:600 .78rem var(--font-body); letter-spacing:.18em; text-transform:uppercase; color: var(--green-600); margin-bottom: 14px; }
.eyebrow::before { content:""; width: 28px; height: 3px; border-radius: 3px; background: var(--g-brand); }
.section--dark .eyebrow { color: var(--lime); }
.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head .eyebrow { justify-content: center; }

/* 3. BUTTONS --------------------------------------------------------------- */
.btn {
  --pad-y: 12px; --pad-x: 22px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: var(--pad-y) var(--pad-x); border-radius: var(--r-pill); border: 1.5px solid transparent;
  font: 600 .95rem var(--font-body); cursor:pointer; text-decoration:none!important;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--g-brand); color:#fff; box-shadow: var(--shadow-glow); }
.btn--primary:hover { box-shadow: 0 14px 36px rgba(34,164,71,.45); }
.btn--navy { background: var(--g-navy); color:#fff; box-shadow: 0 8px 22px rgba(10,31,77,.28); }
.btn--outline { background: transparent; color: var(--navy-800); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--green-500); color: var(--green-600); }
.btn--ghost-light { background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.btn--ghost-light:hover { background: rgba(255,255,255,.16); }
.btn--danger { background: var(--danger); color:#fff; }
.btn--sm { --pad-y: 8px; --pad-x: 16px; font-size: .85rem; }
.btn--lg { --pad-y: 15px; --pad-x: 30px; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn .spinner { width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 4. HEADER ---------------------------------------------------------------- */
.ticker { background: var(--navy-950); color:#cfe0ff; font-size:.8rem; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06); }
.ticker__track { display:flex; gap:40px; padding: 8px 0; width:max-content; animation: marquee 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display:inline-flex; gap:8px; align-items:center; white-space:nowrap; }
.ticker__item b { color:#fff; font-weight:600; }
.ticker__stale { color:#ffd27a; }
@keyframes marquee { to { transform: translateX(-50%); } }

.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(160%) blur(14px); background: rgba(255,255,255,.82); border-bottom:1px solid rgba(198,210,229,.6); }
.site-header__in { height: var(--header-h); display:flex; align-items:center; justify-content:space-between; gap: 20px; }
.brand { display:flex; align-items:center; gap:10px; font-family: var(--font-head); font-weight:700; color: var(--navy-900); text-decoration:none!important; }
.brand svg, .brand img { height: 44px; width:auto; }
.brand__text { line-height:1.05; font-size: 1.05rem; }
.brand__text small { display:block; font:600 .6rem var(--font-body); letter-spacing:.3em; color: var(--green-600); }
.nav { display:flex; align-items:center; gap: 4px; }
.nav a { padding: 8px 14px; border-radius: var(--r-pill); color: var(--text-2); font-weight:500; font-size:.94rem; text-decoration:none; transition: background .2s, color .2s; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--bg-soft); color: var(--navy-800); }
.header-cta { display:flex; gap:10px; align-items:center; }
.menu-btn { display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:#fff; cursor:pointer; align-items:center; justify-content:center; }
.menu-btn svg { width:22px; height:22px; }
.drawer { position:fixed; inset:0; z-index:80; visibility:hidden; }
.drawer.is-open { visibility:visible; }
.drawer__scrim { position:absolute; inset:0; background:rgba(6,18,48,.55); opacity:0; transition:opacity .3s; }
.drawer.is-open .drawer__scrim { opacity:1; }
.drawer__panel { position:absolute; right:0; top:0; bottom:0; width:min(86vw, 340px); background:#fff; padding:20px; transform:translateX(100%); transition: transform .35s var(--ease); display:flex; flex-direction:column; gap:6px; overflow:auto; }
.drawer.is-open .drawer__panel { transform:none; }
.drawer__panel a.dlink { padding:13px 12px; border-radius:12px; color:var(--text); font-weight:500; text-decoration:none; }
.drawer__panel a.dlink:hover { background: var(--bg-soft); }

/* 5. HERO ------------------------------------------------------------------ */
.hero { position:relative; overflow:hidden; background: var(--g-hero); color:#fff; padding: clamp(56px, 9vw, 120px) 0 clamp(72px, 10vw, 140px); }
.hero::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%); }
.hero__orb { position:absolute; border-radius:50%; filter: blur(60px); opacity:.5; animation: float 14s ease-in-out infinite; }
.hero__orb--1 { width:360px; height:360px; background:#2354b0; left:-80px; bottom:-80px; }
.hero__orb--2 { width:300px; height:300px; background:#22a447; right:8%; top:-60px; animation-delay:-6s; }
@keyframes float { 50% { transform: translate(24px,-26px) scale(1.06); } }
.hero__in { position:relative; display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; }
.hero h1 { color:#fff; }
.hero h1 em { font-style:normal; background: linear-gradient(90deg, var(--lime), var(--green-400)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead { font-size: 1.12rem; color:#c5d4f2; max-width: 560px; }
.hero__actions { display:flex; gap:14px; flex-wrap:wrap; margin: 28px 0 24px; }
.hero__note { display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:#9fb4dd; max-width:560px; }
.hero__note svg { width:18px; height:18px; flex:none; margin-top:2px; color: var(--lime); }
.hero__art { position:relative; }
.hero__art .float-1 { animation: float 9s ease-in-out infinite; }
.hero__art .float-2 { animation: float 11s ease-in-out infinite reverse; }
.wave-divider { position:absolute; left:0; right:0; bottom:-1px; line-height:0; }
.wave-divider svg { width:100%; height: 56px; }

/* 6. CARDS ----------------------------------------------------------------- */
.card { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; position:relative; }
.card--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(34,164,71,.45); }
.card--accent::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--g-brand); }
.card--glass { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); backdrop-filter: blur(14px); color:#dbe6ff; box-shadow:none; }
.card--glass h3 { color:#fff; } .card--glass p { color:#b9c9ea; }
.icon-badge { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background: var(--g-navy); color: var(--lime); box-shadow: 0 8px 20px rgba(10,31,77,.25); margin-bottom: 16px; }
.icon-badge svg { width:26px; height:26px; }
.icon-badge--green { background: var(--g-brand); color:#fff; }
.step-num { font: 700 .8rem var(--font-head); color: var(--green-600); letter-spacing:.1em; }

.disclosure { display:flex; gap:12px; align-items:flex-start; padding: 14px 18px; border-radius: var(--r-md); background: var(--info-bg); border-left: 4px solid var(--info); color: #1b3f86; font-size:.88rem; }
.disclosure svg { width:20px; height:20px; flex:none; margin-top:2px; }
.disclosure--warn { background: var(--warn-bg); border-color: #e0a31b; color:#6b4600; }
.disclosure--dark { background: rgba(255,255,255,.07); border-color: var(--lime); color:#cfe0ff; }

/* 7. PLANS ----------------------------------------------------------------- */
.segmented { display:inline-flex; padding:5px; background: #fff; border:1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }
.segmented button { border:0; background:transparent; padding: 10px 24px; border-radius: var(--r-pill); font: 600 .92rem var(--font-body); color: var(--text-2); cursor:pointer; transition: all .25s var(--ease); }
.segmented button[aria-selected="true"] { background: var(--g-navy); color:#fff; box-shadow: 0 6px 16px rgba(10,31,77,.3); }
.plan-meta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin: 24px 0 32px; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:#fff; border:1px solid var(--line); border-radius: var(--r-pill); font-size:.86rem; color:var(--text-2); }
.pill b { color: var(--navy-900); font-family: var(--font-head); }
.plan-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.plan-card { display:flex; flex-direction:column; gap: 14px; }
.plan-card__top { display:flex; justify-content:space-between; align-items:center; }
.plan-card__label { font: 600 .72rem var(--font-body); letter-spacing:.16em; color: var(--muted); text-transform:uppercase; }
.plan-card__label b { color: var(--green-600); }
.plan-card__amount { font: 700 2.2rem var(--font-head); color: var(--navy-900); letter-spacing:-.02em; }
.plan-card__rows { display:grid; gap:8px; font-size:.9rem; color:var(--text-2); }
.plan-card__rows div { display:flex; justify-content:space-between; border-top:1px dashed var(--line); padding-top:8px; }
.plan-card__rows b { color: var(--navy-900); }
.tag-diff { font: 700 .66rem var(--font-body); letter-spacing:.1em; padding:3px 9px; border-radius: var(--r-pill); color: var(--green-700); border:1px solid var(--green-500); background: var(--ok-bg); }
[hidden] { display:none!important; }

.compare { width:100%; border-collapse: separate; border-spacing:0; background:#fff; border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-sm); }
.compare th, .compare td { padding: 14px 20px; text-align:left; border-bottom:1px solid var(--line); font-size:.94rem; }
.compare thead th { background: var(--g-navy); color:#fff; font-family: var(--font-head); }
.compare thead th:last-child { background: var(--g-brand); }
.compare tr.differs td { background: #f1faf3; }
.compare tr:last-child td { border-bottom:0; }

/* 8. REFERRAL LADDER + REWARDS -------------------------------------------- */
.ladder { display:grid; gap:12px; }
.ladder__row { display:grid; grid-template-columns: 52px 90px 1fr 80px; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding: 12px 18px; }
.ladder__no { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font: 700 .95rem var(--font-head); background: radial-gradient(circle at 30% 30%, var(--green-300), var(--green-600)); box-shadow: 0 4px 10px rgba(23,138,56,.4); }
.ladder__bar { height:10px; background: var(--bg-soft); border-radius: 10px; overflow:hidden; }
.ladder__bar i { display:block; height:100%; width:0; border-radius:10px; background: linear-gradient(90deg, var(--green-600), var(--green-300)); transition: width 1.1s var(--ease); }
.ladder__pct { text-align:right; font: 700 1.05rem var(--font-head); color: var(--green-600); }

.milestones { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:20px; }
.milestone { text-align:center; }
.milestone__art { height:90px; display:grid; place-items:center; margin-bottom:10px; }
.milestone__art svg { height:84px; width:auto; }
.milestone__no { font:600 .7rem var(--font-body); letter-spacing:.16em; color:var(--muted); }
.milestone__amt { font: 700 1.35rem var(--font-head); color: var(--navy-900); margin:4px 0; }
.milestone__reward { font-weight:600; color: var(--green-600); }

/* 9. FORMS ----------------------------------------------------------------- */
.field { display:grid; gap:6px; margin-bottom: 16px; }
.field label { font-weight:600; font-size:.88rem; color: var(--navy-900); }
.field .hint { font-size:.8rem; color: var(--muted); }
.input, .select, .textarea {
  width:100%; padding: 12px 14px; border:1.5px solid var(--line-strong); border-radius: var(--r-md);
  font: 500 .96rem var(--font-body); color: var(--text); background:#fff; transition: border-color .2s, box-shadow .2s;
}
.input:focus, .select:focus, .textarea:focus { outline:none; border-color: var(--green-500); box-shadow: 0 0 0 4px rgba(34,164,71,.15); }
.textarea { min-height: 120px; resize: vertical; }
.input-wrap { position:relative; }
.input-wrap .input { padding-right: 46px; }
.input-wrap .suffix { position:absolute; right:10px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:30px; height:30px; background:none; border:0; color: var(--muted); cursor:pointer; }
.input-wrap .suffix svg { width:20px; height:20px; }
.field.is-ok .input { border-color: var(--green-500); }
.field.is-bad .input { border-color: var(--danger); }
.field.is-ok .status { color: var(--ok); } .field.is-bad .status { color: var(--danger); } .field.is-checking .status { color: var(--muted); }
.status { font-size:.8rem; font-weight:600; min-height:1.2em; }
.phone-group { display:grid; grid-template-columns: 150px 1fr; gap:10px; }
.check { display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color: var(--text-2); }
.check input { margin-top:4px; accent-color: var(--green-500); width:16px; height:16px; }
.captcha-slot { border:1.5px dashed var(--line-strong); border-radius: var(--r-md); padding: 14px; text-align:center; color: var(--muted); font-size:.82rem; background: var(--bg); }
.sponsor-card { display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius: var(--r-md); background: var(--ok-bg); border:1px solid #bfe6c9; }
.avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background: var(--g-navy); color:#fff; font:700 .9rem var(--font-head); flex:none; }

/* 10. MODAL / TOAST / ALERT ----------------------------------------------- */
.modal { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:16px; }
.modal.is-open { display:flex; }
.modal__scrim { position:absolute; inset:0; background: rgba(6,18,48,.62); backdrop-filter: blur(4px); animation: fade .25s; }
.modal__dialog { position:relative; width:min(100%, 460px); max-height: calc(100dvh - 32px); overflow:auto; background:#fff; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); animation: pop .35s var(--ease); }
.modal__head { padding: 26px 28px 8px; }
.modal__body { padding: 8px 28px 28px; }
.modal__close { position:absolute; right:14px; top:14px; width:38px; height:38px; border-radius:50%; border:0; background: var(--bg-soft); cursor:pointer; display:grid; place-items:center; }
.modal__close svg { width:18px; height:18px; }
.modal__banner { height:92px; background: var(--g-hero); border-radius: var(--r-xl) var(--r-xl) 0 0; display:flex; align-items:center; padding: 0 28px; color:#fff; font: 700 1.2rem var(--font-head); }
@keyframes fade { from { opacity:0; } }
@keyframes pop { from { opacity:0; transform: translateY(18px) scale(.97); } }

.toasts { position:fixed; right:16px; bottom:16px; z-index:200; display:grid; gap:10px; width:min(92vw, 360px); }
.toast { display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-left:5px solid var(--green-500); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow-md); animation: slideIn .4s var(--ease); font-size:.9rem; }
.toast--error { border-left-color: var(--danger); } .toast--warn { border-left-color:#e0a31b; } .toast--info { border-left-color: var(--info); }
.toast b { display:block; color: var(--navy-900); }
@keyframes slideIn { from { opacity:0; transform: translateX(30px); } }

/* 11. TABLES / CHIPS ------------------------------------------------------- */
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius: var(--r-lg); background:#fff; box-shadow: var(--shadow-sm); }
.table { width:100%; border-collapse: collapse; min-width: 640px; }
.table th { text-align:left; font: 600 .72rem var(--font-body); letter-spacing:.1em; text-transform:uppercase; color: var(--muted); padding: 14px 18px; background: #f8fafd; border-bottom:1px solid var(--line); white-space:nowrap; }
.table td { padding: 14px 18px; border-bottom:1px solid var(--line); font-size:.92rem; }
.table tr:last-child td { border-bottom:0; }
.table tbody tr:hover td { background: #f8fbff; }
.num { font-variant-numeric: tabular-nums; text-align:right; }
.chip { display:inline-flex; align-items:center; gap:6px; padding: 4px 11px; border-radius: var(--r-pill); font: 600 .75rem var(--font-body); background: var(--neutral-bg); color: var(--text-2); }
.chip::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; }
.chip--ok { background: var(--ok-bg); color: var(--ok); } .chip--warn { background: var(--warn-bg); color: var(--warn); }
.chip--bad { background: var(--danger-bg); color: var(--danger); } .chip--info { background: var(--info-bg); color: var(--info); }
.toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom: 16px; }
.toolbar .input, .toolbar .select { width:auto; min-width: 180px; padding: 9px 12px; }

/* 12. APP SHELL (admin + user) -------------------------------------------- */
.app { display:grid; grid-template-columns: var(--sidebar-w) 1fr; min-height:100dvh; background: var(--bg); }
.sidebar { position:sticky; top:0; height:100dvh; background: linear-gradient(180deg, var(--navy-950), var(--navy-900)); color:#b9c9ea; padding: 20px 14px; display:flex; flex-direction:column; gap: 18px; overflow:auto; }
.sidebar .brand { color:#fff; padding: 4px 10px; } .sidebar .brand__text small { color: var(--lime); }
.side-label { font:600 .66rem var(--font-body); letter-spacing:.2em; color:#6f86b8; padding: 0 12px; text-transform:uppercase; margin-top:6px; }
.side-nav { display:grid; gap:3px; }
.side-nav a { display:flex; align-items:center; gap:12px; padding: 11px 12px; border-radius: 12px; color:#b9c9ea; font-weight:500; font-size:.92rem; text-decoration:none; transition: background .2s, color .2s; position:relative; }
.side-nav a svg { width:19px; height:19px; flex:none; opacity:.9; }
.side-nav a:hover { background: rgba(255,255,255,.07); color:#fff; }
.side-nav a[aria-current="page"] { background: linear-gradient(90deg, rgba(34,164,71,.28), rgba(34,164,71,.05)); color:#fff; }
.side-nav a[aria-current="page"]::before { content:""; position:absolute; left:-14px; top:10px; bottom:10px; width:4px; border-radius:0 4px 4px 0; background: var(--green-400); }
.side-nav a.is-locked { opacity:.55; }
.side-nav a .lock { margin-left:auto; width:15px; height:15px; opacity:.8; }
.side-foot { margin-top:auto; }
.main { min-width:0; }
.topbar { height: 68px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 0 28px; background: rgba(255,255,255,.85); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.topbar .search { position:relative; flex:1; max-width: 420px; }
.topbar .search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); }
.topbar .search .input { padding-left: 40px; border-radius: var(--r-pill); background: var(--bg); }
.icon-btn { width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; cursor:pointer; position:relative; }
.icon-btn svg { width:20px; height:20px; color: var(--navy-800); }
.icon-btn .dot { position:absolute; right:9px; top:9px; width:9px; height:9px; border-radius:50%; background: var(--danger); border:2px solid #fff; }
.content { padding: 28px; display:grid; gap: 24px; grid-template-columns: minmax(0,1fr); }
.content > * { min-width:0; }
.grid-split { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
.grid > * { min-width:0; }
.brand-chip { background:#fff; border-radius:14px; padding:8px 12px; display:inline-block; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.page-head h1 { font-size: 1.7rem; margin:0; } .page-head p { margin:4px 0 0; }
.sidebar-toggle { display:none; }

.stat { display:flex; gap:16px; align-items:center; }
.stat__ico { width:50px; height:50px; border-radius:15px; display:grid; place-items:center; background: var(--ok-bg); color: var(--green-600); flex:none; }
.stat__ico svg { width:24px; height:24px; }
.stat__ico--navy { background: var(--info-bg); color: var(--navy-600); } .stat__ico--warn { background: var(--warn-bg); color: var(--warn); }
.stat__label { font-size:.8rem; color: var(--muted); font-weight:500; }
.stat__value { font: 700 1.55rem var(--font-head); color: var(--navy-900); line-height:1.2; }
.stat__sub { font-size:.76rem; color: var(--muted); }

.balance-card { background: var(--g-hero); color:#fff; border:0; overflow:hidden; }
.balance-card h3, .balance-card .stat__value { color:#fff; }
.balance-split { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top: 18px; }
.balance-split div { background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius: var(--r-md); padding: 12px 14px; }
.balance-split small { display:block; color:#9fb4dd; font-size:.74rem; }
.balance-split b { font: 700 1.1rem var(--font-head); }

.lock-banner { flex-wrap:wrap; display:flex; gap:16px; align-items:center; padding: 18px 22px; border-radius: var(--r-lg); background: linear-gradient(90deg, #fff7e0, #fffdf5); border:1px solid #f0d58a; }
.lock-banner svg { width:30px; height:30px; color: var(--warn); flex:none; }

.chart { width:100%; height: 220px; }
.chart .grid-line { stroke: var(--line); stroke-dasharray: 3 4; }
.chart .area { fill: url(#gArea); }
.chart .line { fill:none; stroke: var(--green-500); stroke-width: 3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 1.6s var(--ease) forwards; }
.chart text { fill: var(--muted); font: 500 11px var(--font-body); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.bars { display:flex; align-items:flex-end; gap:14px; height: 200px; padding-top: 10px; }
.bars div { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; font-size:.72rem; color:var(--muted); }
.bars i { width:100%; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--green-400), var(--green-600)); transform-origin:bottom; animation: grow .9s var(--ease) both; }
.bars div:nth-child(even) i { background: linear-gradient(180deg, var(--navy-600), var(--navy-800)); }
@keyframes grow { from { transform: scaleY(0); } }

.tree { list-style:none; margin:0; padding-left: 22px; border-left: 2px solid var(--line); }
.tree li { position:relative; padding: 8px 0 8px 18px; }
.tree li::before { content:""; position:absolute; left:0; top: 26px; width:14px; border-top:2px solid var(--line); }
.tree__node { display:inline-flex; align-items:center; gap:10px; padding: 8px 14px; background:#fff; border:1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); font-size:.9rem; }
.tree__lvl { font:700 .68rem var(--font-body); background: var(--g-navy); color:#fff; padding: 2px 8px; border-radius: var(--r-pill); }

.skeleton { background: linear-gradient(90deg, #e9eff8 25%, #f6f9fd 37%, #e9eff8 63%); background-size: 400% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; height: 16px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* 13. AUTH PAGE ------------------------------------------------------------ */
.auth { min-height:100dvh; display:grid; grid-template-columns: 1.1fr 1fr; }
.auth__art { background: var(--g-hero); color:#fff; padding: 48px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.auth__art h2 { color:#fff; }
.auth__form { display:grid; place-items:center; padding: 32px 20px; }
.auth__box { width:min(100%, 440px); }

/* 14. FOOTER --------------------------------------------------------------- */
.site-footer { background: var(--navy-950); color:#9fb4dd; padding: 64px 0 28px; }
.site-footer h4 { color:#fff; font-size:1rem; }
.site-footer a { color:#b9c9ea; display:block; padding:4px 0; font-size:.92rem; }
.site-footer a:hover { color:#fff; }
.footer-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-legal { margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:.8rem; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* 15. CALCULATOR ----------------------------------------------------------- */
.calc { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.range { width:100%; accent-color: var(--green-500); }
.pending-box { border:2px dashed #e0a31b; background: var(--warn-bg); border-radius: var(--r-md); padding: 18px; color:#6b4600; }
.kv { display:grid; gap:10px; }
.kv div { display:flex; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px dashed var(--line); }
.kv b { color: var(--navy-900); text-align:right; }

/* 16. MOTION + RESPONSIVE -------------------------------------------------- */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }
.reveal[data-delay="1"] { transition-delay:.08s; } .reveal[data-delay="2"] { transition-delay:.16s; } .reveal[data-delay="3"] { transition-delay:.24s; }

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .milestones { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .nav, .header-cta .btn--outline { display:none; }
  .menu-btn { display:inline-flex; }
  .hero__in { grid-template-columns: 1fr; gap: 32px; }
  .hero__art { max-width: 520px; margin-inline:auto; }
  .grid-3, .grid-2, .grid-split, .calc { grid-template-columns: minmax(0,1fr); }
  .app { grid-template-columns: 1fr; }
  .sidebar { position:fixed; z-index:90; left:0; width:var(--sidebar-w); transform: translateX(-100%); transition: transform .35s var(--ease); }
  .sidebar.is-open { transform:none; box-shadow: var(--shadow-lg); }
  .sidebar-toggle { display:grid; }
  .topbar { padding: 0 16px; } .content { padding: 18px 16px; }
  .auth { grid-template-columns: 1fr; } .auth__art { display:none; }
}
@media (max-width: 600px) {
  .grid-4 { grid-template-columns: 1fr; }
  .ladder__row { grid-template-columns: 40px 1fr 64px; } .ladder__row .ladder__name { display:none; }
  .milestones { grid-template-columns: 1fr 1fr; gap:12px; }
  .balance-split { grid-template-columns: 1fr; }
  .phone-group { grid-template-columns: 120px 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .modal__head, .modal__body { padding-left:20px; padding-right:20px; }
  .brand__text { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .reveal { opacity:1; transform:none; }
  .ticker__track { animation:none; }
  .chart .line { stroke-dashoffset:0; }
}

/* filter rows: wrap + shrink on small screens */
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.filters .input, .filters .select { width:auto; min-width:0; flex:1 1 140px; }

.pending-box svg { width:20px; height:20px; display:inline-block; vertical-align:-4px; margin-right:4px; }
.lock-banner > div { flex:1 1 300px; }
.lock-banner .btn { margin-left:0!important; }
.toolbar .filters .input, .toolbar .filters .select { flex:0 1 190px; min-width:150px; }
.hero__art svg { width:100%; height:auto; }

.hero .eyebrow, .auth__art .eyebrow { color: var(--lime); }

/* ================= Phase 3 additions ================= */
.mt-1{margin-top:4px;} .mt-5{margin-top:56px;} .mb-1{margin-bottom:4px;} .mb-2{margin-bottom:8px;}
.h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }

/* page hero */
.page-hero { background: var(--g-hero); color:#dbe6ff; padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 56px); position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%; background: radial-gradient(circle, rgba(124,214,78,.22), transparent 70%); pointer-events:none; }
.page-hero h1 { color:#fff; margin: 8px 0 12px; max-width: 22ch; }
.page-hero .lead { color:#b9c9ea; max-width: 62ch; font-size: 1.05rem; margin:0; }
.page-hero .eyebrow { color: var(--lime); }

/* breadcrumbs */
.crumbs { padding: 14px 0 0; font-size:.84rem; }
.crumbs ol { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; color: var(--muted); }
.crumbs li + li::before { content:"/"; margin-right:6px; color: var(--line); }
.crumbs a { color: var(--text-2); }

/* flash messages */
.flash-wrap { padding-top: 16px; display:grid; gap:10px; }
.flash { display:flex; gap:10px; align-items:flex-start; padding: 12px 16px; border-radius: var(--r-md); border-left:4px solid var(--info); background: var(--info-bg); color:#1b3f86; font-size:.92rem; }
.flash svg { width:20px; height:20px; flex:none; margin-top:1px; }
.flash--success { background: var(--ok-bg); border-color: var(--ok); color:#116534; }
.flash--error { background: var(--danger-bg); border-color: var(--danger); color:#8a1f1f; }

/* prose & statements */
.prose-wrap { max-width: 860px; }
.prose h2 { margin-top: 28px; } .prose ul { padding-left: 1.2em; } .prose li { margin: 6px 0; }
.lead-dark { font-size:1.12rem; color: var(--text-2); max-width: 70ch; }
.statement { margin:0; padding: clamp(22px, 4vw, 40px); border-radius: var(--r-lg); background: var(--g-hero); color:#fff; font: 600 clamp(1.15rem, 2.2vw, 1.6rem)/1.5 var(--font-head); box-shadow: var(--shadow-md); border-left: 6px solid var(--lime); }
.card--risk { border-left: 4px solid #e0a31b; background: #fffaf0; }
.card--risk h2, .card--risk h3 { color: #6b4600; }

/* auth + errors */
.auth-wrap { max-width: 460px; }
.auth-card { padding: clamp(22px, 4vw, 34px); }
.hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* FAQ */
.faq details { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); margin-bottom: 12px; padding: 0 18px; transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: rgba(34,164,71,.5); box-shadow: var(--shadow-sm); }
.faq summary { cursor:pointer; padding: 16px 28px 16px 0; font: 600 1rem var(--font-head); color: var(--navy-900); list-style:none; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:1.4rem; color: var(--green-600); }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin: 0 0 16px; color: var(--text-2); }

/* terms */
.terms { list-style:none; padding:0; margin:0; }
.terms li { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 14px; }
.terms h2 { font-size: 1.05rem; display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 8px; }
.terms__n { font: 700 .8rem var(--font-head); color: var(--green-600); letter-spacing:.1em; }
.terms p { margin:0; color: var(--text-2); }

/* forms: select / textarea */
select.input { appearance:auto; }
textarea.input { resize: vertical; min-height: 120px; }
.table th[scope="row"] { text-align:left; font-weight:600; color: var(--navy-900); }

/* ===== Phase 5: authentication + member area ===== */
.auth-wrap--wide { max-width: 560px; }
.field .error { font-size:.82rem; font-weight:600; color: var(--danger); }
.field.is-bad .hint { color: var(--muted); }
.sponsor-box { display:flex; gap:12px; align-items:center; padding:12px 14px; margin-bottom:18px; border-radius: var(--r-md); background: var(--ok-bg); color:#116534; }
.sponsor-box svg { width:22px; height:22px; flex:none; }
.sponsor-box small { display:block; font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; opacity:.8; }
.optional { border:1px solid var(--line); border-radius: var(--r-md); padding: 4px 16px 4px; margin-bottom:18px; background:#fbfcff; }
.optional summary { cursor:pointer; font-weight:600; padding:12px 0; color: var(--navy-900); }
.optional[open] summary { border-bottom:1px solid var(--line); margin-bottom:12px; }
.phone-group { align-items:start; }
.phone-group .input { min-width:0; }

/* flag + dial-code picker */
.cselect { position:relative; min-width:0; }
.cselect__native { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.cselect__btn { width:100%; display:flex; align-items:center; gap:8px; padding: 11px 12px; border:1.5px solid var(--line); border-radius: var(--r-md); background:#fff; font: 500 .95rem var(--font-body); color: var(--text); cursor:pointer; text-align:left; }
.cselect__btn:focus-visible { outline:none; border-color: var(--green-500); box-shadow: 0 0 0 4px rgba(34,164,71,.15); }
.cselect__btn img, .cselect__list img { width:20px; height:15px; object-fit:cover; border-radius:2px; box-shadow: 0 0 0 1px rgba(10,31,77,.15); flex:none; }
.cselect__caret { margin-left:auto; color: var(--muted); font-size:.8rem; }
.cselect__panel { position:absolute; z-index:60; top:calc(100% + 6px); left:0; width:min(320px, 86vw); background:#fff; border:1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding:8px; }
.cselect__search { margin-bottom:6px; }
.cselect__list { list-style:none; margin:0; padding:0; max-height:260px; overflow:auto; }
.cselect__list li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:.9rem; }
.cselect__list li:hover, .cselect__list li.is-active { background: var(--ok-bg); }
.cselect__name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cselect__dial { color: var(--muted); font-variant-numeric: tabular-nums; }

/* member shell additions */
.side-nav .side-btn { display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border:0; border-radius:12px; background:none; color:#b9c9ea; font: 500 .92rem var(--font-body); cursor:pointer; text-align:left; }
.side-nav .side-btn:hover { background: rgba(255,255,255,.07); color:#fff; }
.side-nav .side-btn svg { width:19px; height:19px; }
.sidebar .brand-chip { display:block; text-align:center; }
.topbar__title { font: 600 1rem var(--font-head); color: var(--navy-900); margin-right:auto; }
.who { display:flex; align-items:center; gap:10px; }
.who__name { display:grid; text-align:right; font-weight:600; font-size:.88rem; color: var(--navy-900); line-height:1.2; }
.who__name small { font-weight:500; color: var(--muted); }
.copy-row { display:flex; gap:8px; } .copy-row .input { min-width:0; }
.ticks { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.ticks li { position:relative; padding-left:26px; color: var(--text-2); }
.ticks li::before { content:""; position:absolute; left:0; top:.4em; width:14px; height:8px; border-left:2.5px solid var(--green-500); border-bottom:2.5px solid var(--green-500); transform: rotate(-45deg); }
.addr-list { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.addr-list li { display:grid; gap:10px; padding-bottom:14px; border-bottom:1px dashed var(--line); }
.addr-list li:last-child { border-bottom:0; padding-bottom:0; }
.addr-list code { display:block; margin-top:4px; font-size:.82rem; word-break:break-all; color: var(--text-2); }
.addr-remove { display:flex; gap:8px; flex-wrap:wrap; } .addr-remove .input { flex:1 1 160px; min-width:0; padding:8px 12px; }
.spinner { display:inline-block; vertical-align:-2px; }
@media (max-width: 480px) { .who__name { display:none; } .page-head h1 { font-size:1.4rem; } }

/* member sidebar: 14 links must fit short laptop screens; Logout stays reachable */
.sidebar .side-nav a, .sidebar .side-nav .side-btn { padding-top:9px; padding-bottom:9px; }
.sidebar .side-foot { position:sticky; bottom:-20px; margin-top:auto; padding:10px 0 20px; background: linear-gradient(180deg, rgba(7,22,58,0), var(--navy-900) 30%); }
.sidebar .side-foot .side-nav { display:block; }

/* ---------- Phase 6: admin panel + bare layout ---------- */
body.bare { min-height:100vh; background: var(--g-hero, linear-gradient(160deg,#0a1f4d,#12306f)); display:grid; place-items:center; padding:24px 16px; }
.bare__wrap { width:100%; max-width:440px; display:grid; gap:16px; }
.bare__logo { display:flex; justify-content:center; background:#fff; border-radius:16px; padding:14px 18px; justify-self:center; }
.bare__logo img { max-height:44px; width:auto; }
.bare .auth-card { margin:0; }
.form-inline { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; } .form-inline .field { margin:0; }
.admin-role { white-space:nowrap; } .admin-role::before { display:none; }
.setup-key { font-size:1.05rem; letter-spacing:.06em; word-break:break-all; }
.perm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; margin:14px 0; }
.perm { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:12px; cursor:pointer; background:#fff; }
.perm input { margin-top:4px; width:18px; height:18px; accent-color: var(--green-500); }
.perm small { display:block; color:var(--muted); font-size:.8rem; } .perm b { font-weight:600; font-size:.88rem; color:var(--navy-900); }
.admin-stats .stat__value { font-size:1.4rem; }
.bars { width:100%; height:auto; max-height:260px; display:block; }
.bars__bar { fill: var(--green-500); } .bars__bar:hover { fill: var(--green-600); }
.bars__grid { stroke: var(--line); stroke-width:1; } .bars__axis { fill: var(--muted); font: 500 10px var(--font-body); }
body.is-admin .side-label { margin-top:10px; }
.kv-wide div { align-items:flex-start; } pre.json { white-space:pre-wrap; word-break:break-word; font-size:.8rem; background:var(--bg); padding:10px 12px; border-radius:10px; margin:0; }
.pager { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }
.toolbar form.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.check { display:flex; gap:10px; align-items:flex-start; margin:8px 0; font-size:.92rem; cursor:pointer; }
.check input { margin-top:3px; width:18px; height:18px; accent-color: var(--green-500); flex:none; }
.nowrap { white-space:nowrap; }
.bar-list { display:grid; gap:12px; }
.bar-row { display:grid; grid-template-columns:70px 1fr minmax(90px,auto); gap:12px; align-items:center; font-size:.9rem; }
.bar-row__t { height:12px; background:var(--bg); border-radius:99px; overflow:hidden; }
.bar-row__f { display:block; height:100%; width:0; background: var(--g-brand); border-radius:99px; transition: width .8s cubic-bezier(.2,.7,.2,1); }
.bar-row__v { font-weight:600; color:var(--navy-900); text-align:right; }
textarea.input { resize:vertical; min-height:90px; }
.grid-2 > .field, .grid-2 > form .field { align-self:start; }

/* ---------- Phase 7: money screens ---------- */
.text-ok { color: var(--ok); } .text-bad { color: var(--danger); }
form.inline { display: inline; margin: 0; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; }
.wallet-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.wallet-cards .card .big { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; line-height: 1.15; }
.wallet-cards .card .inr { color: var(--muted); font-size: .85rem; }
.pay-box { background: var(--bg-soft); border: 1px dashed var(--line-strong); border-radius: 12px; padding: 14px 16px; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92rem; white-space: pre-wrap; }
.plan-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.plan-pick label { display: block; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.plan-pick input { position: absolute; opacity: 0; }
.plan-pick input:checked + span, .plan-pick label:has(input:checked) { border-color: var(--green-500); box-shadow: 0 0 0 2px rgba(23,138,56,.18); }
.amt-neg { color: var(--danger); } .amt-pos { color: var(--ok); }
.plan-pick label { position: relative; }
.plan-pick label:has(input:focus-visible) { outline: 3px solid var(--green-500); outline-offset: 2px; }

/* Admin dual clock (Dubai / India) ------------------------------------------------ */
.dual-clock { display:flex; align-items:stretch; gap:8px; }
.clock { display:grid; gap:1px; padding:5px 12px; min-width:128px; border:1px solid var(--line); border-radius:12px; background: var(--bg); line-height:1.15; }
.clock.is-system { border-color: var(--green-500); background: var(--ok-bg); }
.clock__label { display:flex; align-items:center; gap:6px; font: 600 .66rem var(--font-body); text-transform:uppercase; letter-spacing:.05em; color: var(--muted); white-space:nowrap; }
.clock__short { display:none; }
.clock__badge { padding:0 6px; border-radius:var(--r-pill); background: var(--green-600); color:#fff; font-size:.58rem; letter-spacing:.04em; }
.clock__time { font: 600 1.06rem var(--font-head); color: var(--navy-900); font-variant-numeric: tabular-nums; letter-spacing:.02em; }
.clock__meta { font-size:.66rem; color: var(--muted); white-space:nowrap; }
@media (max-width: 1100px) { .clock__meta { display:none; } .clock { min-width:0; } }
@media (max-width: 900px) { .topbar__title { display:none; } .dual-clock { margin-right:auto; } }
@media (max-width: 600px) {
  .admin-role { display:none; }
  .dual-clock { gap:6px; } .clock { padding:4px 8px; border-radius:10px; }
  .clock__long { display:none; } .clock__short { display:inline; }
  .clock__time { font-size:.9rem; letter-spacing:0; } .clock__badge { display:none; }
}

/* ---------- Phase 9: support tickets and notifications ---------- */
.icon-btn--badge { position: relative; }
.badge-dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger, #c0392b); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line, #e3e8ef); }
.tab { padding: 8px 14px; border-radius: 8px 8px 0 0; color: var(--muted, #5b6b7f); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.tab.is-active { color: var(--navy-900, #0b1f4b); border-bottom-color: var(--green-500, #22a447); }
.thread { display: grid; gap: 12px; }
.thread__msg { max-width: 760px; }
.thread__msg--me { justify-self: end; border-left: 3px solid var(--green-500, #22a447); }
.thread__msg--staff { justify-self: start; border-left: 3px solid var(--navy-900, #0b1f4b); }
.thread__meta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.thread__body, .notif__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.notif-list { display: grid; gap: 10px; }
.notif--new { border-left: 3px solid var(--green-500, #22a447); }
.notif__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.notif__head .muted { margin-left: auto; }
.notif__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.notif__actions:empty { display: none; }
@media (max-width: 640px) { .thread__msg { max-width: none; } .thread__msg--me, .thread__msg--staff { justify-self: stretch; } }
td code { white-space: nowrap; }

/* ---- Form inputs with leading icons, show/hide password, CAPTCHA (amendment 1) ---- */
.input-wrap.has-prefix .input { padding-left: 46px; }
.input-wrap .prefix { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; display:grid; place-items:center; color: var(--muted); pointer-events:none; transition: color .15s; }
.input-wrap .prefix svg { width:20px; height:20px; }
.input-wrap:focus-within .prefix { color: var(--green-600); }
.input-wrap.is-area .prefix { top:16px; transform:none; }
.field.is-bad .input-wrap .prefix { color: var(--danger); }
.input-wrap.has-suffix .input { padding-right: 48px; }
.input-wrap .suffix { border-radius:8px; } .input-wrap .suffix:hover { color: var(--navy-900); background: var(--bg); }
.input-wrap .suffix:focus-visible { outline:2px solid var(--green-500); outline-offset:1px; }
.input::placeholder, .textarea::placeholder { color:#8a97b1; opacity:1; }
.phone-group .input-wrap { min-width:0; } .phone-group .input-wrap .input { width:100%; }
.captcha__row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.captcha__img { display:block; width:230px; max-width:calc(100% - 52px); height:auto; aspect-ratio:230/78; border:1px solid var(--line); border-radius:12px; background:#eef3fa; }
.captcha__refresh { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:12px; background:#fff; color: var(--navy-900); cursor:pointer; flex:none; }
.captcha__refresh:hover { background: var(--bg); } .captcha__refresh:focus-visible { outline:2px solid var(--green-500); outline-offset:2px; }
.captcha__refresh svg { width:20px; height:20px; } .captcha__refresh.is-spin svg { animation: capspin .6s linear; }
.captcha__q { margin:0; padding:10px 14px; border:1px dashed var(--line); border-radius:12px; font-weight:600; background:#f6f9fd; }
@keyframes capspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .captcha__refresh.is-spin svg { animation:none; } }
@media (max-width: 420px) { .captcha__img { width:100%; max-width:calc(100% - 52px); } }

.clock__ampm { font: 700 .62rem var(--font-body); letter-spacing:.06em; color: var(--green-700, var(--green-600)); margin-left:2px; }
.field .status:empty { display:none; }

/* sidebar: its own thin scrollbar, no scroll chaining into the page, foldable groups */
.sidebar { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2b4277 transparent; }
.sidebar::-webkit-scrollbar { width:6px; } .sidebar::-webkit-scrollbar-thumb { background:#2b4277; border-radius:6px; }
.side-label.is-fold { cursor:pointer; display:flex; align-items:center; justify-content:space-between; border-radius:8px; padding-top:6px; padding-bottom:6px; user-select:none; }
.side-label.is-fold::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition: transform .2s; margin-right:4px; }
.side-label.is-fold[aria-expanded="false"]::after { transform:rotate(-45deg); }
.side-label.is-fold:hover, .side-label.is-fold:focus-visible { color:#fff; outline:none; background: rgba(255,255,255,.05); }
.side-nav [hidden] { display:none !important; }

/* admin: brand image previews */
.brand-card { gap:8px; } .brand-tiles { display:flex; gap:10px; flex-wrap:wrap; margin:4px 0; }
.brand-tile { margin:0; } .brand-tile figcaption { font-size:.72rem; color: var(--muted); margin-top:4px; }
.brand-tile__box { display:grid; place-items:center; min-width:150px; min-height:76px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; }
.brand-tile--light .brand-tile__box { background:#fff; } .brand-tile--dark .brand-tile__box { background: var(--navy-900); border-color: var(--navy-900); }
.brand-tile__box img { max-width:210px; max-height:64px; width:auto; height:auto; display:block; } .brand-tile__box img.is-fav { width:48px; height:48px; object-fit:contain; }
.brand-tile__box--tab { grid-auto-flow:column; gap:8px; min-width:0; justify-content:start; font-size:.8rem; padding:8px 12px; } .brand-tile__box--tab img { width:16px; height:16px; }
.img-missing { font-size:.78rem; color: var(--danger); font-weight:600; }
.badge--ok { background: var(--ok-bg); color:#116534; }
.badge { display:inline-block; padding:1px 8px; border-radius:999px; background:#e8edf6; color: var(--navy-900); font-size:.66rem; font-weight:700; letter-spacing:.03em; margin-left:6px; text-transform:uppercase; vertical-align:middle; }

/* ---- member notification dropdown + total-income card (patch 2) ---- */
.notif { position:relative; }
.notif__panel { position:absolute; right:0; top:calc(100% + 10px); width:min(360px, 92vw); max-height:min(70vh, 480px); overflow:auto; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px rgba(10,28,60,.18); z-index:90; }
.notif__panel[hidden] { display:none; }
.notif__head { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
.notif__head form { margin:0; }
.linklike { background:none; border:0; padding:0; color:var(--green-700, var(--green-600)); font:600 .8rem var(--font-body); cursor:pointer; text-decoration:underline; }
.notif__list { list-style:none; margin:0; padding:0; }
.notif__item form { margin:0; }
.notif__item + .notif__item { border-top:1px solid var(--line); }
.notif__btn { all:unset; box-sizing:border-box; display:grid; gap:2px; width:100%; padding:11px 14px 11px 28px; position:relative; cursor:pointer; }
.notif__btn:hover, .notif__btn:focus-visible { background: var(--bg); }
.notif__btn:focus-visible { outline:2px solid var(--green-500); outline-offset:-2px; }
.notif__item.is-unread .notif__btn { background: var(--ok-bg); }
.notif__dot { position:absolute; left:12px; top:17px; width:8px; height:8px; border-radius:50%; background: var(--green-600); }
.notif__title { font-weight:600; font-size:.88rem; color: var(--navy-900); }
.notif__body { font-size:.8rem; color: var(--muted); line-height:1.35; }
.notif__time { font-size:.72rem; color: var(--muted); }
.notif__empty { padding:18px 14px; color: var(--muted); font-size:.88rem; }
.notif__all { display:block; text-align:center; padding:11px; border-top:1px solid var(--line); font-weight:600; font-size:.85rem; }
.stat--total { border-color: var(--green-500); background: var(--ok-bg); }
@media (max-width: 560px) { .notif { position:static; } .notif__panel { left:12px; right:12px; width:auto; top:64px; position:fixed; } }

/* Patch 2: compact income tables (Sponsor Income history) */
.table--compact th, .table--compact td { padding: .6rem .45rem; font-size: .88rem; }
.table--compact .nowrap, .table .nowrap { white-space: nowrap; }
.table--compact th { letter-spacing: .02em; font-size: .72rem; white-space: nowrap; }
.table--compact .chip { white-space: nowrap; }

/* Home: "Meet our trainers", two people half and half */
.trainers__grid { display:grid; grid-template-columns:1fr 1fr; gap:0; max-width:760px; margin:0 auto; border-radius:var(--radius-lg, 22px); overflow:hidden; box-shadow:0 18px 44px rgba(10,25,60,.15); background:#fff; }
.trainer { position:relative; margin:0; aspect-ratio: 4 / 4.4; overflow:hidden; background:#0b1b3a; }
.trainer + .trainer { border-left:4px solid #fff; }
.trainer__photo, .trainer__photo img { position:absolute; inset:0; width:100%; height:100%; }
.trainer__photo img { object-fit:cover; transition:transform .9s var(--ease, ease); }
.trainer:hover .trainer__photo img { transform:scale(1.035); }
.trainer__cap { position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:2px; padding:44px 20px 18px; color:#fff; background:linear-gradient(to top, rgba(7,18,42,.92), rgba(7,18,42,.55) 55%, transparent); }
.trainer__cap b { font-family:var(--font-head, inherit); font-size:clamp(1rem, 1.8vw, 1.25rem); line-height:1.2; }
.trainer__cap span { font-size:.78rem; letter-spacing:.04em; color:#f5c451; text-transform:uppercase; font-weight:600; }
@media (max-width: 720px) {
  .trainers__grid { grid-template-columns:1fr 1fr; max-width:420px; }
  .trainer { aspect-ratio: 3 / 4; }
  .trainer + .trainer { border-left:3px solid #fff; }
  .trainer__cap { padding:36px 10px 12px; }
  .trainer__cap b { font-size:.92rem; }
  .trainer__cap span { font-size:.66rem; letter-spacing:.02em; }
}

/* Header ticker (CoinGecko widget) and the TradingView chart */
.ticker--live { background:#fff; color:inherit; border-bottom:1px solid #e3e9f4; min-height:44px; display:flex; align-items:center; }
.ticker--live > gecko-coin-price-marquee-widget { display:block; width:100%; }
.tv-card { padding:0; overflow:hidden; }
.tv-chart { overflow:hidden; }

/* Share row: copy + WhatsApp */
.share-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.btn--wa { background:#25d366; border-color:#25d366; color:#06361a; display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.btn--wa:hover { background:#1ebe5b; border-color:#1ebe5b; color:#042a14; }
.btn--wa svg { width:18px; height:18px; fill:currentColor; }