:root {
  --crystal-bg:#f4f7fb;
  --crystal-bg-elevated:#eef4fa;
  --crystal-surface:#ffffff;
  --crystal-surface-soft:#f7fafe;
  --crystal-text:#142033;
  --crystal-muted:#5d6d80;
  --crystal-dim:#617388;
  --crystal-border:#d6e1ed;
  --crystal-control-border:#8093a8;
  --crystal-action:#1f6fae;
  --crystal-action-hover:#175b91;
  --crystal-action-contrast:#ffffff;
  --crystal-disabled-bg:#e8eef5;
  --crystal-disabled-text:#596a7f;
  --crystal-focus:#a85c00;
  --crystal-focus-on-sidebar:#ffd06b;
  --crystal-header:rgba(255,255,255,.96);
  --crystal-overlay:rgba(10,24,44,.42);
  --crystal-shadow-sm:0 6px 18px rgba(10,24,44,.08);
  --crystal-shadow-lg:0 18px 50px rgba(3,12,25,.18);
  --crystal-sidebar:#12355d;
  --crystal-sidebar-active:#20517f;
  --crystal-sidebar-text:#c9daec;
  --crystal-sidebar-text-strong:#ffffff;
  --crystal-success:#14755d;
  --crystal-warning:#9a6218;
  --crystal-danger:#b33a48;
  --crystal-control-bg:#ffffff;
  --crystal-control-hover:#eef4fa;
  --crystal-control-text:#142033;
  --crystal-primary-bg:#1f6fae;
  --crystal-primary-hover:#175b91;
  --crystal-primary-text:#ffffff;
  --crystal-success-bg:#14755d;
  --crystal-success-text:#ffffff;
  --crystal-warning-bg:#9a6218;
  --crystal-warning-text:#ffffff;
  --crystal-danger-bg:#b33a48;
  --crystal-danger-hover:#922f3b;
  --crystal-danger-text:#ffffff;
  --crystal-chart-grid:#dde7f1;
  --crystal-chart-empty:#e5edf6;
  --crystal-chart-bg:#ffffff;
  --crystal-chart-text:#5d6d80;
  --crystal-series-1:#8054d7;
  --crystal-series-2:#15948e;
  --crystal-series-3:#286fc4;
  --crystal-series-4:#c67b2b;
  --crystal-series-5:#c24d74;
  --crystal-series-6:#61728a;
}

html[data-theme="dark"] {
  --crystal-bg:#07101d;
  --crystal-bg-elevated:#0a1524;
  --crystal-surface:#0e1a2a;
  --crystal-surface-soft:#142235;
  --crystal-text:#edf5ff;
  --crystal-muted:#a9bad0;
  --crystal-dim:#8ea2bb;
  --crystal-border:#2a3b51;
  --crystal-control-border:#74869b;
  --crystal-action:#63b3ff;
  --crystal-action-hover:#91c9ff;
  --crystal-action-contrast:#07101d;
  --crystal-disabled-bg:#1a293d;
  --crystal-disabled-text:#91a5bd;
  --crystal-focus:#ffd06b;
  --crystal-focus-on-sidebar:#ffd06b;
  --crystal-header:rgba(9,20,34,.96);
  --crystal-overlay:rgba(0,0,0,.64);
  --crystal-shadow-sm:0 6px 18px rgba(0,0,0,.3);
  --crystal-shadow-lg:0 18px 50px rgba(0,0,0,.48);
  --crystal-sidebar:#09182b;
  --crystal-sidebar-active:#173452;
  --crystal-sidebar-text:#b9c9dd;
  --crystal-sidebar-text-strong:#ffffff;
  --crystal-success:#62d9ad;
  --crystal-warning:#f0bd67;
  --crystal-danger:#ff8e9d;
  --crystal-control-bg:#142235;
  --crystal-control-hover:#1b3048;
  --crystal-control-text:#edf5ff;
  --crystal-primary-bg:#63b3ff;
  --crystal-primary-hover:#91c9ff;
  --crystal-primary-text:#07101d;
  --crystal-success-bg:#62d9ad;
  --crystal-success-text:#071a15;
  --crystal-warning-bg:#f0bd67;
  --crystal-warning-text:#211506;
  --crystal-danger-bg:#ff8e9d;
  --crystal-danger-hover:#ffb1bd;
  --crystal-danger-text:#26050b;
  --crystal-chart-grid:#24364b;
  --crystal-chart-empty:#233246;
  --crystal-chart-bg:#0e1a2a;
  --crystal-chart-text:#a9bad0;
  --crystal-series-1:#ad86ff;
  --crystal-series-2:#4cd1c7;
  --crystal-series-3:#63b3ff;
  --crystal-series-4:#ffc16b;
  --crystal-series-5:#ff86ad;
  --crystal-series-6:#9eb0c8;
}

