/* Tokens: dist/glass.tokens.css is generated from tokens/*.tokens.json (`npm run build:tokens`). The @import must stay the
   first statement of this file. tools/sync_to_skill.sh and _tools/build_release.sh inline it (tools/flatten-css.mjs), so a
   page that copies glass.css still needs no second file. */
/* >>> inlined by tools/flatten-css.mjs: @import url("../../dist/glass.tokens.css") */
/* glass.tokens.css - GENERATED by tools/build-tokens.mjs. Do not edit: change tokens/*.tokens.json and run `npm run build:tokens`.
   Brand: iotsquared-stc. Sources: tokens/core.tokens.json, tokens/brands/iotsquared-stc.tokens.json (W3C Design Tokens 2025.10).
   Same custom-property names and the same cascade as the token sections of src/assets/glass.css (sections 1-5)
   and the :root block of src/assets/glass-motion.css. The behaviour rules stay in glass.css:
   [data-solid], [data-transparency] and the prefers-reduced-transparency fallback. */

/* ---------- 1. Base tokens (shared) ------------------------------------------- */
:root {
  --g-font: "STC Forward", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", "Roboto", system-ui, sans-serif;
  --g-font-num: "STC Forward", "SF Pro Display", -apple-system, "Inter", system-ui, sans-serif;
  --g-radius-xl: 24px;
  --g-radius-lg: 18px;
  --g-radius-md: 12px;
  --g-radius-pill: 999px;
  --g-space-1: 4px;
  --g-space-2: 8px;
  --g-space-3: 12px;
  --g-space-4: 16px;
  --g-space-5: 20px;
  --g-space-6: 24px;
  --g-space-8: 32px;
  --g-space-10: 40px;
  --g-blur: 22px;
  --g-rail-w: 56px;
  --g-island-h: 36px;
  --g-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --g-dur: 180ms;
  --g-pink: #FF375E;
  --g-pink-soft: #FF6B86;
  --g-blue: #1DCED8;
  --g-blue-soft: #6FDDE4;
  --g-purple: #4F008C;
  --g-purple-soft: #7333A3;
  --g-orange: #FF6A39;
  --g-orange-soft: #FF9670;
  --g-green: #00C48C;
  --g-green-soft: #4DD9B0;
  --g-teal: #1DCED8;
  --g-teal-soft: #6FDDE4;
  --g-amber: #FFDD40;
  --g-amber-soft: #FFE87D;
  --g-red: #FF375E;
  --g-graphite: #8E9AA0;
  --g-graphite-soft: #B3BCC0;
  --g-accent: var(--g-purple);
  --g-accent-soft: var(--g-purple-soft);
  --g-accent-fg: #FFFFFF;
}

/* ---------- 2. Light theme (default) ------------------------------------------ */
:root {
  color-scheme: light;
  --g-bg: #EEF0F1;
  --g-bg-glow-1: rgba(79, 0, 140, 0.18);
  --g-bg-glow-2: rgba(255, 55, 94, 0.14);
  --g-bg-glow-3: rgba(165, 78, 225, 0.12);
  --g-surface: rgba(255, 255, 255, 0.62);
  --g-surface-strong: rgba(255, 255, 255, 0.82);
  --g-surface-tile: rgba(255, 255, 255, 0.55);
  --g-surface-solid: #FFFFFF;
  --g-surface-hover: rgba(255, 255, 255, 0.78);
  --g-border: rgba(28, 38, 45, 0.08);
  --g-border-strong: rgba(28, 38, 45, 0.62);
  --g-highlight: rgba(255, 255, 255, 0.9);
  --g-shadow: 0 10px 30px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  --g-text: #1C262D;
  --g-text-2: rgba(28, 38, 45, 0.78);
  --g-text-3: rgba(28, 38, 45, 0.7);
  --g-text-inverse: #EEF0F1;
  --g-rail-bg: rgba(255, 255, 255, 0.7);
  --g-island-bg: #0D1216;
  --g-island-fg: #EEF0F1;
  --g-track: rgba(28, 38, 45, 0.08);
  --g-chip-bg: rgba(28, 38, 45, 0.06);
  --g-input-bg: rgba(28, 38, 45, 0.05);
  --g-divider: rgba(28, 38, 45, 0.07);
  --g-bar: rgba(28, 38, 45, 0.05);
  --g-accent-text: var(--g-purple);
  --g-pink-text: #A62742;
  --g-amber-text: #7F5300;
  --g-green-text: #006648;
  --g-blue-text: #00626B;
  --g-red-text: #A62742;
  --g-graphite-text: #4E565C;
  --g-series-1: var(--g-purple);
  --g-series-2: var(--g-pink);
  --g-series-3: #008B63;
  --g-series-4: #00808B;
  --g-series-5: #DD4B1A;
  --g-series-6: #8A6C00;
}

