/* ============================================================================
   ESTILO — LIQUID GLASS THEME (override layer for estilo-CHECKPOINT-118.html)
   Visual reskin only. No markup/JS/structure changes. Loaded LAST so it wins.
   Built from handoff-lg/ (liquid-glass.css + STYLE_GUIDE.md + tokens.json).
   ============================================================================ */

:root{
  /* accent: lime -> mint (kept as --neon because the app consumes it everywhere) */
  --neon:#34e29b; --neon-text:#34e29b;
  --neon-a:rgba(52,226,155,.16); --neon-b:rgba(52,226,155,.30);
  --neon-glow:0 0 18px rgba(52,226,155,.45);
  --accent-blue:#4cc6ff;

  /* text scale -> white tiers */
  --tx:#ffffff; --muted:rgba(255,255,255,.62); --dim:rgba(255,255,255,.45);

  /* hairlines -> brighter for glass rims */
  --border:rgba(255,255,255,.16); --border2:rgba(255,255,255,.24);

  --lg-r-card:30px; --lg-r-tile:24px;
  --lg-font:-apple-system,"SF Pro Display","SF Pro Text",system-ui,sans-serif;
}

/* ---- type ----
   Body / eyebrows / labels = SF Pro (sans). BIG VALUES + the wordmark = high-contrast
   SERIF (Instrument Serif), matching the reference masterpiece (e.g. "$4,150", "82%"). */
.phone, .phone *{ font-family:var(--lg-font); }
.sval, .stat-val, .hero-num, .hero-val, .big-num, .kpi-val, .num-xl,
.stat-box .v, .stat-box b, .stat-box strong{
  font-family:"Instrument Serif", Georgia, "Times New Roman", serif !important;
  font-weight:400 !important; letter-spacing:0 !important;
}

/* ============================================================================
   LAYER 1 — the wall (one fixed background) + dark scrim
   ============================================================================ */
/* BRIGHT iridescent aurora wall — the glass needs real light to refract.
   The reference refracts a bright beach photo; this is the asset-free equivalent:
   high-chroma blooms spread top-to-bottom so EVERY card (incl. lower tiles) sits
   over light, over a mid-tone indigo base (never near-black). */
.lg-wall{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  /* LIVE beach background (beach.gif). NO transform/scale — must match the body's
     beach layer EXACTLY (same center/cover crop) so the two never show a seam or
     "clip differently" on scroll. The glass blur lives on the cards, not the wall. */
  background:#0a1626 url("beach.gif") center center / cover no-repeat;
}
.lg-wall::after{   /* light reference-grade scrim — just enough for text contrast */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,20,.10) 0%, rgba(8,8,20,.20) 55%, rgba(8,8,20,.34) 100%);
}
/* let the wall show through every container */
.phone{ background:transparent !important; }
.screen, .scroll, .pad{ background:transparent !important; }

/* ============================================================================
   LAYER 2 — glass surfaces
   ============================================================================ */
.card, .stat-box, .book-hero, .wi, .msheet, .rebook-sheet, .input, .fw-inp,
.stat-card, .briefing, .today-card{
  /* clear refractive crystal (reference spec) — NOT frosted white plastic.
     Low-opacity fill lets the bright wall bleed through; blur(7) saturate(180)
     brightness(1.06) bends that light; the bevel rim gives the crystal edge. */
  background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.08) 100%) !important;
  -webkit-backdrop-filter:blur(7px) saturate(180%) brightness(1.06);
  backdrop-filter:blur(7px) saturate(180%) brightness(1.06);
  border:none !important;
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.70),
    inset 1.5px 0 1px rgba(255,255,255,.30),
    inset -1.5px 0 1px rgba(255,255,255,.18),
    inset 0 0 0 .5px rgba(255,255,255,.22),
    inset 0 -2px 3px rgba(0,0,0,.16),
    inset 0 -10px 22px -14px rgba(0,0,0,.30),
    0 10px 30px rgba(0,0,0,.30), 0 26px 56px rgba(0,0,0,.22) !important;
}
.card, .book-hero, .briefing, .today-card, .stat-card{ border-radius:var(--lg-r-card) !important; }
.stat-box, .wi, .input, .fw-inp{ border-radius:var(--lg-r-tile) !important; }

