/* Liquid Glass (inspired by Apple iOS 26 / macOS Tahoe) for navigation and controls only.
   Content stays on solid surfaces: paragraphs, tables, lists, images and form fields are not glass.
   The material is built from five layers:
     1. backdrop: blur + saturate (+ a touch of brightness) so colors behind are bent and intensified, not just smeared
     2. tint: a vertical gradient, denser at the top, like thicker glass catching light
     3. rim (::before): 1px gradient border, bright on top, fading down, with a faint shade at the bottom edge
     4. specular (::after): a soft highlight near the top that follows the pointer and brightens on hover/press
     5. float shadow: a tight contact shadow plus a wide, soft ambient one
   Light and dark use the same recipe with different tokens; reduced transparency, missing backdrop-filter and
   increased contrast fall back to solid surfaces. */

:root {
  /* Shape: one radius scale for every glass component */
  --radius-control: 14px;   /* buttons, inputs, segmented controls */
  --radius-card: 20px;      /* tiles, panels, sidebar, filter bar */
  --radius-sheet: 26px;     /* dialogs and sheets */
  --radius-pill: 999px;     /* chips, FAB, toasts */

  /* Material */
  --glass-blur: 18px;
  --glass-blur-heavy: 28px;
  --glass-blur-dialog: 36px;
  --glass-saturate: 180%;
  --glass-bright: 1.04;
  --glass-tint-top: rgba(255, 255, 255, .74);
  --glass-tint-bottom: rgba(255, 255, 255, .52);
  --glass-sheet-top: rgba(255, 255, 255, .86);
  --glass-sheet-bottom: rgba(250, 252, 251, .78);
  /* Dialogs: lighter tint so the page shows through, compensated by a stronger blur */
  --glass-dialog-top: rgba(255, 255, 255, .72);
  --glass-dialog-bottom: rgba(246, 250, 248, .58);
  --glass-inset: rgba(255, 255, 255, .42);
  --glass-rim-top: rgba(255, 255, 255, .95);
  --glass-rim-mid: rgba(255, 255, 255, .28);
  --glass-rim-bottom: rgba(16, 40, 34, .12);
  --glass-lip: rgba(255, 255, 255, .65);          /* inner top lip */
  --glass-specular: rgba(255, 255, 255, .80);
  --glass-specular-rest: .55;
  --glass-specular-hover: .9;
  --glass-shadow: 0 1px 1px rgba(16, 40, 34, .05), 0 2px 6px rgba(16, 40, 34, .06), 0 10px 26px -8px rgba(16, 40, 34, .20);
  --glass-shadow-lift: 0 1px 1px rgba(16, 40, 34, .05), 0 4px 10px rgba(16, 40, 34, .08), 0 18px 36px -10px rgba(16, 40, 34, .28);
  --glass-shadow-sheet: 0 2px 4px rgba(16, 40, 34, .06), 0 30px 70px -12px rgba(16, 40, 34, .35);

  /* Tinted glass for primary actions (keeps white text above 4.5:1) */
  --glass-accent-top: rgba(14, 146, 128, .94);
  --glass-accent-bottom: rgba(5, 88, 78, .94);
  --glass-accent-rim: rgba(190, 255, 240, .75);

  /* Ambient color behind the glass so the saturation and lensing have something to work with */
  --ambient-1: rgba(8, 127, 111, .16);
  --ambient-2: rgba(56, 132, 214, .12);
  --ambient-3: rgba(132, 196, 84, .13);
}

