/* ── LIFE PAGE COLOR TOKENS ────────────────────────────────────────
 * Every Life page sets its own body-level CSS variables for --bg-raised
 * which dozens of strips/grids/cells inherit (turning them cream/gray).
 *
 * Why the !important AND high specificity: shared-nav.js injects a
 * runtime <style> with rules like
 *   body, body[data-scheme], body.habits-light { --bg-raised: ... !important; }
 * which would otherwise paint over us. Spec (0,2,0). We win with
 * (0,2,2) + !important via `html body[data-scheme]`. The two
 * !important rules then resolve by specificity, ours wins. James 2026-05-26.
 */
html body[data-scheme] {
    --bg-raised: #ffffff !important;
    --bg-elevated: #ffffff !important;
}
html body[data-scheme].k-night,
[data-theme="dark"] html body[data-scheme] {
    --bg-raised: #1c1d20 !important;
    --bg-elevated: #25262a !important;
}

/* Unified Khio Life sidebar.
 *
 * dashboard.html has a custom sidebar (cream bg, .lf-profile header, soft
 * pills, brand label). Every OTHER Life page used .khio-sidebar from
 * premium.css which was a dark glass overlay — totally different look.
 * This file makes .khio-sidebar render exactly like dashboard's .sidebar,
 * and also defines the .lf-* / .nav-* classes that shared-nav.js renders
 * into so the inner markup matches too.
 *
 * Source of truth for the dashboard sidebar is still dashboard.html — if
 * the dashboard sidebar gets restyled, copy the changes here. James 2026-05-26.
 */

/* ── THEME VARIABLES ─────────────────────────────────────────────
 * Light theme (default) — cream sidebar matching dashboard.
 * Dark theme via body.k-night — deep navy.
 */
:root {
    --sidebar-bg: rgba(250, 249, 245, 0.92); /* warm paper, solid — no blur behind it anymore. 2026-07-07 */
    --side-text: #1c1917;
    /* Warm-paper ink (stone-900 family) — replaced the old navy AI-rail ink
       when the baby-blue glass theme was retired. Dark overrides below. 2026-07-07 */
    --side-text-soft: rgba(28, 25, 23, 0.62);
    --side-active-text: #1c1917;
    --side-active-bg: #ffffff;
    --side-hover: rgba(28, 25, 23, 0.04);
    --side-accent: #c2410c;
    --side-accent-soft: rgba(194, 65, 12, 0.12);
}
/* James 2026-06-10: every Life page still carries a legacy inline <style>
   that re-declares --side-text-soft on :root AFTER this file loads, undoing
   the AI-rail ink. Declaring the same vars on body outranks any :root
   declaration for everything inside it, no matter the load order. */
body {
    --side-text-soft: rgba(28, 25, 23, 0.62);
    --side-active-text: #1c1917;
    /* Warm ink-wash hover, same value as the spec's row/nav hover wash (was a
       white wash that disappeared on the beige sidebar). 2026-07-07 */
    --side-hover: rgba(28, 25, 23, 0.04);
}
/* Universal dark theme (2026-06-20): matte black + WHITE sidebar, was cream.
   `html[data-theme="dark"] body` is REQUIRED: the Life theme sets data-theme on
   <html>, not <body>, and the light `body { --side-* }` block above otherwise
   shadows any :root/[data-theme] dark value for everything inside the sidebar. */
body.k-night,
html[data-theme="dark"] body,
body[data-theme="dark"] {
    --side-text-soft: rgba(255, 255, 255, 0.66);
    --side-active-text: #f4f4f5;
    --side-hover: rgba(255, 255, 255, 0.06);
}
body.k-night,
html[data-theme="dark"] body,
[data-theme="dark"],
body[data-theme="dark"] {
    --sidebar-bg: rgba(18, 18, 18, 0.72); /* slightly frosted (dark). James 2026-06-26 */
    --side-text: #f4f4f5;
    --side-text-soft: rgba(255, 255, 255, 0.66);
    --side-active-bg: rgba(255, 255, 255, 0.10);
    --side-active-text: #f4f4f5;
    --side-hover: rgba(255, 255, 255, 0.06);
    --side-accent: #f4f4f5;
    --side-accent-soft: rgba(255, 255, 255, 0.12);
}

