/*
  chirovision-ui.css — Level 1 shared design tokens.

  Ship this file at the top of every ChiroVision page. It defines CSS
  custom properties (colors, typography, spacing, radii, shadows) and a
  small set of utility classes (buttons, headings, cards, badges) that
  every page can opt into over time.

  DESIGN PRINCIPLES:
    - Non-invasive: existing styles keep working exactly as they are.
    - Opt-in: to use the tokens on a page, replace old classes with
      cv-* classes on that page. No forced migration.
    - Cascade-friendly: this file loads BEFORE per-page inline <style>,
      so page-specific rules can override tokens when needed.
    - Dark-mode aware: neutrals adapt to prefers-color-scheme; brand
      colors stay constant.
    - Touch-friendly: every interactive class ships with min-height 44pt.

  UPDATE THIS FILE IN ONE PLACE. Every page loads it via
    <link rel="stylesheet" href="chirovision-ui.css">
*/

:root {
    /* ─── Brand color: teal ─── */
    --cv-primary-050: #E6F4F6;
    --cv-primary-100: #C0E4E8;
    --cv-primary-200: #8FD0D8;
    --cv-primary-500: #1E8B99;   /* app teal — default primary */
    --cv-primary-600: #187985;   /* darker teal — hover, header */
    --cv-primary-700: #14727C;
    --cv-primary-800: #0F5B65;

    /* ─── Semantic colors (fixed meaning across the app) ─── */
    --cv-success:      #16A34A;
    --cv-success-050:  #F0FDF4;
    --cv-success-100:  #DCFCE7;
    --cv-warning:      #D4720A;
    --cv-warning-050:  #FEF9EE;
    --cv-warning-100:  #FEF3C7;
    --cv-danger:       #C53030;
    --cv-danger-050:   #FEF2F2;
    --cv-danger-100:   #FEE2E2;
    --cv-info:         #0891B2;
    --cv-info-050:     #ECFEFF;
    --cv-info-100:     #CFFAFE;

    /* ─── Accent (secondary features — Library, Media) ─── */
    --cv-accent:       #7C3AED;
    --cv-accent-050:   #F5F3FF;
    --cv-accent-100:   #EDE9FE;

    /* ─── Neutrals (light mode) ─── */
    --cv-text:         #0F1417;
    --cv-text-muted:   #6B7480;
    --cv-text-subtle:  #A2ADB5;
    --cv-surface:      #FFFFFF;
    --cv-surface-2:    #F7F9FB;
    --cv-surface-3:    #EEF2F5;
    --cv-hairline:     #E2E8ED;
    --cv-hairline-strong: #CFD8DE;

    /* ─── Typography ─── */
    --cv-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Inter", system-ui, sans-serif;
    --cv-font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

    --cv-fs-caption:   12px;
    --cv-fs-body-sm:   13px;
    --cv-fs-body:      15px;
    --cv-fs-body-lg:   16px;
    --cv-fs-h4:        18px;
    --cv-fs-h3:        22px;
    --cv-fs-h2:        28px;
    --cv-fs-h1:        34px;

    --cv-fw-regular:   400;
    --cv-fw-medium:    500;
    --cv-fw-semibold:  600;
    --cv-fw-bold:      700;

    --cv-lh-tight:     1.2;
    --cv-lh-body:      1.5;

    /* ─── Spacing scale (8-based) ─── */
    --cv-space-1:  4px;
    --cv-space-2:  8px;
    --cv-space-3:  12px;
    --cv-space-4:  16px;
    --cv-space-5:  20px;
    --cv-space-6:  24px;
    --cv-space-8:  32px;
    --cv-space-10: 40px;
    --cv-space-12: 48px;
    --cv-space-16: 64px;

    /* ─── Radii ─── */
    --cv-radius-sm:   4px;
    --cv-radius:      8px;
    --cv-radius-lg:   12px;
    --cv-radius-xl:   16px;
    --cv-radius-2xl:  24px;
    --cv-radius-pill: 100px;

    /* ─── Shadows ─── */
    --cv-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --cv-shadow:    0 2px 6px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --cv-shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --cv-shadow-lg: 0 16px 40px -12px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.06);
    --cv-shadow-focus: 0 0 0 3px rgba(24,121,133,0.28);

    /* ─── Motion ─── */
    --cv-ease:     cubic-bezier(0.4, 0, 0.2, 1);
    --cv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --cv-t-fast:   130ms;
    --cv-t-med:    240ms;
    --cv-t-slow:   360ms;
}

/* Dark-mode neutrals. Brand teal stays the same in both themes. */
@media (prefers-color-scheme: dark) {
    :root {
        --cv-text:         #E7ECF0;
        --cv-text-muted:   #8792A0;
        --cv-text-subtle:  #6B7480;
        --cv-surface:      #171C21;
        --cv-surface-2:    #12171B;
        --cv-surface-3:    #0E1216;
        --cv-hairline:     #262D33;
        --cv-hairline-strong: #333D45;
        --cv-shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
        --cv-shadow:    0 2px 6px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
        --cv-shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3);
        --cv-shadow-lg: 0 16px 40px -12px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
    }
}
:root[data-theme="dark"] {
    --cv-text:         #E7ECF0;
    --cv-text-muted:   #8792A0;
    --cv-text-subtle:  #6B7480;
    --cv-surface:      #171C21;
    --cv-surface-2:    #12171B;
    --cv-surface-3:    #0E1216;
    --cv-hairline:     #262D33;
    --cv-hairline-strong: #333D45;
}
:root[data-theme="light"] {
    --cv-text:         #0F1417;
    --cv-text-muted:   #6B7480;
    --cv-text-subtle:  #A2ADB5;
    --cv-surface:      #FFFFFF;
    --cv-surface-2:    #F7F9FB;
    --cv-surface-3:    #EEF2F5;
    --cv-hairline:     #E2E8ED;
    --cv-hairline-strong: #CFD8DE;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   Use like: <button class="cv-btn cv-btn-primary">Save</button>
   Variants: primary | secondary | success | warning | danger | ghost
   Sizes:    default (44pt) | sm (36pt) | lg (52pt)
   ═══════════════════════════════════════════════════════════════════════════ */
.cv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    font-family: var(--cv-font-body);
    font-size: var(--cv-fs-body);
    font-weight: var(--cv-fw-semibold);
    line-height: 1.2;
    letter-spacing: 0.005em;
    color: var(--cv-text);
    background: var(--cv-surface-2);
    border: 1px solid var(--cv-hairline);
    border-radius: var(--cv-radius);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background var(--cv-t-fast) var(--cv-ease),
        border-color var(--cv-t-fast) var(--cv-ease),
        transform 80ms ease,
        box-shadow var(--cv-t-fast) var(--cv-ease);
}
.cv-btn:hover { background: var(--cv-surface-3); }
.cv-btn:active { transform: translateY(1px); }
.cv-btn:focus-visible { outline: none; box-shadow: var(--cv-shadow-focus); }
.cv-btn:disabled, .cv-btn[aria-disabled="true"] {
    opacity: 0.5; cursor: not-allowed;
}

.cv-btn-primary {
    background: var(--cv-primary-500);
    color: #FFFFFF;
    border-color: var(--cv-primary-600);
}
.cv-btn-primary:hover { background: var(--cv-primary-600); border-color: var(--cv-primary-700); }

.cv-btn-secondary {
    background: transparent;
    color: var(--cv-primary-600);
    border-color: var(--cv-primary-500);
}
.cv-btn-secondary:hover { background: var(--cv-primary-050); }

.cv-btn-success {
    background: var(--cv-success);
    color: #FFFFFF;
    border-color: transparent;
}
.cv-btn-success:hover { background: #15803D; }

.cv-btn-warning {
    background: var(--cv-warning);
    color: #FFFFFF;
    border-color: transparent;
}
.cv-btn-warning:hover { background: #B85E08; }

.cv-btn-danger {
    background: var(--cv-danger);
    color: #FFFFFF;
    border-color: transparent;
}
.cv-btn-danger:hover { background: #9B2626; }

.cv-btn-ghost {
    background: transparent;
    color: var(--cv-primary-600);
    border-color: transparent;
}
.cv-btn-ghost:hover { background: var(--cv-primary-050); }

.cv-btn-sm {
    min-height: 36px;
    padding: 6px 12px;
    font-size: var(--cv-fs-body-sm);
    border-radius: var(--cv-radius-sm);
}
.cv-btn-lg {
    min-height: 52px;
    padding: 14px 24px;
    font-size: var(--cv-fs-body-lg);
    border-radius: var(--cv-radius-lg);
}
.cv-btn-block { display: flex; width: 100%; }

/* Button group (adjacent buttons act as a set) */
.cv-btn-group {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   Semantic classes for consistent headings, body, and captions.
   ═══════════════════════════════════════════════════════════════════════════ */
.cv-h1 {
    font-family: var(--cv-font-body);
    font-size: var(--cv-fs-h1);
    font-weight: var(--cv-fw-bold);
    line-height: var(--cv-lh-tight);
    letter-spacing: -0.02em;
    color: var(--cv-text);
    margin: 0;
    text-wrap: balance;
}
.cv-h2 {
    font-family: var(--cv-font-body);
    font-size: var(--cv-fs-h2);
    font-weight: var(--cv-fw-bold);
    line-height: var(--cv-lh-tight);
    letter-spacing: -0.015em;
    color: var(--cv-text);
    margin: 0;
    text-wrap: balance;
}
.cv-h3 {
    font-family: var(--cv-font-body);
    font-size: var(--cv-fs-h3);
    font-weight: var(--cv-fw-semibold);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--cv-text);
    margin: 0;
}
.cv-h4 {
    font-family: var(--cv-font-body);
    font-size: var(--cv-fs-h4);
    font-weight: var(--cv-fw-semibold);
    line-height: 1.3;
    color: var(--cv-text);
    margin: 0;
}
.cv-body {
    font-family: var(--cv-font-body);
    font-size: var(--cv-fs-body);
    font-weight: var(--cv-fw-regular);
    line-height: var(--cv-lh-body);
    color: var(--cv-text);
}
.cv-body-sm {
    font-family: var(--cv-font-body);
    font-size: var(--cv-fs-body-sm);
    font-weight: var(--cv-fw-regular);
    line-height: 1.45;
    color: var(--cv-text);
}
.cv-caption {
    font-family: var(--cv-font-body);
    font-size: var(--cv-fs-caption);
    font-weight: var(--cv-fw-medium);
    line-height: 1.4;
    color: var(--cv-text-muted);
}
.cv-label {
    font-family: var(--cv-font-body);
    font-size: 10px;
    font-weight: var(--cv-fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
    line-height: 1.2;
}
.cv-mono {
    font-family: var(--cv-font-mono);
    font-variant-numeric: tabular-nums;
}
.cv-text-muted { color: var(--cv-text-muted); }
.cv-text-subtle { color: var(--cv-text-subtle); }
.cv-text-success { color: var(--cv-success); }
.cv-text-warning { color: var(--cv-warning); }
.cv-text-danger { color: var(--cv-danger); }
.cv-text-primary { color: var(--cv-primary-600); }

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS & PANELS
   ═══════════════════════════════════════════════════════════════════════════ */
.cv-card {
    background: var(--cv-surface);
    border: 1px solid var(--cv-hairline);
    border-radius: var(--cv-radius-lg);
    box-shadow: var(--cv-shadow-sm);
    padding: var(--cv-space-4);
}
.cv-card-lg { padding: var(--cv-space-6); border-radius: var(--cv-radius-xl); }
.cv-card-elevated { box-shadow: var(--cv-shadow-md); border-color: transparent; }
.cv-card-header {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--cv-space-3);
    padding-bottom: var(--cv-space-3);
    margin-bottom: var(--cv-space-3);
    border-bottom: 1px solid var(--cv-hairline);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGES / PILLS
   ═══════════════════════════════════════════════════════════════════════════ */
.cv-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--cv-radius-pill);
    font-size: 11px;
    font-weight: var(--cv-fw-semibold);
    letter-spacing: 0.02em;
    line-height: 1.3;
    background: var(--cv-surface-3);
    color: var(--cv-text-muted);
    white-space: nowrap;
}
.cv-badge-success { background: var(--cv-success-100); color: var(--cv-success); }
.cv-badge-warning { background: var(--cv-warning-100); color: var(--cv-warning); }
.cv-badge-danger  { background: var(--cv-danger-100);  color: var(--cv-danger); }
.cv-badge-primary { background: var(--cv-primary-100); color: var(--cv-primary-700); }
.cv-badge-accent  { background: var(--cv-accent-100);  color: var(--cv-accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   FORM CONTROLS (minimal — full form components come in Level 3)
   ═══════════════════════════════════════════════════════════════════════════ */
.cv-input, .cv-select, .cv-textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-family: var(--cv-font-body);
    font-size: 16px; /* 16px prevents iOS auto-zoom */
    line-height: 1.4;
    color: var(--cv-text);
    background: var(--cv-surface);
    border: 1px solid var(--cv-hairline-strong);
    border-radius: var(--cv-radius);
    box-sizing: border-box;
    transition: border-color var(--cv-t-fast), box-shadow var(--cv-t-fast);
    -webkit-appearance: none; appearance: none;
}
.cv-input:focus, .cv-select:focus, .cv-textarea:focus {
    outline: none;
    border-color: var(--cv-primary-500);
    box-shadow: var(--cv-shadow-focus);
}
.cv-textarea { min-height: 88px; resize: vertical; }

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES (small set — spacing / layout helpers)
   ═══════════════════════════════════════════════════════════════════════════ */
.cv-stack     { display: flex; flex-direction: column; gap: var(--cv-space-3); }
.cv-stack-sm  { display: flex; flex-direction: column; gap: var(--cv-space-2); }
.cv-stack-lg  { display: flex; flex-direction: column; gap: var(--cv-space-5); }
.cv-row       { display: flex; gap: var(--cv-space-3); align-items: center; }
.cv-row-sm    { display: flex; gap: var(--cv-space-2); align-items: center; }
.cv-row-wrap  { display: flex; gap: var(--cv-space-3); align-items: center; flex-wrap: wrap; }
.cv-spacer    { flex: 1; }

.cv-hidden           { display: none !important; }
.cv-hidden-mobile    { }
.cv-hidden-desktop   { }
@media (max-width: 899px) {
    .cv-hidden-mobile { display: none !important; }
}
@media (min-width: 900px) {
    .cv-hidden-desktop { display: none !important; }
}

.cv-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .cv-btn, .cv-card, .cv-input, .cv-select, .cv-textarea {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Import buttons — Option 01 (full-width stacked)
   Uniform pattern for every imaging tool's Import / Choose Image / Library /
   Print Instructions row. 52pt row height, icon + label + optional caption.
   Two variants for the two background contexts across the app.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stack container — vertical, gap 8px, no external margin so the caller
   controls surrounding spacing. */
.cv-import-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

/* Base row button. Semantic HTML: works on <a>, <button>, or <label>. */
.cv-import-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 130ms ease, transform 100ms ease, border-color 130ms ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    box-sizing: border-box;
}
.cv-import-btn:active { transform: translateY(1px); }
.cv-import-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(24, 121, 133, 0.35);
}
.cv-import-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Left icon slot. Emoji or single character sized to look balanced. */
.cv-import-btn .cv-import-icon {
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
}

/* Optional descriptive text next to the label. */
.cv-import-btn .cv-import-label { flex: 1; }
.cv-import-btn .cv-import-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.72;
    margin-top: 2px;
    letter-spacing: 0.02em;
}

/* ─── Variant A: buttons INSIDE a teal panel (white on teal) ─── */
/* Use these when the section around the buttons has a teal / dark
   background — Cervical, Lumbar, Full Spine, etc. */
.cv-import-btn-primary {
    background: #FFFFFF;
    color: var(--cv-primary-600, #187985);
    border-color: #FFFFFF;
}
.cv-import-btn-primary:hover { background: #F1F5F7; }
.cv-import-btn-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.32);
}
.cv-import-btn-secondary:hover { background: rgba(255, 255, 255, 0.22); }
.cv-import-btn-tertiary {
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.22);
}
.cv-import-btn-tertiary:hover { background: rgba(255, 255, 255, 0.10); }