html[data-theme="triz"] {
  --crystal-bg:#0d110f;
  --crystal-bg-elevated:#101610;
  --crystal-surface:#151d14;
  --crystal-surface-soft:#1b2519;
  --crystal-text:#e7efdf;
  --crystal-muted:#a3b395;
  --crystal-dim:#829176;
  --crystal-border:#354331;
  --crystal-control-border:#74869b;
  --crystal-action:#b9f389;
  --crystal-action-hover:#d2ffad;
  --crystal-action-contrast:#17210f;
  --crystal-disabled-bg:#202b1e;
  --crystal-disabled-text:#93a586;
  --crystal-focus:#e7bd72;
  --crystal-focus-on-sidebar:#ffd06b;
  --crystal-header:rgba(13,17,15,.96);
  --crystal-overlay:rgba(0,0,0,.68);
  --crystal-shadow-sm:0 6px 18px rgba(0,0,0,.32);
  --crystal-shadow-lg:0 18px 50px rgba(0,0,0,.5);
  --crystal-sidebar:#111a12;
  --crystal-sidebar-active:#263822;
  --crystal-sidebar-text:#afc2a6;
  --crystal-sidebar-text-strong:#f2ffe8;
  --crystal-success:#8edfae;
  --crystal-warning:#e7bd72;
  --crystal-danger:#f2a094;
  --crystal-control-bg:#1b2519;
  --crystal-control-hover:#263822;
  --crystal-control-text:#e7efdf;
  --crystal-primary-bg:#b9f389;
  --crystal-primary-hover:#d2ffad;
  --crystal-primary-text:#17210f;
  --crystal-success-bg:#8edfae;
  --crystal-success-text:#102016;
  --crystal-warning-bg:#e7bd72;
  --crystal-warning-text:#241806;
  --crystal-danger-bg:#f2a094;
  --crystal-danger-hover:#ffc0b7;
  --crystal-danger-text:#28100d;
  --crystal-chart-grid:#2d392a;
  --crystal-chart-empty:#2a3428;
  --crystal-chart-bg:#151d14;
  --crystal-chart-text:#a3b395;
  --crystal-series-1:#b9f389;
  --crystal-series-2:#72cab5;
  --crystal-series-3:#90aee8;
  --crystal-series-4:#e7bd72;
  --crystal-series-5:#e68da7;
  --crystal-series-6:#9cab91;
}

