/* ============================================================
   Cash Tracker — design system  (neutral-slate · indigo · light)
   Layered over Bootstrap 5.3 — this file reskins every component.
   ============================================================ */

:root{
  color-scheme: light;

  /* neutrals — cool, slight indigo bias */
  --bg:            #f5f6f9;
  --surface:       #ffffff;
  --surface-2:     #fafafc;
  --surface-inset: #f3f4f8;
  --border:        #e7e8ef;
  --border-strong: #d5d7e1;

  --ink:   #1b1c23;
  --ink-2: #585c69;
  --ink-3: #8b8f9d;

  /* one accent — indigo */
  --accent:        #4f46e5;
  --accent-hover:  #4338ca;
  --accent-weak:   #eef0fe;
  --accent-ring:   rgba(79,70,229,.32);

  /* semantic — status only */
  --ok:    #15803d;  --ok-bg:   #e8f4ec;
  --warn:  #b45309;  --warn-bg: #fbf0e3;
  --bad:   #b42318;  --bad-bg:  #fbeae8;
  --info:  #4f46e5;  --info-bg: #eef0fe;

  /* currency cues (quiet) */
  --iqd:  #4f46e5;
  --usd:  #15803d;
  --cc:   #7c3aed;   --cc-bg: #f3effe;

  --chart-bar:  #4f46e5;
  --chart-grid: #ececf1;

  /* legacy Bootstrap-var remap (pages reference these in inline styles) */
  --primary:    #1b1c23;
  --primary-lt: #4f46e5;
  --success:    #15803d;
  --danger:     #b42318;
  --card-bg:    #ffffff;
  --text:       #1b1c23;
  --muted:      #8b8f9d;

  --radius:    8px;
  --radius-sm: 6px;
  --shadow:    0 1px 2px rgba(20,22,40,.04), 0 1px 3px rgba(20,22,40,.06);
  --shadow-pop:0 6px 24px -6px rgba(20,22,40,.18), 0 2px 6px rgba(20,22,40,.08);

  --sidebar-w: 232px;

  --font-ui:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --bs-body-font-family: var(--font-ui);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--border);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-hover); text-decoration:underline; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

.mono,.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.num{ letter-spacing:-.01em; }
.text-primary{ color:var(--ink) !important; }
.text-muted{ color:var(--ink-3) !important; }
.fw-bold{ font-weight:700 !important; }
.fw-semibold{ font-weight:600 !important; }

.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ============================================================ APP SHELL */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  z-index:30;
}
.sidebar .brand{
  display:flex; align-items:center; gap:9px;
  padding:17px 16px 15px;
  text-decoration:none;
}
.sidebar .brand .bmark{
  width:26px; height:26px; border-radius:7px; flex:0 0 26px;
  background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:14px;
}
.sidebar .brand b{ font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-.01em; line-height:1.15; display:block; }
.sidebar .brand span{ font-size:11px; color:var(--ink-3); font-weight:500; }

.sidebar .nav{ padding:6px 10px; display:flex; flex-direction:column; gap:1px; }
.sidebar .nav .sect{
  padding:14px 10px 5px;
  font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
}
.sidebar .nav-link{
  display:flex; align-items:center; gap:11px;
  padding:8px 10px; border-radius:var(--radius-sm);
  color:var(--ink-2); font-size:13px; font-weight:500;
  position:relative;
}
.sidebar .nav-link i{ font-size:15px; color:var(--ink-3); width:18px; text-align:center; }
.sidebar .nav-link:hover{ background:var(--surface-2); color:var(--ink); }
.sidebar .nav-link.active{ background:var(--accent-weak); color:var(--accent); font-weight:600; }
.sidebar .nav-link.active i{ color:var(--accent); }
.sidebar .nav-link.active::before{
  content:""; position:absolute; left:-10px; top:7px; bottom:7px;
  width:2px; border-radius:2px; background:var(--accent);
}

