:root{
  --white:#fff; --black:#020004; --purple:#8800ff; --panel:#0B0A10; --text:#fff;
  --neon:var(--purple); --radius:18px; --border:rgba(255,255,255,.10);
  --now:#F8D94E; --ok-emerald:#9CF6B1; --ok-amber:#FFD08A;
}
*,*::before,*::after{ box-sizing:border-box; }
html, body{ min-height:100%; width:100%; max-width:100vw; overflow-x: clip; overscroll-behavior-x: none; touch-action: pan-y pinch-zoom; scroll-behavior:smooth; }
body{ min-height:100vh; background:#0b0a10; color:#fff; }
.container{ max-width:1120px; margin:0 auto; padding:0 16px; }

.soft-card{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.35)); border:1px solid var(--border)!important; border-radius:var(--radius)!important; backdrop-filter:blur(6px); }
.glassbar{ backdrop-filter:blur(10px); background:rgba(2,0,4,.9); border-bottom:1px solid var(--border); }
.brand-logo{ height:67px; width:auto; display:block; transition:filter .5s ease; }
.brand-logo.crown-shimmer{ filter:drop-shadow(0 0 14px rgba(136,0,255,.85)); }

.tri-stripe{ height:6px; width:100%; box-shadow:0 0 12px rgba(136,0,255,.35); background:linear-gradient(90deg,#fff 0 33%,#020004 33% 66%,#8800ff 66% 100%); }

.eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-weight:800; font-size:.78rem; color:#c7cde0; }
.headline{ font-weight:900; letter-spacing:.02em; }

.btn-neon{ background:var(--neon)!important; color:#fff!important; border-radius:14px!important; box-shadow:0 0 32px rgba(136,0,255,.55)!important; text-transform:none!important; font-weight:800!important; letter-spacing:.06em!important; transform:translateZ(0); }
.btn-neon:hover{ transform:translateY(-1px) scale(1.02); box-shadow:0 0 42px rgba(136,0,255,.75)!important; }
.btn-neon:active{ transform:scale(.98); }
.btn-ghost{ background:rgba(255,255,255,.06)!important; border:1px solid var(--border)!important; color:#fff!important; text-transform:none!important; border-radius:14px!important; }
.btn-ghost:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.32)!important; }

section#top { position:relative; padding:50px 0 32px; background:#0b0a10; color:#fff; }
.hero-title{ font-weight:900; font-size:clamp(2.2rem, 5.5vw, 4.2rem); line-height:1.04; letter-spacing:-0.01em; margin:0 0 14px 0; text-transform:uppercase; }
.neon-word{ position:relative; display:inline-block; font-weight:900; color:#fff; -webkit-text-stroke:.6px rgba(255,255,255,.12); letter-spacing:-.004em; }
.neon-word::after{ content:attr(data-text); position:absolute; inset:0; z-index:-1; color:transparent; text-shadow:0 0 6px var(--neon), 0 0 14px rgba(136,0,255,.75), 0 0 26px rgba(136,0,255,.50); filter:blur(.2px); opacity:.55; }

.stat-number--good{ color:var(--ok-emerald); text-shadow:0 0 10px rgba(15,130,71,.18); }
.stat-number--warn{ color:var(--ok-amber); text-shadow:0 0 10px rgba(180,94,0,.18); }
.lb-table{ width:100%; border-collapse:separate; border-spacing:0 10px; table-layout:fixed; }
.lb-table td{ background:rgba(255,255,255,.03); border:1px solid var(--border); padding:12px 14px; vertical-align:middle; }
.lb-table tr td:first-child{ border-radius:12px 0 0 12px; }
.lb-table tr td:last-child{  border-radius:0 12px 12px 0; }
.lb-rank{ width:64px; text-align:center; font-weight:800; color:rgba(255,255,255,.92); }
.lb-amount{ width:160px; text-align:right; font-weight:800; color:#fff; }

/* XP bar + shimmer */
.xp-wrap{ position:relative; height:12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--border); overflow:hidden; }
.xp-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg, rgba(136,0,255,.65), rgba(255,255,255,.85)); }
.xp-shine{ position:absolute; inset:0; background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform:translateX(-120%); animation:shine 2.8s ease-in-out infinite; }
@keyframes shine{ to{ transform:translateX(140%);} }

/* Avatar ring + blink */
.avatar{ width:34px; height:34px; border-radius:999px; overflow:hidden; position:relative; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar.online::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; box-shadow:0 0 10px rgba(136,0,255,.85), 0 0 0 2px rgba(136,0,255,.45) inset; animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.55} 50%{opacity:1} }

/* Tooltip for hourly bars */
.chart-tip{ position:fixed; z-index:1000; background:rgba(2,0,4,.95); color:#fff; padding:8px 10px; border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,.32); pointer-events:none; font-size:.85rem; }

/* Transitions */
.flip-list-move{ transition: transform 650ms cubic-bezier(.22,1,.36,1); }
.flip-list-enter-active{ transition: all 420ms cubic-bezier(.22,1,.36,1); }
.flip-list-leave-active{ transition: all 320ms cubic-bezier(.55,.085,.68,.53); }
.flip-list-enter{ opacity:0; transform: translateY(-6px) scale(.98); }
.flip-list-leave-to{ opacity:0; transform: translateY(6px) scale(.98); }

tr.row-celebrate td{
  box-shadow: 0 0 0 1px rgba(136,0,255,.45) inset, 0 0 18px rgba(136,0,255,.35);
  position:relative;
  background:linear-gradient(90deg, rgba(136,0,255,.10), rgba(136,0,255,.02));
  animation: rowSweep 1200ms ease-out;
}
@keyframes rowSweep{
  0%{ background-position:-120% 0; }
  50%{ background-position:50% 0; }
  100%{ background-position:220% 0; background:rgba(255,255,255,.03); }
}

/* Login dialog (heroic gateway) */
.login-portal{ position:relative; overflow:hidden; background:radial-gradient(1200px 500px at 10% -20%, rgba(136,0,255,.25), transparent), rgba(10,8,16,.96); border:1px solid var(--border); }
.login-portal .crown{ width:44px; height:auto; filter:drop-shadow(0 0 12px rgba(136,0,255,.65)); }
.particle{ position:absolute; width:6px; height:6px; border-radius:999px; background:rgba(136,0,255,.85); box-shadow:0 0 10px rgba(136,0,255,.65); pointer-events:none; }

/* Season ticker */
.season-card{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.42)); border:1px solid var(--border); border-radius:14px; padding:10px; }

/* Misc existing (kept) */
.kpi-dots{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px; }
.kpi-dot{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.35); cursor:pointer; }
.kpi-dot.is-active{ background:#fff; box-shadow:0 0 10px rgba(255,255,255,.6); }

/* Mobile fixes retained from original */
.equal-row > .v-col{ display:flex; }
.equal-card{ display:flex; flex-direction:column; width:100%; height:100%; text-align:center; }
.equal-card .v-card__text{ flex:1 1 auto; }
@media (max-width:600px){ .equal-row > .v-col{ display:block; } .equal-card{ height:auto; } }
/* === HERO CAROUSEL — TYPOGRAPHY NORMALIZATION === */
.hero-carousel .stat-card{
  --title: #cfd6ea;
  --body: rgba(255,255,255,.86);
}

/* Overline (top row with icon) */
.hero-carousel .stat-overline,
.hero-carousel .iconline.stat-overline{
  display:flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
  font-size:.78rem;
  color:var(--title);
}

/* Icon badge feel */
.hero-carousel .icon-badge{
  width:26px;
  height:26px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  box-shadow:0 0 14px rgba(136,0,255,.25);
}

/* Big numbers / % */
.hero-carousel .stat-number{
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1;
  font-size:clamp(1.8rem,3.6vw,2.6rem);
  text-shadow:0 0 10px rgba(0,0,0,.25);
}

/* Money readout (first slide) */
.hero-carousel .stat-money .money-currency{
  font-weight:900 !important;
  font-size:clamp(1.4rem,2.6vw,1.8rem) !important;
  letter-spacing:.01em;
  opacity:.95;
}
.hero-carousel .stat-money .money-value{
  font-weight:900 !important;
  font-size:clamp(2.4rem,4.8vw,3.2rem) !important;
  letter-spacing:-.02em !important;
}

/* Subtext under the numbers */
.hero-carousel .stat-sub{
  margin-top:6px;
  color:var(--body);
  font-weight:800;
  letter-spacing:.02em;
  font-size:.9rem;
  opacity:.95;
  text-align:center;
}

/* Center single-line number rows */
.hero-carousel .fit-line{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Keep odometer text crisp */
.hero-carousel .odometer{
  display:inline-block;
  transform:translateZ(0);
}

/* Good/warn colors already defined; add subtle glow */
.hero-carousel .stat-number--good{
  text-shadow:0 0 14px rgba(15,130,71,.22);
}
.hero-carousel .stat-number--warn{
  text-shadow:0 0 14px rgba(180,94,0,.22);
}

/* Tighten the card content a hair for balance */
.hero-carousel .stat-card .v-card__text{ padding-top:6px; }

/* Optional: unify slide height if content shifts */
.hero-carousel .v-window-item{ display:flex; }
.hero-carousel .stat-card{ width:100%; }
/* === OPS KING Global Typography Refresh === */

/* Global body copy */
body, p, li, .v-card__text, .v-btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: rgba(255,255,255,.92);
  line-height: 1.55;
}

/* Section titles + Hero headlines */
h1, h2, h3, .headline, .hero-title {
  font-family: 'Orbitron', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 800 !important;
  color: #fff;
}

/* Subheaders / overlines */
.eyebrow, .stat-overline, .feature-bullet, .lb-rank, .lb-table td:first-child {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* Body emphasis */
strong, b {
  font-weight: 600;
}

/* Buttons */
.v-btn, .btn-neon, .btn-ghost {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase !important;
}

/* Section dividers + captions */
.text-caption, .stat-sub, small {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  letter-spacing: .01em;
}

/* Hero neon accent */
.neon-word {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}
/* === RESTORE ORIGINAL OPS KING DISPLAY FONT FOR HERO + HEADER === */

/* Header nav + logo text */
.v-app-bar, .v-toolbar__title, .v-btn--text, .nav-link, .brand-logo-text, .site-header {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Hero title: “RULE YOUR OPERATIONS IN REAL TIME” */
.hero-title, .hero-section h1, h1.hero-title span {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: #fff;
}

/* Neon emphasis (REAL TIME) still uses Orbitron for futuristic glow */
.neon-word {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}

/* Subhead paragraph under hero title */
.hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  max-width: 620px;
}

/* CTA buttons keep neon / ghost look but now align font */
.hero-cta .v-btn {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ops-section { padding:56px 0; }
.ops-section .headline { font-size:clamp(1.6rem,3.6vw,2.4rem); }

/* small headline variant used in vertical cards */
.headline.mini {
  font-size:1.1rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  text-shadow:0 0 8px var(--neon);
}

.value-card .value-title,
.cred-card  .value-title {
  margin:0;
  font-weight:800;
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.value-body {
  color:rgba(255,255,255,.86);
  font-family:'Inter',sans-serif;
}

/* badges/icons unify across cards */
.icon-badge{
  width:28px;height:28px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  box-shadow:0 0 14px rgba(136,0,255,.25);
}

/* subtle neon for vertical cards */
.glow-card{
  border-color:rgba(136,0,255,.35);
  box-shadow:0 0 20px rgba(136,0,255,.18);
}
/* shared */
.ops-section { padding:56px 0; }
.ops-section .headline { font-size:clamp(1.6rem,3.6vw,2.4rem); }
.subtext { color:rgba(255,255,255,.86); max-width:640px; margin:10px auto 0; }

/* panel shells */
.value-panels .v-expansion-panel,
.verticals-panels .v-expansion-panel,
.why-panels .v-expansion-panel {
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.35));
  border:1px solid var(--border);
}
.v-expansion-panel-header { padding:14px 18px; }
.v-expansion-panel-content__wrap { padding:16px 18px 22px; }

/* header row */
.benefit-header, .vertical-header, .why-header {
  display:flex; align-items:center; justify-content:space-between;
}

/* titles + subs */
.value-title {
  font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  font-size:1.05rem; color:#fff; margin:0;
}
.value-sub { color:rgba(255,255,255,.75); font-weight:600; font-size:.9rem; }

/* mini headline for vertical cards */
.headline.mini { font-size:1.1rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; }

/* icon badge */
.icon-badge{
  width:28px; height:28px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  box-shadow:0 0 14px rgba(136,0,255,.25);
}

/* content */
.benefit-content { color:rgba(255,255,255,.9); }
.neat-list { padding-left:18px; margin:0; }
.neat-list li { margin:6px 0; }

/* subtle neon emphasis on vertical panels */
.verticals-panels .v-expansion-panel {
  border-color:rgba(136,0,255,.35);
  box-shadow:0 0 20px rgba(136,0,255,.18);
}
.rotate-icon {
  transition: transform .3s ease;
}
.rotate-icon.rotated {
  transform: rotate(180deg);
}

/* spacing & typography same discipline */
.ops-section { padding:56px 0; }
.subtext { color:rgba(255,255,255,.86); max-width:640px; margin:10px auto 0; }

.v-expansion-panel {
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.35));
  border:1px solid var(--border);
  margin-bottom:10px;
}