/* ---------- 3. Dark theme (auto: follows the OS unless data-theme="light") ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --g-bg: #0D1216;
    --g-bg-glow-1: rgba(79, 0, 140, 0.2);
    --g-bg-glow-2: rgba(255, 55, 94, 0.14);
    --g-bg-glow-3: rgba(165, 78, 225, 0.14);
    --g-surface: rgba(255, 255, 255, 0.045);
    --g-surface-strong: rgba(255, 255, 255, 0.07);
    --g-surface-tile: rgba(255, 255, 255, 0.04);
    --g-surface-solid: #1C262D;
    --g-surface-hover: rgba(255, 255, 255, 0.08);
    --g-border: rgba(255, 255, 255, 0.08);
    --g-border-strong: rgba(255, 255, 255, 0.46);
    --g-highlight: rgba(255, 255, 255, 0.12);
    --g-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    --g-text: #EEF0F1;
    --g-text-2: rgba(238, 240, 241, 0.8);
    --g-text-3: rgba(238, 240, 241, 0.68);
    --g-text-inverse: #1C262D;
    --g-rail-bg: rgba(255, 255, 255, 0.05);
    --g-island-bg: #000000;
    --g-island-fg: #EEF0F1;
    --g-track: rgba(255, 255, 255, 0.09);
    --g-chip-bg: rgba(255, 255, 255, 0.07);
    --g-input-bg: rgba(255, 255, 255, 0.05);
    --g-divider: rgba(255, 255, 255, 0.07);
    --g-bar: rgba(255, 255, 255, 0.04);
    --g-accent-text: #B88ED9;
    --g-pink-text: #FF8198;
    --g-amber-text: var(--g-amber);
    --g-green-text: #4EE0AD;
    --g-blue-text: #4ED3DD;
    --g-red-text: #FF8198;
    --g-graphite-text: #BFC6CD;
    --g-series-1: var(--g-accent-text);
    --g-series-2: var(--g-pink-soft);
    --g-series-3: var(--g-green);
    --g-series-4: var(--g-blue);
    --g-series-5: var(--g-orange-soft);
    --g-series-6: var(--g-amber);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --g-bg: #0D1216;
  --g-bg-glow-1: rgba(79, 0, 140, 0.2);
  --g-bg-glow-2: rgba(255, 55, 94, 0.14);
  --g-bg-glow-3: rgba(165, 78, 225, 0.14);
  --g-surface: rgba(255, 255, 255, 0.045);
  --g-surface-strong: rgba(255, 255, 255, 0.07);
  --g-surface-tile: rgba(255, 255, 255, 0.04);
  --g-surface-solid: #1C262D;
  --g-surface-hover: rgba(255, 255, 255, 0.08);
  --g-border: rgba(255, 255, 255, 0.08);
  --g-border-strong: rgba(255, 255, 255, 0.46);
  --g-highlight: rgba(255, 255, 255, 0.12);
  --g-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --g-text: #EEF0F1;
  --g-text-2: rgba(238, 240, 241, 0.8);
  --g-text-3: rgba(238, 240, 241, 0.68);
  --g-text-inverse: #1C262D;
  --g-rail-bg: rgba(255, 255, 255, 0.05);
  --g-island-bg: #000000;
  --g-island-fg: #EEF0F1;
  --g-track: rgba(255, 255, 255, 0.09);
  --g-chip-bg: rgba(255, 255, 255, 0.07);
  --g-input-bg: rgba(255, 255, 255, 0.05);
  --g-divider: rgba(255, 255, 255, 0.07);
  --g-bar: rgba(255, 255, 255, 0.04);
  --g-accent-text: #B88ED9;
  --g-pink-text: #FF8198;
  --g-amber-text: var(--g-amber);
  --g-green-text: #4EE0AD;
  --g-blue-text: #4ED3DD;
  --g-red-text: #FF8198;
  --g-graphite-text: #BFC6CD;
  --g-series-1: var(--g-accent-text);
  --g-series-2: var(--g-pink-soft);
  --g-series-3: var(--g-green);
  --g-series-4: var(--g-blue);
  --g-series-5: var(--g-orange-soft);
  --g-series-6: var(--g-amber);
}

/* ---------- 4. Accent variants ------------------------------------------------ */
:root[data-accent="blue"] { --g-accent: var(--g-blue); --g-accent-soft: var(--g-blue-soft); }
:root[data-accent="purple"] { --g-accent: var(--g-purple); --g-accent-soft: var(--g-purple-soft); }
:root[data-accent="pink"] { --g-accent: var(--g-pink); --g-accent-soft: var(--g-pink-soft); }
:root[data-accent="orange"] { --g-accent: var(--g-orange); --g-accent-soft: var(--g-orange-soft); }
:root[data-accent="green"] { --g-accent: var(--g-green); --g-accent-soft: var(--g-green-soft); }
:root[data-accent="graphite"] { --g-accent: var(--g-graphite); --g-accent-soft: var(--g-graphite-soft); }

/* ---------- 5. Wallpaper variants (background glows) -------------------------- */
:root[data-wallpaper="ash"] { --g-bg-glow-1: rgba(255, 255, 255, 0.06); --g-bg-glow-2: rgba(255, 255, 255, 0.04); --g-bg-glow-3: rgba(255, 255, 255, 0.03); }
:root[data-wallpaper="sand"] { --g-bg-glow-1: rgba(255, 221, 64, 0.22); --g-bg-glow-2: rgba(255, 106, 57, 0.14); --g-bg-glow-3: rgba(58, 16, 102, 0.18); }
:root[data-wallpaper="sage"] { --g-bg-glow-1: rgba(0, 196, 140, 0.18); --g-bg-glow-2: rgba(29, 206, 216, 0.14); --g-bg-glow-3: rgba(58, 16, 102, 0.16); }
:root[data-wallpaper="aurora"] { --g-bg-glow-1: rgba(79, 0, 140, 0.3); --g-bg-glow-2: rgba(165, 78, 225, 0.26); --g-bg-glow-3: rgba(29, 206, 216, 0.2); }
:root[data-wallpaper="smoke"] { --g-bg-glow-1: rgba(142, 154, 160, 0.14); --g-bg-glow-2: rgba(28, 38, 45, 0.12); --g-bg-glow-3: rgba(221, 223, 226, 0.1); }
:root[data-wallpaper="tide"] { --g-bg-glow-1: rgba(29, 206, 216, 0.32); --g-bg-glow-2: rgba(0, 196, 140, 0.28); --g-bg-glow-3: rgba(16, 23, 28, 0.22); }
:root[data-wallpaper="bloom"] { --g-bg-glow-1: rgba(255, 55, 94, 0.34); --g-bg-glow-2: rgba(165, 78, 225, 0.28); --g-bg-glow-3: rgba(255, 221, 64, 0.18); }
:root[data-wallpaper="ember"] { --g-bg-glow-1: rgba(255, 106, 57, 0.34); --g-bg-glow-2: rgba(255, 55, 94, 0.26); --g-bg-glow-3: rgba(58, 16, 102, 0.2); }
:root[data-wallpaper="grove"] { --g-bg-glow-1: rgba(0, 196, 140, 0.3); --g-bg-glow-2: rgba(255, 221, 64, 0.2); --g-bg-glow-3: rgba(58, 16, 102, 0.18); }
:root[data-wallpaper="dusk"] { --g-bg-glow-1: rgba(58, 16, 102, 0.26); --g-bg-glow-2: rgba(115, 51, 163, 0.18); --g-bg-glow-3: rgba(16, 23, 28, 0.3); }

