:root{
  --bg:#0b0f14;
  --panel:#0f1622;
  --text:#e8eef6;
  --muted:rgba(232,238,246,.68);
  --soft:rgba(232,238,246,.82);
  --border:rgba(255,255,255,.10);
  --radius:16px;
  --pad:16px;
  --shadow:0 10px 30px rgba(0,0,0,.45);

  --accent:#60a5fa;
  --accent2:#34d399;
  --warn:#fbbf24;
  --danger:#fb7185;
}

html,body{
  height:100%;
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

*{box-sizing:border-box;}

a{color:inherit;}
a:hover{opacity:.95;}
a:visited{color:inherit;}

.shell{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.page{
  flex:1;
  padding:20px 0 40px;
}

.container{
  width:min(1100px, calc(100% - 28px));
  margin:0 auto;
}

.content{
  padding-top:12px;
}

.hr{
  height:1px;
  background:var(--border);
  margin:16px 0;
}

.muted{color:var(--muted);}
.sub{color:var(--muted);margin-top:6px;}

.row{
  display:flex;
  gap:12px;
  align-items:center;
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr;}
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr;}
}

.card{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
}

.panel{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  background:rgba(255,255,255,.03);
  color:var(--soft);
  font-weight:700;
  font-size:12px;
}

:root {
  --btn-bg: transparent;
  --btn-fg: var(--text, #e5e7eb);
  --btn-border: rgba(255,255,255,0.16);

  --btn-primary-bg: #2563eb;
  --btn-primary-fg: #ffffff;
  --btn-primary-border: #2563eb;

  --btn-secondary-bg: rgba(255,255,255,0.08);
  --btn-secondary-fg: var(--text, #e5e7eb);
  --btn-secondary-border: rgba(255,255,255,0.18);

  --btn-neutral-bg: #64748b;
  --btn-neutral-fg: #ffffff;
  --btn-neutral-border: #64748b;

  --btn-success-bg: #16a34a;
  --btn-success-fg: #ffffff;
  --btn-success-border: #16a34a;

  --btn-warn-bg: #d97706;
  --btn-warn-fg: #ffffff;
  --btn-warn-border: #d97706;

  --btn-danger-bg: #dc2626;
  --btn-danger-fg: #ffffff;
  --btn-danger-border: #dc2626;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-weight:600;
  text-decoration:none;
}

.btn.neutral { background: var(--btn-neutral-bg) !important; border-color: var(--btn-neutral-border) !important; color: var(--btn-neutral-fg) !important; }
.btn.success { background: var(--btn-success-bg) !important; border-color: var(--btn-success-border) !important; color: var(--btn-success-fg) !important; }
.btn.warn { background: var(--btn-warn-bg) !important; border-color: var(--btn-warn-border) !important; color: var(--btn-warn-fg) !important; }
.btn.danger { background: var(--btn-danger-bg) !important; border-color: var(--btn-danger-border) !important; color: var(--btn-danger-fg) !important; }


.btn:hover{
  background:rgba(255,255,255,.07);
}


.btn.primary:hover{
  background:rgba(96,165,250,.24);
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 12px;
  background:rgba(255,255,255,.04);
  text-decoration:none;
  color:var(--text);
  font-weight:750;
}

.button.primary{
  border-color:rgba(96,165,250,.55);
  background:rgba(96,165,250,.18);
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

/* ---------- Header ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--border);
  background:rgba(11,15,20,.86);
  backdrop-filter:saturate(140%) blur(10px);
}

.main-nav{
  width:min(1100px, calc(100% - 28px));
  margin:0 auto;
  padding:12px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

 
.site-header .nav-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;justify-content:flex-start;}
.site-header #navAccount{margin-left:auto;}
(max-width: 900px){
  .site-header .nav-links{ justify-content:flex-start; }
}

 (max-width: 720px){
  .main-nav{ flex-wrap:wrap; }
  .brand{ width:100%; }

.brand-e{color:#ED1C24;}

body[data-page="home"] .site-header .brand{display:none;}

.site-header #navAccount{ margin-left:auto; }
}


.site-header .nav-links{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}




.site-header .nav-links > *{ flex:0 0 auto; }

.site-header .brand{ flex:0 0 auto; }


.brand{
  font-weight:900;
  letter-spacing:-.02em;
  text-decoration:none;
  color:var(--text);
  padding:8px 10px;
  border-radius:12px;
}

.brand:hover{
  background:rgba(255,255,255,.05);
}

.nav-links{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav-link{
  text-decoration:none;
  color:var(--text);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
}

.nav-link:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.06);
}

.nav-emphasis{
  border-color:rgba(251,191,36,.25);
  background:rgba(251,191,36,.08);
}

/* Buttons in header should never render as white default blocks */
.site-header button{
  font:inherit;
  color:inherit;
}

/* ---------- Basic form tokens ---------- */

.label{
  display:block;
  font-weight:800;
  margin:0 0 6px;
}

.input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
}

.input:focus{
  border-color:rgba(96,165,250,.55);
}

.kbd{
  display:inline-block;
  padding:2px 8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  font-weight:800;
  font-size:12px;
}

.alert{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.03);
  color:var(--soft);
}

.alert.warn{
  border-color:rgba(251,191,36,.26);
  background:rgba(251,191,36,.08);
}

/* ---------- Light mode (toggle via data-theme on html or body) ---------- */
html[data-theme="light"], body[data-theme="light"]{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --text:#0b1220;
  --muted:rgba(11,18,32,.70);
  --soft:rgba(11,18,32,.86);
  --border:rgba(11,18,32,.12);
  --shadow:0 10px 26px rgba(8,10,14,.10);
}

html[data-theme="light"] .site-header,
body[data-theme="light"] .site-header{
  background:rgba(246,247,251,.86);
}

.rfo-card{border:1px solid #2f6fed33;background:#2f6fed0d}

/* ---- Canonical Button + Header Overrides (uniform pills) ---- */
.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 100ms ease;
}

.btn:hover,
.button:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

.btn:active,
.button:active {
  transform: translateY(1px);
}

.btn.primary,
.button.primary {
  background: rgba(96, 165, 250, 0.2);
  border-color: rgba(96, 165, 250, 0.6);
  color: #eaf2ff;
}

.btn.primary:hover,
.button.primary:hover {
  background: rgba(96, 165, 250, 0.3);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 15, 20, 0.9);
  backdrop-filter: saturate(140%) blur(10px);
}