.v-expansion-panel-header { padding:14px 18px; }
.v-expansion-panel-content__wrap { padding:16px 20px 22px; }

.value-title {
  font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:1.05rem; color:#fff;
}
.value-sub { color:rgba(255,255,255,.75); font-weight:600; font-size:.9rem; }

.icon-badge {
  width:28px; height:28px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  box-shadow:0 0 14px rgba(136,0,255,.25);
}

.benefit-content { color:rgba(255,255,255,.9); }
.neat-list { padding-left:18px; margin:0; }
.neat-list li { margin:6px 0; }

.verticals-panels .v-expansion-panel {
  border-color:rgba(136,0,255,.35);
  box-shadow:0 0 20px rgba(136,0,255,.18);
}
.headline.mini {
  font-size:1.1rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
}
/* Shared section spacing */
.ops-section { padding:56px 0; }
.subtext { color:rgba(255,255,255,.86); max-width:640px; margin:10px auto 0; }

/* Panel shells */
.v-expansion-panel {
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.35));
  border:1px solid var(--border);
  margin-bottom:10px;
}
.v-expansion-panel-header { padding:14px 18px; }
.v-expansion-panel-content__wrap { padding:16px 20px 22px; }

/* Titles + subs */
.value-title { font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:1.05rem; color:#fff; }
.value-sub   { color:rgba(255,255,255,.75); font-weight:600; font-size:.9rem; }
.benefit-content { color:rgba(255,255,255,.9); }
.neat-list { padding-left:18px; margin:0; }
.neat-list li { margin:6px 0; }

/* Icon badge */
.icon-badge{
  width:28px;height:28px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  box-shadow:0 0 14px rgba(136,0,255,.25);
}

/* Headline mini for vertical cards */
.headline.mini{ font-size:1.1rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; }

/* Subtle neon for verticals */
.verticals-panels .v-expansion-panel{
  border-color:rgba(136,0,255,.35);
  box-shadow:0 0 20px rgba(136,0,255,.18);
}

/* Chevron animation (works with default Vuetify header) */
.rotate-icon{ transition:transform .28s ease; }
.v-expansion-panel--active .rotate-icon{ transform:rotate(180deg); }
/* Replace previous .rank-badge styling with vivid, non-washed medals */
.rank-badge{
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: .02em;
  position: relative;
  isolation: isolate;
  box-shadow: 0 0 10px rgba(0,0,0,.25);
}
.rank-badge .rb-num {
  position: relative;
  z-index: 2;
}

/* Medal tiers – bright and readable */
.rank-badge.rb--gold   { background: linear-gradient(180deg,#FFE89A 0%, #D8A800 100%); color:#2b2000; }
.rank-badge.rb--silver { background: linear-gradient(180deg,#F2F4F7 0%, #B7C0D0 100%); color:#1f2733; }
.rank-badge.rb--bronze { background: linear-gradient(180deg,#F4C9A2 0%, #C07C3A 100%); color:#2b1600; }
.rank-badge.rb--std    { background: rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.25); }

/* optional glossy highlight ring */
.rank-badge::before{
  content:'';
  position:absolute; inset:-2px;
  border-radius:inherit;
  box-shadow: 0 0 12px rgba(136,0,255,.35) inset;
  pointer-events:none;
}
/* table cell sizing after removing the rank column */
.lb-table { table-layout: fixed; width: 100%; }
.lb-table td { vertical-align: middle; padding: 12px 14px; background: rgba(255,255,255,.03); border:1px solid var(--border); }
.lb-table tr td:first-child { border-radius:12px 0 0 12px; } /* first cell is now the name cell */
.lb-table tr td:last-child  { border-radius:0 12 bkox 12px 0; }
.lb-name     { width: 45%; }       /* name + badge + mini KPIs */
.lb-progress { width: 40%; }       /* sparkline + compare text */
.lb-amount   { width: 15%; text-align:right; white-space:nowrap; }

/* ensure badge isn’t washed by parent color */
.lb-table td .rank-badge .rb-num { mix-blend-mode: normal; opacity: 1; }

/* optional: keep first 3 rows’ badges extra bright */
.lb-table tr[data-rank="1"] .rank-badge { filter: drop-shadow(0 0 12px rgba(255,215,0,.35)); }
.lb-table tr[data-rank="2"] .rank-badge { filter: drop-shadow(0 0 12px rgba(200,200,200,.35)); }
.lb-table tr[data-rank="3"] .rank-badge { filter: drop-shadow(0 0 12px rgba(192,124,58,.35)); }
/* Section wrapper keeps your purple but adds subtle texture */
.ops-features{
  padding:56px 0;
  background:#8800ff;
  background-image:
    radial-gradient(800px 300px at 10% 0%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(600px 260px at 90% 0%, rgba(0,0,0,.20), transparent 65%);
}

/* Card: glass + inner glow + lift + shine */
.feature-card{
  position:relative;
  background:linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.62));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
  overflow:hidden;
}
.feature-card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 18px 36px rgba(0,0,0,.45),
    0 0 24px rgba(136,0,255,.22),
    inset 0 1px 0 rgba(255,255,255,.16);
}

/* Diagonal shine sweep */
.fc-shine{
  position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 45%, rgba(255,255,255,.12) 50%, transparent 55%);
  transform: translateX(-120%);
  animation: sweep 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sweep{ 0%{transform:translateX(-120%)} 60%{transform:translateX(120%)} 100%{transform:translateX(120%)} }

/* Title + list */
.fc-title{
  font-family:'Orbitron',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#fff;
  font-size:1.1rem;
  margin:8px 0 10px;
  text-align:center;
}
.fc-list{ margin-top:10px; }
.fc-item{
  display:flex; align-items:center; gap:8px;
  color:#eef1ff; opacity:.95;
  padding:6px 0;
  font-weight:600;
}
.fc-item .v-icon{ color:#fff; opacity:.95; }

/* little module chips on top */
.fc-tags{ display:flex; gap:6px; justify-content:center; margin-bottom:8px; }
.fc-chip{
  border-color: rgba(255,255,255,.35) !important;
  color:#fff !important;
  background: rgba(255,255,255,.06) !important;
  font-weight:700 !important;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Scroll-reveal (tiny, no dependency) */
.reveal{ transform:translateY(14px); opacity:0; transition: all .45s cubic-bezier(.22,1,.36,1); }
.reveal.show{ transform:none; opacity:1; }
/* Uniform height + balanced content */
.feature-card{
  display:flex;
  flex-direction:column;
  height:100%;           /* fill the stretched column */
}

/* Tags at top, then title, then list grows, so bottoms align */
.fc-tags { margin-bottom:8px; }
.fc-title { margin-bottom:10px; }
.fc-list { flex:1; }     /* this fills the middle so heights equalize */

/* Keep shine overlay non-intrusive in flex flow */
.fc-shine{ pointer-events:none; }
/* Make cards flex containers to align the bullets at the bottom visually */
.feature-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-bottom: 32px; /* adds visual grounding */
}

/* Keep top content (tags + title) locked to top */
.fc-tags, .fc-title {
  flex-shrink: 0;
}

/* Push list downward evenly and balance vertical spacing */
.fc-list {
  margin-top: auto; /* pushes it down */
  padding-top: 16px; /* buffer above list */
  min-height: 120px; /* ensures consistent floor line */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Maintain clean spacing between list items */
.fc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  line-height: 1.5;
}

/* Reduce icon weight slightly for alignment */
.fc-item .v-icon {
  transform: translateY(-1px);
}
/* intro row spacing */
.lb-intro .soft-card{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.38)); border:1px solid var(--border); }

/* small strong headline */
.mini-strong{ font-weight:900; letter-spacing:.02em; }

/* icon badge */
.icon-badge{
  width:30px; height:30px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 14px rgba(136,0,255,.25);
}

/* chips */
.chip-dark{
  background:rgba(255,255,255,.06) !important;
  border:1px solid var(--border) !important;
  color:#fff !important;
  font-weight:700 !important;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.chip-pulse{
  background:rgba(136,0,255,.15) !important;
  border:1px solid rgba(136,0,255,.45) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(136,0,255,.25);
}

/* season strip + progress */
.season-strip .strip-title{ font-weight:800; letter-spacing:.02em; }
.season-progress .sp-track{
  position:relative; height:10px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid var(--border); overflow:hidden;
}
.season-progress .sp-fill{
  position:absolute; left:0; top:0; bottom:0;
  background:linear-gradient(90deg, #8800ff, #d3b400);
  width:40%;
}
.season-progress .sp-shine{
  position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-120%); animation:shine 3.6s ease-in-out infinite;
}
@keyframes shine{ to{ transform:translateX(140%);} }

/* player avatar ring */
.avatar.ring{ width:44px; height:44px; border-radius:999px; overflow:hidden; position:relative; }
.avatar.ring::after{
  content:''; position:absolute; inset:-2px; border-radius:inherit;
  box-shadow:0 0 10px rgba(136,0,255,.85), 0 0 0 2px rgba(136,0,255,.35) inset;
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.55} 50%{opacity:1} }

/* XP bar */
.player-pro .xp-track{
  position:relative; height:10px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid var(--border); overflow:hidden;
}
.player-pro .xp-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg, rgba(136,0,255,.75), rgba(255,255,255,.9));
}
.player-pro .xp-shine{
  position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-120%); animation:shine 2.8s ease-in-out infinite;
}

/* subtle ghost badges */
.chip-ghost{
  background:rgba(255,255,255,.05) !important;
  border:1px solid var(--border) !important;
  color:#fff !important;
}

/* tighter text truncation for player name if long */
.min-w-0{ min-width:0; }
.text-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* stretch both cards to same height */
.lb-intro .d-flex > .stretch-card{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}

