/* =========================================================
AI Pip Matrix — Soft Modern · electric violet primary
========================================================= */
:root{
/* LIGHT (default) */
--bg:#FAF6F1;
--bg-2:#F4EDE2;
--paper:#FFFFFF;
--paper-warm:#FBF6EE;
--ink:#0F0F12;
--ink-2:#26262C;
--muted:#6B6B72;
--muted-2:#9B9BA3;
--line:rgba(15,15,18,.08);
--line-2:rgba(15,15,18,.14);
/* accent palette */
--violet:#6E48F5;
--violet-2:#5536D8;
--violet-soft:#EFE9FE;
--emerald:#00C880;
--emerald-2:#02A36B;
--emerald-soft:#DCF5EA;
--coral:#FF7A45;
--coral-soft:#FFE6D9;
--amber:#FFCB47;
--amber-soft:#FFF1C9;
--rose:#F254A0;
--rose-soft:#FCE1EF;
--sky:#2EA8FF;
--sky-soft:#DDEEFD;
--slate:#64748B;
--slate-soft:#E2E8F0;
--grad-hero: linear-gradient(135deg, #EFE9FE 0%, #FFE6D9 50%, #FFF1C9 100%);
--grad-violet: linear-gradient(135deg, #8A6CFB 0%, #6E48F5 50%, #5536D8 100%);
--grad-aurora: conic-gradient(from 200deg at 50% 50%, #EFE9FE, #FCE1EF, #FFE6D9, #DCF5EA, #EFE9FE);
--grad-card: linear-gradient(180deg, #FFFFFF 0%, #FDFAF5 100%);
/* radii */
--r-xl: 32px;
--r-lg: 24px;
--r-md: 16px;
--r-sm: 10px;
--r-pill: 999px;
/* shadows */
--shadow-xs: 0 1px 2px rgba(15,15,18,.04);
--shadow-sm: 0 2px 4px rgba(15,15,18,.04), 0 6px 14px rgba(15,15,18,.05);
--shadow-md: 0 4px 8px rgba(15,15,18,.05), 0 16px 32px rgba(15,15,18,.08);
--shadow-lg: 0 6px 12px rgba(15,15,18,.06), 0 30px 60px rgba(15,15,18,.12);
--shadow-violet: 0 8px 24px rgba(110,72,245,.30);
--shadow-violet-soft: 0 4px 14px rgba(110,72,245,.18);
/* fonts */
--font: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-display: 'Sora', 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--selection: rgba(110,72,245,.20);
}
[data-theme="dark"]{
--bg:#0B0A12;
--bg-2:#13111C;
--paper:#181625;
--paper-warm:#1B192A;
--ink:#F1EEFA;
--ink-2:#DAD4EA;
--muted:#9A93B5;
--muted-2:#6C6685;
--line:rgba(241,238,250,.10);
--line-2:rgba(241,238,250,.16);
--violet:#9F84FF;
--violet-2:#7C5DFB;
--violet-soft:rgba(159,132,255,.12);
--emerald:#36DEA0;
--emerald-2:#1FB783;
--emerald-soft:rgba(54,222,160,.12);
--coral:#FF9166;
--coral-soft:rgba(255,145,102,.12);
--amber:#FFD566;
--amber-soft:rgba(255,213,102,.12);
--rose:#FF7AB8;
--rose-soft:rgba(255,122,184,.12);
--sky:#5DBEFF;
--sky-soft:rgba(93,190,255,.14);
--slate:#94A3B8;
--slate-soft:rgba(148,163,184,.14);
--grad-hero: linear-gradient(135deg, rgba(159,132,255,.18) 0%, rgba(255,145,102,.15) 50%, rgba(255,213,102,.14) 100%);
--grad-violet: linear-gradient(135deg, #B49BFF 0%, #9F84FF 50%, #7C5DFB 100%);
--grad-aurora: conic-gradient(from 200deg at 50% 50%, rgba(159,132,255,.20), rgba(255,122,184,.18), rgba(255,145,102,.18), rgba(54,222,160,.16), rgba(159,132,255,.20));
--grad-card: linear-gradient(180deg, var(--paper) 0%, var(--bg-2) 100%);
--shadow-xs: 0 1px 2px rgba(0,0,0,.5);
--shadow-sm: 0 2px 4px rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.5);
--shadow-md: 0 4px 8px rgba(0,0,0,.4), 0 16px 32px rgba(0,0,0,.55);
--shadow-lg: 0 6px 12px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.65);
--selection: rgba(159,132,255,.30);
}
/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ scroll-behavior:smooth; background: var(--bg); overflow-x: clip }
body{
font-family: var(--font);
color: var(--ink);
background: var(--bg);
min-height: 100vh;
min-height: 100dvh;
line-height: 1.55;
font-size: 16px;
font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition: background-color .35s ease, color .35s ease;
font-feature-settings: "cv11";
letter-spacing: -.005em;
}
::selection{ background: var(--selection); color: var(--ink) }
a{ color: var(--violet); text-decoration: none; font-weight: 600; transition: color .2s ease }
a:hover{ color: var(--violet-2) }
[data-theme="dark"] a{ color: var(--violet) }
img,svg{ max-width:100%; display:block }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 800; letter-spacing:-.02em; line-height: 1.04; margin: 0 }
p{ margin: 0 0 1em }
button{ font-family: inherit; cursor: pointer }
.container{ max-width: 1240px; margin: 0 auto; padding: 0 28px; position: relative }
.narrow{ max-width: 820px }
.wider{ max-width: 1400px }
.mono{ font-family: var(--font-mono); font-size: 12.5px; font-feature-settings: "tnum","lnum" }
.muted{ color: var(--muted) }
/* Soft animated backdrop */
.aurora{
position: fixed; inset: -10%; pointer-events: none; z-index: 0;
background: var(--grad-aurora);
filter: blur(80px) saturate(115%);
opacity: .55;
animation: auroraSpin 40s linear infinite;
}
@keyframes auroraSpin{ to{ transform: rotate(360deg) } }
[data-theme="dark"] .aurora{ opacity: 1 }
main, header, footer{ position: relative; z-index: 1 }
/* ---------- Announcement bar ---------- */
.announce{
background: var(--ink); color: var(--paper);
padding: 10px 0; text-align: center; position: relative; z-index: 2;
font-size: 13px; font-weight: 500; letter-spacing: -.005em;
}
.announce a{ color: var(--amber); margin-left: 10px; border-bottom: 1px dashed var(--amber); padding-bottom: 1px }
/* ---------- Header ---------- */
.site-header{
position: -webkit-sticky;
position: sticky;
top: 0; z-index: 50;
/* Frosted glass: translucent over the aurora with backdrop blur */
background: color-mix(in srgb, var(--bg) 72%, transparent);
backdrop-filter: saturate(160%) blur(16px);
-webkit-backdrop-filter: saturate(160%) blur(16px);
border-bottom: 1px solid var(--line);
/* extend background into the iOS notch area */
padding-top: env(safe-area-inset-top, 0);
}
@supports not (backdrop-filter: blur(1px)){
.site-header{ background: var(--bg) }
}
.nav{ display: flex; align-items: center; gap: 22px; height: 72px; min-height: 72px }
/* Full-bleed top bar (end-to-end, no container max-width) */
.nav-bar{
width: 100%;
padding: 0 28px;
justify-content: space-between;
gap: 16px;
}
.nav-bar .nav-l{ display: flex; align-items: center; gap: 14px; min-width: 0 }
.nav-bar .nav-cta{ display: flex; align-items: center; gap: 10px; flex-shrink: 0 }
/* Context flag chip next to the brand */
.brand-flag{
display: inline-flex; align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
margin-left: 4px;
line-height: 1;
}
.flag-admin{
background: color-mix(in srgb, var(--coral) 14%, var(--paper));
color: var(--coral);
border: 1px solid color-mix(in srgb, var(--coral) 30%, transparent);
}
.flag-member{
background: color-mix(in srgb, var(--emerald) 14%, var(--paper));
color: var(--emerald-2);
border: 1px solid color-mix(in srgb, var(--emerald) 30%, transparent);
}
/* Front: align top-bar content to the body container width (capped, centered). */
.site-header--front .nav-bar{ max-width: 1240px; margin: 0 auto }
/* Subtle per-context border accent on the header */
.site-header--admin{ border-bottom-color: color-mix(in srgb, var(--coral) 25%, var(--line)) }
.site-header--member{ border-bottom-color: color-mix(in srgb, var(--emerald) 25%, var(--line)) }
@media (max-width: 640px){
.nav-bar{ padding: 0 16px }
.brand-flag{ display: none }
}
.brand{ display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 800 }
.brand-logo{
width: 56px; height: 56px; object-fit: contain;
background: transparent; border-radius: 12px;
padding: 0; box-shadow: none;
border: none;
}
.brand-text{ font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -.015em }
.nav-links{ display: flex; gap: 6px; margin-left: 18px }
.nav-links a{
color: var(--muted); font-weight: 600; font-size: 14.5px;
padding: 8px 14px; border-radius: var(--r-pill);
transition: all .2s ease;
}
.nav-links a:hover, .nav-links a.active{ color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent) }
.nav-cta{ display: flex; gap: 8px; align-items: center; margin-left: auto }
.nav-toggle{
display:none; background: var(--paper); color: var(--ink);
border:1px solid var(--line-2); border-radius: var(--r-pill); padding: 8px 14px;
font-size: 16px; box-shadow: var(--shadow-xs);
}
/* Sidebar drawer toggle (only renders on panel pages, only visible on mobile) */
.sidebar-toggle{
display: none;
width: 40px; height: 40px;
align-items: center; justify-content: center;
background: var(--paper); color: var(--ink);
border: 1px solid var(--line-2);
border-radius: 12px;
cursor: pointer;
box-shadow: var(--shadow-xs);
flex-shrink: 0; margin-right: 4px;
transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.sidebar-toggle:hover{ border-color: var(--violet); color: var(--violet) }
.sidebar-toggle:active{ transform: scale(.95) }
body.panel-layout.sidebar-open .sidebar-toggle svg{ /* could rotate to X if desired */ }
/* Sidebar backdrop (only used when drawer is open on mobile) */
.sidebar-backdrop{
position: fixed; inset: 0;
background: rgba(8, 6, 16, .50);
opacity: 0; pointer-events: none;
transition: opacity .25s ease;
z-index: 55;
}
body.panel-layout.sidebar-open .sidebar-backdrop{ opacity: 1; pointer-events: auto }
[data-theme="dark"] .sidebar-backdrop{ background: rgba(0, 0, 0, .6) }
/* Close (X) button inside the drawer — only on mobile */
.sb-close{
display: none;
background: transparent; border: 1px solid var(--line-2); border-radius: 10px;
width: 34px; height: 34px;
align-items: center; justify-content: center;
color: var(--muted); cursor: pointer;
position: absolute; top: 14px; right: 14px;
transition: all .2s ease;
}
.sb-close:hover{ color: var(--coral); border-color: var(--coral); background: var(--coral-soft) }
/* Hide-on-mobile utility (used to drop the Logout button from the topbar) */
@media (max-width: 640px){
.hide-mobile{ display: none !important }
}
/* ---------- Theme toggle ---------- */
.theme-toggle{
width: 40px; height: 40px;
display:inline-flex; align-items:center; justify-content:center;
background: var(--paper); color: var(--ink);
border: 1px solid var(--line-2);
border-radius: var(--r-pill);
box-shadow: var(--shadow-xs);
position: relative; overflow: hidden;
transition: all .2s ease;
}
.theme-toggle:hover{ background: var(--violet-soft); color: var(--violet); border-color: var(--violet); transform: translateY(-1px) }
.theme-toggle svg{ width: 17px; height: 17px; transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .25s ease; position: absolute }
.theme-toggle .icon-sun{ opacity: 0; transform: rotate(90deg) scale(.6) }
.theme-toggle .icon-moon{ opacity: 1; transform: rotate(0) scale(1) }
[data-theme="dark"] .theme-toggle .icon-sun{ opacity: 1; transform: rotate(0) scale(1) }
[data-theme="dark"] .theme-toggle .icon-moon{ opacity: 0; transform: rotate(-90deg) scale(.6) }
/* ---------- Buttons ---------- */
.btn{
--bg-: var(--paper);
--color-: var(--ink);
--bd-: var(--line-2);
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 22px;
font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
background: var(--bg-); color: var(--color-);
border: 1px solid var(--bd-);
border-radius: var(--r-pill);
box-shadow: var(--shadow-xs);
cursor: pointer; white-space: nowrap; letter-spacing: -.005em;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm) }
.btn:active{ transform: translateY(0); box-shadow: var(--shadow-xs) }
.btn-lg{ padding: 15px 28px; font-size: 15.5px }
.btn-block{ width: 100% }
/* Hard-coded solid colors so white text stays readable in both themes
(the --violet token is lightened in dark mode for text accents, which kills
contrast on solid violet buttons.) */
.btn-primary{ --bg-: #6E48F5; --color-: #ffffff; --bd-: #6E48F5; box-shadow: var(--shadow-violet-soft) }
.btn-primary:hover{ --bg-: #5536D8; --bd-: #5536D8; box-shadow: var(--shadow-violet) }
.btn-emerald{ --bg-: #02A36B; --color-: #ffffff; --bd-: #02A36B }
.btn-emerald:hover{ --bg-: #018559; --bd-: #018559 }
/* In dark mode keep the same brand violet (not the lighter --violet text token)
so white text retains comfortable contrast (~5.5 instead of ~4.0). */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-emerald{ --color-: #ffffff }
.btn-ink{ --bg-: var(--ink); --color-: var(--paper); --bd-: var(--ink) }
.btn-ink:hover{ --bg-: var(--ink-2); --bd-: var(--ink-2) }
.btn-outline{ --bg-: transparent; --color-: var(--ink); --bd-: var(--line-2) }
.btn-outline:hover{ --bd-: var(--ink); background: var(--paper) }
.btn-ghost{ --bg-: transparent; --bd-: transparent; --color-: var(--muted); box-shadow: none }
.btn-ghost:hover{ --color-: var(--ink); --bg-: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: none }
.btn .arr{ transition: transform .25s ease }
.btn:hover .arr{ transform: translateX(3px) }
/* ---------- Reveal ---------- */
[data-reveal]{ opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1) }
[data-reveal].is-in{ opacity: 1; transform: none }
/* ---------- Hero ---------- */
.hero{ padding: 80px 0 60px; position: relative }
/* Live crypto-price ticker — full-bleed band at the top of the hero */
.ticker{
position: absolute; top: 0; left: 0; right: 0;
background: color-mix(in srgb, var(--paper) 88%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
padding: 10px 0;
overflow: hidden;
z-index: 2;
-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track{
display: flex; gap: 38px;
width: max-content;
white-space: nowrap;
animation: tickerSlide 65s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state: paused }
@keyframes tickerSlide{
from{ transform: translateX(0) }
to { transform: translateX(-50%) }
}
.tk-item{
display: inline-flex; align-items: center; gap: 9px;
font-size: 13px; font-weight: 600;
white-space: nowrap;
}
.tk-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--violet); flex-shrink: 0 }
.tk-sym{
font-family: var(--font-display); font-weight: 800; font-size: 12.5px;
letter-spacing: .04em; color: var(--ink);
}
.tk-px{ color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600 }
.tk-chg{
font-size: 11.5px; font-weight: 700;
padding: 2px 7px; border-radius: 6px;
font-variant-numeric: tabular-nums;
}
.tk-chg.up{ background: var(--emerald-soft); color: var(--emerald-2) }
.tk-chg.dn{ background: var(--coral-soft); color: var(--coral) }
[data-theme="dark"] .ticker{ background: color-mix(in srgb, var(--paper) 70%, transparent) }
/* Push hero content down a bit so it doesn't sit under the ticker bar */
.hero{ padding-top: 110px }
@media (max-width: 760px){
.hero{ padding-top: 80px }
.ticker-track{ gap: 26px; animation-duration: 50s }
.tk-item{ font-size: 12px }
.tk-chg{ font-size: 10.5px }
}
.hero-grid{ display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center }
.eyebrow{
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 16px;
background: var(--violet-soft); color: var(--violet);
border-radius: var(--r-pill);
font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: -.005em;
margin-bottom: 24px;
}
.eyebrow .ed{ width: 7px; height: 7px; background: var(--violet); border-radius: 50%; animation: ePulse 1.8s infinite }
@keyframes ePulse{
0%, 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--violet) 50%, transparent) }
60%{ box-shadow: 0 0 0 8px color-mix(in srgb, var(--violet) 0%, transparent) }
}
.hero-title{
font-family: var(--font-display); font-weight: 800;
font-size: clamp(44px, 6.6vw, 96px);
line-height: 1.0; letter-spacing: -.035em;
margin: 0 0 22px; max-width: 14ch;
}
.hero-title em{ font-style: italic; color: var(--violet); font-weight: 800 }
.hero-title .grad{ background: var(--grad-violet); -webkit-background-clip: text; background-clip: text; color: transparent }
.hero-sub{ font-size: 19px; color: var(--muted); margin: 0 0 32px; max-width: 56ch; line-height: 1.55 }
.hero-cta{ display: flex; gap: 12px; flex-wrap: wrap }
.hero-stats{
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 0; margin-top: 44px;
background: var(--paper);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--line);
overflow: hidden;
}
.hero-stat{ padding: 18px 22px; border-right: 1px solid var(--line) }
.hero-stat:last-child{ border-right: none }
.hero-stat strong{ display: block; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.015em; line-height: 1 }
.hero-stat span{ display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600 }
/* Hero art: floating preview cards */
.hero-art{ position: relative; min-height: 540px }
.hero-art .blob{
position: absolute; inset: -20% -10%; z-index: -1;
background: var(--grad-hero);
filter: blur(60px);
border-radius: 50%;
}
.preview{
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
box-shadow: var(--shadow-lg);
padding: 28px;
overflow: hidden;
transform: rotate(-2deg);
transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.preview:hover{ transform: rotate(0) }
.preview-bar{ display: flex; align-items: center; gap: 8px; margin-bottom: 18px }
.preview-bar .dt{ width: 10px; height: 10px; border-radius: 50%; background: var(--line-2) }
.preview-bar .pill{
margin-left: auto; font-family: var(--font-mono); font-size: 11px;
background: var(--emerald-soft); color: var(--emerald-2);
padding: 4px 10px; border-radius: var(--r-pill);
display: inline-flex; align-items: center; gap: 6px;
}
.preview-bar .pill::before{ content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); animation: ePulse 1.8s infinite }
.preview-label{ font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 4px }
.preview-amount{
font-family: var(--font-display); font-weight: 800;
font-size: 48px; letter-spacing: -.025em; line-height: 1;
background: var(--grad-violet); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.preview-delta{
display: inline-flex; align-items: center; gap: 4px;
margin-top: 8px; font-size: 13px; font-weight: 600;
color: var(--emerald-2); background: var(--emerald-soft);
padding: 4px 10px; border-radius: var(--r-pill);
}
.preview-chart{ height: 100px; margin: 22px 0 18px }
.preview-mini{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.preview-mini .m{
background: var(--paper-warm); border: 1px solid var(--line);
border-radius: var(--r-md); padding: 12px;
}
.preview-mini .m b{ display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px }
.preview-mini .m span{ display: block; font-size: 11px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .08em }
/* Floating chip on hero */
.float-chip{
position: absolute;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-pill);
padding: 10px 16px;
font-family: var(--font-display); font-weight: 600; font-size: 13px;
box-shadow: var(--shadow-md);
display: inline-flex; align-items: center; gap: 8px;
}
.float-chip .ico{
width: 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; color: #fff;
}
.fc-1{ top: 14px; right: -20px; transform: rotate(4deg); animation: float1 6s ease-in-out infinite }
.fc-1 .ico{ background: var(--emerald) }
.fc-2{ bottom: 90px; left: -28px; transform: rotate(-3deg); animation: float2 7s ease-in-out infinite }
.fc-2 .ico{ background: var(--coral) }
.fc-3{ bottom: 16px; right: 30px; transform: rotate(2deg); animation: float1 8s ease-in-out infinite reverse }
.fc-3 .ico{ background: var(--amber); color: var(--ink) }
@keyframes float1{ 0%,100%{ translate: 0 0 } 50%{ translate: 0 -8px } }
@keyframes float2{ 0%,100%{ translate: 0 0 } 50%{ translate: 0 -10px } }
/* ---------- Trust band ---------- */
.trust-band{
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
padding: 36px 0;
background: color-mix(in srgb, var(--paper) 60%, transparent);
}
.trust-label{
text-align: center; font-family: var(--font-mono); font-size: 11px;
letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
margin-bottom: 22px;
}
.trust-grid{
display: flex; justify-content: center; gap: 36px; flex-wrap: wrap;
font-family: var(--font-display); font-weight: 600;
}
.trust-grid span{
display: inline-flex; align-items: center; gap: 8px;
font-size: 15px; color: var(--muted-2);
opacity: .8; transition: opacity .2s ease, color .2s ease;
}
.trust-grid span:hover{ opacity: 1; color: var(--ink) }
.trust-grid span .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--violet) }
/* ---------- Sections ---------- */
.section{ padding: 100px 0; position: relative }
.section-tight{ padding: 64px 0 }
.section-head{ text-align: center; margin: 0 auto 56px; max-width: 760px }
.section-tag{
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; background: var(--violet-soft); color: var(--violet);
border-radius: var(--r-pill);
font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
margin-bottom: 18px;
}
.section-tag.emerald{ background: var(--emerald-soft); color: var(--emerald-2) }
.section-tag.coral{ background: var(--coral-soft); color: var(--coral) }
.section-tag.amber{ background: var(--amber-soft); color: var(--ink) }
.section-tag.rose{ background: var(--rose-soft); color: var(--rose) }
.section-title{
font-family: var(--font-display); font-weight: 800;
font-size: clamp(36px, 5vw, 68px); line-height: 1.02;
letter-spacing: -.025em; margin: 0 0 14px;
}
.section-title em{ font-style: italic; color: var(--violet); font-weight: 800 }
.section-title .grad{ background: var(--grad-violet); -webkit-background-clip: text; background-clip: text; color: transparent }
.section-lead{ font-size: 18px; color: var(--muted); max-width: 56ch; margin: 0 auto; line-height: 1.55 }
/* ---------- How it works ---------- */
.how{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.how-card{
position: relative;
background: var(--grad-card);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 36px 30px;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
overflow: hidden;
}
.how-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--violet-soft) }
.how-card::after{
content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px;
background: var(--violet-soft); border-radius: 50%; opacity: 0; transition: opacity .3s ease;
}
.how-card:hover::after{ opacity: 1 }
.how-card .num{
font-family: var(--font-display); font-weight: 800; font-size: 14px;
color: var(--violet); margin-bottom: 14px; letter-spacing: .04em;
}
.how-card .icn{
width: 56px; height: 56px; border-radius: 18px;
background: var(--violet-soft); color: var(--violet);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 18px;
transition: transform .3s ease;
}
.how-card:hover .icn{ transform: rotate(-6deg) scale(1.05) }
.how-card.emerald .icn{ background: var(--emerald-soft); color: var(--emerald-2) }
.how-card.emerald .num{ color: var(--emerald-2) }
.how-card.coral .icn{ background: var(--coral-soft); color: var(--coral) }
.how-card.coral .num{ color: var(--coral) }
.how-card h3{ font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.015em; margin: 0 0 8px; position: relative; z-index: 1 }
.how-card p{ color: var(--muted); margin: 0; font-size: 15px; line-height: 1.55; position: relative; z-index: 1 }
/* ---------- Earnings cockpit (always-dark dashboard) ---------- */
.cockpit{
--cp-bg: #0B0A14;
--cp-bg-2: #110F1F;
--cp-line: rgba(255,255,255,.08);
--cp-line-2: rgba(255,255,255,.14);
--cp-text: #E9E6F8;
--cp-muted: #8B83A8;
--cp-violet: #9F84FF;
--cp-emerald: #36DEA0;
--cp-coral: #FF9166;
position: relative;
background: var(--cp-bg);
color: var(--cp-text);
border: 1px solid var(--cp-line);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,.18);
}
.cockpit::before{
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(circle at 12% 0%, rgba(159,132,255,.22), transparent 45%),
radial-gradient(circle at 50% 100%, rgba(54,222,160,.16), transparent 55%),
radial-gradient(circle at 92% 8%, rgba(255,145,102,.18), transparent 45%);
}
.cockpit::after{
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 36px 36px;
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
/* Top bar */
.cp-topbar{
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 20px 28px;
border-bottom: 1px solid var(--cp-line);
background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.cp-bar-l{ display: flex; align-items: center; gap: 14px }
.cp-logo{
display: inline-flex; gap: 4px;
padding: 8px;
background: rgba(255,255,255,.04);
border: 1px solid var(--cp-line);
border-radius: 10px;
}
.cp-logo span{
display: block; width: 6px; height: 14px; border-radius: 2px;
background: linear-gradient(180deg, var(--cp-violet), rgba(159,132,255,.3));
}
.cp-logo span:nth-child(2){ background: linear-gradient(180deg, var(--cp-emerald), rgba(54,222,160,.3)); height: 10px; align-self: center }
.cp-logo span:nth-child(3){ background: linear-gradient(180deg, var(--cp-coral), rgba(255,145,102,.3)); height: 16px }
.cp-bar-title{ font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--cp-text) }
.cp-bar-sub{ font-size: 12.5px; color: var(--cp-muted); margin-top: 2px }
.cp-bar-r{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.cp-meta{
font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--cp-muted);
padding: 6px 10px;
background: rgba(255,255,255,.03);
border: 1px solid var(--cp-line);
border-radius: 999px;
}
.cp-meta b{ color: var(--cp-text); font-weight: 700; margin-right: 4px }
.cp-meta.live{ color: var(--cp-emerald); border-color: rgba(54,222,160,.3) }
.cp-meta.live .pulse{
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: var(--cp-emerald); margin-right: 6px; vertical-align: middle;
box-shadow: 0 0 0 0 rgba(54,222,160,.6);
animation: cpPulse 1.6s ease-out infinite;
}
@keyframes cpPulse{
0%{ box-shadow: 0 0 0 0 rgba(54,222,160,.55) }
70%{ box-shadow: 0 0 0 10px rgba(54,222,160,0) }
100%{ box-shadow: 0 0 0 0 rgba(54,222,160,0) }
}
/* Two-column grid */
.cp-grid{
position: relative; z-index: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.cp-col{
--col-accent: var(--cp-violet);
position: relative;
padding: 30px 28px 32px;
border-right: 1px solid var(--cp-line);
display: flex; flex-direction: column; gap: 22px;
}
.cp-col:last-child{ border-right: none }
.cp-col.emerald{ --col-accent: var(--cp-emerald) }
.cp-col.coral{ --col-accent: var(--cp-coral) }
.cp-col::before{
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--col-accent) 10%, transparent), transparent 55%);
pointer-events: none;
}
.cp-col > *{ position: relative; z-index: 1 }
.cp-col-head{ display: flex; align-items: center; gap: 12px }
.cp-num-tag{
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 10px;
font-family: var(--font-display); font-weight: 800; font-size: 14px;
color: var(--col-accent);
background: color-mix(in srgb, var(--col-accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--col-accent) 28%, var(--cp-line));
}
.cp-tag{ font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-muted) }
.cp-name{ font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--cp-text); margin-top: 1px }
.cp-stat{ display: flex; flex-direction: column; gap: 4px }
.cp-stat-num{
font-family: var(--font-display); font-weight: 800;
font-size: clamp(48px, 5vw, 64px); line-height: .95; letter-spacing: -.04em;
background: linear-gradient(135deg, var(--col-accent), color-mix(in srgb, var(--col-accent) 70%, #ffffff));
-webkit-background-clip: text; background-clip: text; color: transparent;
display: inline-flex; align-items: baseline; gap: 2px;
}
.cp-stat-num span{ font-size: .48em; font-weight: 700; opacity: .85 }
.cp-stat-sub{ font-size: 12.5px; color: var(--cp-muted); font-weight: 600 }
/* Spark */
.cp-spark{ width: 100%; height: 88px; display: block }
/* Bars */
.cp-bars{
display: grid; grid-template-columns: repeat(20, 1fr);
gap: 3px; height: 90px; align-items: end;
}
.cp-bar{
height: var(--h, 10%);
background: linear-gradient(180deg, var(--col-accent), color-mix(in srgb, var(--col-accent) 30%, transparent));
border-radius: 3px 3px 1px 1px;
opacity: .55;
transition: opacity .3s ease;
}
.cp-bar.hi{ opacity: 1; box-shadow: 0 0 12px color-mix(in srgb, var(--col-accent) 35%, transparent) }
.cp-col:hover .cp-bar{ opacity: .75 }
.cp-col:hover .cp-bar.hi{ opacity: 1 }
/* Stacks */
.cp-stacks{ display: flex; flex-direction: column; gap: 8px }
.cp-stack{
display: grid; grid-template-columns: 36px 1fr auto 1fr;
align-items: center; gap: 10px;
padding: 10px 14px;
background: rgba(255,255,255,.03);
border: 1px solid var(--cp-line);
border-radius: 12px;
font-variant-numeric: tabular-nums;
}
.cp-stack .lv{ font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--cp-muted); text-transform: uppercase }
.cp-stack .from{ font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--cp-muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25) }
.cp-stack .arr{ color: var(--col-accent); font-weight: 800 }
.cp-stack .to{
font-family: var(--font-display); font-weight: 800; font-size: 20px;
background: linear-gradient(135deg, var(--col-accent), color-mix(in srgb, var(--col-accent) 60%, #ffffff));
-webkit-background-clip: text; background-clip: text; color: transparent;
text-align: right;
}
/* Row list */
.cp-rows{ list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--cp-line); display: flex; flex-direction: column; gap: 8px }
.cp-rows li{ display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px }
.cp-rows li span{ color: var(--cp-muted); font-weight: 600 }
.cp-rows li b{ font-family: var(--font-display); font-weight: 700; color: var(--cp-text); font-variant-numeric: tabular-nums }
.cp-rows li.hi b{ color: var(--col-accent) }
/* ---------- Plans (used on /features) ---------- */
.plans{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch }
.plan{
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 32px 28px;
box-shadow: var(--shadow-sm);
display: flex; flex-direction: column; gap: 14px;
transition: transform .3s ease, box-shadow .3s ease;
}
.plan:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md) }
.plan.featured{
background: linear-gradient(180deg, #FFFFFF 0%, var(--violet-soft) 100%);
border-color: var(--violet);
box-shadow: var(--shadow-violet-soft);
}
[data-theme="dark"] .plan.featured{ background: linear-gradient(180deg, var(--paper) 0%, var(--violet-soft) 100%) }
.plan-ribbon{
position: absolute; top: -14px; right: 28px;
background: var(--violet); color: #fff;
padding: 6px 14px; border-radius: var(--r-pill);
font-family: var(--font-display); font-weight: 600; font-size: 12px;
box-shadow: var(--shadow-violet-soft);
}
.plan-tag{
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: .14em;
color: var(--muted);
}
.plan-name{ font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.02em }
.plan-roi{
display: flex; align-items: baseline; gap: 4px; margin: 4px 0 6px;
font-family: var(--font-display);
}
.plan-roi span{
font-weight: 800; font-size: 72px; letter-spacing: -.035em; line-height: 1;
background: var(--grad-violet); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plan-roi small{ font-size: 14px; color: var(--muted); font-weight: 600 }
.plan-list{ list-style: none; padding: 0; margin: 12px 0 22px; flex: 1; display: flex; flex-direction: column; gap: 8px }
.plan-list li{
display: flex; align-items: center; gap: 10px;
font-size: 14.5px; color: var(--ink-2);
}
.plan-list li::before{
content: ""; flex-shrink: 0; width: 18px; height: 18px;
background: var(--violet-soft);
border-radius: 50%;
display: inline-block;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat, linear-gradient(white,white);
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat, linear-gradient(white,white);
background: var(--violet);
}
.plan-list li strong{ font-weight: 700; color: var(--ink); margin-left: auto; font-family: var(--font-mono); font-size: 13px }
/* ---------- Calculator ---------- */
.calc-block{
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
box-shadow: var(--shadow-md);
padding: 36px;
display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px;
align-items: start;
overflow: hidden;
}
.calc-inputs label{
display: block; font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
margin-bottom: 10px;
}
.calc-amount{
display: flex; align-items: baseline; gap: 8px;
background: var(--paper-warm);
border: 1px solid var(--line); border-radius: var(--r-md);
padding: 14px 18px; margin-bottom: 22px;
}
.calc-amount input{
flex: 1; background: transparent; border: none; outline: none;
color: var(--ink); min-width: 0;
font-family: var(--font-display); font-weight: 800; font-size: 42px; letter-spacing: -.025em;
}
.calc-amount .suf{ font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--muted) }
.range{
-webkit-appearance: none; appearance: none; width: 100%; height: 6px;
background: var(--line-2); border-radius: var(--r-pill);
outline: none; cursor: pointer;
}
.range::-webkit-slider-thumb{
-webkit-appearance: none; width: 20px; height: 20px;
background: var(--violet); border-radius: 50%; cursor: pointer;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 20%, transparent);
border: 2px solid #fff;
}
.range::-moz-range-thumb{ width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: var(--violet); cursor: pointer }
.calc-plans{ display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap }
.chip{
padding: 8px 16px;
background: var(--paper-warm); border: 1px solid var(--line-2);
border-radius: var(--r-pill);
font-family: var(--font-display); font-weight: 600; font-size: 13px;
color: var(--ink); cursor: pointer; transition: all .2s ease;
}
.chip:hover{ border-color: var(--violet) }
.chip.active{ background: var(--violet); color: #fff; border-color: var(--violet) }
.calc-output{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.calc-row{
background: var(--paper-warm);
border: 1px solid var(--line); border-radius: var(--r-md);
padding: 20px;
}
.calc-row.big{
grid-column: span 2;
background: linear-gradient(135deg, var(--violet-soft) 0%, var(--paper-warm) 100%);
border-color: var(--violet-soft);
}
.calc-row .lbl{
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
.calc-row .val{
font-family: var(--font-display); font-weight: 800;
font-size: 32px; letter-spacing: -.025em; margin-top: 6px; line-height: 1;
}
.calc-row.big .val{ font-size: 48px; color: var(--violet) }
/* ---------- Stats ---------- */
.stat-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px }
.stat-card{
background: var(--paper);
border: 1px solid var(--line); border-radius: var(--r-xl);
padding: 30px 26px;
box-shadow: var(--shadow-sm);
transition: transform .3s ease, box-shadow .3s ease;
position: relative; overflow: hidden;
}
.stat-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md) }
.stat-card::after{
content: ""; position: absolute; right: -30px; top: -30px;
width: 120px; height: 120px; border-radius: 50%;
background: var(--violet-soft); opacity: .6;
}
.stat-card.emerald::after{ background: var(--emerald-soft) }
.stat-card.coral::after{ background: var(--coral-soft) }
.stat-card.amber::after{ background: var(--amber-soft) }
.stat-card .n{
font-family: var(--font-display); font-weight: 800;
font-size: clamp(36px, 4vw, 52px); letter-spacing: -.025em; line-height: 1;
position: relative; z-index: 1;
}
.stat-card .l{
font-family: var(--font-mono); font-size: 11.5px;
text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
margin-top: 10px; font-weight: 500; position: relative; z-index: 1;
}
/* ---------- Voices / testimonials ---------- */
.voices{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.voice{
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 28px;
box-shadow: var(--shadow-sm);
transition: transform .3s ease, box-shadow .3s ease;
position: relative;
}
.voice:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md) }
.voice::before{
content: "\201C";
position: absolute; top: 18px; right: 26px;
font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: .7;
color: var(--violet-soft);
}
.voice p{ font-size: 16px; color: var(--ink-2); margin: 0 0 18px; line-height: 1.55 }
.voice .by{ display: flex; align-items: center; gap: 12px }
.voice .av{
width: 40px; height: 40px; border-radius: 50%;
background: var(--grad-violet); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 800; font-size: 16px;
}
.voice .by b{ display: block; font-family: var(--font-display); font-weight: 700; font-size: 14.5px }
.voice .by small{ display: block; color: var(--muted); font-family: var(--font-mono); font-size: 11px; margin-top: 2px }
/* ---------- FAQ ---------- */
.faq{ display: flex; flex-direction: column; gap: 12px }
.faq details{
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 20px 24px;
box-shadow: var(--shadow-xs);
transition: all .25s ease;
}
.faq details:hover{ border-color: var(--violet-soft) }
.faq details[open]{ box-shadow: var(--shadow-sm); border-color: var(--violet) }
.faq summary{
list-style: none; cursor: pointer; position: relative;
font-family: var(--font-display); font-weight: 700; font-size: 17px;
letter-spacing: -.015em; padding-right: 40px;
}
.faq summary::-webkit-details-marker{ display: none }
.faq summary::after{
content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px; border-radius: 50%;
background: var(--violet-soft); color: var(--violet);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 600; font-size: 18px;
transition: all .25s ease;
}
.faq details[open] summary::after{ content: "−"; background: var(--violet); color: #fff }
.faq details p{ font-size: 15px; line-height: 1.65; color: var(--muted); margin: 14px 0 0; max-width: 70ch }
/* ---------- CTA band ---------- */
.cta-band{
margin: 80px auto 0; padding: 0 28px; max-width: 1240px;
}
.cta-inner{
position: relative;
background: var(--ink); color: var(--paper);
border-radius: var(--r-xl);
padding: 80px 48px;
text-align: center;
overflow: hidden;
}
.cta-inner::before{
content: ""; position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(circle at 20% 30%, rgba(110,72,245,.45), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(0,200,128,.30), transparent 50%);
}
.cta-inner > *{ position: relative; z-index: 1 }
.cta-inner h2{
font-family: var(--font-display); font-weight: 800;
font-size: clamp(36px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.025em;
margin: 0 0 16px; max-width: 22ch; margin-left: auto; margin-right: auto;
color: var(--paper);
}
.cta-inner h2 em{ color: var(--amber); font-style: italic }
.cta-inner h2 .grad{ background: linear-gradient(135deg, #C5A6FF, #B0EE7A); -webkit-background-clip: text; background-clip: text; color: transparent }
.cta-inner p{ color: color-mix(in srgb, var(--paper) 70%, transparent); margin: 0 auto 32px; font-size: 17px; max-width: 56ch }
.cta-inner .gap-3{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
.cta-band .btn-outline{ --bg-: transparent; --color-: var(--paper); --bd-: color-mix(in srgb, var(--paper) 30%, transparent) }
.cta-band .btn-outline:hover{ --bd-: var(--paper); background: rgba(255,255,255,.06) }
/* Dark mode: --ink flips light, so the CTA plate becomes light.
The original gradient text + faded outline border become invisible —
re-tint them with the saturated brand colors so they read on the light plate. */
[data-theme="dark"] .cta-inner h2 .grad{ background: linear-gradient(135deg, #3A1E9E, #007A4F); -webkit-background-clip: text; background-clip: text; color: transparent }
[data-theme="dark"] .cta-band .btn-outline{ --color-: var(--paper); --bd-: color-mix(in srgb, var(--paper) 55%, transparent) }
[data-theme="dark"] .cta-band .btn-outline:hover{ --bd-: var(--paper); background: color-mix(in srgb, var(--paper) 8%, transparent) }
/* ---------- Footer ---------- */
.site-footer{
margin-top: 100px;
padding: 60px 0 30px;
border-top: 1px solid var(--line);
}
.footer-grid{
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px;
padding-bottom: 40px; border-bottom: 1px solid var(--line);
}
.footer-grid h4{
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
margin: 0 0 16px; font-weight: 500;
}
.footer-grid ul{ list-style: none; padding: 0; margin: 0 }
.footer-grid li{ margin: 10px 0; font-size: 14.5px }
.footer-grid li a{ color: var(--ink-2); font-weight: 500 }
.footer-grid li a:hover{ color: var(--violet) }
.footer-brand .brand-logo{ width: 64px; height: 64px }
.footer-brand p{ color: var(--muted); margin: 16px 0 18px; max-width: 36ch; font-size: 15px; line-height: 1.55 }
.footer-socials{ display: flex; gap: 8px }
.footer-socials a{
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
background: var(--paper); color: var(--ink);
border: 1px solid var(--line); border-radius: var(--r-pill);
transition: all .2s ease;
}
.footer-socials a:hover{ background: var(--violet); color: #fff; border-color: var(--violet); transform: translateY(-2px) }
.footer-bottom{
margin-top: 22px; padding-top: 18px;
display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: .04em;
}
/* ---------- Auth pages ---------- */
.auth-section{ padding: 60px 0; min-height: calc(100vh - 72px); display: flex; align-items: center }
.auth-card{
position: relative;
width: 100%; max-width: 480px; margin: 0 auto;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
box-shadow: var(--shadow-lg);
padding: 44px 36px;
}
.auth-card::before{
content: ""; position: absolute; inset: -1px; border-radius: var(--r-xl); z-index: -1;
background: var(--grad-hero); filter: blur(40px); opacity: .65;
}
.auth-flag{
position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
padding: 7px 16px; background: var(--violet); color: #fff;
border-radius: var(--r-pill);
font-family: var(--font-display); font-weight: 600; font-size: 12px;
box-shadow: var(--shadow-violet-soft);
}
.auth-head{ text-align: center; margin-bottom: 26px }
.auth-head img{
width: 120px; height: 120px; margin: 0 auto 14px; object-fit: contain;
background: transparent; border-radius: 0; padding: 0;
border: none; box-shadow: none;
display: block;
}
.auth-head h1{ font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -.02em; margin: 0 0 8px }
.auth-head h1 em{ font-style: italic; color: var(--violet) }
.auth-head p{ color: var(--muted); margin: 0; font-size: 14.5px; line-height: 1.55 }
.auth-actions{ display: flex; flex-direction: column; gap: 10px; margin-top: 18px }
.auth-foot{ margin-top: 22px; text-align: center; font-size: 14px; color: var(--muted) }
.auth-foot a{ color: var(--violet) }
.wallet-status{
margin: 16px 0 6px; padding: 14px 16px;
background: var(--paper-warm); border: 1px dashed var(--line-2);
border-radius: var(--r-md);
font-family: var(--font-mono); font-size: 13px; color: var(--muted);
transition: all .25s ease;
}
.wallet-status.connected{
background: var(--emerald-soft); color: var(--emerald-2);
border-color: var(--emerald); border-style: solid;
}
/* ---------- Forms ---------- */
.form-row{ margin-bottom: 18px }
.form-row label{
display: block; font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
margin-bottom: 8px;
}
.input{
width: 100%; padding: 14px 18px;
background: var(--paper-warm); color: var(--ink);
border: 1px solid var(--line-2); border-radius: var(--r-md);
font-size: 16px; font-family: var(--font); font-weight: 500;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input:focus{
outline: none; border-color: var(--violet);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 18%, transparent);
background: var(--paper);
}
/* ---------- Alerts ---------- */
.alert{ padding: 13px 18px; margin: 14px 0; font-size: 14px; border-radius: var(--r-md); border: 1px solid }
.alert-success{ background: var(--emerald-soft); color: var(--emerald-2); border-color: color-mix(in srgb, var(--emerald) 40%, transparent) }
.alert-error{ background: var(--coral-soft); color: var(--coral); border-color: color-mix(in srgb, var(--coral) 40%, transparent) }
/* ---------- Member / Admin panel ---------- */
.aurora-soft{ opacity: .35 }
[data-theme="dark"] .aurora-soft{ opacity: .55 }
.app-shell{
display: grid; grid-template-columns: 260px 1fr;
min-height: calc(100vh - 72px); position: relative;
}
.sidebar{
background: color-mix(in srgb, var(--paper) 85%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-right: 1px solid var(--line);
padding: 22px 14px 18px;
display: flex; flex-direction: column;
position: sticky;
top: 72px;
align-self: start;
height: calc(100vh - 72px);
overflow-y: auto;
}
/* Sidebar brand strip at top */
.sb-brand{
display: flex; align-items: center; gap: 10px;
padding: 8px 12px 16px;
border-bottom: 1px solid var(--line);
margin-bottom: 14px;
}
.sb-brand .ic{
width: 32px; height: 32px; border-radius: 10px;
background: linear-gradient(135deg, #8A6CFB 0%, #6E48F5 100%);
color: #fff; display: inline-flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-violet-soft);
}
.sb-brand .label{
font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -.01em;
line-height: 1.1;
}
.sb-brand .sub{ display: block; font-size: 11px; color: var(--muted); font-weight: 500; font-family: var(--font-mono); letter-spacing: .04em }
/* Section label */
.sb-section{
font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
text-transform: uppercase; letter-spacing: .16em; color: var(--muted);
padding: 14px 14px 6px;
}
/* Nav items */
.sb-nav{ display: flex; flex-direction: column; gap: 2px }
.sb-link{
display: flex; align-items: center; gap: 12px;
padding: 9px 12px; border-radius: 12px;
font-weight: 600; font-size: 14px;
color: var(--ink-2);
transition: background .2s ease, color .2s ease, transform .15s ease;
position: relative;
}
.sb-link .sb-ico{
width: 30px; height: 30px; border-radius: 9px;
background: color-mix(in srgb, var(--ink) 4%, transparent);
color: var(--muted);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background .2s ease, color .2s ease;
}
.sb-link:hover{ background: var(--violet-soft); color: var(--violet) }
.sb-link:hover .sb-ico{ background: var(--paper); color: var(--violet) }
.sb-link.active{
background: linear-gradient(135deg, #8A6CFB 0%, #6E48F5 100%);
color: #fff;
box-shadow: var(--shadow-violet-soft);
}
.sb-link.active .sb-ico{ background: rgba(255,255,255,.20); color: #fff }
.sb-link .sb-badge{
margin-left: auto; padding: 2px 8px; border-radius: var(--r-pill);
font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
background: var(--emerald-soft); color: var(--emerald-2);
}
.sb-link.active .sb-badge{ background: rgba(255,255,255,.22); color: #fff }
/* Collapsible nav group */
.sb-group{ display: block }
.sb-group summary{ list-style: none; cursor: pointer }
.sb-group summary::-webkit-details-marker{ display: none }
.sb-link--group{ width: 100% }
.sb-group-label{ flex: 1 }
.sb-caret{ flex-shrink: 0; opacity: .6; transition: transform .25s ease }
.sb-group[open] .sb-caret{ transform: rotate(180deg) }
.sb-sub{
display: flex; flex-direction: column; gap: 2px;
margin: 4px 0 4px 14px; padding-left: 14px;
border-left: 1.5px solid var(--line);
}
.sb-sublink{
padding: 7px 10px; font-size: 13.5px; font-weight: 500;
color: var(--muted);
border-radius: 8px;
gap: 10px;
}
.sb-sublink:hover{ background: var(--violet-soft); color: var(--violet) }
.sb-sublink.active{
background: color-mix(in srgb, var(--violet) 10%, transparent);
color: var(--violet);
box-shadow: none;
font-weight: 600;
}
.sb-dot{
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0; background: var(--muted);
}
.sb-dot--emerald{ background: var(--emerald-2) }
.sb-dot--sky{ background: #2E8AE0 }
.sb-dot--amber{ background: var(--amber) }
.sb-dot--violet{ background: var(--violet) }
.sb-dot--coral{ background: var(--coral) }
/* Profit category hero card */
.profit-hero{
display: grid; grid-template-columns: auto 1fr; gap: 22px;
align-items: center;
padding: 26px 28px;
background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 10%, var(--paper)) 0%, var(--paper) 100%);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow-xs);
}
.profit-hero--emerald{ background: linear-gradient(135deg, var(--emerald-soft) 0%, var(--paper) 100%); border-color: color-mix(in srgb, var(--emerald) 22%, var(--line)) }
.profit-hero--sky { background: linear-gradient(135deg, #E1F0FC 0%, var(--paper) 100%); border-color: color-mix(in srgb, #2E8AE0 22%, var(--line)) }
.profit-hero--amber { background: linear-gradient(135deg, var(--amber-soft) 0%, var(--paper) 100%); border-color: color-mix(in srgb, var(--amber) 28%, var(--line)) }
.profit-hero--violet { background: linear-gradient(135deg, var(--violet-soft) 0%, var(--paper) 100%); border-color: color-mix(in srgb, var(--violet) 22%, var(--line)) }
.profit-hero--coral { background: linear-gradient(135deg, var(--coral-soft) 0%, var(--paper) 100%); border-color: color-mix(in srgb, var(--coral) 22%, var(--line)) }
.ph-icn{
width: 56px; height: 56px; border-radius: 14px;
background: var(--paper); border: 1px solid var(--line);
display: inline-flex; align-items: center; justify-content: center;
color: var(--violet);
}
.profit-hero--emerald .ph-icn{ color: var(--emerald-2) }
.profit-hero--sky .ph-icn{ color: #2E8AE0 }
.profit-hero--amber .ph-icn{ color: var(--gold, #B58313) }
.profit-hero--coral .ph-icn{ color: var(--coral) }
.ph-sub{ color: var(--muted); margin: 0 0 14px; font-size: 14.5px; line-height: 1.5 }
.ph-stats{ display: grid; grid-template-columns: repeat(3, auto); gap: 22px 36px; align-items: end }
.ph-lbl{ font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.ph-val{ font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.015em; margin-top: 4px; font-variant-numeric: tabular-nums }
@media (max-width: 640px){
.profit-hero{ grid-template-columns: 1fr; padding: 22px 20px }
.ph-stats{ grid-template-columns: 1fr 1fr; gap: 16px }
.ph-val{ font-size: 18px }
}
/* ---------- Admin dashboard ---------- */
.adm-hero{
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 24px 28px;
box-shadow: var(--shadow-xs);
margin-bottom: 18px;
}
.adm-hero-stat{
padding: 4px 22px;
border-right: 1px solid var(--line);
}
.adm-hero-stat:last-child{ border-right: none }
.adm-hero-stat:first-child{ padding-left: 0 }
.ah-lbl{ font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.ah-val{ font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3vw, 36px); letter-spacing: -.025em; margin-top: 6px; line-height: 1; font-variant-numeric: tabular-nums }
.ah-foot{ font-size: 12.5px; color: var(--muted); margin-top: 8px }
.ah-foot .dot{ display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); margin-right: 4px; vertical-align: middle }
.ah-foot .dot--ok{ background: var(--emerald-2) }
.adm-row{
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px;
}
/* Vertical gap between consecutive rows/panels so they don't touch */
.adm-row + .adm-row,
.adm-row + .adm-panel,
.adm-panel + .adm-row,
.adm-panel + .adm-panel{ margin-top: 18px }
.adm-row-3{ grid-template-columns: 1fr 1fr 1fr }
.adm-panel{
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-xl); padding: 22px 24px;
box-shadow: var(--shadow-xs);
}
.ap-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px }
.ap-head h3{ font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.015em; margin: 4px 0 0 }
.ap-tag{ font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--violet) }
.ap-tag.emerald{ color: var(--emerald-2) }
.ap-tag.amber{ color: var(--gold, #B58313) }
.ap-tag.coral{ color: var(--coral) }
.ap-tag.violet{ color: var(--violet) }
[data-theme="dark"] .ap-tag.amber{ color: var(--amber) }
.ap-legend{ display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap }
.ap-legend strong{ color: var(--ink); font-weight: 700 }
.lg-dot{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle }
/* SVG line chart */
.chart-svg{ width: 100%; height: 220px; display: block }
/* Donut + legend */
.donut-wrap{ display: flex; justify-content: center; padding: 4px 0 }
.donut-legend{ list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px }
.donut-legend li{ display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center }
.donut-legend .dl-lbl{ color: var(--ink); font-weight: 500 }
.donut-legend .dl-val{ font-family: var(--font-display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums }
/* Rank bars */
.rank-bars{ display: flex; flex-direction: column; gap: 8px }
.rb-row{ display: grid; grid-template-columns: 80px 1fr 50px; align-items: center; gap: 12px }
.rb-lbl{ font-size: 12.5px; font-weight: 600; color: var(--muted) }
.rb-track{ position: relative; height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 5%, var(--paper)); overflow: hidden }
.rb-fill{ display: block; height: 100%; border-radius: 999px; transition: width .4s ease }
.rb-val{ text-align: right; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 13.5px }
/* 30-day bar chart for new users */
.bars-30{ display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; height: 110px; align-items: end; margin-top: 8px }
.bar30{ display: flex; align-items: flex-end; height: 100%; cursor: default }
.bar30 span{ width: 100%; background: linear-gradient(180deg, var(--violet), color-mix(in srgb, var(--violet) 40%, transparent)); border-radius: 3px 3px 1px 1px; min-height: 2px; transition: opacity .15s ease }
.bar30:hover span{ opacity: .7 }
.bars-30-labels{ position: relative; height: 18px; margin-top: 4px }
.bars-30-labels span{ position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); font-family: var(--font-mono) }
/* Stat-grid 3-up variant */
.stat-grid-3{ grid-template-columns: repeat(3, 1fr) }
@media (max-width: 760px){ .stat-grid-3{ grid-template-columns: 1fr } }
/* System status list */
.sys-list{ display: flex; flex-direction: column; gap: 4px }
.sys-row{ display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13px }
.sys-row:last-child{ border-bottom: none }
.sys-k{ color: var(--muted); font-weight: 600 }
.sys-v{ font-family: var(--font-display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right }
.sys-v a{ color: inherit; text-decoration: none }
@media (max-width: 1100px){
.adm-hero{ grid-template-columns: 1fr 1fr }
.adm-hero-stat{ border-right: none; padding: 12px 0 }
.adm-hero-stat:nth-child(odd){ border-right: 1px solid var(--line); padding-right: 22px }
.adm-hero-stat:nth-child(even){ padding-left: 22px }
.adm-row{ grid-template-columns: 1fr 1fr }
.adm-row .adm-panel[style*="span 2"]{ grid-column: span 2 !important }
.adm-row-3{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 760px){
.adm-hero{ grid-template-columns: 1fr; padding: 18px 20px }
.adm-hero-stat{ border-right: none !important; border-bottom: 1px solid var(--line); padding: 14px 0 !important }
.adm-hero-stat:last-child{ border-bottom: none }
.adm-row, .adm-row-3{ grid-template-columns: 1fr }
.adm-row .adm-panel[style*="span 2"]{ grid-column: span 1 !important }
.bars-30{ height: 80px }
}
/* ---------- Member dashboard ---------- */
.dash-hero{
display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px;
align-items: center;
padding: 32px 36px;
background: linear-gradient(135deg, var(--violet-soft) 0%, var(--emerald-soft) 100%);
border: 1px solid var(--line);
border-radius: var(--r-xl);
box-shadow: var(--shadow-xs);
position: relative; overflow: hidden;
}
.dash-hero::before{
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--violet) 18%, transparent), transparent 50%),
radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--emerald) 14%, transparent), transparent 55%);
}
.dash-hero > *{ position: relative; z-index: 1 }
.dash-eyebrow{
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px; background: var(--paper);
border: 1px solid var(--line); border-radius: 999px;
font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--violet);
}
.dash-eyebrow .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--emerald-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald) 22%, transparent) }
.dash-hero h1{
font-family: var(--font-display); font-weight: 800;
font-size: clamp(28px, 4vw, 44px); letter-spacing: -.025em;
margin: 12px 0 8px; line-height: 1.1;
}
.dash-hero h1 .grad{
background: linear-gradient(135deg, var(--violet-2), var(--emerald-2));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.dash-sub{ color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 56ch; margin: 0 0 14px }
.dash-chips{ display: flex; flex-wrap: wrap; gap: 8px }
.dash-chip{
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; background: var(--paper); border: 1px solid var(--line);
border-radius: 10px; font-size: 13px;
}
.dash-chip .dc-lbl{ font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.dash-chip strong{ font-family: var(--font-display); font-weight: 700; color: var(--ink) }
.dash-chip--pool{ background: color-mix(in srgb, var(--violet) 12%, var(--paper)); border-color: color-mix(in srgb, var(--violet) 30%, var(--line)) }
.dash-chip--pool strong{ color: var(--violet) }
.dash-balance{
background: var(--paper); border: 1px solid var(--line);
border-radius: 16px; padding: 22px 26px;
box-shadow: var(--shadow-xs);
}
.db-lbl{ font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.db-val{
font-family: var(--font-display); font-weight: 800;
font-size: clamp(30px, 4vw, 44px); letter-spacing: -.025em;
margin: 6px 0 8px;
background: linear-gradient(135deg, var(--violet-2), var(--emerald-2));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.db-foot{ font-size: 12.5px; color: var(--muted) }
.db-foot span{ font-weight: 600 }
/* Income stream tiles */
.income-strip{
display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
margin-top: 14px;
}
.inc-tile{
--it-accent: var(--violet);
--it-soft: var(--violet-soft);
display: flex; flex-direction: column; gap: 6px;
padding: 18px 18px 20px;
background: linear-gradient(160deg, var(--it-soft) 0%, var(--paper) 70%);
border: 1px solid var(--line); border-radius: 14px;
color: var(--ink); text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
position: relative; overflow: hidden;
}
.inc-tile:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--it-accent) 30%, var(--line)) }
.inc-tile--emerald{ --it-accent: var(--emerald-2); --it-soft: var(--emerald-soft) }
.inc-tile--sky { --it-accent: #2E8AE0; --it-soft: #E1F0FC }
.inc-tile--amber { --it-accent: var(--gold, #B58313); --it-soft: var(--amber-soft) }
.inc-tile--violet { --it-accent: var(--violet); --it-soft: var(--violet-soft) }
.inc-tile--coral { --it-accent: var(--coral); --it-soft: var(--coral-soft) }
.inc-icn{
width: 34px; height: 34px; border-radius: 10px;
background: var(--paper); border: 1px solid var(--line);
display: inline-flex; align-items: center; justify-content: center;
color: var(--it-accent);
margin-bottom: 4px;
}
.inc-lbl{ font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.inc-val{ font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.015em; color: var(--ink); font-variant-numeric: tabular-nums }
/* Two-up panel rows */
.dash-row{
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
margin-top: 14px;
}
.dash-panel{
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-xl); padding: 22px 24px;
box-shadow: var(--shadow-xs);
}
.dp-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px }
.dp-tag{
font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--violet);
}
.dp-tag.emerald{ color: var(--emerald-2) }
.dp-tag.amber{ color: var(--gold, #B58313) }
[data-theme="dark"] .dp-tag.amber{ color: var(--amber) }
.dp-head h3{ font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.015em; margin: 4px 0 0 }
.dp-row{
display: flex; justify-content: space-between; align-items: baseline;
font-size: 13.5px; color: var(--muted); margin-bottom: 8px;
}
.dp-row strong{ color: var(--ink); font-weight: 700 }
.dp-split{
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
margin-top: 12px;
}
.dp-split-lbl{ font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px }
.dp-split strong{ font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink) }
.dp-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px }
.dp-stat{
padding: 14px 16px; border-radius: 12px;
background: color-mix(in srgb, var(--ink) 3%, var(--paper));
border: 1px solid var(--line);
}
.dp-stat-lbl{ font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.dp-stat-val{ font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.015em; margin-top: 4px; color: var(--ink) }
.dp-field{
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line);
}
.dp-field:last-child{ border-bottom: none }
.dp-field-k{ font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); flex-shrink: 0 }
.dp-field-v{ font-size: 13.5px; color: var(--ink); text-align: right; word-break: break-all }
.activity{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px }
.activity li{
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.activity li:last-child{ border-bottom: none }
.act-meta strong{ display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink) }
.act-when{ font-size: 11.5px; color: var(--muted); margin-top: 2px; display: block }
.act-amt{ font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px }
.activity li.is-credit .act-amt{ color: var(--emerald-2) }
.activity li.is-debit .act-amt{ color: var(--coral) }
@media (max-width: 1100px){
.income-strip{ grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 900px){
.dash-hero{ grid-template-columns: 1fr; padding: 28px 24px }
.dash-row{ grid-template-columns: 1fr }
}
@media (max-width: 640px){
.income-strip{ grid-template-columns: repeat(2, 1fr) }
.dp-grid{ grid-template-columns: 1fr 1fr }
.dash-hero{ padding: 22px 20px }
}
/* ---------- Support chat ---------- */
.chat{
display: flex; flex-direction: column;
background: var(--paper); border: 1px solid var(--line);
border-radius: 18px; box-shadow: var(--shadow-xs);
height: calc(100vh - 200px); min-height: 480px;
overflow: hidden;
}
.chat-head{
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 4%, var(--paper)), var(--paper));
}
.chat-head-l{ display: flex; align-items: center; gap: 12px }
.chat-av{
width: 36px; height: 36px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700; font-size: 15px;
color: #fff;
}
.chat-av--admin{ background: linear-gradient(135deg, #8A6CFB, #6E48F5) }
.chat-av--member{ background: linear-gradient(135deg, #36DEA0, #02A36B) }
.chat-head strong{ display: block; font-family: var(--font-display); font-size: 15px; letter-spacing: -.005em }
.chat-sub{ display: block; font-size: 12px; color: var(--muted); margin-top: 2px }
.chat-body{
flex: 1 1 auto;
padding: 22px 24px;
overflow-y: auto;
background:
linear-gradient(180deg, color-mix(in srgb, var(--ink) 1.5%, var(--paper)), var(--paper) 60%);
display: flex; flex-direction: column; gap: 12px;
}
.chat-empty{
margin: auto; text-align: center; color: var(--muted);
font-size: 14.5px; line-height: 1.5; max-width: 36ch;
}
.chat-msg{ display: flex; flex-direction: column; gap: 4px; max-width: 78% }
.chat-msg--them{ align-self: flex-start; align-items: flex-start }
.chat-msg--me { align-self: flex-end; align-items: flex-end }
.chat-bubble{
padding: 10px 14px;
border-radius: 16px;
font-size: 14.5px; line-height: 1.45;
word-wrap: break-word; overflow-wrap: anywhere;
}
.chat-msg--them .chat-bubble{
background: color-mix(in srgb, var(--ink) 5%, var(--paper));
border: 1px solid var(--line);
color: var(--ink);
border-bottom-left-radius: 4px;
}
.chat-msg--me .chat-bubble{
background: linear-gradient(135deg, #8A6CFB, #6E48F5);
color: #fff;
border-bottom-right-radius: 4px;
box-shadow: var(--shadow-violet-soft);
}
.chat-meta{
font-size: 11px; color: var(--muted-2);
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
}
.chat-composer{
display: flex; gap: 10px; align-items: flex-end;
padding: 14px 18px;
border-top: 1px solid var(--line);
background: var(--paper);
}
.chat-input{
flex: 1 1 auto;
resize: none; min-height: 42px; max-height: 160px;
padding: 11px 14px; font-size: 14px; line-height: 1.45;
border-radius: 12px; border: 1px solid var(--line);
background: var(--paper); color: var(--ink);
font-family: inherit;
transition: border-color .15s ease, box-shadow .15s ease;
}
.chat-input:focus{ outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 16%, transparent) }
.chat-send{ flex-shrink: 0; padding: 10px 16px; gap: 6px }
/* Admin shell: inbox + thread */
.chat-shell{
display: grid; grid-template-columns: minmax(280px, 340px) 1fr;
gap: 20px; align-items: stretch;
height: calc(100vh - 200px); min-height: 480px;
}
.chat-inbox{
background: var(--paper); border: 1px solid var(--line);
border-radius: 18px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: var(--shadow-xs);
}
.ci-head{
padding: 12px 16px; border-bottom: 1px solid var(--line);
font-size: 12px; color: var(--muted); font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
}
.ci-empty{ padding: 28px 18px; color: var(--muted); font-size: 14px; text-align: center }
.ci-row{
display: grid; grid-template-columns: 36px 1fr auto; gap: 12px;
padding: 12px 14px; border-bottom: 1px solid var(--line);
transition: background .15s ease;
cursor: pointer; color: inherit; text-decoration: none;
}
.ci-row:hover{ background: color-mix(in srgb, var(--violet) 4%, var(--paper)) }
.ci-row.is-active{ background: color-mix(in srgb, var(--violet) 8%, var(--paper)); border-left: 3px solid var(--violet); padding-left: 11px }
.ci-row.has-unread{ background: color-mix(in srgb, var(--emerald) 5%, var(--paper)) }
.ci-av{
width: 36px; height: 36px; border-radius: 12px;
background: linear-gradient(135deg, #36DEA0, #02A36B);
color: #fff; display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.ci-main{ min-width: 0 }
.ci-line{ display: flex; justify-content: space-between; gap: 8px; font-size: 13px }
.ci-line strong{ font-family: var(--font-display); font-weight: 700; color: var(--ink) }
.ci-when{ font-size: 11px; color: var(--muted-2); flex-shrink: 0 }
.ci-preview{
font-size: 12.5px; color: var(--muted); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ci-tag{ color: var(--violet); font-weight: 600; margin-right: 4px }
.ci-unread{
align-self: center;
background: var(--emerald-2); color: #fff;
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
padding: 2px 7px; border-radius: 999px;
min-width: 22px; text-align: center;
}
.chat-thread{ min-width: 0 }
.chat-thread .chat{ height: 100%; min-height: 0 }
.ct-empty{
background: var(--paper); border: 1px solid var(--line);
border-radius: 18px; padding: 60px 28px; text-align: center;
height: 100%; display: flex; flex-direction: column; justify-content: center;
}
.ct-empty h3{ font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 6px }
.ct-empty p{ color: var(--muted); margin: 0 }
@media (max-width: 900px){
.chat-shell{ grid-template-columns: 1fr; height: auto }
.chat-inbox{ max-height: 380px }
.chat-thread .chat{ height: calc(100vh - 280px); min-height: 420px }
}
/* User card pinned to bottom */
.sb-user{
margin-top: auto; padding: 12px;
display: flex; align-items: center; gap: 10px;
background: var(--paper-warm);
border: 1px solid var(--line);
border-radius: var(--r-lg);
margin-top: 22px;
}
.sb-user .av{
width: 38px; height: 38px; border-radius: 50%;
background: linear-gradient(135deg, #8A6CFB 0%, #6E48F5 100%);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 800; font-size: 14px;
flex-shrink: 0;
}
.sb-user .info{ flex: 1; min-width: 0 }
.sb-user .info strong{
display: block; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink);
font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-user .info span{
display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px;
text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono);
}
.sb-user .logout{
width: 32px; height: 32px; border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--muted);
border: 1px solid var(--line);
flex-shrink: 0;
transition: all .2s ease;
}
.sb-user .logout:hover{
background: var(--coral-soft); color: var(--coral); border-color: var(--coral);
}
.app-main{ padding: 32px 30px; min-width: 0 }
.page-head{
display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.page-head h1{ font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 4.4vw, 30px); letter-spacing: -.02em; margin: 0 }
/* Variant: dashboard 5-stat row */
.stat-grid-5{ grid-template-columns: repeat(5, 1fr) }
@media (max-width: 1100px){ .stat-grid-5{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 760px){ .stat-grid-5{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 420px){ .stat-grid-5{ grid-template-columns: 1fr } }
.page-head-form{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.per-page{ display: inline-flex; align-items: center; gap: 8px }
.per-page-lbl{ font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em }
.per-page-select{
padding-right: 32px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
appearance: none; -webkit-appearance: none; -moz-appearance: none;
cursor: pointer;
}
/* Pager (custom: First / Prev / Next / Last) */
.pager{
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-top: 18px;
padding: 14px 18px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
}
.pager-info{ color: var(--muted); font-size: 13.5px }
.pager-info strong{ color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums }
.pager-controls{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.pager-btn{
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: var(--paper);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 10px;
font-size: 13px; font-weight: 600;
text-decoration: none; line-height: 1;
transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.pager-btn svg{ flex-shrink: 0; opacity: .75 }
.pager-btn:hover{
border-color: var(--violet);
color: var(--violet);
background: color-mix(in srgb, var(--violet) 8%, var(--paper));
box-shadow: 0 2px 8px color-mix(in srgb, var(--violet) 18%, transparent);
}
.pager-btn:hover svg{ opacity: 1 }
.pager-btn:active{ transform: translateY(1px) }
.pager-btn.is-disabled{
opacity: .4; pointer-events: none; cursor: not-allowed;
background: var(--paper); color: var(--muted); border-color: var(--line);
box-shadow: none;
}
.pager-page{
font-size: 13.5px; color: var(--muted);
padding: 0 10px;
white-space: nowrap;
}
.pager-page strong{ color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums }
@media (max-width: 640px){
.pager{ flex-direction: column; align-items: stretch }
.pager-controls{ justify-content: space-between }
.pager-btn span{ display: none }
.pager-btn{ padding: 8px 12px }
}
/* ---------- Rank & Pool page ---------- */
.rank-hero{
position: relative; overflow: hidden;
display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px;
padding: 32px 36px;
background: linear-gradient(135deg, var(--violet-soft), var(--emerald-soft) 100%);
border: 1px solid var(--line);
border-radius: var(--r-xl);
box-shadow: var(--shadow-xs);
}
.rank-hero-l{ position: relative; z-index: 1 }
.rank-tag{
font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--violet);
}
.rank-name{
font-family: var(--font-display); font-weight: 800;
font-size: clamp(36px, 4.4vw, 52px); letter-spacing: -.025em;
margin: 6px 0 8px; line-height: 1;
}
.rank-sub{ color: var(--muted); font-size: 15px; max-width: 52ch }
.rank-progress{ margin-top: 22px }
.rp-head{
display: flex; justify-content: space-between; align-items: baseline;
font-size: 13px; color: var(--muted); margin-bottom: 8px;
}
.rp-head strong{ color: var(--ink) }
.rp-pct{ font-family: var(--font-display); font-weight: 700; color: var(--ink) }
.rp-track{
height: 10px; border-radius: 999px;
background: color-mix(in srgb, var(--violet) 12%, var(--paper));
overflow: hidden;
}
.rp-track span{
display: block; height: 100%;
background: linear-gradient(90deg, var(--violet-2), var(--emerald-2));
border-radius: 999px;
transition: width .4s ease;
}
.rp-foot{ margin-top: 8px; font-size: 12.5px; color: var(--muted) }
.rp-foot strong{ color: var(--ink); font-weight: 700 }
.rp-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 6px }
.rp-split-col .rp-track{ margin-top: 6px }
.rp-split-lbl{ display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--muted) }
.rp-split-lbl strong{ color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums }
@media (max-width: 640px){ .rp-split{ grid-template-columns: 1fr } }
.rank-hero-r{
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
position: relative; z-index: 1;
}
.rank-stat{
background: var(--paper); border: 1px solid var(--line);
border-radius: 14px; padding: 14px 16px;
}
.rs-lbl{
font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.rs-val{ font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.015em }
.rs-val.emerald{ color: var(--emerald-2) }
.rs-val.violet{ color: var(--violet) }
/* Rank ladder grid */
.rank-grid{
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
margin-top: 18px;
}
.rank-card{
--rc-accent: var(--violet);
--rc-accent-soft: var(--violet-soft);
position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: 14px;
padding: 20px 20px 22px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 18px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rank-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--rc-accent) 30%, var(--line)) }
.rank-card--amber{ --rc-accent: var(--gold, #B58313); --rc-accent-soft: var(--amber-soft) }
.rank-card--slate{ --rc-accent: var(--muted); --rc-accent-soft: color-mix(in srgb, var(--muted) 12%, var(--paper)) }
.rank-card--sky{ --rc-accent: #2E8AE0; --rc-accent-soft: #E1F0FC }
.rank-card--violet{ --rc-accent: var(--violet); --rc-accent-soft: var(--violet-soft) }
.rank-card--rose{ --rc-accent: #DA557A; --rc-accent-soft: #FCE2EA }
.rank-card--coral{ --rc-accent: var(--coral); --rc-accent-soft: var(--coral-soft) }
.rank-card--achieved{
background: linear-gradient(160deg, var(--rc-accent-soft) 0%, var(--paper) 70%);
border-color: color-mix(in srgb, var(--rc-accent) 28%, var(--line));
}
.rank-card--next{
border-color: color-mix(in srgb, var(--rc-accent) 35%, var(--line));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc-accent) 12%, transparent);
}
.rank-card--locked{ opacity: .8 }
.rc-head{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px }
.rc-tier{
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 9px;
font-family: var(--font-display); font-weight: 800; font-size: 12px;
background: color-mix(in srgb, var(--rc-accent) 14%, transparent);
color: var(--rc-accent);
}
.rc-head h3{ font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0; letter-spacing: -.01em }
.rc-pill{
font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
padding: 4px 9px; border-radius: 999px; line-height: 1;
}
.rc-pill--ok{ background: var(--emerald-soft); color: var(--emerald-2) }
.rc-pill--warn{ background: var(--amber-soft); color: var(--gold, #B58313) }
.rc-pill--lock{ background: color-mix(in srgb, var(--muted) 12%, var(--paper)); color: var(--muted) }
[data-theme="dark"] .rc-pill--warn{ color: var(--amber) }
.rc-stats{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.rc-stat{
padding: 10px 12px;
background: color-mix(in srgb, var(--rc-accent) 5%, var(--paper));
border: 1px solid var(--line);
border-radius: 10px;
}
.rc-lbl{ font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted) }
.rc-stat strong{ display: block; font-family: var(--font-display); font-weight: 800; font-size: 18px; margin-top: 4px; color: var(--ink); font-variant-numeric: tabular-nums }
.rc-req{ font-size: 12.5px; color: var(--muted); line-height: 1.45 }
.rc-pool{
font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
padding: 6px 10px; border-radius: 8px;
background: color-mix(in srgb, var(--rc-accent) 12%, transparent);
color: var(--rc-accent); align-self: flex-start;
}
/* Pool cards */
.pool-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px }
.pool-card{
position: relative; overflow: hidden;
padding: 26px 28px;
background: linear-gradient(160deg, var(--paper) 0%, color-mix(in srgb, var(--violet) 6%, var(--paper)) 100%);
border: 1px solid var(--line); border-radius: 18px;
}
.pool-card--eligible{
background: linear-gradient(160deg, var(--violet-soft) 0%, var(--emerald-soft) 100%);
border-color: color-mix(in srgb, var(--violet) 30%, var(--line));
}
.pool-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px }
.pool-head h3{ font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0; letter-spacing: -.015em }
.pool-pct{
font-family: var(--font-display); font-weight: 800;
font-size: 36px; letter-spacing: -.02em;
background: linear-gradient(135deg, var(--violet-2), var(--emerald-2));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.pool-card p{ color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 14px }
.pool-foot{ display: flex; justify-content: flex-end }
@media (max-width: 1024px){
.rank-grid{ grid-template-columns: repeat(2, 1fr) }
.rank-hero{ grid-template-columns: 1fr; padding: 28px 24px }
.rank-hero-r{ grid-template-columns: repeat(4, 1fr) }
}
@media (max-width: 640px){
.rank-grid{ grid-template-columns: 1fr }
.pool-grid{ grid-template-columns: 1fr }
.rank-hero-r{ grid-template-columns: 1fr 1fr }
.rank-hero{ padding: 22px 20px }
.rs-val{ font-size: 18px }
}
/* Welcome banner */
.welcome-banner{
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--violet-soft) 0%, var(--coral-soft) 50%, var(--amber-soft) 100%);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 28px 30px;
margin-bottom: 22px;
}
[data-theme="dark"] .welcome-banner{
background: linear-gradient(135deg, rgba(159,132,255,.16) 0%, rgba(255,145,102,.14) 50%, rgba(255,213,102,.14) 100%);
}
.welcome-banner::after{
content: ""; position: absolute; right: -60px; top: -60px;
width: 220px; height: 220px; border-radius: 50%;
background: linear-gradient(135deg, var(--violet) 0%, var(--rose) 100%);
opacity: .12; pointer-events: none;
}
.welcome-banner h1{
font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -.02em; margin: 0 0 6px;
}
.welcome-banner .sub{ color: var(--muted); font-size: 15px; margin: 0; max-width: 60ch }
.welcome-banner .pill{
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border-radius: var(--r-pill);
background: var(--paper); border: 1px solid var(--line-2);
font-family: var(--font-mono); font-size: 12px; color: var(--ink);
margin-bottom: 12px;
}
.welcome-banner .pill .dot{ width: 7px; height: 7px; background: var(--emerald); border-radius: 50%; animation: ePulse 1.8s infinite }
.booster-strip{
display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
}
.boost-chip{
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: var(--r-pill);
font-family: var(--font-display); font-weight: 700; font-size: 12px;
color: #fff;
background: linear-gradient(135deg, #8A6CFB 0%, #6E48F5 100%);
box-shadow: var(--shadow-violet-soft);
}
.boost-chip.emerald{ background: linear-gradient(135deg, #36DEA0 0%, #02A36B 100%); box-shadow: 0 4px 14px rgba(0,200,128,.25) }
/* Colored stat cards */
.stat-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px }
.stat{
position: relative; overflow: hidden;
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 22px;
box-shadow: var(--shadow-xs);
transition: transform .25s ease, box-shadow .25s ease;
}
.stat:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md) }
.stat::after{
content: ""; position: absolute; right: -28px; top: -28px;
width: 110px; height: 110px; border-radius: 50%;
background: var(--violet-soft); opacity: .7; z-index: 0;
}
.stat .stat-icn{
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 12px;
background: var(--violet-soft); color: var(--violet);
position: relative; z-index: 1; margin-bottom: 12px;
}
.stat .lbl{ font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); position: relative; z-index: 1 }
.stat .num{ font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; margin-top: 6px; line-height: 1.1; position: relative; z-index: 1; word-break: break-word }
.stat.emerald::after{ background: var(--emerald-soft) }
.stat.emerald .stat-icn{ background: var(--emerald-soft); color: var(--emerald-2) }
.stat.coral::after{ background: var(--coral-soft) }
.stat.coral .stat-icn{ background: var(--coral-soft); color: var(--coral) }
.stat.amber::after{ background: var(--amber-soft) }
.stat.amber .stat-icn{ background: var(--amber-soft); color: var(--gold) }
[data-theme="dark"] .stat.amber .stat-icn{ color: var(--amber) }
.stat.rose::after{ background: var(--rose-soft) }
.stat.rose .stat-icn{ background: var(--rose-soft); color: var(--rose) }
/* Two-up info cards row */
.info-row{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px }
.info-card{
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-xl); padding: 24px;
box-shadow: var(--shadow-xs);
}
.info-card h3{
font-family: var(--font-display); font-weight: 700; font-size: 17px;
margin: 0 0 14px; display: flex; align-items: center; gap: 10px;
}
.info-card h3 .ic{
width: 30px; height: 30px; border-radius: 9px;
background: var(--violet-soft); color: var(--violet);
display: inline-flex; align-items: center; justify-content: center;
}
.info-card h3.emerald .ic{ background: var(--emerald-soft); color: var(--emerald-2) }
.info-card h3.coral .ic{ background: var(--coral-soft); color: var(--coral) }
.info-card .field{ margin-bottom: 14px }
.info-card .field:last-child{ margin-bottom: 0 }
.info-card .field .k{
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
text-transform: uppercase; letter-spacing: .12em; margin-bottom: 4px;
}
.info-card .field .v{ font-family: var(--font-mono); font-size: 13px; word-break: break-all }
.info-card .field .v.big{ font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em }
/* Action tiles (CTA grid below the dashboard) */
.action-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px }
.action-tile{
display: block; text-decoration: none; color: var(--ink);
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-xl); padding: 22px;
transition: all .25s ease;
position: relative; overflow: hidden;
}
.action-tile:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--violet); color: var(--ink) }
.action-tile .ai{
width: 40px; height: 40px; border-radius: 12px;
background: var(--violet-soft); color: var(--violet);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.action-tile.emerald .ai{ background: var(--emerald-soft); color: var(--emerald-2) }
.action-tile.coral .ai{ background: var(--coral-soft); color: var(--coral) }
.action-tile h4{
font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; margin: 0 0 4px;
}
.action-tile p{ color: var(--muted); margin: 0; font-size: 14px }
.action-tile .arr{ position: absolute; right: 22px; top: 22px; color: var(--muted); transition: transform .2s ease, color .2s ease }
.action-tile:hover .arr{ transform: translate(3px, -3px); color: var(--violet) }
/* Referral hero — intentionally a fixed dark panel in BOTH themes
(premium-card vibe). All inner colors are hard-coded so theme-token
inversions can't flip the background light. */
.ref-hero{
position: relative; overflow: hidden;
background:
radial-gradient(circle at 0% 100%, rgba(110,72,245,.40), transparent 60%),
radial-gradient(circle at 100% 0%, rgba(255,122,184,.32), transparent 60%),
#1A1626;
color: #ffffff;
border-radius: var(--r-xl);
padding: 32px;
}
.ref-hero .kicker{
font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: rgba(255,255,255,.65); margin-bottom: 8px;
}
.ref-hero h2{
font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; margin: 0 0 6px;
color: #ffffff;
}
.ref-hero p{
color: rgba(255,255,255,.78); margin: 0 0 24px; font-size: 15px;
}
.ref-code-box{
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--r-md);
padding: 14px 20px;
display: flex; align-items: center; gap: 14px;
}
.ref-code-box .lbl{
font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: rgba(255,255,255,.60);
}
.ref-code-box .code{
font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.01em;
color: #ffffff;
}
.ref-code-box button{
margin-left: auto;
background: #ffffff; color: #1A1626; border: 0;
border-radius: var(--r-pill); padding: 8px 16px;
font-family: var(--font-display); font-weight: 700; font-size: 13px; cursor: pointer;
transition: background .2s ease, transform .15s ease;
}
.ref-code-box button:hover{ background: var(--amber); transform: translateY(-1px) }
.ref-link-box{
margin-top: 14px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--r-md);
padding: 12px 16px;
font-family: var(--font-mono); font-size: 13px;
color: rgba(255,255,255,.85);
word-break: break-all;
cursor: pointer;
}
.ref-link-box:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22) }
.copy-toast{
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
background: var(--emerald); color: #fff;
padding: 10px 20px; border-radius: var(--r-pill);
font-family: var(--font-display); font-weight: 600; font-size: 14px;
box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
z-index: 100;
}
.copy-toast.show{ opacity: 1; transform: translateX(-50%) translateY(-4px) }
/* ---------- Investment package cards ---------- */
.pkg-grid{
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 28px;
}
.pkg-card{
--pkg: var(--violet);
--pkg-soft: var(--violet-soft);
position: relative; overflow: hidden;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 26px 24px;
display: flex; flex-direction: column; gap: 14px;
box-shadow: var(--shadow-sm);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pkg-card::before{
content: ""; position: absolute; inset: -1px; border-radius: var(--r-xl);
background: linear-gradient(135deg, var(--pkg), transparent 60%);
opacity: 0; transition: opacity .3s ease; pointer-events: none;
z-index: 0; mask: linear-gradient(180deg, #000 0%, #000 8%, transparent 8%);
-webkit-mask: linear-gradient(180deg, #000 0%, #000 8%, transparent 8%);
}
.pkg-card::after{
content: ""; position: absolute; right: -38px; top: -38px;
width: 140px; height: 140px; border-radius: 50%;
background: var(--pkg-soft);
z-index: 0;
}
.pkg-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pkg) }
.pkg-card > *{ position: relative; z-index: 1 }
.pkg-card.amber{ --pkg: var(--amber); --pkg-soft: var(--amber-soft) }
.pkg-card.sky{ --pkg: var(--sky); --pkg-soft: var(--sky-soft) }
.pkg-card.emerald{ --pkg: var(--emerald); --pkg-soft: var(--emerald-soft) }
.pkg-card.coral{ --pkg: var(--coral); --pkg-soft: var(--coral-soft) }
.pkg-card.rose{ --pkg: var(--rose); --pkg-soft: var(--rose-soft) }
.pkg-card.violet{ --pkg: var(--violet); --pkg-soft: var(--violet-soft) }
.pkg-card.slate{ --pkg: var(--slate); --pkg-soft: var(--slate-soft) }
.pkg-card.featured{
background: linear-gradient(180deg, var(--paper) 0%, var(--violet-soft) 100%);
border-color: var(--violet);
}
[data-theme="dark"] .pkg-card.featured{ background: linear-gradient(180deg, var(--paper) 0%, rgba(159,132,255,.10) 100%) }
.pkg-ribbon{
position: absolute; top: 14px; right: 14px;
padding: 5px 10px; border-radius: var(--r-pill);
background: var(--amber); color: var(--ink);
font-family: var(--font-display); font-weight: 700; font-size: 11px;
z-index: 2;
}
.pkg-card:has(.pkg-ribbon){ padding-top: 56px; }
.pkg-head{
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.pkg-stars{
display: inline-flex; align-items: center; gap: 2px;
color: var(--pkg);
background: var(--pkg-soft);
padding: 5px 10px; border-radius: var(--r-pill);
}
.pkg-name{
font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.01em;
color: var(--pkg);
}
.pkg-range{
font-family: var(--font-display);
display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
margin-top: 2px;
}
.pkg-range strong{
font-size: 32px; font-weight: 800; letter-spacing: -.025em; line-height: 1;
background: linear-gradient(135deg, var(--pkg), color-mix(in srgb, var(--pkg) 60%, var(--ink)));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.pkg-range span{ color: var(--muted); font-weight: 600; font-size: 16px }
.pkg-daily{
display: inline-flex; align-items: center; gap: 6px;
background: var(--pkg-soft); color: var(--pkg);
padding: 5px 10px; border-radius: var(--r-pill);
font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
letter-spacing: -.005em;
align-self: flex-start;
}
.pkg-daily::before{
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--pkg); box-shadow: 0 0 0 0 var(--pkg);
}
.pkg-perks{
list-style: none; padding: 0; margin: 6px 0 14px;
display: flex; flex-direction: column; gap: 7px;
font-size: 13.5px; color: var(--ink-2); flex: 1;
}
.pkg-perks li{
display: flex; align-items: center; gap: 8px;
}
.pkg-perks li::before{
content: ""; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%;
background: var(--pkg);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* ---------- Section heads within the panel ---------- */
.section-head-block{ margin: 36px 0 18px }
.section-head-block .section-tag{ margin-bottom: 12px }
.section-head-block h2{
font-family: var(--font-display); font-weight: 800; font-size: 28px;
letter-spacing: -.02em; margin: 0 0 6px;
}
.section-head-block h2 .gradient{ background: var(--grad-violet); -webkit-background-clip: text; background-clip: text; color: transparent }
.section-head-block p{ color: var(--muted); margin: 0; max-width: 64ch; font-size: 14.5px; line-height: 1.55 }
/* ---------- Profit Sharing table ---------- */
.ps-grid{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-bottom: 8px }
.ps-table{
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-xs);
}
.ps-head{
display: grid; grid-template-columns: 1fr auto;
padding: 14px 22px;
background: linear-gradient(135deg, var(--amber-soft), var(--coral-soft));
font-family: var(--font-display); font-weight: 700; font-size: 14px;
border-bottom: 1px solid var(--line);
}
.ps-head span:last-child{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; align-self: center }
.ps-row{
display: grid; grid-template-columns: 1fr auto;
padding: 14px 22px;
border-bottom: 1px solid var(--line);
transition: background .2s ease;
}
.ps-row:last-child{ border-bottom: none }
.ps-row:hover{ background: color-mix(in srgb, var(--ink) 3%, transparent) }
.ps-row .lv{ display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px }
.ps-row .lv-dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0 }
.ps-row .pct{
font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em;
background: var(--grad-violet); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-tip{
background: linear-gradient(180deg, var(--violet-soft) 0%, var(--paper) 100%);
border: 1px solid var(--violet-soft);
border-radius: var(--r-xl); padding: 22px;
}
[data-theme="dark"] .ps-tip{ background: linear-gradient(180deg, rgba(159,132,255,.10) 0%, var(--paper) 100%); border-color: rgba(159,132,255,.18) }
.ps-tip-ico{
width: 40px; height: 40px; border-radius: 12px;
background: var(--paper); color: var(--violet);
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line);
margin-bottom: 12px;
}
.ps-tip h4{ font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 0 6px }
.ps-tip p{ color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 0 }
.ps-tip p strong{ color: var(--violet) }
/* ---------- Criteria tables (directs + packages) ---------- */
.criteria-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px }
.cr-table{
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-xs);
}
.cr-head{
display: grid; grid-template-columns: 1fr auto;
padding: 14px 22px;
font-family: var(--font-display); font-weight: 700; font-size: 14px;
border-bottom: 1px solid var(--line);
}
.cr-head.amber{ background: linear-gradient(135deg, var(--amber-soft), color-mix(in srgb, var(--amber-soft) 50%, var(--paper))); color: color-mix(in srgb, var(--gold, #B58313) 80%, var(--ink)) }
.cr-head.violet{ background: linear-gradient(135deg, var(--violet-soft), color-mix(in srgb, var(--violet-soft) 50%, var(--paper))); color: var(--violet) }
[data-theme="dark"] .cr-head.amber{ color: var(--amber) }
.cr-head span:last-child{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; align-self: center; opacity: .8 }
.cr-row{
display: grid; grid-template-columns: 1fr auto;
padding: 12px 22px;
border-bottom: 1px solid var(--line);
transition: background .2s ease;
font-size: 14px;
}
.cr-row:last-child{ border-bottom: none }
.cr-row:hover{ background: color-mix(in srgb, var(--ink) 3%, transparent) }
.cr-row .cr-k{ display: inline-flex; align-items: center; gap: 10px; font-weight: 600 }
.cr-row .cr-stars{ font-family: var(--font-display); font-size: 13px; line-height: 1 }
.cr-row .cr-v{ font-family: var(--font-mono); font-size: 13px; color: var(--violet); font-weight: 600 }
/* ---------- Income caps row ---------- */
.cap-row{
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
margin-top: 8px;
}
.cap-card{
--pkg: var(--violet);
--pkg-soft: var(--violet-soft);
position: relative; overflow: hidden;
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-xl); padding: 22px 22px 20px;
box-shadow: var(--shadow-xs);
}
.cap-card.emerald{ --pkg: var(--emerald); --pkg-soft: var(--emerald-soft) }
.cap-card.coral{ --pkg: var(--coral); --pkg-soft: var(--coral-soft) }
.cap-card.violet{ --pkg: var(--violet); --pkg-soft: var(--violet-soft) }
.cap-card::after{
content: ""; position: absolute; right: -34px; bottom: -34px;
width: 130px; height: 130px; border-radius: 50%;
background: var(--pkg-soft); opacity: .8;
}
.cap-card > *{ position: relative; z-index: 1 }
.cap-tag{
display: inline-block;
padding: 4px 10px; border-radius: var(--r-pill);
background: var(--pkg-soft); color: var(--pkg);
font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
margin-bottom: 12px;
}
.cap-val{
font-family: var(--font-display); font-weight: 800;
font-size: 60px; line-height: 1; letter-spacing: -.04em;
background: linear-gradient(135deg, var(--pkg), color-mix(in srgb, var(--pkg) 50%, var(--ink)));
-webkit-background-clip: text; background-clip: text; color: transparent;
margin-bottom: 8px;
}
.cap-val span{ font-size: 32px; color: var(--muted); -webkit-text-fill-color: var(--muted); margin-left: 2px }
.cap-card p{ color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 }
.cap-card p strong{ color: var(--pkg); font-weight: 700 }
.table-wrap{
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch;
box-shadow: var(--shadow-xs);
}
table.tbl{ width: 100%; border-collapse: collapse; font-size: 14px }
table.tbl th, table.tbl td{ padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left }
table.tbl tr:last-child td{ border-bottom: none }
table.tbl th{
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
font-weight: 500; background: var(--paper-warm);
}
table.tbl tr:hover td{ background: var(--paper-warm) }
.badge{ display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600 }
.badge-ok{ background: var(--emerald-soft); color: var(--emerald-2) }
.badge-bad{ background: var(--coral-soft); color: var(--coral) }
.badge-warn{ background: var(--amber-soft); color: var(--gold, #B58313) }
[data-theme="dark"] .badge-warn{ color: var(--amber) }
.card{
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 26px;
box-shadow: var(--shadow-xs);
}
/* ---------- Helpers ---------- */
.gap-2{ display: flex; gap: 8px; align-items: center }
.gap-3{ display: flex; gap: 12px; align-items: center }
.hide{ display: none !important }
.center{ text-align: center }
/* ---------- Responsive ---------- */
@media (max-width: 1100px){
.container{ padding: 0 22px }
.hero-grid{ grid-template-columns: 1fr; gap: 56px }
.hero-art{ min-height: 440px; max-width: 460px; margin: 0 auto }
}
@media (max-width: 900px){
.nav-links{ display: none }
.nav-toggle{ display: inline-flex }
body.nav-open .nav-links{
display: flex; flex-direction: column;
position: absolute; top: 72px; left: 0; right: 0;
padding: 16px 22px; background: var(--bg);
border-bottom: 1px solid var(--line);
}
/* iOS Safari quirk: position:sticky lags the URL-bar collapse, so the
header briefly scrolls up. Switch to position:fixed and pad the body
to compensate. */
.site-header{
position: fixed; left: 0; right: 0; top: 0;
background: color-mix(in srgb, var(--bg) 78%, transparent);
backdrop-filter: saturate(160%) blur(16px);
-webkit-backdrop-filter: saturate(160%) blur(16px);
border-bottom: 1px solid var(--line);
}
body{ padding-top: calc(60px + env(safe-area-inset-top, 0)) }
.app-shell{ min-height: calc(100dvh - 60px - env(safe-area-inset-top, 0)) }
.how, .plans, .voices, .stat-row{ grid-template-columns: 1fr 1fr }
.pkg-grid{ grid-template-columns: 1fr 1fr }
.cap-row{ grid-template-columns: 1fr 1fr }
.ps-grid{ grid-template-columns: 1fr }
.criteria-grid{ grid-template-columns: 1fr }
.calc-block{ grid-template-columns: 1fr; gap: 30px; padding: 28px }
.cp-grid{ grid-template-columns: 1fr }
.cp-col{ border-right: none; border-bottom: 1px solid var(--cp-line); padding: 26px 24px 28px }
.cp-col:last-child{ border-bottom: none }
.cp-topbar{ padding: 16px 22px; flex-wrap: wrap }
.cp-bar-r{ width: 100% }
.footer-grid{ grid-template-columns: 1fr 1fr }
.app-shell{ grid-template-columns: 1fr }
/* Sidebar drawer mode: hidden off-screen, slides in from left when .sidebar-open is set */
body.panel-layout .sidebar-toggle{ display: inline-flex }
body.panel-layout .sidebar{
position: fixed; top: 0; left: 0; bottom: 0;
height: auto; align-self: auto;
width: min(86vw, 320px);
background: var(--paper);
border-right: 1px solid var(--line);
border-bottom: none;
overflow-y: auto;
transform: translateX(-101%);
transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s ease;
z-index: 60;
padding: 22px 14px 18px;
will-change: transform;
}
body.panel-layout.sidebar-open .sidebar{
transform: translateX(0);
box-shadow: var(--shadow-lg);
}
body.panel-layout.sidebar-open{ overflow: hidden }
/* Show the X close button inside the drawer */
body.panel-layout .sb-close{ display: inline-flex }
/* Give the brand strip extra right padding so the X doesn't overlap */
body.panel-layout .sb-brand{ padding-right: 50px }
.stat-grid{ grid-template-columns: 1fr 1fr }
.info-row{ grid-template-columns: 1fr }
.action-row{ grid-template-columns: 1fr 1fr }
.app-main{ padding: 24px 18px }
}
/* Compact button size (for inline row actions) */
.btn-xs{ padding: 6px 10px; font-size: 12px; border-radius: 8px; line-height: 1 }
.row-actions{ display: inline-flex; flex-wrap: nowrap; gap: 6px; align-items: center; white-space: nowrap }
.row-actions-form{ display: inline-flex; margin: 0 }
.tbl .nowrap{ white-space: nowrap }
@media (max-width: 760px){
/* Admin panel: tighter outer padding, stacked page heads, table scrolls horizontally */
.app-main{ padding: 20px 14px }
.page-head{ align-items: flex-start; gap: 12px }
.page-head-form{ width: 100%; flex-wrap: wrap }
.page-head-form .input{ flex: 1 1 160px; min-width: 0 }
.per-page{ order: 2 }
.page-head-form .btn{ order: 3 }
table.tbl{ min-width: 880px; font-size: 13px }
table.tbl th, table.tbl td{ padding: 12px 14px; white-space: nowrap }
.card{ padding: 22px 18px }
.form-row{ grid-template-columns: 1fr }
}
@media (max-width: 640px){
.section{ padding: 64px 0 }
.container{ padding: 0 20px }
.how, .plans, .voices, .stat-row{ grid-template-columns: 1fr }
.stat-grid{ grid-template-columns: 1fr 1fr }
.pkg-grid{ grid-template-columns: 1fr }
.cap-row{ grid-template-columns: 1fr }
.stream{ border-radius: 22px }
.stream-side{ padding: 28px 22px }
.stream-viz{ padding: 24px 22px 28px; gap: 18px }
.stream-num{ font-size: clamp(52px, 16vw, 84px) }
.lvl-bars{ grid-template-columns: 1fr; gap: 4px }
.roi-ticks{ grid-template-columns: repeat(2, 1fr) }
.bonus-stack{ grid-template-columns: 1fr; gap: 10px }
.bs-card{ padding: 14px 16px }
.bs-to{ font-size: 30px }
.ps-head, .cr-head, .ps-row, .cr-row{ padding-left: 16px; padding-right: 16px }
.section-head-block h2{ font-size: 22px }
.modal-card{ padding: 26px 22px 20px }
.modal-input input{ font-size: 28px }
.modal-preview{ grid-template-columns: 1fr }
.prev-item.big{ grid-column: span 1 }
.prev-item .val{ font-size: 20px }
.prev-item.big .val{ font-size: 26px }
.action-row{ grid-template-columns: 1fr }
.welcome-banner{ padding: 22px }
.welcome-banner h1{ font-size: 22px }
.ref-hero{ padding: 24px }
.ref-hero h2{ font-size: 22px }
.ref-code-box{ flex-wrap: wrap; padding: 14px 16px }
.ref-code-box button{ margin-left: 0; margin-top: 8px; width: 100% }
.stat-grid{ grid-template-columns: 1fr 1fr }
.footer-grid{ grid-template-columns: 1fr }
/* Frosted header stays — slightly more opaque on phones to keep nav legible over aurora */
.site-header{ background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--line) }
/* Tighter hero padding + compact 3-up stats row instead of tall stacked card */
.hero{ padding: 70px 0 40px }
.hero-stats{ grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 28px }
.hero-stat{ padding: 14px 10px; border-right: 1px solid var(--line); border-bottom: none; text-align: center }
.hero-stat:last-child{ border-right: none }
.hero-stat strong{ font-size: 16px }
.hero-stat span{ font-size: 10px; letter-spacing: .06em }
.calc-output{ grid-template-columns: 1fr }
.calc-row.big{ grid-column: auto }
.calc-amount input{ font-size: 32px }
.calc-row .val{ font-size: 26px }
.calc-row.big .val{ font-size: 38px }
.btn{ padding: 10px 16px; font-size: 14px }
.btn-lg{ padding: 14px 22px; font-size: 15px }
.cta-inner{ padding: 60px 26px }
.preview{ padding: 22px }
.preview-amount{ font-size: 38px }
.nav{ gap: 10px; height: 60px; min-height: 60px; align-items: center }
.brand{ gap: 10px }
.brand-text{ font-size: 15.5px; line-height: 1 }
.brand-logo{ width: 44px; height: 44px; padding: 0; border-radius: 10px }
.nav-cta{ gap: 6px }
.theme-toggle{ width: 38px; height: 38px; flex-shrink: 0 }
.nav-cta .btn{ padding: 9px 18px; font-size: 13.5px; line-height: 1 }
.float-chip{ display: none }
}
/* ---------- Dark-mode contrast overrides for solid-fill brand surfaces ---------- */
[data-theme="dark"] .plan-ribbon,
[data-theme="dark"] .sidebar a.active,
[data-theme="dark"] .auth-flag{
background: #7C5DFB; color: #fff;
}
[data-theme="dark"] .chip.active{ background: #7C5DFB; color: #fff; border-color: #7C5DFB }
[data-theme="dark"] .voice .av{
background: linear-gradient(135deg, #8A6CFB 0%, #6E48F5 50%, #5536D8 100%); color: #fff;
}
[data-theme="dark"] .faq details[open] summary::after{ background: #7C5DFB; color: #fff }
/* ---------- AI Wallet hero ---------- */
.ai-wallet-hero{
position: relative; overflow: hidden;
background:
radial-gradient(circle at 0% 100%, rgba(110,72,245,.40), transparent 60%),
radial-gradient(circle at 100% 0%, rgba(54,222,160,.30), transparent 60%),
#1A1626;
color: #ffffff;
border-radius: var(--r-xl);
padding: 36px 32px;
margin-bottom: 22px;
}
.ai-wallet-hero .kicker{
font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
color: rgba(255,255,255,.65); display: block; margin-bottom: 12px;
}
.ai-wallet-hero .ai-wallet-amount{
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
font-family: var(--font-display); font-weight: 800; line-height: 1;
margin-bottom: 14px;
}
.ai-wallet-hero .ai-wallet-amount > span:nth-child(2){
font-size: clamp(48px, 7vw, 84px); letter-spacing: -.035em;
background: linear-gradient(135deg, #C5A6FF 0%, #6E48F5 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ai-wallet-hero .ai-wallet-amount .suf{
font-family: var(--font-display); font-weight: 700; font-size: 22px;
color: rgba(255,255,255,.65);
}
.ai-wallet-hero .muted{ color: rgba(255,255,255,.70); margin: 0 0 22px; max-width: 60ch }
.ai-wallet-hero .info-card .muted{ color: var(--muted); margin: 0 }
.ai-wallet-actions{ display: flex; gap: 10px; flex-wrap: wrap }
.ai-wallet-actions .btn-outline{
--bg-: transparent; --color-: #ffffff; --bd-: rgba(255,255,255,.30);
box-shadow: none;
}
.ai-wallet-actions .btn-outline:hover{ --bd-: #ffffff; background: rgba(255,255,255,.08) }
/* ---------- Admin: Vault console ---------- */
.vault-warn{
display: flex; gap: 14px; align-items: flex-start;
background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent);
border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 18px;
}
.vault-warn[hidden]{ display: none }
[data-theme="dark"] .vault-warn{
background: rgba(255,213,102,.10); border-color: rgba(255,213,102,.35);
}
.vault-warn-ic{
width: 32px; height: 32px; border-radius: 50%;
background: var(--amber); color: var(--ink);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800; flex-shrink: 0;
}
.vault-warn strong{ display: block; font-family: var(--font-display); font-size: 15px }
.vault-warn p{ color: var(--muted); margin: 0; font-size: 14px }
.vault-grid{
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.vault-tile{
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 16px 18px;
box-shadow: var(--shadow-xs);
}
.vault-tile.emerald{ background: linear-gradient(135deg, var(--emerald-soft), var(--paper)); border-color: color-mix(in srgb, var(--emerald) 30%, transparent) }
.vault-tile.coral{ background: linear-gradient(135deg, var(--coral-soft), var(--paper)); border-color: color-mix(in srgb, var(--coral) 30%, transparent) }
.vault-tile.amber{ background: linear-gradient(135deg, var(--amber-soft), var(--paper)); border-color: color-mix(in srgb, var(--amber) 35%, transparent) }
[data-theme="dark"] .vault-tile.emerald{ background: linear-gradient(135deg, rgba(54,222,160,.10), var(--paper)) }
[data-theme="dark"] .vault-tile.coral { background: linear-gradient(135deg, rgba(255,145,102,.10), var(--paper)) }
[data-theme="dark"] .vault-tile.amber { background: linear-gradient(135deg, rgba(255,213,102,.10), var(--paper)) }
.vault-tile .vt-lbl{
font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.vault-tile .vt-val{
font-family: var(--font-display); font-weight: 700; font-size: 16px;
word-break: break-all; line-height: 1.3;
}
.vault-tile .vt-val.mono{ font-family: var(--font-mono); font-size: 13px; font-weight: 500 }
.vault-tile .vt-val strong{ font-family: var(--font-display); font-weight: 800; font-size: 18px }
.vault-tile a{ color: var(--violet); border-bottom: 1px dotted color-mix(in srgb, var(--violet) 50%, transparent); padding-bottom: 1px }
.vault-actions{
display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
position: relative;
}
.vault-actions[data-disabled="1"]{ pointer-events: none; opacity: .55 }
.vault-form{
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 22px;
display: flex; flex-direction: column; gap: 10px;
box-shadow: var(--shadow-xs);
}
.vault-form.featured{ border-color: var(--violet); box-shadow: var(--shadow-violet-soft) }
.vault-form h4{ font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 }
.vault-form p.muted{ font-size: 13px; line-height: 1.45; margin: 0 0 2px }
.vault-form .input{ font-size: 14px; padding: 11px 14px }
.vault-form .gap-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.vault-form button[type="submit"]{ margin-top: 6px; align-self: flex-start }
.vault-form code{
font-family: var(--font-mono); font-size: 11.5px;
background: var(--paper-warm); padding: 1px 6px; border-radius: 4px;
}
@media (max-width: 900px){
.vault-grid{ grid-template-columns: 1fr 1fr }
.vault-actions{ grid-template-columns: 1fr }
.vault-form .gap-2{ grid-template-columns: 1fr }
}
@media (max-width: 640px){
.vault-grid{ grid-template-columns: 1fr }
}
/* ---------- Deposit modal ---------- */
.modal-overlay{
position: fixed; inset: 0;
display: flex; align-items: center; justify-content: center;
padding: 20px;
z-index: 200;
opacity: 0; pointer-events: none;
transition: opacity .25s ease;
}
.modal-overlay.open{ opacity: 1; pointer-events: auto }
.modal-overlay[hidden]{ display: none }
.modal-backdrop{
position: absolute; inset: 0;
background: rgba(8, 6, 16, .55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
[data-theme="dark"] .modal-backdrop{ background: rgba(0, 0, 0, .7) }
.modal-card{
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
box-shadow: var(--shadow-lg);
width: 100%; max-width: 480px;
max-height: calc(100dvh - 40px);
overflow-y: auto;
padding: 32px 28px 24px;
transform: translateY(20px) scale(.96);
transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.modal-overlay.open .modal-card{ transform: translateY(0) scale(1) }
.modal-close{
position: absolute; top: 14px; right: 14px;
width: 34px; height: 34px; border-radius: 10px;
background: transparent; border: 1px solid var(--line-2); color: var(--muted);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; transition: all .2s ease;
}
.modal-close:hover{ color: var(--coral); border-color: var(--coral); background: var(--coral-soft) }
.modal-head{ text-align: center; margin-bottom: 22px }
.modal-stars{ font-size: 18px; letter-spacing: .04em; line-height: 1; margin-bottom: 8px; color: var(--violet) }
.modal-head h2{
font-family: var(--font-display); font-weight: 800; font-size: 24px;
letter-spacing: -.02em; margin: 0 0 6px;
}
.modal-head p{ color: var(--muted); margin: 0; font-size: 14px; line-height: 1.5 }
.modal-head p strong{ color: var(--violet) }
.modal-body label{
display: block; font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 8px;
}
.modal-input{
display: flex; align-items: baseline; gap: 8px;
background: var(--paper-warm);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
padding: 14px 18px;
margin-bottom: 8px;
}
.modal-input input{
flex: 1; background: transparent; border: none; outline: none;
font-family: var(--font-display); font-weight: 800; font-size: 36px;
letter-spacing: -.025em; color: var(--ink); min-width: 0;
}
.modal-input .suf{ font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--muted) }
.modal-hint{
font-family: var(--font-mono); font-size: 12px; color: var(--muted);
margin-bottom: 14px;
}
.modal-hint strong{ color: var(--ink); font-weight: 600 }
.modal-error{
background: var(--coral-soft); color: var(--coral);
padding: 10px 14px; border-radius: var(--r-md);
font-size: 13px; font-weight: 600;
margin-bottom: 14px;
}
.modal-preview{
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin: 16px 0 20px;
}
.prev-item{
padding: 14px 16px;
background: var(--paper-warm); border: 1px solid var(--line);
border-radius: var(--r-md);
}
.prev-item.big{
grid-column: span 2;
background: linear-gradient(135deg, var(--violet-soft), var(--paper-warm));
border-color: var(--violet-soft);
}
.prev-item .lbl{
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.prev-item .val{
display: block; font-family: var(--font-display); font-weight: 800;
font-size: 24px; letter-spacing: -.02em; margin-top: 4px; line-height: 1;
}
.prev-item.big .val{ font-size: 32px; color: var(--violet) }
.modal-foot{
text-align: center; font-family: var(--font-mono); font-size: 11px;
color: var(--muted); margin: 14px 0 0; letter-spacing: .04em;
}
body.modal-open{ overflow: hidden }
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{ animation: none !important; transition: none !important }
[data-reveal]{ opacity: 1; transform: none }
.aurora{ display: none }
}