/* Dark: same recipe, darker tint, softer rim, deeper shadows, lighter accent text for contrast */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c1311;
    --surface: #141d1a;
    --surface-2: #1b2723;
    --ink: #e6efec;
    --muted: #9caba5;
    --line: #2a3833;
    --accent: #16a08c;
    --accent-dark: #5ad2be;
    --accent-soft: #143530;
    --warning: #f0a35e;
    --danger: #ff8b80;
    --shadow: 0 16px 40px rgba(0, 0, 0, .45);

    --glass-tint-top: rgba(40, 54, 49, .66);
    --glass-tint-bottom: rgba(22, 32, 29, .52);
    --glass-sheet-top: rgba(34, 47, 43, .88);
    --glass-sheet-bottom: rgba(20, 29, 26, .82);
    --glass-dialog-top: rgba(36, 50, 45, .74);
    --glass-dialog-bottom: rgba(18, 27, 24, .62);
    --glass-inset: rgba(255, 255, 255, .06);
    --glass-rim-top: rgba(255, 255, 255, .42);
    --glass-rim-mid: rgba(255, 255, 255, .08);
    --glass-rim-bottom: rgba(0, 0, 0, .35);
    --glass-lip: rgba(255, 255, 255, .16);
    --glass-specular: rgba(255, 255, 255, .30);
    --glass-specular-rest: .6;
    --glass-specular-hover: 1;
    --glass-shadow: 0 1px 1px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .30), 0 12px 30px -8px rgba(0, 0, 0, .60);
    --glass-shadow-lift: 0 1px 1px rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .35), 0 22px 40px -10px rgba(0, 0, 0, .70);
    --glass-shadow-sheet: 0 2px 6px rgba(0, 0, 0, .40), 0 34px 80px -12px rgba(0, 0, 0, .75);
    --glass-accent-top: rgba(22, 160, 140, .90);
    --glass-accent-bottom: rgba(8, 104, 92, .92);
    --glass-accent-rim: rgba(160, 255, 235, .45);
    --ambient-1: rgba(22, 160, 140, .18);
    --ambient-2: rgba(70, 120, 220, .14);
    --ambient-3: rgba(120, 190, 80, .10);
    --brand-text: var(--ink);
  }
  /* Light tints hardcoded in the base theme, re-mapped for dark */
