/*
 * Glass skin — a layer over styles.css, active when <html data-skin="glass">.
 *
 * Inspired by Apple's 2025 "Liquid Glass" language: translucent surfaces over a
 * soft, slowly shifting colour field; a specular rim on every panel; floating
 * navigation; pill controls; a sliding lens in segmented controls; springy motion.
 *
 * Three rules keep it usable, because translucency is where that language was
 * criticised:
 *   1. Legibility first. Fills are opaque enough that body text stays ≥ 4.5:1
 *      against the worst point of the background, and text never sits directly
 *      on the colour field — always on a surface.
 *   2. Opt-outs are real. `prefers-reduced-transparency`, the in-app "Reduce
 *      transparency" switch, and browsers without backdrop-filter all get solid
 *      surfaces. `prefers-reduced-motion` stops every animation.
 *   3. Cheap on mid-range phones. backdrop-filter is used only on a handful of
 *      floating containers (bars, nav, dialogs, toasts), never on rows, badges
 *      or list items, and cards drop their blur below 900px. The colour field is
 *      already blurred, so a translucent fill over it reads as glass anyway.
 *
 * Nothing here changes layout semantics; the Polaris skin is styles.css alone.
 */

/* ── Tokens: light ──────────────────────────────────────────────────────── */
:root[data-skin="glass"] {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --bg: #eef1f7;
  --surface: rgba(255, 255, 255, 0.70);
  --surface-2: rgba(255, 255, 255, 0.52);
  --surface-3: rgba(120, 120, 145, 0.10);
  --surface-hover: rgba(255, 255, 255, 0.62);
  --surface-selected: rgba(255, 255, 255, 0.92);
  --border: rgba(60, 60, 90, 0.12);
  --border-strong: rgba(60, 60, 90, 0.22);
  --border-input: rgba(60, 60, 90, 0.30);
  --text: #1d1d1f;
  --text-2: #484852;
  --text-3: #6b6b76;
  --link: #0058b8;
  --focus: #0a6cff;
  --accent: #0a6cff;
  --btn-primary: #0062c9;
  --btn-primary-hover: #0057b3;
  --btn-primary-text: #ffffff;
  --btn-secondary: rgba(255, 255, 255, 0.66);
  --btn-secondary-hover: rgba(255, 255, 255, 0.9);
  --btn-critical: #d70015;
  --btn-critical-hover: #b80012;
  --success-strong: #1f9d55; --info-strong: #0a84ff; --warning-strong: #ff9500; --critical-strong: #ff3b30; --attention-strong: #e6b800;

  --glass-fill: rgba(255, 255, 255, 0.70);
  --glass-fill-strong: rgba(255, 255, 255, 0.86);
  --glass-chrome: rgba(255, 255, 255, 0.62);
  --glass-rim: rgba(255, 255, 255, 0.85);
  --glass-rim-low: rgba(20, 30, 60, 0.07);
  --glass-blur: blur(28px) saturate(175%);
  --glass-blur-strong: blur(40px) saturate(180%);
  --shadow-card: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-low), 0 12px 32px -14px rgba(30, 40, 80, 0.22), 0 2px 6px -2px rgba(30, 40, 80, 0.06);
  --shadow-pop: inset 0 1px 0 var(--glass-rim), 0 24px 48px -16px rgba(20, 30, 60, 0.32), 0 0 0 1px rgba(60, 60, 90, 0.08);
  --shadow-modal: inset 0 1px 0 var(--glass-rim), 0 40px 80px -20px rgba(20, 30, 60, 0.45), 0 0 0 1px rgba(60, 60, 90, 0.10);
  --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(60, 60, 90, 0.14), 0 1px 2px rgba(20, 30, 60, 0.08);
  --shadow-primary: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(0, 60, 140, 0.35), 0 6px 16px -6px rgba(0, 98, 201, 0.55);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 22px;
  --spring: cubic-bezier(.2, .8, .2, 1);
  --code-bg: rgba(18, 20, 28, 0.94);
  --skeleton: rgba(120, 120, 145, 0.14);
  --skeleton-shine: rgba(255, 255, 255, 0.55);
  --backdrop: rgba(20, 24, 40, 0.28);
  --blob-1: #8ec5ff; --blob-2: #7fe3d3; --blob-3: #c8b0ff; --blob-4: #ffd3e6;
}

