/* =============================================================================
   crm-glass.css — restrained glass surface system for amgcrm.in
   -----------------------------------------------------------------------------
   Layered on top of style.css / crm-premium.css / crm-dark.css on every page.
   Design intent (see the session's design brief):
     · Glass is a MATERIAL for chrome — cards, filter bar, drawer, modals,
       menus — never for data. Tables stay opaque and crisp.
     · One imaginary light source: upper-left. Top/left edges catch light,
       shadows fall down-right, blooms sit top-left / bottom-right.
     · Four material levels (L0 canvas, L1 card, L2 floating chrome,
       L3 dialog). Blur budget is capped: no nested blur, no animated blur.
     · Motion: fast, transform/opacity only, one easing vocabulary, and
       view-transitions for the stage/page swaps so nothing "jumps".
   Every selector is prefixed with `html` so it outranks the pages' own
   inline rules at equal class specificity without !important.
   ============================================================================= */

/* ------------------------------------------------------------------------- */
/* 0. TOKENS                                                                  */
/* ------------------------------------------------------------------------- */
html {
    /* glass material */
    --glass-blur-sm: 12px;
    --glass-blur-md: 18px;
    --glass-blur-lg: 26px;
    --glass-sat: 130%;
    --g1-bg: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .66));
    --g2-bg: linear-gradient(135deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .78));
    --g3-bg: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .90));
    --g-border: rgba(15, 23, 42, .08);
    --g-border-strong: rgba(15, 23, 42, .12);
    --g-highlight: rgba(255, 255, 255, .85);
    --g-sh-1: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px -14px rgba(15, 23, 42, .18);
    --g-sh-2: 0 2px 6px rgba(15, 23, 42, .05), 0 18px 46px -18px rgba(15, 23, 42, .28);
    --g-sh-3: 0 8px 24px rgba(15, 23, 42, .10), 0 36px 90px -24px rgba(15, 23, 42, .40);
    /* canvas light */
    --canvas: #eef2f8;
    --bloom-a: rgba(37, 99, 235, .13);
    --bloom-b: rgba(34, 211, 238, .10);
    --bloom-c: rgba(139, 92, 246, .07);
    /* motion */
    --motion-fast: 140ms;
    --motion-base: 200ms;
    --motion-slow: 280ms;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-in-out: cubic-bezier(.45, 0, .2, 1);
    --ease-exit: cubic-bezier(.4, 0, 1, 1);
    /* focus */
    --focus-ring: 0 0 0 2px #fff, 0 0 0 4px rgba(37, 99, 235, .55);
}
html[data-theme="dark"] {
    --g1-bg: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035));
    --g2-bg: linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .055));
    --g3-bg: linear-gradient(135deg, rgba(24, 35, 56, .96), rgba(18, 27, 45, .94));
    --g-border: rgba(255, 255, 255, .08);
    --g-border-strong: rgba(255, 255, 255, .14);
    --g-highlight: rgba(255, 255, 255, .16);
    --g-sh-1: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -14px rgba(0, 0, 0, .6);
    --g-sh-2: 0 2px 6px rgba(0, 0, 0, .4), 0 20px 50px -18px rgba(0, 0, 0, .7);
    --g-sh-3: 0 10px 30px rgba(0, 0, 0, .5), 0 40px 100px -24px rgba(0, 0, 0, .8);
    --canvas: #0a1020;
    --bloom-a: rgba(37, 99, 235, .22);
    --bloom-b: rgba(34, 211, 238, .12);
    --bloom-c: rgba(139, 92, 246, .14);
    --focus-ring: 0 0 0 2px #0a1020, 0 0 0 4px rgba(96, 165, 250, .75);
}

/* ------------------------------------------------------------------------- */
/* 1. CANVAS — ambient light behind the glass (L0)                            */
/* ------------------------------------------------------------------------- */
html body {
    background:
        radial-gradient(60% 40% at 8% 0%,   var(--bloom-a), transparent 60%),
        radial-gradient(45% 35% at 96% 12%, var(--bloom-b), transparent 60%),
        radial-gradient(50% 40% at 70% 100%, var(--bloom-c), transparent 60%),
        var(--canvas);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* pages that pin a flat body colour of their own */
html body.app { background-color: var(--canvas); }

/* ------------------------------------------------------------------------- */
/* 2. L1 — CARDS (filters bar, table container, tool-page cards)             */
/* ------------------------------------------------------------------------- */
html .app .card,
html .screen .card,
html .card {
    position: relative;
    background: var(--g1-bg);
    border: 1px solid var(--g-border);
    border-radius: 16px;
    box-shadow: var(--g-sh-1), inset 0 1px 0 var(--g-highlight);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat));
    transition: box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