html[data-theme] {
  color-scheme:light;
  min-height:100%;
  background-color:var(--crystal-bg);
  --crystal-radius-sm:8px;
  --crystal-radius-md:12px;
  --crystal-radius-lg:20px;
  --bg:var(--crystal-bg);
  --panel:var(--crystal-surface);
  --panel-2:var(--crystal-surface-soft);
  --panel-strong:var(--crystal-surface);
  --border:var(--crystal-border);
  --line:var(--crystal-border);
  --line-strong:var(--crystal-action);
  --ink:var(--crystal-text);
  --text:var(--crystal-text);
  --muted:var(--crystal-muted);
  --dim:var(--crystal-dim);
  --accent:var(--crystal-action);
  --accent-dark:var(--crystal-surface-soft);
  --blue:var(--crystal-action);
  --purple:var(--crystal-action);
  --light:var(--crystal-surface-soft);
  --green:var(--crystal-success);
  --amber:var(--crystal-warning);
  --red:var(--crystal-danger);
  --vpn-ink:var(--crystal-text);
  --vpn-text:var(--crystal-text);
  --vpn-muted:var(--crystal-muted);
  --vpn-line:var(--crystal-border);
  --vpn-accent:var(--crystal-action);
  --ws-bg:var(--crystal-bg);
  --ws-paper:var(--crystal-surface);
  --ws-ink:var(--crystal-text);
  --ws-muted:var(--crystal-muted);
  --ws-line:var(--crystal-border);
  --ws-line-strong:var(--crystal-control-border);
  --ws-blue:var(--crystal-action);
  --ws-blue-soft:var(--crystal-surface-soft);
  --ws-navy:var(--crystal-sidebar);
  --ws-navy-dark:var(--crystal-sidebar-active);
  --ws-ok:var(--crystal-success);
  --ws-warn:var(--crystal-warning);
  --ws-bad:var(--crystal-danger);
  --ws-shadow:var(--crystal-shadow-sm);
}
html[data-theme="dark"],html[data-theme="triz"]{color-scheme:dark}
html[data-theme] body{background-color:var(--crystal-bg);color:var(--crystal-text)}
html[data-theme] ::selection{background:var(--crystal-action);color:var(--crystal-action-contrast)}
html[data-theme] :is(button,a,input,select,textarea,summary,[role="button"],[tabindex]:not([tabindex="-1"]),[contenteditable="true"]):focus-visible{outline:3px solid var(--crystal-focus)!important;outline-offset:2px}
html[data-theme] :is(input,select,textarea){border-color:var(--crystal-control-border)}
html[data-theme] :is(button,input,select,textarea):disabled,
html[data-theme] [aria-disabled="true"]{opacity:1;color:var(--crystal-disabled-text);background-color:var(--crystal-disabled-bg);border-color:var(--crystal-control-border)}
html[data-theme][data-crystal-app] :is(button,input:not([type="checkbox"]):not([type="radio"]),select,textarea,summary,[role="button"]),
html[data-theme] body[data-crystal-site="corporate"] :is(button,input:not([type="checkbox"]):not([type="radio"]),select,textarea,summary,[role="button"]),
html[data-theme] body[data-vpn-page] :is(button,input:not([type="checkbox"]):not([type="radio"]),select,textarea,summary,[role="button"]){min-height:44px}
html[data-theme][data-crystal-app] :is(button,[role="button"]),
html[data-theme] body[data-crystal-site="corporate"] :is(button,[role="button"]),
html[data-theme] body[data-vpn-page] :is(button,[role="button"]){min-width:44px}
html[data-theme][data-crystal-app] :is(a.button,a.btn,a.ui-button),
html[data-theme] body[data-crystal-site="corporate"] :is(a.button,a.btn,a.ui-button),
html[data-theme] body[data-vpn-page] :is(a.button,a.btn,a.ui-button){display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
html[data-theme] :is(.sidebar,.rail,.vpn-shell-header) :is(button,a,input,select,textarea,summary,[role="button"]):focus-visible{outline-color:var(--crystal-focus-on-sidebar)!important}

/* Canonical interactive-control contract. Application adapters may preserve a
   compact shape or navigation layout, but semantic color and state stay shared. */
html[data-theme][data-crystal-app] :is(button,.button,.btn,.ui-button,[role="button"]),
html[data-theme] body[data-crystal-site="corporate"] :is(button,.button,.btn,.ui-button,[role="button"]),
html[data-theme] body[data-vpn-page] :is(button,.button,.btn,.ui-button,[role="button"]){
  border-color:var(--crystal-control-border);background-color:var(--crystal-control-bg);color:var(--crystal-control-text)
}
html[data-theme][data-crystal-app] :is(button,.button,.btn,.ui-button,[role="button"]):hover:not(:disabled):not([aria-disabled="true"]),
html[data-theme] body[data-crystal-site="corporate"] :is(button,.button,.btn,.ui-button,[role="button"]):hover:not(:disabled):not([aria-disabled="true"]),
html[data-theme] body[data-vpn-page] :is(button,.button,.btn,.ui-button,[role="button"]):hover:not(:disabled):not([aria-disabled="true"]){
  background-color:var(--crystal-control-hover);border-color:var(--crystal-action)
}
html[data-theme][data-crystal-app] :is(button,.button,.btn,.ui-button,[role="button"]):is(.primary,.button-primary,.primary-button,.primary-action,.ui-button--primary,.replay-primary,.terminal-primary,.trade-confirmation-submit),
html[data-theme] body[data-crystal-site="corporate"] :is(button,.button,.btn,.ui-button,[role="button"]):is(.primary,.button-primary,.primary-button,.primary-action,.ui-button--primary),
html[data-theme] body[data-vpn-page] :is(button,.button,.btn,.ui-button,[role="button"]):is(.primary,.button-primary,.primary-button,.primary-action,.ui-button--primary){
  background-color:var(--crystal-primary-bg);border-color:var(--crystal-primary-bg);color:var(--crystal-primary-text)
}
html[data-theme][data-crystal-app] :is(button,.button,.btn,.ui-button,[role="button"]):is(.primary,.button-primary,.primary-button,.primary-action,.ui-button--primary,.replay-primary,.terminal-primary,.trade-confirmation-submit):hover:not(:disabled):not([aria-disabled="true"]),
html[data-theme] body[data-crystal-site="corporate"] :is(button,.button,.btn,.ui-button,[role="button"]):is(.primary,.button-primary,.primary-button,.primary-action,.ui-button--primary):hover:not(:disabled):not([aria-disabled="true"]),
html[data-theme] body[data-vpn-page] :is(button,.button,.btn,.ui-button,[role="button"]):is(.primary,.button-primary,.primary-button,.primary-action,.ui-button--primary):hover:not(:disabled):not([aria-disabled="true"]){
  background-color:var(--crystal-primary-hover);border-color:var(--crystal-primary-hover);color:var(--crystal-primary-text)
}
html[data-theme][data-crystal-app] :is(button,.button,.btn,.ui-button,[role="button"]):is(.danger,.bad,.btn-danger,.action-danger,.danger-link,.terminal-dialog-danger,.trade-emergency-close,.trade-cancel-entry),
html[data-theme] body[data-vpn-page] :is(button,.button,.btn,.ui-button,[role="button"]):is(.danger,.bad,.btn-danger,.action-danger,.danger-link){
  background-color:var(--crystal-danger-bg);border-color:var(--crystal-danger-bg);color:var(--crystal-danger-text)
}
html[data-theme][data-crystal-app] :is(button,.button,.btn,.ui-button,[role="button"]):is(.danger,.bad,.btn-danger,.action-danger,.danger-link,.terminal-dialog-danger,.trade-emergency-close,.trade-cancel-entry):hover:not(:disabled):not([aria-disabled="true"]),
html[data-theme] body[data-vpn-page] :is(button,.button,.btn,.ui-button,[role="button"]):is(.danger,.bad,.btn-danger,.action-danger,.danger-link):hover:not(:disabled):not([aria-disabled="true"]){
  background-color:var(--crystal-danger-hover);border-color:var(--crystal-danger-hover);color:var(--crystal-danger-text)
}
html[data-theme][data-crystal-app] :is(.active,.is-active,.selected,[aria-pressed="true"],[aria-selected="true"]):is(button,.button,.btn,.ui-button,[role="button"]){
  background-color:var(--crystal-primary-bg);border-color:var(--crystal-primary-bg);color:var(--crystal-primary-text)
}
html[data-theme][data-crystal-app] :is(button,.button,.btn,.ui-button,[role="button"]):disabled,
html[data-theme][data-crystal-app] :is(.button,.btn,.ui-button,[role="button"])[aria-disabled="true"],
html[data-theme] body[data-crystal-site="corporate"] :is(button,.button,.btn,.ui-button,[role="button"]):disabled,
html[data-theme] body[data-vpn-page] :is(button,.button,.btn,.ui-button,[role="button"]):disabled{
  opacity:1!important;background-color:var(--crystal-disabled-bg)!important;border-color:var(--crystal-control-border)!important;color:var(--crystal-disabled-text)!important;cursor:not-allowed
}

.crystal-theme-control{position:relative;z-index:2147483000;display:inline-flex;align-items:center;flex:none;font:600 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--crystal-text)}
.crystal-theme-control[data-floating="true"]{position:fixed;top:14px;right:14px}
.crystal-theme-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;margin:0;padding:0 12px;border:1px solid var(--crystal-control-border);border-radius:10px;background:var(--crystal-surface);color:var(--crystal-text);box-shadow:var(--crystal-shadow-sm);font:inherit;cursor:pointer}
.crystal-theme-trigger:hover{border-color:var(--crystal-action);color:var(--crystal-action)}
.crystal-theme-trigger-icon{width:18px;height:18px;display:grid;place-items:center;font-size:17px;line-height:1}
.crystal-theme-trigger-label{white-space:nowrap}
.crystal-theme-menu{position:absolute;z-index:2147483001;top:calc(100% + 8px);right:0;width:190px;margin:0;padding:6px;border:1px solid var(--crystal-control-border);border-radius:var(--crystal-radius-md);background:var(--crystal-surface);color:var(--crystal-text);box-shadow:var(--crystal-shadow-lg)}
.crystal-theme-menu[hidden]{display:none!important}
.crystal-theme-option{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:0;padding:9px 11px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.crystal-theme-option:hover,.crystal-theme-option:focus-visible{background:var(--crystal-surface-soft)}
.crystal-theme-option[aria-checked="true"]{background:var(--crystal-surface-soft);color:var(--crystal-action)}
.crystal-theme-option-mark{width:15px;height:15px;border:1px solid var(--crystal-border);border-radius:50%;box-shadow:inset 0 0 0 4px var(--crystal-surface)}
.crystal-theme-option[aria-checked="true"] .crystal-theme-option-mark{background:var(--crystal-action);border-color:var(--crystal-action)}
.crystal-theme-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

html[data-theme] .vpn-shell-header{background:var(--crystal-header);color:var(--crystal-text);border-color:var(--crystal-border)}
html[data-theme] .vpn-shell-header .vpn-shell-identity>a:hover,
html[data-theme] .vpn-shell-header .vpn-shell-identity>a:focus-visible{background:var(--crystal-surface-soft)}
html[data-theme] .vpn-shell-identity-icon{background:var(--crystal-surface-soft);color:var(--crystal-action)}
html[data-theme] .vpn-shell-status:not(:empty){background:var(--crystal-header)}
html[data-theme] body[data-vpn-page="workspace"],
html[data-theme] body[data-vpn-page="company"]{background:var(--crystal-bg);color:var(--crystal-text)}
html[data-theme] body[data-vpn-page="workspace"] .sidebar{background:var(--crystal-sidebar);color:var(--crystal-sidebar-text)}
html[data-theme] body[data-vpn-page="workspace"] .sidebar :is(a,button,.nav-item){color:inherit}
html[data-theme] body[data-vpn-page="workspace"] .nav-item.active{background:var(--crystal-sidebar-active);color:var(--crystal-sidebar-text-strong)}
html[data-theme] body[data-vpn-page="workspace"] :is(.panel,.card,.topbar,.modal-card,.auth-card),
html[data-theme] body[data-vpn-page="company"] :is(.card,.account-card){background:var(--crystal-surface);color:var(--crystal-text);border-color:var(--crystal-border)}
html[data-theme] body[data-vpn-page="workspace"] :is(input,select,textarea),
html[data-theme] body[data-vpn-page="company"] :is(input,select,textarea){background:var(--crystal-surface);color:var(--crystal-text);border-color:var(--crystal-border)}
html[data-theme] body[data-vpn-page="workspace"] :is(.muted-copy,.subtitle,.request-note,.profile-login),
html[data-theme] body[data-vpn-page="company"] :is(.muted,.note,#status,.point-detail,.reconciliation){color:var(--crystal-muted)}
html[data-theme] body[data-vpn-page="workspace"] :is(.data-table th,.data-table td,.profile-phone-row,.profile-actions),
html[data-theme] body[data-vpn-page="company"] :is(th,td,.account-meta>div,.account-disclosure){border-color:var(--crystal-border)}
html[data-theme] body[data-vpn-page="workspace"] .data-table th,
html[data-theme] body[data-vpn-page="company"] th{background:var(--crystal-surface);color:var(--crystal-muted)}
html[data-theme] body[data-vpn-page="company"] :is(tfoot td,tr.selected){background:var(--crystal-surface-soft)}
html[data-theme] body[data-vpn-page="company"] .totals>div{background:var(--crystal-sidebar);color:var(--crystal-sidebar-text-strong)}
html[data-theme] body[data-vpn-page="company"] .totals small{color:var(--crystal-sidebar-text)}
html[data-theme] body[data-vpn-page="company"] .timeline{border-color:var(--crystal-chart-grid);background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),var(--crystal-chart-grid) calc(25% - 1px),var(--crystal-chart-grid) 25%)}
html[data-theme] body[data-vpn-page="company"] #chart text{fill:var(--crystal-text)}
html[data-theme] body[data-vpn-page="company"] .empty-ring{border-color:var(--crystal-chart-empty);color:var(--crystal-muted)}

