/* Light theme. Same brand as the dark one (docs/brand infographic), translated to daylight: a cool page with a
   faint blue/green aurora, white raised panels with hairlines and soft shadows, pastel brand tiles and one dark
   "hero" tile that carries the infographic look. Scoped to the light theme only, so dark.css never has to undo it. */
:root:not([data-theme=dark]){
  --bg:#ffffff;--page:#edf2f5;--panel:#f4f7f9;--raised:#ffffff;--line:rgba(15,40,55,.09);--muted:#62707b;--text:#0e1a21;--hover:rgba(15,60,85,.05);
  --tint-blue:#e2f3fe;--tint-blue-2:#f2f9ff;--tint-blue-line:rgba(24,140,220,.2);--tint-blue-text:#1672b8;
  --tint-green:#dcf6ea;--tint-green-2:#f0fbf6;--tint-green-line:rgba(18,160,100,.2);--tint-green-text:#0f8a55;
  --tint-mint:#d9f5f3;--tint-mint-text:#0b8580;--tint-red:#fdecee;--tint-red-text:#bf3f4c;
  --tint-amber:#fbf1dd;--tint-amber-text:#9a6b16;--tint-neutral:#eef1f5;--tint-neutral-text:#566072;
  --shadow-soft:0 1px 2px rgba(15,40,55,.05),0 6px 18px -12px rgba(15,40,55,.2);
  --shadow-card:0 1px 2px rgba(15,40,55,.04),0 1px 0 rgba(255,255,255,.9) inset,0 14px 34px -24px rgba(15,50,70,.35);
  --edge:rgba(15,40,55,.07);
  --blue:var(--tint-blue);--purple:var(--tint-green);--lavender:#22c07c;--mint:#2fa0e6;--chart-blue:#bccfdb;--accent:#0f8a55
}
:root:not([data-theme=dark]) body{background:radial-gradient(1100px 520px at 12% -12%,rgba(57,176,244,.16),transparent 62%),radial-gradient(900px 520px at 100% -6%,rgba(44,214,138,.14),transparent 60%),linear-gradient(180deg,#f2f6f8,var(--page) 420px);background-repeat:no-repeat;background-color:var(--page)}
:root:not([data-theme=dark]) ::selection{background:rgba(18,160,110,.18)}

/* Surfaces: white raised cards on the cool page; inner wells keep the faint --panel tint. */
:root:not([data-theme=dark]) .panel,:root:not([data-theme=dark]) .payout-scheme,:root:not([data-theme=dark]) .cloud-card,:root:not([data-theme=dark]) .drop-card,:root:not([data-theme=dark]) .admin-module,:root:not([data-theme=dark]) .blocked-screen,:root:not([data-theme=dark]) .session-banner{background:#fff;box-shadow:inset 0 0 0 1px var(--edge),var(--shadow-card)}
:root:not([data-theme=dark]) .panel .drop-card,:root:not([data-theme=dark]) .panel .cloud-card{background:var(--panel);box-shadow:inset 0 0 0 1px var(--edge)}
:root:not([data-theme=dark]) .ring:before{background:#fff}
:root:not([data-theme=dark]) .topbar{background:rgba(242,246,248,.72);backdrop-filter:saturate(1.5) blur(12px);border-bottom-color:var(--edge)}
:root:not([data-theme=dark]) .sidebar,:root:not([data-theme=dark]) .activity-rail{background:rgba(255,255,255,.78);border-color:var(--edge)}
:root:not([data-theme=dark]) .live-feed{background:rgba(255,255,255,.62);border-color:var(--edge)}
:root:not([data-theme=dark]) .capacity{background:linear-gradient(155deg,#e6f4fd,#e4f7ee);box-shadow:inset 0 0 0 1px rgba(20,150,170,.14)}
:root:not([data-theme=dark]) .cloud-card:hover,:root:not([data-theme=dark]) .admin-module:hover{box-shadow:inset 0 0 0 1px rgba(22,130,200,.22),0 18px 36px -22px rgba(15,90,130,.4)}

/* KPI cards: brand blue / green pastels (docs/brand infographic), the featured card gets a cyan glow. */
:root:not([data-theme=dark]) .stat-card{position:relative;background:radial-gradient(90% 120% at 100% 0%,rgba(57,176,244,.2),transparent 62%),linear-gradient(160deg,#fff 20%,var(--tint-blue));color:var(--text);box-shadow:inset 0 0 0 1px var(--tint-blue-line),inset 0 2px 0 rgba(57,176,244,.55),0 16px 32px -22px rgba(22,114,184,.55)}
:root:not([data-theme=dark]) .stat-card:nth-child(even){background:radial-gradient(90% 120% at 100% 0%,rgba(44,214,138,.2),transparent 62%),linear-gradient(160deg,#fff 20%,var(--tint-green));box-shadow:inset 0 0 0 1px var(--tint-green-line),inset 0 2px 0 rgba(44,214,138,.6),0 16px 32px -22px rgba(15,138,85,.55)}
/* The featured tile stays dark in daylight: it is the one piece of the infographic on the light page. */
:root:not([data-theme=dark]) .stat-card.featured{background:radial-gradient(110% 100% at 100% 0%,rgba(20,221,211,.3),transparent 58%),radial-gradient(80% 90% at 0% 100%,rgba(57,176,244,.2),transparent 60%),linear-gradient(155deg,#0b1a21,#06110f);color:#eef4f7;box-shadow:inset 0 0 0 1px rgba(20,221,211,.35),0 20px 40px -22px rgba(8,90,95,.75)}
:root:not([data-theme=dark]) .stat-card.featured .stat-label,:root:not([data-theme=dark]) .stat-card.featured .stat-foot,:root:not([data-theme=dark]) .stat-card.featured small{color:#a7b8c2}
:root:not([data-theme=dark]) .stat-card.featured .positive{color:#4fe3a2}
:root:not([data-theme=dark]) .stat-card .stat-label svg{color:var(--tint-green-text)}
:root:not([data-theme=dark]) .stat-card:nth-child(odd):not(.featured) .stat-label svg{color:var(--tint-blue-text)}
:root:not([data-theme=dark]) .stat-card .stat-foot,:root:not([data-theme=dark]) .stat-card small{color:#5d6472}
:root:not([data-theme=dark]) .stat-card .positive,:root:not([data-theme=dark]) .positive{color:var(--tint-green-text)}
:root:not([data-theme=dark]) .stat-card .live-dot{background:var(--tint-green-text);box-shadow:0 0 0 3px rgba(15,138,85,.15)}

/* Notices: soft blue plate with an accent edge. */
:root:not([data-theme=dark]) .notice{background:linear-gradient(90deg,#e2f3fe,rgba(255,255,255,.85));color:#16435f;box-shadow:inset 0 0 0 1px var(--tint-blue-line),inset 3px 0 0 #39b0f4}

/* Active controls: raised white pills on panels, a brand-green accent in the sidebar. */
:root:not([data-theme=dark]) .segmented button.active,:root:not([data-theme=dark]) .filter.active,:root:not([data-theme=dark]) .admin-tabs button.active{background:#fff;color:#0f5f99;box-shadow:0 1px 2px rgba(15,40,55,.08),inset 0 0 0 1px rgba(22,130,200,.2)}
:root:not([data-theme=dark]) .nav-item.active{background:linear-gradient(90deg,rgba(18,170,110,.11),rgba(57,176,244,.03));box-shadow:inset 0 0 0 1px rgba(18,160,110,.14)}
:root:not([data-theme=dark]) .nav-item.active svg{color:var(--tint-green-text)}
:root:not([data-theme=dark]) .search{background:#fff;box-shadow:0 1px 2px rgba(15,40,55,.04)}
:root:not([data-theme=dark]) .table-scroll,:root:not([data-theme=dark]) .table-bottom{background:#fff}
:root:not([data-theme=dark]) tbody tr:hover{background:rgba(57,176,244,.045)}
:root:not([data-theme=dark]) .search:focus-within{border-color:rgba(18,160,110,.45);box-shadow:0 0 0 3px rgba(18,160,110,.12)}

/* Buttons: see brand.css. */

/* Chips, avatars and icon tiles. */
:root:not([data-theme=dark]) .workspace-icon,:root:not([data-theme=dark]) .avatar,:root:not([data-theme=dark]) .account-icon{background:linear-gradient(145deg,#e6f4fd,#e2f6ee);color:var(--tint-neutral-text);box-shadow:inset 0 0 0 1px rgba(17,24,39,.05)}
:root:not([data-theme=dark]) .drop-symbol{background:var(--tint-neutral);color:var(--tint-neutral-text)}
:root:not([data-theme=dark]) .drop-symbol.purple{background:var(--tint-green);color:var(--tint-green-text)}
:root:not([data-theme=dark]) .drop-symbol.blue{background:var(--tint-blue);color:var(--tint-blue-text)}
:root:not([data-theme=dark]) .drop-symbol.has-item{background:radial-gradient(90% 90% at 50% 15%,#ffffff,#e9edf3);box-shadow:inset 0 0 0 1px rgba(17,24,39,.06)}
:root:not([data-theme=dark]) .rail-icon{background:var(--tint-green);color:var(--tint-green-text)}
:root:not([data-theme=dark]) .rail-icon.blue{background:var(--tint-blue);color:var(--tint-blue-text)}
:root:not([data-theme=dark]) .rail-avatar.has-item{background:radial-gradient(90% 90% at 50% 15%,#ffffff,#e9edf3)}
:root:not([data-theme=dark]) .admin-module-icon{background:var(--tint-green);color:var(--tint-green-text)}
:root:not([data-theme=dark]) .admin-module{box-shadow:inset 0 0 0 1px rgba(17,24,39,.045)}
:root:not([data-theme=dark]) .admin-module:hover,:root:not([data-theme=dark]) .cloud-card:hover{box-shadow:inset 0 0 0 1px rgba(17,24,39,.06),var(--shadow-soft)}
:root:not([data-theme=dark]) .session-label{background:var(--tint-blue);color:var(--tint-blue-text)}
:root:not([data-theme=dark]) .live-meta i{background:var(--tint-green);color:var(--tint-green-text)}

/* Selected options. */
:root:not([data-theme=dark]) .payout-option{background:#fff}
:root:not([data-theme=dark]) .payout-option[aria-pressed=true],:root:not([data-theme=dark]) .role-option[aria-checked=true],:root:not([data-theme=dark]) .live-privacy-option:has(input:checked){background:linear-gradient(155deg,var(--tint-green),var(--tint-green-2));border-color:var(--tint-green-line);box-shadow:0 8px 20px -16px rgba(15,138,85,.6)}

/* Notifications and live feed. */
:root:not([data-theme=dark]) .farm-notice{box-shadow:0 1px 2px rgba(17,24,39,.06),0 18px 36px -18px rgba(17,24,39,.35)}
:root:not([data-theme=dark]) .farm-notice-icon.xp{background:var(--tint-blue);color:var(--tint-blue-text)}
:root:not([data-theme=dark]) .farm-notice-icon.alert{background:var(--tint-red);color:var(--tint-red-text)}
:root:not([data-theme=dark]) .farm-notice-icon.item{background:radial-gradient(90% 90% at 50% 15%,#ffffff,#e9edf3)}
:root:not([data-theme=dark]) .live-card{background:radial-gradient(120% 85% at 50% 0%,color-mix(in srgb,var(--rarity) 26%,transparent),transparent 72%),#fff;box-shadow:inset 0 0 0 1px rgba(17,24,39,.06),0 1px 2px rgba(17,24,39,.04)}
:root:not([data-theme=dark]) .live-card:hover,:root:not([data-theme=dark]) .live-card:focus-visible{background-color:#fff;box-shadow:inset 0 0 0 1px rgba(17,24,39,.08),0 10px 22px -14px color-mix(in srgb,var(--rarity) 70%,transparent)}
:root:not([data-theme=dark]) .live-card.own{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rarity) 55%,transparent),0 1px 2px rgba(17,24,39,.04)}

/* Dialogs. */
:root:not([data-theme=dark]) dialog{border-color:rgba(17,24,39,.06);box-shadow:0 1px 3px rgba(17,24,39,.08),0 30px 70px -24px rgba(17,24,39,.35)}
:root:not([data-theme=dark]) dialog::backdrop{background:rgba(17,24,39,.22)}
@media(max-width:760px){:root:not([data-theme=dark]) .sidebar{background:#fff}}