/* =====================================================================
   Bright Mafaza — Premium design layer
   Glassmorphism surfaces over an animated gradient backdrop,
   neumorphic 3D controls, gradient accents and micro-interactions.
   Loaded after app.css; everything here refines that base.
   html.fx-lite (Settings → Appearance → Visual effects: Light) turns
   off blur and motion for older phones.
   ===================================================================== */

:root {
  --accent-2: #5B5BF0;
  --grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent));

  --bg-base: #E8EDF6;
  --ink: #17223D;
  --muted: #5F6B85;
  --line: rgba(120, 136, 170, .22);
  --line-strong: rgba(110, 126, 160, .38);

  --glass: rgba(255, 255, 255, .56);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-border: rgba(255, 255, 255, .72);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .85);
  --glass-shadow: 0 10px 30px -12px rgba(30, 44, 88, .22), 0 2px 6px rgba(30, 44, 88, .05);
  --blur: saturate(170%) blur(18px);

  --neu-bg: #EBEFF7;
  --neu-hi: rgba(255, 255, 255, .95);
  --neu-lo: rgba(146, 160, 192, .55);
  --neu-raise: 5px 5px 12px var(--neu-lo), -5px -5px 12px var(--neu-hi);
  --neu-raise-sm: 3px 3px 7px var(--neu-lo), -3px -3px 7px var(--neu-hi);
  --neu-inset: inset 3px 3px 7px var(--neu-lo), inset -3px -3px 7px var(--neu-hi);
  --neu-inset-sm: inset 2px 2px 4px var(--neu-lo), inset -2px -2px 4px var(--neu-hi);

  --surface: var(--glass-strong);
  --surface-2: rgba(240, 244, 251, .7);
  --paper: var(--bg-base);
  --r: 14px; --r-lg: 22px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
:root[data-theme="dark"] {
  --bg-base: #0B1122;
  --ink: #E7ECF6; --ink-2: #C3CCDD; --muted: #8E9AB3;
  --line: rgba(148, 170, 220, .13);
  --line-strong: rgba(148, 170, 220, .24);
  --glass: rgba(22, 31, 56, .55);
  --glass-strong: rgba(24, 34, 62, .78);
  --glass-border: rgba(255, 255, 255, .08);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .06);
  --glass-shadow: 0 14px 40px -16px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3);
  --neu-bg: #18223B;
  --neu-hi: rgba(255, 255, 255, .055);
  --neu-lo: rgba(0, 0, 0, .55);
  --surface: var(--glass-strong);
  --surface-2: rgba(30, 42, 74, .6);
}

/* ------------------------------------------------------------ backdrop */
body { background: var(--bg-base) !important; color: var(--ink); }
body::before, body::after { content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none; }
body::before {
  background:
    radial-gradient(34vmax 34vmax at 12% 14%, color-mix(in srgb, var(--accent) 48%, transparent), transparent 70%),
    radial-gradient(32vmax 32vmax at 88% 10%, color-mix(in srgb, var(--accent-2) 42%, transparent), transparent 70%),
    radial-gradient(36vmax 36vmax at 82% 88%, rgba(255, 150, 100, .36), transparent 70%),
    radial-gradient(30vmax 30vmax at 18% 86%, rgba(150, 110, 255, .30), transparent 70%);
  animation: drift 38s ease-in-out infinite alternate;
}
body::after { z-index: -1; background: radial-gradient(transparent 60%, color-mix(in srgb, var(--bg-base) 50%, transparent)); }
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(34vmax 34vmax at 10% 12%, color-mix(in srgb, var(--accent) 36%, transparent), transparent 70%),
    radial-gradient(30vmax 30vmax at 90% 8%, color-mix(in srgb, var(--accent-2) 34%, transparent), transparent 70%),
    radial-gradient(30vmax 30vmax at 84% 90%, rgba(236, 72, 153, .16), transparent 70%),
    radial-gradient(28vmax 28vmax at 14% 88%, rgba(56, 120, 255, .18), transparent 70%);
}
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3vmax, -2vmax, 0) scale(1.06); }
  100% { transform: translate3d(-2vmax, 2vmax, 0) scale(1.02); }
}