/* the rest is already in your sheet from earlier, but listing the key bits: */
.icon-badge{ width:30px; height:30px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:0 0 14px rgba(136,0,255,.25); }
.mini-strong{ font-weight:900; letter-spacing:.02em; }
.chip-dark{ background:rgba(255,255,255,.06)!important; border:1px solid var(--border)!important; color:#fff!important; font-weight:700!important; letter-spacing:.04em; text-transform:uppercase; }
.chip-pulse{ background:rgba(136,0,255,.15)!important; border:1px solid rgba(136,0,255,.45)!important; color:#fff!important; box-shadow:0 0 14px rgba(136,0,255,.25); }

/* season progress */
.season-progress .sp-track{ position:relative; height:10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--border); overflow:hidden; }
.season-progress .sp-fill{ position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg, #8800ff, #d3b400); width:40%; }
.season-progress .sp-shine{ position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent); transform:translateX(-120%); animation:shine 3.6s ease-in-out infinite; }
@keyframes shine{ to{ transform:translateX(140%);} }

/* player avatar ring + xp (already present earlier) */
.avatar.ring{ width:44px; height:44px; border-radius:999px; overflow:hidden; position:relative; }
.avatar.ring::after{ content:''; position:absolute; inset:-2px; border-radius:inherit; box-shadow:0 0 10px rgba(136,0,255,.85), 0 0 0 2px rgba(136,0,255,.35) inset; animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.55} 50%{opacity:1} }
.player-pro .xp-track{ position:relative; height:10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--border); overflow:hidden; }
.player-pro .xp-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg, rgba(136,0,255,.75), rgba(255,255,255,.9)); }
.player-pro .xp-shine{ position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-120%); animation:shine 2.8s ease-in-out infinite; }
.ops-core-pillars {
  background: #fff;
  padding: 72px 0;
  text-align: center;
}

.ops-core-pillars .headline {
  color: #0b0a10;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Card structure */
.pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background: #0b0a10;
  color: #fff;
  border: 1px solid rgba(136, 0, 255, 0.2);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pillar-card:hover {
  transform: translateY(-6px);
  border-color: rgba(136, 0, 255, 0.45);
  box-shadow: 0 18px 40px rgba(136, 0, 255, 0.2);
}

/* Shine sweep */
.pillar-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 45%, rgba(255,255,255,.08) 50%, transparent 55%);
  transform: translateX(-120%);
  animation: pillarSweep 6s ease-in-out infinite;
}
@keyframes pillarSweep {
  0% { transform: translateX(-120%); }
  60%, 100% { transform: translateX(120%); }
}

/* Top tags */
.pillar-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.pillar-chip {
  border-color: rgba(136, 0, 255, 0.5) !important;
  color: #e0cfff !important;
  background: rgba(136, 0, 255, 0.1) !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Card body */
.pillar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 8px;
  text-align: left;
}
.pillar-title {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.pillar-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pillar-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.85);
  font-size: .95rem;
  padding: 6px 0;
  line-height: 1.4;
}
.pillar-list li .v-icon {
  color: var(--neon, #8800ff);
}

/* Button refinement */
.btn-purple {
  color: #fff !important;
  background: linear-gradient(90deg, #8800ff, #a04fff);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(136, 0, 255, 0.25);
  transition: all .3s ease;
}
.btn-purple:hover {
  background: linear-gradient(90deg, #a04fff, #8800ff);
  box-shadow: 0 10px 28px rgba(136, 0, 255, 0.35);
  transform: translateY(-2px);
}
/* ---- GLOBAL CONTAINER TIGHTENERS ---- */
@media (max-width: 1264px){
  .container{ padding-left:20px; padding-right:20px; }
}

/* default vertical rhythm for stacked cards */
.ops-core-pillars .v-col.d-flex,
.ops-features     .v-col.d-flex{
  margin-bottom: 18px;
}
@media (min-width: 960px){
  .ops-core-pillars .v-col.d-flex,
  .ops-features     .v-col.d-flex{
    margin-bottom: 0;   /* reset when in 3-up grid */
  }
}

/* ---- CORE PILLARS (WHITE) ---- */
.ops-core-pillars{ padding:72px 0; background:#fff; color:#0b0a10; }
.ops-core-pillars .headline{ color:#0b0a10; }

/* card height + content balance */
.pillar-card{ display:flex; flex-direction:column; height:100%; padding-bottom:28px; }
.pillar-tags{ flex-shrink:0; margin-bottom:12px; }
.pillar-content{ flex:1; display:flex; flex-direction:column; justify-content:flex-start; }
.pillar-list{ margin-top:auto; padding-top:14px; }

/* tablet: reduce padding and type a touch */
@media (max-width: 960px){
  .ops-core-pillars{ padding:56px 0; }
  .pillar-card{ padding:22px !important; }
  .pillar-title{ font-size:1rem; }
  .pillar-list li{ font-size:.93rem; }
}
/* mobile: max readability */
@media (max-width: 600px){
  .ops-core-pillars .headline{ font-size:1.25rem; }
  .pillar-chip{ font-size:.65rem !important; padding:2px 6px !important; }
  .pillar-title{ font-size:.98rem; letter-spacing:.04em; margin-bottom:12px; }
  .pillar-list li{ line-height:1.45; padding:5px 0; }
}

/* CTA button on white: 100% on mobile, centered otherwise */
.btn-purple{ color:#fff !important; }
@media (max-width: 600px){
  .ops-core-pillars .btn-purple{ width:100%; }
}

/* ---- PURPLE FEATURES ROW ---- */
.ops-features{ padding:56px 0; }
.feature-card{ display:flex; flex-direction:column; height:100%; padding-bottom:28px; }
.fc-tags{ flex-shrink:0; margin-bottom:10px; }
.fc-title{ flex-shrink:0; margin-bottom:12px; }
.fc-list{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; }

/* tablet scaling */
@media (max-width: 960px){
  .ops-features{ padding:56px 0; }
  .feature-card{ padding:22px !important; }
  .fc-title{ font-size:1rem; }
  .fc-item{ font-size:.95rem; }
}

/* mobile scaling */
@media (max-width: 600px){
  .ops-features .headline{ font-size:1.25rem; }
  .fc-chip{ font-size:.65rem !important; padding:2px 6px !important; }
  .fc-title{ font-size:.98rem; letter-spacing:.04em; }
  .fc-item{ line-height:1.45; padding:5px 0; }
  .ops-features .btn-ghost{ width:100%; }
}

/* polish card gutters when stacked */
@media (max-width: 960px){
  #features .v-col.d-flex + .v-col.d-flex,
  #core-pillars .v-col.d-flex + .v-col.d-flex{
    margin-top: 8px;
  }
}

/* keep the diagonal shine subtle on mobile */
@media (max-width: 600px){
  .pillar-shine, .fc-shine{ opacity:.7; }
}
/* === FINAL MOBILE/RESPONSIVE NORMALIZATION === */

/* Global container centering */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

/* =========================== */
/* CORE PILLARS (white section) */
/* =========================== */
.ops-core-pillars {
  background: #fff;
  padding: 72px 0;
  text-align: center;
}
.ops-core-pillars .headline {
  color: #0b0a10;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Card base */
.pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  background: #0b0a10;
  color: #fff;
  border: 1px solid rgba(136, 0, 255, 0.2);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  padding: 36px 28px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pillar-card:hover {
  transform: translateY(-5px);
  border-color: rgba(136, 0, 255, 0.45);
  box-shadow: 0 18px 40px rgba(136, 0, 255, 0.25);
}

/* Top tag chips */
.pillar-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.pillar-chip {
  border-color: rgba(136, 0, 255, 0.5) !important;
  color: #e0cfff !important;
  background: rgba(136, 0, 255, 0.1) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
}

/* Titles & body list */
.pillar-title {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 18px;
}
.pillar-list {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.pillar-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}
.pillar-list .v-icon {
  color: #8800ff;
}

/* Shine animation */
.pillar-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 45%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 55%
  );
  transform: translateX(-120%);
  animation: pillarSweep 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pillarSweep {
  0% {
    transform: translateX(-120%);
  }
  60%,
  100% {
    transform: translateX(120%);
  }
}

/* Call-to-action button */
.btn-purple {
  color: #fff !important;
  background: linear-gradient(90deg, #8800ff, #a04fff);
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 6px 20px rgba(136, 0, 255, 0.25);
  transition: all 0.3s ease;
}
.btn-purple:hover {
  background: linear-gradient(90deg, #a04fff, #8800ff);
  box-shadow: 0 10px 28px rgba(136, 0, 255, 0.35);
  transform: translateY(-2px);
}

/* =========================== */
/* PURPLE FEATURES (bottom row) */
/* =========================== */
.ops-features {
  background: #8800ff;
  background-image: radial-gradient(
      800px 300px at 10% 0%,
      rgba(255, 255, 255, 0.12),
      transparent 60%
    ),
    radial-gradient(
      600px 260px at 90% 0%,
      rgba(0, 0, 0, 0.2),
      transparent 65%
    );
  padding: 72px 0;
  color: #fff;
}
.ops-features .headline {
  color: #fff;
}

/* Card balancing */
.feature-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  padding: 36px 28px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  height: 100%;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(136, 0, 255, 0.22);
}
.fc-title {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 16px;
  font-size: 1.1rem;
}
.fc-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: auto;
}
.fc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.95);
  padding: 6px 0;
}
.fc-item .v-icon {
  color: #fff;
}

/* Top chips */
.fc-tags {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}
.fc-chip {
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
}

/* =================== */
/* MOBILE NORMALIZATION */
/* =================== */
@media (max-width: 960px) {
  .pillar-card,
  .feature-card {
    padding: 28px 22px;
  }
  .pillar-title,
  .fc-title {
    font-size: 1rem;
  }
  .pillar-list li,
  .fc-item {
    font-size: 0.94rem;
    line-height: 1.45;
  }
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 600px) {
  .ops-core-pillars,
  .ops-features {
    padding: 56px 0;
  }

  .pillar-card,
  .feature-card {
    margin-bottom: 16px;
    padding: 24px 20px;
  }

  .pillar-title,
  .fc-title {
    font-size: 0.96rem;
    letter-spacing: 0.04em;
  }

  .pillar-chip,
  .fc-chip {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }

  .pillar-list li,
  .fc-item {
    line-height: 1.5;
    padding: 5px 0;
  }

  .btn-purple,
  .ops-features .btn-ghost {
    width: 100%;
  }
}
/* ============================================
   CORE PILLARS — copy rhythm like purple cards
   ============================================ */

/* Slightly firmer padding so the cards breathe like the purple ones */
.ops-core-pillars .pillar-card {
  padding: 34px 26px;
}

/* Constrain the text block so bullets don’t run the full width */
.ops-core-pillars .pillar-content {
  max-width: 420px;     /* looks great with your current column width */
  margin: 0 auto;       /* center the copy block within the card */
  text-align: left;     /* lists align left; title centers below */
  display: flex;
  flex-direction: column;
}

/* Headline balance + a small accent rule for intentionality */
.ops-core-pillars .pillar-title {
  font-size: 1.08rem;
  letter-spacing: .06em;
  margin: 0 0 12px;
  text-align: center;
}
.ops-core-pillars .pillar-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, #8800ff, rgba(136,0,255,.35));
  border-radius: 2px;
  opacity: .85;
}

/* Bullet rhythm matches purple: slightly tighter, consistent baseline */
.ops-core-pillars .pillar-list {
  padding-top: 14px;
  margin-top: auto;      /* anchors list toward the bottom like purple */
}
.ops-core-pillars .pillar-list li {
  padding: 7px 0;
  line-height: 1.45;
}

/* Icon alignment + softer color to reduce “shout” */
.ops-core-pillars .pillar-list li .v-icon {
  width: 16px;
  text-align: center;
  transform: translateY(1px);
  color: #a873ff; /* lighter than pure neon; still on-brand */
}

/* Tag chips: remove vertical heaviness */
.ops-core-pillars .pillar-chip {
  margin-bottom: 2px;
}

/* Tablet / mobile fine tuning */
@media (max-width: 1264px) {
  .ops-core-pillars .pillar-content { max-width: 480px; }
}
@media (max-width: 600px) {
  .ops-core-pillars .pillar-content { max-width: 540px; }
  .ops-core-pillars .pillar-title   { font-size: 1rem; }
  .ops-core-pillars .pillar-list li { padding: 6px 0; }
}
/* ================================
   DEMO / CTA SECTION (Final Polish)
   ================================ */
.ops-demo {
  padding: 88px 0;
  background: radial-gradient(800px 400px at 50% 0%, rgba(136,0,255,.25), rgba(0,0,0,.9));
  color: #fff;
  position: relative;
  text-align: center;
}

.ops-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 400px at 50% -30%, rgba(255,255,255,.08), transparent 70%);
  pointer-events: none;
}