/* crm-dark.css paints cards with a solid --dk-surface at up to (0,4,1); the
   same selectors, restated here later in the cascade, give dark mode the
   same translucent material as light mode (the blooms read through). */
html[data-theme="dark"] .card,
html[data-theme="dark"] .app .card,
html[data-theme="dark"] .screen .card,
html[data-theme="dark"] .screen .grid2 > .card {
    background: var(--g1-bg);
    border-color: var(--g-border);
}
/* the dashboard's filter bar is the one card that floats above the table */
html .app > form.card.filters,
html[data-theme="dark"] .app > .card.filters,
html[data-theme="dark"] .screen > form.card.filters {
    background: var(--g2-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat));
    box-shadow: var(--g-sh-1), inset 0 1px 0 var(--g-highlight);
}
/* data stays on an opaque, crisp sheet inside the glass container */
html .app .card .table-wrap,
html .calc-table-wrap,
html .perf-table-wrap {
    background: rgba(255, 255, 255, .92);
    border-radius: 12px;
}
html[data-theme="dark"] .app .card .table-wrap,
html[data-theme="dark"] .calc-table-wrap,
html[data-theme="dark"] .perf-table-wrap {
    background: rgba(18, 27, 45, .92);
}

/* ------------------------------------------------------------------------- */
/* 3. L2 — FLOATING CHROME (drawer, menus, popovers, presence)               */
/* ------------------------------------------------------------------------- */
html .th-filter-menu,
html .bell-panel,
html .searchable-select-list,
html .chat-panel {
    background: var(--g2-bg);
    border: 1px solid var(--g-border);
    box-shadow: var(--g-sh-2), inset 0 1px 0 var(--g-highlight);
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
}
html .drawer-bg {
    background: rgba(11, 21, 38, .32);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* ------------------------------------------------------------------------- */
/* 4. L3 — DIALOGS (modals, command-style overlays)                          */
/* ------------------------------------------------------------------------- */
/* The backdrop stays a solid dim (crm-premium.css removed its blur on purpose:
   a full-viewport backdrop-filter re-evaluates on every frame of the modal's
   own entrance animation and stuttered over long lead lists). The dialog is
   the densest material on the page — near-opaque, strongest edge and depth. */
html .modal-bg { background: rgba(2, 6, 23, .62); }
html[data-theme="dark"] .modal-bg { background: rgba(2, 6, 23, .78); }
html .modal-bg .modal,
html .cc-overlay .cc-modal,
html .hold-modal {
    background: var(--g3-bg);
    border: 1px solid var(--g-border-strong);
    border-radius: 20px;
    box-shadow: var(--g-sh-3), inset 0 1px 0 var(--g-highlight);
}

/* ------------------------------------------------------------------------- */
/* 5. CONTROLS — inputs stay clearer than the glass around them              */
/* ------------------------------------------------------------------------- */
html .input,
html .app .card .input,
html .app > .card.filters .input,
html .app > .card.filters select.input {
    background-color: rgba(255, 255, 255, .92);
    border: 1px solid var(--g-border-strong);
    border-radius: 10px;
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
html .input:hover,
html .app > .card.filters .input:hover,
html .app > .card.filters select.input:hover { border-color: rgba(15, 23, 42, .2); }
html .input:focus,
html .input:focus-visible,
html .app > .card.filters .input:focus,
html .app > .card.filters select.input:focus {
    border-color: rgba(37, 99, 235, .7);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
    background-color: #fff;
}
html[data-theme="dark"] .input,
html[data-theme="dark"] .app .card .input,
html[data-theme="dark"] .app > .card.filters .input,
html[data-theme="dark"] .app > .card.filters select.input {
    background-color: rgba(10, 16, 32, .85);
    border-color: var(--g-border-strong);
}
html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .app > .card.filters select.input:focus { background-color: #0a1020; }

/* universal, non-animated focus ring for keyboard users */
html a:focus-visible,
html button:focus-visible,
html [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ------------------------------------------------------------------------- */
/* 6. MOTION — one vocabulary; transform/opacity only                         */
/* ------------------------------------------------------------------------- */
html .btn,
html .stage-card,
html .chip,
html .theme-toggle,
html .tab-close-btn {
    transition-timing-function: var(--ease-out);
    transition-duration: var(--motion-fast);
}
/* drawer: slide from the right edge it belongs to; modal: settle in from 98% */
html .drawer-bg aside.drawer { animation: crm-drawer-in var(--motion-slow) var(--ease-out) both; }
html .modal-bg .modal          { animation: crm-modal-in var(--motion-base) var(--ease-out) both; }
html .drawer-bg,
html .modal-bg                 { animation: crm-fade-in var(--motion-base) var(--ease-out) both; }
html .crm-overlay-leaving aside.drawer { animation: crm-drawer-out var(--motion-fast) var(--ease-exit) both; }
html .crm-overlay-leaving .modal       { animation: crm-modal-out var(--motion-fast) var(--ease-exit) both; }
html .crm-overlay-leaving              { animation: crm-fade-out var(--motion-fast) var(--ease-exit) both; }
@keyframes crm-drawer-in  { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes crm-drawer-out { from { transform: none; opacity: 1; } to { transform: translateX(20px); opacity: 0; } }
@keyframes crm-modal-in   { from { transform: translateY(6px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes crm-modal-out  { from { transform: none; opacity: 1; } to { transform: scale(.985); opacity: 0; } }
@keyframes crm-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes crm-fade-out   { from { opacity: 1; } to { opacity: 0; } }

/* In-place view swaps (stage / month / page): the swapped regions crossfade
   independently while the hero stays put. Requires the View Transitions API;
   browsers without it just swap instantly. */
html .stage-grid                    { view-transition-name: crm-stages; }
html .app > .card.filters           { view-transition-name: crm-filters; }
html .app .card:has(#leadListTable) { view-transition-name: crm-table; }
::view-transition-old(crm-table),
::view-transition-old(crm-stages),
::view-transition-old(crm-filters) { animation: crm-vt-out 120ms var(--ease-exit) both; }
::view-transition-new(crm-table),
::view-transition-new(crm-stages),
::view-transition-new(crm-filters) { animation: crm-vt-in 220ms var(--ease-out) both; }
@keyframes crm-vt-out { to { opacity: 0; } }
@keyframes crm-vt-in  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* while the next view is loading: the table sheet dims slightly, nothing moves */
html body.crm-view-loading .app .card:has(#leadListTable) { opacity: .72; transition: opacity var(--motion-base) var(--ease-out); }
html body.crm-view-loading { cursor: progress; }

/* ------------------------------------------------------------------------- */
/* 7. FALLBACKS                                                               */
/* ------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html .card, html .app .card, html .screen .card { background: rgba(255, 255, 255, .97); }
    html .th-filter-menu, html .bell-panel { background: #fff; }
    html .modal-bg .modal { background: #fff; }
    html[data-theme="dark"] .card, html[data-theme="dark"] .app .card, html[data-theme="dark"] .screen .card { background: #121b2d; }
    html[data-theme="dark"] .th-filter-menu, html[data-theme="dark"] .bell-panel, html[data-theme="dark"] .modal-bg .modal { background: #182338; }
}
@media (prefers-reduced-transparency: reduce) {
    html .card, html .app .card, html .screen .card, html .th-filter-menu, html .bell-panel, html .chat-panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    html .drawer-bg aside.drawer, html .modal-bg .modal, html .drawer-bg, html .modal-bg,
    html .crm-overlay-leaving, html .crm-overlay-leaving aside.drawer, html .crm-overlay-leaving .modal { animation: none; }
    ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}
@media (max-width: 760px) {
    /* mobile: less blur, fewer layers */
    html .card, html .app .card, html .screen .card { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    html body { background-attachment: scroll; }
}

/* ------------------------------------------------------------------------- */
/* 8. CARDS THAT HOST position:fixed POPOVERS                                 */
/* ------------------------------------------------------------------------- */
/* Any backdrop-filter turns an element into the containing block for its
   position:fixed descendants. The lead table card holds the Excel-style
   column-filter menus (and the bulk-action bar); with blur on the card those
   menus opened ~300px away from the header cell that owns them. Cards that
   host such popovers keep the glass tint, edge light and shadow and simply
   skip the blur — their data sheet is opaque anyway, and dropping the largest
   blur region on the page is a net GPU win. Kept last in the file so the
   mobile blur rule above can never re-enable it. */
html .card:has(.th-filter-menu, .bulk-action-bar, .iv-overlay, .cc-overlay, .overlay, .hold-modal, .modal-bg, .drawer-bg, .chat-panel, .bell-panel),
html .app > .card:not(.filters) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .84));
}
html[data-theme="dark"] .card:has(.th-filter-menu, .bulk-action-bar, .iv-overlay, .cc-overlay, .overlay, .hold-modal, .modal-bg, .drawer-bg, .chat-panel, .bell-panel),
html[data-theme="dark"] .app > .card:not(.filters) {
    background: linear-gradient(135deg, rgba(18, 27, 45, .92), rgba(18, 27, 45, .86));
}

/* ------------------------------------------------------------------------- */
/* 9. MOBILE COMPOSITION — stage cards                                        */
/* ------------------------------------------------------------------------- */
/* style.css stacks the seven stage tiles in one column below 560px, and the
   dashboard's own tile rules keep each one ~90px tall: half a screen of tiles
   before the first lead row. Recompose instead of shrinking: two-up compact
   rows (count + label on one baseline, totals beneath), "All" spanning both
   columns. Touch targets stay ≥ 44px. */
@media (max-width: 560px) {
    html .app .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    html .app .stage-grid .stage-card {
        min-height: 44px;
        padding: 10px 12px;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 8px;
        row-gap: 2px;
        border-radius: 14px;
    }
    html .app .stage-grid .stage-card b      { order: 0; margin: 0; font-size: 20px; line-height: 1; }
    html .app .stage-grid .stage-card span   { order: 1; flex: 1 1 0; min-width: 0; margin: 0; font-size: 11px; line-height: 1.2; }
    html .app .stage-grid .stage-card small  { margin-top: 1px; font-size: 9px; }
    html .app .stage-grid .stage-card strong { order: 2; flex-basis: 100%; margin: 2px 0 0; font-size: 12px; }
    html .app .stage-grid .stage-card:first-child { grid-column: 1 / -1; }
}


/* ------------------------------------------------------------------------- */
/* 10. PER-PAGE HARMONISATION (from the page-by-page audit)                   */
/* ------------------------------------------------------------------------- */
/* Each block names the page rule it has to outrank. Specificity notes use
   (ids, classes/attrs, elements). */

/* 10.1 GLOBAL — dark canvas. crm-dark.css `html[data-theme="dark"] body` is
   (0,1,2) and outranks section 1's `html body` (0,0,2), so dark mode was a
   flat #0a1020 with no blooms behind the glass. Restated here at (0,1,2). */
html[data-theme="dark"] body {
    background:
        radial-gradient(60% 40% at 8% 0%,   var(--bloom-a), transparent 60%),
        radial-gradient(45% 35% at 96% 12%, var(--bloom-b), transparent 60%),
        radial-gradient(50% 40% at 70% 100%, var(--bloom-c), transparent 60%),
        var(--canvas);
    background-attachment: fixed;
}
/* dark cards: crm-dark's per-page blocks also set a flat drop shadow at (0,3,1) */
html[data-theme="dark"] .card,
html[data-theme="dark"] .app .card,
html[data-theme="dark"] .screen .card,
html[data-theme="dark"] .screen .grid2 > .card {
    box-shadow: var(--g-sh-1), inset 0 1px 0 var(--g-highlight);
}
/* printing stays a white page (invoices Print button; the page's own
   `@media print { body {…} }` is only (0,0,1)) */
@media print {
    html body,
    html[data-theme="dark"] body { background: #fff; background-attachment: scroll; }
}

/* 10.2 index.php — Logs / Admin / Validation / Bank views + login */
/* crm-premium's `.screen .grid2 > .card` (0,3,0) and `.screen > form.card.filters`
   (0,3,1) out-rank `html .screen .card` (0,2,1) and kept those cards flat white */
html .screen .grid2 > .card {
    background: var(--g1-bg);
    border: 1px solid var(--g-border);
    border-radius: 16px;
    box-shadow: var(--g-sh-1), inset 0 1px 0 var(--g-highlight);
}
html .screen > form.card.filters {
    background: var(--g2-bg);
    border: 1px solid var(--g-border);
    border-radius: 16px;
    box-shadow: var(--g-sh-1), inset 0 1px 0 var(--g-highlight);
    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat));
}
/* login fields sit on the navy login card: `html .input:hover` painted a
   near-black border there */
html .login-card .input:hover { border-color: rgba(148, 163, 184, .32); }
/* the Bank add/edit dialog's backdrop is inside .screen, so crm-premium's
   `body > .modal-bg` never matched it and style.css's blur(3px) survived —
   no animated full-viewport blur */
html .screen .modal-bg { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* dark L2 chrome: crm-dark paints the bell panel solid at (0,2,1) */
html[data-theme="dark"] .bell-panel {
    background: var(--g2-bg);
    border-color: var(--g-border);
    box-shadow: var(--g-sh-2), inset 0 1px 0 var(--g-highlight);
}

/* 10.3 invoices.php — the four .iv-overlay dialogs join the L3 material and
   the dialog motion (they open/close by toggling [hidden]) */
html .iv-overlay {
    background: rgba(2, 6, 23, .62);
    animation: crm-fade-in var(--motion-base) var(--ease-out) both;
}
html[data-theme="dark"] .iv-overlay { background: rgba(2, 6, 23, .78); }
html .iv-overlay .iv-modal,
html[data-theme="dark"] .iv-overlay .iv-modal {
    background: var(--g3-bg);
    border: 1px solid var(--g-border-strong);
    border-radius: 20px;
    box-shadow: var(--g-sh-3), inset 0 1px 0 var(--g-highlight);
    animation: crm-modal-in var(--motion-base) var(--ease-out) both;
}

/* 10.4 chat.php — New Group dialog (.overlay/.modal) gets the L3 edge, depth
   and entrance; conversation rows keep their own inset focus outline */
html .overlay .modal {
    border: 1px solid var(--g-border-strong);
    border-radius: 20px;
    box-shadow: var(--g-sh-3);
    animation: crm-modal-in var(--motion-base) var(--ease-out) both;
}
html .overlay:not([hidden]) { animation: crm-fade-in var(--motion-base) var(--ease-out) both; }
html[data-theme="dark"] .overlay .modal { box-shadow: var(--g-sh-3), 0 0 0 1px var(--dk-line2); }
html .side-list .conv:not(.is-active):focus-visible { box-shadow: none; }

/* 10.5 hero / topbar capsules (all tool pages) keep their own cyan outline on
   focus — restore the resting shadow instead of stacking the generic ring */
html .hero a.back:focus-visible,
html .tab-close-btn:focus-visible {
    box-shadow: 0 4px 14px rgba(2, 8, 23, .25), inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(255, 255, 255, .05);
}
html .theme-toggle:focus-visible {
    box-shadow: 0 3px 10px rgba(2, 8, 23, .24), inset 0 1px 0 rgba(255, 255, 255, .24);
}

/* 10.6 documents.php — the admin upload form is chrome, not data */
html .upload-card {
    background: var(--g1-bg);
    border: 1px solid var(--g-border);
    border-radius: 16px;
    box-shadow: var(--g-sh-1), inset 0 1px 0 var(--g-highlight);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat));
}
html[data-theme="dark"] .upload-card {
    background: var(--g1-bg);
    border-color: var(--g-border);
    box-shadow: var(--g-sh-1), inset 0 1px 0 var(--g-highlight);
}
html .upload-card small { color: #5b6b82; }
html[data-theme="dark"] .upload-card small { color: var(--dk-muted); }

/* 10.7 pitch.php */
/* .btn.ai owns a box-shadow at (0,2,0), which beat the focus ring */
html .btn.ai:focus-visible {
    box-shadow: var(--focus-ring), 0 3px 10px rgba(79, 70, 229, .3), inset 0 1px 0 rgba(255, 255, 255, .3);
}
/* the active hero tab was tuned to merge with the old #f8fafc body */
html .tabs a.active { background: var(--canvas); }
/* #genForm hosts the Standard Price Chart, which floats OUTSIDE the card
   (position:absolute; right: calc(100% + 16px)) — section-8 treatment */
html #genForm.card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .84));
}
html[data-theme="dark"] #genForm.card {
    background: linear-gradient(135deg, rgba(18, 27, 45, .92), rgba(18, 27, 45, .86));
}
html .price-chart.pc-float {
    background: rgba(255, 255, 255, .96);
    border-color: var(--g-border-strong);
    box-shadow: var(--g-sh-2), inset 0 1px 0 var(--g-highlight);
}
html[data-theme="dark"] .price-chart.pc-float {
    background: rgba(18, 27, 45, .96);
    border-color: var(--g-border-strong);
    box-shadow: var(--g-sh-2), inset 0 1px 0 var(--g-highlight);
}

/* 10.8 pricing.php — the calculator card is .price-card, not .card */
html .price-card {
    position: relative;
    background: var(--g1-bg);
    border: 1px solid var(--g-border);
    border-radius: 16px;
    box-shadow: var(--g-sh-1), inset 0 1px 0 var(--g-highlight);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat));
}
html[data-theme="dark"] .price-card {
    background: var(--g1-bg);
    border-color: var(--g-border);
    box-shadow: var(--g-sh-1), inset 0 1px 0 var(--g-highlight);
}
html:not([data-theme="dark"]) .price-card .sub,
html:not([data-theme="dark"]) .price-card .price-field small { color: #5a6a80; }
html[data-theme="dark"] .price-actions button:focus-visible { outline: none; }

/* 10.9 calculations.php */
html .calc-summary .card {
    background: var(--g1-bg);
    border: 1px solid var(--g-border);
    border-radius: 16px;
}
html .calc-summary .card .lbl { color: #55637a; }
html[data-theme="dark"] .calc-summary .card .lbl { color: var(--dk-muted); }
html .calc-strike-btn[aria-pressed="true"]:focus-visible { box-shadow: var(--focus-ring), 0 3px 10px rgba(159, 18, 57, .3); }
html .calc-export-btn:hover:focus-visible { box-shadow: var(--focus-ring), 0 4px 10px rgba(22, 163, 74, .32); }
html:not([data-theme="dark"]) .calc-hint,
html:not([data-theme="dark"]) .calc-banks-sub,
html:not([data-theme="dark"]) .calc-batches-sub { color: #55637a; }

/* 10.10 performance.php — its surfaces are not .card. KPI / chart / table
   cards use the tinted no-blur recipe (five Chart.js canvases repaint on
   hover); the filter bar is the one floating surface and gets L2 blur. */
html .perf-filters,
html .kpi,
html .chart-card,
html .perf-table-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .84));
    border: 1px solid var(--g-border);
    border-radius: 16px;
    box-shadow: var(--g-sh-1), inset 0 1px 0 var(--g-highlight);
    transition: box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
html .perf-filters {
    background: var(--g2-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat));
}
html[data-theme="dark"] .perf-filters,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .perf-table-card {
    background: linear-gradient(135deg, rgba(18, 27, 45, .92), rgba(18, 27, 45, .86));
    border-color: var(--g-border);
}
html[data-theme="dark"] .perf-filters { background: var(--g2-bg); }
html .perf-table-card > .perf-table-wrap { border-radius: 0; }

/* 10.11 fallbacks / budgets for the surfaces added above */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html .upload-card, html .price-card, html .perf-filters,
    html .screen .grid2 > .card, html .screen > form.card.filters { background: rgba(255, 255, 255, .97); }
    html[data-theme="dark"] .upload-card, html[data-theme="dark"] .price-card, html[data-theme="dark"] .perf-filters,
    html[data-theme="dark"] .screen .grid2 > .card, html[data-theme="dark"] .screen > form.card.filters { background: #121b2d; }
}
@media (prefers-reduced-transparency: reduce) {
    html .upload-card, html .price-card, html .perf-filters,
    html .screen > form.card.filters { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    html .iv-overlay, html .iv-overlay .iv-modal, html .overlay .modal, html .overlay:not([hidden]) { animation: none; }
}
@media (max-width: 760px) {
    html[data-theme="dark"] body { background-attachment: scroll; }
    html .upload-card, html .price-card { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    html .app > form.card.filters, html .screen > form.card.filters, html .perf-filters { -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat)); backdrop-filter: blur(10px) saturate(var(--glass-sat)); }
}