.main-nav {
  width: min(1100px, calc(100% - 28px));
  margin: 0 auto;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.brand {
  font-weight: 900;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 12px;
}

.brand-e {
  color: #ed1c24;
}

.site-header .nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.site-header #navAccount {
  margin-left: 4px;
}

@media (max-width: 900px) {
  .main-nav {
    width: calc(100% - 20px);
    padding: 8px 0;
  }

  .site-header .nav-links {
    margin-left: 0;
  }
}
.dvro-card{border:1px solid #6f42c133;background:#6f42c10d}
.exparte-card{border:1px solid #dc354533;background:#dc35450d}

/* Button Canon Aliases (stability layer) */
.ss-btn { composes: btn; }
.ss-btn-primary { composes: btn primary; }
.ss-btn-secondary { composes: btn secondary; }
.ss-btn-neutral { composes: btn neutral; }
.ss-btn-success { composes: btn success; }
.ss-btn-warn { composes: btn warn; }
.ss-btn-danger { composes: btn danger; }

/* CSS does not support 'composes' natively in plain CSS; provide real aliases */
.ss-btn { }
.ss-btn-primary, .ss-btn-secondary, .ss-btn-neutral, .ss-btn-success, .ss-btn-warn, .ss-btn-danger { }

.ss-btn,
.ss-btn-primary,
.ss-btn-secondary,
.ss-btn-neutral,
.ss-btn-success,
.ss-btn-warn,
.ss-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--btn-border);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: transform .02s ease, background .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease;
}