.sidebar .side-foot{
  margin-top:auto; padding:12px 14px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.sidebar .side-foot .avatar{
  width:28px; height:28px; border-radius:50%; flex:0 0 28px;
  background:var(--surface-inset); color:var(--ink-2);
  display:grid; place-items:center; font-size:11px; font-weight:600;
}
.sidebar .side-foot .who{ min-width:0; line-height:1.25; }
.sidebar .side-foot .who b{ font-size:12.5px; font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar .side-foot .who span{ font-size:11px; color:var(--ink-3); }
.sidebar .side-foot a.logout{
  margin-left:auto; color:var(--ink-3); padding:5px; border-radius:5px;
  display:grid; place-items:center;
}
.sidebar .side-foot a.logout:hover{ color:var(--bad); background:var(--bad-bg); }

.main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

.topbar{
  min-height:34px;
  display:flex; align-items:center; gap:9px;
  padding:6px 20px;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  font-size:11.5px; color:var(--ink-3);
}
.topbar .burger{
  display:none; width:26px; height:26px;
  border:1px solid var(--border-strong); border-radius:5px;
  background:var(--surface); color:var(--ink-2);
  align-items:center; justify-content:center; cursor:pointer;
}

.view{ padding:26px 32px 72px; max-width:1180px; width:100%; }

.pagehead{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding-bottom:16px; margin-bottom:22px;
  border-bottom:1px solid var(--border);
}
.pagehead h1,
.pagehead h4{
  font-size:22px; font-weight:600; letter-spacing:-.02em; margin:0;
  color:var(--ink); text-wrap:balance;
}
.pagehead .sub{ margin:3px 0 0; color:var(--ink-3); font-size:13px; }
.pagehead .head-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ============================================================ BUTTONS */
.btn{
  --bs-btn-font-weight:600;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; line-height:1.2;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
}
.btn:hover{ background:var(--surface-2); color:var(--ink); }
.btn:focus,.btn:focus-visible{ box-shadow:0 0 0 3px var(--accent-ring); }
.btn i{ font-size:14px; }
.btn-sm{ padding:5px 10px; font-size:12px; }
.btn-lg{ padding:10px 18px; font-size:14px; }

.btn-primary,
.btn-success,
.btn-submit{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.btn-primary:hover,
.btn-success:hover,
.btn-submit:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; }
.btn-primary:disabled, .btn-primary.disabled,
.btn-success:disabled, .btn-success.disabled,
.btn-submit:disabled,  .btn-submit.disabled{
  background:var(--accent); border-color:var(--accent); color:#fff; opacity:.42;
}

.btn-danger{ background:var(--bad); border-color:var(--bad); color:#fff; }
.btn-danger:hover{ background:#9a1c12; border-color:#9a1c12; color:#fff; }
.btn-warning{ background:var(--warn-bg); border-color:transparent; color:var(--warn); }
.btn-warning:hover{ background:#f6e3c8; border-color:transparent; color:var(--warn); }

.btn-outline-primary{ color:var(--accent); border-color:var(--border-strong); background:var(--surface); }
.btn-outline-primary:hover{ background:var(--accent-weak); color:var(--accent); border-color:var(--accent); }
.btn-outline-secondary{ color:var(--ink-2); border-color:var(--border-strong); background:var(--surface); }
.btn-outline-secondary:hover{ background:var(--surface-2); color:var(--ink); }
.btn-outline-success{ color:var(--accent); border-color:var(--border-strong); background:var(--surface); }
.btn-outline-success:hover{ background:var(--accent-weak); color:var(--accent); border-color:var(--accent); }
.btn-outline-danger{ color:var(--bad); border-color:var(--border-strong); background:var(--surface); }
.btn-outline-danger:hover{ background:var(--bad-bg); color:var(--bad); border-color:var(--bad); }
.btn-outline-warning{ color:var(--warn); border-color:var(--border-strong); background:var(--surface); }
.btn-outline-warning:hover{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn); }
.btn-secondary{ background:var(--surface-inset); border-color:var(--border-strong); color:var(--ink); }

/* ============================================================ CARDS → panels */
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.card-header{
  background:var(--surface);
  color:var(--ink);
  border-bottom:1px solid var(--border);
  border-radius:var(--radius) var(--radius) 0 0 !important;
  font-weight:600; font-size:13px; letter-spacing:-.01em;
  padding:12px 16px;
}
.card-header i{ color:var(--ink-3); }
.card-body{ padding:16px; }
.card-body.p-0{ padding:0; }

/* ============================================================ FIGURE ROWS (replace fat stat cards) */
.figrow{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); overflow:hidden;
}
.figrow .fig{ padding:15px 18px; border-left:1px solid var(--border-strong); }
.figrow .fig:first-child{ border-left:none; }
.fig .k{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.fig .v{ margin-top:7px; font-size:20px; font-weight:600; letter-spacing:-.02em; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.fig .v.big{ font-size:26px; }
.fig .v .unit{ font-family:var(--font-ui); font-size:11px; font-weight:600; color:var(--ink-3); margin-left:5px; letter-spacing:0; }
.fig .v + .v{ margin-top:2px; }
.fig .sub{ margin-top:6px; font-size:11.5px; color:var(--ink-3); }

.figline{ display:flex; flex-wrap:wrap; gap:14px 34px; }
.figline .fig{ padding:0; border:none; }

/* stat-card: kept for compatibility, de-fattened */
.stat-card{
  border:1px solid var(--border); border-left:1px solid var(--border) !important;
  border-radius:var(--radius);
  background:var(--surface); box-shadow:none;
  padding:14px 16px;
}
.stat-card .stat-value{
  font-size:1.35rem; font-weight:600; color:var(--ink);
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.stat-card .stat-label{
  font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; font-weight:600;
  margin-top:3px;
}

/* ============================================================ TABLES */
.table{
  --bs-table-bg:transparent;
  color:var(--ink); font-size:13px; margin-bottom:0;
}
.table > :not(caption) > * > *{ padding:11px 16px; border-bottom-color:var(--border); background:transparent; }
.table > thead > tr > *,
.table > thead.table-light > tr > *{
  background:var(--surface);
  color:var(--ink-3);
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.table > tbody > tr:last-child > *{ border-bottom:0; }
.table-hover > tbody > tr:hover > *{ background:var(--surface-2); }
.table .text-end{ text-align:right; }
.table code{ font-family:var(--font-mono); color:var(--ink-2); background:var(--surface-inset); padding:1px 5px; border-radius:4px; font-size:.85em; }
.total-row td,
.table tfoot td{
  background:var(--surface-2) !important;
  font-weight:600; color:var(--ink);
  border-top:1px solid var(--border); font-size:13px;
}

/* denomination tables */
.denom-table th{ background:var(--surface); color:var(--ink-3); }
.denom-table td{ vertical-align:middle; }
.denom-table .subtotal-cell{ font-family:var(--font-mono); font-weight:500; color:var(--ink); }
.denom-table .qty-input,
.denom-table input[type=number]{
  width:96px; text-align:center; font-family:var(--font-mono);
  margin-left:auto; margin-right:auto; display:block;
}
.denom-table .num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ============================================================ BADGES + TAGS */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:5px;
  font-size:11px; font-weight:600; letter-spacing:.01em;
  background:var(--surface-inset); color:var(--ink-2);
}
.badge.bg-secondary{ background:var(--surface-inset) !important; color:var(--ink-2) !important; }
.badge.bg-primary{ background:var(--accent-weak) !important; color:var(--accent) !important; }
.badge.bg-success{ background:var(--ok-bg) !important; color:var(--ok) !important; }
.badge.bg-danger { background:var(--bad-bg) !important; color:var(--bad) !important; }
.badge.bg-warning{ background:var(--warn-bg) !important; color:var(--warn) !important; }
.badge-draft    { background:var(--warn-bg); color:var(--warn); }
.badge-submitted{ background:var(--ok-bg);   color:var(--ok); }

/* small monospace currency tag */
.ctag{
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  padding:1px 5px; border-radius:4px; letter-spacing:.02em;
  background:var(--surface-inset); color:var(--ink-2); border:1px solid var(--border);
}

/* ============================================================ FORMS */
.form-label{ font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.form-control,.form-select{
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink);
  font-size:13px; padding:8px 11px;
}
.form-control::placeholder{ color:var(--ink-3); }
.form-control:focus,.form-select:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); outline:none;
}
.form-control:disabled,.form-control[readonly]{ background:var(--surface-inset); color:var(--ink-3); }
.form-control-sm,.form-select-sm{ font-size:12.5px; padding:6px 9px; }
.form-text{ font-size:11.5px; color:var(--ink-3); }
.input-group-text{
  background:var(--surface-inset); border-color:var(--border-strong);
  color:var(--ink-3); font-size:13px;
}
textarea.form-control{ min-height:64px; }

/* ============================================================ TABS (nav-tabs) */
.nav-tabs{
  border-bottom:1px solid var(--border); gap:2px;
}
.nav-tabs .nav-link{
  border:none; background:none;
  padding:9px 13px; font-size:13px; font-weight:600; color:var(--ink-3);
  border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:0;
}
.nav-tabs .nav-link:hover{ color:var(--ink-2); border-color:transparent; }
.nav-tabs .nav-link.active{
  color:var(--accent); background:none; border:none;
  border-bottom:2px solid var(--accent);
}

/* ============================================================ ALERTS / FLASH */
.alert{
  border:none; border-radius:var(--radius-sm);
  font-size:12.5px; padding:11px 14px;
  color:var(--ink-2);
}
.alert-info{ background:var(--info-bg); }
.alert-success{ background:var(--ok-bg); color:var(--ok); }
.alert-warning{ background:var(--warn-bg); color:var(--warn); }
.alert-danger{ background:var(--bad-bg); color:var(--bad); }
.alert .btn-close{ padding:12px; }
.flash{ box-shadow:var(--shadow); }

/* ============================================================ MODALS */
.modal-content{ border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-pop); }
.modal-header{
  background:var(--surface) !important; color:var(--ink) !important;
  border-bottom:1px solid var(--border); padding:14px 16px;
}
.modal-header .modal-title{ font-size:14px; font-weight:600; }
.modal-header .btn-close{ filter:none; }
.modal-body{ padding:16px; font-size:13px; }
.modal-footer{ border-top:1px solid var(--border); padding:12px 16px; }

/* ============================================================ SUMMARY RAIL */
.rail{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow); overflow:hidden;
  position:sticky; top:20px;
}
.rail .rhead{ padding:11px 16px; border-bottom:1px solid var(--border); }
.rail .rrow{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:9px 16px; border-bottom:1px solid var(--border); font-size:13px;
}
.rail .rrow .lbl{ color:var(--ink-2); display:flex; align-items:center; gap:7px; }
.rail .rrow .amt{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.rail .rgrand{ padding:13px 16px; background:var(--surface-2); }
.rail .rgrand .amt{
  font-family:var(--font-mono); font-size:19px; font-weight:600; letter-spacing:-.02em;
  display:flex; justify-content:space-between; align-items:baseline; margin-top:3px;
}
.rail .ractions{ padding:12px 16px; display:flex; flex-direction:column; gap:8px; }
.rail .ractions .btn{ justify-content:center; }

/* ============================================================ MISC BLOCKS */
.strip{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px;
  padding:10px 16px; margin-bottom:16px;
  background:var(--accent-weak); border-radius:var(--radius);
  font-size:12.5px; color:var(--ink-2);
}
.strip b{ color:var(--ink); font-family:var(--font-mono); }

.filterbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px;
  padding:11px 14px; margin-bottom:20px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);
}
.filterbar label{
  font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); margin:0;
}
.filterbar .form-control,
.filterbar .form-select{ width:auto; min-width:130px; font-size:12.5px; padding:6px 9px; }
.filterbar .sep{ width:1px; align-self:stretch; background:var(--border); margin:0 2px; }