/* The main VPN operator is a legacy single-file application whose compact
   workspace layer still contains literal light colors. Keep its layout and
   interaction code intact while routing every visual surface through the
   shared semantic palette. */
html[data-theme] body[data-vpn-page="operator"]{background:var(--crystal-bg);color:var(--crystal-text)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app{background:var(--crystal-bg);color:var(--crystal-text)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .sidebar{background-color:var(--crystal-sidebar);background-image:linear-gradient(180deg,var(--crystal-sidebar),var(--crystal-sidebar-active));color:var(--crystal-sidebar-text-strong)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(.workspace-brand-copy span,.side-title,.list-section-title,.list-disclosure>summary,.user-name .subtle,.side-counts span){color:var(--crystal-sidebar-text)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(.workspace-logo,.side-toggle,.search input,.side-add,.side-counts span,.mobile-nav .nav-icon){border-color:color-mix(in srgb,var(--crystal-sidebar-text) 30%,transparent);background:color-mix(in srgb,var(--crystal-sidebar-text) 12%,transparent);color:var(--crystal-sidebar-text-strong)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .mobile-nav{background-color:var(--crystal-sidebar);background-image:linear-gradient(180deg,var(--crystal-sidebar),var(--crystal-sidebar-active));border-color:color-mix(in srgb,var(--crystal-sidebar-text) 28%,transparent)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .mobile-nav :is(button,a){color:var(--crystal-sidebar-text-strong);border-color:color-mix(in srgb,var(--crystal-sidebar-text) 20%,transparent)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .mobile-nav :is(button,a):hover{background:color-mix(in srgb,var(--crystal-sidebar-text) 12%,transparent)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .mobile-nav .nav-copy small{color:var(--crystal-sidebar-text)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .mobile-nav :is(button,a):focus-visible{outline-color:var(--crystal-focus-on-sidebar)!important}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .mobile-nav .mobile-logout button{color:var(--crystal-danger);border-color:color-mix(in srgb,var(--crystal-danger) 45%,transparent)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .badge{background:var(--crystal-surface-soft);color:var(--crystal-muted)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .badge.live{background:color-mix(in srgb,var(--crystal-success) 14%,var(--crystal-surface));color:var(--crystal-success)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .badge.test{background:color-mix(in srgb,var(--crystal-series-3) 14%,var(--crystal-surface));color:var(--crystal-series-3)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .badge.draft{background:color-mix(in srgb,var(--crystal-warning) 14%,var(--crystal-surface));color:var(--crystal-warning)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .status-dot.live{background:var(--crystal-success);box-shadow:0 0 0 4px color-mix(in srgb,var(--crystal-success) 20%,transparent)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .status-dot.draft{background:var(--crystal-warning);box-shadow:0 0 0 4px color-mix(in srgb,var(--crystal-warning) 20%,transparent)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(.workspace-top,.workspace-document,.workspace-inspector,.inspector-card,.profile-sheet,.modal-card){background:var(--crystal-surface);color:var(--crystal-text);border-color:var(--crystal-border)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(.workspace-bar,.workspace-document .panel-head,.profile-sheet-title,.profile-sheet>summary,.dashboard-metric,.resource-card,.inspector-card h3,.inspector-stat,.action-status,.iai-launch-result,.iai-launch-item){background:var(--crystal-surface-soft);color:var(--crystal-text);border-color:var(--crystal-border)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(.workspace-title span,.workspace-meta,.detail-intro,.install-strip-copy span,.profile-section-note,.resource-copy p,.inspector-stat,.modal-status){color:var(--crystal-muted)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(.workspace-document .eyebrow,.workspace-profile-trigger:not(:disabled):hover h1){color:var(--crystal-action)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(.workspace-tab.active,.profile-sheet-title,.profile-sheet>summary,.dashboard-metric strong,.inspector-card h3,.resource-copy h3,.inspector-stat strong,.install-strip-copy strong){color:var(--crystal-text)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .workspace-tab.active{background:var(--crystal-surface-soft);outline-color:var(--crystal-control-border)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(a.action,a.workspace-tab){min-height:44px;display:inline-flex;align-items:center}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .install-strip{background:var(--crystal-surface-soft);border-color:var(--crystal-border)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(input,select,textarea){background:var(--crystal-surface);color:var(--crystal-text);border-color:var(--crystal-control-border)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(.action,.icon-button,.close-button):not(.primary):not(.action-danger){background:var(--crystal-surface);color:var(--crystal-text);border-color:var(--crystal-control-border)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(.action,.icon-button,.close-button):not(.primary):not(.action-danger):hover{background:var(--crystal-surface-soft);border-color:var(--crystal-action)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(.action.primary,.workspace-tab[aria-selected="true"]){background:var(--crystal-action);color:var(--crystal-action-contrast);border-color:var(--crystal-action)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(.info-row,.resource-grid,.workspace-inspector,.profile-sheet-title,.profile-sheet>summary,.workspace-document .panel-head){border-color:var(--crystal-border)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .profile-danger{background:color-mix(in srgb,var(--crystal-danger) 8%,var(--crystal-surface));border-color:color-mix(in srgb,var(--crystal-danger) 52%,var(--crystal-border))}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .profile-danger :is(h3,p,summary){color:var(--crystal-danger)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .profile-danger summary::after{color:var(--crystal-danger)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .profile-danger .action-danger{background:var(--crystal-surface);color:var(--crystal-danger);border-color:var(--crystal-danger)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app #detail-feedback .action-status.ok{background:color-mix(in srgb,var(--crystal-success) 12%,var(--crystal-surface));border-color:var(--crystal-success);color:var(--crystal-text)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app #detail-feedback .action-status.error{background:color-mix(in srgb,var(--crystal-danger) 12%,var(--crystal-surface));border-color:var(--crystal-danger);color:var(--crystal-text)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(.modal,.mobile-drawer-backdrop){background:var(--crystal-overlay)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .workspace-status{background:var(--crystal-sidebar);color:var(--crystal-sidebar-text-strong)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app .workspace-status span:last-child{color:var(--crystal-sidebar-text)}
html[data-theme] body[data-vpn-page="operator"] .vpn-app :is(.install-link-field input,.iai-claim-row input,.iai-launch-item){background:var(--crystal-surface)!important;color:var(--crystal-text)!important;border-color:var(--crystal-control-border)!important}
html[data-theme] body[data-vpn-page="operator"]>.modal{background:var(--crystal-overlay)}
html[data-theme] body[data-vpn-page="operator"]>.modal :is(.modal-card,input,select,textarea){background:var(--crystal-surface);color:var(--crystal-text);border-color:var(--crystal-control-border)}
html[data-theme] body[data-vpn-page="operator"]>.org-members-dialog{background:var(--crystal-surface)!important;color:var(--crystal-text)!important;border-color:var(--crystal-control-border)!important}
html[data-theme] body[data-vpn-page="operator"]>.org-members-dialog::backdrop{background:var(--crystal-overlay)}
html[data-theme] body[data-vpn-page="operator"]>.org-members-dialog button[data-person]:disabled{background:var(--crystal-disabled-bg)!important;color:var(--crystal-disabled-text)!important;border-color:var(--crystal-control-border)!important;opacity:1!important}
html[data-theme] body[data-vpn-page="operator"]>.org-members-dialog button[data-person][aria-pressed="true"]{outline-color:var(--crystal-action)!important}

/* The accounting dashboard is appended directly to body rather than .vpn-app.
   Route every nested presentation state through the operator's semantic tokens. */
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard,
html[data-theme] body[data-vpn-page="operator"] .td-payment-dialog{background:var(--crystal-surface);color:var(--crystal-text);border-color:var(--crystal-border);box-shadow:var(--crystal-shadow-lg)}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard::backdrop,
html[data-theme] body[data-vpn-page="operator"] .td-payment-dialog::backdrop{background:var(--crystal-overlay)}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard :is(.td-kpis>div,.td-columns>section,.td-detail,.td-billing){background:var(--crystal-surface);color:var(--crystal-text);border-color:var(--crystal-border)}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard :is(button,select,input),
html[data-theme] body[data-vpn-page="operator"] .td-payment-dialog :is(button,input){background:var(--crystal-control-bg);color:var(--crystal-control-text);border-color:var(--crystal-control-border)}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard :is(button,select,input):focus-visible,
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard path:focus-visible,
html[data-theme] body[data-vpn-page="operator"] .td-payment-dialog :is(button,input):focus-visible{outline-color:var(--crystal-focus)}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard :is(#td-refresh,.td-paid):not(:disabled),
html[data-theme] body[data-vpn-page="operator"] .td-payment-dialog button[type="submit"]{background:var(--crystal-primary-bg);color:var(--crystal-primary-text);border-color:var(--crystal-primary-bg)}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard :is(button,select,input):disabled,
html[data-theme] body[data-vpn-page="operator"] .td-payment-dialog :is(button,input):disabled{background:var(--crystal-disabled-bg);color:var(--crystal-disabled-text);border-color:var(--crystal-control-border);opacity:1}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard :is(.td-name,.td-day,.uc-tools button,.uc-scope button)[aria-pressed="true"]{background:var(--crystal-primary-bg)!important;color:var(--crystal-primary-text)!important;border-color:var(--crystal-primary-bg)!important}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard :is(#td-status,#td-hover,.td-empty,footer,.td-summary,.td-hint,.uc-summary,.uc-hint,td small){color:var(--crystal-muted)}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard :is(th,td){border-color:var(--crystal-border)}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard #td-chart path{stroke:var(--crystal-chart-bg)}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard .td-bar{background:linear-gradient(to right,var(--crystal-series-3) var(--width),var(--crystal-chart-empty) var(--width))}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard .td-hour-reconciliation{background:color-mix(in srgb,var(--crystal-warning) 14%,var(--crystal-surface));border-color:var(--crystal-warning);color:var(--crystal-text)}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard :is(.td-hour-bar,.td-hour-column:not(.zero) .td-hour-bar){background:var(--crystal-series-3)}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard .td-hour-column:is(:hover,:focus) .td-hour-bar{background:var(--crystal-series-1)}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard :is(.td-hour-column.zero .td-hour-bar,.uc-bar.zero){background:var(--crystal-chart-empty)!important}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard :is(.usage-chart,.uc-scope){background:var(--crystal-surface-soft);color:var(--crystal-text)}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard .usage-chart{background:transparent}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard .uc-bars{background:repeating-linear-gradient(to top,transparent 0,transparent 59px,var(--crystal-chart-grid) 59px,var(--crystal-chart-grid) 60px)}
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard .uc-column:hover .uc-bar,
html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard .uc-lines circle:is(:focus,:hover){outline-color:var(--crystal-chart-text);stroke:var(--crystal-chart-text)}
@media(max-width:760px){
  html[data-theme] body[data-vpn-page="operator"] .traffic-dashboard .td-filters :is(label,select,input){min-width:0;max-width:100%;width:100%}
}

html[data-theme] body:not([data-vpn-page]) :is(.panel,.card,main){border-color:var(--crystal-border)}
html[data-theme="light"] body:not([data-vpn-page]) :is(.panel,.card){background-color:var(--crystal-surface);color:var(--crystal-text)}
html[data-theme="dark"] body:not([data-vpn-page]),html[data-theme="triz"] body:not([data-vpn-page]){background-image:none}
html[data-theme="dark"] body:not([data-vpn-page]) :is(.panel,.card),
html[data-theme="triz"] body:not([data-vpn-page]) :is(.panel,.card){background:var(--crystal-surface);color:var(--crystal-text);box-shadow:none}

html[data-theme] body[data-crystal-surface="share"] main,
html[data-theme] body[data-crystal-surface="support"] :is(.card,.success){background:var(--crystal-surface);color:var(--crystal-text);border-color:var(--crystal-border);box-shadow:0 18px 50px rgba(3,12,25,.12)}
html[data-theme] body[data-crystal-surface="share"] :is(.wizard,.wizard-option,.wizard-app-row),
html[data-theme] body[data-crystal-surface="support"] :is(textarea,.app,.attach){background:var(--crystal-surface-soft);color:var(--crystal-text);border-color:var(--crystal-border)}
html[data-theme] body[data-crystal-surface="share"] :is(.hint,.status,.wizard-help,.wizard-option small,.direct-install summary),
html[data-theme] body[data-crystal-surface="support"] :is(.lead,.status,.field span,.attach span,.privacy){color:var(--crystal-muted)}
html[data-theme] body[data-crystal-surface="share"] :is(.eyebrow,.wizard-step,.wizard-help a,.wizard-back,.open),
html[data-theme] body[data-crystal-surface="support"] :is(.eyebrow,#file-name){color:var(--crystal-action)}
html[data-theme] body[data-crystal-surface="share"] :is(.modern,.start-wizard),
html[data-theme] body[data-crystal-surface="support"] :is(.primary,.app[aria-pressed="true"]){background:var(--crystal-action);color:var(--crystal-action-contrast);border-color:var(--crystal-action);box-shadow:none}
html[data-theme] body[data-crystal-surface="share"] .notice{background:color-mix(in srgb,var(--crystal-warning) 16%,var(--crystal-surface));color:var(--crystal-text)}
html[data-theme] body[data-crystal-surface="share"] .share-theme-host,
html[data-theme] body[data-crystal-surface="support"] .share-theme-host{display:flex;justify-content:flex-end;min-height:44px;margin:0 0 14px}
html[data-theme] body[data-crystal-surface="support"] header[data-crystal-theme-host]{flex-wrap:wrap}
html[data-theme] body[data-crystal-surface="support"] header[data-crystal-theme-host]>.crystal-theme-control{margin-left:auto}
html[data-theme] body[data-crystal-surface="share"] :is(.store-icon,.choice-row,.wizard-download,.direct-install){border-color:var(--crystal-border);color:var(--crystal-text)}
html[data-theme] body[data-crystal-surface="share"] :is(.store-icon,.wizard-download){background:var(--crystal-surface-soft)}

body[data-crystal-site="corporate"] .crystal-theme-trigger{border-radius:3px;background:var(--panel);box-shadow:none;font:10px var(--mono)}
html[data-theme] body[data-crystal-site="corporate"] .header{background:var(--crystal-header);border-color:var(--crystal-border)}
html[data-theme] body[data-crystal-site="corporate"] :is(.terminal-slab,.case-mg,.case-tile,.module-card,.workflow,.trust-grid>div){background-color:var(--crystal-surface);border-color:var(--crystal-border)}
html[data-theme="light"] body[data-crystal-site="corporate"] :is(.hero-command,.case-lead,.hero-stats strong,.brief-content>label){color:var(--crystal-text)}
html[data-theme="light"] body[data-crystal-site="corporate"] .terminal-slab{box-shadow:0 24px 70px rgba(20,32,51,.14)}
html[data-theme] body[data-crystal-site="corporate"] :is(.button.primary,.workflow-nav button[aria-selected="true"]){background:var(--crystal-action);border-color:var(--crystal-action);color:var(--crystal-action-contrast)}
html[data-theme] body[data-crystal-site="corporate"] .filters button.active{background:var(--crystal-action);border-color:var(--crystal-action);color:var(--crystal-action-contrast)}
html[data-theme] body[data-crystal-site="corporate"] .workflow-nav button[aria-selected="true"]>span,
html[data-theme] body[data-crystal-site="corporate"] .recipe-preview>div:last-child :is(small,em){color:var(--crystal-action-contrast)}
html[data-theme] body[data-crystal-site="corporate"] .demo-badge.concept{color:var(--crystal-series-1)}
html[data-theme] body[data-crystal-site="corporate"] main>code,
html[data-theme] body[data-crystal-site="corporate"] main>a{color:var(--crystal-action)}
html[data-theme] body[data-crystal-site="corporate"] main>p{color:var(--crystal-muted)}

/* The VPN shell can replace the application with a recovery notice before the
   page layout mounts. Give that standalone action an explicit semantic pair so
   it stays readable in every theme. */
html[data-theme] .vpn-shell-notice button{background:var(--crystal-surface);color:var(--crystal-text);border-color:var(--crystal-control-border)}

@media(max-width:680px){
  html[data-theme] body[data-vpn-page="operator"]>.crystal-theme-control[data-floating="true"]{right:64px}
  .crystal-theme-trigger{padding:0 10px}
  .crystal-theme-trigger-label{display:none}
  .crystal-theme-menu{position:fixed;top:auto;right:12px;bottom:12px;left:12px;width:auto;padding:8px;border-radius:16px}
  body[data-crystal-site="corporate"] .crystal-theme-control{order:-1}
}
@media(prefers-reduced-motion:reduce){.crystal-theme-control *{transition:none!important;animation:none!important}}
@media print{.crystal-theme-control{display:none!important}}