/* ---------- Clear glass: lower surface alpha so more wallpaper shows ---------- */
:root[data-glass="clear"] { --g-surface: rgba(255, 255, 255, 0.4); --g-surface-tile: rgba(255, 255, 255, 0.35); }
@media (prefers-color-scheme: dark) {
  :root[data-glass="clear"]:not([data-theme="light"]) { --g-surface: rgba(255, 255, 255, 0.025); --g-surface-tile: rgba(255, 255, 255, 0.02); }
}
:root[data-glass="clear"][data-theme="dark"] { --g-surface: rgba(255, 255, 255, 0.025); --g-surface-tile: rgba(255, 255, 255, 0.02); }

/* ---------- Motion layer tokens (glass-motion.css) ---------------------------- */
:root {
  --gm-dur: 520ms;
  --gm-theme-dur: 900ms;
  --gm-stagger: 70ms;
  --gm-ease: cubic-bezier(0.22, 0.9, 0.3, 1);
  --gm-ease-io: cubic-bezier(0.4, 0, 0.2, 1);
  --gm-blur: 10px;
  --gm-rise: 18px;
  --gm-lift: -4px;
}

/* ---------- v2 additions: new variables, not used by glass.css yet ------------ */
:root {
  --g-saturate: 1.6;
  --g-z-wallpaper: -1;
  --g-z-rail: 40;
  --g-z-island: 50;
  --g-z-toolbar: 50;
  --g-font-size-11: 11px;
  --g-font-size-11-5: 11.5px;
  --g-font-size-12: 12px;
  --g-font-size-12-5: 12.5px;
  --g-font-size-13: 13px;
  --g-font-size-13-5: 13.5px;
  --g-font-size-14: 14px;
  --g-font-size-15: 15px;
  --g-font-size-16: 16px;
  --g-font-size-18: 18px;
  --g-font-size-20: 20px;
  --g-font-size-22: 22px;
  --g-font-size-28: 28px;
  --g-font-size-30: 30px;
  --g-font-size-36: 36px;
  --g-font-weight-regular: 400;
  --g-font-weight-medium: 500;
  --g-font-weight-semibold: 600;
  --g-font-weight-bold: 700;
  --g-line-height-solid: 1;
  --g-line-height-compact: 1.1;
  --g-line-height-title: 1.15;
  --g-line-height-snug: 1.35;
  --g-line-height-body: 1.45;
  --g-opacity-accent-shadow: 0.45;
  --g-opacity-chip-tint: 0.18;
  --g-opacity-focus-border: 0.6;
  --g-opacity-focus-ring: 0.22;
  --g-opacity-selected-ring: 0.3;
  --g-opacity-hero-tint: 0.22;
  --g-opacity-hero-border: 0.3;
  --g-opacity-bar-fill: 0.85;
}
/* <<< end of ../../dist/glass.tokens.css */
/* STC Forward — bundled brand font (assets/fonts/STCForward-Regular.ttf). Regular weight only; browsers synthesise bold. */
@font-face { font-family: "STC Forward"; src: url("fonts/STCForward-Regular.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* ==========================================================================
   glass.css — Glass Dashboard UI
   Frosted-glass dashboard system with light / dark / auto modes.
   Theme attributes on <html>:
     data-theme     = auto | light | dark         (default auto)
     data-accent    = pink | blue | purple | orange | green | graphite (default pink)
     data-wallpaper = ash | sand | sage | aurora | smoke | tide | bloom | ember | grove | dusk
     data-glass     = tinted | clear              (default tinted)
     data-solid     = true                        (reduce transparency: no blur, opaque cards)
     data-transparency = reduced | normal         (opaque fallback; absent = follow the OS, see 5b)
   ========================================================================== */

/* ---------- 1-5. Tokens: generated, not declared here ------------------------
   The base tokens, the light and dark themes, the accent and wallpaper variants, clear glass and the motion tokens
   (every --g-* and --gm-* custom property) come from dist/glass.tokens.css, imported at the top of this file. The source
   is tokens/*.tokens.json: change a value there and run `npm run build:tokens`. The cascade order is unchanged: the
   imported rules come first, the rules below come after them. `npm run test:parity` fails when this file declares a
   token of its own again. */

/* Per-accent contrast-safe accent text/icon colour. The STC purple default keeps its tuned per-mode
   --g-accent-text (sections 2/3); a non-default accent derives one from the chosen accent and the mode's
   text colour, so links/active icons stay the accent hue and keep ~AA in both themes. (Grouped selector:
   runtime-derived plumbing, not a token — intentionally outside the generated token blocks.) */
:root[data-accent="blue"], :root[data-accent="pink"], :root[data-accent="orange"],
:root[data-accent="green"], :root[data-accent="graphite"] {
  --g-accent-text: color-mix(in srgb, var(--g-accent) 68%, var(--g-text));
}

/* Reduce transparency: opaque surfaces, no blur */
:root[data-solid="true"] { --g-blur: 0px; --g-surface: var(--g-surface-solid); --g-surface-tile: var(--g-surface-solid); --g-surface-strong: var(--g-surface-solid); --g-rail-bg: var(--g-surface-solid); }

/* ---------- 5b. Reduced transparency (opaque fallback) -------------------
   Opaque surfaces, no blur. On with html[data-transparency="reduced"] (the glass-theme.js toggle, saved as
   localStorage["glass-transparency"]) and with the OS setting prefers-reduced-transparency (Chrome and Edge only;
   Safari has no such media query, so it needs the toggle). html[data-transparency="normal"] opts out of the OS setting.
   Only existing tokens are used. A tile gets a faint text-colour tint so it still shows inside a card; the hover
   colour is opaque too. :root:root lifts the specificity to that of the data-glass="clear" rules, which come
   earlier, so they cannot win. data-solid="true" above stays for old pages. */
:root:root[data-transparency="reduced"] {
  --g-blur: 0px;
  --g-surface: var(--g-surface-solid);
  --g-surface-strong: var(--g-surface-solid);
  --g-surface-tile: color-mix(in srgb, var(--g-text) 4%, var(--g-surface-solid));
  --g-surface-hover: color-mix(in srgb, var(--g-text) 8%, var(--g-surface-solid));
  --g-rail-bg: var(--g-surface-solid);
}
:root[data-transparency="reduced"] * { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) {
  :root:root:not([data-transparency="normal"]) {
    --g-blur: 0px;
    --g-surface: var(--g-surface-solid);
    --g-surface-strong: var(--g-surface-solid);
    --g-surface-tile: color-mix(in srgb, var(--g-text) 4%, var(--g-surface-solid));
    --g-surface-hover: color-mix(in srgb, var(--g-text) 8%, var(--g-surface-solid));
    --g-rail-bg: var(--g-surface-solid);
  }
  :root:not([data-transparency="normal"]) * { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- 6. Reset & page --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--g-font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--g-text);
  background: var(--g-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  transition: background-color var(--g-dur) var(--g-ease), color var(--g-dur) var(--g-ease);
}
/* Wallpaper glows */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 15% 10%, var(--g-bg-glow-1), transparent 70%),
    radial-gradient(50% 45% at 85% 20%, var(--g-bg-glow-2), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, var(--g-bg-glow-3), transparent 70%);
  transition: opacity var(--g-dur) var(--g-ease);
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
svg { display: block; }
h1, h2, h3, p { margin: 0; }

/* ---------- 7. Layout --------------------------------------------------- */
.g-shell { display: grid; grid-template-columns: var(--g-rail-w) 1fr; min-height: 100vh; }
.g-main { padding: 88px 28px 40px 28px; max-width: 1240px; width: 100%; margin: 0 auto; }
@media (max-width: 720px) {
  .g-shell { grid-template-columns: 1fr; }
  .g-main { padding: 80px 16px 96px 16px; }
}

.g-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.g-col-3 { grid-column: span 3; } .g-col-4 { grid-column: span 4; }
.g-col-6 { grid-column: span 6; } .g-col-8 { grid-column: span 8; } .g-col-12 { grid-column: span 12; }
@media (max-width: 960px) { .g-col-3, .g-col-4 { grid-column: span 6; } }
@media (max-width: 640px) { .g-col-3, .g-col-4, .g-col-6, .g-col-8 { grid-column: span 12; } }

.g-stack { display: flex; flex-direction: column; gap: var(--g-space-3); }
.g-row { display: flex; align-items: center; gap: var(--g-space-3); }
.g-between { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-3); }
.g-grow { flex: 1 1 auto; min-width: 0; }
.g-wrap { flex-wrap: wrap; }

/* ---------- 8. Glass surface primitives --------------------------------- */
.g-glass {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-highlight);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(160%);
  backdrop-filter: blur(var(--g-blur)) saturate(160%);
  transition: background-color var(--g-dur) var(--g-ease), border-color var(--g-dur) var(--g-ease);
}
.g-card {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-xl);
  box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-highlight);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(160%);
  backdrop-filter: blur(var(--g-blur)) saturate(160%);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}
