:root,
[data-theme="light"] {
  color-scheme: light;
  --vip-bg-canvas: #F2F1EE;  
  --vip-bg-obsidian: #EAE8E3;  
  --vip-surface-panel: #E8E6E0;  
  --vip-surface-card: #FAF9F6;  
  --vip-surface-elevated: #FFFFFF;  
  --vip-surface-bezel: #E2DFD7;  
  --vip-text-ink: #23252D;  
  --vip-text-body: #414452;  
  --vip-text-muted: #616475;  
  --vip-text-dim: #666976;  
  --vip-pill-bg: #E5ECF8;  
  --vip-pill-border: rgba(43, 87, 176, .24);
  --vip-pill-text: #1F3F7A;  
  --vip-cobalt-core: #2563EB;  
  --vip-cobalt-halo: rgba(37, 99, 235, .18);
  --vip-pulsar-amber: #C25938;  
  --vip-pulsar-glow: rgba(194, 89, 56, .18);
  --vip-accent-brass: #7A5E32;  
  --vip-accent-verdigris: #245E4E;  
  --vip-accent-crimson: #9B2D1F;  
  --vip-border-subtle: rgba(20, 21, 26, .08);
  --vip-border-card: rgba(20, 21, 26, .13);
  --vip-border-focus: rgba(37, 99, 235, .35);

  --surface-page: var(--vip-bg-canvas);  
  --surface-card: var(--vip-surface-card);
  --surface-focal: var(--vip-surface-elevated);
  --text-ink: var(--vip-text-ink);
  --text-body: var(--vip-text-body);
  --text-muted: var(--vip-text-muted);
  --text-soft: var(--vip-text-dim);
  --accent-struct: #B08D4F;  
  --accent-struct-text: var(--vip-accent-brass);
  --accent-emphasis: #B08D4F;  
  --text-on-struct: #14151A;
  --accent-action: var(--vip-accent-verdigris);  
  --accent-action-text: var(--vip-accent-verdigris);
  --text-on-action: #FAF9F6;
  --status-bad: var(--vip-accent-crimson);  
  --hairline: rgba(20, 21, 26, .13);  
  --hairline-2: rgba(20, 21, 26, .08);
  --shadow-card: 0 1px 2px rgba(20, 21, 26, .05), 0 6px 20px rgba(20, 21, 26, .07), inset 0 0 0 1px var(--hairline-2);
  --shadow-card-hover: 0 2px 4px rgba(20, 21, 26, .06), 0 14px 34px rgba(20, 21, 26, .10), inset 0 0 0 1px var(--hairline);
  --shadow-focal: 0 2px 6px rgba(20, 21, 26, .05), 0 18px 46px rgba(20, 21, 26, .10), inset 0 0 0 1px var(--hairline);
  --glass-bg: transparent;  
  --glass-blur: 0px;
  --glass-border: transparent;
  --glow-soft: none;  
  --glow-card: none;
  --glow-strong: none;
}