/* ── Tokens: dark (system preference unless forced light; and forced dark) ─ */
@media (prefers-color-scheme: dark) {
  :root[data-skin="glass"]:not([data-theme="light"]) {
    --bg: #090c16;
    --surface: rgba(30, 33, 46, 0.68);
    --surface-2: rgba(44, 47, 62, 0.55);
    --surface-3: rgba(255, 255, 255, 0.07);
    --surface-hover: rgba(255, 255, 255, 0.07);
    --surface-selected: rgba(255, 255, 255, 0.13);
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);
    --border-input: rgba(255, 255, 255, 0.26);
    --text: #f2f2f7; --text-2: #c2c2cc; --text-3: #92929e;
    --link: #78b9ff; --focus: #4da3ff;
    --btn-primary: #0a6ad6; --btn-primary-hover: #1a78e6; --btn-primary-text: #ffffff;
    --btn-secondary: rgba(255, 255, 255, 0.10); --btn-secondary-hover: rgba(255, 255, 255, 0.16);
    --glass-fill: rgba(30, 33, 46, 0.68);
    --glass-fill-strong: rgba(34, 37, 52, 0.88);
    --glass-chrome: rgba(26, 29, 42, 0.62);
    --glass-rim: rgba(255, 255, 255, 0.14);
    --glass-rim-low: rgba(0, 0, 0, 0.45);
    --shadow-card: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-low), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
    --shadow-pop: inset 0 1px 0 var(--glass-rim), 0 24px 56px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-modal: inset 0 1px 0 var(--glass-rim), 0 40px 90px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.10);
    --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.12);
    --shadow-primary: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(80, 160, 255, 0.4), 0 6px 18px -6px rgba(10, 106, 214, 0.7);
    --code-bg: rgba(6, 8, 14, 0.9);
    --skeleton: rgba(255, 255, 255, 0.07); --skeleton-shine: rgba(255, 255, 255, 0.13);
    --backdrop: rgba(0, 0, 0, 0.45);
    --blob-1: #1d3f8f; --blob-2: #0d5e5a; --blob-3: #3f2a86; --blob-4: #1a2236;
  }
}
:root[data-skin="glass"][data-theme="dark"] {
  --bg: #090c16;
  --surface: rgba(30, 33, 46, 0.68);
  --surface-2: rgba(44, 47, 62, 0.55);
  --surface-3: rgba(255, 255, 255, 0.07);
  --surface-hover: rgba(255, 255, 255, 0.07);
  --surface-selected: rgba(255, 255, 255, 0.13);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-input: rgba(255, 255, 255, 0.26);
  --text: #f2f2f7; --text-2: #c2c2cc; --text-3: #92929e;
  --link: #78b9ff; --focus: #4da3ff;
  --btn-primary: #0a6ad6; --btn-primary-hover: #1a78e6; --btn-primary-text: #ffffff;
  --btn-secondary: rgba(255, 255, 255, 0.10); --btn-secondary-hover: rgba(255, 255, 255, 0.16);
  --glass-fill: rgba(30, 33, 46, 0.68);
  --glass-fill-strong: rgba(34, 37, 52, 0.88);
  --glass-chrome: rgba(26, 29, 42, 0.62);
  --glass-rim: rgba(255, 255, 255, 0.14);
  --glass-rim-low: rgba(0, 0, 0, 0.45);
  --shadow-card: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-low), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  --shadow-pop: inset 0 1px 0 var(--glass-rim), 0 24px 56px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-modal: inset 0 1px 0 var(--glass-rim), 0 40px 90px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.10);
  --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.12);
  --shadow-primary: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(80, 160, 255, 0.4), 0 6px 18px -6px rgba(10, 106, 214, 0.7);
  --code-bg: rgba(6, 8, 14, 0.9);
  --skeleton: rgba(255, 255, 255, 0.07); --skeleton-shine: rgba(255, 255, 255, 0.13);
  --backdrop: rgba(0, 0, 0, 0.45);
  --blob-1: #1d3f8f; --blob-2: #0d5e5a; --blob-3: #3f2a86; --blob-4: #1a2236;
}