/* ── OUTER SIDEBAR FRAME ──────────────────────────────────────── */
.khio-sidebar {
    background: var(--sidebar-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: none !important;
    box-shadow: none !important;
    padding: 20px 14px !important;
    padding-top: max(20px, env(safe-area-inset-top)) !important;
}
body.k-night .khio-sidebar,
body[data-theme="dark"] .khio-sidebar {
    border-right-color: transparent !important;
}

/* ── PROFILE HEADER (avatar + name + plan) ────────────────────── */
.lf-sidebar-header {
    margin: -4px -2px 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
body.k-night .lf-sidebar-header,
body[data-theme="dark"] .lf-sidebar-header { border-bottom-color: rgba(255, 255, 255, 0.06); }

.lf-profile {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--side-text);
    transition: background 0.15s;
}
.lf-profile:hover { background: var(--side-hover); }

.lf-avatar {
    width: 44px; height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg, #c17a4e 0%, #a85025 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(168, 80, 37, 0.25);
    position: relative;
    overflow: hidden;
}
.lf-avatar-img {
    /* 1px oversize + no inner radius: the parent's rounded clip then
       anti-aliases inside the photo, not at the photo/gradient seam,
       killing the warm fringe ring. James 2026-06-11. */
    position: absolute; inset: -1px;
    width: calc(100% + 2px); height: calc(100% + 2px);
    object-fit: cover;
    /* White backing so transparent profile pics don't show the orange
       avatar gradient behind them. James 2026-06-10. */
    background: #fff;
}
/* James 2026-06-12: when a real photo is present, drop the orange initials
   gradient + warm glow entirely so transparent/rounded pics never leak orange
   at the corners. Gradient stays for initials-only avatars. */
.lf-avatar:has(.lf-avatar-img) { background: #fff; box-shadow: none; }
.lf-profile-meta { flex: 1; min-width: 0; }
.lf-profile-name {
    font-size: 15px; font-weight: 600;
    color: var(--side-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.lf-profile-plan {
    font-size: 12px;
    color: var(--side-text-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
}
.lf-profile .uc-crown {
    width: 16px; height: 16px;
    color: var(--side-accent);
    flex-shrink: 0;
}

/* ── NAVIGATION ITEMS ─────────────────────────────────────────── */
.khio-sidebar .sidebar-nav,
.khio-sidebar nav {
    /* 5px (was 2px): enough air that the selected card's shadow doesn't
       collide with the neighbouring rows. !important: shared-nav's injected
       `.sidebar-nav{gap:2px!important}` would win otherwise. */
    display: flex; flex-direction: column; gap: 5px !important;
    padding: 0 !important;
    flex: 1;
}
.khio-sidebar .nav-item,
.khio-sidebar nav a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--side-text-soft) !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s, transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    border: 0;
    background: transparent;
    font-family: inherit;
}
/* Inactive nav-item color — also defeats premium.css line 114's
   `body[data-scheme] .nav-item { color: var(--text-secondary) !important; }`
   which would otherwise paint our nav items in the page text color
   (white on dark themes, dark on light) instead of our --side-text-soft. */
body .khio-sidebar .nav-item,
body[data-scheme] .khio-sidebar .nav-item,
body .khio-sidebar nav a,
body[data-scheme] .khio-sidebar nav a {
    color: var(--side-text-soft) !important;
}
/* James 2026-06-10: hover is a FLAT white highlight — no shadow, no lift.
   Matching the real Khio AI sidebar, only the SELECTED item gets the raised
   3D card; a shadowed hover next to the shadowed active card made adjacent
   items visually overlap at this row density. */
/* body/body[data-scheme] prefixes: the inactive-color rule above is (0,3,1),
   so the hover colour needs at least that to actually darken the label. */
body .khio-sidebar .nav-item:hover,
body .khio-sidebar nav a:hover,
body[data-scheme] .khio-sidebar .nav-item:hover,
body[data-scheme] .khio-sidebar nav a:hover {
    background: var(--side-hover) !important;
    color: var(--side-text) !important;
    box-shadow: none !important;
}
/* Active state — win the specificity war against premium.css's
   `body[data-scheme] .nav-item.active { color: var(--accent-amber) }`
   by adding `body` to the selector and using !important on color. The
   ::before override kills the accent vertical stripe that some accent
   themes still render. James 2026-05-26. */
body .khio-sidebar .nav-item.active,
body .khio-sidebar nav a.active,
body[data-scheme] .khio-sidebar .nav-item.active,
body[data-scheme] .khio-sidebar nav a.active {
    background: var(--side-active-bg) !important;
    color: var(--side-active-text, var(--side-text)) !important;
    border: 0 !important;
    /* Same raised "3D card" as the Khio AI sidebar's selected item
       (study-core.css .sidebar-mwd-styled .nav-link.active). Kept tight —
       a wide-blur shadow bleeds onto the neighbouring rows. */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.04) !important;
}
body.k-night .khio-sidebar .nav-item.active,
body.k-night .khio-sidebar nav a.active,
body[data-theme="dark"] .khio-sidebar .nav-item.active,
body[data-theme="dark"] .khio-sidebar nav a.active {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10),
                0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
body .khio-sidebar .nav-item.active::before,
body[data-scheme] .khio-sidebar .nav-item.active::before {
    display: none !important;
    content: none !important;
}
/* The dashboard renders with <body id="calaiPage">, so cal-ai-life.css's
   `#calaiPage .nav-item.active { background: var(--cal-track) }` — an ID selector —
   outranks every class-based rule above and repaints the active item beige (#efece7).
   An ID beats any class selector no matter how many !importants we add, so we
   re-assert the sidebar's own surfaces with a matching-ID selector. The :hover guard
   does the same against an inline `.nav-item:hover` override. James 2026-06-09. */
#calaiPage .khio-sidebar .nav-item.active,
#calaiPage .khio-sidebar nav a.active {
    background: var(--side-active-bg) !important;
    color: var(--side-active-text, var(--side-text)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.04) !important;
}
#calaiPage .khio-sidebar .nav-item:hover,
#calaiPage .khio-sidebar nav a:hover {
    background: var(--side-hover) !important;
    color: var(--side-text) !important;
    box-shadow: none !important;
}
/* Selected stays a card on hover too (hover rule above must not flatten it). */
#calaiPage .khio-sidebar .nav-item.active:hover,
#calaiPage .khio-sidebar nav a.active:hover {
    background: var(--side-active-bg) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.04) !important;
}
body#calaiPage.k-night .khio-sidebar .nav-item.active,
body#calaiPage.k-night .khio-sidebar nav a.active {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10),
                0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