.g-card > * { min-width: 0; }
.g-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.g-card__title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.g-card__sub { font-size: 12.5px; color: var(--g-text-2); margin-top: 2px; }
.g-card__link { font-size: 12.5px; color: var(--g-accent-text); font-weight: 500; }

.g-tile {
  background: var(--g-surface-tile);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  padding: 14px 16px;
}

/* ---------- 9. Page header, stats --------------------------------------- */
.g-page-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.g-page-sub { color: var(--g-text-2); font-size: 13.5px; margin-top: 4px; }
.g-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.g-stat { min-width: 112px; padding: 10px 14px 12px; }
.g-stat__label { font-size: 12px; color: var(--g-text-2); }
.g-stat__value { font-family: var(--g-font-num); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.g-stat__value small { font-size: 12px; font-weight: 500; color: var(--g-text-3); margin-left: 2px; }
.g-stat--big .g-stat__value { font-size: 36px; }

/* ---------- 10. Buttons, chips, inputs ---------------------------------- */
.g-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: var(--g-radius-pill);
  border: 1px solid var(--g-border); background: var(--g-surface-strong);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  -webkit-backdrop-filter: blur(var(--g-blur)); backdrop-filter: blur(var(--g-blur));
  transition: background-color var(--g-dur) var(--g-ease), transform var(--g-dur) var(--g-ease), box-shadow var(--g-dur) var(--g-ease);
}
.g-btn:hover { background: var(--g-surface-hover); }
.g-btn:active { transform: scale(.98); }
.g-btn--primary { background: var(--g-accent); border-color: transparent; color: var(--g-accent-fg); box-shadow: 0 6px 18px color-mix(in srgb, var(--g-accent) 45%, transparent); }
.g-btn--primary:hover { background: var(--g-accent-soft); }
.g-btn--sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.g-btn--icon { width: 36px; padding: 0; justify-content: center; }
.g-btn--ghost { background: transparent; border-color: transparent; }
.g-btn svg { width: 16px; height: 16px; }

