:root{--action:#7b6cfd;--action-2:#6a5af5}
/* Synlo unified design layer: client, admin, builder and auth adopt the marketing-site look.
   Flat, off-white surfaces, deep navy #0b0826 actions, indigo #4946fd accent, 11px radii, Aeonik. No gradients. */
:root{
  --brand:#7b6cfd; --brand-600:#6a5af5; --brand-700:#5a49ee; --brand-50:#f1efff; --brand-100:#e2ddff;
  --accent:#4946fd; --blue:#4946fd;
  --grad:#7b6cfd; --grad-soft:#f5f0fb;
  --bg:#f5f7f5; --surface:#fff; --surface-2:#f5f7f5; --line:#e0e0e0; --line-2:#ebebeb;
  --text:#0b0826; --text-2:#4a4a5e; --muted:#6f7279;
  --shadow-sm:none; --shadow:0 1px 2px rgba(11,8,38,.05); --shadow-lg:0 18px 48px rgba(11,8,38,.16);
  --r-sm:8px; --r:11px; --r-lg:16px;
  --font:'Aeonik','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-d:'Aeonik','Inter',system-ui,sans-serif;
  /* admin / site builder tokens */
  --ac:#7b6cfd; --ac2:#4946fd; --panel:#fff; --panel2:#f5f7f5; --line2:#e0e0e0; --tx:#0b0826; --mu:#6f7279;
}
body.dark{--bg:#0a0c16;--surface:#101326;--surface-2:#131730;--line:#262a40;--line-2:#1d2136;--text:#f5f7f5;--text-2:#b9bdd3;--muted:#8a8fa8;--brand:#f5f7f5;--brand-600:#fff;--brand-50:rgba(73,70,253,.16);--brand-100:rgba(73,70,253,.28)}
body{font-family:var(--font);background:var(--bg);color:var(--text)}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:500;letter-spacing:-.015em}
a{font-weight:500;color:var(--accent)}
/* kill gradient surfaces */
.promo,.wallet-card,.hero,.welcome,.ag-hero,[class*="hero-card"],.splash{background:var(--action)!important;color:#fff}
.splash{background:var(--bg)!important}
.console .nav-item.active{background:rgba(255,255,255,.1)!important;color:#fff}
.sk,.skel{background:var(--line-2)!important}
/* buttons: navy, square-ish like the site */
.btn-primary,.btn.primary,button.primary,.btn-brand,.sy-btn,[class*="btn-grad"]{background:var(--action)!important;color:#fff!important;border:0;border-radius:11px;box-shadow:none!important;font-weight:500}
.btn-primary:hover,.btn.primary:hover,button.primary:hover,.sy-btn:hover{background:var(--action-2)!important}
:focus-visible{outline:2px solid #4946fd;outline-offset:2px}
input:focus,select:focus,textarea:focus{border-color:#4946fd!important;box-shadow:0 0 0 3px rgba(73,70,253,.15)!important}
.card,.panel,.syn-card{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:none;background:#fff}

/* ---- Billing period (portal + configurator): clear heading, flat segmented control ---- */
.cfg-opts--3,.cfg-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:0;border:1px solid #e0e0e0;border-radius:11px;background:#fff;overflow:hidden}
.cfg-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:0;border-right:1px solid #e0e0e0;background:#fff;border-radius:0;box-shadow:none;cursor:pointer;text-align:left;color:#0b0826}
.cfg-opt:last-child{border-right:0}
.cfg-opt .cfg-opt-t{font-weight:500;font-size:14px}
.cfg-opt .cfg-opt-p{font-size:12px;color:#6f7279;background:none;padding:0}
.cfg-opt.is-on{background:var(--action);color:#fff;box-shadow:none}
.cfg-opt.is-on .cfg-opt-p{color:#c9c6ff}
.cfg-opt:hover:not(.is-on){background:#f5f7f5}

/* ---- Plan cards: same anatomy as the marketing pricing cards ---- */
.opt-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.opt-card.plan-card,.opt-card{border:1px solid #e0e0e0;border-radius:16px;background:#fff;padding:24px;gap:0;box-shadow:none;align-items:stretch}
.opt-card:hover{border-color:#0b0826}
.opt-card:has(input:checked){border:2px solid #0b0826;background:#fff;box-shadow:none;padding:23px}
.opt-card .oc-name{font-size:22px;font-weight:500;line-height:1.25;color:#0b0826}
.opt-card .oc-desc{margin-top:8px;font-size:14px;color:#6f7279;line-height:1.45}
.opt-card .oc-price{margin-top:18px;font-family:var(--font-d);font-size:36px;font-weight:500;color:#0b0826;line-height:1}
.opt-card .oc-price small{font-size:14px;color:#6f7279;font-weight:400;margin-left:4px}
.opt-card .oc-note{margin-top:8px;font-size:12.5px;color:#6f7279}
.opt-card .oc-inc{margin-top:18px;padding-top:16px;border-top:1px solid #ebebeb;font-size:13px;font-weight:500;color:#0b0826}
.opt-card .oc-feat{display:flex;align-items:flex-start;gap:8px;margin-top:9px;font-size:14px;color:#0b0826;font-weight:400}
.opt-card .oc-feat svg,.opt-card .oc-feat [data-lucide]{width:16px;height:16px;margin-top:2px;color:#4946fd}
.opt-card .oc-cta{margin-top:20px;text-align:center;padding:11px 14px;border-radius:11px;background:var(--action);color:#fff;font-weight:500;font-size:14px}
.opt-card:not(:has(input:checked)) .oc-cta{background:#fff;color:#0b0826;box-shadow:inset 0 0 0 1px var(--action)}