/* ─── Variant B: buttons on a LIGHT background (solid teal) ─── */
/* Use these when the section around the buttons is white / light gray —
   Overlay Tool's white cards, standalone modals, etc. */
.cv-import-btn-primary-solid {
    background: var(--cv-primary-500, #1E8B99);
    color: #FFFFFF;
    border-color: var(--cv-primary-500, #1E8B99);
}
.cv-import-btn-primary-solid:hover { background: var(--cv-primary-600, #187985); }
.cv-import-btn-secondary-solid {
    background: transparent;
    color: var(--cv-primary-600, #187985);
    border-color: var(--cv-primary-500, #1E8B99);
}
.cv-import-btn-secondary-solid:hover { background: rgba(30, 139, 153, 0.08); }
.cv-import-btn-accent-solid {
    background: #8B5CF6;
    color: #FFFFFF;
    border-color: #8B5CF6;
}
.cv-import-btn-accent-solid:hover { background: #7C4EE0; }

/* Hidden file-input that hides an <input type="file"> while still being
   clickable via its associated <label class="cv-import-btn">. */
.cv-import-file-input {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Deprioritized page-footer utility action (small, muted, centered).
   For things like "Print instructions" that are useful but not primary. */
.cv-utility-footer {
    text-align: center;
    padding: 12px 16px 28px;
}
.cv-utility-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    color: var(--cv-text-muted, #6B7480);
    border: 1px solid var(--cv-hairline, #E2E8ED);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
    -webkit-tap-highlight-color: transparent;
}
.cv-utility-link:hover {
    background: var(--cv-surface-2, #FAF8F3);
    border-color: var(--cv-text-muted, #6B7480);
    color: var(--cv-text, #1B1F24);
}
.cv-utility-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(24, 121, 133, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile tool-panel bottom sheet — Option 01 (segmented)
   Shared framework for imaging tools that need Measure / Values / Pan tabs
   on phones and portrait tablets. Hidden on desktop; the tool's original
   floating panels stay for >= 900px viewports.
   ═══════════════════════════════════════════════════════════════════════════ */
.cv-tp-sheet {
    display: none;
    position: fixed;
    left: 0; right: 0;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    color: #1a1f24;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.22);
    z-index: 9990;
    flex-direction: column;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}
.cv-tp-sheet.expanded { background: rgba(255, 255, 255, 0.98); }

@media (max-width: 899px) {
    .cv-tp-sheet { display: flex !important; }
    /* Hide desktop floating panels + their toggle buttons under 900px so
       the mobile bottom sheet is the single source of truth on phones and
       portrait tablets. Applies to every imaging tool that uses this pattern
       (Cervical, Lumbar, Full Spine, Overlay). */
    .floating-tools-panel,
    .floating-measurements-panel,
    .toggle-tools-btn,
    .toggle-measurements-btn,
    .nav-arrows-panel-1,
    .nav-arrows-panel-2 { display: none !important; }
}

/* Desktop / large tablet: force-hide the entire mobile bottom sheet + its
   children so no per-tool inline style or later cascade can leak it into the
   canvas area. Complements the .cv-tp-sheet base rule with !important so
   nothing overrides it at >= 900px. */
@media (min-width: 900px) {
    .cv-tp-sheet,
    .cv-tp-handle,
    .cv-tp-peek,
    .cv-tp-body,
    .cv-tp-tabs,
    .cv-tp-tab,
    .cv-tp-section,
    .cv-tp-pan,
    .cv-tp-pan-dpad { display: none !important; }
}

.cv-tp-handle {
    padding: 8px 0 4px;
    display: flex; justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    touch-action: manipulation;
}
.cv-tp-handle::before {
    content: "";
    width: 42px; height: 5px;
    background: #c5cdd4;
    border-radius: 100px;
}

.cv-tp-peek {
    padding: 6px 16px 12px;
    display: flex; align-items: center; gap: 8px;
    cursor: pointer;
    flex: 0 0 auto;
    min-height: 40px;
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    border-bottom: 1px solid transparent;
    transition: border-color 260ms;
}
.cv-tp-sheet.expanded .cv-tp-peek { border-bottom-color: #eef1f4; }
.cv-tp-peek-label {
    font-size: 12px; font-weight: 700; color: #1a1f24;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.cv-tp-peek-value {
    font-size: 14px; font-weight: 700; color: #16a34a;
    font-family: ui-monospace, "SF Mono", monospace;
}
.cv-tp-peek-value.flag { color: #d4720a; }
.cv-tp-chev {
    margin-left: auto;
    color: #6b7480; font-size: 12px; font-weight: 700;
    transition: transform 260ms;
}
.cv-tp-sheet.expanded .cv-tp-chev { transform: rotate(180deg); }

.cv-tp-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 12px;
    transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
                padding 300ms cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-overflow-scrolling: touch;
}
.cv-tp-sheet.expanded .cv-tp-body {
    max-height: 62vh;
    overflow-y: auto;
    padding: 8px 12px 20px;
}

/* Segmented tabs at the top of the sheet body */
.cv-tp-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: #F1F5F7;
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 12px;
}
.cv-tp-tab {
    background: transparent;
    border: 0;
    padding: 8px 6px;
    font-family: inherit; font-size: 12px; font-weight: 700;
    color: #6b7480;
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    min-height: 40px;
    transition: background 120ms, color 120ms;
}
.cv-tp-tab:active { background: rgba(0, 0, 0, 0.05); }
.cv-tp-tab.on {
    background: #FFFFFF;
    color: #187985;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Sections switched by segmented tabs */
.cv-tp-section { display: none; }
.cv-tp-section.on { display: block; }

/* Tools grid (Measure section) */
.cv-tp-tools {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.cv-tp-tool {
    background: #F1F5F7;
    border: 1px solid #dfe5e9;
    border-radius: 8px;
    padding: 10px 10px;
    font: inherit; font-size: 12px; font-weight: 600; color: #1a1f24;
    cursor: pointer;
    text-align: left;
    min-height: 44px;
    line-height: 1.25;
    transition: background 120ms, border-color 120ms;
}
.cv-tp-tool:active { background: #e5ecf0; }
.cv-tp-tool.on {
    background: rgba(87, 198, 127, 0.2);
    border-color: rgba(87, 198, 127, 0.5);
    color: #0f6a2f;
}

/* Values list (Values section) */
.cv-tp-measures { display: grid; gap: 2px; }
.cv-tp-measure {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 9px 4px;
    border-bottom: 1px solid #eef1f4;
    font-size: 13px;
}
.cv-tp-measure:last-child { border-bottom: 0; }
.cv-tp-measure-lbl { color: #6b7480; }
.cv-tp-measure-lbl small { color: #a2adb5; font-size: 10px; margin-left: 4px; font-weight: 500; }
.cv-tp-measure-val { color: #1a1f24; font-weight: 700; font-family: ui-monospace, monospace; }
.cv-tp-measure-val.flag { color: #d4720a; }
.cv-tp-measure-val.good { color: #16a34a; }

/* Pan D-pad + optional target selector (Pan section) */
.cv-tp-pan {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 8px 0 16px;
}
.cv-tp-pan-hint {
    font-size: 11px; color: #6b7480; text-align: center;
    letter-spacing: 0.03em;
    margin: 0 0 4px;
}
.cv-tp-pan-target {
    background: #F1F5F7;
    border: 1px solid #dfe5e9;
    border-radius: 100px;
    padding: 4px;
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}
.cv-tp-pan-target button {
    background: transparent; border: 0;
    padding: 6px 14px;
    font: inherit; font-size: 11px; font-weight: 600; color: #6b7480;
    border-radius: 100px;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.cv-tp-pan-target button.on {
    background: #FFFFFF;
    color: #187985;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.cv-tp-pan-dpad {
    display: grid;
    grid-template-areas: ". up ." "left center right" ". down .";
    gap: 6px;
}
.cv-tp-pan-dpad button {
    width: 52px; height: 52px;
    background: rgba(24, 121, 133, 0.12);
    border: 1px solid rgba(24, 121, 133, 0.3);
    color: #187985;
    border-radius: 10px;
    font-family: inherit; font-size: 20px; font-weight: 700;
    cursor: pointer;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 100ms, transform 100ms;
}
.cv-tp-pan-dpad button:active {
    background: rgba(24, 121, 133, 0.22);
    transform: translateY(1px);
}
.cv-tp-pan-dpad button.center {
    grid-area: center;
    background: rgba(87, 198, 127, 0.3);
    border-color: rgba(87, 198, 127, 0.6);
    color: #0f6a2f;
    font-size: 16px;
}
.cv-tp-pan-dpad button.up    { grid-area: up; }
.cv-tp-pan-dpad button.down  { grid-area: down; }
.cv-tp-pan-dpad button.left  { grid-area: left; }
.cv-tp-pan-dpad button.right { grid-area: right; }



/* ═════════════════════════════════════════════════════════════════════
   COMPACT UPPER SECTIONS — X-ray tools only
   Scope: body:has(.xray-container) hits Cervical / Lumbar / Full Spine
   Purpose: put every control on ONE line so the working X-ray area
   isn't pushed off-screen. Desktop only (≥900px) — mobile keeps its
   existing stacked layout for touch target size.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  /* -------- Dashboard header: title + patient controls on ONE row -------- */
  body:has(.xray-container) .dashboard-header {
    padding: 10px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 4px 20px !important;
    align-items: center !important;
    margin-bottom: 0 !important;
  }
  body:has(.xray-container) .dashboard-header h2 {
    font-size: 1.35em !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    grid-column: 1;
    grid-row: 1;
  }
  body:has(.xray-container) .dashboard-header p {
    font-size: 0.82em !important;
    margin: 0 !important;
    opacity: 0.85;
    grid-column: 1;
    grid-row: 2;
  }
  body:has(.xray-container) .patient-controls {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
  }
  body:has(.xray-container) .patient-dropdown-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  body:has(.xray-container) .patient-dropdown-wrapper label {
    margin: 0 !important;
    font-size: 0.88em !important;
    white-space: nowrap !important;
  }
  body:has(.xray-container) .patient-dropdown-wrapper select {
    padding: 6px 10px !important;
    font-size: 0.85em !important;
    max-width: 190px !important;
    min-width: 150px !important;
    width: auto !important;
  }
  body:has(.xray-container) .patient-buttons-wrapper {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
    display: flex !important;
  }
  body:has(.xray-container) .patient-btn {
    padding: 6px 12px !important;
    font-size: 0.8em !important;
    margin: 0 !important;
    width: auto !important;
    min-height: 0 !important;
  }
  body:has(.xray-container) .patient-images-inline {
    margin-left: 4px !important;
    gap: 5px !important;
    align-items: center !important;
    display: flex !important;
  }
  body:has(.xray-container) .patient-images-inline .image-thumb-mini {
    width: 38px !important;
    height: 38px !important;
    padding: 2px !important;
  }
  body:has(.xray-container) .patient-images-inline .thumb-label {
    font-size: 8px !important;
    line-height: 1 !important;
  }
  body:has(.xray-container) .patient-images-inline .thumb-icon {
    font-size: 14px !important;
  }
  body:has(.xray-container) .patient-status {
    /* status message hides in header — surfaces via toast/inline elsewhere */
    display: none !important;
  }

  /* -------- Import X-ray: title + Choose + Library + Opacity on ONE row -------- */
  body:has(.xray-container) .import-section {
    padding: 10px 16px !important;
    margin-top: 10px !important;
    gap: 12px !important;
    align-items: center !important;
  }
  body:has(.xray-container) .import-section-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  body:has(.xray-container) .import-section h3 {
    margin: 0 !important;
    font-size: 0.95em !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    color: white !important;
  }
  body:has(.xray-container) .cv-import-stack {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  body:has(.xray-container) .cv-import-btn {
    padding: 7px 12px !important;
    font-size: 0.82em !important;
    white-space: nowrap !important;
    margin: 0 !important;
    min-height: 34px !important;
    width: auto !important;
    max-width: none !important;
    display: inline-flex !important;
  }
  body:has(.xray-container) .import-section .slider-control {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 1 220px !important;
    margin: 0 !important;
    max-width: 360px !important;
    padding: 0 !important;
  }
  body:has(.xray-container) .import-section .slider-control label {
    white-space: nowrap !important;
    font-size: 0.82em !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: inline-block !important;
    color: white !important;
  }
  body:has(.xray-container) .import-section .slider-control input[type="range"] {
    flex: 1 1 auto !important;
    max-width: none !important;
    margin: 0 !important;
    width: auto !important;
  }
  /* Zoom mount + gallery drop below the horizontal strip — they need vertical room */
  body:has(.xray-container) .import-section #cv-zoom-mount,
  body:has(.xray-container) .import-section .cv-patient-gallery {
    flex-basis: 100% !important;
    margin-top: 8px !important;
    order: 99 !important;
  }
}

/* -------- Universal hover polish — applies at ALL widths -------- */
body:has(.xray-container) .btn,
body:has(.xray-container) .patient-btn,
body:has(.xray-container) .cv-import-btn,
body:has(.xray-container) .image-thumb-mini {
  transition: background 0.18s ease, color 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease,
              border-color 0.18s ease, filter 0.18s ease !important;
}
/* Explicit hovers so every clickable in the upper sections color-shifts */
body:has(.xray-container) .patient-btn.add-patient:hover {
  background: #047857 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(4,120,87,0.35) !important;
}
body:has(.xray-container) .patient-btn.save-database:hover {
  background: #6d28d9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(109,40,217,0.35) !important;
}
/* Save Current View has inline gradient bg — override with a darker gradient */
body:has(.xray-container) #save-view-btn:hover {
  background: linear-gradient(135deg,#d97706,#b45309) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(217,119,6,0.35) !important;
}
body:has(.xray-container) .cv-import-btn.cv-import-btn-primary:hover {
  background: #F1F5F7 !important;
  filter: brightness(1.05);
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
}
body:has(.xray-container) .cv-import-btn.cv-import-btn-secondary:hover {
  background: rgba(255,255,255,0.28) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
}
body:has(.xray-container) .image-thumb-mini:hover {
  background: rgba(255,255,255,0.28) !important;
  border-color: rgba(255,255,255,0.9) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.28) !important;
}


/* ═════════════════════════════════════════════════════════════════════
   WORKFLOW NUMBERING — teaches users the order to click.
   Panel 1 (header): ① Patient · ② Add · ③ Save · ④ Save Current View
   Panel 2 (import): Ⓐ Choose File · Ⓑ Import from Library
   Applies only to Cervical / Lumbar / Full Spine via :has() scope.
   ═════════════════════════════════════════════════════════════════════ */

/* Ensure buttons + label render as inline-flex so the badge sits neatly
   before icon + text without breaking existing widths. */
body:has(.xray-container) .patient-btn,
body:has(.xray-container) .cv-import-btn,
body:has(.xray-container) .patient-dropdown-wrapper label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Shared badge look — solid white pill, dark teal digit, mono type,
   drop shadow so it reads as a physical chip on any button color. */
body:has(.xray-container) .patient-dropdown-wrapper label::before,
body:has(.xray-container) #add-new-patient-btn::before,
body:has(.xray-container) #save-to-database-btn::before,
body:has(.xray-container) #save-view-btn::before,
body:has(.xray-container) .cv-import-btn-primary::before,
body:has(.xray-container) .cv-import-btn-secondary::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.98);
  color: #0e7490;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(14,116,144,0.15);
  margin-right: 2px;
}

/* Step assignments */
body:has(.xray-container) .patient-dropdown-wrapper label::before { content: "1"; }
body:has(.xray-container) #add-new-patient-btn::before            { content: "2"; }
body:has(.xray-container) #save-to-database-btn::before           { content: "3"; }
body:has(.xray-container) #save-view-btn::before                  { content: "4"; }
body:has(.xray-container) .cv-import-btn-primary::before          { content: "A"; }
body:has(.xray-container) .cv-import-btn-secondary::before        { content: "B"; }

/* Hover on the badge sibling doesn't need to change the badge, but a
   subtle lift-with-glow feels intentional. */
body:has(.xray-container) .patient-btn:hover::before,
body:has(.xray-container) .cv-import-btn:hover::before {
  box-shadow: 0 2px 6px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(14,116,144,0.3);
}


/* ═════════════════════════════════════════════════════════════════════
   APPLE VISION / GLASS PREVIEW — Cervical only.
   Activated by <body class="cv-glass-preview">. Scoped to that class so
   Lumbar, Full Spine, and all other pages stay on their current design
   until this preview is approved.

   Design intent (from artifact 6aa45fb7):
   · Frosted glass panels — rgba(20,25,32,0.42) + backdrop blur
   · 0.5px hairline borders — rgba(255,255,255,0.28)
   · Pill controls with pastel accents per role
   · SF Pro type stack, mono for numeric values
   · Header + Import merged into ONE narrower centered panel
   ═════════════════════════════════════════════════════════════════════ */

body.cv-glass-preview {
  background:
    radial-gradient(ellipse at 15% 8%,  rgba(14,116,144,0.30)  0%, transparent 46%),
    radial-gradient(ellipse at 85% 92%, rgba(139,92,246,0.22)  0%, transparent 46%),
    radial-gradient(ellipse at 50% 50%, rgba(34,211,238,0.06)  0%, transparent 60%),
    #0b1220 !important;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif !important;
}

/* ── Combined header + import as ONE narrower glass panel ────────── */
body.cv-glass-preview .dashboard-header,
body.cv-glass-preview .import-section {
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: rgba(20,25,32,0.42) !important;
  border: 0.5px solid rgba(255,255,255,0.28) !important;
  color: #fff !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.20);
}
body.cv-glass-preview .dashboard-header {
  border-radius: 22px 22px 0 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.14) !important;
  padding: 12px 20px !important;
}
body.cv-glass-preview .import-section {
  border-radius: 0 0 22px 22px !important;
  margin-top: 0 !important;
  border-top: none !important;
  padding: 12px 20px !important;
}

/* Text colors on glass */
body.cv-glass-preview .dashboard-header h2 {
  color: #fff !important;
  font-size: 1.1em !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
body.cv-glass-preview .dashboard-header p {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.78em !important;
}
body.cv-glass-preview .patient-dropdown-wrapper label {
  color: rgba(255,255,255,0.9) !important;
}
body.cv-glass-preview .patient-dropdown-wrapper select {
  background: rgba(255,255,255,0.10) !important;
  border: 0.5px solid rgba(255,255,255,0.3) !important;
  color: #fff !important;
  border-radius: 100px !important;
  padding: 6px 14px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.cv-glass-preview .import-section h3 {
  color: #fff !important;
  font-size: 0.85em !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
body.cv-glass-preview .import-section .slider-control label {
  color: rgba(255,255,255,0.9) !important;
}
body.cv-glass-preview .slider-control input[type="range"] {
  accent-color: #a5f3fc !important;
}

/* ── Pill-shaped glass buttons — one look for every button ─────── */
body.cv-glass-preview .patient-btn,
body.cv-glass-preview .cv-import-btn,
body.cv-glass-preview .btn {
  background: rgba(255,255,255,0.14) !important;
  border: 0.5px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
  border-radius: 100px !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  font-size: 0.78em !important;
  min-height: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 4px 12px rgba(0,0,0,0.20) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  transition: all 0.18s ease !important;
  font-family: inherit !important;
}
body.cv-glass-preview .patient-btn:hover,
body.cv-glass-preview .cv-import-btn:hover,
body.cv-glass-preview .btn:hover {
  background: rgba(255,255,255,0.24) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 6px 16px rgba(0,0,0,0.30) !important;
}

/* Pastel accent color per button role — text tint only, no filled bg */
body.cv-glass-preview .patient-btn.add-patient  { color: #a7f3d0 !important; }
body.cv-glass-preview .patient-btn.save-database { color: #ddd6fe !important; }
body.cv-glass-preview #save-view-btn {
  background: rgba(255,181,71,0.18) !important;
  color: #ffe1a3 !important;
  border-color: rgba(255,181,71,0.42) !important;
}
body.cv-glass-preview #save-view-btn:hover {
  background: rgba(255,181,71,0.28) !important;
}
body.cv-glass-preview .cv-import-btn-primary,
body.cv-glass-preview .cv-import-btn-secondary { color: #a5f3fc !important; }

/* ── Numbered badges in glass — solid white → translucent white ── */
body.cv-glass-preview .patient-dropdown-wrapper label::before,
body.cv-glass-preview #add-new-patient-btn::before,
body.cv-glass-preview #save-to-database-btn::before,
body.cv-glass-preview #save-view-btn::before,
body.cv-glass-preview .cv-import-btn-primary::before,
body.cv-glass-preview .cv-import-btn-secondary::before {
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 0.5px rgba(255,255,255,0.35),
    0 1px 3px rgba(0,0,0,0.22) !important;
  text-shadow: none !important;
}

/* ── Patient / Ins Card thumbnails in glass ─────────────────────── */
body.cv-glass-preview .image-thumb-mini {
  background: rgba(255,255,255,0.10) !important;
  border: 0.5px dashed rgba(255,255,255,0.5) !important;
  border-radius: 12px !important;
}
body.cv-glass-preview .image-thumb-mini:hover {
  background: rgba(255,255,255,0.24) !important;
  border-color: rgba(255,255,255,0.85) !important;
}
body.cv-glass-preview .image-thumb-mini .thumb-icon,
body.cv-glass-preview .image-thumb-mini .thumb-label {
  color: #fff !important;
}

/* ── Nav tabs get glass treatment too ───────────────────────────── */
body.cv-glass-preview .nav-buttons-container {
  background: rgba(20,25,32,0.42) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.15) !important;
}
body.cv-glass-preview .nav-button,
body.cv-glass-preview .cv-nav-menu a {
  background: rgba(255,255,255,0.08) !important;
  border: 0.5px solid rgba(255,255,255,0.24) !important;
  color: rgba(255,255,255,0.92) !important;
  border-radius: 100px !important;
  font-weight: 500 !important;
}
body.cv-glass-preview .nav-button:hover,
body.cv-glass-preview .nav-button.active,
body.cv-glass-preview .cv-nav-menu a:hover,
body.cv-glass-preview .cv-nav-menu a.active {
  background: rgba(255,255,255,0.20) !important;
  color: #fff !important;
}

/* ── Floating tool panels → GLASS with pastel accents ───────────── */
body.cv-glass-preview .toggle-tools-btn,
body.cv-glass-preview .toggle-measurements-btn {
  background: rgba(20,25,32,0.42) !important;
  border: 0.5px solid rgba(255,255,255,0.35) !important;
  border-radius: 100px !important;
  padding: 9px 16px 9px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.15) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif !important;
  transform: none !important;
}
body.cv-glass-preview .toggle-tools-btn { color: #a7f3d0 !important; }
body.cv-glass-preview .toggle-measurements-btn { color: #ddd6fe !important; }
body.cv-glass-preview .toggle-tools-btn:hover,
body.cv-glass-preview .toggle-measurements-btn:hover {
  background: rgba(30,35,45,0.55) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}
body.cv-glass-preview .toggle-tools-btn::before,
body.cv-glass-preview .toggle-measurements-btn::before {
  content: "●";
  color: currentColor;
  opacity: 0.85;
  font-size: 6px;
  vertical-align: middle;
  margin-right: 4px;
}

body.cv-glass-preview .floating-tools-panel,
body.cv-glass-preview .floating-measurements-panel {
  background: rgba(20,25,32,0.42) !important;
  border: 0.5px solid rgba(255,255,255,0.28) !important;
  border-radius: 22px !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.20) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  color: rgba(255,255,255,0.94) !important;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif !important;
}
body.cv-glass-preview .floating-tools-header,
body.cv-glass-preview .floating-measurements-header {
  background: transparent !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.14) !important;
  padding: 10px 14px !important;
}
body.cv-glass-preview .floating-tools-header h4 {
  color: #a7f3d0 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}
body.cv-glass-preview .floating-measurements-header h4 {
  color: #ddd6fe !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}
body.cv-glass-preview .floating-tool-btn {
  background: rgba(255,255,255,0.08) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.92) !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-align: left !important;
}
body.cv-glass-preview .floating-tool-btn:hover {
  background: rgba(255,255,255,0.16) !important;
}
body.cv-glass-preview .floating-measurement-item {
  background: rgba(255,255,255,0.04) !important;
  border-left: none !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
}
body.cv-glass-preview .floating-measurement-label {
  color: rgba(255,255,255,0.55) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  font-family: inherit !important;
}
body.cv-glass-preview .floating-measurement-value {
  color: #fff !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
body.cv-glass-preview .floating-measurement-normal {
  color: rgba(255,255,255,0.5) !important;
  font-family: inherit !important;
}
body.cv-glass-preview .panel-hide-btn {
  background: rgba(255,255,255,0.14) !important;
  border: none !important;
  color: rgba(255,255,255,0.9) !important;
  border-radius: 100px !important;
  padding: 3px 9px !important;
  font-size: 10px !important;
  font-family: inherit !important;
}

/* Container safety: prevent horizontal overflow on smaller viewports */
body.cv-glass-preview .patient-controls,
body.cv-glass-preview .patient-buttons-wrapper {
  flex-wrap: wrap !important;
}
body.cv-glass-preview .import-section-left {
  flex-wrap: wrap !important;
}


/* ═════════════════════════════════════════════════════════════════════
   GLASS PREVIEW v2 — pure-black canvas, denser panels, split gallery
   Overrides on top of the earlier cv-glass-preview block. Loading last
   in this file means these rules win specificity ties.
   ═════════════════════════════════════════════════════════════════════ */

/* True black canvas so glass reads crisply, exactly like the artifact */
body.cv-glass-preview {
  background: #000 !important;
}

/* Denser panel surface + darker for readability */
body.cv-glass-preview .dashboard-header,
body.cv-glass-preview .import-section,
body.cv-glass-preview .cv-gallery-panel {
  background: rgba(24,28,36,0.72) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  color: #fff !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.30) !important;
}

/* Combined panel: header + import feel as ONE unit, subtle inner divider */
body.cv-glass-preview .dashboard-header {
  border-bottom: 0.5px solid rgba(255,255,255,0.08) !important;
}

/* Second panel — small, contains only patient's saved thumbnails */
body.cv-glass-preview .cv-gallery-panel {
  max-width: 980px !important;
  margin: 10px auto 0 !important;
  border-radius: 22px !important;
  padding: 10px 20px !important;
}
body.cv-glass-preview .cv-gallery-panel .cv-patient-gallery {
  color: #fff !important;
}
/* Prior-images strip: tighter, thumbnails smaller and darker to match glass */
body.cv-glass-preview .cv-patient-gallery,
body.cv-glass-preview .cv-patient-gallery * {
  color: rgba(255,255,255,0.92);
}
body.cv-glass-preview .cv-patient-gallery .cv-pg-title,
body.cv-glass-preview .cv-patient-gallery h3,
body.cv-glass-preview .cv-patient-gallery h4 {
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.85em !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
body.cv-glass-preview .cv-patient-gallery img,
body.cv-glass-preview .cv-patient-gallery .cv-pg-thumb {
  border-radius: 8px !important;
  border: 0.5px solid rgba(255,255,255,0.15) !important;
  background: rgba(0,0,0,0.5) !important;
}

/* Improved readability: brighter primary text, tighter labels */
body.cv-glass-preview .dashboard-header h2 {
  color: #fff !important;
  font-weight: 700 !important;
}
body.cv-glass-preview .dashboard-header p {
  color: rgba(255,255,255,0.75) !important;
}
body.cv-glass-preview .patient-dropdown-wrapper label,
body.cv-glass-preview .import-section h3,
body.cv-glass-preview .import-section .slider-control label,
body.cv-glass-preview .slider-control label {
  color: rgba(255,255,255,0.94) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
body.cv-glass-preview #opacity-value {
  color: #a5f3fc !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-weight: 700 !important;
}

/* ── Zoom & Pan mount → glass idiom, matches design 01 ─────────── */
body.cv-glass-preview #cv-zoom-mount {
  background: rgba(0,0,0,0.28) !important;
  border: 0.5px solid rgba(255,255,255,0.16) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  color: rgba(255,255,255,0.94) !important;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
body.cv-glass-preview #cv-zoom-mount label {
  color: rgba(255,255,255,0.7) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
body.cv-glass-preview #cv-zoom-mount label b,
body.cv-glass-preview #cv-zoom-mount label span {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.cv-glass-preview #cv-zoom-mount input[type="range"] {
  accent-color: #a5f3fc !important;
  height: 4px !important;
}
body.cv-glass-preview #cv-zoom-mount button,
body.cv-glass-preview #cv-zoom-mount .cv-zoom-btn,
body.cv-glass-preview #cv-zoom-mount .cv-pan-btn {
  background: rgba(255,255,255,0.08) !important;
  border: 0.5px solid rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.92) !important;
  border-radius: 8px !important;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  transition: all 0.18s ease !important;
  padding: 5px 10px !important;
}
body.cv-glass-preview #cv-zoom-mount button:hover,
body.cv-glass-preview #cv-zoom-mount .cv-zoom-btn:hover,
body.cv-glass-preview #cv-zoom-mount .cv-pan-btn:hover {
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
  transform: none !important;
}
body.cv-glass-preview #cv-zoom-mount .cv-pan-btn.center {
  background: rgba(255,255,255,0.14) !important;
}
body.cv-glass-preview #cv-zoom-mount hr,
body.cv-glass-preview #cv-zoom-mount .cv-pan-hint {
  color: rgba(255,255,255,0.5) !important;
  border-color: rgba(255,255,255,0.08) !important;
}


/* ═════════════════════════════════════════════════════════════════════
   GLASS PREVIEW v3 — one-line import row
   Choose X-ray Image · Import from Library · Image Opacity slider
   all live on the SAME horizontal line. Zoom mount drops below.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  body.cv-glass-preview .import-section-left {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  body.cv-glass-preview .import-section h3 {
    flex: 0 0 auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  body.cv-glass-preview .cv-import-stack {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }
  body.cv-glass-preview .import-section .slider-control {
    flex: 1 1 220px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    max-width: 380px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 200px !important;
  }
  body.cv-glass-preview .import-section .slider-control label {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  body.cv-glass-preview .import-section .slider-control input[type="range"] {
    flex: 1 1 auto !important;
    max-width: none !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 100px !important;
  }
  /* Zoom mount takes its own row below, sized to its content only */
  body.cv-glass-preview .import-section #cv-zoom-mount {
    flex-basis: 100% !important;
    order: 99 !important;
    margin-top: 6px !important;
    max-width: 340px !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   GLASS PREVIEW v4 — port of artifact 499d30bc (approved)
   · Rounded nav bar matching panel radius
   · Combined header + import panels at EQUAL heights
   · Zoom & Pan floats centered below the import row (Design 01 style)
   · Gallery panel pushed down to clear the floating card
   ═════════════════════════════════════════════════════════════════════ */

/* --- Nav bar: same 22px rounded panel as everything else --- */
body.cv-glass-preview .nav-buttons-container {
  background: rgba(24,28,36,0.72) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 22px !important;
  padding: 8px 14px !important;
  margin: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.3) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
body.cv-glass-preview .nav-buttons-container::-webkit-scrollbar { display: none !important; }

/* --- Equal-height combined panels (header + import) --- */
@media (min-width: 900px) {
  body.cv-glass-preview .dashboard-header,
  body.cv-glass-preview .import-section {
    min-height: 108px !important;
    display: flex !important;
    align-items: center !important;
    padding: 14px 20px !important;
  }
  body.cv-glass-preview .dashboard-header {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto !important;
    align-items: center !important;
    gap: 6px 20px !important;
  }
}

/* --- Import row: relative, contents centered, room for floating card --- */
body.cv-glass-preview .import-section {
  position: relative !important;
  justify-content: center !important;
}
@media (min-width: 900px) {
  body.cv-glass-preview .import-section-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

/* --- Zoom & Pan floating card, centered on the import row and offset
       DOWN by 120% of its own height so it sits below the panel (matches
       preview exactly). Gallery below is pushed down to clear it. --- */
@media (min-width: 900px) {
  body.cv-glass-preview .import-section #cv-zoom-mount {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) translateY(120%) !important;
    width: 340px !important;
    max-width: 340px !important;
    flex-basis: auto !important;
    order: 0 !important;
    z-index: 5 !important;

    background: rgba(0,0,0,0.55) !important;
    border: 0.5px solid rgba(255,255,255,0.22) !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    color: #fff !important;
    box-shadow:
      0 12px 30px rgba(0,0,0,0.5),
      inset 0 1px 0 rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    font-family: -apple-system, "SF Pro Text", system-ui, sans-serif !important;
  }

  /* Push the gallery panel below the floating Zoom & Pan card */
  body.cv-glass-preview .cv-gallery-panel {
    margin-top: 220px !important;
  }
}

/* --- Style the zoom mount contents in the floating glass idiom --- */
body.cv-glass-preview #cv-zoom-mount .cv-zoom-label,
body.cv-glass-preview #cv-zoom-mount .cv-pan-label {
  color: rgba(255,255,255,0.7) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 0 4px !important;
}
body.cv-glass-preview #cv-zoom-mount .cv-zoom-label b,
body.cv-glass-preview #cv-zoom-mount .cv-pan-label b {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.cv-glass-preview #cv-zoom-mount input[type=range] {
  accent-color: #a5f3fc !important;
  width: 100% !important;
  height: 4px !important;
  margin: 0 0 6px !important;
}
body.cv-glass-preview #cv-zoom-mount .cv-preset-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4px !important;
  margin-bottom: 8px !important;
}
body.cv-glass-preview #cv-zoom-mount .cv-zoom-btn,
body.cv-glass-preview #cv-zoom-mount button.cv-zoom-btn {
  background: rgba(255,255,255,0.08) !important;
  border: 0.5px solid rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.92) !important;
  padding: 5px 0 !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
body.cv-glass-preview #cv-zoom-mount .cv-zoom-btn:hover {
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
  transform: none !important;
}
body.cv-glass-preview #cv-zoom-mount .cv-sep {
  height: 0.5px !important;
  background: rgba(255,255,255,0.14) !important;
  margin: 8px -14px 8px !important;
}
body.cv-glass-preview #cv-zoom-mount .cv-pan-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 32px) !important;
  grid-template-rows: repeat(3, 28px) !important;
  gap: 3px !important;
  justify-content: center !important;
  margin: 4px auto 0 !important;
}
body.cv-glass-preview #cv-zoom-mount .cv-pan-btn {
  background: rgba(255,255,255,0.08) !important;
  border: 0.5px solid rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.92) !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
body.cv-glass-preview #cv-zoom-mount .cv-pan-btn:hover {
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
  transform: none !important;
}
body.cv-glass-preview #cv-zoom-mount .cv-pan-btn.center {
  background: rgba(255,255,255,0.14) !important;
  font-size: 11px !important;
}

/* --- Mobile fallback: keep zoom mount in normal flow, no absolute --- */
@media (max-width: 899px) {
  body.cv-glass-preview .import-section #cv-zoom-mount {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: 340px !important;
    margin: 10px auto 0 !important;
  }
  body.cv-glass-preview .cv-gallery-panel {
    margin-top: 10px !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   GLASS PREVIEW v5 — undo v4 float, keep zoom+pan INSIDE import row
   Eric's fix: only three panels total, less scrolling, zoom lives in
   the Import section, not floating outside it.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Undo v4: Zoom mount is a normal-flow flex child inside .import-section-left,
     centered under the import controls (wraps to its own line via 100% basis). */
  body.cv-glass-preview .import-section #cv-zoom-mount {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    flex-basis: 100% !important;
    order: 99 !important;
    margin: 8px auto 0 !important;
    width: 340px !important;
    max-width: 340px !important;
    /* Keep the dark glass card styling from v4 */
    background: rgba(0,0,0,0.55) !important;
    border: 0.5px solid rgba(255,255,255,0.22) !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    color: #fff !important;
    box-shadow:
      0 8px 24px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    font-family: -apple-system, "SF Pro Text", system-ui, sans-serif !important;
  }

  /* Import row must allow the zoom card to wrap to its own line */
  body.cv-glass-preview .import-section-left {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 10px !important;
  }

  /* Header row auto-heights; drop the artificial 108px min-height */
  body.cv-glass-preview .dashboard-header {
    min-height: 0 !important;
    padding: 14px 20px !important;
  }
  body.cv-glass-preview .import-section {
    min-height: 0 !important;
    padding: 14px 20px !important;
    position: relative !important;
    justify-content: center !important;
  }

  /* Gallery panel sits right below the combined card — no 220px gap */
  body.cv-glass-preview .cv-gallery-panel {
    margin-top: 10px !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   GLASS PREVIEW v6 — remove the Zoom & Pan panel from the layout.
   The zoom module's transform engine stays active in memory (no
   functionality lost) but the UI card is hidden. Reversible in one
   line: delete this rule to bring the panel back.
   ═════════════════════════════════════════════════════════════════════ */
body.cv-glass-preview #cv-zoom-mount {
  display: none !important;
}


/* ═════════════════════════════════════════════════════════════════════
   GLASS PREVIEW v7 — style the floating Zoom & Pan tool as Design 01
   The toggle pill sits top-CENTER of .xray-container, between the two
   existing floating tool buttons (Show Measurement Tools / Show
   Measurements). Cyan accent to distinguish its function.
   ═════════════════════════════════════════════════════════════════════ */

/* Collapsed pill — glass, cyan */
body.cv-glass-preview .cv-toggle-zoom-btn {
  background: rgba(20,25,32,0.42) !important;
  border: 0.5px solid rgba(255,255,255,0.35) !important;
  color: #a5f3fc !important;
  border-radius: 100px !important;
  padding: 9px 16px 9px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.15) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif !important;
}
body.cv-glass-preview .cv-toggle-zoom-btn::before {
  content: "●";
  color: #a5f3fc;
  opacity: 0.85;
  font-size: 6px;
  vertical-align: middle;
  margin-right: 4px;
}
body.cv-glass-preview .cv-toggle-zoom-btn:hover {
  background: rgba(30,35,45,0.55) !important;
  transform: translateX(-50%) translateY(-1px) !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

/* Floating panel — glass card, hairline border, cyan header */
body.cv-glass-preview .cv-floating-zoom-panel {
  background: rgba(20,25,32,0.42) !important;
  border: 0.5px solid rgba(255,255,255,0.28) !important;
  border-radius: 22px !important;
  min-width: 280px !important;
  max-width: 320px !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.20) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  color: rgba(255,255,255,0.94) !important;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif !important;
}
body.cv-glass-preview .cv-floating-zoom-header {
  background: transparent !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.14) !important;
  padding: 10px 14px !important;
}
body.cv-glass-preview .cv-floating-zoom-header .cv-drag-handle {
  color: rgba(255,255,255,0.5) !important;
}
body.cv-glass-preview .cv-floating-zoom-header h4 {
  color: #a5f3fc !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}
body.cv-glass-preview .cv-floating-zoom-header .cv-zoom-hide {
  background: rgba(255,255,255,0.14) !important;
  border: none !important;
  color: rgba(255,255,255,0.9) !important;
  border-radius: 100px !important;
  padding: 3px 9px !important;
  font-size: 10px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
}
body.cv-glass-preview .cv-floating-zoom-header .cv-zoom-hide:hover {
  background: rgba(255,255,255,0.24) !important;
  color: #fff !important;
}

/* Section labels + values inside panel */
body.cv-glass-preview .cv-floating-zoom-panel .cv-zoom-section + .cv-zoom-section {
  border-top-color: rgba(255,255,255,0.14) !important;
}
body.cv-glass-preview .cv-floating-zoom-panel .cv-lbl {
  color: rgba(255,255,255,0.7) !important;
}
body.cv-glass-preview .cv-floating-zoom-panel .cv-lbl b {
  color: #fff !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
}
body.cv-glass-preview .cv-floating-zoom-panel input[type=range] {
  accent-color: #a5f3fc !important;
}
body.cv-glass-preview .cv-floating-zoom-panel .cv-zoom-btn {
  background: rgba(255,255,255,0.08) !important;
  border: 0.5px solid rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.92) !important;
  border-radius: 8px !important;
  font-family: inherit !important;
}
body.cv-glass-preview .cv-floating-zoom-panel .cv-zoom-btn:hover {
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
}
body.cv-glass-preview .cv-floating-zoom-panel .cv-pan-hint {
  color: rgba(255,255,255,0.55) !important;
}
body.cv-glass-preview .cv-floating-zoom-panel .cv-pan-btn {
  background: rgba(255,255,255,0.08) !important;
  border: 0.5px solid rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.92) !important;
  border-radius: 6px !important;
  font-family: inherit !important;
}
body.cv-glass-preview .cv-floating-zoom-panel .cv-pan-btn:hover {
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
}
body.cv-glass-preview .cv-floating-zoom-panel .cv-pan-btn.center {
  background: rgba(255,255,255,0.14) !important;
}


/* ═════════════════════════════════════════════════════════════════════
   GLASS PREVIEW v8 — one-line import row (definitive fix)
   Title · Choose X-ray Image · Import from Library · Image Opacity
   all forced onto a single horizontal line via flex-wrap: nowrap.
   Wins over v5's flex-wrap: wrap because it loads later.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  body.cv-glass-preview .import-section {
    padding: 12px 20px !important;
  }
  body.cv-glass-preview .import-section-left {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    row-gap: 0 !important;
    width: 100% !important;
  }
  body.cv-glass-preview .import-section h3 {
    flex: 0 0 auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    color: #fff !important;
  }
  body.cv-glass-preview .cv-import-stack {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }
  body.cv-glass-preview .cv-import-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    min-height: 0 !important;
  }
  body.cv-glass-preview .import-section .slider-control {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    max-width: 360px !important;
    min-width: 180px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.cv-glass-preview .import-section .slider-control label {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    font-size: 12px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  body.cv-glass-preview .import-section .slider-control input[type="range"] {
    flex: 1 1 auto !important;
    min-width: 80px !important;
    max-width: none !important;
    margin: 0 !important;
    width: auto !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   GLASS PREVIEW v9 — align three top panels + fix bleed + black bg
   1. Nav bar shares the 980px max-width and centered margin of the
      dashboard + gallery panels — all three visually match in size and
      resize together as the browser narrows.
   2. Import row uses justify-content: flex-start with an auto-margin
      pushing opacity right. Overflow:hidden as a safety net so no
      element ever bleeds outside the panel.
   3. Force black background on body + any wrapper (.container /
      .dashboard) that was leaking a white surface underneath.
   ═════════════════════════════════════════════════════════════════════ */

/* Pure black canvas — override any legacy white wrappers */
body.cv-glass-preview,
body.cv-glass-preview .container,
body.cv-glass-preview .dashboard,
body.cv-glass-preview .xray-panel {
  background: transparent !important;
}
body.cv-glass-preview {
  background: #000 !important;
}
body.cv-glass-preview .container {
  padding: 0 !important;
  max-width: none !important;
}

/* All three top panels share the same width and center together */
body.cv-glass-preview .nav-buttons-container,
body.cv-glass-preview .dashboard-header,
body.cv-glass-preview .import-section,
body.cv-glass-preview .cv-gallery-panel {
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: calc(100% - 32px) !important;
  box-sizing: border-box !important;
}
body.cv-glass-preview .nav-buttons-container {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* Header row responsive: wraps controls when narrow */
body.cv-glass-preview .dashboard-header {
  overflow: hidden !important;
}
body.cv-glass-preview .patient-controls {
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}
body.cv-glass-preview .patient-buttons-wrapper {
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}
body.cv-glass-preview .patient-btn {
  flex-shrink: 1 !important;
  min-width: 0 !important;
}

/* Import row: title left, buttons follow, opacity pushed right, ONE line */
@media (min-width: 900px) {
  body.cv-glass-preview .import-section {
    overflow: hidden !important;
  }
  body.cv-glass-preview .import-section-left {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.cv-glass-preview .import-section h3 {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
  body.cv-glass-preview .cv-import-stack {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  body.cv-glass-preview .cv-import-btn {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
  body.cv-glass-preview .import-section .slider-control {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 200px !important;
    min-width: 140px !important;
    max-width: 320px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }
  body.cv-glass-preview .import-section .slider-control label {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  body.cv-glass-preview .import-section .slider-control input[type="range"] {
    flex: 1 1 auto !important;
    min-width: 60px !important;
    max-width: none !important;
    width: auto !important;
  }
}

/* Narrow viewport: allow wrapping so nothing gets crushed */
@media (max-width: 899px) {
  body.cv-glass-preview .import-section-left {
    flex-wrap: wrap !important;
  }
  body.cv-glass-preview .patient-controls,
  body.cv-glass-preview .patient-buttons-wrapper {
    flex-wrap: wrap !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   GLASS PREVIEW v10 — wider panels
   980px was too tight for the header row (Title + Patient dropdown +
   Clear + Add + Save + Save View + Patient thumb + Ins Card thumb).
   Bumped to 1400px so everything fits on one line at typical desktop
   widths; still responsive down to viewport width - 32px on narrower.
   ═════════════════════════════════════════════════════════════════════ */
body.cv-glass-preview .nav-buttons-container,
body.cv-glass-preview .dashboard-header,
body.cv-glass-preview .import-section,
body.cv-glass-preview .cv-gallery-panel {
  max-width: 1400px !important;
}


/* ═════════════════════════════════════════════════════════════════════
   CALENDAR PAGE — glass overrides (Calendar_ChiroVision.html)
   Targets the calendar's own class scheme (.dash, .pn, .ph, .pb, .btn
   variants, .rem-slot, calendar grid cells) so the whole page reads
   the same as Cervical/Lumbar/Full Spine.
   ═════════════════════════════════════════════════════════════════════ */

/* Top dashboard bar (title + Patient DB dropdown) */
body.cv-glass-preview .dash {
  max-width: 1400px !important;
  margin: 12px auto !important;
  width: calc(100% - 32px) !important;
  padding: 14px 20px !important;
  background: rgba(24,28,36,0.72) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 22px !important;
  color: #fff !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
body.cv-glass-preview .dash h2 { color: #fff !important; }
body.cv-glass-preview .dash p { color: rgba(255,255,255,0.72) !important; }
body.cv-glass-preview .dash-r label { color: rgba(255,255,255,0.9) !important; }
body.cv-glass-preview .dash select,
body.cv-glass-preview .dash input {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.3) !important;
  border-radius: 100px !important;
}

/* Panels (Schedule Appointment, Quick Actions, Today's Agenda, This Week) */
body.cv-glass-preview .pn {
  background: rgba(24,28,36,0.72) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 22px !important;
  color: #fff !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  overflow: hidden;
}
body.cv-glass-preview .ph {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.14) !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
}
body.cv-glass-preview .pb {
  color: rgba(255,255,255,0.94) !important;
  padding: 14px 16px !important;
}

/* Form fields inside Schedule Appointment */
body.cv-glass-preview .fg label,
body.cv-glass-preview .rem-slots-h,
body.cv-glass-preview .rem-book {
  color: rgba(255,255,255,0.9) !important;
}
body.cv-glass-preview .fg input,
body.cv-glass-preview .fg select,
body.cv-glass-preview .fg textarea {
  background: rgba(0,0,0,0.35) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.22) !important;
  border-radius: 10px !important;
}
body.cv-glass-preview .fg input::placeholder,
body.cv-glass-preview .fg textarea::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

/* Reminder slots block */
body.cv-glass-preview .rem-slots {
  background: rgba(0,0,0,0.28) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 12px !important;
  color: #fff !important;
}
body.cv-glass-preview .rem-slot {
  background: rgba(255,255,255,0.04) !important;
  border-radius: 8px !important;
}
body.cv-glass-preview .rem-slot.off { opacity: 0.5; }
body.cv-glass-preview .rem-slot select {
  background: rgba(0,0,0,0.4) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.2) !important;
}

/* Type pills (New Patient / Follow-Up / X-Ray / Adjustment / Consult / Rehab)
   Keep their colors but darken text for legibility on their bright backgrounds. */
body.cv-glass-preview .tp .pl {
  filter: brightness(0.92);
}
body.cv-glass-preview .tp .pl.sel {
  filter: brightness(1) drop-shadow(0 0 8px rgba(255,255,255,0.35));
}

/* Buttons — pill glass with per-role accent so they read on black */
body.cv-glass-preview .btn {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.35) !important;
  border-radius: 100px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -1px 0 rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.25) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  padding: 8px 14px !important;
  font-weight: 600 !important;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
body.cv-glass-preview .btn:hover {
  background: rgba(255,255,255,0.24) !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 6px 16px rgba(0,0,0,0.3) !important;
}
/* Accent by role — the four .btn.* variants used across the page */
body.cv-glass-preview .btn.bp  { color: #a5f3fc !important; }                      /* blue → cyan */
body.cv-glass-preview .btn.bg2 { color: #a7f3d0 !important; }                      /* green → mint */
body.cv-glass-preview .btn.bw  {                                                   /* white/warm → amber */
  background: rgba(255,181,71,0.20) !important;
  color: #ffe1a3 !important;
  border-color: rgba(255,181,71,0.5) !important;
}
body.cv-glass-preview .btn.bw:hover { background: rgba(255,181,71,0.32) !important; }

/* Quick Actions panel — header on the .pn is already glass; ensure the
   distinct "buttons on the bottom" the user couldn't read now show. */
body.cv-glass-preview .pn .btn.bbl {
  width: 100%;
  padding: 10px 14px !important;
  font-size: 0.95em !important;
  text-align: center;
}

/* Calendar grid cells + day labels */
body.cv-glass-preview .cg,
body.cv-glass-preview .cd {
  background: rgba(0,0,0,0.28) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.92) !important;
}
body.cv-glass-preview .cd.today {
  border-color: var(--cyan, #a5f3fc) !important;
  box-shadow: inset 0 0 0 1px rgba(165,243,252,0.4);
}
body.cv-glass-preview .cd.oth,
body.cv-glass-preview .cd.dim { color: rgba(255,255,255,0.35) !important; }

/* Appointment blocks retain their category colors but darken for contrast */
body.cv-glass-preview .apt {
  border-radius: 4px !important;
  color: #fff !important;
  filter: brightness(0.9) saturate(1.1);
}


/* ═════════════════════════════════════════════════════════════════════
   BILLING PAGE — glass overrides (CV_Billing_11_.html)
   Targets its own class scheme (.header, .dashboard, .dashboard-header,
   .billing-section, .section-toolbar, .nav-button, .view-tab,
   .btn-* variants, .form-group, .icd-code, .quick-code, modals) so the
   billing surfaces read the same as Cervical/Lumbar/Calendar.
   ═════════════════════════════════════════════════════════════════════ */

/* --- Top logo + nav bar --------------------------------------------- */
body.cv-glass-preview .header {
  background: rgba(24,28,36,0.72) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 22px !important;
  color: #fff !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
body.cv-glass-preview .header .logo-text { color: #a5f3fc !important; }
body.cv-glass-preview .header .logo-text .vision-italic { color: #a7f3d0 !important; }

body.cv-glass-preview .nav-button {
  background: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 0.5px solid rgba(255,255,255,0.22) !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
body.cv-glass-preview .nav-button:hover {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.35) !important;
}
body.cv-glass-preview .nav-button.active {
  background: rgba(167,243,208,0.22) !important;
  color: #a7f3d0 !important;
  border-color: rgba(167,243,208,0.55) !important;
}

/* --- Dashboard container + banner ----------------------------------- */
body.cv-glass-preview .dashboard {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.cv-glass-preview .dashboard-header {
  background: rgba(24,28,36,0.72) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 22px !important;
  color: #fff !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  padding: 20px 25px !important;
}
body.cv-glass-preview .dashboard-header h2 { color: #fff !important; }
body.cv-glass-preview .dashboard-header p  { color: rgba(255,255,255,0.72) !important; }

/* View tabs (New Claim / ALL CV Billing / All Records / Reference / ⚙) */
body.cv-glass-preview .view-tab {
  background: rgba(255,255,255,0.08) !important;
  border: 0.5px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
  border-radius: 100px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
body.cv-glass-preview .view-tab:hover {
  background: rgba(255,255,255,0.18) !important;
}
body.cv-glass-preview .view-tab.active {
  background: rgba(165,243,252,0.20) !important;
  color: #a5f3fc !important;
  border-color: rgba(165,243,252,0.55) !important;
}
body.cv-glass-preview .view-tab.settings-btn:hover {
  background: rgba(255,255,255,0.24) !important;
}

/* --- Content panels (Create New Claim, ledger, records tables) ------ */
body.cv-glass-preview .billing-section {
  background: rgba(24,28,36,0.72) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 22px !important;
  color: #fff !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
body.cv-glass-preview .billing-section h3 {
  color: #a5f3fc !important;
  border-bottom-color: rgba(165,243,252,0.4) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Section toolbar (the teal banner above each subsection) */
body.cv-glass-preview .section-toolbar {
  background: rgba(255,255,255,0.06) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
body.cv-glass-preview .section-toolbar h3 { color: #fff !important; }

body.cv-glass-preview .toolbar-btn {
  background: rgba(255,255,255,0.08) !important;
  border: 0.5px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
  border-radius: 100px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
body.cv-glass-preview .toolbar-btn:hover {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.55) !important;
}
body.cv-glass-preview .toolbar-btn.active,
body.cv-glass-preview .toolbar-btn.tb-primary {
  background: rgba(165,243,252,0.22) !important;
  color: #a5f3fc !important;
  border-color: rgba(165,243,252,0.55) !important;
}
body.cv-glass-preview .toolbar-btn.tb-hcfa {
  background: rgba(59,130,246,0.22) !important;
  color: #bfdbfe !important;
  border-color: rgba(59,130,246,0.5) !important;
}
body.cv-glass-preview .toolbar-divider {
  background: rgba(255,255,255,0.22) !important;
}

/* --- Forms: patient selector, claim form ---------------------------- */
body.cv-glass-preview .form-group label,
body.cv-glass-preview .filter-group label,
body.cv-glass-preview .checkbox-group label {
  color: rgba(255,255,255,0.85) !important;
}
body.cv-glass-preview .form-group input,
body.cv-glass-preview .form-group select,
body.cv-glass-preview .filter-group input,
body.cv-glass-preview .filter-group select {
  background: rgba(0,0,0,0.35) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.22) !important;
  border-radius: 10px !important;
}
body.cv-glass-preview .form-group input::placeholder,
body.cv-glass-preview .form-group select::placeholder,
body.cv-glass-preview .filter-group input::placeholder {
  color: rgba(255,255,255,0.4) !important;
}
body.cv-glass-preview .form-group select:focus,
body.cv-glass-preview .form-group input:focus,
body.cv-glass-preview .filter-group select:focus,
body.cv-glass-preview .filter-group input:focus {
  border-color: rgba(165,243,252,0.7) !important;
  box-shadow: 0 0 0 2px rgba(165,243,252,0.18) !important;
}

body.cv-glass-preview .checkbox-label {
  background: rgba(255,255,255,0.08) !important;
  border: 0.5px solid rgba(255,255,255,0.28) !important;
  color: rgba(255,255,255,0.92) !important;
}
body.cv-glass-preview .checkbox-label:hover {
  background: rgba(165,243,252,0.14) !important;
  border-color: rgba(165,243,252,0.5) !important;
}
body.cv-glass-preview .checkbox-label input[type="checkbox"] { accent-color: #a5f3fc !important; }
body.cv-glass-preview .checkbox-label input[type="checkbox"]:checked + span { color: #a5f3fc !important; }

/* Patient / Ins Card / Ins Back thumbnails */
body.cv-glass-preview .image-thumb {
  background: rgba(0,0,0,0.30) !important;
  border-color: rgba(255,255,255,0.28) !important;
}
body.cv-glass-preview .image-thumb:hover {
  background: rgba(165,243,252,0.10) !important;
  border-color: rgba(165,243,252,0.5) !important;
}
body.cv-glass-preview .image-thumb.has-image { border-color: rgba(167,243,208,0.7) !important; }
body.cv-glass-preview .image-thumb-container label { color: rgba(255,255,255,0.75) !important; }

/* Date filter panel */
body.cv-glass-preview .date-filter-section {
  background: rgba(255,255,255,0.04) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
}

/* --- Buttons: role palette on glass --------------------------------- */
body.cv-glass-preview .btn-primary,
body.cv-glass-preview .btn-success,
body.cv-glass-preview .btn-warning,
body.cv-glass-preview .btn-danger,
body.cv-glass-preview .btn-secondary,
body.cv-glass-preview .btn-info,
body.cv-glass-preview .btn-hcfa,
body.cv-glass-preview .btn-repeat-visit {
  background: rgba(255,255,255,0.14) !important;
  border: 0.5px solid rgba(255,255,255,0.35) !important;
  border-radius: 100px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 4px 12px rgba(0,0,0,0.25) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  color: #fff !important;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
body.cv-glass-preview .btn-primary:hover,
body.cv-glass-preview .btn-success:hover,
body.cv-glass-preview .btn-warning:hover,
body.cv-glass-preview .btn-danger:hover,
body.cv-glass-preview .btn-secondary:hover,
body.cv-glass-preview .btn-info:hover,
body.cv-glass-preview .btn-hcfa:hover,
body.cv-glass-preview .btn-repeat-visit:hover {
  background: rgba(255,255,255,0.24) !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 6px 16px rgba(0,0,0,0.3) !important;
}
body.cv-glass-preview .btn-primary  { color: #a5f3fc !important; }
body.cv-glass-preview .btn-info     { color: #bae6fd !important; }
body.cv-glass-preview .btn-success  { color: #a7f3d0 !important; }
body.cv-glass-preview .btn-warning  {
  background: rgba(255,181,71,0.22) !important;
  color: #ffe1a3 !important;
  border-color: rgba(255,181,71,0.5) !important;
}
body.cv-glass-preview .btn-warning:hover  { background: rgba(255,181,71,0.34) !important; }
body.cv-glass-preview .btn-danger   {
  background: rgba(255,107,107,0.18) !important;
  color: #fecaca !important;
  border-color: rgba(255,107,107,0.5) !important;
}
body.cv-glass-preview .btn-danger:hover   { background: rgba(255,107,107,0.30) !important; }
body.cv-glass-preview .btn-secondary { color: #e2e8f0 !important; }
body.cv-glass-preview .btn-hcfa     {
  background: rgba(59,130,246,0.22) !important;
  color: #bfdbfe !important;
  border-color: rgba(59,130,246,0.55) !important;
}
body.cv-glass-preview .btn-hcfa:hover     { background: rgba(59,130,246,0.35) !important; }
body.cv-glass-preview .btn-repeat-visit {
  background: rgba(167,139,250,0.22) !important;
  color: #ddd6fe !important;
  border-color: rgba(167,139,250,0.55) !important;
}
body.cv-glass-preview .btn-repeat-visit:hover { background: rgba(167,139,250,0.35) !important; }

body.cv-glass-preview .btn-delete-record {
  background: rgba(255,107,107,0.14) !important;
  color: #fecaca !important;
  border: 0.5px solid rgba(255,107,107,0.5) !important;
  border-radius: 100px !important;
}
body.cv-glass-preview .btn-delete-record:hover {
  background: rgba(255,107,107,0.28) !important;
}

body.cv-glass-preview .edit-row-btn {
  background: rgba(165,243,252,0.20) !important;
  color: #a5f3fc !important;
  border: 0.5px solid rgba(165,243,252,0.5) !important;
  border-radius: 100px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
body.cv-glass-preview .edit-row-btn:hover {
  background: rgba(165,243,252,0.32) !important;
}

/* --- Quick CPT / ICD chips ------------------------------------------ */
body.cv-glass-preview .quick-codes-section,
body.cv-glass-preview .icd-section {
  background: rgba(255,255,255,0.04) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 12px !important;
}
body.cv-glass-preview .quick-codes-section > *:first-child { color: #a5f3fc !important; }
body.cv-glass-preview .icd-section-label {
  color: rgba(255,255,255,0.72) !important;
}
body.cv-glass-preview .quick-code,
body.cv-glass-preview .icd-code {
  background: rgba(255,255,255,0.08) !important;
  border: 0.5px solid rgba(255,255,255,0.28) !important;
  color: #fff !important;
  border-radius: 100px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
body.cv-glass-preview .quick-code:hover,
body.cv-glass-preview .icd-code:hover {
  background: rgba(165,243,252,0.18) !important;
  border-color: rgba(165,243,252,0.5) !important;
  color: #a5f3fc !important;
}
body.cv-glass-preview .icd-tooltip {
  background: rgba(0,0,0,0.85) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
}

/* --- Ledger & records tables ---------------------------------------- */
body.cv-glass-preview .ledger-container,
body.cv-glass-preview .service-lines-section {
  background: rgba(0,0,0,0.20) !important;
  border: 0.5px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px !important;
}
body.cv-glass-preview .ledger-table,
body.cv-glass-preview .service-table,
body.cv-glass-preview .edit-service-table {
  color: rgba(255,255,255,0.94) !important;
}
body.cv-glass-preview .ledger-table th,
body.cv-glass-preview .service-table th,
body.cv-glass-preview .edit-service-table th {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.72) !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.14) !important;
}
body.cv-glass-preview .ledger-table td,
body.cv-glass-preview .service-table td,
body.cv-glass-preview .edit-service-table td {
  border-bottom: 0.5px solid rgba(255,255,255,0.06) !important;
}
body.cv-glass-preview .edit-service-table input,
body.cv-glass-preview .edit-service-table select,
body.cv-glass-preview .service-table input,
body.cv-glass-preview .service-table select {
  background: rgba(0,0,0,0.35) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.20) !important;
  border-radius: 6px !important;
}

body.cv-glass-preview #allRecordsBody tr:hover {
  background: rgba(165,243,252,0.10) !important;
}
body.cv-glass-preview #allRecordsBody tr:active {
  background: rgba(165,243,252,0.18) !important;
}

/* Pagination */
body.cv-glass-preview .pagination-controls {
  background: rgba(255,255,255,0.04) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
}
body.cv-glass-preview #recordsInfo { color: rgba(255,255,255,0.72) !important; }
body.cv-glass-preview #pageInfo    { color: #fff !important; }

/* --- Summary cards, status badges, empty states --------------------- */
body.cv-glass-preview .account-summary,
body.cv-glass-preview .summary-card {
  background: rgba(255,255,255,0.06) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  color: #fff !important;
  border-radius: 14px !important;
}
body.cv-glass-preview .summary-card .label { color: rgba(255,255,255,0.72) !important; }
body.cv-glass-preview .summary-card .value { color: #fff !important; }
body.cv-glass-preview .summary-card.balance .value  { color: #a5f3fc !important; }
body.cv-glass-preview .summary-card.paid .value,
body.cv-glass-preview .summary-card.credit .value   { color: #a7f3d0 !important; }
body.cv-glass-preview .summary-card.debit .value,
body.cv-glass-preview .summary-card.danger .value   { color: #fecaca !important; }

body.cv-glass-preview .status-badge.paid    { background: rgba(167,243,208,0.20) !important; color: #a7f3d0 !important; border: 0.5px solid rgba(167,243,208,0.5); }
body.cv-glass-preview .status-badge.injury  { background: rgba(255,181,71,0.20) !important; color: #ffe1a3 !important; border: 0.5px solid rgba(255,181,71,0.5); }
body.cv-glass-preview .status-badge.danger  { background: rgba(255,107,107,0.20) !important; color: #fecaca !important; border: 0.5px solid rgba(255,107,107,0.5); }

body.cv-glass-preview .empty-state {
  color: rgba(255,255,255,0.55) !important;
}
body.cv-glass-preview .empty-state-icon { opacity: 0.4; }

body.cv-glass-preview .info-box {
  background: rgba(165,243,252,0.10) !important;
  border: 0.5px solid rgba(165,243,252,0.30) !important;
  color: #fff !important;
  border-radius: 12px !important;
}

/* --- Modals (Edit Record, HCFA prompt, etc.) ------------------------ */
body.cv-glass-preview .modal-overlay,
body.cv-glass-preview .modal {
  background: rgba(0,0,0,0.62) !important;
}
body.cv-glass-preview .modal-wide,
body.cv-glass-preview .modal-body {
  background: rgba(24,28,36,0.92) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  color: #fff !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}
body.cv-glass-preview .modal-header,
body.cv-glass-preview .edit-record-header {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.14) !important;
}
body.cv-glass-preview .modal-header h3,
body.cv-glass-preview .edit-record-header h3 { color: #fff !important; }
body.cv-glass-preview .modal-close { color: rgba(255,255,255,0.9) !important; }
body.cv-glass-preview .edit-section {
  border-bottom-color: rgba(255,255,255,0.10) !important;
}
body.cv-glass-preview .edit-section-title { color: #a5f3fc !important; }
body.cv-glass-preview .edit-modal-footer  { border-top-color: rgba(255,255,255,0.14) !important; }
body.cv-glass-preview .edit-total-amount  { color: #a5f3fc !important; }
body.cv-glass-preview .modal-footer       { border-top: 0.5px solid rgba(255,255,255,0.14) !important; }

/* --- Settings dropdown ---------------------------------------------- */
body.cv-glass-preview .settings-menu {
  background: rgba(24,28,36,0.92) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}
body.cv-glass-preview .settings-menu button {
  background: transparent !important;
  color: rgba(255,255,255,0.94) !important;
}
body.cv-glass-preview .settings-menu button:hover {
  background: rgba(165,243,252,0.14) !important;
  color: #a5f3fc !important;
}
body.cv-glass-preview .settings-menu button:not(:last-child) {
  border-bottom-color: rgba(255,255,255,0.10) !important;
}

/* --- PIN keypad ----------------------------------------------------- */
body.cv-glass-preview .pin-display {
  background: rgba(0,0,0,0.35) !important;
  border: 0.5px solid rgba(255,255,255,0.20) !important;
  color: #fff !important;
}
body.cv-glass-preview .pin-dot {
  width: 26px !important;
  height: 26px !important;
  border: 2px solid rgba(165,243,252,0.95) !important;
  background: rgba(165,243,252,0.14) !important;
  box-shadow: 0 0 6px rgba(165,243,252,0.35), inset 0 0 4px rgba(165,243,252,0.20) !important;
}
body.cv-glass-preview .pin-dot.filled {
  background: #a5f3fc !important;
  border-color: #a5f3fc !important;
  box-shadow: 0 0 14px rgba(165,243,252,0.85), 0 0 24px rgba(165,243,252,0.5) !important;
}
body.cv-glass-preview .pin-key {
  background: rgba(255,255,255,0.10) !important;
  border: 0.5px solid rgba(255,255,255,0.22) !important;
  color: #fff !important;
  border-radius: 14px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
body.cv-glass-preview .pin-key:hover  { background: rgba(255,255,255,0.20) !important; }
body.cv-glass-preview .pin-key:active { background: rgba(255,255,255,0.30) !important; }
body.cv-glass-preview .pin-key-clear  { color: #fecaca !important; }
body.cv-glass-preview .pin-key-voice  { color: #a7f3d0 !important; }
body.cv-glass-preview .pin-error      { color: #fecaca !important; }

/* --- Fix light-bg containers that were leaking through Glass --------- */
/* .claim-form wraps the New Patient inputs, Diagnosis Codes, Service
   Lines — its default #f8fafc bg was making white text invisible. */
body.cv-glass-preview .claim-form {
  background: rgba(0,0,0,0.24) !important;
  border: 0.5px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px !important;
}
body.cv-glass-preview .claim-form h4 {
  color: #a5f3fc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
body.cv-glass-preview .claim-form label,
body.cv-glass-preview .claim-form .form-group label {
  color: rgba(255,255,255,0.85) !important;
}
body.cv-glass-preview .claim-form input,
body.cv-glass-preview .claim-form select,
body.cv-glass-preview .claim-form textarea {
  background: rgba(0,0,0,0.35) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.22) !important;
  border-radius: 10px !important;
}
body.cv-glass-preview .claim-form input::placeholder,
body.cv-glass-preview .claim-form textarea::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

/* Region-colored ICD chips — override pastel bg with a tinted glass so
   the label stays legible on the dark panel. */
body.cv-glass-preview .icd-section-label {
  color: #fff !important;
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
body.cv-glass-preview .icd-code.cervical {
  background: rgba(59,130,246,0.22) !important;
  color: #bfdbfe !important;
  border: 0.5px solid rgba(59,130,246,0.5) !important;
}
body.cv-glass-preview .icd-code.cervical:hover {
  background: rgba(59,130,246,0.36) !important;
  color: #fff !important;
}
body.cv-glass-preview .icd-code.thoracic {
  background: rgba(167,243,208,0.20) !important;
  color: #a7f3d0 !important;
  border: 0.5px solid rgba(167,243,208,0.5) !important;
}
body.cv-glass-preview .icd-code.thoracic:hover {
  background: rgba(167,243,208,0.34) !important;
  color: #fff !important;
}
body.cv-glass-preview .icd-code.lumbar {
  background: rgba(255,181,71,0.22) !important;
  color: #ffe1a3 !important;
  border: 0.5px solid rgba(255,181,71,0.5) !important;
}
body.cv-glass-preview .icd-code.lumbar:hover {
  background: rgba(255,181,71,0.36) !important;
  color: #fff !important;
}
body.cv-glass-preview .icd-code.injury {
  background: rgba(255,107,107,0.22) !important;
  color: #fecaca !important;
  border: 0.5px solid rgba(255,107,107,0.5) !important;
}
body.cv-glass-preview .icd-code.injury:hover {
  background: rgba(255,107,107,0.36) !important;
  color: #fff !important;
}


/* ═════════════════════════════════════════════════════════════════════
   IMAGE COMPARISON TOOL — glass overrides (index.html)
   The 4-slot uploader was collapsed into a compact strip; also style
   the Treatment Progress Comparison panel to match Cervical/Lumbar.
   ═════════════════════════════════════════════════════════════════════ */

/* Import row (Choose File + Import from Library + Loads into) */
body.cv-glass-preview .cmp-import-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px auto 12px;
  max-width: 1400px;
}
body.cv-glass-preview .cmp-import-btn {
  background: rgba(255,255,255,0.14) !important;
  border: 0.5px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
  border-radius: 100px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 4px 12px rgba(0,0,0,0.25) !important;
  transition: background .18s, transform .18s;
}
body.cv-glass-preview .cmp-import-btn:hover {
  background: rgba(255,255,255,0.22) !important;
  transform: translateY(-1px);
}
body.cv-glass-preview .cmp-import-hint {
  color: rgba(255,255,255,0.72);
  font-size: 0.85em;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(0,0,0,0.28);
  border: 0.5px solid rgba(255,255,255,0.14);
}
body.cv-glass-preview .cmp-import-hint b {
  color: #a5f3fc;
  font-weight: 700;
}

/* Compact 4-slot strip */
body.cv-glass-preview .cmp-slot-strip {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 auto 20px;
  max-width: 1400px;
}
body.cv-glass-preview .cmp-slot {
  position: relative;
  width: 130px;
  min-height: 100px;
  padding: 10px;
  background: rgba(0,0,0,0.30) !important;
  border: 1.5px dashed rgba(255,255,255,0.20) !important;
  border-radius: 14px !important;
  color: #fff !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all .18s;
  overflow: hidden;
}
body.cv-glass-preview .cmp-slot:hover {
  background: rgba(165,243,252,0.10) !important;
  border-color: rgba(165,243,252,0.5) !important;
}
body.cv-glass-preview .cmp-slot.active {
  border-style: solid !important;
  border-color: rgba(165,243,252,0.7) !important;
  background: rgba(165,243,252,0.14) !important;
  box-shadow: 0 0 0 2px rgba(165,243,252,0.20);
}
body.cv-glass-preview .cmp-slot.filled {
  border-style: solid !important;
  border-color: rgba(167,243,208,0.7) !important;
}
body.cv-glass-preview .cmp-slot.active.filled {
  border-color: rgba(165,243,252,0.85) !important;
  box-shadow: 0 0 0 2px rgba(165,243,252,0.25);
}
body.cv-glass-preview .cmp-slot-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.72);
}
body.cv-glass-preview .cmp-slot.active .cmp-slot-num { color: #a5f3fc; }
body.cv-glass-preview .cmp-slot.filled  .cmp-slot-num { color: #a7f3d0; }
body.cv-glass-preview .cmp-slot-preview {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.cv-glass-preview .cmp-slot-preview img,
body.cv-glass-preview .cmp-slot-preview canvas {
  max-width: 100%;
  max-height: 60px;
  border-radius: 6px;
  object-fit: contain;
}
body.cv-glass-preview .cmp-slot:not(.filled) .cmp-slot-preview::before {
  content: '＋';
  font-size: 22px;
  color: rgba(255,255,255,0.28);
  font-weight: 300;
}
body.cv-glass-preview .cmp-slot-status {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
body.cv-glass-preview .cmp-slot.filled .cmp-slot-status { color: #a7f3d0; }

/* Treatment Progress Comparison container */
body.cv-glass-preview .comparison-container {
  background: rgba(24,28,36,0.72) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 22px !important;
  color: #fff !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  padding: 20px !important;
  margin: 0 auto 20px !important;
  max-width: 1400px !important;
}
body.cv-glass-preview .comparison-title {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Phase selector buttons — Image 1 / 2 / 3 / 4 */
body.cv-glass-preview .phase-selector {
  background: rgba(0,0,0,0.28) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 100px !important;
  padding: 4px !important;
}
body.cv-glass-preview .phase-btn {
  background: transparent !important;
  color: rgba(255,255,255,0.72) !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 8px 18px !important;
  font-weight: 700 !important;
  transition: all .18s;
}
body.cv-glass-preview .phase-btn:hover {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}
body.cv-glass-preview .phase-btn.active {
  background: var(--cyan-fill, rgba(165,243,252,0.22)) !important;
  color: #a5f3fc !important;
  box-shadow: inset 0 0 0 0.5px rgba(165,243,252,0.55);
}

/* Progress mini buttons (Normal / 1 / 2 / 3 / 4) */
body.cv-glass-preview .progress-mini-btns {
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,0.28) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 100px !important;
  padding: 4px !important;
}
body.cv-glass-preview .progress-mini-btn {
  background: transparent !important;
  color: rgba(255,255,255,0.72) !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
  font-size: 0.85em !important;
  transition: all .18s;
}
body.cv-glass-preview .progress-mini-btn:hover {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}
body.cv-glass-preview .progress-mini-btn.active {
  background: rgba(165,243,252,0.22) !important;
  color: #a5f3fc !important;
}

/* Comparison split cells */
body.cv-glass-preview .comparison-item {
  background: rgba(0,0,0,0.35) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
  overflow: hidden;
}
body.cv-glass-preview .comparison-label {
  background: rgba(255,255,255,0.06) !important;
  color: #a5f3fc !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.14) !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
}


/* ═════════════════════════════════════════════════════════════════════
   IMAGE OVERLAY TOOL — glass overrides (Image_Overlay_Tool.html)
   Left + right sidebars use .control-section panels + .btn buttons +
   .info-box tiles + .slider-control rows. All were light-tinted; Glass
   was invisible on white. This block matches Cervical/Lumbar.
   ═════════════════════════════════════════════════════════════════════ */

/* Control section panel */
body.cv-glass-preview .control-section {
  background: rgba(24,28,36,0.72) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-left: 3px solid rgba(165,243,252,0.6) !important;
  border-radius: 14px !important;
  color: #fff !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
body.cv-glass-preview .control-section h3 {
  color: #a5f3fc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Buttons inside control-section (Postural Grid, Actions, Reset, etc.) */
body.cv-glass-preview .control-section .btn {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.28) !important;
  border-radius: 100px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 3px 10px rgba(0,0,0,0.25) !important;
  transition: background .18s, transform .18s, box-shadow .18s !important;
}
body.cv-glass-preview .control-section .btn:hover {
  background: rgba(165,243,252,0.18) !important;
  color: #a5f3fc !important;
  border-color: rgba(165,243,252,0.5) !important;
  transform: translateY(-1px) !important;
}
body.cv-glass-preview .control-section .btn.active {
  background: rgba(165,243,252,0.28) !important;
  color: #a5f3fc !important;
  border-color: rgba(165,243,252,0.7) !important;
  box-shadow: 0 0 0 2px rgba(165,243,252,0.22), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
body.cv-glass-preview .control-section .btn.success {
  background: rgba(167,243,208,0.22) !important;
  color: #a7f3d0 !important;
  border-color: rgba(167,243,208,0.55) !important;
}
body.cv-glass-preview .control-section .btn.success:hover {
  background: rgba(167,243,208,0.34) !important;
  color: #fff !important;
}
body.cv-glass-preview .control-section .btn.danger {
  background: rgba(255,107,107,0.20) !important;
  color: #fecaca !important;
  border-color: rgba(255,107,107,0.5) !important;
}
body.cv-glass-preview .control-section .btn.danger:hover {
  background: rgba(255,107,107,0.34) !important;
  color: #fff !important;
}

/* Sliders */
body.cv-glass-preview .slider-control label {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 600 !important;
}
body.cv-glass-preview .slider-control label span {
  color: #a5f3fc !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
}
body.cv-glass-preview .slider-control input[type="range"] {
  background: rgba(255,255,255,0.14) !important;
  accent-color: #a5f3fc !important;
}
body.cv-glass-preview .slider-control input[type="range"]::-webkit-slider-thumb {
  background: #a5f3fc !important;
  box-shadow: 0 0 8px rgba(165,243,252,0.6);
}
body.cv-glass-preview .slider-control input[type="range"]::-moz-range-thumb {
  background: #a5f3fc !important;
  box-shadow: 0 0 8px rgba(165,243,252,0.6);
}

/* Info boxes (Active Grid / Grid Color / Grid Spacing) */
body.cv-glass-preview .info-box {
  background: rgba(0,0,0,0.32) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-left: 3px solid rgba(165,243,252,0.6) !important;
  border-radius: 10px !important;
}
body.cv-glass-preview .info-label {
  color: #a5f3fc !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72em !important;
}
body.cv-glass-preview .info-value {
  color: #fff !important;
  font-weight: 600 !important;
}

/* Floating Grid Templates dock (bottom center) */
body.cv-glass-preview .floating-grid-btn {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.28) !important;
  border-radius: 100px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
body.cv-glass-preview .floating-grid-btn:hover {
  background: rgba(165,243,252,0.20) !important;
  color: #a5f3fc !important;
  border-color: rgba(165,243,252,0.55) !important;
}
body.cv-glass-preview .floating-grid-btn.active {
  background: rgba(165,243,252,0.28) !important;
  color: #a5f3fc !important;
  border-color: rgba(165,243,252,0.7) !important;
  box-shadow: 0 0 0 2px rgba(165,243,252,0.22);
}


/* ═════════════════════════════════════════════════════════════════════
   RANGE OF MOTION — glass overrides (Range_of_Motion.html)
   Kill the empty second row of the comparison grid (Image 3 & 4 were
   removed), enlarge legend range numbers, restyle the big 2-slot strip
   for direct clicks, fix the voice-command panel legibility.
   ═════════════════════════════════════════════════════════════════════ */

/* Comparison grid — was 2×2, now a single row of 2 */
body.cv-glass-preview .comparison-grid {
  grid-template-rows: auto !important;
}
body.cv-glass-preview .comparison-scroll-wrapper {
  min-height: 0 !important;
}
body.cv-glass-preview .comparison-item {
  background: rgba(0,0,0,0.35) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: none !important;
}

/* ROM Color Guide — legend items and range numbers */
body.cv-glass-preview .rom-legend,
body.cv-glass-preview .rom-reference {
  background: rgba(24,28,36,0.72) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
  color: #fff !important;
  backdrop-filter: blur(20px) saturate(180%);
}
body.cv-glass-preview .rom-legend h4,
body.cv-glass-preview .rom-reference h5 {
  color: #a5f3fc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
body.cv-glass-preview .legend-item {
  background: rgba(255,255,255,0.06) !important;
  border: 0.5px solid rgba(255,255,255,0.14);
  padding: 10px 8px !important;
  gap: 8px !important;
}
body.cv-glass-preview .legend-text {
  font-size: 0.95em !important;
  white-space: normal !important;
  overflow: visible !important;
  color: #fff !important;
}
body.cv-glass-preview .legend-text div:first-child {
  font-size: 0.95em !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}
body.cv-glass-preview .legend-range {
  font-size: 0.92em !important;
  font-weight: 700 !important;
  color: #ffe1a3 !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.02em;
  opacity: 1 !important;
}
body.cv-glass-preview .legend-color {
  width: 34px !important;
  height: 34px !important;
  border-color: rgba(255,255,255,0.35) !important;
}

/* Big directly-clickable 2-slot strip */
body.cv-glass-preview .cmp-slot-strip-big {
  gap: 16px !important;
  padding: 0 20px;
  margin-bottom: 24px !important;
}
body.cv-glass-preview .cmp-slot-wrap {
  position: relative;
  flex: 1 1 260px;
  max-width: 480px;
  display: flex;
}
body.cv-glass-preview .cmp-slot-big {
  width: 100% !important;
  min-height: 170px !important;
  padding: 18px !important;
  cursor: pointer !important;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* Transparent overlay that covers the whole slot and opens the file picker on tap. */
body.cv-glass-preview .cmp-slot-input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 2;
  display: block !important;   /* iOS won't fire display:none inputs */
  font-size: 100px;             /* big hit box (belt + braces) */
  color: transparent;
}
body.cv-glass-preview .cmp-slot-big .cmp-slot-num {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: rgba(255,255,255,0.92) !important;
}
body.cv-glass-preview .cmp-slot-big.active .cmp-slot-num,
body.cv-glass-preview .cmp-slot-big:hover  .cmp-slot-num { color: #a5f3fc !important; }
body.cv-glass-preview .cmp-slot-big.filled .cmp-slot-num { color: #a7f3d0 !important; }
body.cv-glass-preview .cmp-slot-big .cmp-slot-preview {
  min-height: 70px !important;
  width: 100%;
  padding: 6px;
}
body.cv-glass-preview .cmp-slot-big .cmp-slot-preview img,
body.cv-glass-preview .cmp-slot-big .cmp-slot-preview canvas {
  max-height: 90px !important;
}
body.cv-glass-preview .cmp-slot-big:not(.filled) .cmp-slot-preview::before {
  font-size: 34px !important;
  color: rgba(255,255,255,0.35) !important;
}
body.cv-glass-preview .cmp-slot-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
body.cv-glass-preview .cmp-slot-big.filled .cmp-slot-hint { display: none; }
body.cv-glass-preview .cmp-slot-wrap .cmp-slot-lib {
  position: absolute !important;
  top: 10px;
  right: 10px;
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: rgba(139,92,246,0.22) !important;
  color: #ddd6fe !important;
  border: 0.5px solid rgba(139,92,246,0.5) !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  z-index: 3;
}
body.cv-glass-preview .cmp-slot-wrap .cmp-slot-lib:hover {
  background: rgba(139,92,246,0.36) !important;
  color: #fff !important;
}

/* Voice-command panel — restore legibility on Glass */
body.cv-glass-preview .voice-command-list {
  background: rgba(20,25,32,0.94) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
body.cv-glass-preview .voice-command-list h3 {
  color: #a5f3fc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  font-size: 1.15em !important;
}
body.cv-glass-preview .voice-command-list p {
  color: rgba(255,255,255,0.72) !important;
}
body.cv-glass-preview .voice-command-list ul { color: #fff !important; }
body.cv-glass-preview .voice-command-list li {
  color: rgba(255,255,255,0.92) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
body.cv-glass-preview .voice-command-list .command {
  color: #a5f3fc !important;
  background: rgba(165,243,252,0.10);
  padding: 2px 8px;
  border-radius: 6px;
}
body.cv-glass-preview .voice-command-list .description {
  color: rgba(255,255,255,0.72) !important;
}
body.cv-glass-preview .voice-command-list .close-btn {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.28) !important;
  border-radius: 100px !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 20px !important;
}
body.cv-glass-preview .voice-command-list .close-btn:hover {
  background: rgba(255,107,107,0.22) !important;
  color: #fecaca !important;
  border-color: rgba(255,107,107,0.5) !important;
}
body.cv-glass-preview .voice-status {
  background: rgba(20,25,32,0.94) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
}

/* ROM Quick Reference cards (C-Flex L: 0-45° etc.) — bigger, readable numbers */
body.cv-glass-preview .rom-card {
  background: rgba(255,255,255,0.06) !important;
  border: 0.5px solid rgba(255,255,255,0.20) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
}
body.cv-glass-preview .rom-card.active {
  border-color: rgba(165,243,252,0.7) !important;
  background: rgba(165,243,252,0.14) !important;
  box-shadow: 0 0 0 2px rgba(165,243,252,0.22);
}
body.cv-glass-preview .rom-card-title {
  color: #a5f3fc !important;
  font-size: 1.05em !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}
body.cv-glass-preview .rom-card-range {
  font-size: 1em !important;
  color: #fff !important;
  line-height: 1.7 !important;
}
body.cv-glass-preview .rom-card-range > div {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 600;
  letter-spacing: 0.01em;
}
body.cv-glass-preview .rom-card-range .range-label {
  color: rgba(255,255,255,0.72) !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 700 !important;
  margin-right: 4px;
}

/* Yellow Tips box at the bottom of the voice command list — was yellow-on-yellow */
body.cv-glass-preview .voice-command-list > div[style*="background"][style*="fef"],
body.cv-glass-preview .voice-command-list > div[style*="background: #fef"],
body.cv-glass-preview .voice-command-list .tips-box {
  background: rgba(255,181,71,0.14) !important;
  border: 0.5px solid rgba(255,181,71,0.5) !important;
  color: #ffe1a3 !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
}
body.cv-glass-preview .voice-command-list ul + div,
body.cv-glass-preview .voice-command-list [style*="background:#fef"],
body.cv-glass-preview .voice-command-list [style*="background: #fef3c7"],
body.cv-glass-preview .voice-command-list [style*="background:#fef3c7"] {
  background: rgba(255,181,71,0.14) !important;
  color: #ffe1a3 !important;
  border-radius: 12px !important;
  border: 0.5px solid rgba(255,181,71,0.5) !important;
}
body.cv-glass-preview .voice-command-list strong { color: #fff !important; }

/* The specific Tips box inside the voice command panel */
body.cv-glass-preview .voice-tips-box {
  background: rgba(255,181,71,0.14) !important;
  border-left: 4px solid #ffe1a3 !important;
  color: #ffe1a3 !important;
  border-radius: 12px !important;
}
body.cv-glass-preview .voice-tips-box strong { color: #fff !important; }
body.cv-glass-preview .voice-tips-box li { color: rgba(255,255,255,0.92) !important; }

/* ═════════════════════════════════════════════════════════════════════
   ROM OVERLAY PRESETS — Sector + Target vs Actual toggles + slider
   ═════════════════════════════════════════════════════════════════════ */
body.cv-glass-preview .rom-overlay-controls {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  background: rgba(0,0,0,0.32) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-left: 3px solid rgba(165,243,252,0.6) !important;
  border-radius: 12px !important;
}
body.cv-glass-preview .rom-overlay-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.cv-glass-preview .rom-overlay-title {
  color: #a5f3fc !important;
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 4px;
}
body.cv-glass-preview .rom-overlay-toggle {
  padding: 6px 12px !important;
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.28) !important;
  border-radius: 100px !important;
  font-size: 0.85em !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
body.cv-glass-preview .rom-overlay-toggle:hover {
  background: rgba(165,243,252,0.18) !important;
  color: #a5f3fc !important;
  border-color: rgba(165,243,252,0.5) !important;
}
body.cv-glass-preview .rom-overlay-toggle.active {
  background: rgba(165,243,252,0.28) !important;
  color: #a5f3fc !important;
  border-color: rgba(165,243,252,0.7) !important;
  box-shadow: 0 0 0 2px rgba(165,243,252,0.20);
}
body.cv-glass-preview .rom-overlay-off {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.55) !important;
}
body.cv-glass-preview .rom-overlay-off.active {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
}
body.cv-glass-preview .rom-overlay-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
body.cv-glass-preview .rom-overlay-slider-row label {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.8em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
}
body.cv-glass-preview .rom-overlay-slider-row input[type="range"] {
  flex: 1;
  min-width: 120px;
  accent-color: #a5f3fc;
  background: rgba(255,255,255,0.14) !important;
}
body.cv-glass-preview .rom-overlay-live {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  color: #a5f3fc !important;
  min-width: 44px;
  text-align: right;
  font-size: 0.95em;
}
body.cv-glass-preview .rom-overlay-zone {
  padding: 3px 10px !important;
  border-radius: 100px !important;
  border: 0.5px solid;
  font-size: 0.72em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em;
  background: rgba(0,0,0,0.35);
}
body.cv-glass-preview .rom-overlay-target-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.8em !important;
}
body.cv-glass-preview .rom-overlay-target-label input[type="number"] {
  width: 54px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.35) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.22) !important;
  border-radius: 6px !important;
  font-family: ui-monospace, monospace;
  font-size: 0.95em;
}

/* Ensure the image wrapper is a positioned container so the SVG overlay lands on it */
body.cv-glass-preview .image-wrapper {
  position: relative !important;
}
body.cv-glass-preview .rom-overlay-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* ═════════════════════════════════════════════════════════════════════
   X-RAY OVERLAY CONTROLS — Cervical + Lumbar togglable presets
   ═════════════════════════════════════════════════════════════════════ */
body.cv-glass-preview .cv-xray-overlay-controls {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin: 0 auto 12px;
  max-width: 1400px;
  background: rgba(24,28,36,0.72) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-left: 3px solid rgba(165,243,252,0.6) !important;
  border-radius: 14px !important;
  color: #fff !important;
  backdrop-filter: blur(20px) saturate(180%);
}
body.cv-glass-preview .cv-xray-overlay-title {
  color: #a5f3fc !important;
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 4px;
}
body.cv-glass-preview .cv-xray-overlay-toggle {
  padding: 6px 12px !important;
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.28) !important;
  border-radius: 100px !important;
  font-size: 0.85em !important;
  font-weight: 600 !important;
  cursor: pointer;
  font-family: inherit;
  transition: background .18s, color .18s, border-color .18s;
}
body.cv-glass-preview .cv-xray-overlay-toggle:hover {
  background: rgba(165,243,252,0.18) !important;
  color: #a5f3fc !important;
  border-color: rgba(165,243,252,0.5) !important;
}
body.cv-glass-preview .cv-xray-overlay-toggle.active {
  background: rgba(165,243,252,0.28) !important;
  color: #a5f3fc !important;
  border-color: rgba(165,243,252,0.7) !important;
  box-shadow: 0 0 0 2px rgba(165,243,252,0.20);
}
body.cv-glass-preview .cv-xray-overlay-off {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.55) !important;
}
body.cv-glass-preview .cv-xray-overlay-off.active {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
}
body.cv-glass-preview .cv-xray-overlay-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 320px;
  min-width: 260px;
  flex-wrap: wrap;
}
body.cv-glass-preview .cv-xray-overlay-label {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.8em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
}
body.cv-glass-preview .cv-xray-overlay-slider {
  flex: 1;
  min-width: 100px;
  accent-color: #a5f3fc;
  background: rgba(255,255,255,0.14) !important;
}
body.cv-glass-preview .cv-xray-overlay-live {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  color: #a5f3fc !important;
  min-width: 56px;
  text-align: right;
  font-size: 0.95em;
}
body.cv-glass-preview .cv-xray-overlay-zone {
  padding: 3px 10px !important;
  border-radius: 100px !important;
  border: 0.5px solid;
  font-size: 0.72em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em;
  background: rgba(0,0,0,0.35);
}
body.cv-glass-preview .cv-xray-overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
body.cv-glass-preview .cv-xray-flip-btn {
  padding: 6px 12px !important;
  background: rgba(139,92,246,0.20) !important;
  color: #ddd6fe !important;
  border: 0.5px solid rgba(139,92,246,0.5) !important;
  border-radius: 100px !important;
  font-family: inherit;
  font-size: 0.85em !important;
  font-weight: 700 !important;
  cursor: pointer;
  margin-left: 4px;
  transition: background .18s, color .18s, border-color .18s;
}
body.cv-glass-preview .cv-xray-flip-btn:hover {
  background: rgba(139,92,246,0.34) !important;
  color: #fff !important;
}
body.cv-glass-preview .cv-xray-flip-btn.active {
  background: rgba(139,92,246,0.44) !important;
  color: #fff !important;
  border-color: rgba(221,214,254,0.85) !important;
  box-shadow: 0 0 0 2px rgba(139,92,246,0.25);
}
body.cv-glass-preview .cv-xray-reset-btn {
  padding: 6px 12px !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.35) !important;
  border-radius: 100px !important;
  font-family: inherit;
  font-size: 0.85em !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background .18s;
}
body.cv-glass-preview .cv-xray-reset-btn:hover {
  background: rgba(255,255,255,0.16) !important;
}
body.cv-glass-preview .cv-xray-disc-sliders {
  display: none;
  grid-template-columns: 76px 1fr 48px;
  gap: 6px 12px;
  align-items: center;
  padding: 8px 14px 4px;
  margin-top: 6px;
  border-top: 0.5px dashed rgba(255,255,255,0.14);
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}
body.cv-glass-preview .cv-xray-disc-lbl {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  color: #fff;
}
body.cv-glass-preview .cv-xray-disc-slider {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.16) !important;
  border-radius: 100px;
}
body.cv-glass-preview .cv-xray-disc-live {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  text-align: right;
}

/* ═════════════════════════════════════════════════════════════════════
   LEGACY ANIME · Effect on Disc — video modal
   Toggle-open modal with full HTML5 controls + loop toggle.  Video files
   live under /videos/ next to the tool HTML.
   ═════════════════════════════════════════════════════════════════════ */
body.cv-glass-preview .cv-legacy-btn {
  padding: 10px 18px;
  background: rgba(139,92,246,0.20);
  color: #ddd6fe;
  border: 0.5px solid rgba(139,92,246,0.5);
  border-radius: 100px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .18s, transform .18s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
body.cv-glass-preview .cv-legacy-btn:hover {
  background: rgba(139,92,246,0.34);
  color: #fff;
  transform: translateY(-1px);
}
body.cv-glass-preview .cv-legacy-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(3px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
body.cv-glass-preview .cv-legacy-modal.open { display: flex; }
body.cv-glass-preview .cv-legacy-content {
  background: rgba(20,25,32,0.96);
  backdrop-filter: blur(28px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 14px;
  max-width: 900px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
body.cv-glass-preview .cv-legacy-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
body.cv-glass-preview .cv-legacy-title {
  color: #a5f3fc;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1;
}
body.cv-glass-preview .cv-legacy-loop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(167,243,208,0.20);
  color: #a7f3d0;
  border: 0.5px solid rgba(167,243,208,0.55);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
body.cv-glass-preview .cv-legacy-loop input {
  accent-color: #a7f3d0;
}
body.cv-glass-preview .cv-legacy-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 0.5px solid rgba(255,255,255,0.28);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
body.cv-glass-preview .cv-legacy-close:hover {
  background: rgba(255,107,107,0.22);
  color: #fecaca;
  border-color: rgba(255,107,107,0.5);
}