.ss-btn:hover,
.ss-btn-primary:hover,
.ss-btn-secondary:hover,
.ss-btn-neutral:hover,
.ss-btn-success:hover,
.ss-btn-warn:hover,
.ss-btn-danger:hover {
  transform: translateY(-1px);
}

.ss-btn { background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-fg) !important; border-color: var(--btn-secondary-border) !important; }
.ss-btn-primary { background: var(--btn-primary-bg) !important; color: var(--btn-primary-fg) !important; border-color: var(--btn-primary-border) !important; }
.ss-btn-secondary { background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-fg) !important; border-color: var(--btn-secondary-border) !important; }
.ss-btn-neutral { background: var(--btn-neutral-bg) !important; color: var(--btn-neutral-fg) !important; border-color: var(--btn-neutral-border) !important; }
.ss-btn-success { background: var(--btn-success-bg) !important; color: var(--btn-success-fg) !important; border-color: var(--btn-success-border) !important; }
.ss-btn-warn { background: var(--btn-warn-bg) !important; color: var(--btn-warn-fg) !important; border-color: var(--btn-warn-border) !important; }
.ss-btn-danger { background: var(--btn-danger-bg) !important; color: var(--btn-danger-fg) !important; border-color: var(--btn-danger-border) !important; }

/* Button Canon Aliases (stability layer)
   Purpose: legacy .ss-btn* renders identically to .btn variants.
*/
.ss-btn,
.ss-btn-primary,
.ss-btn-secondary,
.ss-btn-neutral,
.ss-btn-success,
.ss-btn-warn,
.ss-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: transform .02s ease, background .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease;
}

.ss-btn:hover,
.ss-btn-primary:hover,
.ss-btn-secondary:hover,
.ss-btn-neutral:hover,
.ss-btn-success:hover,
.ss-btn-warn:hover,
.ss-btn-danger:hover {
  transform: translateY(-1px);
}

/* Match existing .btn palette */
.ss-btn,
.ss-btn-secondary { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.18) !important; color: #e5e7eb !important; }
.ss-btn-primary { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }
.ss-btn-neutral { background: #64748b !important; border-color: #64748b !important; color: #fff !important; }
.ss-btn-success { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
.ss-btn-warn { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; }
.ss-btn-danger { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }


/* ---------- BUTTON CANON OVERRIDE (do not edit lightly) ---------- */
/* Goal: all .btn render as consistent pill buttons across site, regardless of earlier CSS. */

a.btn,
button.btn,
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--btn-border) !important;
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-fg) !important;
  text-decoration: none !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform .02s ease, background .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease !important;
}

a.btn:hover,
button.btn:hover,
.btn:hover {
  transform: translateY(-1px) !important;
}

.btn.primary { background: var(--btn-primary-bg) !important; border-color: var(--btn-primary-border) !important; color: var(--btn-primary-fg) !important; }
.btn.secondary { background: var(--btn-secondary-bg) !important; border-color: var(--btn-secondary-border) !important; color: var(--btn-secondary-fg) !important; }
.btn.neutral { background: var(--btn-neutral-bg) !important; border-color: var(--btn-neutral-border) !important; color: var(--btn-neutral-fg) !important; }
.btn.success { background: var(--btn-success-bg) !important; border-color: var(--btn-success-border) !important; color: var(--btn-success-fg) !important; }
.btn.warn { background: var(--btn-warn-bg) !important; border-color: var(--btn-warn-border) !important; color: var(--btn-warn-fg) !important; }
.btn.danger { background: var(--btn-danger-bg) !important; border-color: var(--btn-danger-border) !important; color: var(--btn-danger-fg) !important; }