.ops-demo .headline {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  margin-bottom: 12px;
}

.ops-demo .demo-sub {
  color: rgba(255,255,255,.85);
  font-size: 1.05rem;
  font-weight: 500;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.55;
}

.ops-demo .demo-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.ops-demo .demo-embed {
  min-height: 520px;
  max-width: 900px;
  margin: 48px auto 0;
  box-shadow: 0 0 60px rgba(136,0,255,.28);
  display: none;
}
/* ===== Leaderboard: mobile sales-as-chip ===== */

/* Desktop/tablet (unchanged) */
.lb-name     { width: 45%; }
.lb-progress { width: 40%; }
.lb-amount   { width: 15%; text-align:right; white-space:nowrap; }

/* Mobile: hide the amount col, widen name/progress */
@media (max-width: 600px){
  .lb-amount { display: none; }         /* hides the $ amount column */
  .lb-name   { width: 64%; }            /* give name + chips more space */
  .lb-progress { width: 36%; }          /* sparkline stays readable */
  
  /* tighten cell spacing a touch on mobile */
  .lb-table td { padding: 10px 12px; }
  
  /* chip row balance under the name */
  .lb-name .mini-kpis { margin-top: 6px; }

  /* Optional: make that sales chip read as a chip on dark */
  .lb-name .mini-kpis .mini-chip {
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
    border-radius: 12px;
    padding: 2px 8px;
  }
}
/* Hide the big $ amount column on mobile (sm & below) and widen the name/sparkline cols */
@media (max-width: 959px) {
  .lb-amount { display: none !important; }

  /* rebalance widths when we remove the $ column */
  .lb-name     { width: 65% !important; }
  .lb-progress { width: 35% !important; }

  /* optional: slightly tighter spacing for chips in the name cell on mobile */
  .lb-name .mini-kpis { margin-top: 6px; }
}
/* HERO TITLE: balanced lines + better measure on phones */
.hero-title{
  font-weight: 900;
  line-height: 1.05;
  text-wrap: balance;
  max-width: 26ch;        /* keeps lines even on narrow screens */
  margin: 0 auto 10px;    /* center + breathe */
  font-size: clamp(1.8rem, 7vw, 3rem);
}
.hero-title .neon-word{
  white-space: nowrap;     /* keep “REAL TIME” together */
}

/* SUBTEXT: readable width on mobile */
.hero-sub{
  max-width: 60ch;
  margin: 8px auto 0;
  line-height: 1.35;
}

/* CTA: center on mobile, row on md+ */
.hero-cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (min-width: 960px){
  .hero-cta{ justify-content: flex-start; }
}

/* FEATURE LINE: no clipping on mobile */
.feature-line{
  display: flex;
  flex-wrap: wrap;           /* let it wrap instead of clipping */
  gap: 12px 18px;
  color: #cfd6ea;
  font-weight: 800;
  white-space: normal;       /* remove nowrap that caused cut-off */
  margin-top: 18px;
  justify-content: center;   /* centered pills on phones */
}
.feature-bullet{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.feature-bullet .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 4px var(--neon), 0 0 10px rgba(136,0,255,.4);
}

/* widen measures a bit on tablet/desktop */
@media (min-width: 600px){
  .hero-title{ max-width: 32ch; font-size: clamp(2rem, 5vw, 3.6rem); }
  .hero-sub{ margin-left: 0; margin-right: 0; }
  .feature-line{ justify-content: flex-start; }
}
.hero-title {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;              /* compact vertical rhythm */
  text-wrap: balance;
  letter-spacing: 1.5px;          /* more horizontal spread */
  margin: 0 auto 14px;
  text-align: left;
  font-size: clamp(2.2rem, 9vw, 3.8rem); /* larger max */
  max-width: 30ch;                /* slightly wider line container */
}