.g-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px; border-radius: var(--g-radius-pill);
  font-size: 11.5px; font-weight: 500; background: var(--g-chip-bg); color: var(--g-text-2);
}
.g-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g-dot, var(--g-accent-text)); }
.g-chip--urgent { background: color-mix(in srgb, var(--g-pink) 18%, transparent); color: var(--g-pink-text); }
.g-chip--high   { background: color-mix(in srgb, var(--g-amber) 18%, transparent); color: var(--g-amber-text); }
.g-chip--ok     { background: color-mix(in srgb, var(--g-green) 18%, transparent); color: var(--g-green-text); }
.g-chip--info   { background: color-mix(in srgb, var(--g-blue) 18%, transparent); color: var(--g-blue-text); }

.g-segment { display: inline-flex; padding: 3px; border-radius: var(--g-radius-pill); background: var(--g-chip-bg); border: 1px solid var(--g-border); gap: 2px; }
.g-segment__item { height: 28px; padding: 0 12px; border-radius: var(--g-radius-pill); border: 0; background: transparent; color: var(--g-text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.g-segment__item[aria-pressed="true"], .g-segment__item.is-active { background: var(--g-surface-strong); color: var(--g-text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

.g-input {
  height: 36px; width: 100%; padding: 0 12px 0 36px; border-radius: var(--g-radius-pill);
  border: 1px solid var(--g-border-strong); background: var(--g-input-bg); color: var(--g-text); outline: none;
}
.g-input::placeholder { color: var(--g-text-3); }
.g-input:focus { border-color: var(--g-accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent-text) 30%, transparent); }
.g-input-wrap { position: relative; flex: 1; }
.g-input-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--g-text-3); }

.g-switch { width: 44px; height: 26px; border-radius: 13px; background: var(--g-track); border: 1px solid var(--g-border-strong); position: relative; cursor: pointer; transition: background-color var(--g-dur), border-color var(--g-dur); }
.g-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--g-dur) var(--g-ease); }
.g-switch[aria-checked="true"] { background: var(--g-accent-text); border-color: transparent; }
.g-switch[aria-checked="true"]::after { transform: translateX(18px); }

.g-stepper { display: inline-flex; align-items: center; gap: 10px; }
.g-stepper__btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--g-border); background: var(--g-chip-bg); cursor: pointer; display: grid; place-items: center; color: var(--g-accent-text); font-size: 18px; line-height: 1; }
.g-stepper__btn:disabled { color: var(--g-text-3); cursor: default; }
.g-stepper__value { font-family: var(--g-font-num); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.g-stepper__unit { font-size: 12px; color: var(--g-text-2); margin-left: 4px; }

/* ---------- 11. Rail (left sidebar) ------------------------------------- */
.g-rail {
  position: sticky; top: 16px; align-self: start;
  margin: 16px 0 16px 12px; width: 48px; padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-radius: var(--g-radius-pill);
  background: var(--g-rail-bg); border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-highlight);
  -webkit-backdrop-filter: blur(var(--g-blur)); backdrop-filter: blur(var(--g-blur));
  height: calc(100vh - 32px);
}
.g-rail__logo { width: 32px; height: 32px; border-radius: 10px; background: var(--g-blue); display: grid; place-items: center; color: #fff; margin-bottom: 6px; }
.g-rail__item { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--g-text-2); display: grid; place-items: center; cursor: pointer; transition: background-color var(--g-dur), color var(--g-dur); }
.g-rail__item svg { width: 18px; height: 18px; }
.g-rail__item:hover { background: var(--g-chip-bg); color: var(--g-text); }
.g-rail__item.is-active { background: var(--g-surface-strong); color: var(--g-accent-text); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.g-rail__spacer { flex: 1; }
.g-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--g-pink), var(--g-orange)); border: 2px solid var(--g-surface-solid); }
.g-avatars { display: flex; }
.g-avatars .g-avatar + .g-avatar { margin-left: -8px; }
@media (max-width: 720px) {
  .g-rail { position: fixed; left: 50%; bottom: 12px; top: auto; transform: translateX(-50%); flex-direction: row; height: 52px; width: auto; padding: 0 10px; margin: 0; gap: 2px; z-index: 40; }
  .g-rail__logo, .g-rail__spacer { display: none; }
}

/* ---------- 12. Island (floating timer pill) & toolbar ------------------ */
.g-island {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50;
  height: var(--g-island-h); padding: 0 14px 0 12px; border-radius: var(--g-radius-pill);
  background: var(--g-island-bg); color: var(--g-island-fg);
  display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.g-island > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-island { max-width: min(60vw, 560px); }
.g-island__ring { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: var(--g-amber); }
.g-island__time { color: var(--g-amber); font-variant-numeric: tabular-nums; }
.g-island--expanded { height: auto; padding: 14px 18px; border-radius: 28px; }

.g-toolbar {
  position: fixed; top: 12px; right: 16px; z-index: 50;
  display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--g-radius-pill);
  background: var(--g-surface-strong); border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow); -webkit-backdrop-filter: blur(var(--g-blur)); backdrop-filter: blur(var(--g-blur));
}
.g-toolbar .g-btn--icon { height: 32px; width: 32px; border: 0; background: transparent; }
.g-toolbar .g-btn--icon:hover { background: var(--g-chip-bg); }
.g-badge-dot { position: relative; }
.g-badge-dot::after { content: ""; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--g-pink); }
@media (max-width: 720px) {
  .g-toolbar { top: 10px; right: 10px; }
  /* compact, centred island that stays clear of the toolbar: label hidden, long text clipped */
  .g-island { top: 12px; height: 30px; padding: 0 12px 0 10px; gap: 8px; font-size: 12px; max-width: calc(100vw - 210px); }
  .g-island__label { display: none; }
  .g-island__ring { width: 12px; height: 12px; }
}