/* ── The colour field ───────────────────────────────────────────────────── */
.glass-canvas { display: none; }
[data-skin="glass"] .glass-canvas {
  display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg);
}
[data-skin="glass"] .glass-canvas span {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(70px); opacity: 0.55; will-change: transform;
  animation: glass-drift 46s var(--spring) infinite alternate;
}
[data-skin="glass"] .glass-canvas span:nth-child(1) { background: var(--blob-1); top: -22vmax; left: -12vmax; }
[data-skin="glass"] .glass-canvas span:nth-child(2) { background: var(--blob-2); bottom: -26vmax; left: 18vw; animation-duration: 58s; animation-delay: -12s; }
[data-skin="glass"] .glass-canvas span:nth-child(3) { background: var(--blob-3); top: -10vmax; right: -20vmax; animation-duration: 52s; animation-delay: -24s; }
[data-skin="glass"] .glass-canvas span:nth-child(4) { background: var(--blob-4); bottom: -18vmax; right: -8vmax; animation-duration: 64s; animation-delay: -6s; opacity: 0.45; }
@keyframes glass-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vw, 4vh, 0) scale(1.08); }
  100% { transform: translate3d(-4vw, 6vh, 0) scale(0.96); }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
[data-skin="glass"] body { font-family: var(--font); font-size: 14px; line-height: 21px; font-weight: 400; letter-spacing: -0.005em; background: var(--bg); }
[data-skin="glass"] .text-heading-lg { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.022em; }
[data-skin="glass"] .page-header .text-heading-lg { font-size: 32px; line-height: 38px; letter-spacing: -0.028em; }
[data-skin="glass"] .text-heading-md { font-size: 17px; line-height: 22px; font-weight: 650; letter-spacing: -0.012em; }
[data-skin="glass"] .text-heading-sm { font-size: 15px; line-height: 20px; font-weight: 650; letter-spacing: -0.01em; }
[data-skin="glass"] :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 10px; }