.hero-title .neon-word {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(2.9rem, 10vw, 4rem); /* stronger headline for mobile */
    letter-spacing: 1.8px;
    max-width: 32ch;
  }
}
/* Edge-to-edge leaderboard on phones */
@media (max-width: 600px){
  /* kill the container gutters just for this section */
  #leaderboard .container{
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  /* remove Vuetify col padding on the board column only */
  #leaderboard .lb-board-col{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* let the card bleed to the screen edges with a tiny safety inset */
  #leaderboard .lb-wrap{
    margin-left: calc(-1 * var(--lb-edge, 0px));
    margin-right: calc(-1 * var(--lb-edge, 0px));
    border-radius: 14px;
  }
  /* define the edge value to match your app paddings (12–16px works great) */
  :root{ --lb-edge: 12px; }

  /* optional: ensure the table spans full width */
  #leaderboard .lb-table{
    width: 100%;
    table-layout: fixed;
  }
}
.kpi-card {
  position: relative;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  overflow: hidden;
}
.kpi-card::after {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 160px; height: 160px;
  border-radius: 50%;
  filter: blur(22px);
  opacity: .12;
  background: radial-gradient(circle, var(--brand-neon, #9a6bff), transparent 60%);
  pointer-events: none;
  animation: kpiGlow 6s ease-in-out infinite alternate;
}
@keyframes kpiGlow { from { opacity:.08; transform: translate(10px,8px) scale(1); } to { opacity:.16; transform: translate(0,0) scale(1.05); } }

.kpi-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.kpi-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-neon, #9a6bff);
  box-shadow: 0 0 10px var(--brand-neon, #9a6bff);
}

.stat-number { font-size: clamp(1.4rem, 5vw, 2.1rem); line-height: 1.1; }
.stat-number--good { color: #39e58c; text-shadow: 0 0 10px rgba(57,229,140,.35); }
.stat-number--warn { color: #ff6b6b; text-shadow: 0 0 10px rgba(255,107,107,.35); }
.stat-sub { opacity: .82; margin-top: 6px; display: inline-flex; align-items: center; }
.stat-sub.good { color: #39e58c; opacity: .9; }
.stat-sub.warn { color: #ff9b6b; opacity: .9; }

/* Keep cards edge-to-edge on phones like the intro row */
@media (max-width: 600px) {
  .equal-row { margin-left: calc(-1 * var(--container-x, 16px)); margin-right: calc(-1 * var(--container-x, 16px)); }
  .kpi-card { border-radius: 0; }
}
/* ===== Brand type (reuse your marketing tokens) ===== */
:root{
  --font-display: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --font-body: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  --brand-neon: #9a6bff;
  --brand-ink: #e9e9ee;
  --muted: rgba(255,255,255,.72);
  --border: rgba(255,255,255,.12);
}

/* Marketing-style title inside KPI (matches .pillar-title/.fc-title tone) */
.kpi-title{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}

/* Little purple “dot” matches your pillar/feature chips */
.kpi-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--brand-neon);
  box-shadow: 0 0 10px var(--brand-neon);
}

/* Card shell (same “soft-card” vibe, slightly richer gradient + inner ring) */
.kpi-card{
  position:relative;
  background: radial-gradient(140% 100% at 100% 0%, rgba(154,107,255,.06), rgba(255,255,255,.03) 40%) !important;
  border:1px solid var(--border);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden;
}

/* Top glow line (subtle, branded) */
.kpi-card::before{
  content:""; position:absolute; left:12px; right:12px; top:42px; height:2px;
  background: linear-gradient(90deg, transparent, rgba(154,107,255,.35), transparent);
  opacity:.35;
}

/* Ambient neon orb */
.kpi-card::after{
  content:""; position:absolute; width:180px; height:180px; right:-60px; top:-60px;
  border-radius:50%; filter: blur(22px); opacity:.14;
  background: radial-gradient(circle, var(--brand-neon), transparent 60%);
  pointer-events:none;
  animation: kpiGlow 7s ease-in-out infinite alternate;
}
@keyframes kpiGlow{
  from{ transform: translate(6px,4px) scale(1); opacity:.10; }
  to  { transform: translate(0,0)   scale(1.06); opacity:.18; }
}

/* Big number: use display font to match hero stats */
.kpi-value{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  line-height: 1.1;
  color: var(--brand-ink);
  text-shadow: 0 0 10px rgba(255,255,255,.12);
}

/* Subtext aligns with marketing subtext */
.kpi-sub{
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--muted);
}

/* Good / warn color system consistent with site */
.stat-number--good{ color:#39e58c; text-shadow:0 0 10px rgba(57,229,140,.30); }
.stat-number--warn{ color:#ff6b6b; text-shadow:0 0 10px rgba(255,107,107,.30); }
.kpi-hint{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; }
.kpi-hint.good{ color:#39e58c; }
.kpi-hint.warn{ color:#ff9b6b; }

/* Tight icon sizing to match marketing cards */
.kpi-title .v-icon{ font-size:16px; opacity:.9; }

/* Mobile full-bleed (same approach you used on marketing) */
@media (max-width:600px){
  .equal-row{ margin-left: calc(-1 * var(--container-x, 16px)); margin-right: calc(-1 * var(--container-x, 16px)); }
  .kpi-card{ border-radius: 12px; }
}
/* YOU card layout */
.you-card{ width:100%; }
.you-head{ display:grid; grid-template-columns:56px 1fr; column-gap:12px; align-items:center; }
.you-avatar img{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
.you-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.you-minis,.you-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }

@media (max-width:600px){
  .you-head{ grid-template-columns:1fr; row-gap:10px; text-align:center; justify-items:center; }
  .you-avatar img{ width:76px; height:76px; }
  .you-chips,.you-minis,.you-badges{ justify-content:center; }
  .fullbleed-row{ margin-left:calc(-1 * var(--container-x,16px)); margin-right:calc(-1 * var(--container-x,16px)); }
}

/* Season header + challenge */
.season-head{ display:flex; align-items:center; }
.season-strip{
  display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap;
}
.season-leaders{ display:flex; flex-wrap:wrap; gap:6px; }

/* Best Sellers Stream */
.bs-stream{
  margin-top:16px; border:1px solid var(--border);
  border-radius:12px; background:rgba(255,255,255,.03);
  overflow:hidden; position:relative;
}
.bs-track{
  display:flex; gap:12px; padding:10px 14px;
  animation: bsScroll 20s linear infinite;
}
.bs-track.paused{ animation-play-state:paused; }
@keyframes bsScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

.bs-item{
  display:flex; align-items:center; gap:10px;
  padding:6px 12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); border-radius:999px;
  white-space:nowrap;
}
.bs-thumb{ width:24px; height:24px; border-radius:6px; overflow:hidden; background:#222; box-shadow:0 0 8px rgba(0,0,0,.2);}
.bs-thumb img{ width:100%; height:100%; object-fit:cover; }
.bs-name{ font-weight:700; letter-spacing:.2px; }
.bs-metrics{ display:inline-flex; align-items:center; gap:10px; }
.bs-trend{ display:inline-flex; align-items:center; gap:4px; }
.bs-trend.up{ color:#39e58c; } .bs-trend.down{ color:#ff6b6b; }

@media(max-width:600px){
  .bs-track{ padding:10px; gap:8px; }
  .bs-item{ padding:6px 10px; }
}
/* -------- Drilldown: full-bleed + responsive header -------- */
@media (max-width: 600px){
  #drilldown .container{
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  #drilldown .dd-row{
    margin-left: calc(-1 * var(--container-x, 16px));
    margin-right: calc(-1 * var(--container-x, 16px));
  }
  #drilldown .dd-col{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Drill wrapper */
.drill-wrap{
  border: 1px solid var(--border);
  background: radial-gradient(120% 100% at 100% 0%, rgba(154,107,255,.05), rgba(255,255,255,.03) 40%);
}

/* Header bar */
.store-head{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
}
.store-title .eyebrow{ opacity:.8; margin-bottom: 2px; }
.store-title .headline{ font-size:1.05rem; font-weight:900; line-height:1.15; }

/* Range group: compact, scroll-safe on mobile */
.dd-range{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dd-range .seg{
  max-width: 240px;            /* prevents it from exploding */
  overflow-x: auto;             /* scroll if needed on tiny phones */
  -webkit-overflow-scrolling: touch;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  padding: 2px;                 /* gives the toggle some breathing room */
}

 
.kpi-title{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:6px 12px; border-radius:12px;
  border:1px solid var(--border); background:rgba(255,255,255,.04);
}
.kpi-dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-neon,#9a6bff); box-shadow:0 0 10px var(--brand-neon,#9a6bff); }
.kpi-value{ font-family: var(--font-display, inherit); font-weight:800; font-size: clamp(1.2rem,4.8vw,2rem); line-height:1.1; }
.stat-number--good{ color:#39e58c; text-shadow:0 0 10px rgba(57,229,140,.30); }
.stat-number--warn{ color:#ff6b6b; text-shadow:0 0 10px rgba(255,107,107,.30); }

/* Chart cards */
.chart-card{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}
.stat-overline{
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  display:inline-flex; gap:8px; align-items:center;
}

/* Mobile decomposition */
@media (max-width: 600px){
  /* Stack header neatly */
  .store-head{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .store-title{ text-align:center; }
  .dd-range{ justify-content:center; }
  .dd-range .seg{ max-width: 100%; }

  /* KPIs two-up */
  .dd-kpis .v-col{
    padding-left: 8px !important; padding-right: 8px !important;
  }
}

/* Canvas helpers so charts don’t squish text */
.dd-canvas{ height: 200px; }
@media (max-width: 600px){
  .dd-canvas{ height: 180px; }
}
/* Card sits INSIDE the container (no negative margins) */
.you-hero-row--inset { margin-left: 0; margin-right: 0; }

/* Shell matches other soft cards */
.you-card{
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 8% -20%, rgba(154,107,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
}

/* Headline row: avatar left, content right (single block) */
.you-headline{
  display: grid;
  grid-template-columns: 108px 1fr;
  column-gap: 16px;
  align-items: start;
  padding: 16px 18px 10px;
}
.you-avatar img{
  width:108px; height:108px; border-radius:50%; object-fit:cover; display:block;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 6px 26px rgba(154,107,255,.35);
}
.you-meta{ min-width: 0; }
.you-name{
  font-weight: 900; text-transform: uppercase; letter-spacing: .04em; line-height: 1.05;
  margin-bottom: 6px;
}

/* Balanced chips */
.you-chipgroup{ margin-top: 4px; }

/* Auto-fit grid creates balanced rows without weird gaps */
.chipgrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px;
}
.chipwrap{
  display:flex; flex-wrap:wrap; gap:6px;
}

/* Subtle divider before XP row */
.you-sep{
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  margin: 2px 12px 0;
  border-radius: 1px;
}

/* XP row: its own full-width block */
.you-xprow{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 14px;
}
.you-xp-label{
  font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  opacity: .85;
  grid-column: 1 / 2;
}
.you-xpbar{
  grid-column: 1 / 2;
  position: relative; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.10); overflow: hidden;
}
.you-xpfill{
  position: absolute; inset: 0 auto 0 0;
  width: 0; background: linear-gradient(90deg, #9a6bff, #f0b73e);
}
.you-xpshine{
  position:absolute; right:-28px; top:-28px; width:140px; height:140px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.28), transparent 60%);
  filter: blur(18px); opacity:.18; pointer-events:none;
}
.you-xpnums{
  grid-column: 2 / 3;
  text-align: right; opacity: .9;
}

/* Mobile: center + stack nicely */
@media (max-width: 600px){
  .you-headline{
    grid-template-columns: 1fr;
    row-gap: 12px;
    justify-items: center;
    text-align: center;
    padding: 14px 12px 8px;
  }
  .you-avatar img{ width:88px; height:88px; }
  .chipgrid{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .you-xprow{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 8px;
    padding: 10px 12px 12px;
  }
  .you-xpnums{ grid-column: 1 / -1; text-align: center; }
}

/* Tablet: slightly tighter avatar/spacing */
@media (min-width: 600px) and (max-width: 959px){
  .you-headline{ grid-template-columns: 96px 1fr; }
  .you-avatar img{ width:96px; height:96px; }
}
/* --- LEVEL-UP ROW: green pulse for 2s --- */
tr.row-celebrate td{
  position: relative;
  background: linear-gradient(90deg, rgba(0,255,153,.08), rgba(255,255,255,.03));
  box-shadow:
    0 0 0 1px rgba(0,255,153,.45) inset,
    0 0 18px rgba(0,255,153,.28);
  animation: rowPulseGreen 2s ease-out;
}
@keyframes rowPulseGreen{
  0%   { box-shadow: 0 0 0 2px rgba(0,255,153,.80) inset, 0 0 26px rgba(0,255,153,.45); }
  30%  { box-shadow: 0 0 0 1px rgba(0,255,153,.55) inset, 0 0 18px rgba(0,255,153,.35); }
  60%  { box-shadow: 0 0 0 1px rgba(0,255,153,.35) inset, 0 0 12px rgba(0,255,153,.22); }
  100% { box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 0 0 rgba(0,0,0,0); }
}

/* --- DOLLARS: bigger & centered on desktop --- */
@media (min-width: 960px){
  .lb-amount{
    width: 180px;              /* slight bump for breathing room */
    text-align: center;
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: 900;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- MOBILE CHARTS: give the sparkline more space/height --- */
@media (max-width: 600px){
  /* widen the middle chart column a bit */
  .lb-name     { width: 52% !important; }   /* was 64% */
  .lb-progress { width: 48% !important; }   /* was 36% */

  /* make sparkline taller so it reads better on phones */
  .lb-progress .spark{ height: 56px; }
  /* small nudge to the compare text below the spark */
  .lb-progress .text-caption{ font-size: .86rem; line-height: 1.25; }
}

/* --- MOBILE SETTINGS SHEET button state (optional subtle glow) --- */
.btn-cog.is-open { box-shadow: 0 0 10px rgba(255,255,255,.25) inset; }
/* --- MOBILE: let charts actually take the width --- */
@media (max-width: 600px){
  .lb-table{ table-layout: auto !important; }         /* override fixed layout on phones */
  .lb-amount{ display:none !important; }              /* truly remove the $ column */
  .lb-name   { width:auto !important; }               /* allow natural width */
  .lb-progress{ width:100% !important; }              /* chart gets the rest */
  .lb-progress .spark{ display:block; height:64px; }  /* taller spark for readability */
}

/* --- DESKTOP: dollars clean, right-aligned, bold --- */
@media (min-width: 960px){
  .lb-amount{
    width: 200px;                      /* steady column */
    text-align: right;
    white-space: nowrap;
    letter-spacing: .01em;
    font-weight: 900;
    font-size: clamp(1.2rem, 1.7vw, 1.6rem);
    display:flex; align-items:center; justify-content:flex-end;
    padding-right: 18px;               /* optical balance to card edge */
  }
}

/* --- LEVEL-UP: outline around the entire row (not per-cell) --- */
.lb-table tr.row-celebrate{ position: relative; z-index: 1; }
.lb-table tr.row-celebrate::after{
  content:""; position:absolute;
  /* span across the combined cells; account for row gap (border-spacing) */
  left: 0; right: 0; top: -5px; bottom: -5px;
  border-radius: 12px;
  pointer-events:none;
  box-shadow:
    0 0 0 2px rgba(0,255,153,.80),
    0 0 24px rgba(0,255,153,.45);
  animation: rowHalo 2s ease-out forwards;
}
@keyframes rowHalo{
  0%   { box-shadow: 0 0 0 3px rgba(0,255,153,.9),  0 0 28px rgba(0,255,153,.55); }
  40%  { box-shadow: 0 0 0 2px rgba(0,255,153,.65), 0 0 20px rgba(0,255,153,.40); }
  100% { box-shadow: 0 0 0 1px rgba(0,255,153,.30), 0 0 8px  rgba(0,255,153,.18); }
}
/* remove the old per-cell green background/box-shadow if present */
tr.row-celebrate td{
  background: rgba(255,255,255,.03) !important;
  box-shadow: none !important;
}

/* --- SETTINGS DRAWER polish --- */
.lb-drawer .v-navigation-drawer{
  background: rgba(2,0,4,.96) !important;
  border-left: 1px solid var(--border) !important;
  backdrop-filter: blur(8px);
}
.lb-drawer .drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px; border-bottom:1px solid var(--border);
}
.lb-drawer .drawer-title{
  font-weight:900; letter-spacing:.05em; text-transform:uppercase; font-size:.95rem;
}
.lb-drawer .drawer-body{ padding: 14px 16px; display:grid; gap:14px; }
/* live-adjustable spark height via settings drawer */
#leaderboard .lb-wrap{ --spark-h: 64px; }
@media (max-width: 600px){
  .lb-progress .spark{ height: var(--spark-h); }
}
/* === Leaderboard table layout (desktop) === */
@media (min-width: 960px){
  .lb-table{ table-layout: fixed; border-spacing: 0 10px; } /* keep vertical gap only */

  /* Amount column is fixed; others divide the rest automatically */
  .lb-table col.col-amount  { width: 180px; }  /* adjust here if you want 160/200 */
  .lb-table col.col-name    { width: auto; }
  .lb-table col.col-progress{ width: auto; }

  /* Remove any old width rules that fight the colgroup */
  .lb-name, .lb-progress, .lb-amount{ width: auto !important; }

  /* Dollars: bold, right-aligned, no overflow */
  .lb-amount{
    white-space: nowrap;
    text-align: right;
    padding-right: 18px;         /* optical balance to card edge */
    font-weight: 900;
    font-size: 1.45rem;          /* stable, not vw-based */
    letter-spacing: .01em;
    display: flex; align-items: center; justify-content: flex-end;
  }
  .lb-amount .odometer{ transform: translateY(1px); } /* optical centering */
}

/* === Mobile charts really use the width === */
@media (max-width: 600px){
  .lb-table{ table-layout: auto !important; }
  .lb-name{ width:auto !important; }
  .lb-progress{ width:100% !important; }
  .lb-progress .spark{ height:64px; display:block; }
}

/* === Full-row green halo (no column spill) === */
.lb-wrap{ position: relative; }                  /* ensure the row halo clips in the card */
.lb-table tr.row-celebrate{ position: relative; z-index: 1; }
.lb-table tr.row-celebrate::after{
  content:""; position:absolute;
  left: 0; right: 0; top: -5px; bottom: -5px;   /* span across the whole row block */
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(0,255,153,.80), 0 0 24px rgba(0,255,153,.45);
  animation: rowHalo 2s ease-out forwards;
}
@keyframes rowHalo{
  0%   { box-shadow: 0 0 0 3px rgba(0,255,153,.9), 0 0 28px rgba(0,255,153,.55); }
  40%  { box-shadow: 0 0 0 2px rgba(0,255,153,.65), 0 0 20px rgba(0,255,153,.40); }
  100% { box-shadow: 0 0 0 1px rgba(0,255,153,.30), 0 0 8px  rgba(0,255,153,.18); }
}
/* kill old per-cell effect so only the halo shows */
tr.row-celebrate td{ background: rgba(255,255,255,.03) !important; box-shadow: none !important; }
/* ==== AMOUNT CELL — inherit row visuals, only center text ==== */
.lb-amount{
  /* inherit the TD look from .lb-table td (bg/border/radius) */
  background: inherit !important;
  border: inherit !important;
  color: inherit !important;
  padding: 12px 14px !important;
  text-align: center !important;
  vertical-align: middle !important;
  /* DO NOT change display (keep td default) */
}

/* One-line center for $ + number */
.lb-amount .amt-center{
  display: inline-flex;
  align-items: baseline;        /* nicer optical baseline */
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1;
  color: inherit;
}

/* Typography (desktop), mobile stays hidden per your rules */
@media (min-width: 960px){
  .lb-amount .amt-center{ font-size: 1.5rem; }
}

/* Ensure no stray color/opacity leaks from themes */
.lb-amount .cur,
.lb-amount .odometer{ color: inherit !important; opacity: 1 !important; }
/* Inline, compact weather badge next to the name (mobile-first) */
.wx-inline{
  padding: 1px 6px;
  margin-left: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  font-size: .78rem;
  line-height: 1.1;
  white-space: nowrap;
  color: #fff;
}
.wx-inline .v-icon{ font-size: 14px; opacity: .9; }

/* Hide the big chip on phones; show only inline pill */
@media (max-width: 600px){
  .wx-chip{ display: none !important; }

  /* give the chart more room on phones */
  .lb-table{ table-layout: auto !important; }
  .lb-name{ width: 56% !important; }      /* was ~64% */
  .lb-progress{ width: 44% !important; }  /* was ~36% */
  .lb-progress .spark{ height: 64px; }    /* keep readable */
}

/* Ultra-narrow phones: drop the icon, keep temp only */
@media (max-width: 380px){
  .wx-inline .v-icon{ display: none !important; }
  .wx-inline{ padding: 1px 5px; }
}

/* Tablet/desktop: keep your original chip and hide the inline pill */
@media (min-width: 960px){
  .wx-inline{ display: none !important; }
  .wx-chip{ display: inline-flex !important; }
}
/* --- Give the chart (lb-progress) more width on mobile --- */
@media (max-width: 600px){
  /* widen the chart area */
  .lb-name     { width: 48% !important; }   /* was 56-60% */
  .lb-progress { width: 52% !important; }   /* give more priority */
  
  /* slightly tighten chips under the name */
  .lb-name .mini-kpis {
    gap: 6px;
    margin-top: 4px;
  }

  /* keep the spark readable */
  .lb-progress .spark{
    height: 64px;
    display: block;
  }

  /* optional: reduce font size of compare line for clarity */
  .lb-progress .text-caption{
    font-size: 0.82rem;
    line-height: 1.2;
  }
}

/* Ultra-narrow phones (≤380 px): even more chart bias */
@media (max-width: 380px){
  .lb-name     { width: 44% !important; }
  .lb-progress { width: 56% !important; }
}
/* ---- Mobile: let the chart fully claim its column ---- */
@media (max-width: 600px){
  /* Give the chart column the pixels; reduce internal padding */
  .lb-progress{
    padding: 6px 6px 4px 6px !important;   /* was larger */
  }

  /* SVG: fill the cell width & use the full height we set */
  .lb-progress .spark{
    display: block;
    width: 100% !important;                /* stretch horizontally */
    height: var(--spark-h, 68px) !important; /* taller default for phones */
  }

  /* Keep the compare line from stealing rows of height */
  .lb-progress .text-caption{
    margin-top: 4px !important;
    font-size: .8rem !important;
    line-height: 1.2 !important;
    white-space: nowrap;                   /* single line */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Slightly compress the left column’s chip block so the chart breathes */
  .lb-name .mini-kpis{
    gap: 6px !important;
    margin-top: 4px !important;
  }
  .lb-name .mini-kpis .mini-chip{
    font-size: .76rem !important;
    padding: 2px 7px !important;
  }

  /* If your table had fixed layout, relax it on phones */
  .lb-table{ table-layout: auto !important; }
}

/* Ultra-narrow phones: squeeze text more, keep bars readable */
@media (max-width: 380px){
  .lb-progress .spark{ height: var(--spark-h, 72px) !important; }
  .lb-progress .text-caption{ font-size: .78rem !important; }
}
/* mobile full-bleed for the hero carousel */
@media (max-width: 600px){
  /* kill the container padding on phones just for the hero */
  .hero-section .hero-container{
    padding-left: 10 !important;
    padding-right: 0 !important;
  }

  /* bleed the carousel card to the edges */
  .hero-section .metrics-tray{
    margin-left:  calc(-1 * var(--container-x, 16px));
    margin-right: calc(-1 * var(--container-x, 16px));
    border-radius: 12px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* ensure the internal carousel fills width and looks tight */
  .hero-section .hero-carousel{
    width: 100%;
  }
  .hero-section .hero-carousel .v-window{ width:100%; }
  .hero-section .hero-carousel .stat-card .v-card__text{ padding-left: 0; padding-right: 0; }
}
/* hide the secondary CTA on narrow phones */
@media (max-width: 424px){
  .btn-claim{ display:none !important; }
}
@media (min-width: 960px){
  #drilldown .drill-wrap{ padding: 28px 28px 32px !important; }

  #drilldown .dd-kpis{ margin: 24px 0 !important; row-gap: 16px !important; }
  #drilldown .dd-grid{ margin: 28px 0 !important; row-gap: 20px !important; }

  #drilldown .chart-card, #drilldown .kpi-tile{ padding: 18px !important; }
  #drilldown .dd-canvas--heat{ margin-top: 14px; }
}
/* ===== Center-weight ONLY for non-chart cards ===== */

/* Baseline: chart & KPI cards stack content, but no forced centering */
#drilldown .chart-card,
#drilldown .kpi-tile{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Non-chart tiles: KPI + any .metric-card */
#drilldown .kpi-tile,
#drilldown .metric-card{
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Keep real charts data-focused (they contain .dd-canvas) */
#drilldown .chart-card .dd-canvas{ /* presence indicates a chart */
  /* no-op: just here for clarity */
}
#drilldown .chart-card:not(.metric-card){
  /* explicitly left/normal alignment for charts */
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
}

/* Titles and numbers centered only for non-chart cards */
#drilldown .kpi-tile .kpi-title,
#drilldown .metric-card .stat-overline{
  justify-content: center;
  text-align: center;
}

#drilldown .kpi-value,
#drilldown .metric-card .kpi-value{
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.15;
  text-align: center;
  margin-top: 6px;
}

/* Optional: ensure any old global centering rules are neutralized */
#drilldown .chart-card:not(.metric-card) .stat-overline,
#drilldown .chart-card:not(.metric-card) .text-caption{
  text-align: left;
}
/* Keep the picker compact and centered without horizontal scroll */
.range-picker .rp-toggle { white-space: nowrap; }
.range-picker .rp-date { opacity: .86; }
.range-picker.is-live .rp-toggle { box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; }

/* Optional: match your soft-card vibe for chips on dark */
.chip-ghost {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--border, rgba(255,255,255,.12)) !important;
}
/* ===== YOU card polish ===== */
.you-card.pro-elevated{
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 16px;
}

/* Avatar with ring + gradient */
.you-avatar--ring{
  display:flex; align-items:center; justify-content:center;
}
.you-avatar__core{
  position: relative; overflow: visible;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.08);
}
.you-avatar__grad{
  position:absolute; inset:0; border-radius:999px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(136,0,255,.55) 0%, rgba(255,200,100,.55) 45%, rgba(0,0,0,.15) 100%);
  filter: saturate(1.1);
}
.you-avatar__initials{
  position:relative; z-index:1;
  font-weight:800; letter-spacing:.5px;
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25);
  font-family: 'Orbitron', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 26px;
}

/* Chips */
.chip-ghost{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
}
.you-chipgroup .v-chip{ height: 28px; }

/* XP bar */
.you-xpbar{
  width:100%; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,.12); position: relative; overflow:hidden;
}
.you-xpfill{
  height:100%; border-radius: 999px;
  background: linear-gradient(90deg, #9b5cff, #f3c04d);
  transition: width .45s ease;
}
.you-xpshine{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
}

/* Name */
.you-name{ font-weight:800; letter-spacing:.4px; }

/* Make the header breathe on small screens */
@media (max-width: 959.98px){
  .you-headline{ align-items: flex-start !important; }
}
.chip-achieve{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 0 0 0 rgba(248,217,78,.0);
  transition: box-shadow .25s ease, transform .12s ease;
}
.chip-achieve:hover{
  box-shadow: 0 0 0 6px rgba(248,217,78,.15);
  transform: translateY(-1px);
}
/* ===== Combined XP in panel header ===== */
.you-xp-combined .v-expansion-panel-header {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 14px;
}

.xp-header .xp-title strong{
  letter-spacing:.3px;
}

.xp-inline-track{
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
  min-width: 140px;
}
.xp-inline-fill{
  position:absolute; top:0; left:0; height:100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #9b5cff 0%, #f3c04d 55%, #f3c04d 100%);
  transition: width .45s ease;
}
.xp-inline-num{
  white-space: nowrap;
  color: rgba(255,255,255,.85);
}

/* Responsive: stack title over bar on small screens */
@media (max-width: 959.98px){
  .xp-header { align-items: stretch; }
  .xp-inline-num { margin-top: 4px; }
}
/* Business-card slab */
.card--biz{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  padding:14px 16px 12px;
}

/* Top bar */
.bizbar{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:10px 12px;
}

/* Avatar */
.biz-avatar{ position:relative; overflow:visible; }
.biz-avatar-grad{
  position:absolute; inset:0; border-radius:999px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(136,0,255,.55) 0%, rgba(255,200,100,.55) 45%, rgba(0,0,0,.15) 100%);
}
.biz-initials{
  position:relative; z-index:1; color:#fff; font-weight:800; font-size:26px;
  font-family:'Orbitron','Inter',system-ui; text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* Name */
.biz-name{
  font-weight:800; letter-spacing:.35px;
  font-size:22px; line-height:1.1;
}

/* Chips */
.chip-ghost{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.chip-achieve{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 0 0 0 rgba(248,217,78,.0);
  transition: box-shadow .25s ease, transform .12s ease;
}
.chip-achieve:hover{ box-shadow:0 0 0 6px rgba(248,217,78,.15); transform:translateY(-1px); }

/* Inline XP at right */
.xp-inline-track{
  position: relative; flex: 1 1 280px; height: 8px; min-width: 180px;
  border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden;
}
.xp-inline-fill{
  position:absolute; inset:0; right:auto; width:0%;
  background: linear-gradient(90deg, #9b5cff 0%, #f3c04d 60%, #f3c04d 100%);
  border-radius: 999px; transition: width .45s ease;
}
.xp-inline-num{ white-space:nowrap; color:rgba(255,255,255,.9); }

/* Bottom rows */
.biz-chips{ margin-top:10px; }
.biz-panel{ margin-top:6px; }

/* Responsive */
@media (max-width: 959.98px){
  .xp-inline-track{ flex-basis: 100%; }
  .bizbar{ align-items:flex-start; }
}
/* Business-card slab */
.card--biz{ border-radius:18px; border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02)); padding:14px 16px 12px;}

/* Top bar */
.bizbar{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px 12px;}

/* Avatar */
.biz-avatar{ position:relative; overflow:visible;}
.biz-avatar-grad{ position:absolute; inset:0; border-radius:999px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(136,0,255,.55) 0%, rgba(255,200,100,.55) 45%, rgba(0,0,0,.15) 100%);}
.biz-initials{ position:relative; z-index:1; color:#fff; font-weight:800; font-size:26px; font-family:'Orbitron','Inter',system-ui; text-shadow:0 1px 0 rgba(0,0,0,.25);}

/* Name */
.biz-name{ font-weight:800; letter-spacing:.35px; font-size:22px; line-height:1.1;}

/* Anchored rails */
.rail-group{ margin-top:10px; }
.rail-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12rem; opacity:.7; margin:2px 0 6px 2px; }
.rail{
  display:flex; gap:8px; flex-wrap:wrap; padding:8px; border-radius:12px;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
}
.rail--stats .v-chip, .rail--badges .v-chip{ height:26px; }

/* Chips */
.chip-ghost{ background: rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.10) !important;}
.chip-achieve{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 0 0 0 rgba(248,217,78,.0);
  transition: box-shadow .25s ease, transform .12s ease;
}
.chip-achieve:hover{ box-shadow: 0 0 0 6px rgba(248,217,78,.15); transform: translateY(-1px); }

/* Inline XP */
.xp-inline-track{ position: relative; flex: 1 1 280px; height: 8px; min-width: 180px;
  border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.xp-inline-fill{ position:absolute; inset:0; right:auto; width:0%;
  background: linear-gradient(90deg, #9b5cff 0%, #f3c04d 60%, #f3c04d 100%);
  border-radius: 999px; transition: width .45s ease; }
.xp-inline-num{ white-space:nowrap; color:rgba(255,255,255,.9); }

/* Responsive */
@media (max-width: 959.98px){
  .xp-inline-track{ flex-basis: 100%; }
  .bizbar{ align-items:flex-start; }
}
.you-flag-card { border-radius: 16px; }

 
.you-avatar__grad {
  position:absolute; inset:0;
  background: radial-gradient(120% 120% at 10% 10%, #6f42c1 0%, #d09c2d 55%, #2b2b35 100%);
  filter: saturate(1.1);
}
.you-avatar__initials {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:.5px;
}

.you-xpbar { position: relative; height: 8px; background: rgba(255,255,255,.10); border-radius: 8px; overflow: hidden; }
.you-xpbar--inline { height: 10px; }
.you-xpfill { position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(90deg, #7a49ff 0%, #e6b24b 65%); }
.you-xpshine { position:absolute; top:0; bottom:0; right:-24px; width:24px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.28)); }
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700;800&display=swap');

/* --- Flag card polish + consistent rounded radii --- */
.you-flag-card { border-radius: 14px !important; overflow: hidden; }
.you-panels .v-expansion-panel { border-radius: 12px !important; overflow: hidden; }
.you-panels .v-expansion-panel + .v-expansion-panel { margin-top: 10px; }

/* Apply Rajdhani to the flag area (doesn't affect icons) */
.you-flag-card,
.you-flag-card .v-expansion-panel-header,
.you-flag-card .v-expansion-panel-content,
.you-flag-card .v-card__text,
.you-flag-card .v-chip {
	font-family: "Rajdhani", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
	letter-spacing: .02em;
}

.you-panels .v-expansion-panel-header {
	background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,0));
	border: 1px solid var(--border, rgba(255,255,255,.12));
	min-height: 48px;
	padding: 0 14px;
}
.you-panels .v-expansion-panel-content {
	border: 1px solid var(--border, rgba(255,255,255,.12));
	border-top: 0;
	background: rgba(255,255,255,.04);
}

/* Titles: bold all-caps, tighter look */
.ep-title { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.you-name { text-transform: uppercase; letter-spacing: .06em; font-weight: 900; font-size: 1.1rem; }

.you-avatar__core {
position: relative;
border-radius: 999px;
overflow: hidden;
width: 160px;
height: 160px;
border: 1.5px solid var(--border, rgba(255,255,255,.14));
box-shadow: 0 2px 0 rgba(255,255,255,.08) inset, 0 10px 24px rgba(0,0,0,.55);
}

@media (max-width: 960px) {
.you-avatar__core {
width: 120px;
height: 120px;
}
}
.you-avatar__grad {
	position:absolute; inset:0;
	background: radial-gradient(120% 120% at 10% 10%, #6f42c1 0%, #e2b24a 55%, #2b2b35 100%);
	filter: saturate(1.1);
}
.you-avatar__initials {
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	font-weight:900; letter-spacing:.06em; font-size: 32px;
}

/* Slim XP bar (header only — numbers are revealed inside when expanded) */
.you-xpbar { position: relative; height: 10px; background: rgba(255,255,255,.10); border-radius: 10px; overflow: hidden; }
.you-xpfill { position:absolute; left:0; top:0; bottom:0; width:0%;
	background: linear-gradient(90deg, #7a49ff 0%, #e6b24b 65%); }
.you-xpshine { position:absolute; top:0; bottom:0; right:-24px; width:24px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.28)); }

.chip-ghost { background: rgba(255,255,255,.06) !important; border: 1px solid var(--border, rgba(255,255,255,.14)) !important; }
/* Make the circle feel intentional + responsive */
.you-avatar__core{
  position:relative;
  border-radius:999px;
  overflow:hidden;
  width:176px;               /* fuller on desktop */
  height:176px;
  background: #121214;       /* safety backdrop */
  border: 1.5px solid rgba(255,255,255,.14);
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 14px 28px rgba(0,0,0,.55); /* weightier */
}

 
/* The actual photo: fill the circle; no letterboxing */
.you-avatar__img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;             /* <- the fix */
  object-position:center 35%;   /* slight bias up to favor faces */
}

/* Keep the initials/gradient fallback above the image only while loading */
.you-avatar__grad,
.you-avatar__initials{ z-index:1; }

/* Responsive: scale down a touch on tablets/phones */
@media (max-width: 1264px){
  .you-avatar__core{ width:160px; height:160px; }
}
@media (max-width: 960px){
  .you-avatar__core{ width:120px; height:120px; }
}
/* Circle container (unchanged except we keep it relative) */
.you-avatar__core{
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  width: 176px;
  height: 176px;
  background: #121214;
  border: 1.5px solid rgba(255,255,255,.14);
  box-shadow: 0 2px 0 rgba(255,255,255,.06) inset, 0 14px 28px rgba(0,0,0,.55);
}

 
/* Photo — ensure it sits below the ring but fills the circle */
.you-avatar__img{
  position: relative;
  z-index: 1;                      /* <- below the ring */
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 35%;
  border-radius:50%;
}

/* Fallback layers (gradient + initials) stay on top while loading */
.you-avatar__grad,
.you-avatar__initials{
  z-index: 3;                      /* above both ring and image while loading */
  position:absolute;
  inset:0;
}
/* BASE: ring hidden until ready */
.you-avatar__core::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:3px;
  background: conic-gradient(from 210deg,#a78bfa 0%,#8b5cf6 25%,#f59e0b 55%,#a78bfa 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  z-index:2;
  opacity:0;                /* <-- important: start hidden so no pre-flash */
  animation:none;           /* <-- reset in case of re-mounts */
}

/* READY: play intro once, then spin subtly */
.you-avatar__core.you-avatar--ring.is-ready::before{
  opacity:1;
  animation:
    ringIntro .8s cubic-bezier(.2,.8,.2,1) both,
    ringLoop 18s linear infinite 1.2s;
}

/* Keyframes (unchanged) */
@keyframes ringIntro{
  0%   { transform: scale(.92) rotate(-60deg); opacity:0; filter:brightness(.9) }
  60%  { transform: scale(1.02) rotate(-10deg); opacity:1; filter:brightness(1.08) }
  100% { transform: scale(1)    rotate(0deg);   opacity:1; filter:brightness(1) }
}
@keyframes ringLoop{ to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .you-avatar__core.you-avatar--ring.is-ready::before{
    animation:none; opacity:1; transform:none;
  }
}
/* AVATAR RING — final overrides to prevent pre-flash */
.you-avatar__core::before{
  opacity: 0 !important;
  animation: none !important;
}

.you-avatar__core.you-avatar--ring.is-ready::before{
  opacity: 1 !important;
  animation:
    ringIntro .8s cubic-bezier(.2,.8,.2,1) both,
    ringLoop 18s linear infinite 1.2s !important;
}
/* --- Avatar size + centering fix (flag layout) --- */
.you-avatar__core {
  width: 190px !important;   /* slightly larger */
  height: 190px !important;
  margin: 0 auto;            /* centers perfectly in its column */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure the ring stays centered around the new size */
.you-avatar__core::before {
  padding: 3px;
  inset: 0;
  border-radius: 50%;
  box-sizing: border-box;
}

/* The image stays centered within the circle */
.you-avatar__img {
  object-position: center 38%;  /* lift face slightly */
}
/* --- FINAL Avatar size + centering fix (force-override) --- */
.you-avatar__core {
  width: 200px !important;        /* larger, makes ring more prominent */
  height: 200px !important;
  margin: 0 auto !important;      /* fully centers horizontally */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
	
}


/* Ensure the image and ring align perfectly */
.you-avatar__img {
  object-fit: cover !important;
  object-position: center 38% !important;  /* bias slightly up for faces */
  border-radius: 50% !important;
}

/* Ensure the ring respects the new size and doesn't shift */
.you-avatar__core::before {
  padding: 3px !important;
  inset: 0 !important;
  border-radius: 50% !important;
  transform-origin: center center !important;
}
.you-avatar__core{ position:relative; width:200px; height:200px; border-radius:50%; margin:0 auto; display:grid; place-items:center; background:#121214; border:1.5px solid rgba(255,255,255,.14); box-shadow:0 2px 0 rgba(255,255,255,.06) inset,0 14px 28px rgba(0,0,0,.55); }
@media (max-width:1264px){ .you-avatar__core{ width:160px;height:160px; } }
@media (max-width:960px){ .you-avatar__core{ width:120px;height:120px; } }
.you-avatar__img{ width:100%!important; height:100%!important; border-radius:50%!important; overflow:hidden; }
.you-avatar__img .v-image__image{ border-radius:50%; background-size:cover!important; background-position:center 38%!important; }
.you-avatar__grad,.you-avatar__initials{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.you-avatar__grad{ background: radial-gradient(120% 120% at 10% 10%, #6f42c1 0%, #e2b24a 55%, #2b2b35 100%); filter:saturate(1.05); }
.you-avatar__initials{ font-family:'Orbitron','Inter',system-ui; font-weight:900; letter-spacing:.06em; font-size:32px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25); }
.you-avatar__core.you-avatar--ring::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:3px;
  background:conic-gradient(from 210deg,#a78bfa 0%,#8b5cf6 25%,#f59e0b 55%,#a78bfa 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2;
  visibility:hidden; opacity:0; animation:none; transform:none;
}
.you-avatar__core.you-avatar--ring.is-ready::before{
  visibility:visible; opacity:1; animation:ringIntro .8s cubic-bezier(.2,.8,.2,1) both, ringLoop 18s linear infinite 1.2s;
}
@keyframes ringIntro{ 0%{transform:scale(.92) rotate(-60deg);opacity:0;filter:brightness(.9)} 60%{transform:scale(1.02) rotate(-10deg);opacity:1;filter:brightness(1.08)} 100%{transform:scale(1) rotate(0);opacity:1;filter:brightness(1)} }
@keyframes ringLoop{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .you-avatar__core.you-avatar--ring.is-ready::before{ animation:none; opacity:1; visibility:visible; } }
@media (min-width: 601px) {
  .you-avatar__core {
    margin-left: 56px !important;
  }
}
/* Make all KPI cards the same collapsed height (Title + Value + Expander) */
.equal-row > .v-col { display:flex; }
.kpi-card {
  display:flex; flex-direction:column; width:100%;
  min-height: 170px;            /* uniform collapsed height */
  position:relative; overflow:hidden;
  border-radius: 16px;
}

/* Rows */
.kpi-head-row  { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kpi-value-row { margin-top: 8px; }

/* Expander trigger (row 3) */
.kpi-expander{
  width:100%;
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:#fff;
  font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.kpi-expander:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.kpi-expander .chev{ transition: transform .25s ease; }
.kpi-expander .chev.rot{ transform: rotate(180deg); }

/* Magical reveal container */
.kpi-reveal{
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius: 14px;
  padding: 12px;
  position: relative;
  overflow: clip;
}
.kpi-reveal::before{
  content:"";
  position:absolute; inset:-40% -40% auto auto; width:200px; height:200px;
  border-radius: 50%;
  filter: blur(20px);
  opacity: .12;
  background: radial-gradient(circle, var(--brand-neon,#9a6bff), transparent 60%);
  animation: kpiOrb 6s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes kpiOrb{
  from{ transform: translate(10px,8px) scale(1); opacity:.08; }
  to  { transform: translate(0,0) scale(1.06);  opacity:.16; }
}

/* Reveal transition: soft slide + sheen */
.kpi-reveal-enter-active,
.kpi-reveal-leave-active{ transition: all 260ms cubic-bezier(.22,1,.36,1); }
.kpi-reveal-enter,
.kpi-reveal-leave-to{
  opacity: 0;
  transform: translateY(-6px);
  /* sheen mask */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px);
          mask-image: linear-gradient(180deg, transparent 0, #000 18px);
}

/* Small list style inside reveal */
.kpi-list { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.kpi-list .mini-chip{ border:1px solid var(--border); background:rgba(255,255,255,.06); }
.kpi-list .note{ opacity:.9; }

/* Progress bar (uses your existing naming) */
.kpi-bar{ position:relative; height:10px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.kpi-bar__fill{ position:absolute; inset:0 auto 0 0; width:0%; background:linear-gradient(90deg, var(--neon,#8800ff), #fff); }
.kpi-bar__fill.good{ background: linear-gradient(90deg, #39e58c, #a7ffd6); }
.kpi-bar__fill.warn{ background: linear-gradient(90deg, #ff6b6b, #ffd8c2); }

/* Big value */
.kpi-value{
  font-family: var(--font-display, system-ui);
  font-weight: 900;
  font-size: clamp(1.6rem, 4.8vw, 2.2rem);
  line-height: 1.1;
  text-align: center;
  color: var(--brand-ink,#e9e9ee);
}

/* Keep collapsed height on mobile too; allow reveal to grow naturally */
@media (max-width:600px){
  .kpi-card{ min-height: 155px; border-radius: 12px; }
  .kpi-expander{ padding:8px 10px; }
}
/* === Glowing chevron arrow that protrudes below each KPI card === */
.kpi-card--chevron{
  position:relative;
  overflow:visible;                     /* let arrow step out */
  padding-bottom:30px !important;
  transition:filter .3s ease;
}
.kpi-card--chevron .kpi-click{ cursor:pointer; }

.kpi-arrow-dock{
  position:absolute;
  left:50%;
  bottom:-26px;                         /* below card edge */
  transform:translateX(-50%);
  border:none;
  background:none;
  outline:none;
  cursor:pointer;
}

/* Chevron housing */
.chev-wrap{
  position:relative;
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:radial-gradient(circle at 50% 60%, rgba(136,0,255,.15) 0%, rgba(0,0,0,.6) 80%);
 
 
}

/* Icon styling */
.chev-wrap v-icon{
  font-size:36px;
  transition:transform .35s cubic-bezier(.22,1,.36,1), color .3s ease;
  text-shadow:0 0 12px rgba(136,0,255,.55);
}

/* Idle subtle bounce */
@keyframes chevFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}

/* When open: flip + color shift + glow change */
.kpi-card--chevron.open .chev-wrap{
  animation:none;
  background:radial-gradient(circle at 50% 40%, rgba(57,229,140,.18) 0%, rgba(0,0,0,.6) 80%);
  box-shadow:
    0 0 22px rgba(57,229,140,.4),
    inset 0 0 10px rgba(255,255,255,.1);
}
.kpi-card--chevron.open .chev-wrap v-icon{
  transform:rotate(180deg);
  color:#9CF6B1;
  text-shadow:0 0 12px rgba(57,229,140,.55);
}

/* Animated reveal (no dead space) */
.kpi-reveal-wrap{
  overflow:hidden;
  transition:height .4s cubic-bezier(.22,1,.36,1);
}
.kpi-reveal-inner{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  padding:12px;
  animation:fadeUp .4s cubic-bezier(.22,1,.36,1);
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}
/* === KPI: arrow sizing + spacing to ranges === */
.kpi-stack { margin-bottom: 22px; }          /* separation between KPI row and range picker */

.kpi-card--chevron { padding-bottom: 26px !important; }  /* keep room for smaller arrow */
.kpi-arrow-dock     { bottom: -22px; }                   /* step out below the card a bit less */

.chev-wrap{
  width: 50px;            /* was 56 */
  height: 50px;           /* was 56 */
}
.chev-wrap v-icon{
  font-size: 32px;        /* was 36 */
}
/* Chevron base */
.chev-wrap{
  position:relative;
  width: 50px; height: 50px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;

}

/* IMPORTANT: Vuetify renders <i class="v-icon ...">, not <v-icon> */
.chev-wrap .v-icon{
  font-size: 32px;
  display:inline-block;
  transform: rotate(0deg);
  transition: transform 320ms cubic-bezier(.22,1,.36,1), color .3s ease;
  text-shadow: 0 0 12px rgba(136,0,255,.55);
}

/* Easy win: rotate when aria-expanded is true (and keep class fallback) */
.kpi-card--chevron[aria-expanded="true"] .chev-wrap .v-icon,
.chev-wrap.open .v-icon{
  transform: rotate(180deg);
  color:#9CF6B1;
  text-shadow:0 0 12px rgba(57,229,140,.55);
}

/* Glow shift when open */
.kpi-card--chevron[aria-expanded="true"] .chev-wrap{
  animation:none;
  background: radial-gradient(circle at 50% 40%, rgba(57,229,140,.18), rgba(0,0,0,.6));
  box-shadow: 0 0 22px rgba(57,229,140,.4), inset 0 0 10px rgba(255,255,255,.10);
}

/* Idle micro-bounce */
@keyframes chevFloat{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-3px); }
}

/* Height animation for content */
.kpi-reveal-wrap{
  overflow:hidden;
  transition: height 360ms cubic-bezier(.22,1,.36,1);
}
:root {
  --ach-max: 640px; /* controls achievements width cap */
}

/* ensure tooltips + content visible */
.you-panels .v-expansion-panel-content,
.you-panels .v-expansion-panel-content__wrap { overflow: visible !important; }

/* white numeric pill */
.count-pill {
  border-radius: 999px;
  height: 22px;
  min-width: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .3px;
  line-height: 1;
  pointer-events: none;
}
.white-pill {
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.6);
}

/* Achievements layout */
.ach-max {
  max-width: var(--ach-max);
  width: 100%;
}
.ach-wrap {
  max-width: var(--ach-max);
  width: 100%;
}

/* scrollable timeline */
.ach-scroll {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
  mask-image: linear-gradient(to bottom,
    transparent 0, black 12px,
    black calc(100% - 12px), transparent 100%);
}

/* timeline row consistency */
.you-xp-timeline .xp-row .v-timeline-item__body {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.you-xp-timeline.v-timeline--dense .v-timeline-item__body {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* slightly squarer dots */
.you-xp-timeline .v-timeline-item__dot {
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.06);
}

/* responsive tweak */
@media (max-width: 599px) {
  :root { --ach-max: 100%; }
}
/* Square up expansion panels */
.you-flag-card {
  border-radius: 10px !important; /* less rounded */
  padding: 0 !important;
}

/* Make the right-hand panel fill more horizontally */
.you-flag-card .v-col:nth-child(3) {
  padding-left: 12px !important;
  padding-right: 0 !important;
}

/* Reduce the left/right spacing overall */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 8px !important; /* tighter edges */
}

/* Give avatar and divider tighter alignment */
.you-hero-row--inset {
  align-items: stretch;
}
.you-hero-row--inset .v-col.md\\:3 {
  padding-right: 8px !important;
}

/* Divider thin and full height */
.you-hero-row--inset .v-col.d-none.d-md-flex div {
  height: 100%;
  opacity: 0.18;
}

/* More square panel look */
.you-panels .v-expansion-panel,
.you-panels .v-expansion-panel::before {
  border-radius: 8px !important;
}
.you-panels .v-expansion-panel + .v-expansion-panel {
  margin-top: 6px;
}
.you-panels .v-expansion-panel-header {
  min-height: 52px;
  padding: 0 14px;
	  background: linear-gradient(to bottom,
    rgba(255,255,255,.14), rgba(255,255,255,0));
}

/* tighten white bubble alignment */
.count-pill.white-pill {
  margin-top: -1px;
}

/* keep overall right section aligned nicely */
.v-col.pa-3.pa-md-4 {
  padding: 0 0 0 12px !important;
}
/* Give vertical breathing room between the 2-up rows on mobile */
@media (max-width: 600px){
  .kpi-compact {
    row-gap: 18px;         /* space between the two layers of tiles */
  }
}

/* (optional) if your browser mix ignores row-gap on flex, use this fallback */
@media (max-width: 600px){
  .kpi-compact > .v-col {  /* each KPI tile column */
    margin-bottom: 18px !important;
  }
  /* remove extra gap after the last row */
  .kpi-compact > .v-col:nth-last-child(-n+2){
    margin-bottom: 0 !important;
  }
}
/* Rhythm */
.dd-container { --gap: 16px; }
.dd-grid { row-gap: var(--gap); }
.dd-kpis  { margin-top: var(--gap); }

/* Header layout */
.dd-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.dd-head-left { justify-self: start; }
.dd-head-center { justify-self: center; }
.dd-head-right { justify-self: end; display:flex; align-items:center; gap:8px; }
.dd-title { font-weight: 700; letter-spacing:.04em; opacity:.9; }

/* Make range-picker compact & horizontal inside the header */
.dd-head-center .range-picker { margin-top: 0 !important; }
.dd-head-center .range-picker > div:first-child { flex-direction: row !important; gap: 10px !important; }
.dd-head-center .range-picker .rp-date { display: none; } /* keep it tidy */

/* Chart card top bar */
.chart-card .chart-bar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 10px;
}
.chart-actions .v-btn { opacity:.8; }
.chart-actions .v-btn:hover { opacity:1; }

/* Fullscreen dialog */
.dd-fs-card { background: linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.94)); }
.dd-fs-bar { display:flex; align-items:center; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.dd-fs-body { height: calc(100vh - 48px); padding: 10px; }
.dd-fs-body canvas { width:100% !important; height:100% !important; }

/* Mobile edge-to-edge */
@media (max-width: 600px){
  .dd-header { border-radius: 12px; padding: 10px !important; }
  .dd-container { --gap: 12px; }
}
/* Smooth layout transitions for inline chart expansion */
.dd-grid .chart-col {
  transition:
    flex-basis 0.26s ease,
    max-width 0.26s ease,
    transform 0.26s ease,
    opacity 0.26s ease;
}

.dd-grid .chart-card {
  transition:
    box-shadow 0.26s ease,
    transform 0.26s ease,
    border-color 0.26s ease,
    background 0.26s ease;
}

.dd-grid--has-expanded .chart-col--expanded {
  flex: 0 0 100%;
  max-width: 100%;
}

.dd-grid--has-expanded .chart-card--expanded {
  box-shadow: 0 18px 48px rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.20);
  transform: translateY(-4px);
}

/* De-emphasize siblings in the same row */
.dd-grid--has-expanded .chart-col:not(.chart-col--expanded) {
  opacity: .35;
  transform: translateY(10px) scale(.97);
}

.dd-grid--has-expanded .chart-col:not(.chart-col--expanded) .chart-card {
  pointer-events: none;
}

/* Give expanded charts more vertical breathing room */
.chart-card--expanded .dd-canvas {
  min-height: 260px;
}

@media (min-width: 960px) {
  .chart-card--expanded .dd-canvas {
    min-height: 320px;
  }
}
/* Base scroll reveal state (NO BLUR) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition:
    opacity .6s cubic-bezier(.17,.67,.4,1),
    transform .6s cubic-bezier(.17,.67,.4,1);
  will-change: opacity, transform;
}


/* When visible */
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Optional: subtle stagger for cards in a row */
.stack-3 > .v-col:nth-child(1) .reveal-on-scroll { transition-delay: 0.0s; }
.stack-3 > .v-col:nth-child(2) .reveal-on-scroll { transition-delay: 0.08s; }
.stack-3 > .v-col:nth-child(3) .reveal-on-scroll { transition-delay: 0.16s; }
.chart-head {
  display: flex;
  align-items: center;
}

.chart-head-main {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;   /* title takes remaining space */
}

.chart-head-actions {
  flex: 0 0 auto;
  margin-left: auto; /* push expand icon all the way right */
}