/* Alias compatibility (if any page still uses .button) */
a.button,
button.button,
.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--btn-border) !important;
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-fg) !important;
  text-decoration: none !important;
  font-weight: 750 !important;
}

.button.primary { background: var(--btn-primary-bg) !important; border-color: var(--btn-primary-border) !important; color: var(--btn-primary-fg) !important; }
/* ---------- END BUTTON CANON OVERRIDE ---------- */

/* === SS BUBBLE CANON START === */
/* Canon: PURE GLASS bubbles everywhere.
   - No rings (no colored ring band)
   - Color is a gentle overall tint + faint glow (still glass)
   - Avoid warm hues near red/orange/coral/yellow
   - Red reserved exclusively for the Red E brand mark */

/* Tokens */
:root{
  --ss-bub-pad-y: 8px;
  --ss-bub-pad-x: 14px;
  --ss-bub-radius: 999px;

  --ss-glass-hi: rgba(255,255,255,.22);
  --ss-glass-mid: rgba(255,255,255,.10);
  --ss-glass-edge: rgba(35,35,40,.70);

  /* Default */
  --ss-glass-tint: rgba(110,120,135,.22);
  --ss-glass-glow: rgba(110,120,135,.20);

  /* Palette tokens (30) — SAFE cool/neutral only */
  --ss-tint-graphite: rgba( 90, 90, 95,.22);  --ss-glow-graphite: rgba( 90, 90, 95,.18);
  --ss-tint-smoke:    rgba(115,125,140,.22);  --ss-glow-smoke:    rgba(115,125,140,.18);
  --ss-tint-steel:    rgba(140,150,165,.22);  --ss-glow-steel:    rgba(140,150,165,.18);
  --ss-tint-slate:    rgba( 85,105,135,.22);  --ss-glow-slate:    rgba( 85,105,135,.18);
  --ss-tint-ash:      rgba(150,155,160,.18);  --ss-glow-ash:      rgba(150,155,160,.14);
  --ss-tint-ink:      rgba( 70, 80, 95,.22);  --ss-glow-ink:      rgba( 70, 80, 95,.18);

  --ss-tint-cyan:     rgba( 70,210,255,.22);  --ss-glow-cyan:     rgba( 70,210,255,.18);
  --ss-tint-ice:      rgba(155,240,255,.18);  --ss-glow-ice:      rgba(155,240,255,.14);
  --ss-tint-aqua:     rgba( 80,240,220,.22);  --ss-glow-aqua:     rgba( 80,240,220,.18);
  --ss-tint-seafoam:  rgba(120,255,225,.18);  --ss-glow-seafoam:  rgba(120,255,225,.14);
  --ss-tint-azure:    rgba( 95,190,255,.22);  --ss-glow-azure:    rgba( 95,190,255,.18);
  --ss-tint-glacier:  rgba(170,220,255,.18);  --ss-glow-glacier:  rgba(170,220,255,.14);

  --ss-tint-teal:     rgba( 55,165,150,.22);  --ss-glow-teal:     rgba( 55,165,150,.18);
  --ss-tint-mint:     rgba(110,230,170,.18);  --ss-glow-mint:     rgba(110,230,170,.14);
  --ss-tint-jade:     rgba( 70,190,145,.22);  --ss-glow-jade:     rgba( 70,190,145,.18);
  --ss-tint-emerald:  rgba( 55,190,110,.22);  --ss-glow-emerald:  rgba( 55,190,110,.18);
  --ss-tint-forest:   rgba( 60,130, 90,.22);  --ss-glow-forest:   rgba( 60,130, 90,.18);
  --ss-tint-sage:     rgba(140,200,160,.18);  --ss-glow-sage:     rgba(140,200,160,.14);

  --ss-tint-sky:      rgba(110,185,255,.22);  --ss-glow-sky:      rgba(110,185,255,.18);
  --ss-tint-blue:     rgba( 95,150,255,.22);  --ss-glow-blue:     rgba( 95,150,255,.18);
  --ss-tint-cobalt:   rgba( 80,120,255,.22);  --ss-glow-cobalt:   rgba( 80,120,255,.18);
  --ss-tint-denim:    rgba( 85,115,175,.22);  --ss-glow-denim:    rgba( 85,115,175,.18);
  --ss-tint-navy:     rgba( 60, 85,145,.22);  --ss-glow-navy:     rgba( 60, 85,145,.18);
  --ss-tint-lapis:    rgba( 75,110,210,.22);  --ss-glow-lapis:    rgba( 75,110,210,.18);

  --ss-tint-violet:   rgba(165,120,255,.22);  --ss-glow-violet:   rgba(165,120,255,.18);
  --ss-tint-lilac:    rgba(200,175,255,.18);  --ss-glow-lilac:    rgba(200,175,255,.14);
  --ss-tint-amethyst: rgba(145,105,230,.22);  --ss-glow-amethyst: rgba(145,105,230,.18);
  --ss-tint-plum:     rgba(120, 95,175,.22);  --ss-glow-plum:     rgba(120, 95,175,.18);
  --ss-tint-indigo:   rgba(110,120,255,.22);  --ss-glow-indigo:   rgba(110,120,255,.18);
  --ss-tint-iris:     rgba(155,140,255,.18);  --ss-glow-iris:     rgba(155,140,255,.14);
}