body#calaiPage.k-night .khio-sidebar .nav-item:hover:not(.active),
body#calaiPage.k-night .khio-sidebar nav a:hover:not(.active) {
    box-shadow: none !important;
}
.khio-sidebar .nav-icon,
.khio-sidebar nav a svg,
.khio-sidebar nav a i {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    flex-shrink: 0;
}
.khio-sidebar .nav-label { font-size: 14px !important; font-weight: 600 !important; }
.khio-sidebar .nav-separator {
    height: 1px;
    background: rgba(15, 23, 42, 0.06);
    margin: 10px 6px;
}
body.k-night .khio-sidebar .nav-separator,
body[data-theme="dark"] .khio-sidebar .nav-separator { background: rgba(255, 255, 255, 0.06); }

/* ── FOOTER (pills + logout + brand) ──────────────────────────── */
.lf-sidebar-footer {
    margin-top: auto;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    padding-top: 10px;
}
body.k-night .lf-sidebar-footer,
body[data-theme="dark"] .lf-sidebar-footer { border-top-color: rgba(255, 255, 255, 0.06); }

/* ── Workspace switcher (Khio Life / Khio AI / Khio Study) ──────────
   Bottom-of-rail product door, mirrors the Study shell's khio-ws exactly:
   navy ink glyphs, NO background tiles, orange only on the current-area
   check. Opens UPWARD via native <details>. Replaces the "More from Khio"
   pills + KHIO LIFE wordmark. Explicit literals (not scheme vars) per the
   dark-mode rule. Fable + James 2026-07-06. */
