/* ==========================================================================
   360 Degree M - v93 "Aurora Glass" design system
   Modern SaaS CRM: aurora mesh canvas, frosted-glass surfaces, floating
   navigation, minimal ink typography, indigo signal + warm amber highlight.
   Follows ui-ux-pro-max Glassmorphism rules: blur 12-24px, 1px light borders,
   text contrast >= 4.5:1, visible focus, 44px targets, reduced motion/transparency.
   Loaded last - owns the look of every screen.
   ========================================================================== */

/* ---------- Tokens ---------- */
html[data-theme="light"], :root {
  --ink: #0F172A;
  --primary: #4F46E5; --primary-2: #6D5BFF; --primary-soft: rgba(79,70,229,.10); --primary-glow: rgba(79,70,229,.30);
  --accent: #F59E0B;
  --purple: var(--primary); --purple-dark: #4338CA; --purple-light: var(--primary-soft); --purple-glow: var(--primary-glow);
  --signal: var(--primary); --signal-2: #4338CA; --signal-soft: var(--primary-soft); --signal-glow: var(--primary-glow);
  --green: #059669; --green-light: rgba(5,150,105,.12);
  --red: #DC2626; --red-light: rgba(220,38,38,.10);
  --amber: #D97706; --amber-light: rgba(217,119,6,.12);
  --blue: #2563EB; --blue-light: rgba(37,99,235,.10);

  --text: #0F172A; --text2: #475569; --text3: #5B6B82;
  --bg: #EEF1FB;
  --glass: rgba(255,255,255,.50);
  --glass-2: rgba(255,255,255,.72);
  --glass-solid: #FFFFFF;
  --glass-border: rgba(255,255,255,.72);
  --glass-edge: rgba(15,23,42,.06);
  --card: var(--glass); --card-hover: rgba(255,255,255,.82);
  --border: rgba(15,23,42,.09); --border2: rgba(15,23,42,.055);
  --sidebar-bg: var(--glass); --sidebar-border: var(--glass-border);
  --blur: 18px;
  --radius: 20px; --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 30px rgba(55,48,163,.07);
  --shadow-md: 0 2px 4px rgba(15,23,42,.05), 0 16px 44px rgba(55,48,163,.14);
  --shadow-lg: 0 30px 80px rgba(30,27,100,.28);
  --inner: inset 0 1px 0 rgba(255,255,255,.85);
  --font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font); --font-body: var(--font);
  --ease: cubic-bezier(.22,.61,.36,1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --aurora-1: rgba(109,91,255,.62); --aurora-2: rgba(56,160,255,.52); --aurora-3: rgba(255,153,102,.46); --aurora-4: rgba(52,211,153,.34);
}
html[data-theme="dark"] {
  --primary: #8B8CFF; --primary-2: #A78BFA; --primary-soft: rgba(139,140,255,.16); --primary-glow: rgba(139,140,255,.35);
  --signal: var(--primary); --signal-2: #7C7DF5; --signal-soft: var(--primary-soft);
  --purple: var(--primary); --purple-light: var(--primary-soft);
  --text: #EEF0FF; --text2: #B7BCD9; --text3: #8E94B8;
  --bg: #080A1A;
  --glass: rgba(24,27,58,.55); --glass-2: rgba(30,34,70,.72); --glass-solid: #151833;
  --glass-border: rgba(255,255,255,.09); --glass-edge: rgba(255,255,255,.05);
  --card: var(--glass); --card-hover: rgba(36,40,82,.7);
  --border: rgba(255,255,255,.09); --border2: rgba(255,255,255,.055);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 34px rgba(0,0,0,.35);
  --shadow-md: 0 18px 50px rgba(0,0,0,.45);
  --inner: inset 0 1px 0 rgba(255,255,255,.07);
  --aurora-1: rgba(99,102,241,.38); --aurora-2: rgba(14,165,233,.22); --aurora-3: rgba(236,72,153,.18); --aurora-4: rgba(20,184,166,.14);
}