.callout{
  display:flex; gap:10px; padding:11px 13px; border-radius:var(--radius-sm);
  background:var(--info-bg); font-size:12.5px; color:var(--ink-2); line-height:1.45;
}
.callout i{ color:var(--accent); margin-top:1px; }

.metagrid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
.metagrid > div{ background:var(--surface); padding:12px 14px; }
.metagrid .k{ font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.metagrid .v{ margin-top:4px; font-size:13px; font-weight:500; }

.section-label{
  font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-3); margin:30px 0 12px;
}

/* chart */
.chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.chart .axis{ font-family:var(--font-mono); font-size:10px; fill:var(--ink-3); }
.chart .bar{ fill:var(--chart-bar); }

/* ============================================================ LEGACY INLINE-STYLE NEUTRALISATION
   Older pages carry hard-coded navy / green / purple in style="" attributes.
   These rules fold them back onto the design system without touching every line. */
.view [style*="color:#1a3a5c"],
.view [style*="color:#1a6b2e"],
.view [style*="color:#7c3aed"],
.view [style*="color:#166534"],
.view [style*="color:#1e40af"]{ color:var(--ink) !important; }

.view .badge[style*="background:#1a6b2e"],
.view .badge[style*="background:#7c3aed"]{
  background:var(--surface-inset) !important; color:var(--ink-2) !important;
}
.view .badge.bg-light{ background:var(--surface-inset) !important; color:var(--ink-2) !important; border:1px solid var(--border) !important; }