/* ------------------------------------------------------------ glass surfaces */
.card, .metric, .task-list, .table-wrap, .pcard, .stat-strip, .filters, .empty, .install-qr, .file-item, .combo-list,
.column, .equation, fieldset.group, .recorder, .dropzone, .caller, .hero-money {
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-edge) !important;
}
.card, .metric, .pcard, .task-list, .table-wrap, .stat-strip, .empty { border-radius: var(--r-lg); }
.file-item, .equation, fieldset.group, .recorder, .dropzone, .column { border-radius: 18px; }
.card h3 { font-weight: 720; }

/* Spotlight that follows the pointer on glass cards (fx.js sets --mx/--my) */
.card, .metric, .pcard { position: relative; }
.metric::before, .pcard::after, .card.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .45), transparent 45%);
}
:root[data-theme="dark"] .metric::before, :root[data-theme="dark"] .pcard::after, :root[data-theme="dark"] .card.spot::before {
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 45%);
}
@media (hover: hover) { .metric:hover::before, .pcard:hover::after, .card.spot:hover::before { opacity: 1; } }

/* hover lift for interactive glass */
.metric, .pcard { transition: transform .35s var(--spring), box-shadow .3s; }
@media (hover: hover) {
  .metric:hover, .pcard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -18px rgba(30, 44, 88, .35), var(--glass-edge) !important; }
}