/* ---------- 13. Lists: tasks, events ------------------------------------ */
.g-list { display: flex; flex-direction: column; }
.g-list > * + * { border-top: 1px solid var(--g-divider); }
.g-task { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; }
.g-task__check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--g-border-strong); background: transparent; cursor: pointer; display: grid; place-items: center; color: #fff; }
.g-task__check[aria-checked="true"] { background: var(--g-accent); border-color: var(--g-accent); }
.g-task__check svg { width: 12px; height: 12px; }
.g-task__title { font-size: 13.5px; font-weight: 500; }
.g-task__meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--g-text-3); }
.g-task.is-done .g-task__title { text-decoration: line-through; color: var(--g-text-3); }

.g-event { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; }
.g-event__bar { width: 3px; height: 18px; border-radius: 2px; background: var(--g-accent-text); }
.g-event__time { margin-left: auto; color: var(--g-text-2); font-size: 12.5px; }
.g-event-hero {
  padding: 14px 16px; border-radius: var(--g-radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--g-blue) 22%, var(--g-surface-tile)), var(--g-surface-tile));
  border: 1px solid color-mix(in srgb, var(--g-blue) 30%, var(--g-border));
}
.g-event-hero__when { font-size: 12px; color: var(--g-blue-text); font-weight: 600; }
.g-event-hero__title { font-size: 16px; font-weight: 700; margin-top: 2px; }
.g-event-hero__sub { font-size: 12.5px; color: var(--g-text-2); margin-top: 2px; }

/* ---------- 14. Kanban -------------------------------------------------- */
.g-board { min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.g-column { display: flex; flex-direction: column; gap: 10px; scroll-snap-align: start; padding: 12px; border-radius: var(--g-radius-xl); background: var(--g-surface-tile); border: 1px solid var(--g-border); }
.g-column__head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 2px 4px; }
.g-column__count { color: var(--g-text-3); font-weight: 500; }
.g-column__add { margin-left: auto; }
.g-kcard { padding: 12px 12px 10px; border-radius: 14px; background: var(--g-surface-strong); border: 1px solid var(--g-border); display: flex; flex-direction: column; gap: 8px; cursor: grab; transition: transform var(--g-dur) var(--g-ease), box-shadow var(--g-dur) var(--g-ease); }
.g-kcard:hover { transform: translateY(-1px); box-shadow: var(--g-shadow); }
.g-kcard__title { font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.g-kcard__foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--g-text-3); }
.g-kcard__foot .g-avatar { margin-left: auto; width: 22px; height: 22px; border: 0; }

/* ---------- 15. Progress, rings, charts --------------------------------- */
.g-progress { height: 4px; border-radius: 2px; background: var(--g-track); overflow: hidden; }
.g-progress__fill { height: 100%; border-radius: inherit; background: var(--g-fill, var(--g-accent-text)); }
.g-progress-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--g-text-3); }
.g-progress-row .g-progress { flex: 1; }

.g-rings { position: relative; width: 150px; height: 150px; flex: none; }
.g-rings svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.g-rings circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.g-rings .track { stroke: var(--g-track); }
.g-rings .ring { transition: stroke-dashoffset 600ms var(--g-ease); }
.g-ring-legend { display: flex; flex-direction: column; gap: 10px; }
.g-ring-legend__item { display: flex; gap: 10px; align-items: center; }
.g-ring-legend__bar { width: 3px; height: 30px; border-radius: 2px; }
.g-ring-legend__label { font-size: 12px; color: var(--g-text-2); }
.g-ring-legend__value { font-family: var(--g-font-num); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.g-ring-legend__value small { font-size: 12px; font-weight: 500; color: var(--g-text-3); }

.g-donut { position: relative; width: 170px; height: 170px; margin: 0 auto; }
.g-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.g-donut circle { fill: none; stroke-width: 12; }
.g-donut__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.g-donut__value { font-family: var(--g-font-num); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.g-donut__label { font-size: 12px; color: var(--g-text-2); margin-top: 4px; }
.g-legend-row { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; font-size: 13.5px; }
.g-legend-row__dot { width: 8px; height: 8px; border-radius: 2px; }
.g-legend-row__n { font-weight: 600; font-variant-numeric: tabular-nums; }
.g-legend-row__pct { color: var(--g-text-2); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }

.g-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; align-items: end; height: 110px; }
.g-bar { position: relative; height: 100%; border-radius: 12px; background: var(--g-bar); border: 1px solid var(--g-border); display: flex; align-items: flex-end; overflow: hidden; }
.g-bar__fill { width: 100%; border-radius: 10px 10px 0 0; background: var(--g-accent-text); opacity: .85; transition: height 500ms var(--g-ease); }
.g-bar--peak .g-bar__fill { opacity: 1; }
.g-bars-labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; font-size: 11.5px; color: var(--g-text-3); text-align: center; margin-top: 6px; }
.g-delta { font-size: 12px; font-weight: 600; color: var(--g-green-text); }
.g-delta--down { color: var(--g-red-text); }

/* Focus timer dial */
.g-dial { position: relative; width: 112px; height: 112px; flex: none; }
.g-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.g-dial circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.g-dial .track { stroke: var(--g-track); }
.g-dial .ring { stroke: var(--g-amber-text); }
.g-dial__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.g-dial__time { font-family: var(--g-font-num); font-size: 22px; font-weight: 700; color: var(--g-amber-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.g-dial__label { font-size: 11px; color: var(--g-text-2); }

/* ---------- 16. Settings rows ------------------------------------------- */
.g-setting { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; }
.g-setting + .g-setting { border-top: 1px solid var(--g-divider); }
.g-setting > :nth-child(3) { min-width: 0; }
@media (max-width: 640px) { .g-setting { grid-template-columns: 36px 1fr; } .g-setting > :nth-child(3) { grid-column: 2; } }
.g-setting__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--g-accent); }
.g-setting__icon svg { width: 18px; height: 18px; }
.g-setting__title { font-size: 14px; font-weight: 600; }
.g-setting__sub { font-size: 12.5px; color: var(--g-text-2); }