.view tr[style*="background:#7c3aed"]{ background:var(--surface) !important; }
.view tr[style*="background:#7c3aed"] th,
.view tr[style*="background:#7c3aed"] td{ color:var(--ink-3) !important; background:var(--surface) !important; }

.view [style*="background:#f0fdf4"],
.view [style*="background:#eff6ff"],
.view [style*="background:#faf5ff"],
.view [style*="background:#f1f5f9"],
.view [style*="background:#f3e8ff"]{
  background:var(--surface-2) !important; border-color:var(--border) !important;
}

.view h6[style*="color:#7c3aed"]{ color:var(--ink) !important; border-color:var(--border) !important; }

.view [style*="#bbf7d0"],
.view [style*="#bfdbfe"],
.view [style*="#e9d5ff"],
.view [style*="#c4b5fd"]{ border-color:var(--border) !important; }

/* dark card headers set via inline style on older pages */
.view .card-header[style*="background:#1a3a5c"],
.view .card-header[style*="background:#1a6b2e"],
.view .card-header[style*="background:#b45309"],
.view .card-header[style*="background:#374151"],
.view .card-header[style*="background:#dc2626"],
.view .card-header[style*="background:#92400e"]{
  background:var(--surface) !important; color:var(--ink) !important;
}
.view .card-header[style*="background:#dc2626"]{ color:var(--bad) !important; }