[data-theme="dark"] {
  color-scheme: dark;
  --vip-bg-canvas: #08080A;  
  --vip-bg-obsidian: #0D0D11;  
  --vip-surface-panel: #111015;  
  --vip-surface-card: #16151B;  
  --vip-surface-elevated: #1D1C24;  
  --vip-surface-bezel: #121117;  
  --vip-text-ink: #DEDCE6;  
  --vip-text-body: #C4C3D0;  
  --vip-text-muted: #9B9AA9;  
  --vip-text-dim: #7E7B8C;  
  --vip-pill-bg: #101829;  
  --vip-pill-border: rgba(92, 138, 230, .26);
  --vip-pill-text: #A8B6D8;  
  --vip-cobalt-core: #3B7BF6;  
  --vip-cobalt-halo: rgba(59, 123, 246, .24);
  --vip-pulsar-amber: #D97757;  
  --vip-pulsar-glow: rgba(217, 119, 87, .20);
  --vip-accent-brass: #C19A6B;  
  --vip-accent-verdigris: #8FC4B0;  
  --vip-accent-crimson: #D66257;  
  --vip-border-subtle: rgba(255, 255, 255, .065);
  --vip-border-card: rgba(255, 255, 255, .095);
  --vip-border-focus: rgba(168, 182, 216, .28);

  --surface-page: var(--vip-bg-canvas);  
  --surface-card: var(--vip-surface-card);
  --surface-focal: var(--vip-surface-elevated);
  --text-ink: var(--vip-text-ink);
  --text-body: var(--vip-text-body);
  --text-muted: var(--vip-text-muted);
  --text-soft: var(--vip-text-dim);
  --accent-struct: #C19A6B;  
  --accent-struct-text: var(--vip-accent-brass);
  --accent-emphasis: #C19A6B;  
  --text-on-struct: #08080A;
  --accent-action: var(--vip-accent-verdigris);  
  --accent-action-text: var(--vip-accent-verdigris);
  --text-on-action: #08080A;
  --status-bad: var(--vip-accent-crimson);  
  --hairline: rgba(255, 255, 255, .095);  
  --hairline-2: rgba(255, 255, 255, .065);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, .50), inset 0 0 0 1px var(--hairline-2);
  --shadow-card-hover: 0 6px 24px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--hairline);
  --shadow-focal: 0 0 0 1px var(--hairline), 0 6px 28px rgba(0, 0, 0, .55);
  --glass-bg: rgba(17, 16, 21, .62);  
  --glass-blur: 12px;
  --glass-border: rgba(255, 255, 255, .065);
  --glow-soft: none;  
  --glow-card: none;
  --glow-strong: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --vip-bg-canvas: #08080A;  
    --vip-bg-obsidian: #0D0D11;  
    --vip-surface-panel: #111015;  
    --vip-surface-card: #16151B;  
    --vip-surface-elevated: #1D1C24;  
    --vip-surface-bezel: #121117;  
    --vip-text-ink: #DEDCE6;  
    --vip-text-body: #C4C3D0;  
    --vip-text-muted: #9B9AA9;  
    --vip-text-dim: #7E7B8C;  
    --vip-pill-bg: #101829;  
    --vip-pill-border: rgba(92, 138, 230, .26);
    --vip-pill-text: #A8B6D8;  
    --vip-cobalt-core: #3B7BF6;  
    --vip-cobalt-halo: rgba(59, 123, 246, .24);
    --vip-pulsar-amber: #D97757;  
    --vip-pulsar-glow: rgba(217, 119, 87, .20);
    --vip-accent-brass: #C19A6B;  
    --vip-accent-verdigris: #8FC4B0;  
    --vip-accent-crimson: #D66257;  
    --vip-border-subtle: rgba(255, 255, 255, .065);
    --vip-border-card: rgba(255, 255, 255, .095);
    --vip-border-focus: rgba(168, 182, 216, .28);

    --surface-page: var(--vip-bg-canvas);  
    --surface-card: var(--vip-surface-card);
    --surface-focal: var(--vip-surface-elevated);
    --text-ink: var(--vip-text-ink);
    --text-body: var(--vip-text-body);
    --text-muted: var(--vip-text-muted);
    --text-soft: var(--vip-text-dim);
    --accent-struct: #C19A6B;  
    --accent-struct-text: var(--vip-accent-brass);
    --accent-emphasis: #C19A6B;  
    --text-on-struct: #08080A;
    --accent-action: var(--vip-accent-verdigris);  
    --accent-action-text: var(--vip-accent-verdigris);
    --text-on-action: #08080A;
    --status-bad: var(--vip-accent-crimson);  
    --hairline: rgba(255, 255, 255, .095);  
    --hairline-2: rgba(255, 255, 255, .065);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, .50), inset 0 0 0 1px var(--hairline-2);
    --shadow-card-hover: 0 6px 24px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--hairline);
    --shadow-focal: 0 0 0 1px var(--hairline), 0 6px 28px rgba(0, 0, 0, .55);
    --glass-bg: rgba(17, 16, 21, .62);  
    --glass-blur: 12px;
    --glass-border: rgba(255, 255, 255, .065);
    --glow-soft: none;  
    --glow-card: none;
    --glow-strong: none;
  }
}

:root {
  --vip-font-display:   var(--font-display, 'Source Serif 4', Georgia, serif);
  --vip-font-sans:      var(--font-body, 'Fira Sans', system-ui, sans-serif);
  --vip-font-condensed: var(--font-body-condensed, 'Fira Sans Condensed', 'Fira Sans', system-ui, sans-serif);
  --vip-font-mono:      var(--font-mono, 'JetBrains Mono', Consolas, monospace);
  --vip-radius-console: var(--radius-card, 4px);
  --vip-radius-inner:   var(--radius-inner, 2px);
  --vip-radius-chip:    var(--radius-chip, 2px);
}




.vip-pill {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--vip-font-mono); font-size: .86em; font-weight: 500; line-height: 1.35;
  padding: .14em .52em; border-radius: var(--vip-radius-chip);
  background: var(--vip-pill-bg); color: var(--vip-pill-text); border: 1px solid var(--vip-pill-border);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}


.vip-cobalt-dot {
  display: inline-block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--vip-cobalt-core); box-shadow: 0 0 0 4px var(--vip-cobalt-halo);
}


.vip-pulsar-4 { display: inline-grid; flex-shrink: 0; grid-template-columns: repeat(2, 4px); gap: 4px; transform: rotate(45deg); vertical-align: middle; }
.vip-pulsar-4 i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--vip-pulsar-amber); animation: vip-pulse 1.6s infinite ease-in-out; }
.vip-pulsar-4 i:nth-child(2) { animation-delay: .25s; }
.vip-pulsar-4 i:nth-child(4) { animation-delay: .50s; }
.vip-pulsar-4 i:nth-child(3) { animation-delay: .75s; }
@keyframes vip-pulse { 0%, 100% { opacity: .32; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.12); } }


.ring-svg { width: 17px; height: 17px; flex-shrink: 0; }
.ring-svg circle { fill: none; stroke: var(--text-soft); stroke-width: 1.6; stroke-dasharray: 3.2 2.4; }
.ring-svg path { fill: none; stroke: var(--status-good); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ring-svg.is-live circle { stroke: var(--vip-cobalt-core); }
.ring-svg.is-done circle { stroke: var(--status-good); stroke-dasharray: none; }


.vip-console-box { background: var(--vip-surface-bezel); padding: 5px; border-radius: var(--vip-radius-console); border: 1px solid var(--vip-border-subtle); }
.vip-console-inner { background: var(--vip-surface-card); border-radius: var(--vip-radius-inner); border: 1px solid var(--vip-border-card); padding: 16px 20px; }


.vip-edge-s5 { border-top: 2px solid var(--accent-struct); }

@media (prefers-reduced-motion: reduce) {
  .vip-pulsar-4 i { animation: none; opacity: 1; transform: none; }
}