/* ── Floating chrome ────────────────────────────────────────────────────── */
[data-skin="glass"] .topbar {
  top: 12px; margin: 12px 12px 0; border-radius: 20px; color: var(--text);
  background: var(--glass-chrome); -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong);
  box-shadow: var(--shadow-card);
}
[data-skin="glass"] .topbar .brand { color: var(--text); }
[data-skin="glass"] .topbar-btn { color: var(--text); border-radius: 999px; width: 36px; height: 36px; }
[data-skin="glass"] .topbar-btn:hover { background: var(--surface-hover); }
[data-skin="glass"] .topbar-select, [data-skin="glass"] .embedded-bar .topbar-select {
  background-color: var(--btn-secondary); color: var(--text); border: 0; box-shadow: var(--shadow-btn); border-radius: 999px; height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23808090' d='M10 13.5 6 9.5h8z'/%3E%3C/svg%3E");
}
[data-skin="glass"] .brand-mark { border-radius: 10px; background: linear-gradient(135deg, #5ac8fa, #0a6cff 55%, #8e5cff); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px -4px rgba(10,108,255,.6); }
[data-skin="glass"] .demo-strip {
  margin: 10px 12px 0; border-radius: 14px; background: rgba(255, 214, 10, 0.22); color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(200, 160, 0, 0.35);
}
[data-skin="glass"] .demo-strip .link-btn { color: var(--link); }
[data-skin="glass"] .embedded-bar { background: var(--glass-chrome); border-bottom: 1px solid var(--border); }

[data-skin="glass"] .frame { gap: 12px; padding: 12px; grid-template-columns: 236px minmax(0, 1fr); min-height: calc(100vh - 80px); }
[data-skin="glass"] .frame.no-nav { grid-template-columns: minmax(0, 1fr); }
[data-skin="glass"] .nav {
  top: 92px; height: calc(100vh - 104px); border: 0; border-radius: 22px; padding: 12px 10px;
  background: var(--glass-chrome); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card);
}
[data-skin="glass"] .nav-link { border-radius: 12px; padding: 8px 10px; transition: background .2s var(--spring), transform .2s var(--spring); }
[data-skin="glass"] .nav-link.is-active { background: var(--surface-selected); box-shadow: inset 0 1px 0 var(--glass-rim), 0 1px 3px rgba(20, 30, 60, 0.12); }
[data-skin="glass"] .nav-link.is-active .icon { color: var(--accent); }
[data-skin="glass"] .nav-link .nav-count { border-radius: 999px; background: var(--accent); color: #fff; }
[data-skin="glass"] .page { padding: 20px 12px 48px; }

/* Bottom tab bar: phones only, glass skin only. */
.tabbar { display: none; }
@media (max-width: 768px) {
  [data-skin="glass"] .menu-btn { display: none; }
  [data-skin="glass"] .tabbar {
    display: flex; position: fixed; z-index: 35; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around; gap: 2px; padding: 6px; border-radius: 999px;
    background: var(--glass-chrome); -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong);
    box-shadow: var(--shadow-pop);
  }
  [data-skin="glass"] .tabbar a, [data-skin="glass"] .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 999px;
    border: 0; background: none; font: inherit; font-size: 10.5px; line-height: 13px; font-weight: 600; color: var(--text-2); text-decoration: none;
    position: relative; transition: background .25s var(--spring), color .25s var(--spring);
  }
  [data-skin="glass"] .tabbar .is-active { color: var(--accent); background: var(--surface-selected); }
  [data-skin="glass"] .tabbar .tab-badge { position: absolute; top: 2px; right: calc(50% - 20px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ff3b30; color: #fff; font-size: 10px; line-height: 16px; }
  [data-skin="glass"] .frame { padding: 8px; grid-template-columns: minmax(0, 1fr); }
  [data-skin="glass"] .page { padding: 12px 8px 112px; }
  [data-skin="glass"] .nav {
    top: 80px; left: 12px; right: 12px; bottom: auto; max-height: calc(100vh - 180px); height: auto;
    background: var(--glass-fill-strong);
  }
  [data-skin="glass"] .topbar { margin: 8px 8px 0; top: 8px; }
  [data-skin="glass"] .toast-region { bottom: 96px; }
}

/* ── Surfaces ───────────────────────────────────────────────────────────── */
[data-skin="glass"] .card { background: var(--glass-fill); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
@media (min-width: 900px) {
  /* Cards blur only where there is power to spare; the field is blurred already. */
  [data-skin="glass"] .page > .stack > .card,
  [data-skin="glass"] .page > .stack > .section-card{ -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}
[data-skin="glass"] .card-section { padding: 20px; }
[data-skin="glass"] .card-header { padding: 20px 20px 0; }
[data-skin="glass"] .card-section + .card-section, [data-skin="glass"] .card-footer { border-color: var(--border); }
[data-skin="glass"] .card-subdued, [data-skin="glass"] .card-footer { background: transparent; }
[data-skin="glass"] .section-icon {
  width: 38px; height: 38px; border-radius: 12px; color: var(--accent);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.35)); box-shadow: inset 0 1px 0 var(--glass-rim), 0 0 0 1px var(--border), 0 4px 10px -6px rgba(10, 60, 160, 0.35);
}
@media (prefers-color-scheme: dark) { [data-skin="glass"]:not([data-theme="light"]) .section-icon { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); } }
[data-skin="glass"][data-theme="dark"] .section-icon { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); }