/* ------------------------------------------------------------ sidebar (floating dark glass) */
.sidebar {
  margin: 12px 0 12px 12px; height: calc(100dvh - 24px); top: 12px; border-radius: 26px;
  background: linear-gradient(165deg, rgba(23, 35, 70, .86), rgba(12, 19, 40, .9)) !important;
  -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -24px rgba(9, 15, 35, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
  overflow-y: auto; scrollbar-width: none;
}
.shell { grid-template-columns: calc(var(--side-w) + 12px) 1fr; }
.brand-mark { background: var(--grad) !important; box-shadow: 0 8px 20px -6px var(--accent), inset 0 1px 0 rgba(255,255,255,.35) !important; }
.nav a { position: relative; overflow: hidden; transition: background .2s, color .2s, transform .2s var(--spring); }
.nav a .icon { transition: transform .35s var(--spring); }
@media (hover: hover) { .nav a:hover .icon { transform: scale(1.15) rotate(-6deg); } .nav a:hover { transform: translateX(3px); } }
.nav a.active { background: var(--grad) !important; color: #fff; box-shadow: 0 10px 22px -10px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.nav a.active .icon { color: #fff !important; opacity: 1; }
.nav a.active::before { display: none; }
.nav .count { background: linear-gradient(135deg, #FFB547, #FF7A59); color: #2B1300; box-shadow: 0 4px 10px -4px #FF7A59; }
.side-foot { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .08) !important; }
.side-foot .avatar { background: var(--grad) !important; color: #fff !important; }

/* ------------------------------------------------------------ topbar */
.topbar { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.topbar.scrolled { background: color-mix(in srgb, var(--bg-base) 55%, transparent) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom-color: var(--glass-border) !important; }
.topbar .search input { background: var(--neu-bg) !important; box-shadow: var(--neu-inset) !important; border: 0 !important; border-radius: 14px !important; }

/* ------------------------------------------------------------ neumorphic 3D controls */
.btn, .icon-btn, .chip, .segmented, .tick, .link-btn.neu {
  transition: transform .18s var(--spring), box-shadow .2s ease, background .2s, color .2s, filter .2s;
}
.btn {
  position: relative; overflow: hidden; border: 0 !important; border-radius: 14px; background: var(--neu-bg); color: var(--ink);
  box-shadow: var(--neu-raise-sm);
}
@media (hover: hover) { .btn:hover { box-shadow: var(--neu-raise); transform: translateY(-1px); } }
.btn:active, .btn.pressed { transform: translateY(1px) scale(.98); box-shadow: var(--neu-inset-sm); }
.btn.ghost { background: transparent; box-shadow: none; }
@media (hover: hover) { .btn.ghost:hover { background: var(--neu-bg); box-shadow: var(--neu-raise-sm); } }
.btn.danger { color: var(--debit); }

/* Primary: gradient, raised 3D with a pressed state */
.btn.primary {
  background: var(--grad) !important; color: #fff !important;
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--accent) 75%, transparent), 0 4px 0 -1px color-mix(in srgb, var(--accent-2) 55%, #000 25%),
              inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 6px rgba(0, 0, 0, .12) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .15);
}
@media (hover: hover) { .btn.primary:hover { filter: brightness(1.06) saturate(1.05); transform: translateY(-2px); } }
.btn.primary:active { transform: translateY(3px) scale(.985); box-shadow: 0 4px 10px -6px var(--accent), 0 1px 0 -1px color-mix(in srgb, var(--accent-2) 55%, #000 25%), inset 0 2px 6px rgba(0, 0, 0, .2) !important; }
.btn.danger.solid { background: linear-gradient(135deg, #F0644F, #C2273D) !important; color: #fff !important; box-shadow: 0 12px 22px -10px #C2273D, inset 0 1px 0 rgba(255,255,255,.3) !important; }
.btn.ghost-light { background: rgba(255, 255, 255, .14) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 18px -10px rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn[disabled] { filter: grayscale(.4); }

.icon-btn { border: 0 !important; border-radius: 14px; background: var(--neu-bg) !important; box-shadow: var(--neu-raise-sm) !important; color: var(--ink-2); }
@media (hover: hover) { .icon-btn:hover { box-shadow: var(--neu-raise) !important; color: var(--accent); transform: translateY(-1px); } }
.icon-btn:active { box-shadow: var(--neu-inset-sm) !important; transform: scale(.95); }
.icon-btn .dot { background: linear-gradient(135deg, #FF7A59, #E5294C); box-shadow: 0 0 0 2px var(--neu-bg); }

.chip { border: 0 !important; background: var(--neu-bg) !important; box-shadow: var(--neu-raise-sm); color: var(--ink-2); }
@media (hover: hover) { .chip:hover { color: var(--accent); } }
.chip:active { box-shadow: var(--neu-inset-sm); }
.chip.on, .filters .chip.on { background: var(--grad) !important; color: #fff !important; box-shadow: 0 8px 16px -8px var(--accent), inset 0 1px 0 rgba(255,255,255,.3) !important; }
.chips .chip[data-c] { box-shadow: var(--neu-raise-sm), inset 0 0 0 3px rgba(255,255,255,.25); }
.chips .chip[data-c].on { outline: 3px solid var(--accent); outline-offset: 2px; }

.segmented { background: var(--neu-bg) !important; border: 0 !important; box-shadow: var(--neu-inset); border-radius: 14px; padding: 4px; }
.segmented button { border-radius: 10px; transition: all .25s var(--spring); }
.segmented button.on { background: var(--glass-strong) !important; color: var(--accent); box-shadow: var(--neu-raise-sm); }
:root[data-theme="dark"] .segmented button.on { background: var(--grad) !important; color: #fff; }

/* Inputs: soft inset wells that light up on focus */
.input, .field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .field select, .field textarea,
.filters .input, .filters select, .equation input {
  background: var(--neu-bg) !important; border: 1px solid transparent !important; border-radius: 13px !important;
  box-shadow: var(--neu-inset-sm) !important; transition: box-shadow .25s, border-color .25s, background .25s;
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus, .filters select:focus, .equation input:focus {
  outline: none !important; border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
  box-shadow: var(--neu-inset-sm), 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--debit) !important; }
.check input { accent-color: var(--accent); }
input[type=range] { accent-color: var(--accent); }

/* Tabs as a neumorphic pill track */
.tabs { border-bottom: 0 !important; background: var(--neu-bg); box-shadow: var(--neu-inset); border-radius: 16px; padding: 5px; gap: 4px; width: fit-content; max-width: 100%; }
.tabs a, .tabs button { border-bottom: 0 !important; margin: 0; border-radius: 12px; padding: 8px 14px; transition: all .25s var(--spring); }
.tabs .on { background: var(--grad); color: #fff !important; box-shadow: 0 8px 16px -8px var(--accent), inset 0 1px 0 rgba(255,255,255,.3); }
.tabs .on .n { color: rgba(255, 255, 255, .8); }

/* Completion tick: raised, pops when done */
.tick { border: 0 !important; background: var(--neu-bg) !important; box-shadow: var(--neu-raise-sm); }
.tick.on { background: linear-gradient(135deg, #2FBF71, #12895B) !important; box-shadow: 0 6px 14px -6px #12895B, inset 0 1px 0 rgba(255,255,255,.35) !important; animation: tickPop .45s var(--spring); }
@keyframes tickPop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* FAB */
.fab { background: var(--grad) !important; border-radius: 20px !important;
  box-shadow: 0 16px 30px -10px color-mix(in srgb, var(--accent) 80%, transparent), 0 4px 0 -1px color-mix(in srgb, var(--accent-2) 55%, #000 25%), inset 0 1px 0 rgba(255,255,255,.35) !important;
  transition: transform .25s var(--spring); }
.fab:active { transform: translateY(3px) scale(.94); }
.fab .icon { transition: transform .35s var(--spring); }
@media (hover: hover) { .fab:hover .icon { transform: rotate(90deg); } }

/* Ripple (fx.js) */
.ripple { position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none; background: currentColor; opacity: .22; animation: ripple .6s ease-out forwards; }
.btn.primary .ripple, .nav a.active .ripple, .chip.on .ripple, .tabs .on .ripple, .fab .ripple { background: #fff; opacity: .35; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ------------------------------------------------------------ gradient accents */
.bar { background: var(--neu-bg) !important; border: 0 !important; box-shadow: var(--neu-inset-sm); height: 8px; }
.bar > span { background: var(--grad) !important; box-shadow: 0 0 10px -2px var(--accent); }
.bar.over > span { background: linear-gradient(90deg, #FF8A5B, #E5294C) !important; }
.ring { background: conic-gradient(from -90deg, var(--accent-2), var(--c, var(--accent)) calc(var(--p) * 1%), color-mix(in srgb, var(--line-strong) 60%, transparent) 0) !important;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--accent) 25%, transparent)); }
.ring::before { background: var(--glass-strong) !important; box-shadow: var(--neu-inset-sm); }
.avatar { background: var(--grad) !important; color: #fff !important; box-shadow: 0 6px 12px -6px var(--accent), 0 0 0 2px rgba(255,255,255,.6); }
.page-head h1 { background: linear-gradient(120deg, var(--ink) 30%, color-mix(in srgb, var(--accent) 70%, var(--ink))); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .page-head h1 { background: linear-gradient(120deg, #fff 30%, color-mix(in srgb, var(--accent) 60%, #fff)); -webkit-background-clip: text; background-clip: text; }

/* Metric tiles: gradient icon orbs per tone */
.tone-teal { --g1: #12B3A2; --g2: #0B7C8F; } .tone-blue { --g1: #5B8CFF; --g2: #3A4FD8; } .tone-red { --g1: #FF8A65; --g2: #E5294C; }
.tone-green { --g1: #3DD68C; --g2: #13905C; } .tone-amber { --g1: #FFC35A; --g2: #F07A1C; } .tone-violet { --g1: #A88BFF; --g2: #6D4AE0; } .tone-grey { --g1: #A7B2C8; --g2: #6B7894; }
.metric-ic, .h-ic { background: linear-gradient(135deg, var(--g1), var(--g2)) !important; color: #fff !important;
  box-shadow: 0 10px 18px -8px var(--g2), inset 0 1px 0 rgba(255, 255, 255, .4); }
.metric-ic { width: 44px; height: 44px; border-radius: 14px; transition: transform .4s var(--spring); }
@media (hover: hover) { .metric:hover .metric-ic { transform: translateY(-2px) rotate(-6deg) scale(1.06); } }
.metric::after { background: radial-gradient(circle, color-mix(in srgb, var(--g1) 26%, transparent), transparent 70%) !important; width: 140px !important; height: 140px !important; }
.mini-bar { background: var(--neu-bg); box-shadow: var(--neu-inset-sm); height: 6px; }
.mini-bar i { background: linear-gradient(90deg, var(--g1, var(--accent)), var(--g2, var(--accent-2))) !important; }
.metric-value:not(.money) { font-size: 30px; }
.tone-red .metric-value:not(.money) { background: linear-gradient(135deg, var(--g1), var(--g2)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }

/* Hero: vivid gradient with glass ledger card */
.hero {
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(255, 255, 255, .06) 31px 32px),
    radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--accent-2) 70%, transparent), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--accent) 75%, transparent), transparent 70%),
    linear-gradient(135deg, #182A57 0%, #111A36 100%) !important;
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--accent-2) 70%, #000), inset 0 1px 0 rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255, 255, 255, .1);
}
.hero::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); animation: float 12s ease-in-out infinite alternate; }
@keyframes float { to { transform: translate(-40px, 30px); } }
.hero-money { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2) !important; }
.hero .beam { box-shadow: inset 2px 2px 5px rgba(0,0,0,.35), inset -1px -1px 2px rgba(255,255,255,.1); }
.hero .beam .in { background: linear-gradient(90deg, #13B07A, #5CF0A8) !important; box-shadow: 0 0 14px rgba(92, 240, 168, .6); }
.hero .beam .out { background: linear-gradient(90deg, #FF8A65, #E5294C) !important; box-shadow: 0 0 14px rgba(229, 41, 76, .5); }

/* Badges with soft gradients */
.badge { border: 0 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); }
.badge.completed, .badge.paid, .badge.active, .badge.receivable { background: linear-gradient(135deg, rgba(61, 214, 140, .2), rgba(19, 144, 92, .14)) !important; }
.badge.overdue, .badge.unpaid, .badge.urgent, .badge.payable { background: linear-gradient(135deg, rgba(255, 138, 101, .22), rgba(229, 41, 76, .14)) !important; }
.badge.partial, .badge.high, .badge.on_hold, .badge.review { background: linear-gradient(135deg, rgba(255, 195, 90, .26), rgba(240, 122, 28, .14)) !important; }
.badge.in_progress, .badge.planning { background: linear-gradient(135deg, rgba(91, 140, 255, .22), rgba(58, 79, 216, .14)) !important; }

/* Project cards */
.pcard > .top { background: linear-gradient(160deg, color-mix(in srgb, var(--pc, var(--accent)) 22%, transparent), transparent 75%) !important; border-top: 0 !important; position: relative; }
.pcard > .top::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 4px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, var(--pc, var(--accent)), var(--accent-2)); }

/* Lists and tables */
.task-row { border-bottom-color: var(--line) !important; }
.task-row::before { background: var(--grad) !important; width: 4px !important; }
@media (hover: hover) { .task-row:hover { background: color-mix(in srgb, var(--glass-strong) 60%, transparent) !important; } }
table.data thead tr { background: color-mix(in srgb, var(--neu-bg) 70%, transparent) !important; }
table.data td, table.data th { border-bottom-color: var(--line) !important; }
table.ledger td.bal, table.ledger th.bal { background: var(--grad-soft) !important; border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent) !important; }
.date-tile { background: var(--glass-strong) !important; border: 0 !important; box-shadow: var(--neu-raise-sm) !important; border-radius: 14px; }
.date-tile span { background: var(--grad) !important; color: #fff !important; }
.due-dir { box-shadow: var(--neu-raise-sm); }
.due-dir.payable { background: linear-gradient(135deg, #FF8A65, #E5294C) !important; color: #fff !important; }
.due-dir.receivable { background: linear-gradient(135deg, #3DD68C, #13905C) !important; color: #fff !important; }
.deadline, .pp, .due-item { transition: background .2s, transform .25s var(--spring); }
@media (hover: hover) { .deadline:hover, .pp:hover, .due-item:hover { background: color-mix(in srgb, var(--glass-strong) 70%, transparent) !important; transform: translateX(4px); } }

/* ------------------------------------------------------------ modals, toasts, overlays */
.overlay { background: rgba(14, 22, 46, .35) !important; -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); }
.modal { background: var(--glass-strong) !important; -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-border); box-shadow: 0 40px 80px -30px rgba(14, 22, 46, .55), var(--glass-edge) !important; }
.modal-foot { background: color-mix(in srgb, var(--neu-bg) 70%, transparent) !important; border-top-color: var(--line) !important; }
.toast { background: rgba(20, 30, 58, .82) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px !important; box-shadow: 0 20px 40px -16px rgba(0,0,0,.45) !important; animation: toastIn .45s var(--spring) !important; }
.toast.error { background: linear-gradient(135deg, rgba(240, 100, 79, .92), rgba(194, 39, 61, .92)) !important; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.offline-bar { background: linear-gradient(90deg, rgba(255, 195, 90, .3), rgba(240, 122, 28, .2)) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Auth */
.auth-wrap { background: transparent; }
.auth-form form { background: var(--glass) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow), var(--glass-edge) !important; border-radius: 26px !important; }
.auth-art { background:
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(255,255,255,.05) 35px 36px),
    radial-gradient(70% 70% at 100% 0%, color-mix(in srgb, var(--accent-2) 75%, transparent), transparent 70%),
    radial-gradient(70% 70% at 0% 100%, color-mix(in srgb, var(--accent) 75%, transparent), transparent 70%),
    linear-gradient(140deg, #182A57, #0C1430) !important; }
.auth-ledger { animation: float2 7s ease-in-out infinite alternate; }
@keyframes float2 { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(-.5deg) translateY(-10px); } }

/* Bottom navigation: frosted bar with a raised active pill */
.bottom-nav { background: color-mix(in srgb, var(--glass-strong) 85%, transparent) !important; -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-top: 1px solid var(--glass-border) !important; box-shadow: 0 -10px 30px -16px rgba(20, 30, 60, .3); }
.bottom-nav a { position: relative; overflow: hidden; border-radius: 14px; margin: 0 3px; transition: color .2s, transform .25s var(--spring); }
.bottom-nav a.active { color: var(--accent) !important; }
.bottom-nav a.active .icon { background: var(--grad); color: #fff; border-radius: 12px; padding: 5px; width: 32px; height: 28px; box-shadow: 0 8px 14px -6px var(--accent); }
.bottom-nav a:active { transform: scale(.92); }
.install-banner { background: var(--glass-strong) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-color: var(--glass-border) !important; border-radius: 20px !important; }
.ptr { background: var(--glass-strong) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }

/* Page entrance + staggered cards */
#main > div { animation: pageIn .45s var(--ease) both; }
.metrics > *, .grid.auto > *, .dash-row { animation: rise .55s var(--spring) both; }
.metrics > *:nth-child(2) { animation-delay: .04s; } .metrics > *:nth-child(3) { animation-delay: .08s; } .metrics > *:nth-child(4) { animation-delay: .12s; }
.metrics + .metrics > * { animation-delay: .1s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 860px) {
  .sidebar { margin: 0; height: 100dvh; top: 0; border-radius: 0 26px 26px 0; }
  .shell { grid-template-columns: 1fr; }
  :root { --blur: saturate(160%) blur(14px); }
  .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .metric-ic { width: 38px; height: 38px; border-radius: 12px; }
  .metric-value:not(.money) { font-size: 26px; }
  .modal { border-radius: 26px 26px 0 0 !important; }
}

/* ------------------------------------------------------------ light effects (older phones) */
html.fx-lite body::before { animation: none; }
html.fx-lite .card, html.fx-lite .metric, html.fx-lite .task-list, html.fx-lite .table-wrap, html.fx-lite .pcard, html.fx-lite .stat-strip,
html.fx-lite .filters, html.fx-lite .empty, html.fx-lite .modal, html.fx-lite .bottom-nav, html.fx-lite .sidebar, html.fx-lite .topbar.scrolled,
html.fx-lite .file-item, html.fx-lite .equation, html.fx-lite fieldset.group, html.fx-lite .auth-form form, html.fx-lite .hero-money, html.fx-lite .toast {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.fx-lite { --glass: var(--glass-strong); }
:root.fx-lite:not([data-theme="dark"]) { --glass: rgba(255, 255, 255, .9); --glass-strong: rgba(255, 255, 255, .95); }
:root.fx-lite[data-theme="dark"] { --glass: rgba(22, 31, 56, .95); --glass-strong: rgba(24, 34, 62, .97); }
html.fx-lite *, html.fx-lite *::before, html.fx-lite *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
html.fx-lite .ripple { display: none; }

/* Browsers without backdrop-filter: keep glass readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:not([data-theme="dark"]) { --glass: rgba(255, 255, 255, .9); }
  :root[data-theme="dark"] { --glass: rgba(22, 31, 56, .95); }
}
.tick:not(.on) { box-shadow: var(--neu-raise-sm), inset 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent) !important; }