/* Canon bubble */
.ss-bubble,
a.ss-bubble,
button.ss-bubble{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: var(--ss-bub-pad-y) var(--ss-bub-pad-x);
  border-radius: var(--ss-bub-radius);
  font-weight: 800;
  letter-spacing: .15px;
  text-decoration:none;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 3px 10px rgba(0,0,0,.35),
    0 0 18px var(--ss-glass-glow);

  color:#f2f3f5;
  background:
    radial-gradient(circle at 50% 50%,
      var(--ss-glass-hi) 0%,
      var(--ss-glass-mid) 46%,
      var(--ss-glass-tint) 80%,
      var(--ss-glass-edge) 100%);
}

/* Palette classes */
.ss-glass-graphite{ --ss-glass-tint: var(--ss-tint-graphite); --ss-glass-glow: var(--ss-glow-graphite); }
.ss-glass-smoke   { --ss-glass-tint: var(--ss-tint-smoke);    --ss-glass-glow: var(--ss-glow-smoke); }
.ss-glass-steel   { --ss-glass-tint: var(--ss-tint-steel);    --ss-glass-glow: var(--ss-glow-steel); }
.ss-glass-slate   { --ss-glass-tint: var(--ss-tint-slate);    --ss-glass-glow: var(--ss-glow-slate); }
.ss-glass-ash     { --ss-glass-tint: var(--ss-tint-ash);      --ss-glass-glow: var(--ss-glow-ash); }
.ss-glass-ink     { --ss-glass-tint: var(--ss-tint-ink);      --ss-glass-glow: var(--ss-glow-ink); }

.ss-glass-cyan    { --ss-glass-tint: var(--ss-tint-cyan);     --ss-glass-glow: var(--ss-glow-cyan); }
.ss-glass-ice     { --ss-glass-tint: var(--ss-tint-ice);      --ss-glass-glow: var(--ss-glow-ice); }
.ss-glass-aqua    { --ss-glass-tint: var(--ss-tint-aqua);     --ss-glass-glow: var(--ss-glow-aqua); }
.ss-glass-seafoam { --ss-glass-tint: var(--ss-tint-seafoam);  --ss-glass-glow: var(--ss-glow-seafoam); }
.ss-glass-azure   { --ss-glass-tint: var(--ss-tint-azure);    --ss-glass-glow: var(--ss-glow-azure); }
.ss-glass-glacier { --ss-glass-tint: var(--ss-tint-glacier);  --ss-glass-glow: var(--ss-glow-glacier); }