[data-skin="glass"] .modal {
  border-radius: 28px; background: var(--glass-fill-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong); box-shadow: var(--shadow-modal);
}
[data-skin="glass"] .modal-header { background: transparent; border-radius: 28px 28px 0 0; padding: 16px 20px; }
[data-skin="glass"] .modal-body { padding: 20px; }
[data-skin="glass"] .modal-footer { padding: 14px 20px; }
[data-skin="glass"] .backdrop.is-sheet { padding: 12px; }
[data-skin="glass"] .backdrop.is-sheet .modal { border-radius: 28px; height: calc(100vh - 24px); }
[data-skin="glass"] .backdrop.is-sheet .modal-header { border-radius: 28px 28px 0 0; }
@media (max-width: 640px) {
  [data-skin="glass"] .modal { border-radius: 28px 28px 0 0; }
  [data-skin="glass"] .backdrop.is-sheet { padding: 0; }
  [data-skin="glass"] .backdrop.is-sheet .modal { height: 100%; border-radius: 0; }
}
[data-skin="glass"] .popover { border-radius: 22px; background: var(--glass-fill-strong); -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong); }
[data-skin="glass"] .toast {
  border-radius: 999px; padding: 10px 14px 10px 18px; background: rgba(28, 28, 34, 0.84); color: #fff;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 36px -12px rgba(0,0,0,.5);
  animation: glass-pop .35s var(--spring);
}
[data-skin="glass"] .toast.tone-critical { background: rgba(170, 20, 20, 0.88); }
[data-skin="glass"] .save-bar {
  top: 12px; left: 12px; right: 12px; border-radius: 20px; background: rgba(28, 28, 34, 0.82);
  -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong); box-shadow: var(--shadow-pop);
}
[data-skin="glass"] .save-bar .btn { border-radius: 999px; }
@keyframes glass-pop { from { transform: translateY(10px) scale(.96); opacity: 0; } }