/* kill the app's old specular/corner pseudo-elements that fight the glass rim */
.card::before, .card::after, .stat-box::before, .stat-box::after{ content:none !important; }

/* accent card -> mint-tinted glass */
.card-accent{ background:linear-gradient(135deg, rgba(52,226,155,.16), rgba(255,255,255,.04)) !important; }

/* hairline rows */
.row, .arow{ background:transparent !important; border-bottom:1px solid rgba(255,255,255,.10) !important; }

/* ============================================================================
   TOP BAR — translucent glass, sticky
   ============================================================================ */
/* ALL screen topbars -> transparent (no frosted slab, no blur, no divider) so the
   beach flows continuously behind every header, cohesive with the dashboard. */
.topbar{
  background:transparent !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-bottom:none !important;
}
.page-title{ text-shadow:0 2px 12px rgba(0,0,0,.55) !important; }

/* tiny readable text floor — 8/9px is unreadable; bump to 11px (10px labels kept).
   Match both `font-size:8px` (authored) and `font-size: 8px` (browser-serialized after JS). */
[style*="font-size:6px"], [style*="font-size: 6px"],
[style*="font-size:7px"], [style*="font-size: 7px"],
[style*="font-size:8px"], [style*="font-size: 8px"],
[style*="font-size:9px"], [style*="font-size: 9px"]{ font-size:11px !important; }

/* schedule "Break" blocks (team-calendar day grid) were a ~2% hatch + dashed .12 border
   = nearly invisible. Make the hatch + border clearly visible so it reads as a real slot. */
[style*="repeating-linear-gradient(135deg,rgba(255,255,255,0.02)"],
[style*="repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02)"]{
  /* break/lunch = colored tempered glass (warm amber = "off/unavailable"), readable */
  background:linear-gradient(135deg, rgba(255,168,90,.26), rgba(255,168,90,.11)) !important;
  -webkit-backdrop-filter:blur(8px) saturate(165%); backdrop-filter:blur(8px) saturate(165%);
  border:1px dashed rgba(255,186,112,.55) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 4px 12px rgba(0,0,0,.22) !important;
}

/* solid dark SUB-TOOLBAR bars (e.g. team-calendar #0A0A14 mode/date bars) -> transparent,
   so the beach flows through like the topbars. Glassified rounded panels are unaffected
   (glassify rewrites their inline bg, so they no longer match this attribute selector). */
[style*="background:#0A0A14"], [style*="background:#0a0a14"],
[style*="background:#0A0A18"], [style*="background:#0a0a18"],
[style*="background:#0A0A0F"], [style*="background:#0a0a0f"]{
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
/* team-calendar: solid-black time-rail (#03030A) + date-nav (#0C0C18) -> glass.
   Scoped to the screen so #0C0C18 sheets/headers elsewhere are untouched. */
#screen-team-calendar [style*="background:#03030A"], #screen-team-calendar [style*="background:#03030a"]{
  background:linear-gradient(180deg, rgba(10,12,24,.30), rgba(10,12,24,.18)) !important;
  -webkit-backdrop-filter:blur(10px) saturate(150%); backdrop-filter:blur(10px) saturate(150%);
}
#screen-team-calendar [style*="background:#0C0C18"], #screen-team-calendar [style*="background:#0c0c18"]{
  background:transparent !important;
  -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%);
}
/* artist-column HEADER cells (avatar/name/appts, sig: padding:7px 4px) + the empty
   corner cell -> same frosted glass as the time-rail, so the header band reads as
   tempered glass instead of accidental black. */
#team-cal-body [style*="padding:7px 4px"],
#team-cal-body [style*="padding: 7px 4px"],
#team-cal-body [style*="width:44px"][style*="flex-shrink:0"]{
  background:linear-gradient(180deg, rgba(10,12,24,.30), rgba(10,12,24,.18)) !important;
  -webkit-backdrop-filter:blur(10px) saturate(150%); backdrop-filter:blur(10px) saturate(150%);
}