/* ---------- Canvas: aurora mesh ---------- */
html { background: var(--bg); } body { background: transparent !important; }
body { font-family: var(--font); color: var(--text); font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
.app { background: transparent; isolation: isolate; }
body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; min-height: 120vh; pointer-events: none;
  background:
    radial-gradient(46% 42% at 14% 6%, var(--aurora-1), transparent 72%),
    radial-gradient(38% 36% at 92% 12%, var(--aurora-2), transparent 70%),
    radial-gradient(40% 40% at 82% 96%, var(--aurora-3), transparent 70%),
    radial-gradient(36% 34% at 8% 88%, var(--aurora-4), transparent 70%);
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-2%, 2%, 0) scale(1.06); } }
.main { background: transparent; }
h1, h2, h3, h4 { font-family: var(--font); letter-spacing: -.025em; font-weight: 700; color: var(--text); }
::selection { background: var(--primary-soft); }
* { scrollbar-width: thin; scrollbar-color: rgba(100,110,150,.35) transparent; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 10px; }

/* ---------- Glass surface mixin ---------- */
.card, .kpi-card, .sidebar, .header, .bottom-nav, .modal, .pp-block, .pp-stats div, .item-row, .unified-work-row, .work-row, .content-row {
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  backdrop-filter: blur(var(--blur)) saturate(160%);
}
.card, .kpi-card, .item-row, .unified-work-row, .work-row, .content-row {
  background: var(--glass); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow), var(--inner); border-radius: var(--radius);
}
html[data-theme="dark"] .card, html[data-theme="dark"] .kpi-card { border-color: var(--glass-border); }
.card { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.card:hover { box-shadow: var(--shadow-md), var(--inner); }
.card .card, .card .item-row, .card .unified-work-row, .card .work-row, .card .content-row {
  background: var(--glass-2); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--inner);
  border-color: var(--glass-edge); border-radius: 16px;
}
.card .card:hover, .card .item-row:hover, .card .unified-work-row:hover, .card .work-row:hover { border-color: color-mix(in srgb, var(--primary) 35%, transparent); box-shadow: var(--shadow); transform: translateY(-1px); }

/* ---------- Floating sidebar ---------- */
.sidebar {
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-md), var(--inner);
  color: var(--text); border-radius: 0 28px 28px 0; width: 272px; top: 0; height: 100dvh;
}
.sidebar-logo { padding: 20px 18px 14px; gap: 12px; border-bottom: 1px solid var(--border2); background: transparent !important; position: static; min-height: 0; }
.sidebar-brand-image, .header-brand-image { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 14px; background: var(--glass-solid); padding: 5px; box-shadow: 0 6px 18px var(--primary-glow), var(--inner); }
.sidebar-logo-text { color: var(--text); font-family: var(--font); font-weight: 800; font-size: 16px; letter-spacing: -.025em; }
.sidebar-logo-sub { color: var(--text3); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.sidebar-nav { padding: 12px; }
.sidebar-nav-label { color: var(--text3); font-size: 10.5px; letter-spacing: .14em; font-weight: 700; padding: 16px 12px 6px; }
.sidebar-link {
  color: var(--text2); border-radius: 14px; min-height: 46px; font-weight: 600; font-size: 14px; gap: 12px; padding: 0 14px; margin-bottom: 4px;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); cursor: pointer;
}
.sidebar-link svg { width: 19px; height: 19px; opacity: .85; }
.sidebar-link:hover { background: var(--primary-soft); color: var(--text); transform: translateX(2px); }
.sidebar-link.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; font-weight: 700;
  box-shadow: 0 8px 22px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,.28); transform: none;
}
.sidebar-link.active::before { display: none; }
.sidebar-link.active svg { color: #fff; opacity: 1; }
.sidebar-bottom { background: transparent; border-top: 1px solid var(--border2); padding: 12px; }
.sidebar-bottom .sidebar-link { color: var(--text2) !important; font-size: 13px; min-height: 44px; }
.sidebar-user { background: var(--glass-2); border: 1px solid var(--glass-edge); border-radius: 16px; color: var(--text); padding: 10px; }
.sidebar-user > div:last-child > div:first-child { color: var(--text) !important; }
.sidebar-user > div:last-child > div:last-child { color: var(--text3) !important; }
.sidebar-backdrop { background: rgba(15,23,42,.35); backdrop-filter: blur(4px); }

/* ---------- Floating header ---------- */
.header {
  margin: 10px 12px 0; height: 58px; border-radius: 20px; padding: 0 10px 0 8px; border: 1px solid var(--glass-border);
  background: var(--glass); box-shadow: var(--shadow), var(--inner); position: sticky; top: 10px; z-index: 60;
}
.header-breadcrumb { font-family: var(--font); font-weight: 700; font-size: 15px; letter-spacing: -.02em; color: var(--text); display: flex; align-items: center; gap: 10px; }
.header-breadcrumb span { color: var(--text); font-weight: 700; }
.header-brand-image { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 11px; }
.header .btn-icon { background: transparent; border: 0; box-shadow: none; color: var(--text2); border-radius: 14px; }
.header .btn-icon:hover { background: var(--primary-soft); color: var(--text); }
.header .avatar { box-shadow: 0 0 0 2px var(--glass-solid), 0 0 0 4px var(--primary); width: 32px !important; height: 32px !important; font-size: 12px !important; }
.notification-badge { position: relative; }

/* ---------- Page ---------- */
.page { padding: 20px 16px calc(104px + var(--safe-b)); }
.page.page-enter > * { animation: rise .5s var(--ease) both; }
.page.page-enter > *:nth-child(2) { animation-delay: .04s; } .page.page-enter > *:nth-child(3) { animation-delay: .08s; }
.page.page-enter > *:nth-child(4) { animation-delay: .12s; } .page.page-enter > *:nth-child(5) { animation-delay: .16s; } .page.page-enter > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.page-header { margin-bottom: 20px; }
.page-header h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.page-header p, .page-header .muted, .muted { color: var(--text3); font-size: 14px; }

/* ---------- KPI ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi-card { padding: 18px; position: relative; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.kpi-card::before { content: ""; position: absolute; inset: auto -30px -40px auto; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, var(--primary-glow), transparent 70%); opacity: .55; width: 120px; }
.kpi-card:nth-child(4n+2)::before { background: radial-gradient(circle, rgba(245,158,11,.35), transparent 70%); }
.kpi-card:nth-child(4n+3)::before { background: radial-gradient(circle, rgba(5,150,105,.30), transparent 70%); }
.kpi-card:nth-child(4n+4)::before { background: radial-gradient(circle, rgba(236,72,153,.28), transparent 70%); }
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md), var(--inner); }
.kpi-label { color: var(--text3); font-size: 11.5px; letter-spacing: .08em; font-weight: 700; text-transform: uppercase; }
.kpi-value { font-family: var(--font); font-size: 34px; font-weight: 800; letter-spacing: -.045em; line-height: 1.1; margin-top: 8px; font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn { min-height: 42px; border-radius: 14px; font-family: var(--font); font-weight: 650; font-size: 13.5px; padding: 0 16px; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s; -webkit-tap-highlight-color: transparent; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 38px; padding: 0 14px; border-radius: 12px; font-size: 13px; }
.btn-purple { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border: 0; box-shadow: 0 8px 22px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-purple:hover { box-shadow: 0 12px 30px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,.3); filter: brightness(1.05); background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.btn-outline { background: var(--glass-2); color: var(--text); border: 1px solid var(--glass-border); box-shadow: var(--inner), 0 1px 2px rgba(15,23,42,.05); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-outline:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: var(--glass-2); }
.btn-icon { min-width: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center; border-radius: 14px; }
button.btn[onclick*="delete"], button.btn[onclick*="Delete"] { color: var(--red); }

/* ---------- Forms ---------- */
.field-label { font-size: 12.5px; font-weight: 650; color: var(--text2); margin-bottom: 6px; display: block; }
.field-input, select.field-input, textarea.field-input, input.field-input {
  width: 100%; min-height: 46px; padding: 11px 14px; font-size: 16px; font-family: var(--font); color: var(--text);
  background: var(--glass-2); border: 1px solid var(--glass-edge); border-radius: 14px; box-shadow: inset 0 1px 2px rgba(15,23,42,.05); transition: border-color .15s, box-shadow .2s, background .2s;
}
.field-input::placeholder { color: var(--text3); opacity: .8; }
.field-input:focus { outline: 0; border-color: var(--primary); background: var(--glass-solid); box-shadow: 0 0 0 4px var(--primary-soft); }
html[data-theme="dark"] .field-input:focus { background: #1b1f45; }
select.field-input, select.mini-status-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.mini-status-select { border-radius: 999px; font-weight: 650; font-size: 12.5px; min-height: 38px; background-color: var(--glass-2); border: 1px solid var(--glass-edge); color: var(--text); padding-left: 14px; }

/* ---------- Chips / tags ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1px solid transparent; letter-spacing: .01em; backdrop-filter: blur(6px); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.tag-green { background: rgba(5,150,105,.12); color: #047857; border-color: rgba(5,150,105,.2); }
.tag-urgent, .tag-overdue { background: rgba(220,38,38,.10); color: #B91C1C; border-color: rgba(220,38,38,.2); }
.tag-amber { background: rgba(217,119,6,.12); color: #B45309; border-color: rgba(217,119,6,.22); }
.tag-blue { background: rgba(37,99,235,.10); color: #1D4ED8; border-color: rgba(37,99,235,.2); }
.tag-purple { background: var(--primary-soft); color: var(--purple-dark); border-color: rgba(79,70,229,.2); }
.tag-gray { background: rgba(100,116,139,.12); color: #475569; border-color: rgba(100,116,139,.2); }
html[data-theme="dark"] .tag-green { color: #6EE7B7; } html[data-theme="dark"] .tag-urgent, html[data-theme="dark"] .tag-overdue { color: #FCA5A5; }
html[data-theme="dark"] .tag-amber { color: #FCD34D; } html[data-theme="dark"] .tag-blue { color: #93C5FD; } html[data-theme="dark"] .tag-purple { color: #C4B5FD; } html[data-theme="dark"] .tag-gray { color: #CBD5E1; }
.avatar { font-family: var(--font); font-weight: 700; box-shadow: 0 6px 16px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.3); }

/* ---------- Work rows & overdue ---------- */
.unified-work-row.overdue, .item-row.overdue, [class*="row"].is-overdue { background: rgba(254,226,226,.55); border-color: rgba(220,38,38,.22); }
html[data-theme="dark"] .unified-work-row.overdue { background: rgba(127,29,29,.25); }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text3); font-weight: 700; background: transparent; }
td, th { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border2); }
tbody tr { transition: background .15s; } tbody tr:hover { background: var(--primary-soft); }

/* ---------- Modal / drawer ---------- */
.modal-overlay { background: rgba(15,23,42,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .25s both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--glass-2); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg), var(--inner); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); }
.modal-header { background: transparent; border-bottom: 1px solid var(--border2); min-height: 64px; }
.modal-header h3 { font-weight: 750; letter-spacing: -.02em; }
@media (min-width: 1024px) {
  .modal { top: 14px; right: 14px; height: calc(100dvh - 28px); border-radius: 28px; width: 480px; }
  .header { margin: 14px 18px 0; top: 14px; height: 62px; padding: 0 14px 0 10px; }
  .sidebar { top: 0; position: relative; margin: 14px 0 14px 14px; height: calc(100dvh - 28px); border-radius: 28px; width: 268px; flex-shrink: 0; }
  .page { padding: 24px 28px 40px; }
  .header-brand-image { display: none !important; }
}
@media (max-width: 1023px) { .sidebar { border-radius: 0 28px 28px 0; box-shadow: none; } .sidebar.open { box-shadow: 24px 0 70px rgba(15,23,42,.35); } }

/* ---------- Floating bottom navigation ---------- */
.bottom-nav {
  left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); width: auto; height: 66px; padding: 6px; border-radius: 26px; border: 1px solid var(--glass-border);
  background: var(--glass-2); box-shadow: var(--shadow-md), var(--inner); gap: 2px;
}
.main { margin-bottom: 0 !important; }
.bottom-nav-item { border-radius: 20px; min-height: 52px; color: var(--text3); font-size: 10.5px; font-weight: 650; position: relative; transition: background .2s var(--ease), color .2s var(--ease), transform .15s; }
.bottom-nav-item:active { transform: scale(.94); }
.bottom-nav-item.active { color: var(--primary); background: var(--primary-soft); }
.bottom-nav-item.active::after { display: none; }
.bottom-nav-item.active svg { filter: drop-shadow(0 4px 8px var(--primary-glow)); }

/* ---------- Page-specific polish ---------- */
.clients-grid-v79 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: stretch; }
.client-card-v79 { display: flex; flex-direction: column; cursor: pointer; padding: 20px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.client-card-v79:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), var(--inner); }
.client-card-actions { margin-top: auto; display: flex; gap: 8px; }
.progress-track { height: 8px; border-radius: 999px; background: rgba(100,116,139,.18); overflow: hidden; }
.progress-track > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-2), var(--accent)); box-shadow: 0 0 12px var(--primary-glow); transition: width .6s var(--ease); }
.v91-toast { background: var(--glass-2); color: var(--text); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--shadow-md); bottom: calc(96px + var(--safe-b)); }

/* ---------- Partner workspace (glass) ---------- */
.partner-panel { border-color: color-mix(in srgb, var(--primary) 35%, var(--glass-border)); background: linear-gradient(160deg, var(--primary-soft), transparent 60%), var(--glass); }
.partner-lock { background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 6px 16px var(--primary-glow); }
.pp-block, .pp-stats div { background: var(--glass-2); border: 1px solid var(--glass-edge); box-shadow: var(--inner); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 16px; }
.pp-stats strong { font-weight: 800; letter-spacing: -.03em; }

/* ---------- Loading screen ---------- */
#bootScreen { background: radial-gradient(60% 50% at 20% 10%, rgba(109,91,255,.55), transparent 70%), radial-gradient(50% 50% at 90% 90%, rgba(56,160,255,.4), transparent 70%), radial-gradient(40% 40% at 80% 5%, rgba(255,153,102,.35), transparent 70%), #0B0D24 !important; font-family: var(--font) !important; }
#bootScreen .boot-card { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 30px; padding: 34px 28px 28px; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 30px 90px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35); animation: rise .6s var(--ease) both; }
#bootScreen .boot-brand-image { background: #fff; border-radius: 28px; padding: 10px; width: 96px !important; height: 96px !important; box-shadow: 0 16px 40px rgba(109,91,255,.55); animation: bootfloat 3s ease-in-out infinite; }
@keyframes bootfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
#bootScreen .boot-logo { font-family: var(--font); font-weight: 800; font-size: 22px; letter-spacing: -.03em; margin-top: 8px; }
#bootScreen .boot-copy { color: rgba(255,255,255,.7); }
#bootScreen .boot-bar { height: 5px; background: rgba(255,255,255,.16); }
#bootScreen .boot-bar span { background: linear-gradient(90deg, #8B8CFF, #FFB36B); box-shadow: 0 0 14px rgba(139,140,255,.8); }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .header { margin: 8px 10px 0; top: 8px; }
  .page { padding: 16px 12px calc(110px + var(--safe-b)); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .kpi-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi-value { font-size: 28px; } .kpi-card { padding: 14px; }
  .modal { left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); border-radius: 28px; width: auto; max-height: 90dvh; border: 1px solid var(--glass-border); padding-bottom: 0; }
  .modal::before { background: rgba(100,116,139,.35); }
  .clients-grid-v79 { grid-template-columns: 1fr; }
}

/* ---------- Accessibility fallbacks ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255,255,255,.94); --glass-2: #fff; }
  html[data-theme="dark"] { --glass: #151833; --glass-2: #1b1f45; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="light"], :root { --glass: rgba(255,255,255,.96); --glass-2: #fff; }
  html[data-theme="dark"] { --glass: #151833; --glass-2: #1b1f45; }
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-reduced-motion: reduce) { body::before, .page.page-enter > *, #bootScreen .boot-card, #bootScreen .boot-brand-image { animation: none !important; } *, *::before, *::after { transition-duration: .01ms !important; } }