:root:not([data-theme="light"]) .chip-pending,
:root:not([data-theme="light"]) .chip-partial,
:root:not([data-theme="light"]) .chip-review,
:root:not([data-theme="light"]) .chip-user-pending { background: #3a2a14; color: var(--warning); }
  :root:not([data-theme="light"]) .chip-overdue,
:root:not([data-theme="light"]) .chip-user-suspended { background: #3b1c19; color: var(--danger); }
  :root:not([data-theme="light"]) .chip-standby { background: #1d2a3d; color: #9dbbe8; }
  :root:not([data-theme="light"]) .status-pending { background-color: #3a2a14; }
  :root:not([data-theme="light"]) .status-overdue { background-color: #3b1c19; }
  :root:not([data-theme="light"]) .status-standby { background-color: #1d2a3d; color: #9dbbe8; }
  :root:not([data-theme="light"]) .notice-warning { background: #2b2214; border-color: #5a4320; }
  :root:not([data-theme="light"]) .user-card-pending { background: #2a2216; border-color: #5a4320; }
  :root:not([data-theme="light"]) .capture-button { border-color: #2b4a43; }
}
/* Same dark rules when the user picks dark with the theme button */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0c1311;
    --surface: #141d1a;
    --surface-2: #1b2723;
    --ink: #e6efec;
    --muted: #9caba5;
    --line: #2a3833;
    --accent: #16a08c;
    --accent-dark: #5ad2be;
    --accent-soft: #143530;
    --warning: #f0a35e;
    --danger: #ff8b80;
    --shadow: 0 16px 40px rgba(0, 0, 0, .45);

    --glass-tint-top: rgba(40, 54, 49, .66);
    --glass-tint-bottom: rgba(22, 32, 29, .52);
    --glass-sheet-top: rgba(34, 47, 43, .88);
    --glass-sheet-bottom: rgba(20, 29, 26, .82);
    --glass-dialog-top: rgba(36, 50, 45, .74);
    --glass-dialog-bottom: rgba(18, 27, 24, .62);
    --glass-inset: rgba(255, 255, 255, .06);
    --glass-rim-top: rgba(255, 255, 255, .42);
    --glass-rim-mid: rgba(255, 255, 255, .08);
    --glass-rim-bottom: rgba(0, 0, 0, .35);
    --glass-lip: rgba(255, 255, 255, .16);
    --glass-specular: rgba(255, 255, 255, .30);
    --glass-specular-rest: .6;
    --glass-specular-hover: 1;
    --glass-shadow: 0 1px 1px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .30), 0 12px 30px -8px rgba(0, 0, 0, .60);
    --glass-shadow-lift: 0 1px 1px rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .35), 0 22px 40px -10px rgba(0, 0, 0, .70);
    --glass-shadow-sheet: 0 2px 6px rgba(0, 0, 0, .40), 0 34px 80px -12px rgba(0, 0, 0, .75);
    --glass-accent-top: rgba(22, 160, 140, .90);
    --glass-accent-bottom: rgba(8, 104, 92, .92);
    --glass-accent-rim: rgba(160, 255, 235, .45);
    --ambient-1: rgba(22, 160, 140, .18);
    --ambient-2: rgba(70, 120, 220, .14);
    --ambient-3: rgba(120, 190, 80, .10);
    --brand-text: var(--ink);
  }
/* Light tints hardcoded in the base theme, re-mapped for dark */
:root[data-theme="dark"] .chip-pending,
:root[data-theme="dark"] .chip-partial,
:root[data-theme="dark"] .chip-review,
:root[data-theme="dark"] .chip-user-pending { background: #3a2a14; color: var(--warning); }
:root[data-theme="dark"] .chip-overdue,
:root[data-theme="dark"] .chip-user-suspended { background: #3b1c19; color: var(--danger); }
:root[data-theme="dark"] .chip-standby { background: #1d2a3d; color: #9dbbe8; }
:root[data-theme="dark"] .status-pending { background-color: #3a2a14; }
:root[data-theme="dark"] .status-overdue { background-color: #3b1c19; }
:root[data-theme="dark"] .status-standby { background-color: #1d2a3d; color: #9dbbe8; }
:root[data-theme="dark"] .notice-warning { background: #2b2214; border-color: #5a4320; }
:root[data-theme="dark"] .user-card-pending { background: #2a2216; border-color: #5a4320; }
:root[data-theme="dark"] .capture-button { border-color: #2b4a43; }

/* Ambient light field behind everything (decorative, not content) */
body {
  background:
    radial-gradient(1100px 680px at 6% -12%, var(--ambient-1), transparent 62%),
    radial-gradient(900px 620px at 104% 6%, var(--ambient-2), transparent 60%),
    radial-gradient(900px 640px at 48% 112%, var(--ambient-3), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------- The material ---------- */
.sidebar,
.split-nav,
.bottom-nav,
details.filters,
.login-screen .auth-panel,
.topbar .icon-button,
.avatar-button,
.icon-button,
.secondary-button,
.danger-button,
.capture-button,
.pay-button,
.chip-row button,
.split-modes button,
.split-methods,
.segmented,
#settingsTiles .module-tile,
#allModules .module-tile,
.sheet,
.toast,
.primary-button,
.fab {
  background: linear-gradient(180deg, var(--glass-tint-top), var(--glass-tint-bottom));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
  border-color: transparent;
  box-shadow: inset 0 1px 0 var(--glass-lip), var(--glass-shadow);
  isolation: isolate;
  transition: box-shadow .22s ease, transform .18s ease, background-color .2s ease;
}
/* Position only where the base theme does not already position the element (FAB, toast, bottom bar are fixed) */
:where(.sidebar, .split-nav, details.filters, .login-screen .auth-panel, .icon-button, .avatar-button, .secondary-button,
  .danger-button, .capture-button, .pay-button, .chip-row button, .split-modes button, .split-methods, .segmented,
  #settingsTiles .module-tile, #allModules .module-tile, .sheet, .primary-button) { position: relative; }

/* 3. Rim: gradient 1px border drawn as a masked ring, bright on top and fading toward the bottom */
.sidebar::before, .split-nav::before, .bottom-nav::before, details.filters::before, .login-screen .auth-panel::before,
.icon-button::before, .avatar-button::before, .secondary-button::before, .danger-button::before,
.capture-button::before, .pay-button::before, .chip-row button::before, .split-modes button::before, .split-methods::before,
.segmented::before, #settingsTiles .module-tile::before, #allModules .module-tile::before, .sheet::before, .toast::before,
.primary-button::before, .fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--glass-rim-top) 0%, var(--glass-rim-mid) 42%, var(--glass-rim-bottom) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* 4. Specular: soft highlight concentrated at the top; follows the pointer (--gx set by glass.js) */
.sidebar::after, .split-nav::after, .bottom-nav::after, details.filters::after, .login-screen .auth-panel::after,
.icon-button::after, .avatar-button::after, .secondary-button::after, .danger-button::after,
.capture-button::after, .pay-button::after, .chip-row button::after, .split-modes button::after, .split-methods::after,
.segmented::after, #settingsTiles .module-tile::after, #allModules .module-tile::after, .sheet::after, .toast::after,
.primary-button::after, .fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 62% at var(--gx, 50%) -14%, var(--glass-specular), transparent 58%);
  opacity: var(--glass-specular-rest);
  pointer-events: none;
  z-index: -1;
  transition: opacity .22s ease;
}
/* Large surfaces keep the highlight to a thin band so it never washes over their contents */
.sidebar::after, .split-nav::after, .sheet::after, .login-screen .auth-panel::after, details.filters::after {
  background: radial-gradient(90% 90px at var(--gx, 50%) -30px, var(--glass-specular), transparent 70%);
}

/* 6. Interaction: highlight intensifies and the control lifts; on press it settles and brightens */
:is(.icon-button, .avatar-button, .secondary-button, .danger-button, .capture-button, .pay-button, .chip-row button,
  .split-modes button, #settingsTiles .module-tile, #allModules .module-tile, .primary-button, .fab):hover {
  box-shadow: inset 0 1px 0 var(--glass-lip), var(--glass-shadow-lift);
  transform: translateY(-1px);
}
:is(.icon-button, .avatar-button, .secondary-button, .danger-button, .capture-button, .pay-button, .chip-row button,
  .split-modes button, #settingsTiles .module-tile, #allModules .module-tile, .primary-button, .fab):hover::after {
  opacity: var(--glass-specular-hover);
}
:is(.icon-button, .avatar-button, .secondary-button, .danger-button, .capture-button, .pay-button, .chip-row button,
  .split-modes button, #settingsTiles .module-tile, #allModules .module-tile, .primary-button, .fab):active {
  transform: translateY(0) scale(.975);
  box-shadow: inset 0 1px 0 var(--glass-lip), var(--glass-shadow);
}
:is(.icon-button, .avatar-button, .secondary-button, .danger-button, .capture-button, .pay-button, .chip-row button,
  .split-modes button, #settingsTiles .module-tile, #allModules .module-tile, .primary-button, .fab):active::after {
  opacity: 1;
  background: radial-gradient(140% 90% at var(--gx, 50%) -6%, var(--glass-specular), transparent 64%);
}
:is(.icon-button, .secondary-button, .primary-button, .danger-button, .capture-button, .pay-button, .fab, .avatar-button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Tinted glass for primary actions and selected states */
.primary-button,
.fab,
.chip-row button[aria-pressed="true"],
.split-modes button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--glass-accent-top), var(--glass-accent-bottom));
  color: #fff;
}
.primary-button:hover { background: linear-gradient(180deg, var(--glass-accent-top), var(--glass-accent-bottom)); }
.primary-button::before, .fab::before,
.chip-row button[aria-pressed="true"]::before, .split-modes button[aria-pressed="true"]::before {
  background: linear-gradient(180deg, var(--glass-accent-rim) 0%, rgba(255, 255, 255, .12) 45%, rgba(0, 0, 0, .18) 100%);
}
.fab { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px rgba(5, 88, 78, .25), 0 16px 34px -8px rgba(5, 88, 78, .45); }
.danger-button { color: var(--danger); }
.capture-button { color: var(--accent-dark); }

/* Sheets and toasts: denser glass so forms and messages stay readable */
.sheet {
  background: linear-gradient(180deg, var(--glass-dialog-top), var(--glass-dialog-bottom));
  -webkit-backdrop-filter: blur(var(--glass-blur-dialog)) saturate(190%) brightness(1.03);
  backdrop-filter: blur(var(--glass-blur-dialog)) saturate(190%) brightness(1.03);
  box-shadow: inset 0 1px 0 var(--glass-lip), var(--glass-shadow-sheet);
  color: var(--ink);
}
.sheet::backdrop {
  background: rgba(10, 20, 17, .16);
  -webkit-backdrop-filter: blur(2px) saturate(120%);
  backdrop-filter: blur(2px) saturate(120%);
}
.sheet .sheet-actions {
  background: linear-gradient(180deg, transparent, var(--glass-dialog-bottom) 30%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.toast { color: var(--ink); }
.toast.error { background: linear-gradient(180deg, rgba(200, 50, 40, .92), rgba(160, 34, 26, .92)); color: #fff; }
.toast.warning { background: linear-gradient(180deg, rgba(190, 104, 30, .94), rgba(150, 78, 18, .94)); color: #fff; }

/* 5. Radius scale applied consistently */
.icon-button, .primary-button, .secondary-button, .danger-button, .capture-button,
input, select, textarea, .segmented, .split-methods { border-radius: var(--radius-control); }
.segmented span { border-radius: calc(var(--radius-control) - 4px); }
.sidebar nav button, .split-nav button[data-split-kind] { border-radius: 12px; }
.panel, .module-tile, .sidebar, .split-nav, details.filters, .notice, .recurrence-card, .user-card,
.split-fieldset, .login-screen .auth-panel, .summary-hero { border-radius: var(--radius-card); }
.sheet { border-radius: var(--radius-sheet); }
.chip-row button, .split-modes button, .pay-button, .fab, .toast, .chip { border-radius: var(--radius-pill); }

/* Navigation layer floats over the page */
.sidebar { margin: 12px 0 12px 12px; height: calc(100vh - 24px); position: sticky; top: 12px; overflow-y: auto; border-right: 0; }
.sidebar nav button[aria-current="page"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .25));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 3px rgba(16, 40, 34, .10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar nav button[aria-current="page"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 3px rgba(0, 0, 0, .4);
  }
}
/* Same dark rules when the user picks dark with the theme button */
:root[data-theme="dark"] .sidebar nav button[aria-current="page"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 3px rgba(0, 0, 0, .4);
  }
.bottom-nav { border-top: 0; }
@media (max-width: 760px) {
  .sidebar { margin: 0; height: auto; position: static; }
  .bottom-nav { left: 10px; right: 10px; bottom: 10px; border-radius: var(--radius-card); padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .sheet { border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; }
}

/* Content stays solid (never glass): panels, tables, fields and the movement list keep their opaque surfaces */
.panel, table, input, select, textarea, .feed, .recurrence-card, .user-card { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Accessibility and fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  :is(.icon-button, .avatar-button, .secondary-button, .danger-button, .capture-button, .pay-button, .chip-row button,
    .split-modes button, #settingsTiles .module-tile, #allModules .module-tile, .primary-button, .fab):is(:hover, :active) { transform: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-tint-top: var(--surface); --glass-tint-bottom: var(--surface); --glass-sheet-top: var(--surface); --glass-sheet-bottom: var(--surface); --glass-dialog-top: var(--surface); --glass-dialog-bottom: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-tint-top: var(--surface); --glass-tint-bottom: var(--surface); --glass-sheet-top: var(--surface); --glass-sheet-bottom: var(--surface); --glass-dialog-top: var(--surface); --glass-dialog-bottom: var(--surface); }
  body { background: var(--bg); }
}
@media (prefers-contrast: more) {
  :root { --glass-rim-top: var(--ink); --glass-rim-mid: var(--ink); --glass-rim-bottom: var(--ink); --glass-tint-top: var(--surface); --glass-tint-bottom: var(--surface); }
}
/* Floating sidebar is a little narrower: keep the slogan on one line */
.sidebar { padding: 20px 10px; }
.sidebar .brand .brand-slogan { font-size: 9.5px; letter-spacing: .04em; white-space: nowrap; }

/* ---------- Every view: panels, summary and notices also use the material (owner request) ---------- */
/* Content panels get the denser "sheet" tint so lists and amounts stay fully readable. */
:is(#homeView, [data-view="movements"], [data-view="recurrences"], [data-view="split"], [data-view="module"], [data-view="tools"]) .panel,
:is(#homeView, [data-view="movements"], [data-view="recurrences"], [data-view="split"], [data-view="module"], [data-view="tools"]) .notice,
#homeView .summary-hero,
#homeView .summary-card {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
}
:is(#homeView, [data-view="movements"], [data-view="recurrences"], [data-view="split"], [data-view="module"], [data-view="tools"]) .panel,
:is(#homeView, [data-view="movements"], [data-view="recurrences"], [data-view="split"], [data-view="module"], [data-view="tools"]) .notice {
  background: linear-gradient(180deg, var(--glass-sheet-top), var(--glass-sheet-bottom));
  box-shadow: inset 0 1px 0 var(--glass-lip), var(--glass-shadow);
}
:is(#homeView, [data-view="movements"], [data-view="recurrences"], [data-view="split"], [data-view="module"], [data-view="tools"]) .notice-warning { background: linear-gradient(180deg, rgba(255, 244, 226, .86), rgba(255, 236, 206, .74)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(#homeView, [data-view="movements"], [data-view="recurrences"], [data-view="split"], [data-view="module"], [data-view="tools"]) .notice-warning { background: linear-gradient(180deg, rgba(64, 48, 24, .78), rgba(43, 34, 20, .70)); }
}
/* Same dark rules when the user picks dark with the theme button */
:root[data-theme="dark"] :is(#homeView, [data-view="movements"], [data-view="recurrences"], [data-view="split"], [data-view="module"], [data-view="tools"]) .notice-warning { background: linear-gradient(180deg, rgba(64, 48, 24, .78), rgba(43, 34, 20, .70)); }
/* Summary: tinted green glass with frosted inner cards */
#homeView .summary-hero {
  background: linear-gradient(160deg, var(--glass-accent-top), var(--glass-accent-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px rgba(5, 88, 78, .20), 0 22px 44px -14px rgba(5, 88, 78, .45);
}
#homeView .summary-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px -8px rgba(0, 0, 0, .25);
  border-radius: var(--radius-control);
}
#homeView .summary-card.is-late { background: linear-gradient(180deg, rgba(255, 214, 196, .32), rgba(255, 190, 170, .14)); }

/* Rim */
:is(#homeView, [data-view="movements"], [data-view="recurrences"], [data-view="split"], [data-view="module"], [data-view="tools"]) .panel::before, :is(#homeView, [data-view="movements"], [data-view="recurrences"], [data-view="split"], [data-view="module"], [data-view="tools"]) .notice::before, #homeView .summary-hero::before, #homeView .summary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--glass-rim-top) 0%, var(--glass-rim-mid) 42%, var(--glass-rim-bottom) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
#homeView .summary-hero::before, #homeView .summary-card::before {
  background: linear-gradient(180deg, rgba(220, 255, 246, .75) 0%, rgba(255, 255, 255, .12) 45%, rgba(0, 0, 0, .18) 100%);
}
/* Specular: a thin band at the top that follows the pointer and brightens on hover, never over the content */
:is(#homeView, [data-view="movements"], [data-view="recurrences"], [data-view="split"], [data-view="module"], [data-view="tools"]) .panel::after, :is(#homeView, [data-view="movements"], [data-view="recurrences"], [data-view="split"], [data-view="module"], [data-view="tools"]) .notice::after, #homeView .summary-hero::after, #homeView .summary-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(90% 90px at var(--gx, 50%) -30px, var(--glass-specular), transparent 70%);
  opacity: var(--glass-specular-rest);
  pointer-events: none;
  z-index: -1;
  transition: opacity .22s ease;
}
#homeView .summary-hero::after, #homeView .summary-card::after {
  background: radial-gradient(90% 80px at var(--gx, 50%) -26px, rgba(255, 255, 255, .55), transparent 70%);
}
#homeView .summary-hero:hover::after, #homeView .summary-card:hover::after, :is(#homeView, [data-view="movements"], [data-view="recurrences"], [data-view="split"], [data-view="module"], [data-view="tools"]) :is(.panel, .notice):hover::after { opacity: var(--glass-specular-hover); }
@media (prefers-reduced-transparency: reduce) {
  :is(#homeView, [data-view="movements"], [data-view="recurrences"], [data-view="split"], [data-view="module"], [data-view="tools"]) .panel, :is(#homeView, [data-view="movements"], [data-view="recurrences"], [data-view="split"], [data-view="module"], [data-view="tools"]) .notice { background: var(--surface); }
}

/* Transporte: the refuel table sits on the glass panel, so its own background gives way to the material */
/* Module pages (Transporte, Planificación, Configuración): tables sit on the glass panel */
[data-view="module"] .module-panel table,
[data-view="tools"] .panel table { background: transparent; }
[data-view="module"] .module-panel th,
[data-view="tools"] .panel th { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
/* Users and shortcuts cards inside the glass panels: light frosted cards instead of flat boxes */
[data-view="tools"] .user-card:not(.user-card-pending) { background: color-mix(in srgb, var(--surface) 55%, transparent); box-shadow: inset 0 1px 0 var(--glass-lip); }

/* ---------- Dialogs: inner sections become frosted insets of the same glass ---------- */
.sheet :is(.split-fieldset, .period-list label, .evidence-list li, .detail-list, .user-card, .occurrence-edit, .profile-hero, .split-methods, .split-modes button:not([aria-pressed="true"])) {
  background: var(--glass-inset);
  border-color: color-mix(in srgb, var(--glass-rim-top) 55%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-lip);
}
.sheet .detail-list { border-radius: var(--radius-control); padding: 4px 12px; }
.sheet .occurrence-edit { border-radius: var(--radius-control); padding: 12px; border-top: 0; }
.sheet .profile-hero { border-radius: var(--radius-card); padding: 12px; }
.sheet .sheet-header { padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--glass-rim-top) 45%, transparent); }
.sheet table { background: transparent; }
.sheet th { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
#homeView .summary-card.is-soon { background: linear-gradient(180deg, rgba(255, 236, 196, .30), rgba(255, 214, 150, .12)); }
@media (prefers-reduced-motion: reduce) { button.summary-card:is(:hover, :active) { transform: none; } }
/* Dashboard switch: glass pills; the selected one is tinted like primary actions */
.dashboard-switch button {
  background: linear-gradient(180deg, var(--glass-tint-top), var(--glass-tint-bottom));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color: color-mix(in srgb, var(--glass-rim-top) 70%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-lip), var(--glass-shadow);
  transition: transform .18s ease, box-shadow .2s ease;
}
.dashboard-switch button:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--glass-lip), var(--glass-shadow-lift); }
.dashboard-switch button:active { transform: scale(.975); }
.dashboard-switch button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--glass-accent-top), var(--glass-accent-bottom));
  border-color: var(--glass-accent-rim); color: #fff;
}
@media (prefers-reduced-motion: reduce) { .dashboard-switch button:is(:hover, :active) { transform: none; } }