/* ── Controls ───────────────────────────────────────────────────────────── */
[data-skin="glass"] .btn {
  border-radius: 999px; min-height: 32px; padding: 6px 15px; font-weight: 590; font-size: 13.5px;
  transition: background .2s var(--spring), transform .18s var(--spring), box-shadow .2s var(--spring);
}
[data-skin="glass"] .btn:active { transform: scale(.96); box-shadow: var(--shadow-btn); }
[data-skin="glass"] .btn.btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--btn-primary) 82%, white), var(--btn-primary)); }
[data-skin="glass"] .btn.btn-primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--btn-primary-hover) 80%, white), var(--btn-primary-hover)); }
[data-skin="glass"] .btn.btn-critical { background: linear-gradient(180deg, #ff4d4d, var(--btn-critical)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -6px rgba(215,0,21,.6); }
[data-skin="glass"] .btn.btn-sm { min-height: 28px; padding: 3px 12px; font-size: 12.5px; }
[data-skin="glass"] .btn.btn-icon { padding: 4px; min-width: 32px; }
[data-skin="glass"] .btn.btn-plain:hover, [data-skin="glass"] .btn.btn-tertiary:hover { background: var(--surface-hover); }
[data-skin="glass"] .badge { border-radius: 999px; padding: 2px 9px; font-weight: 600; }

[data-skin="glass"] .input, [data-skin="glass"] .select, [data-skin="glass"] .textarea {
  border-radius: 12px; background-color: var(--surface-selected); border: 1px solid var(--border-input);
  box-shadow: inset 0 1px 2px rgba(20, 30, 60, 0.06); min-height: 36px; padding: 7px 12px;
  transition: box-shadow .2s var(--spring), border-color .2s var(--spring);
}
[data-skin="glass"] .select { padding-right: 32px; }
[data-skin="glass"] .input:focus-visible, [data-skin="glass"] .select:focus-visible, [data-skin="glass"] .textarea:focus-visible {
  outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 28%, transparent);
}
[data-skin="glass"] .search-field .icon { top: 8px; left: 10px; }
[data-skin="glass"] .search-field .input { padding-left: 36px; }

/* iOS-style switch */
[data-skin="glass"] .switch input { width: 46px; height: 28px; }
[data-skin="glass"] .switch-track { width: 46px; height: 28px; background: rgba(120, 120, 128, 0.32); transition: background .25s var(--spring); }
[data-skin="glass"] .switch-track::after { width: 24px; height: 24px; left: 2px; top: 2px; box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.12); transition: transform .3s var(--spring); }
[data-skin="glass"] .switch input:checked + .switch-track { background: #30c75a; }
[data-skin="glass"] .switch input:checked + .switch-track::after { transform: translateX(18px); }

/* Segmented control with a sliding lens. ui.js positions the lens (--lens-x/--lens-w)
   and starts it where the previous control of the same name left it, so it slides. */
[data-skin="glass"] .segmented {
  position: relative; border-radius: 999px; padding: 3px; gap: 0; background: rgba(120, 120, 140, 0.14);
  box-shadow: inset 0 1px 2px rgba(20, 30, 60, 0.08);
}
[data-skin="glass"] .segmented button { position: relative; z-index: 1; border-radius: 999px; padding: 4px 13px; min-height: 28px; transition: color .25s var(--spring); }
[data-skin="glass"] .segmented.has-lens::before {
  content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: var(--lens-x, 3px); width: var(--lens-w, 0);
  border-radius: 999px; background: var(--surface-selected);
  box-shadow: inset 0 1px 0 var(--glass-rim), 0 2px 8px -2px rgba(20, 30, 60, 0.25), 0 0 0 .5px rgba(20, 30, 60, 0.08);
  transition: left .4s var(--spring), width .4s var(--spring), background .25s;
}
[data-skin="glass"] .segmented.has-lens button[aria-checked="true"],
[data-skin="glass"] .segmented.has-lens button[aria-pressed="true"] { background: transparent; box-shadow: none; }
[data-skin="glass"] .segmented.tone-mode.has-lens[data-lens="on"]::before { background: color-mix(in srgb, #30c75a 26%, var(--surface-selected)); }
[data-skin="glass"] .segmented.tone-mode.has-lens[data-lens="monitor"]::before { background: color-mix(in srgb, #0a84ff 22%, var(--surface-selected)); }
[data-skin="glass"] .segmented.has-lens button[aria-checked="true"] { color: var(--text); }

[data-skin="glass"] .chip { border-radius: 999px; background: var(--surface-2); }
[data-skin="glass"] .chip.is-on { background: color-mix(in srgb, var(--accent) 14%, var(--surface-selected)); box-shadow: 0 0 0 1.5px var(--accent) inset; }

[data-skin="glass"] .tabs { border-bottom-color: var(--border); padding: 10px; gap: 4px; }
[data-skin="glass"] .tab { border-radius: 999px; padding: 6px 14px; transition: background .2s var(--spring); }
[data-skin="glass"] .tab[aria-selected="true"] { background: var(--surface-selected); box-shadow: inset 0 1px 0 var(--glass-rim), 0 1px 4px rgba(20, 30, 60, 0.12); }
[data-skin="glass"] .page-tabs { padding: 0 0 16px; border: 0; }

/* ── Tables & lists (no blur here: these scroll) ────────────────────────── */
[data-skin="glass"] .itable th { background: transparent; color: var(--text-2); font-weight: 600; text-transform: none; border-bottom-color: var(--border); padding: 8px 14px; }
[data-skin="glass"] .itable td { padding: 10px 14px; border-bottom-color: var(--border); }
[data-skin="glass"] .itable tbody tr { transition: background .15s; }
[data-skin="glass"] .itable tbody tr:hover { background: rgba(255, 255, 255, 0.35); }
@media (prefers-color-scheme: dark) { [data-skin="glass"]:not([data-theme="light"]) .itable tbody tr:hover { background: rgba(255, 255, 255, 0.04); } }
[data-skin="glass"][data-theme="dark"] .itable tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
[data-skin="glass"] .bulk-bar { background: transparent; border-bottom-color: var(--border); }
[data-skin="glass"] .bulk-bar.bulk-float {
  position: fixed; z-index: 30; left: 50%; bottom: 24px; transform: translateX(-50%); border: 0; border-radius: 999px;
  padding: 8px 10px 8px 18px; max-width: calc(100vw - 24px);
  background: var(--glass-fill-strong); -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong);
  box-shadow: var(--shadow-pop); animation: glass-pop .35s var(--spring);
}
@media (max-width: 768px) { [data-skin="glass"] .bulk-bar.bulk-float { bottom: 96px; } }

 [data-skin="glass"] .attention-item{
  border-radius: 16px; background: var(--surface-2);
}

[data-skin="glass"] .sticky-actions { background: var(--glass-fill-strong); border-radius: 0 0 22px 22px; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

[data-skin="glass"] .code-block { border-radius: 16px; }
[data-skin="glass"] .code-block .code-copy .btn { border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
[data-skin="glass"] .banner { border-radius: 18px; box-shadow: inset 0 1px 0 var(--glass-rim), 0 0 0 1px var(--border); }
[data-skin="glass"] .banner { background: color-mix(in srgb, var(--info-strong) 10%, var(--glass-fill-strong)); }
[data-skin="glass"] .banner.tone-success { background: color-mix(in srgb, var(--success-strong) 12%, var(--glass-fill-strong)); }
[data-skin="glass"] .banner.tone-warning { background: color-mix(in srgb, var(--warning-strong) 14%, var(--glass-fill-strong)); }
[data-skin="glass"] .banner.tone-critical { background: color-mix(in srgb, var(--critical-strong) 12%, var(--glass-fill-strong)); }
[data-skin="glass"] .icon-tile { border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(0,0,0,.04); }
[data-skin="glass"] .ribbon { background: linear-gradient(90deg, #0a84ff, #5e5ce6); color: #fff; box-shadow: 0 4px 10px -4px rgba(10,132,255,.6); }

/* ── Data viz: glassy tracks, luminous fills ────────────────────────────── */
[data-skin="glass"] .progress { height: 8px; background: rgba(120, 120, 140, 0.16); box-shadow: inset 0 1px 2px rgba(20, 30, 60, 0.12); border-radius: 999px; }
[data-skin="glass"] .progress-fill { --fill: var(--accent); background: linear-gradient(90deg, color-mix(in srgb, var(--fill) 65%, white), var(--fill)); box-shadow: 0 0 10px -1px color-mix(in srgb, var(--fill) 60%, transparent); transition: width .6s var(--spring); }
[data-skin="glass"] .progress.tone-success .progress-fill { --fill: #30c75a; }
[data-skin="glass"] .progress.tone-warning .progress-fill { --fill: #ff9f0a; }
[data-skin="glass"] .progress.tone-critical .progress-fill { --fill: #ff453a; }
[data-skin="glass"] .progress.tone-info .progress-fill { --fill: #0a84ff; }
[data-skin="glass"] .ring .ring-track { stroke: rgba(120, 120, 140, 0.16); }
[data-skin="glass"] .ring .ring-value { filter: drop-shadow(0 0 6px rgba(48, 199, 90, 0.45)); }

/* ── Motion off ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-skin="glass"] *, [data-skin="glass"] *::before, [data-skin="glass"] *::after { animation: none !important; transition: none !important; }
}

/* ── Transparency off: solid surfaces, no field ─────────────────────────── */
:root[data-skin="glass"][data-transparency="reduced"] {
  --glass-fill: #ffffff; --glass-fill-strong: #ffffff; --glass-chrome: #f7f7fa; --surface: #ffffff; --surface-2: #f5f5f8; --surface-selected: #ffffff;
}
:root[data-skin="glass"][data-transparency="reduced"][data-theme="dark"] {
  --glass-fill: #1c1d24; --glass-fill-strong: #1f2028; --glass-chrome: #17181e; --surface: #1c1d24; --surface-2: #24252e; --surface-selected: #2c2d37;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="glass"][data-transparency="reduced"]:not([data-theme="light"]) {
    --glass-fill: #1c1d24; --glass-fill-strong: #1f2028; --glass-chrome: #17181e; --surface: #1c1d24; --surface-2: #24252e; --surface-selected: #2c2d37;
  }
}
[data-skin="glass"][data-transparency="reduced"] .glass-canvas span { display: none; }
[data-skin="glass"][data-transparency="reduced"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (prefers-reduced-transparency: reduce) {
  :root[data-skin="glass"] { --glass-fill: #ffffff; --glass-fill-strong: #ffffff; --glass-chrome: #f7f7fa; --surface: #ffffff; --surface-2: #f5f5f8; --surface-selected: #ffffff; }
  [data-skin="glass"] .glass-canvas span { display: none; }
  [data-skin="glass"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) {
  :root[data-skin="glass"]:not([data-theme="light"]) { --glass-fill: #1c1d24; --glass-fill-strong: #1f2028; --glass-chrome: #17181e; --surface: #1c1d24; --surface-2: #24252e; --surface-selected: #2c2d37; }
}
/* No backdrop-filter support: make panels nearly opaque so text never sits on a busy field. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-skin="glass"] { --glass-fill: rgba(255, 255, 255, 0.93); --glass-chrome: rgba(250, 250, 252, 0.95); --glass-fill-strong: #ffffff; }
  :root[data-skin="glass"][data-theme="dark"] { --glass-fill: rgba(28, 30, 40, 0.95); --glass-chrome: rgba(24, 26, 34, 0.96); --glass-fill-strong: #1f2028; }
}

/* ── v2 ─────────────────────────────────────────────────────────────────── */
:root[data-skin="glass"] { --chart-1: #0a6cff; --chart-2: #12a594; }
@media (prefers-color-scheme: dark) { :root[data-skin="glass"]:not([data-theme="light"]) { --chart-1: #5aa2ff; --chart-2: #3fd4bd; } }
:root[data-skin="glass"][data-theme="dark"] { --chart-1: #5aa2ff; --chart-2: #3fd4bd; }
[data-skin="glass"] .live-strip { background: transparent; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
[data-skin="glass"] .live-card, [data-skin="glass"] .att-thumb, [data-skin="glass"] .macro-item { border-radius: 16px; background: var(--surface-2); }
[data-skin="glass"] .ticket-row { border-radius: 14px; margin: 2px 6px; }
[data-skin="glass"] .ticket-list > li + li { border-top: 0; }
[data-skin="glass"] .ticket-row.is-selected { background: var(--surface-selected); box-shadow: inset 0 1px 0 var(--glass-rim), 0 1px 4px rgba(20, 30, 60, 0.12); }
[data-skin="glass"] .ticket-row.is-waiting:not(.is-selected) { box-shadow: inset 3px 0 0 var(--critical-strong); }
[data-skin="glass"] .ticket-context { background: transparent; }
[data-skin="glass"] .item-card { border-radius: 18px; background: var(--surface-2); }
[data-skin="glass"] .option-row { border-radius: 14px; background: var(--surface-selected); }
[data-skin="glass"] .note-card { border-radius: 16px; }
[data-skin="glass"] .chip-input { border-radius: 12px; background: var(--surface-selected); }
[data-skin="glass"] .input-affix .affix { background: var(--surface-2); }
[data-skin="glass"] .input-affix .affix:first-child { border-radius: 12px 0 0 12px; }
[data-skin="glass"] .input-affix .affix:last-child { border-radius: 0 12px 12px 0; }
[data-skin="glass"] .chart-tip { border-radius: 14px; background: var(--glass-fill-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
[data-skin="glass"] .bar-track { background: rgba(120, 120, 140, 0.16); }
[data-skin="glass"] .bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--chart-1) 65%, white), var(--chart-1)); }
[data-skin="glass"] .funnel .bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--chart-2) 65%, white), var(--chart-2)); }
@media (max-width: 768px) { [data-skin="glass"] .support-list-pane { position: static; max-height: none; } }
[data-skin="glass"] .nav-link .nav-count.is-waiting { background: var(--critical-strong); }
[data-skin="glass"] .ticket-row.is-waiting.wait-info:not(.is-selected) { box-shadow: inset 3px 0 0 var(--info-strong); }
[data-skin="glass"] .ticket-row.is-waiting.wait-warning:not(.is-selected) { box-shadow: inset 3px 0 0 var(--warning-strong); }