.khio-sidebar .khio-ws { position: relative; margin: 4px 2px 2px; }
.khio-sidebar .khio-ws-trigger { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: transparent; border: none; cursor: pointer; user-select: none; color: #15172a; transition: background 0.14s ease; }
.khio-sidebar .khio-ws-trigger::-webkit-details-marker { display: none; }
.khio-sidebar .khio-ws-trigger::marker { content: ''; }
.khio-sidebar .khio-ws-trigger:hover { background: rgba(15, 23, 42, 0.05); }
.khio-sidebar .khio-ws[open] .khio-ws-trigger { background: rgba(15, 23, 42, 0.06); }
.khio-sidebar .khio-ws-ico { flex-shrink: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; background: none; border-radius: 0; box-shadow: none; color: #15172a; }
.khio-sidebar .khio-ws-ico svg,
.khio-sidebar .khio-ws-ico i { width: 16px; height: 16px; stroke-width: 2; }
.khio-sidebar .khio-ws-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: #15172a; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.khio-sidebar .khio-ws-chev { flex-shrink: 0; width: 14px; height: 14px; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; color: rgba(15, 23, 42, 0.42); }
.khio-sidebar .khio-ws-chev svg,
.khio-sidebar .khio-ws-chev i { width: 14px; height: 14px; }
.khio-sidebar .khio-ws-trigger:hover .khio-ws-chev { color: #15172a; }
.khio-sidebar .khio-ws-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06); padding: 6px; z-index: 60; animation: khioWsIn 0.14s ease; }
@keyframes khioWsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .khio-sidebar .khio-ws-menu { animation: none; } }
.khio-sidebar .khio-ws-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(15, 23, 42, 0.42); padding: 8px 10px 5px; }
.khio-sidebar .khio-ws-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; text-decoration: none; transition: background 0.12s ease; }
.khio-sidebar .khio-ws-opt:hover { background: rgba(15, 23, 42, 0.05); }
.khio-sidebar .khio-ws-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.khio-sidebar .khio-ws-opt-name { font-size: 13.5px; font-weight: 500; color: #15172a; display: flex; align-items: center; gap: 6px; }
.khio-sidebar .khio-ws-opt.is-current .khio-ws-opt-name { font-weight: 600; }
.khio-sidebar .khio-ws-opt-sub { font-size: 11.5px; color: rgba(15, 23, 42, 0.52); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.khio-sidebar .khio-ws-check { width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; color: #e8853a; }
.khio-sidebar .khio-ws-opt:not(.is-current) .khio-ws-check { display: none; }
body.k-night .khio-sidebar .khio-ws-trigger,
body[data-theme="dark"] .khio-sidebar .khio-ws-trigger,
body.k-night .khio-sidebar .khio-ws-name,
body[data-theme="dark"] .khio-sidebar .khio-ws-name,
body.k-night .khio-sidebar .khio-ws-ico,
body[data-theme="dark"] .khio-sidebar .khio-ws-ico,
body.k-night .khio-sidebar .khio-ws-opt-name,
body[data-theme="dark"] .khio-sidebar .khio-ws-opt-name { color: #f4f4f5; }
body.k-night .khio-sidebar .khio-ws-opt-sub,
body[data-theme="dark"] .khio-sidebar .khio-ws-opt-sub { color: rgba(244, 244, 245, 0.55); }
body.k-night .khio-sidebar .khio-ws-chev,
body[data-theme="dark"] .khio-sidebar .khio-ws-chev { color: rgba(244, 244, 245, 0.45); }
body.k-night .khio-sidebar .khio-ws-trigger:hover,
body[data-theme="dark"] .khio-sidebar .khio-ws-trigger:hover,
body.k-night .khio-sidebar .khio-ws[open] .khio-ws-trigger,
body[data-theme="dark"] .khio-sidebar .khio-ws[open] .khio-ws-trigger,
body.k-night .khio-sidebar .khio-ws-opt:hover,
body[data-theme="dark"] .khio-sidebar .khio-ws-opt:hover { background: rgba(255, 255, 255, 0.06); }
body.k-night .khio-sidebar .khio-ws-menu,
body[data-theme="dark"] .khio-sidebar .khio-ws-menu { background: #1d1d1f; border-color: rgba(255, 255, 255, 0.10); }
body.k-night .khio-sidebar .khio-ws-eyebrow,
body[data-theme="dark"] .khio-sidebar .khio-ws-eyebrow { color: rgba(244, 244, 245, 0.45); }
body.k-night .khio-sidebar .khio-ws-check,
body[data-theme="dark"] .khio-sidebar .khio-ws-check { color: #ff9a66; }

/* Product switcher pills (Study / AI) — match dashboard exactly */
.khio-sidebar .khio-product-switcher {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 0 6px;
}
/* Product-switcher pills — neutralized. James 2026-05-26: was a colorful
   peach/blue scheme, now matches the bland sidebar chrome. Both pills
   look identical except for icon + label. */
/* Selector list includes the legacy --study/--ai/--life modifier classes
   with !important so any cached page that still has the colored
   dashboard.html / inline rules gets overridden cleanly. James 2026-05-26. */
.khio-sidebar .khio-product-pill,
.khio-sidebar .khio-product-pill.khio-product-pill--study,
.khio-sidebar .khio-product-pill.khio-product-pill--ai,
.khio-sidebar .khio-product-pill.khio-product-pill--life {
    display: flex !important; align-items: center; gap: 8px;
    justify-content: flex-start;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    color: #6b7280 !important;
    font-size: 12.5px; font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
    letter-spacing: 0;
}
.khio-sidebar .khio-product-pill:hover,
.khio-sidebar .khio-product-pill.khio-product-pill--study:hover,
.khio-sidebar .khio-product-pill.khio-product-pill--ai:hover,
.khio-sidebar .khio-product-pill.khio-product-pill--life:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #374151 !important;
}
.khio-sidebar .khio-product-pill-label { color: inherit !important; }
.khio-sidebar .khio-product-pill:active { transform: translateY(1px); }
/* shared-nav.js's runtime <style> injects:
     .khio-sidebar .khio-product-pill-ico {
       background: #fff !important;
       border: 1px solid currentColor !important;
     }
   which was painting the icon containers white with a colored border.
   Higher specificity (html body[data-scheme]) + !important to win the
   cascade. James 2026-05-26. */
html body[data-scheme] .khio-sidebar .khio-product-pill-ico {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 22px !important; height: 22px !important;
    border-radius: 6px !important;
    background: rgba(15, 23, 42, 0.05) !important;
    border: 0 !important;
    color: #6b7280 !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
}
.khio-sidebar .khio-product-pill-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.05);
    color: #6b7280;
    flex-shrink: 0;
}
.khio-sidebar .khio-product-pill-ico i,
.khio-sidebar .khio-product-pill-ico svg {
    width: 13px; height: 13px;
}
.khio-sidebar .khio-product-pill-label { flex: 1; min-width: 0; }
body.k-night .khio-sidebar .khio-product-pill,
body[data-theme="dark"] .khio-sidebar .khio-product-pill {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: rgba(240, 238, 232, 0.65);
}
body.k-night .khio-sidebar .khio-product-pill:hover,
body[data-theme="dark"] .khio-sidebar .khio-product-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f0eee8;
}
body.k-night .khio-sidebar .khio-product-pill-ico,
body[data-theme="dark"] .khio-sidebar .khio-product-pill-ico {
    background: rgba(255, 255, 255, 0.06);
}

/* Hide the old user-card chrome from premium.css — we use lf-profile in the
   header now and the brand+pills+logout in the footer. Also kill the old
   floating collapse-tab from premium.css — replaced by an inline « button
   in the profile header. James 2026-05-26. */
.khio-sidebar .user-card,
.khio-sidebar .sidebar-logo,
.sidebar-collapse-btn { display: none !important; }

/* ── INLINE COLLAPSE BUTTON ─────────────────────────────────────
 * Sits to the right of the profile chip; clicking it toggles between
 * full-width sidebar and a narrow icon-only mode. The «/» glyphs
 * swap based on the body.sidebar-collapsed class.
 */
.lf-sidebar-header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.lf-sidebar-header > .lf-profile { flex: 1; min-width: 0; }
.lf-collapse-btn {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: var(--side-text-soft);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}
.lf-collapse-btn:hover {
    background: var(--side-hover);
    color: var(--side-text);
}
.lf-collapse-btn i, .lf-collapse-btn svg {
    width: 16px; height: 16px;
}
.lf-collapse-btn .lf-collapse-ico-expand { display: none; }
body.sidebar-collapsed .lf-collapse-btn .lf-collapse-ico-collapse { display: none; }
body.sidebar-collapsed .lf-collapse-btn .lf-collapse-ico-expand   { display: inline-flex; }

/* ── DIVIDER BELOW NAV (above the product pills) ────────────────── */
.khio-sidebar .lf-nav-divider {
    height: 1px;
    background: rgba(15, 23, 42, 0.08);
    margin: 4px 6px 0;
    flex-shrink: 0;
}
body.k-night .khio-sidebar .lf-nav-divider,
body[data-theme="dark"] .khio-sidebar .lf-nav-divider { background: rgba(255, 255, 255, 0.08); }

/* ── COLLAPSED (icon-only) SIDEBAR MODE ─────────────────────────
 * James 2026-05-26 — clicking the « button collapses the sidebar to
 * an icon-only narrow rail instead of sliding it off-screen. The Khio
 * Study + Khio AI product pills stay visible (just lose their text).
 * Only kicks in on desktop; mobile keeps its own bottom-sheet nav.
 */
body.sidebar-collapsed .khio-sidebar { transform: none !important; }
/* James 2026-05-28: collapse glitch fix. The container (#khio-sidebar)
   shrank to 76px but (a) the inner <aside class="khio-sidebar"> kept its
   full width and spilled out, and (b) the mobile override below referenced
   an UNDEFINED var (--sidebar-width; the real one is --sidebar-w), so on
   mobile the width came out invalid. Clip overflow + shrink the inner
   aside too + use the correct var name. */
body.sidebar-collapsed #khio-sidebar { width: 76px !important; overflow: hidden !important; }
body.sidebar-collapsed #khio-sidebar .khio-sidebar { width: 76px !important; }
@media (max-width: 1023px) {
    body.sidebar-collapsed #khio-sidebar,
    body.sidebar-collapsed #khio-sidebar .khio-sidebar { width: var(--sidebar-w, 300px) !important; }
}
@media (min-width: 1024px) {
    body.sidebar-collapsed .app-main { margin-left: 76px !important; transition: margin-left .25s ease; }
    body:not(.sidebar-collapsed) .app-main { transition: margin-left .25s ease; }
    /* Layout-grid pages (dashboard) — narrow the grid column. NO transition:
       Blink freezes when animating grid-template-columns with fr units, so the
       column got stuck at 76px and the sidebar wouldn't re-expand (the toggle
       looked dead). Snap instantly instead — collapse/expand now works. James 2026-06-02. */
    body.sidebar-collapsed .layout { grid-template-columns: 76px 1fr !important; }

    /* Inside the sidebar, when collapsed: */
    body.sidebar-collapsed .khio-sidebar {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    /* Collapsed (76px rail): stack the header so the collapse arrows sit BELOW
       the avatar instead of being squeezed beside it. James 2026-06-02. */
    body.sidebar-collapsed .lf-sidebar-header {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
    body.sidebar-collapsed .lf-sidebar-header .lf-collapse-btn { margin: 0 auto !important; }
    body.sidebar-collapsed .lf-profile-meta,
    body.sidebar-collapsed .lf-profile .uc-crown,
    body.sidebar-collapsed .nav-label,
    body.sidebar-collapsed .khio-product-pill-label,
    body.sidebar-collapsed .lf-sidebar-brand .lf-brand-name { display: none !important; }
    body.sidebar-collapsed .lf-profile {
        justify-content: center;
        padding: 6px;
    }
    body.sidebar-collapsed .nav-item {
        justify-content: center !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    /* Bottom nav-divider hides at icon-rail width; the workspace switcher
       collapses to just its icon (matches the Study shell) with the menu
       flying out to the right. James 2026-07-06. */
    body.sidebar-collapsed .khio-product-switcher,
    body.sidebar-collapsed .lf-nav-divider { display: none !important; }
    body.sidebar-collapsed .khio-sidebar .khio-ws-name,
    body.sidebar-collapsed .khio-sidebar .khio-ws-chev { display: none; }
    body.sidebar-collapsed .khio-sidebar .khio-ws-trigger { justify-content: center; padding: 8px 0; }
    body.sidebar-collapsed .khio-sidebar .khio-ws-menu { left: auto; right: -270px; bottom: 0; width: 264px; }
}

/* ── PAGE-LEVEL CARDS ─────────────────────────────────────────────
 * Every Life page (gym, nutrition, period, habits, sleep, budget,
 * todos, talk) uses .card from premium.css which defaults to the
 * cream/gray var(--bg-raised). James wanted the same clean white
 * treatment Settings has — applied broadly to .card across all Life
 * pages. Scoped to NOT touch .khio-sidebar internal cards or anything
 * inside the sidebar. James 2026-05-26.
 *
 * Selector specificity uses html body[data-scheme] to beat
 * premium.css's `body[data-scheme] .card{background:var(--bg-raised)}`
 * (0,2,1 → ours is 0,2,2 + the !important wins regardless).
 */
html body[data-scheme] .app-layout .card,
html body[data-scheme] .layout .card,
html body[data-scheme] main .card,
html body[data-scheme] .page-container .card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
}
body.k-night html body[data-scheme] .app-layout .card,
body.k-night html body[data-scheme] .layout .card,
body.k-night html body[data-scheme] main .card,
body.k-night html body[data-scheme] .page-container .card,
[data-theme="dark"] html body[data-scheme] .app-layout .card,
[data-theme="dark"] html body[data-scheme] .layout .card,
[data-theme="dark"] html body[data-scheme] main .card,
[data-theme="dark"] html body[data-scheme] .page-container .card {
    background: #1c1d20 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
/* Card headers / bodies stay transparent so they inherit the parent
   white background. Borders stay subtle. */
html body[data-scheme] .app-layout .card .card-header,
html body[data-scheme] .layout .card .card-header,
html body[data-scheme] main .card .card-header,
html body[data-scheme] .page-container .card .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="dark"] html body[data-scheme] .app-layout .card .card-header,
[data-theme="dark"] html body[data-scheme] .layout .card .card-header,
[data-theme="dark"] html body[data-scheme] main .card .card-header,
[data-theme="dark"] html body[data-scheme] .page-container .card .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
html body[data-scheme] .app-layout .card .card-body,
html body[data-scheme] .layout .card .card-body,
html body[data-scheme] main .card .card-body,
html body[data-scheme] .page-container .card .card-body {
    background: transparent !important;
}
/* Inputs/selects inside the cards stay readable on the new white bg. */
html body[data-scheme] .app-layout .card select,
html body[data-scheme] .app-layout .card input[type="text"],
html body[data-scheme] .app-layout .card input[type="email"],
html body[data-scheme] .app-layout .card input[type="tel"],
html body[data-scheme] .app-layout .card input[type="number"],
html body[data-scheme] .app-layout .card input[type="search"],
html body[data-scheme] .app-layout .card textarea,
html body[data-scheme] .layout .card select,
html body[data-scheme] .layout .card input[type="text"],
html body[data-scheme] .layout .card input[type="email"],
html body[data-scheme] .layout .card input[type="tel"],
html body[data-scheme] .layout .card input[type="number"],
html body[data-scheme] .layout .card input[type="search"],
html body[data-scheme] .layout .card textarea {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}
[data-theme="dark"] html body[data-scheme] .app-layout .card select,
[data-theme="dark"] html body[data-scheme] .app-layout .card input[type="text"],
[data-theme="dark"] html body[data-scheme] .app-layout .card input[type="email"],
[data-theme="dark"] html body[data-scheme] .app-layout .card input[type="tel"],
[data-theme="dark"] html body[data-scheme] .app-layout .card input[type="number"],
[data-theme="dark"] html body[data-scheme] .app-layout .card input[type="search"],
[data-theme="dark"] html body[data-scheme] .app-layout .card textarea,
[data-theme="dark"] html body[data-scheme] .layout .card select,
[data-theme="dark"] html body[data-scheme] .layout .card input[type="text"],
[data-theme="dark"] html body[data-scheme] .layout .card input[type="email"],
[data-theme="dark"] html body[data-scheme] .layout .card input[type="tel"],
[data-theme="dark"] html body[data-scheme] .layout .card input[type="number"],
[data-theme="dark"] html body[data-scheme] .layout .card input[type="search"],
[data-theme="dark"] html body[data-scheme] .layout .card textarea {
    background: #2a2b2f !important;
    color: #f0eee8 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── NESTED SUB-CARDS (inner bubbles) ─────────────────────────────
 * The pattern James wanted: outer white card with NESTED white sub-
 * bubbles inside. Each Life page has its own collection of inner
 * containers (.stat-card, .task-card, .day-panel, etc.) that previously
 * picked up var(--bg-raised) (cream/gray) — now forced to a slightly
 * tinted white so they read as their own bubble against the outer card.
 * James 2026-05-26.
 */
html body[data-scheme] .stat-card,
html body[data-scheme] .task-card,
html body[data-scheme] .chart-card,
html body[data-scheme] .cat-card,
html body[data-scheme] .progress-stat-card,
html body[data-scheme] .macro-box {
    background: #fbfaf8 !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
}
[data-theme="dark"] html body[data-scheme] .stat-card,
[data-theme="dark"] html body[data-scheme] .task-card,
[data-theme="dark"] html body[data-scheme] .chart-card,
[data-theme="dark"] html body[data-scheme] .cat-card,
[data-theme="dark"] html body[data-scheme] .progress-stat-card,
[data-theme="dark"] html body[data-scheme] .macro-box {
    background: #25262a !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}
/* .day-panel (the right-side "Today" panel on /calendar) reads as an
   outer card next to the month grid, NOT a nested sub-bubble. Force
   pure white + slightly larger radius so it matches the rest of the
   white-card surfaces. James 2026-05-26. */
html body[data-scheme] .day-panel {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="dark"] html body[data-scheme] .day-panel {
    background: #1c1d20 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* ── PREVIEW MODE ──────────────────────────────────────────────────
 * The legacy logged-in "Preview" TOGGLE button + its in-flow banner stay
 * hidden (half-baked manual feature, never shipped). But the GUEST demo
 * banner (.preview-banner.kpv-guest — the floating "Demo of Khio Life /
 * Sign in" pill shown to logged-out visitors) is intentional and must
 * show. James 2026-05-26; guest demo revived 2026-07-07.
 */
.khio-preview-btn,
[id*="preview-banner"],
.preview-banner:not(.kpv-guest),
[class*="preview-toggle"] {
    display: none !important;
}

/* ── PAGE HELP "?" ICON + POPOVER ─────────────────────────────────
 * James 2026-05-26: replaces onboarding tours with an opt-in help
 * popover. page-help.js auto-injects a ? icon next to the page title
 * on every Life page; clicking it opens a modal with the help content
 * that page set via window.khioPageHelp({...}).
 */
.khio-help-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--text-secondary, #4b5563);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-left: 10px;
    vertical-align: middle;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
    line-height: 1;
}
.khio-help-icon:hover {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.14);
    color: var(--text-primary, #111827);
}
.khio-help-icon:active { transform: translateY(1px); }
[data-theme="dark"] .khio-help-icon {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .khio-help-icon:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.16);
    color: #f0eee8;
}

/* Help modal overlay + box */
.khio-help-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.40);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
}
.khio-help-overlay.open { display: flex; animation: khioHelpFadeIn 0.18s ease-out; }
@keyframes khioHelpFadeIn { from { opacity: 0; } to { opacity: 1; } }
.khio-help-box {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
    width: min(520px, 100%);
    max-height: 80vh;
    overflow-y: auto;
    padding: 28px 28px 22px;
}
[data-theme="dark"] .khio-help-box {
    background: #1c1d20;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    color: #f0eee8;
}
.khio-help-head {
    display: flex; align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.khio-help-head h3 {
    font-size: 20px; font-weight: 600;
    color: var(--text-primary, #111827);
    flex: 1;
    letter-spacing: -0.02em;
    margin: 0;
}
[data-theme="dark"] .khio-help-head h3 { color: #f0eee8; }
.khio-help-head .khio-help-ico-lg {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(194, 65, 12, 0.10);
    color: #c2410c;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.khio-help-head .khio-help-ico-lg i,
.khio-help-head .khio-help-ico-lg svg { width: 18px; height: 18px; }
.khio-help-close {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.khio-help-close:hover { background: rgba(15, 23, 42, 0.04); }
.khio-help-close i, .khio-help-close svg { width: 14px; height: 14px; }
[data-theme="dark"] .khio-help-close { border-color: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.7); }
[data-theme="dark"] .khio-help-close:hover { background: rgba(255, 255, 255, 0.06); }

.khio-help-body h4 {
    font-size: 14px; font-weight: 700;
    color: var(--text-primary, #111827);
    margin: 14px 0 6px;
    letter-spacing: -0.01em;
}
.khio-help-body h4:first-child { margin-top: 4px; }
[data-theme="dark"] .khio-help-body h4 { color: #f0eee8; }
.khio-help-body p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary, #4b5563);
    margin: 0 0 10px;
}
.khio-help-body ul {
    margin: 4px 0 12px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary, #4b5563);
}
.khio-help-body ul li { margin-bottom: 4px; }
.khio-help-body code {
    background: rgba(15, 23, 42, 0.05);
    color: #4b5563;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}
[data-theme="dark"] .khio-help-body p,
[data-theme="dark"] .khio-help-body ul { color: rgba(240, 238, 232, 0.75); }
[data-theme="dark"] .khio-help-body code { background: rgba(255, 255, 255, 0.08); color: rgba(240, 238, 232, 0.85); }

/* ===== WARM PAPER THEME — all Khio Life pages (flat cream light / black glass dark). 2026-07-07. =====
   LIGHT: near-flat warm canvas (#faf9f5 + a whisper of warmth at the top) with flat white cards,
   hairline borders, and soft low shadows — no backdrop-filter, no translucency. Replaces the retired
   baby-blue liquid-glass look. DARK: unchanged black-glass recipe, keyed on the JS-set .kglass-dark.
   The background uses the shell's own high-specificity selector so it wins. */
html body[data-scheme="light"]:not([data-nav-transparent]) .app-main,
html body[data-scheme="light"] .app-main,
html body[data-scheme="light"] .app-layout,
html body[data-scheme="light"] .layout,
html body[data-scheme="light"] main.main{
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(212,165,116,0.06), transparent 60%),
    #faf9f5 !important;
}
html body[data-scheme="dark"] .app-main,
html body[data-scheme="dark"] .app-layout,
html body[data-scheme="dark"] .layout,
html body[data-scheme="dark"] main.main,
[data-theme="dark"] html body[data-scheme] .app-main,
[data-theme="dark"] html body[data-scheme] .app-layout,
[data-theme="dark"] html body[data-scheme] .layout,
[data-theme="dark"] html body[data-scheme] main.main{
  background:
    radial-gradient(80% 46% at 50% -6%, rgba(70,120,215,.40), transparent 60%),
    radial-gradient(54% 38% at 90% 16%, rgba(82,132,228,.32), transparent 58%),
    radial-gradient(52% 44% at 6% 82%, rgba(60,120,210,.30), transparent 60%),
    linear-gradient(180deg, #101a2e 0%, #0a1018 52%, #05070e 100%) !important;
}
html body[data-scheme] .page-container,
html body[data-scheme] .tab-pane{ background: transparent !important; }
/* Side nav — solid warm paper with a hairline edge (light); dark keeps its glass */
html body[data-scheme] #khio-sidebar{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(250,249,245,.92) !important;
  border-right: 1px solid rgba(28,25,23,.08) !important;
}
html body[data-scheme].kglass-dark #khio-sidebar{
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  background: rgba(255,255,255,.05) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
}

html body[data-scheme] .app-layout .card,
html body[data-scheme] .stat-card, html body[data-scheme] .summary-card, html body[data-scheme] .hab-summary-card,
html body[data-scheme] .list-card, html body[data-scheme] .cal-card,
html body[data-scheme] .cal-hero, html body[data-scheme] .cal-macro, html body[data-scheme] .cal-water, html body[data-scheme] .cal-empty,
html body[data-scheme] .meal-card, html body[data-scheme] .plan-card, html body[data-scheme] .mp-day-card,
html body[data-scheme] .dash-card, html body[data-scheme] .dc-stat,
html body[data-scheme] .task-card, html body[data-scheme] .day-panel, html body[data-scheme] .history-card{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #ffffff !important;
  border: 1px solid rgba(28,25,23,0.08) !important;
  box-shadow: 0 1px 2px rgba(28,25,23,0.04) !important;
}
/* Black glass (dark) — keyed on the JS-set .kglass-dark so it matches every page's real dark signal */
html body[data-scheme].kglass-dark .app-layout .card,
html body[data-scheme].kglass-dark .stat-card, html body[data-scheme].kglass-dark .summary-card, html body[data-scheme].kglass-dark .hab-summary-card,
html body[data-scheme].kglass-dark .list-card, html body[data-scheme].kglass-dark .cal-card,
html body[data-scheme].kglass-dark .cal-hero, html body[data-scheme].kglass-dark .cal-macro, html body[data-scheme].kglass-dark .cal-water, html body[data-scheme].kglass-dark .cal-empty,
html body[data-scheme].kglass-dark .meal-card, html body[data-scheme].kglass-dark .plan-card, html body[data-scheme].kglass-dark .mp-day-card,
html body[data-scheme].kglass-dark .dash-card, html body[data-scheme].kglass-dark .dc-stat,
html body[data-scheme].kglass-dark .task-card, html body[data-scheme].kglass-dark .day-panel, html body[data-scheme].kglass-dark .history-card{
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* Page-specific dominant cards that aren't generic .card — same paper recipe. */
html body[data-scheme] .gym-plan-card{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #ffffff !important;
  border: 1px solid rgba(28,25,23,0.08) !important;
  box-shadow: 0 1px 2px rgba(28,25,23,0.04) !important;
}
html body[data-scheme].kglass-dark .gym-plan-card{
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
/* Budget stat tiles keep their coloured accent border, just get the flat paper surface */
html body[data-scheme] .budget-stat{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #ffffff !important;
}
html body[data-scheme].kglass-dark .budget-stat{
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  background: rgba(255,255,255,.07) !important;
}

/* Generic .card paper on every Life page that carries the shared body#calaiPage
   theme (sleep, period, calendar, etc.). cal-ai-life.css forces
   `#calaiPage .card{ background:var(--cal-card) }` (solid), spec (1,1,0); we beat
   it with body#calaiPage (1,1,2). Deliberately NOT touching .modal-box so modals
   stay opaque/readable. James 2026-06-26. */
html body#calaiPage .card,
html body#calaiPage .stat-card,
html body#calaiPage .summary-card,
html body#calaiPage .glass-card{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #ffffff !important;
  border: 1px solid rgba(28,25,23,0.08) !important;
  box-shadow: 0 1px 2px rgba(28,25,23,0.04) !important;
}
html body#calaiPage.kglass-dark .card,
html body#calaiPage.kglass-dark .stat-card,
html body#calaiPage.kglass-dark .summary-card,
html body#calaiPage.kglass-dark .glass-card{
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