/* modal headers set dark inline */
.modal-header[style*="background"]{ background:var(--surface) !important; color:var(--ink) !important; }
.btn-close-white{ filter:none !important; }

/* ============================================================ LOGIN */
.login-wrapper{
  min-height:100vh; display:grid; place-items:center;
  background:var(--bg); padding:24px;
}
.login-card{
  width:100%; max-width:380px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow-pop); overflow:hidden;
}
.login-header{
  background:var(--surface); color:var(--ink);
  padding:26px 28px 8px; text-align:left;
}
.login-header .bmark{
  width:34px; height:34px; border-radius:9px;
  background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:18px; margin-bottom:14px;
}
.login-header h4{ font-size:16px; font-weight:600; letter-spacing:-.01em; margin:0; }
.login-header p{ margin:2px 0 0; color:var(--ink-3); font-size:12.5px; opacity:1; }
.login-body{ background:var(--surface); padding:18px 28px 26px; }

/* ============================================================ RESPONSIVE */
@media (max-width: 991px){
  .sidebar{
    position:fixed; left:0; top:0; transform:translateX(-100%);
    transition:transform .18s ease; box-shadow:var(--shadow-pop);
  }
  .sidebar.open{ transform:translateX(0); }
  .topbar .burger{ display:flex; }
  .view{ padding:20px 16px 64px; }
  .pagehead{ flex-direction:column; }
  .metagrid{ grid-template-columns:repeat(2,1fr); }
  .figrow{ grid-auto-flow:row; }
  .figrow .fig{ border-left:none; border-top:1px solid var(--border-strong); }
  .figrow .fig:first-child{ border-top:none; }
  .rail{ position:static; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}