/* CloudLabs brand layer, loaded last. Colours come from the brand infographic (docs/brand/cloudlabs-infographic.webp):
   blue #39b0f4 for accounts and slots, green #2cd68a for drops and finished farming, a cyan→green sweep for activity.
   Tokens live in light.css / dark.css; this file only adds what the SnowUI base had no hook for. */
:root{--brand-blue:#39b0f4;--brand-cyan:#14ddd3;--brand-green:#2cd68a;--brand-sweep:linear-gradient(90deg,#39b0f4,#14ddd3 55%,#2cd68a)}
:root:not([data-theme=dark]){--chart-line:#1e8fd8;--stat-blue:#1672b8;--stat-green:#0f8a55}
:root[data-theme=dark]{--chart-line:#39b0f4;--stat-blue:#4dbaf6;--stat-green:#35dc93}

/* KPI tiles: numbers take the tile colour, as on the infographic (554 blue, 1268 green). */
.stat-card .stat-value{color:var(--stat-blue)}
.stat-card:nth-child(even) .stat-value{color:var(--stat-green)}
.stat-card.featured .stat-value{background:var(--brand-sweep);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-card .stat-value small{color:var(--muted);-webkit-text-fill-color:var(--muted)}
.stat-card .stat-label svg{color:var(--stat-blue)}
.stat-card:nth-child(even) .stat-label svg{color:var(--stat-green)}
.stat-card.featured .stat-label svg{color:var(--brand-cyan)}
:root[data-theme=dark] .stat-card{transition:box-shadow .25s ease}
:root[data-theme=dark] .stat-card:hover{box-shadow:inset 0 0 0 1px var(--tint-blue-line),0 14px 34px -20px rgba(57,176,244,.55)}
:root[data-theme=dark] .stat-card:nth-child(even):hover{box-shadow:inset 0 0 0 1px var(--tint-green-line),0 14px 34px -20px rgba(44,214,138,.5)}

/* Chart, ring and slot bar. */
.chart .data-line{stroke:var(--chart-line)}
.legend-mark{background:var(--chart-line)}
:root[data-theme=dark] .chart .data-line{filter:drop-shadow(0 0 6px rgba(57,176,244,.45))}
:root[data-theme=dark] .ring{filter:drop-shadow(0 0 10px rgba(20,221,211,.18))}
.capacity-track i{background:var(--brand-sweep)}

/* Navigation accent and switches. */
.nav-item.active:after{background:linear-gradient(180deg,var(--brand-blue),var(--brand-green))}
:root[data-theme=dark] .nav-item.active{background:linear-gradient(90deg,rgba(44,214,138,.1),rgba(57,176,244,.025));box-shadow:inset 0 0 0 1px rgba(44,214,138,.12)}
:root[data-theme=dark] .nav-item.active svg{color:var(--brand-green)}
:root:not([data-theme=dark]) .switch[aria-checked=true]{background:#16a870}

/* Logo bottom-left: round badge from the brand art plus a chrome wordmark in the dark theme. */
.brand{gap:10px}
.brand-mark{object-fit:cover}
:root[data-theme=dark] .brand{background:linear-gradient(180deg,#f6f8fa,#9fabb5);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme=dark] .brand .brand-mark{box-shadow:0 0 0 1px rgba(57,176,244,.3),0 0 18px -4px rgba(20,221,211,.6)}

/* Buttons in the infographic colours. Primary = the blue→cyan→green sweep with dark ink (white on these
   bright hues would fail contrast); secondary = a hairline chip that lights up blue on hover, like the
   stat chips on the infographic; danger stays red. */
.button{font-weight:500}
.button.primary{background:linear-gradient(135deg,#39b0f4 0%,#14ddd3 52%,#2cd68a 100%);background-size:140% 100%;background-position:0 0;border-color:transparent;color:#03171b;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 22px -12px rgba(20,221,211,.75);transition:background-position .35s ease,box-shadow .2s,transform .15s,filter .2s}
.button.primary svg{color:#03171b}
.button.primary:hover{opacity:1;background-position:100% 0;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 14px 28px -12px rgba(20,221,211,.9)}
.button.primary:active{transform:translateY(0);filter:brightness(.96)}
.button.primary:disabled{transform:none;box-shadow:none;filter:saturate(.5)}
:root:not([data-theme=dark]) .button.primary{background-image:linear-gradient(135deg,#2ba5ee 0%,#11cdc3 52%,#22c67f 100%);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 0 0 1px rgba(10,120,120,.18),0 10px 22px -12px rgba(14,160,150,.7)}

:root[data-theme=dark] .button:not(.primary):not(.ghost){background:rgba(150,215,235,.035);border-color:rgba(120,200,230,.15);color:var(--text)}
:root[data-theme=dark] .button:not(.primary):not(.ghost):hover{background:rgba(57,176,244,.09);border-color:rgba(57,176,244,.5);box-shadow:0 0 0 3px rgba(57,176,244,.08),0 8px 20px -14px rgba(57,176,244,.7)}
:root[data-theme=dark] .button:not(.primary):not(.ghost) svg{color:#6fc4f7}
:root:not([data-theme=dark]) .button:not(.primary):not(.ghost){background:#fff;border-color:rgba(15,40,55,.11);color:var(--text);box-shadow:0 1px 2px rgba(15,40,55,.05)}
:root:not([data-theme=dark]) .button:not(.primary):not(.ghost):hover{background:#f4fbff;border-color:rgba(22,130,200,.45);box-shadow:0 0 0 3px rgba(57,176,244,.1),0 8px 18px -14px rgba(22,114,184,.6)}
:root:not([data-theme=dark]) .button:not(.primary):not(.ghost) svg{color:#1672b8}

.button.ghost:hover{color:var(--stat-blue);background:rgba(57,176,244,.08)}

.button.danger:not(.primary){color:#d84c5a}
.button.danger:not(.primary) svg{color:currentColor!important}
:root[data-theme=dark] .button.danger:not(.primary){color:#f59aa4;border-color:rgba(236,96,108,.28)}
:root[data-theme=dark] .button.danger:not(.primary):hover{background:rgba(236,96,108,.1);border-color:rgba(236,96,108,.55);box-shadow:0 0 0 3px rgba(236,96,108,.08)}
:root:not([data-theme=dark]) .button.danger:not(.primary){border-color:rgba(216,76,90,.3)}
:root:not([data-theme=dark]) .button.danger:not(.primary):hover{background:#fff5f6;border-color:rgba(216,76,90,.55);box-shadow:0 0 0 3px rgba(216,76,90,.1)}

/* Small controls: topbar chips, tabs and filters pick up the same blue. */
.icon-button:hover{color:var(--stat-blue);background:rgba(57,176,244,.1)}
:root[data-theme=dark] .role-button{background:rgba(150,215,235,.035);border-color:rgba(120,200,230,.15)}
.role-button:hover{border-color:rgba(57,176,244,.5);background:rgba(57,176,244,.08)}
.filter.active .filter-count{background:var(--brand-sweep);color:#03171b;font-weight:600}
:root[data-theme=dark] .segmented button.active,:root[data-theme=dark] .filter.active,:root[data-theme=dark] .admin-tabs button.active{background:rgba(57,176,244,.1);color:#8fd0f8;box-shadow:inset 0 0 0 1px rgba(57,176,244,.25)}

/* Phone (≤760px, same breakpoint as mobile.css): logo in the topbar, brand tab bar, sheets with a sweep grabber. */
.topbar-logo{display:none}
@media(max-width:760px){
  .topbar-logo{display:inline-grid;place-items:center;margin-left:-4px}
  .topbar-logo img{width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1px rgba(57,176,244,.25),0 4px 12px -4px rgba(20,221,211,.6)}
  :root:not([data-theme=dark]) .topbar{background:color-mix(in srgb,var(--page) 84%,transparent)}
  :root[data-theme=dark] .topbar{background:color-mix(in srgb,var(--bg) 84%,transparent);border-bottom-color:rgba(120,200,230,.1)}

  .mobile-tabbar{border-top-color:transparent}
  .mobile-tabbar::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--brand-sweep);opacity:.45}
  :root[data-theme=dark] .mobile-tabbar{background:color-mix(in srgb,#03080b 88%,transparent)}
  :root:not([data-theme=dark]) .mobile-tabbar{background:color-mix(in srgb,#ffffff 86%,transparent);box-shadow:0 -10px 30px -22px rgba(15,50,70,.5)}
  .mobile-tab.active{color:var(--stat-green)}
  .mobile-tab.active svg{background:linear-gradient(135deg,rgba(57,176,244,.2),rgba(44,214,138,.24));color:var(--stat-green);box-shadow:inset 0 0 0 1px rgba(44,214,138,.28)}
  :root[data-theme=dark] .mobile-tab.active svg{box-shadow:inset 0 0 0 1px rgba(44,214,138,.3),0 0 16px -4px rgba(44,214,138,.55)}

  dialog:not(.farm-session-modal) .modal::before{background:var(--brand-sweep);opacity:.8}
  :root[data-theme=dark] dialog:not(.farm-session-modal){border-top-color:rgba(20,221,211,.22);box-shadow:0 -20px 60px -20px rgba(20,221,211,.25)}
  :root:not([data-theme=dark]) dialog:not(.farm-session-modal){border-top-color:rgba(20,170,160,.2)}
  .wallet-subnav button.active{color:var(--stat-blue)}
  .heading-actions .button.primary{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 12px 24px -12px rgba(20,221,211,.8)}
}

/* Notifications in the infographic style. Every event has a tone (notificationTone): green done/earned,
   blue information, amber needs action, red failure. Pop-ups are dark HUD cards in both themes, like the
   infographic itself; the history panel and the rail follow the page theme but use the same tones. */
[data-tone]{--tone:#39b0f4;--tone-rgb:57,176,244}
[data-tone=success]{--tone:#2cd68a;--tone-rgb:44,214,138}
[data-tone=warn]{--tone:#e8b04b;--tone-rgb:232,176,75}
[data-tone=alert]{--tone:#ef5b6b;--tone-rgb:239,91,107}
:root:not([data-theme=dark]) :is(.notification-history-card,.rail-item)[data-tone=success]{--tone:#12a067}
:root:not([data-theme=dark]) :is(.notification-history-card,.rail-item)[data-tone=info]{--tone:#1a86d0}
:root:not([data-theme=dark]) :is(.notification-history-card,.rail-item)[data-tone=warn]{--tone:#b7811d}
:root:not([data-theme=dark]) :is(.notification-history-card,.rail-item)[data-tone=alert]{--tone:#d84c5a}

:root:not([data-theme=dark]) .farm-notice,:root[data-theme=dark] .farm-notice{--text:#eef4f7;--muted:#93a4ae;--line:rgba(150,210,230,.14);--hover:rgba(150,215,235,.08);--raised:#0d171c;
  overflow:hidden;color:var(--text);border:0;border-radius:14px;padding:12px 32px 14px 16px;
  background:radial-gradient(130% 150% at 0% 0%,rgba(var(--tone-rgb),.2),transparent 55%),radial-gradient(90% 120% at 100% 100%,rgba(20,221,211,.08),transparent 60%),linear-gradient(160deg,#0d171c,#071014);
  box-shadow:inset 0 0 0 1px rgba(var(--tone-rgb),.28),0 22px 44px -22px rgba(var(--tone-rgb),.55),0 8px 22px -10px rgba(0,0,0,.45)}
.farm-notice::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--tone),rgba(var(--tone-rgb),.25))}
/* Countdown to auto-dismiss (15 s in notificationArmTimer); pauses together with the timer on hover and focus. */
.farm-notice::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand-sweep);transform-origin:left;animation:notice-countdown 15s linear forwards;opacity:.9}
.farm-notice:hover::after,.farm-notice:focus-within::after{animation-play-state:paused}
@keyframes notice-countdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.farm-notice::after{display:none}}
.farm-notice .farm-notice-title strong{font-size:13px}
.farm-notice .farm-notice-meta button,.farm-notice .farm-notice-file{color:#6fc4f7}
.farm-notice .farm-notice-track{background:rgba(150,210,230,.16)}
.farm-notice .farm-notice-track i{background:var(--brand-sweep)}
.farm-notice-kicker{display:block;margin-bottom:1px;font-size:9.5px;line-height:1.4;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tone)}

/* Icon tile: tinted by tone, with a soft glow; item art keeps its own picture on the tint. */
[data-tone] .farm-notice-icon{border-radius:11px;background:radial-gradient(90% 90% at 50% 20%,rgba(var(--tone-rgb),.26),rgba(var(--tone-rgb),.08))!important;color:var(--tone)!important;box-shadow:inset 0 0 0 1px rgba(var(--tone-rgb),.3),0 0 18px -6px rgba(var(--tone-rgb),.7)}

/* Bell badge and the history panel. */
:root .notification-count,:root[data-theme=dark] .notification-count{background:var(--brand-sweep);color:#03171b;font-weight:700}
.notification-center{overflow:hidden}
.notification-center::before{content:'';display:block;height:2px;flex-shrink:0;background:var(--brand-sweep)}
:root[data-theme=dark] .notification-center{background:radial-gradient(110% 60% at 100% 0%,rgba(20,221,211,.08),transparent 60%),var(--raised);box-shadow:0 30px 70px -24px #000,inset 0 0 0 1px rgba(120,200,230,.1)}
.notification-center-head h2{letter-spacing:.02em}
:root .notification-center-tools button:last-child,:root[data-theme=dark] .notification-center-tools button:last-child{color:var(--stat-blue)}
.notification-history-card{border-radius:10px;margin:4px 0;border-bottom:0;box-shadow:inset 0 0 0 1px var(--line)}
.notification-history-card.unread{background:linear-gradient(90deg,rgba(var(--tone-rgb),.1),transparent 70%);box-shadow:inset 3px 0 0 var(--tone),inset 0 0 0 1px rgba(var(--tone-rgb),.2)}
.notification-history-card .farm-notice-meta button{color:var(--stat-blue)}

/* Rail: the latest three events take their tone. */
.activity-rail .rail-item[data-tone] .rail-icon{background:rgba(var(--tone-rgb),.14);color:var(--tone);box-shadow:inset 0 0 0 1px rgba(var(--tone-rgb),.22)}

/* Admin panel in the infographic style. The hero is dark in both themes (like the brand art and the featured
   tile); modules take a tone from their status; logs use the same near-black teal as the infographic. */
[data-tone=cyan]{--tone:#14ddd3;--tone-rgb:20,221,211}
.admin-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px 28px;margin-bottom:22px;padding:22px 24px;border-radius:18px;color:#eef4f7;
  background:radial-gradient(60% 140% at 100% 0%,rgba(20,221,211,.2),transparent 60%),radial-gradient(50% 120% at 0% 100%,rgba(57,176,244,.16),transparent 60%),linear-gradient(155deg,#08141a,#040a0d);
  box-shadow:inset 0 0 0 1px rgba(120,200,230,.16),0 24px 50px -30px rgba(8,90,95,.8)}
.admin-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(120,200,230,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,200,230,.05) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(90deg,transparent,#000 40%)}
.admin-hero>*{position:relative}
.admin-hero-brand{display:flex;align-items:center;gap:14px}
.admin-hero-brand img{width:56px;height:56px;border-radius:50%;box-shadow:0 0 0 1px rgba(57,176,244,.3),0 0 26px -6px rgba(20,221,211,.7)}
.admin-hero-brand strong{display:block;font-size:24px;line-height:1.1;font-weight:800;letter-spacing:.08em;background:linear-gradient(180deg,#ffffff,#9aa8b3);-webkit-background-clip:text;background-clip:text;color:transparent}
.admin-hero-brand span{display:block;margin-top:4px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#2cd68a}
.admin-hero-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.admin-hero-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;font-size:12px;color:#b9c7cf;background:rgba(var(--tone-rgb),.08);box-shadow:inset 0 0 0 1px rgba(var(--tone-rgb),.3),0 0 22px -12px rgba(var(--tone-rgb),.8);white-space:nowrap}
.admin-hero-chip svg{width:17px;height:17px;color:var(--tone)}
.admin-hero-chip b{font-size:15px;font-weight:700;color:var(--tone);font-variant-numeric:tabular-nums}
.admin-hero-demo{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding-top:14px;border-top:1px solid rgba(120,200,230,.12);font-size:11px;color:#93a4ae}
.admin-hero-demo strong{color:#eef4f7;font-weight:600}
.admin-demo-dot{background:#14ddd3!important;box-shadow:0 0 8px rgba(20,221,211,.8)}
@media(max-width:900px){.admin-hero{grid-template-columns:1fr}.admin-hero-chips{justify-content:flex-start}}
@media(max-width:760px){.admin-hero{padding:18px;border-radius:16px}.admin-hero-brand strong{font-size:20px}.admin-hero-chip{flex:1 1 auto;justify-content:center;padding:8px 10px}}

/* Module cards: status tone on the icon, the badge and a hairline at the top; lift on hover. */
.admin-module{--tone:#2cd68a;--tone-rgb:44,214,138;position:relative;overflow:hidden;transition:box-shadow .2s,transform .15s}
.admin-module[data-status=warning]{--tone:#e8b04b;--tone-rgb:232,176,75}
.admin-module[data-status=error]{--tone:#ef5b6b;--tone-rgb:239,91,107}
.admin-module::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--tone),rgba(var(--tone-rgb),0))}
:root .admin-module .admin-module-icon,:root[data-theme=dark] .admin-module .admin-module-icon{background:rgba(var(--tone-rgb),.13);color:var(--tone);box-shadow:inset 0 0 0 1px rgba(var(--tone-rgb),.28),0 0 16px -6px rgba(var(--tone-rgb),.7);border-radius:9px}
.admin-module .admin-status{padding:3px 8px;border-radius:999px;background:rgba(var(--tone-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--tone-rgb),.25);color:var(--tone)!important;font-weight:600}
.admin-module .admin-status i{background:var(--tone)!important;box-shadow:0 0 6px rgba(var(--tone-rgb),.8)}
.admin-module:hover{transform:translateY(-2px)}
:root[data-theme=dark] .admin-module{background:radial-gradient(90% 70% at 100% 0%,rgba(var(--tone-rgb),.07),transparent 60%),var(--panel);border-color:rgba(120,200,230,.1)}
:root[data-theme=dark] .admin-module:hover{box-shadow:inset 0 0 0 1px rgba(var(--tone-rgb),.3),0 18px 36px -22px rgba(var(--tone-rgb),.55)}
:root:not([data-theme=dark]) .admin-module:hover{box-shadow:inset 0 0 0 1px rgba(var(--tone-rgb),.35),0 18px 36px -22px rgba(var(--tone-rgb),.5)}
:root:not([data-theme=dark]) .admin-module{--tone:#12a067}
:root:not([data-theme=dark]) .admin-module[data-status=warning]{--tone:#b7811d}
.admin-module .admin-text-button{color:var(--stat-blue)}

/* Deploy line, section titles and tables. */
.admin-deploy .admin-status{padding:3px 9px;border-radius:999px;background:rgba(44,214,138,.1);box-shadow:inset 0 0 0 1px rgba(44,214,138,.25)}
.admin-deploy .admin-status.warning{background:rgba(232,176,75,.1);box-shadow:inset 0 0 0 1px rgba(232,176,75,.28)}
.admin-text-button{color:var(--stat-blue)}
.admin-table th{text-transform:uppercase;letter-spacing:.08em;font-size:10px!important;font-weight:600;color:var(--muted)}
:root[data-theme=dark] .admin-table tbody tr:hover{background:rgba(57,176,244,.05)}
.admin-section{position:relative}
.admin-section::before{content:'';position:absolute;left:22px;right:22px;top:0;height:1px;background:var(--brand-sweep);opacity:.35}

/* Logs console: infographic near-black teal with cyan hairlines. */
.admin-log-scroll,:root[data-theme=dark] .admin-log-scroll,.admin-log-context,:root[data-theme=dark] .admin-log-context{background:#050d11;scrollbar-color:#1f3a44 #050d11}
.admin-log-table th,:root[data-theme=dark] .admin-log-table th{background:#0a161b;color:#7fb8cc;border-bottom-color:rgba(20,221,211,.18);text-transform:uppercase;letter-spacing:.08em}
.admin-log-table td{border-bottom-color:rgba(120,200,230,.06)}
.admin-log-table tr:hover{background:rgba(20,221,211,.04)}
.admin-log-level{background:rgba(44,214,138,.14);color:#5fe3a6}
.admin-log-level.warning{background:rgba(232,176,75,.14);color:#f0c870}
.admin-log-level.error{background:rgba(239,91,107,.15);color:#f59aa4}
.admin-log-level.debug{background:rgba(57,176,244,.14);color:#6fc4f7}
.admin-screen-placeholder{background:radial-gradient(80% 90% at 50% 0%,rgba(20,221,211,.12),transparent 70%),#050d11}