.ss-glass-teal    { --ss-glass-tint: var(--ss-tint-teal);     --ss-glass-glow: var(--ss-glow-teal); }
.ss-glass-mint    { --ss-glass-tint: var(--ss-tint-mint);     --ss-glass-glow: var(--ss-glow-mint); }
.ss-glass-jade    { --ss-glass-tint: var(--ss-tint-jade);     --ss-glass-glow: var(--ss-glow-jade); }
.ss-glass-emerald { --ss-glass-tint: var(--ss-tint-emerald);  --ss-glass-glow: var(--ss-glow-emerald); }
.ss-glass-forest  { --ss-glass-tint: var(--ss-tint-forest);   --ss-glass-glow: var(--ss-glow-forest); }
.ss-glass-sage    { --ss-glass-tint: var(--ss-tint-sage);     --ss-glass-glow: var(--ss-glow-sage); }

.ss-glass-sky     { --ss-glass-tint: var(--ss-tint-sky);      --ss-glass-glow: var(--ss-glow-sky); }
.ss-glass-blue    { --ss-glass-tint: var(--ss-tint-blue);     --ss-glass-glow: var(--ss-glow-blue); }
.ss-glass-cobalt  { --ss-glass-tint: var(--ss-tint-cobalt);   --ss-glass-glow: var(--ss-glow-cobalt); }
.ss-glass-denim   { --ss-glass-tint: var(--ss-tint-denim);    --ss-glass-glow: var(--ss-glow-denim); }
.ss-glass-navy    { --ss-glass-tint: var(--ss-tint-navy);     --ss-glass-glow: var(--ss-glow-navy); }
.ss-glass-lapis   { --ss-glass-tint: var(--ss-tint-lapis);    --ss-glass-glow: var(--ss-glow-lapis); }

.ss-glass-violet  { --ss-glass-tint: var(--ss-tint-violet);   --ss-glass-glow: var(--ss-glow-violet); }
.ss-glass-lilac   { --ss-glass-tint: var(--ss-tint-lilac);    --ss-glass-glow: var(--ss-glow-lilac); }
.ss-glass-amethyst{ --ss-glass-tint: var(--ss-tint-amethyst); --ss-glass-glow: var(--ss-glow-amethyst); }
.ss-glass-plum    { --ss-glass-tint: var(--ss-tint-plum);     --ss-glass-glow: var(--ss-glow-plum); }
.ss-glass-indigo  { --ss-glass-tint: var(--ss-tint-indigo);   --ss-glass-glow: var(--ss-glow-indigo); }
.ss-glass-iris    { --ss-glass-tint: var(--ss-tint-iris);     --ss-glass-glow: var(--ss-glow-iris); }

/* Semantic defaults for existing variants */
.btn.primary, .button.primary { --ss-glass-tint: var(--ss-tint-cobalt);  --ss-glass-glow: var(--ss-glow-cobalt); }
.btn.secondary, .button.secondary { --ss-glass-tint: var(--ss-tint-smoke); --ss-glass-glow: var(--ss-glow-smoke); }
.btn.success, .button.success { --ss-glass-tint: var(--ss-tint-emerald); --ss-glass-glow: var(--ss-glow-emerald); }
.btn.neutral, .button.neutral { --ss-glass-tint: var(--ss-tint-slate);   --ss-glass-glow: var(--ss-glow-slate); }

/* === SS BUBBLE CANON END === */