/* ============================================================================
   BOTTOM NAV — floating glass tab bar
   ============================================================================ */
.bnav{
  left:50% !important; right:auto !important; transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom,0px)) !important;
  width:min(350px, calc(100% - 36px)) !important; height:64px !important;
  border-radius:32px !important; border:none !important;
  background:linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.05)) !important;
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.55), inset 0 0 0 .5px rgba(255,255,255,.22),
    0 10px 30px rgba(0,0,0,.35), 0 24px 50px rgba(0,0,0,.30) !important;
}
.bnav .ni.active, .bnav .ni.active .ni-icon{ color:var(--neon) !important; }
/* the bar now floats — give scroll content clearance so nothing tucks under it */
.scroll{ padding-bottom:118px !important; }

/* ============================================================================
   CONTROLS
   ============================================================================ */
/* PRIMARY button -> mint-tinted GLASS, but ONLY for buttons that don't set
   their own inline background (those are intentional: social login=neutral,
   colored CTAs=their hue). This stops neutral buttons getting tinted green. */
.btn:not([style*="background"]){
  background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.07)) !important;
  color:#ffffff !important; font-weight:800 !important; border:none !important;
  border-radius:16px !important; text-shadow:0 1px 4px rgba(0,0,0,.45) !important;
  -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.20),
    0 8px 20px rgba(0,0,0,.32) !important;
}
/* NEUTRAL/secondary buttons that set a dark surface bg (Apple/Google login,
   etc.) -> neutral white glass, NOT mint. Fixes the "tinted green" panels. */
.btn[style*="var(--s1)"], .btn[style*="var(--s2)"], .btn[style*="var(--s3)"]{
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
  color:#F0EFFF !important; border:none !important;
  -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.16), 0 6px 16px rgba(0,0,0,.3) !important;
}
/* SOLID-MINT-FILL buttons -> mint-tinted GLASS (kills the "lime green wall" look the
   owner keeps rejecting — now in mint). These set their OWN inline background
   (var(--neon) or #34E29B), so the neutral-button rule above deliberately skips them.
   We out-specify by matching the inline bg directly. Covers BOTH .btn and raw <button>.
   Tint stays strong enough to read as the PRIMARY action; just glass not a flat slab. */
.btn[style*="var(--neon)"], .btn[style*="#34E29B"], .btn[style*="#34e29b"],
button[style*="background:var(--neon)"], button[style*="background: var(--neon)"],
button[style*="background:#34E29B"], button[style*="background: #34E29B"],
button[style*="background:#34e29b"], button[style*="background: #34e29b"]{
  background:linear-gradient(135deg, rgba(52,226,155,.34), rgba(52,226,155,.14) 55%, rgba(255,255,255,.06)) !important;
  color:#ffffff !important; font-weight:800 !important;
  text-shadow:0 1px 4px rgba(0,0,0,.55) !important;
  -webkit-backdrop-filter:blur(12px) saturate(170%); backdrop-filter:blur(12px) saturate(170%);
  border:none !important;
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(52,226,155,.45),
    0 8px 20px rgba(0,0,0,.32) !important;
}
/* keep any glyph/icon inside those buttons readable on the new glass */
.btn[style*="var(--neon)"] svg, .btn[style*="#34E29B"] svg, .btn[style*="#34e29b"] svg,
button[style*="background:#34E29B"] svg, button[style*="background:#34e29b"] svg,
button[style*="background:var(--neon)"] svg{ stroke:#fff !important; }

.btn-ghost, .btn-sm.btn-ghost{
  background:rgba(255,255,255,.10) !important; color:#fff !important; border:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 10px rgba(0,0,0,.3) !important;
}
.icon-btn, .icon-box{
  background:rgba(255,255,255,.10) !important; border:none !important; border-radius:50% !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.4), inset -1px -1px 1px rgba(255,255,255,.12),
             0 4px 12px rgba(0,0,0,.35) !important;
}
.pill, .pill-blue, .pill-red{
  background:rgba(255,255,255,.10) !important; border:none !important; color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.3) !important;
}
.chip{
  background:rgba(255,255,255,.08) !important; border:none !important; color:rgba(255,255,255,.85) !important;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18) !important; border-radius:100px !important;
}
.chip.sel, .chip-active, .style-chip.sel{
  background:rgba(52,226,155,.18) !important; color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(52,226,155,.5) !important;
}
.toggle.on{ background:var(--neon) !important; box-shadow:0 0 14px rgba(52,226,155,.5), inset 0 1px 3px rgba(0,0,0,.3) !important; }
.toggle.off{ background:rgba(255,255,255,.18) !important; }
.input::placeholder, .fw-inp::placeholder{ color:rgba(255,255,255,.4) !important; }
.input, .fw-inp{ color:#fff !important; }
/* GLOBAL: all inputs/textareas readable (placeholders were near-invisible on the wall) */
input, textarea, select{ color:#fff !important; }
input::placeholder, textarea::placeholder{ color:rgba(255,255,255,.6) !important; }
/* bare inputs (e.g. #fa-search) over the wall -> stronger glass panel */
input[type="text"], input[type="email"], input[type="number"], input[type="search"],
input[type="time"], input[type="tel"], textarea{
  background:linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.05)) !important;
  -webkit-backdrop-filter:blur(8px) saturate(150%); backdrop-filter:blur(8px) saturate(150%);
  border:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.14) !important;
}