.g-swatches { display: flex; gap: 14px; flex-wrap: wrap; }
.g-swatch { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; position: relative; transition: transform var(--g-dur) var(--g-ease); }
.g-swatch:hover { transform: scale(1.06); }
.g-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--g-bg), 0 0 0 5px currentColor; }
.g-swatch svg { width: 18px; height: 18px; opacity: 0; }
.g-swatch[aria-pressed="true"] svg { opacity: 1; }

.g-wallpapers { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.g-wallpaper { display: flex; flex-direction: column; align-items: center; gap: 8px; background: transparent; border: 0; cursor: pointer; color: var(--g-text-2); font-size: 13px; }
.g-wallpaper__thumb { width: 100%; aspect-ratio: 1.3; border-radius: 16px; position: relative; overflow: hidden; border: 2px solid transparent; background: var(--g-thumb, #1b1f2a); }
.g-wallpaper__thumb::before { content: ""; position: absolute; left: 14%; top: 14%; width: 30%; height: 72%; border-radius: 8px; border: 2px solid rgba(255,255,255,.55); }
.g-wallpaper__thumb::after { content: ""; position: absolute; left: 50%; top: 14%; width: 36%; height: 40%; border-radius: 8px; border: 2px solid rgba(255,255,255,.55); }
.g-wallpaper[aria-pressed="true"] .g-wallpaper__thumb { border-color: var(--g-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent) 30%, transparent); }
.g-wallpaper[aria-pressed="true"] { color: var(--g-text); }
.g-wallpaper[data-wallpaper="ash"]    .g-wallpaper__thumb { --g-thumb: linear-gradient(135deg,#1c1f27,#2a2e38); }
.g-wallpaper[data-wallpaper="sand"]   .g-wallpaper__thumb { --g-thumb: linear-gradient(135deg,#4a3a12,#8a5a18); }
.g-wallpaper[data-wallpaper="sage"]   .g-wallpaper__thumb { --g-thumb: linear-gradient(135deg,#0a3d2e,#1d6b5a); }
.g-wallpaper[data-wallpaper="aurora"] .g-wallpaper__thumb { --g-thumb: linear-gradient(135deg,#3a1066,#4f008c 55%,#a54ee1); }
.g-wallpaper[data-wallpaper="smoke"]  .g-wallpaper__thumb { --g-thumb: linear-gradient(135deg,#1c262d,#4a545a 70%,#8e9aa0); }
.g-wallpaper[data-wallpaper="tide"]   .g-wallpaper__thumb { --g-thumb: linear-gradient(160deg,#1dced8 0%,#00c48c 55%,#0d1216); }
.g-wallpaper[data-wallpaper="bloom"]  .g-wallpaper__thumb { --g-thumb: linear-gradient(160deg,#ff375e 0%,#a54ee1 50%,#ffdd40); }
.g-wallpaper[data-wallpaper="ember"]  .g-wallpaper__thumb { --g-thumb: linear-gradient(160deg,#ff6a39 0%,#ff375e 55%,#3a1066); }
.g-wallpaper[data-wallpaper="grove"]  .g-wallpaper__thumb { --g-thumb: linear-gradient(160deg,#00c48c 0%,#ffdd40 50%,#3a1066); }
.g-wallpaper[data-wallpaper="dusk"]   .g-wallpaper__thumb { --g-thumb: linear-gradient(160deg,#3a1066 0%,#7333a3 55%,#0d1216); }

/* ---------- 17. Utilities ----------------------------------------------- */
.g-muted { color: var(--g-text-2); } .g-faint { color: var(--g-text-3); }
.g-strong { font-weight: 600; }
.g-num { font-family: var(--g-font-num); font-variant-numeric: tabular-nums; }
.g-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g-divider { height: 1px; background: var(--g-divider); }
.g-dot-1 { --g-dot: var(--g-series-1); } .g-dot-2 { --g-dot: var(--g-series-2); } .g-dot-3 { --g-dot: var(--g-series-3); }
.g-dot-4 { --g-dot: var(--g-series-4); } .g-dot-5 { --g-dot: var(--g-series-5); } .g-dot-6 { --g-dot: var(--g-series-6); }

/* ---------- 18. Status pills (semantic) --------------------------------- */
.g-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px; border-radius: var(--g-radius-pill);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--g-chip-bg); color: var(--g-text-2);
}
.g-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.g-pill--success { background: color-mix(in srgb, var(--g-green) 18%, transparent);    color: var(--g-green-text); }
.g-pill--warn    { background: color-mix(in srgb, var(--g-amber) 18%, transparent);    color: var(--g-amber-text); }
.g-pill--danger  { background: color-mix(in srgb, var(--g-red) 18%, transparent);      color: var(--g-red-text); }
.g-pill--info    { background: color-mix(in srgb, var(--g-blue) 18%, transparent);     color: var(--g-blue-text); }
.g-pill--neutral { background: color-mix(in srgb, var(--g-graphite) 18%, transparent); color: var(--g-graphite-text); }

/* ---------- 19. Data table (inside a card) ------------------------------ */
.g-table-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.g-table-bar__title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.g-table-bar .g-input-wrap { flex: 0 1 240px; margin-left: auto; }
.g-table-wrap { overflow-x: auto; margin: 0 -4px; }
.g-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.g-table th, .g-table td { text-align: left; padding: 10px 12px; white-space: nowrap; }
.g-table thead th {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--g-text-2); border-bottom: 1px solid var(--g-divider);
}
.g-table tbody tr { border-bottom: 1px solid var(--g-divider); transition: background-color var(--g-dur) var(--g-ease); }
.g-table tbody tr:last-child { border-bottom: 0; }
.g-table tbody tr:hover { background: var(--g-chip-bg); }
.g-table td { color: var(--g-text); }
.g-table .g-right, .g-table th.g-right { text-align: right; font-variant-numeric: tabular-nums; }
.g-table__user { display: flex; align-items: center; gap: 10px; }

/* ---------- 20. Top navigation shell (alternative to the rail) ---------- */
.g-topnav {
  position: sticky; top: 12px; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 8px 10px 8px 12px; border-radius: var(--g-radius-pill);
  background: var(--g-surface-strong); border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-highlight);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(160%); backdrop-filter: blur(var(--g-blur)) saturate(160%);
}
.g-topnav__brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.g-topnav__logo { width: 30px; height: 30px; border-radius: 9px; background: var(--g-accent); display: grid; place-items: center; color: var(--g-accent-fg); font-weight: 700; flex: none; }
.g-topnav__logo svg { width: 18px; height: 18px; }
.g-topnav__tabs { margin: 0 auto; }
.g-topnav__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.g-topnav .g-btn--icon { color: var(--g-text-2); }
.g-topnav .g-btn--icon:hover { color: var(--g-text); }
@media (max-width: 760px) {
  .g-topnav { flex-wrap: wrap; border-radius: var(--g-radius-xl); }
  .g-topnav__tabs { order: 3; width: 100%; margin: 6px 0 0; overflow-x: auto; }
  .g-topnav__actions { margin-left: auto; }
}

/* ---------- 21. Profile chip + dropdown menu ---------------------------- */
.g-profile { position: relative; }
.g-profile__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 6px 0 6px; border-radius: var(--g-radius-pill);
  border: 1px solid var(--g-border); background: transparent; cursor: pointer; color: inherit;
  transition: background-color var(--g-dur) var(--g-ease);
}
.g-profile__btn:hover { background: var(--g-chip-bg); }
.g-profile__meta { display: none; flex-direction: column; line-height: 1.2; text-align: left; }
.g-profile__name { font-size: 13px; font-weight: 600; }
.g-profile__email { font-size: 11.5px; color: var(--g-text-2); }
.g-profile__btn > svg { width: 16px; height: 16px; color: var(--g-text-2); flex: none; }
@media (min-width: 560px) { .g-profile__meta { display: flex; } }
.g-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 210px; padding: 6px; border-radius: 16px;
  background: var(--g-surface-strong); border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-highlight);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(160%); backdrop-filter: blur(var(--g-blur)) saturate(160%);
  display: none;
}
[data-gt-menu][aria-expanded="true"] + .g-menu, .g-menu.is-open { display: block; }
.g-menu__head { padding: 8px 10px 10px; border-bottom: 1px solid var(--g-divider); margin-bottom: 6px; }
.g-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 10px; border: 0; background: transparent;
  font: inherit; font-size: 13px; color: var(--g-text); cursor: pointer; text-align: left;
}
.g-menu__item:hover { background: var(--g-chip-bg); }
.g-menu__item svg { width: 16px; height: 16px; color: var(--g-text-2); flex: none; }
.g-menu__sep { height: 1px; margin: 6px 4px; background: var(--g-divider); }

/* ---------- 22. Accent feature card ------------------------------------- */
.g-card--accent {
  background: linear-gradient(135deg, var(--g-accent), var(--g-accent-soft));
  border-color: transparent; color: var(--g-accent-fg);
  box-shadow: var(--g-shadow), 0 12px 32px color-mix(in srgb, var(--g-accent) 35%, transparent);
}
.g-card--accent .g-card__title, .g-card--accent .g-stat__value, .g-card--accent .g-stat__value small { color: var(--g-accent-fg); }
.g-card--accent .g-card__sub, .g-card--accent .g-stat__label { color: var(--g-accent-fg); opacity: .85; }
.g-card--accent .g-delta { color: var(--g-accent-fg); opacity: .9; }

/* ---------- 23. Legend + grouped bars ----------------------------------- */
.g-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.g-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--g-text-2); }
.g-legend__dot { width: 9px; height: 9px; border-radius: 3px; background: var(--g-dot, var(--g-accent-text)); flex: none; }
.g-bars--grouped { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; align-items: end; height: 120px; }
.g-bar-group { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 100%; }
.g-bar-group > span { width: 14px; border-radius: 6px 6px 0 0; background: var(--g-fill, var(--g-accent-text)); transition: height 500ms var(--g-ease); }

/* ---------- 24. Line / area / sparkline (inline SVG) -------------------- */
.g-chart { width: 100%; }
.g-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-line { fill: none; stroke: var(--g-accent-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-area { stroke: none; fill: var(--g-area-fill, color-mix(in srgb, var(--g-accent) 16%, transparent)); }
.g-chart-axis { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; font-size: 11px; color: var(--g-text-2); margin-top: 6px; }
.g-chart-axis > span { text-align: center; } .g-chart-axis > span:first-child { text-align: left; } .g-chart-axis > span:last-child { text-align: right; }
.g-spark { display: inline-block; width: 92px; height: 28px; vertical-align: middle; }
.g-spark svg { width: 100%; height: 100%; }

/* ---------- 25. Entity list (wallets / accounts) ------------------------ */
.g-entity { display: flex; flex-direction: column; }
.g-entity-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; }
.g-entity-row + .g-entity-row { border-top: 1px solid var(--g-divider); }
.g-entity__badge { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; background: var(--g-chip-bg); color: var(--g-text); overflow: hidden; flex: none; }
.g-entity__badge img { width: 100%; height: 100%; object-fit: cover; }
.g-entity__title { font-size: 13.5px; font-weight: 600; }
.g-entity__sub { font-size: 12px; color: var(--g-text-2); margin-top: 1px; }
.g-entity__trail { display: flex; align-items: center; gap: 12px; }
.g-entity__vals { text-align: right; }
.g-entity__val { font-family: var(--g-font-num); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.g-entity__val small { font-size: 11.5px; font-weight: 500; color: var(--g-text-2); margin-left: 3px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }