/* BETIME — BEQUALITY visual language, adapted to a dense planning workspace.
   Source: BEQUALITY/public/ui-theme.css tokens, glass panels and cyan background.
   Keep layout/interaction contracts in styles.css; blur only outer surfaces. */
:root {
  --be-ink: #15343e;
  --be-muted: #58727b;
  --be-bg: #ecf5fc;
  --be-primary: #1294aa;
  --be-primary-strong: #0e7d8f;
  --be-line: rgba(255, 255, 255, .82);
  --be-line-soft: rgba(173, 205, 218, .62);
  --be-glass: rgba(255, 255, 255, .62);
  --be-glass-strong: rgba(255, 255, 255, .82);
  --be-shadow: 0 14px 34px rgba(14, 56, 68, .11), inset 0 1px 0 rgba(255, 255, 255, .88);
  --surface: var(--be-glass-strong);
  --surface-muted: #e7f1f6;
  --text: var(--be-ink);
  --text-main: var(--be-ink);
  --text-soft: var(--be-muted);
  --primary: var(--be-primary);
  --primary-strong: var(--be-primary-strong);
  --accent: #1f7b90;
  --secondary: #e7f1f6;
  --border: var(--be-line-soft);
  --radius: 18px;
  --shadow: var(--be-shadow);
  --shadow-raised: 0 16px 38px rgba(14, 56, 68, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
}
html { background: var(--be-bg); }
body, .client-login-shell {
  font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  color: var(--be-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at 5% -12%, rgba(18,148,170,.30), rgba(18,148,170,.12) 30%, transparent 59%),
    radial-gradient(circle at 96% 3%, rgba(67,197,219,.22), rgba(67,197,219,.08) 27%, transparent 56%),
    linear-gradient(125deg, #ecf5fc 0%, #dceff7 48%, #ecf5fc 100%);
  background-attachment: fixed;
}
body { font-size: 14px; line-height: 1.45; }
h1, h2, h3, h4 { font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif; color: var(--be-ink); }
button, input, select, textarea { font-family: inherit; }
button { font-size: .82rem; font-weight: 650; border-radius: 12px; transition: background .15s, border-color .15s; }
button.primary { color: #fff; background: var(--be-primary); box-shadow: none; }
button.primary:hover { background: var(--be-primary-strong); }
button.secondary, button.ghost { background: rgba(255,255,255,.78); border: 1px solid rgba(167,197,209,.82); color: #15505d; }
button.secondary:hover, button.ghost:hover { background: rgba(255,255,255,.98); border-color: #82bac7; }
button:disabled { opacity: .48; cursor: not-allowed; }
:where(button, a, summary, input, select, textarea):focus-visible { outline: 3px solid rgba(18,148,170,.7); outline-offset: 3px; }
label { color: #3d5963; font-size: .79rem; font-weight: 650; }
input, select, textarea { min-height: 40px; border: 1px solid rgba(167,197,209,.78); background: rgba(255,255,255,.88); border-radius: 12px; color: var(--be-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
input:focus, select:focus, textarea:focus { border-color: var(--be-primary); box-shadow: 0 0 0 3px rgba(18,148,170,.12); }
input::placeholder, textarea::placeholder { color: #7d929b; }
input[type="checkbox"], input[type="radio"] { min-height: auto; accent-color: var(--be-primary); }

/* Translucent navigation, matching the BEQUALITY dedicated navigation surface. */
.sidebar {
  background: linear-gradient(145deg, rgba(255,255,255,.52), rgba(224,248,250,.34));
  border-right: 1px solid var(--be-line);
  color: var(--be-ink); padding: 24px 16px;
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  scrollbar-width: thin; scrollbar-color: #bad5e0 transparent;
}
.sidebar .brand { gap: 13px; padding: 0 8px 22px; margin-bottom: 20px; border-color: rgba(173,205,218,.55); }
.sidebar .brand-logo { width: 45px; height: 45px; object-fit: contain; padding: 3px; background: rgba(255,255,255,.65); border: 1px solid var(--be-line); border-radius: 13px; }
.sidebar .brand h1 { color: var(--be-ink); font-size: 1.03rem; letter-spacing: .06em; }
.sidebar .brand p { color: var(--be-muted); font-size: .72rem; margin-top: 2px; }
.nav-group { gap: 3px; }
.nav-group-label { color: #637e89; font-size: .62rem; letter-spacing: .13em; margin: 18px 13px 8px; }
.nav-group:first-child .nav-group-label { margin-top: 0; }
.sidebar .nav-item { display: flex; align-items: center; gap: 11px; margin: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; color: #375760; font-size: .82rem; font-weight: 600; line-height: 1.35; background: transparent; }
.nav-icon { flex: 0 0 17px; width: 17px; height: 17px; opacity: .85; }
.sidebar .nav-item:hover { background: rgba(255,255,255,.48); color: #123b46; }
.sidebar .nav-item.active { background: rgba(255,255,255,.88); color: #0e7d8f; border-color: rgba(255,255,255,.9); font-weight: 750; box-shadow: 0 5px 16px rgba(14,56,68,.07); }
.sidebar .sidebar-close { color: var(--be-ink); border-color: var(--be-line); background: rgba(255,255,255,.66); }
.sidebar-mobile-account { border-color: var(--be-line-soft); }
.sidebar-mobile-account label, .sidebar-mobile-user small { color: var(--be-muted); }
.sidebar-mobile-user span { color: var(--be-ink); }
.sidebar-mobile-actions .ghost { color: #15505d; background: var(--be-glass-strong); }

.main-content { padding: 24px 30px 40px; gap: 24px; }
.topbar {
  grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 13px 16px;
  border: 1px solid var(--be-line); border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.52), rgba(224,248,250,.34));
  box-shadow: var(--be-shadow);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.toolbar { gap: 7px; }
.toolbar > label { flex-direction: row; align-items: center; gap: 10px; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; }
.toolbar select { max-width: 235px; font-size: .79rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.user-box { gap: 7px; font-size: .78rem; }
.user-box strong { font-weight: 700; }
.user-box span { font-size: .59rem; letter-spacing: .08em; padding: 4px 6px; background: rgba(238,248,251,.82); border: 1px solid var(--be-line-soft); border-radius: 7px; color: #365762; }
.user-box button { font-size: .72rem; padding: 7px 9px; }
.view.active { gap: 20px; }
.view-header { gap: 6px; }
.view-header h2 { font-size: 1.65rem; font-weight: 700; letter-spacing: -.025em; }
.view-header p { color: var(--be-muted); font-size: .85rem; line-height: 1.55; }
.card { padding: 21px; border: 1px solid var(--be-line); background: var(--be-glass); border-radius: 18px; box-shadow: var(--be-shadow); }
.card h3 { font-size: .94rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: 14px; }
.card .view-header h3 { margin-bottom: 3px; }
.grid-2 { gap: 18px; }

/* Transparent overview, live indicators stay readable on a stronger inner surface. */
.dashboard-intro { position: relative; overflow: hidden; min-height: 180px; padding: 30px 190px 30px 32px; border: 1px solid var(--be-line); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.52), rgba(224,248,250,.34)); box-shadow: var(--be-shadow); }
.dashboard-intro::after { content: ""; position: absolute; width: 280px; height: 280px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; right: -92px; top: -138px; box-shadow: 0 0 0 27px rgba(255,255,255,.12), 0 0 0 55px rgba(255,255,255,.08); pointer-events: none; }
.dashboard-eyebrow { color: #0e7d8f; font-size: .63rem; letter-spacing: .14em; font-weight: 800; text-transform: uppercase; }
.dashboard-intro h2 { font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif; font-size: clamp(1.85rem,2.6vw,2.5rem); font-weight: 700; line-height: 1.13; letter-spacing: -.035em; margin: 10px 0 9px; }
.dashboard-intro p { color: var(--be-muted); max-width: 440px; font-size: .86rem; }
.dashboard-mascot { position: absolute; right: 30px; bottom: 15px; width: 133px; height: 143px; object-fit: contain; filter: drop-shadow(0 8px 9px rgba(14,56,68,.1)); }
.kpi-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.kpi { border: 1px solid var(--be-line); background: rgba(255,255,255,.72); border-radius: 15px; padding: 18px 20px; min-width: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.88); }
.kpi span { display: block; font-size: .72rem; color: var(--be-muted); }
.kpi strong { margin-top: 10px; color: var(--be-ink); font-size: 1.9rem; line-height: 1; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.kpi-grid:has(> :nth-child(7):last-child) > :first-child { grid-column: span 2; background: rgba(224,248,250,.66); }
.kpi-grid:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3,minmax(0,1fr)); }
#dashboard .actions-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
#dashboard .actions-grid button { text-align: left; padding: 15px; min-height: 63px; border: 1px solid var(--be-line); border-radius: 13px; background: rgba(255,255,255,.65); font-weight: 650; }
#dashboard .actions-grid button:hover { background: rgba(255,255,255,.9); border-color: #82bac7; }
#dashboard .actions-grid button::after { content: "↗"; float: right; margin-left: 6px; color: var(--be-primary); }
#dashboard .actions-grid button[data-quick-view="planning"] { background: rgba(224,248,250,.65); }
#trial-demo-panel { background: rgba(255,248,229,.75); border-color: rgba(255,255,255,.9); }
#trial-demo-panel p { color: #73613e; margin-bottom: 14px; }
.list > li { border-color: var(--be-line-soft); border-radius: 12px; font-size: .81rem; line-height: 1.65; }
.list strong { font-weight: 700; }
#subscription-list { color: var(--be-muted); }

#privacy .card p { max-width: 70ch; margin: 10px 0 18px; color: var(--be-muted); line-height: 1.7; }
#privacy .card button { margin-top: 4px; min-height: 44px; }

/* Dense content: no blur per row, input, or planning cell. */
.table-wrap.card { padding: 5px 10px; }
table { background: rgba(255,255,255,.46); border-radius: 16px; }
th { background: rgba(226,241,247,.86); color: #3d5963; text-transform: uppercase; font-size: .62rem; letter-spacing: .08em; font-weight: 750; padding: 15px 12px; white-space: nowrap; }
td { padding: 14px 12px; font-size: .8rem; color: #365762; background: rgba(255,255,255,.46); border-color: rgba(178,204,214,.5); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td, tr.selected-row td { background: rgba(224,248,250,.78); }
td button { font-size: .72rem; padding: 6px 9px; }
.badge { border-radius: 8px; padding: 4px 7px; font-size: .64rem; font-weight: 650; letter-spacing: .015em; background: rgba(238,248,251,.82); border-color: rgba(165,196,208,.72); color: #365762; }
.badge.active, .badge.approved, .badge.published { background: rgba(219,243,210,.9); color: #376347; }
.badge.pending, .badge.warning { background: rgba(255,239,204,.92); color: #855821; }
.form-grid { gap: 15px; }
.form-grid input, .form-grid select { width: 100%; min-width: 0; }
dialog { background: rgba(248,253,255,.94); border: 1px solid var(--be-line); border-radius: 24px; box-shadow: 0 25px 90px rgba(7,32,40,.25); }
dialog::backdrop { background: rgba(15,61,71,.35); backdrop-filter: blur(3px); }
.modal-header { background: rgba(226,241,247,.66); padding: 19px 22px; border-color: var(--be-line-soft); }
.modal-header h3 { font-size: 1.05rem; letter-spacing: -.025em; }
.modal-footer { background: rgba(255,255,255,.65); padding: 16px 22px; gap: 9px; border-color: var(--be-line-soft); }
#modal-fields, #action-dialog-fields { padding: 22px; }
.needs-row { border-radius: 13px; background: rgba(255,255,255,.54); padding: 15px; gap: 13px; border-color: var(--be-line-soft); }
.needs-row legend { font-size: .72rem; padding: 0 6px; color: var(--be-muted); }
.needs-preview, .shift-duration-preview { background: rgba(224,248,250,.7); color: #15505d; border-radius: 13px; }
.shift-duration-preview strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.action-summary { font-size: .85rem; line-height: 1.8; }

.planning-command-center { padding: 15px 18px; border-radius: 18px; background: var(--be-glass); border-color: var(--be-line); box-shadow: var(--be-shadow); }
.planning-command-row + .planning-command-row { border-color: var(--be-line-soft); margin-top: 12px; padding-top: 12px; }
.planning-period-nav strong { color: #365762; font-size: .87rem; letter-spacing: -.025em; }
#planning-assistant-btn { background: rgba(224,248,250,.78); color: #0e7d8f; border-color: #8ec8d2; }
#planning-assistant-btn:hover { background: #d2f1f5; }
.planning-kpis { gap: 8px; }
.planning-kpis article { background: rgba(255,255,255,.72); border-radius: 13px; padding: 10px 13px; border-color: var(--be-line); }
.planning-kpis strong { color: var(--be-ink); font-size: 1.02rem; font-weight: 700; letter-spacing: -.025em; }
.planning-kpis span { color: var(--be-muted); font-size: .65rem; }
.planning-kpis article.is-ok { background: rgba(219,243,210,.78); border-color: rgba(255,255,255,.9); }
.planning-kpis article.is-warning { background: rgba(255,241,209,.82); border-color: rgba(255,255,255,.9); }
.planning-kpis article.is-warning strong { color: #855821; }
.planning-advanced > summary, .planning-tools-menu > summary { color: #58727b; font-size: .76rem; }
.planning-tools-popover { border-radius: 18px; background: rgba(248,253,255,.97); border-color: var(--be-line-soft); box-shadow: var(--shadow-raised); padding: 16px; }
.planning-panel-main { padding: 18px; }
.planning-panel-header { gap: 12px; padding-bottom: 5px; }
.planning-panel-header h3 { margin-bottom: 3px; }
.planning-panel-header > div p { font-size: .73rem; color: var(--be-muted); }
.planning-legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--be-muted); font-size: .66rem; }
.planning-legend span { white-space: nowrap; display: inline-flex; gap: 5px; align-items: center; }
.planning-legend span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #78a4ab; }
.planning-legend span:first-child::before { background: #c99449; }
.planning-legend span:nth-child(2)::before { background: #8492b9; }
.planning-matrix-header, .planning-matrix-row { grid-template-columns: 180px repeat(7,minmax(112px,1fr)); min-width: 964px; }
.planning-matrix-group { min-width: 964px; background: #e2f1f6; color: #58727b; border-color: #cddfe7; font-size: .64rem; }
.planning-grid.week-matrix { border-color: #cedfe7; border-radius: 15px; background: rgba(255,255,255,.75); }
.planning-matrix-header, .planning-matrix-corner { background: #e5f1f6; }
.planning-matrix-day { border-color: #d3e4ec; color: #58727b; }
.planning-matrix-day strong { font-weight: 650; }
.planning-matrix-day span { font-size: .76rem; color: #365762; }
.planning-matrix-day.is-today { background: #d4edf3; color: #0e7d8f; }
.planning-employee-cell { background: #f3f9fc; border-color: #d3e4ec; }
.planning-employee-cell strong { color: var(--be-ink); font-weight: 700; }
.planning-employee-cell span, .planning-employee-cell small { color: var(--be-muted); }
.planning-employee-avatar { background: #dcecf3; color: #3d7786; border-radius: 11px; font-weight: 700; }
.planning-matrix-row { background: rgba(255,255,255,.74); border-color: #d9e7ed; }
.planning-matrix-cell { border-color: #d9e7ed; }
.planning-cell-add { color: #89a5b0; border-radius: 9px; }
.planning-cell-add:hover { background: #e9f5f8; color: #0e7d8f; }
.shift, .shift.shift-compact { border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.66); font-size: .75rem; padding: 9px 10px; border-left-width: 3px; }
.shift[data-service="midi"] { background: #faf0dc; border-left-color: #c99449; color: #6f5731; }
.shift[data-service="soir"] { background: #edf0f8; border-left-color: #8492b9; color: #515f82; }
.shift[data-service="journee"] { background: #e2f2f5; border-left-color: #72a7b2; color: #365e68; }
.shift-head { gap: 3px; }
.shift-head strong { white-space: nowrap; font-size: .79rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.shift.shift-compact { padding: 8px 6px; }
.shift.shift-compact .shift-head strong { font-size: .72rem; }
.shift-person { color: inherit; font-size: .76rem; }
.shift small { color: inherit; opacity: .82; font-size: .65rem; }
.shift-menu > summary { color: inherit; background: transparent; }
.shift-actions { border-color: var(--be-line-soft); border-radius: 13px; background: #fafdff; box-shadow: var(--shadow-raised); }
.planning-day-detail { padding: 18px; background: rgba(255,255,255,.48); border: 1px solid var(--be-line); border-radius: 16px; }
.planning-day-detail > h4 { margin-bottom: 16px; color: #365762; font-size: .86rem; }
.planning-day-tab { border-color: var(--be-line); background: rgba(255,255,255,.65); border-radius: 12px; padding: 10px 13px; color: var(--be-muted); }
.planning-day-tab.active { background: rgba(255,255,255,.95); border-color: #82bac7; color: #0e7d8f; }
.shift-template { border-color: var(--be-line-soft); border-radius: 13px; background: rgba(255,255,255,.65); padding: 13px; }
.shift-template.is-armed { border-color: var(--be-primary); background: #e0f3f7; box-shadow: 0 0 0 2px rgba(18,148,170,.16); }
.coverage-chip { border-radius: 10px; background: rgba(238,248,251,.82); border-color: var(--be-line-soft); }
.coverage-chip.under { background: #faf1df; border-color: #eadbb8; }
.coverage-chip.ok { background: #e7f2e1; border-color: #d2e5c9; }

/* Outer glass only: retain sharp cells and limit compositing layers. */
.dashboard-intro, .planning-command-center, .auth-card.client-login-panel {
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.auth-card.client-login-panel { border-radius: 30px; padding: 36px; background: rgba(255,255,255,.88); border-color: rgba(255,255,255,.72); box-shadow: 0 30px 90px rgba(7,32,40,.18); }
.client-login-brand h1 { color: #102b33; }
.client-login-kicker { color: #0f7d8f; }
.client-login-divider { background: linear-gradient(90deg,transparent,#c7dce5,transparent); }
.client-login-input-wrap { background: rgba(255,255,255,.72); border-color: #c8dce5; box-shadow: inset 0 1px 0 rgba(255,255,255,.82); border-radius: 13px; }
.client-login-input-wrap input { background: transparent; box-shadow: none; }
.timeclock-card { max-width: 100%; }
.timeclock-mode-tabs { background: rgba(255,255,255,.52); border-color: var(--be-line); }
.timeclock-mode-tab.active { background: rgba(255,255,255,.88); color: #0e7d8f; }
.trial-status-banner { background: rgba(233,248,251,.94); border-color: #83bfca; color: #164a56; box-shadow: 0 8px 26px rgba(10,90,105,.12); border-radius: 13px; }
.toast { border-radius: 13px; box-shadow: var(--shadow-raised); }

@media (min-width: 1181px) {
  .app-shell { grid-template-columns: 248px minmax(0,1fr); }
  .app-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0,1fr); }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .topbar { grid-template-columns: auto minmax(0,1fr) auto; }
  .main-content { padding: 22px; }
}
@media (max-width: 1180px) {
  .sidebar:not(.open) { box-shadow: none; }
  .sidebar.open { background: rgba(234,247,252,.94); }
}
@media (max-width: 900px) {
  .main-content { padding: 12px 12px 24px; gap: 18px; }
  .topbar { grid-template-columns: minmax(0,1fr) auto auto; padding: 9px 10px; gap: 8px; border-radius: 18px; background: rgba(255,255,255,.82); }
  .mobile-topbar-brand strong { color: var(--be-ink); font-size: .83rem; letter-spacing: .06em; }
  .mobile-topbar-brand img { object-fit: contain; padding: 3px; background: rgba(255,255,255,.5); }
  .mobile-bottom-nav { border-color: var(--be-line); background: rgba(255,255,255,.88); box-shadow: 0 -5px 25px rgba(14,56,68,.08); }
  .mobile-nav-item { color: var(--be-muted); border-radius: 12px; }
  .mobile-nav-item.active { background: rgba(224,248,250,.85); color: #0e7d8f; }
  .toolbar > label { flex-direction: column; align-items: stretch; }
  .view-header h2 { font-size: 1.4rem; }
  .card { padding: 17px; }
  .dashboard-intro { min-height: 161px; padding: 25px 155px 25px 24px; }
  .dashboard-mascot { width: 110px; height: 120px; right: 20px; }
  .kpi, .finance-kpi { padding: 16px; }
}
@media (max-width: 700px) {
  body { background-attachment: scroll; }
  .view.active { gap: 15px; }
  .dashboard-intro { padding: 24px 90px 24px 22px; min-height: 174px; }
  .dashboard-intro h2 { font-size: 1.75rem; }
  .dashboard-intro p { max-width: 235px; font-size: .77rem; }
  .dashboard-mascot { width: 88px; height: 98px; right: 6px; bottom: 14px; }
  .dashboard-eyebrow { font-size: .59rem; }
  .kpi-grid, .kpi-grid:has(> :nth-child(9):last-child) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .kpi-grid:has(> :nth-child(7):last-child) > :first-child { grid-column: auto; }
  .kpi-grid > :last-child:nth-child(odd) { grid-column: span 2; }
  .kpi strong { font-size: 1.7rem; margin-top: 9px; }
  .kpi span { font-size: .67rem; }
  .planning-command-center { padding: 13px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .planning-command-row > button { padding: 10px; font-size: .75rem; }
  .planning-panel-main { padding: 13px; }
  .planning-panel-header { align-items: flex-start; flex-direction: column; }
  .planning-legend { margin-bottom: 5px; }
  .planning-kpis { gap: 7px; }
  .planning-kpis article { padding: 9px 11px; }
  .planning-day-detail { padding: 14px; }
  .planning-grid.day .shift { padding: 13px 14px; margin-bottom: 9px; }
  .planning-grid.day .shift-head strong { font-size: .96rem; }
  .planning-grid.day .shift-person { font-size: .85rem; }
  .planning-grid.day .shift small { font-size: .74rem; }
  .shift-menu .shift-actions { bottom: 78px; }
  #modal-fields, #action-dialog-fields { padding: 17px; }
  .modal-header { padding: 16px 17px; }
  .modal-footer { padding: 14px 17px; }
  .auth-card.client-login-panel { padding: 26px; }
  #dashboard .actions-grid button { padding: 13px; font-size: .77rem; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .topbar, .dashboard-intro, .card { background: rgba(247,252,255,.94); }
}
@media (prefers-reduced-transparency: reduce) {
  .sidebar, .topbar, .dashboard-intro, .card, dialog { background: #f6fbfe; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}