/* === SS FONT CANON START === */
:root{
  --ss-font-geo: Montserrat, Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html, body{
  font-family: var(--ss-font-geo);
}
/* === SS FONT CANON END === */

/* ===============================
   Glass Pills + Peace Path Spa Set
   (standard .btn/.button shape, glass tint/glow)
   =============================== */

.btn.ss-glass, .button.ss-glass{
  border-color: rgba(255,255,255,.18);
  background: radial-gradient(120% 140% at 18% 12%,
      var(--ss-glass-hi, rgba(255,255,255,.22)) 0%,
      var(--ss-glass-mid, rgba(255,255,255,.10)) 46%,
      var(--ss-glass-tint, rgba(110,120,135,.22)) 80%,
      var(--ss-glass-edge, rgba(35,35,40,.70)) 100%);
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 18px var(--ss-glass-glow, rgba(110,120,135,.20));
}

.btn.ss-glass:hover, .button.ss-glass:hover{
  background: radial-gradient(120% 140% at 18% 12%,
      rgba(255,255,255,.26) 0%,
      rgba(255,255,255,.12) 46%,
      var(--ss-glass-tint, rgba(110,120,135,.22)) 80%,
      var(--ss-glass-edge, rgba(35,35,40,.70)) 100%);
}

/* Peace Path “spa” subset (exact hexes you listed) */
.pp-warm-base    { --ss-glass-tint: rgba(246,241,232,.34); --ss-glass-glow: rgba(246,241,232,.22); }
.pp-soft-surface { --ss-glass-tint: rgba(232,223,210,.34); --ss-glass-glow: rgba(232,223,210,.22); }
.pp-card-alt     { --ss-glass-tint: rgba(215,203,183,.34); --ss-glass-glow: rgba(215,203,183,.22); }
.pp-warm-neutral { --ss-glass-tint: rgba(184,169,143,.34); --ss-glass-glow: rgba(184,169,143,.22); }
.pp-calm-slate   { --ss-glass-tint: rgba(111,124,132,.26); --ss-glass-glow: rgba(111,124,132,.18); }
.pp-court-anchor { --ss-glass-tint: rgba(47,58,64,.22);    --ss-glass-glow: rgba(47,58,64,.16); }
.pp-warm-accent  { --ss-glass-tint: rgba(201,166,107,.28); --ss-glass-glow: rgba(201,166,107,.18); }


/* =========================
   Peace Path palette tokens
   (scoped utility classes)
   ========================= */
:root{
  --pp-warm-base:#F6F1E8;
  --pp-soft-surface:#E8DFD2;
  --pp-card-alt:#D7CBB7;
  --pp-warm-neutral:#B8A98F;
  --pp-calm-slate:#6F7C84;
  --pp-court-anchor:#2F3A40;
  --pp-warm-accent:#C9A66B;
}

/* Apply PP tint to ss-glass buttons (NO red/orange) */
.btn.ss-glass.pp-warm-base{ --ss-glassTint: var(--pp-warm-base); }
.btn.ss-glass.pp-soft-surface{ --ss-glassTint: var(--pp-soft-surface); }
.btn.ss-glass.pp-card-alt{ --ss-glassTint: var(--pp-card-alt); }
.btn.ss-glass.pp-warm-neutral{ --ss-glassTint: var(--pp-warm-neutral); }
.btn.ss-glass.pp-calm-slate{ --ss-glassTint: var(--pp-calm-slate); }
.btn.ss-glass.pp-court-anchor{ --ss-glassTint: var(--pp-court-anchor); }
.btn.ss-glass.pp-warm-accent{ --ss-glassTint: var(--pp-warm-accent); }



.btn.primary, .button.primary {
  background: rgba(120, 140, 255, 0.18);
  border: 1px solid rgba(120, 140, 255, 0.45);
  color: inherit;
}


/* DEBUG: ensure app nav is clickable above overlays */
#btnPrev, #btnNext, #btnExit {
  position: relative;
  z-index: 2147483647;
  pointer-events: auto !important;
}

/* NAV: left/right behavior */
.site-header .nav-links{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%; }
.site-header #navAccount{ margin-left:auto; }

/* HOME: hide header brand + logout no matter what JS does */
body[data-page="home"] .site-header .brand{ display:none !important; }
body[data-page="home"] .site-header #navLogout{ display:none !important; }