/* FILTER / category chips (.style-chip) -> glass, readable text, mint active */
.style-chip{
  background:rgba(255,255,255,.09) !important; color:#fff !important; border:none !important;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) !important; text-shadow:0 1px 3px rgba(0,0,0,.5) !important;
}
.style-chip.active{
  background:rgba(52,226,155,.20) !important; color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(52,226,155,.55) !important;
}

/* underline-style tab labels (inbox / finance / ai) were dim & unreadable on the wall */
.inbox-tab, .fin-tab, .ai-tab-btn, .shop-itab{
  color:rgba(255,255,255,.74) !important; font-weight:800 !important;
  text-shadow:0 1px 4px rgba(0,0,0,.65) !important;
}
.inbox-tab.active, .fin-tab.active, .ai-tab-btn.active, .shop-itab.active{ color:var(--neon) !important; }
.shop-itab svg, .shop-itab svg *{ stroke:currentColor !important; }

/* ============================================================================
   SHEETS / MODALS
   ============================================================================ */
.modal, .estilo-modal-backdrop{
  background:rgba(6,8,18,.55) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.msheet{ border-radius:28px 28px 0 0 !important; }

/* ============================================================================
   KILL the old neon / UV / rainbow-glow aesthetic (owner is moving off it)
   ============================================================================ */
.npulse, .book-hero.npulse{ animation:none !important; }

/* KILL residual hardcoded lime-UV (rgba(200,255,0)) baked into INLINE styles by the
   old neon theme (widget icon badges, status bars, rings) — retint to mint glass.
   An attribute selector + !important is the only thing that beats inline styles. */
.phone [style*="200,255,0"], .phone [style*="200, 255, 0"]{
  background-image:linear-gradient(135deg, rgba(52,226,155,.24), rgba(255,255,255,.05)) !important;
  background-color:transparent !important;
  border-color:rgba(52,226,155,.42) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 4px 14px rgba(0,0,0,.28) !important;
  color:#fff !important;
}
/* lime baked into stylesheet class rules (agenda accent bars + active nav tab) -> mint */
.abar{
  background-image:none !important; background:var(--neon) !important;
  box-shadow:0 0 7px rgba(52,226,155,.5) !important;
}
/* ── BOTTOM NAV active/click state ─────────────────────────────────────────
   App hardcodes the active tab to lime #C8FF00 !important (color, SVG stroke,
   AND a lime highlight box behind the icon — lines 1070-1073). That's the
   "lime green + weird highlight on click". Masterpiece active = just mint
   icon+label, NO box. Out-specify with .bnav prefix (+!important) and kill box. */
/* layout: evenly distributed + every item centered (icons sat high due to a stray
   26px bottom-padding on the bar). */
.bnav{ display:flex !important; align-items:center !important; justify-content:space-around !important; padding:0 8px !important; }
.bnav .ni{
  flex:1 1 0 !important; display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important; gap:3px !important;
  background:transparent !important; border:none !important;
}
.bnav .ni-icon{
  background:transparent !important; box-shadow:none !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
/* KILL the active-tab green highlight box + ring (app rule .ni.active .ni-icon is
   0,3,0 !important and out-specced my .bnav .ni-icon — beat it at 0,4,0). The active
   state is shown by color + glow + full-opacity label instead (matches masterpiece). */
.bnav .ni.active .ni-icon, .bnav button.ni.active .ni-icon{
  background:transparent !important; background-color:transparent !important; box-shadow:none !important;
}
/* per-section LED colors (nth-child = Home / Calendar / Market / Inbox / More) */
.bnav .ni:nth-child(1) .ni-icon{ color:#34e29b !important; }  /* Home     - mint   */
.bnav .ni:nth-child(2) .ni-icon{ color:#4cc6ff !important; }  /* Calendar - blue   */
.bnav .ni:nth-child(3) .ni-icon{ color:#ffa23a !important; }  /* Market   - orange */
.bnav .ni:nth-child(4) .ni-icon{ color:#c08bff !important; }  /* Inbox    - violet */
.bnav .ni:nth-child(5) .ni-icon{ color:#ff6cc4 !important; }  /* More     - pink   */
.bnav .ni .ni-icon svg, .bnav .ni .ni-icon svg *{ stroke:currentColor !important; }
.bnav .ni .ni-icon svg [fill="currentColor"], .bnav .ni .ni-icon svg circle[fill]{ fill:currentColor !important; }
.bnav .ni .ni-icon svg{ filter:drop-shadow(0 0 3px currentColor) drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
/* inactive slightly dimmer; ACTIVE pops — but keep glow small so it stays INSIDE the bubble */
.bnav .ni:not(.active) .ni-icon{ opacity:.82; }
.bnav .ni.active .ni-icon svg{ filter:drop-shadow(0 0 4px currentColor); }
/* gauge knob glow softened so it doesn't poke through the floating nav when scrolled */
.lg-knob, .lg-knobchev{ filter:drop-shadow(0 0 3px rgba(52,226,155,.55)) !important; }
.bnav .ni-lbl{ color:#ffffff !important; opacity:.78; border-color:transparent !important; text-shadow:0 1px 3px rgba(0,0,0,.6) !important; }
.bnav .ni.active .ni-lbl{ opacity:1; color:#fff !important; }
/* rainbow ring / glow pseudo-elements around avatar, hero, glow widgets */
#dash-avatar::before, #dash-avatar::after,
.book-hero::after, .npulse::before, .npulse::after,
[class*="glow-ring"]::before, [class*="glow-ring"]::after{ content:none !important; display:none !important; background:none !important; box-shadow:none !important; }

/* avatar -> clean gradient disc (matches reference) */
#dash-avatar{
  width:54px !important; height:54px !important; border:none !important; border-radius:50% !important;
  background:linear-gradient(135deg,#3a5cff,#c23bff) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px rgba(0,0,0,.45) !important;
}

/* chrome / blackletter wordmark + chrome buttons -> clean serif white + glass.
   MUST out-specify line 227: `body:not(.light-mode) .chrome-text` (0,2,1)!important
   which forces -webkit-text-fill-color:transparent. We match that prefix and add
   another class so we win at (0,3,1), then undo the gradient-text clip. */
body:not(.light-mode) .chrome-text,
body:not(.light-mode) .logo-main,
body:not(.light-mode) .logo-main.chrome-text,
body.light-mode .logo-main.chrome-text{
  -webkit-text-fill-color:#fff !important; color:#fff !important;
  background:none !important; background-image:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  font-family:'UnifrakturMaguntia','Pirata One','Old English Text MT',serif !important; font-weight:400 !important;
  letter-spacing:1px !important; text-shadow:0 2px 14px rgba(0,0,0,.55) !important;
}
#qr-chrome-btn, .btn-chrome{
  background:rgba(255,255,255,.10) !important; color:#fff !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:none !important; border-radius:50% !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(0,0,0,.35) !important;
}

/* injected graph cards use the same glass material as .card (already covered),
   but ensure they get the crystal treatment + the pill/icon styling inside. */
.lg-graph-card{ overflow:visible; }
.lg-graph-card .pill{ background:rgba(255,255,255,.12) !important; color:#fff !important; }

/* ============================================================================
   READABILITY — the big one. Transparent containers were letting text float
   on the bright beach with no glass behind it (grey/unreadable). Fix: brighter
   muted text, stronger wall scrim, legibility halos, and bare content (calendar
   days, agenda rows, list rows) on real glass panels. Plus kill the top black gap.
   ============================================================================ */
:root{
  --muted:rgba(255,255,255,.82) !important;   /* was .62 — grey on beach */
  --dim:rgba(255,255,255,.64) !important;      /* was .45 */
}
/* beach on the BODY too (fixed) so it bleeds to the very top edge even if the
   .phone container clips the fixed .lg-wall — kills the black gap / "gif not all the way up". */
html, body{ background:#0a1626 url("beach.gif") center center / cover no-repeat fixed !important; }

/* dashboard header -> FULLY cohesive with the wall (matches the masterpiece): the
   greeting sits directly over the beach, no frosted bar, no heavy blur, no divider.
   (Was a near-opaque black gradient; then an over-blurred translucent slab — both wrong.) */
#screen-dashboard [style*="rgba(3,3,10,.98)"],
#screen-dashboard [style*="rgba(3, 3, 10, 0.98)"]{
  background:transparent !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-bottom:none !important;
}

/* CRITICAL: unstyled text elements were falling back to BLACK (rgb(0,0,0)) —
   invisible on the dark glass + beach (e.g. Reminders titles). Set a light
   default so ANY element without an explicit color is readable app-wide.
   Scoped to dark mode; elements with their own color are unaffected (inheritance). */
body:not(.light-mode) .screen,
body:not(.light-mode) .scroll,
body:not(.light-mode) .topbar,
body:not(.light-mode) .modal{ color:#EFEEFF; }
/* subtle legibility halo on all in-screen text so it reads over the bright wall */
body:not(.light-mode) .scroll{ text-shadow:0 1px 2px rgba(0,0,0,.42); }

/* a touch more scrim so white text reads over the bright beach */
.lg-wall::after{
  background:linear-gradient(180deg, rgba(8,9,20,.34) 0%, rgba(8,9,20,.44) 52%, rgba(8,9,20,.58) 100%) !important;
}
/* legibility halo on text that can sit directly over the wall */
.page-title,.sval,.slbl,.ssub,.st,.sa,.aname,.atime,.adetail,.cal-dn,.cal-wkg-dow,
.cal-wkg-rowlbl,.cal-agenda-label,.eyebrow,.more-icon-lbl,.hi,.name,.cal-agenda-book{
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}

/* agenda rows -> glass panels (were transparent rows w/ a hairline) */
.arow{
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) !important;
  -webkit-backdrop-filter:blur(7px) saturate(155%); backdrop-filter:blur(7px) saturate(155%);
  border:none !important; border-bottom:none !important; border-radius:16px !important;
  margin-bottom:8px !important; padding:12px 14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.44), 0 5px 16px rgba(0,0,0,.30) !important;
}
.atime, .adetail{ color:rgba(255,255,255,.84) !important; }

/* month day cells -> real liquid-glass panels (was a dim 6% wash) */
.cal-day{
  background:linear-gradient(140deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) !important;
  -webkit-backdrop-filter:blur(7px) saturate(165%); backdrop-filter:blur(7px) saturate(165%);
  border-radius:14px !important;
  box-shadow:
    inset 0 1px .5px rgba(255,255,255,.55),
    inset 0 0 0 .5px rgba(255,255,255,.18),
    0 4px 12px rgba(0,0,0,.26) !important;
}
.cal-day.other-month{ background:rgba(255,255,255,.025) !important; box-shadow:none !important; }
.cal-week-col{
  background:linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.06)) !important;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); border-radius:14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(0,0,0,.26) !important;
}
/* weekday letters (S M T W…) -> larger, ACCENT color (var(--neon) = chosen neon), glass panel */
.cal-dow-row{ gap:4px !important; }
.cal-dow-cell{
  font-size:13px !important; font-weight:800 !important; color:var(--neon) !important;
  padding:8px 0 !important; border-radius:10px !important;
  background:linear-gradient(140deg, rgba(255,255,255,.15), rgba(255,255,255,.055)) !important;
  -webkit-backdrop-filter:blur(6px) saturate(150%); backdrop-filter:blur(6px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 8px rgba(0,0,0,.24) !important;
  text-shadow:0 1px 3px rgba(0,0,0,.5) !important;
}

/* ============================================================================
   BOTTOM SHEETS / ACTION SHEETS — inline `background:var(--s1)` solid dark panels
   (hour-tap, add-event, event editor, etc.) -> frosted liquid glass. One rule
   matches the shared inline radius signature, so every sheet app-wide is glassed.
   ============================================================================ */
[style*="24px 24px 0px 0px"], [style*="24px 24px 0 0"]{
  background:linear-gradient(160deg, rgba(40,42,66,.66), rgba(18,20,36,.72)) !important;
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.22) !important;
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.42), 0 -12px 44px rgba(0,0,0,.52) !important;
}
/* sheet backdrops -> dark blur */
.cal-event-sheet-overlay, .cal-sheet-overlay, .sheet-overlay{
  background:rgba(6,8,16,.5) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
/* named detail/action sheets that use a solid surface bg -> frosted glass */
#appt-detail-sheet, #bkr-sheet, #gapfill-sheet, #fin-sheet, #fin-priv-sheet, #scanhub-sheet{
  background:linear-gradient(160deg, rgba(40,42,66,.66), rgba(18,20,36,.74)) !important;
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.20) !important;
}

/* INLINE pseudo-cards (faint rgba bg + border, NO blur) -> match the main .card
   glass. Many panels (finance, tax, etc.) are inline divs that never got .card.
   Targets card-level faint fills; thin bar tracks use .06/.07 and are left alone. */
[style*="background:rgba(255,255,255,0.03)"],
[style*="background: rgba(255, 255, 255, 0.03)"],
[style*="background:rgba(255,255,255,0.04)"],
[style*="background:rgba(255,200,0,0.04)"],
[style*="background:rgba(255,200,0,.04)"]{
  background:linear-gradient(140deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
  -webkit-backdrop-filter:blur(9px) saturate(160%); backdrop-filter:blur(9px) saturate(160%);
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40), 0 5px 16px rgba(0,0,0,.26) !important;
}

/* ============================================================================
   BLESSED SEMANTIC ACCENTS — owner kept CYAN as the info/secure color and ORANGE
   as the Convention sub-brand, but wants their PANELS to be GLASS (not flat slabs)
   so the material is consistent app-wide. We tint the glass with each accent and
   leave the accent TEXT/titles untouched (that's the wayfinding cue). All selectors
   are scoped to `background:` so the accent used for text/borders is never affected.
   ============================================================================ */
/* CYAN info panels -> cyan-tinted glass. Matched by their LOW-alpha bg (.0x/.1x) so
   the saturated cyan status DOT (rgba(0,200,255,0.85), a solid indicator) is spared. */
[style*="background:rgba(0,200,255,.0"], [style*="background:rgba(0, 200, 255, 0.0"],
[style*="background:rgba(0,200,255,.1"], [style*="background:rgba(0, 200, 255, 0.1"]{
  background:linear-gradient(140deg, rgba(0,200,255,.18), rgba(0,200,255,.05)) !important;
  -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  border-color:rgba(120,222,255,.32) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.26) !important;
}
/* CONVENTION orange panels/CTAs -> orange-tinted glass. SCOPED to [id^="screen-conv-"]
   via the id-prefix selector so the shared #FF9900 amber used by EDUCATION is untouched. */
[id^="screen-conv-"] [style*="background:#FF6400"], [id^="screen-conv-"] [style*="background:#ff6400"], [id^="screen-conv-"] [style*="background: #FF6400"],
[id^="screen-conv-"] [style*="background:#FF9900"], [id^="screen-conv-"] [style*="background:#ff9900"], [id^="screen-conv-"] [style*="background: #FF9900"],
[id^="screen-conv-"] [style*="background:rgba(255,100,0"], [id^="screen-conv-"] [style*="background: rgba(255, 100, 0"]{
  background:linear-gradient(140deg, rgba(255,138,58,.22), rgba(255,138,58,.07)) !important;
  -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  border-color:rgba(255,182,120,.34) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 6px 18px rgba(0,0,0,.26) !important;
}

/* agenda EVENT cards (.cal-event-card) were solid var(--s3) -> liquid glass */
.cal-event-card{
  background:linear-gradient(140deg, rgba(255,255,255,.13), rgba(255,255,255,.05)) !important;
  -webkit-backdrop-filter:blur(8px) saturate(160%); backdrop-filter:blur(8px) saturate(160%);
  border:none !important; border-radius:16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 5px 16px rgba(0,0,0,.30) !important;
}
.cal-ev-time{ color:rgba(255,255,255,.86) !important; }
.cal-ev-sub{ color:rgba(255,255,255,.80) !important; }

/* week-grid sticky header was solid near-black -> translucent glass */
.cal-wkg-hdr{
  background:rgba(12,14,26,.42) !important;
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}

/* ============================================================================
   MORE screen — old solid-color icon squares -> liquid-glass tiles,
   labels larger + brighter + glowing so they read over the beach wall.
   ============================================================================ */
.more-icon-box{
  background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) !important;
  -webkit-backdrop-filter:blur(8px) saturate(170%); backdrop-filter:blur(8px) saturate(170%);
  width:60px !important; height:60px !important; border-radius:18px !important;
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.62),
    inset 0 0 0 .5px rgba(255,255,255,.24),
    inset 0 -6px 14px -10px rgba(0,0,0,.40),
    0 8px 18px rgba(0,0,0,.36) !important;
}
/* icon glyph color/glow is set per-tile by liquid-glass-graphs.js (LED version of
   each tile's own category color). Base drop-shadow for depth only. */
.more-icon-box svg{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.more-icon-cell{ gap:8px !important; }
.more-icon-lbl{
  font-size:12.5px !important; font-weight:800 !important; color:#ffffff !important;
  max-width:78px !important; letter-spacing:.2px !important; margin-top:2px !important;
  text-shadow:0 1px 5px rgba(0,0,0,.8), 0 0 12px rgba(52,226,155,.32) !important;
}
/* section eyebrows (MANAGE / MONEY / etc.) — brighten so they don't vanish on the wall */
.sh .st, .eyebrow, .more-section-title{
  color:rgba(255,255,255,.92) !important;
  text-shadow:0 1px 6px rgba(0,0,0,.7) !important;
}

/* hero book card -> clean glass, circular accent action button */
.book-hero{ overflow:hidden; }
.book-hero .icon-btn, .book-hero .icon-box, .book-hero [class*="icon"]{ border-radius:50% !important; }

/* 2026-06-10 punchlist #7/#8: sticky #0C0C18 header/enroll bars app-wide ->
   frosted glass, matching the team-calendar treatment. Scoped to
   position:sticky bars only so #0C0C18 sheets and cards stay solid. The edu
   navy hero is untouched (it is not sticky). */
[style*="position:sticky"][style*="background:#0C0C18"],
[style*="position:sticky"][style*="background:#0c0c18"]{
  background:linear-gradient(180deg, rgba(10,12,24,.55), rgba(10,12,24,.35)) !important;
  -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%);
}