:root {
  --bg: #f4f7fb;
  --bg-pattern: radial-gradient(circle at 18% 12%, rgba(212,175,55,.15), transparent 28%), radial-gradient(circle at 82% 4%, rgba(15,23,42,.12), transparent 24%);
  --surface: #ffffff;
  --surface-2: #eef3f8;
  --text: #142033;
  --muted: #64748b;
  --line: #dbe4ef;
  --primary: #0f172a;
  --primary-2: #1e293b;
  --accent: #d4af37;
  --good: #047857;
  --warn: #b45309;
  --bad: #b91c1c;
  --radius: 8px;
  --shadow: 0 14px 34px rgba(15, 23, 42, .10);
  --shadow-soft: 0 8px 20px rgba(15, 23, 42, .07);
}

.theme-emerald { --primary:#064e3b; --primary-2:#065f46; --accent:#22c55e; --bg:#f0fdf4; --bg-pattern:radial-gradient(circle at 20% 10%, rgba(34,197,94,.18), transparent 30%), radial-gradient(circle at 90% 0%, rgba(6,95,70,.14), transparent 26%); }
.theme-indigo { --primary:#312e81; --primary-2:#4338ca; --accent:#f59e0b; --bg:#f5f5ff; --bg-pattern:radial-gradient(circle at 20% 10%, rgba(99,102,241,.18), transparent 30%), radial-gradient(circle at 90% 0%, rgba(245,158,11,.13), transparent 26%); }
.theme-crimson { --primary:#7f1d1d; --primary-2:#991b1b; --accent:#fbbf24; --bg:#fff5f5; --bg-pattern:radial-gradient(circle at 20% 10%, rgba(251,191,36,.20), transparent 30%), radial-gradient(circle at 90% 0%, rgba(153,27,27,.12), transparent 26%); }
.theme-charcoal { --primary:#18181b; --primary-2:#27272a; --accent:#eab308; --bg:#f4f4f5; --bg-pattern:radial-gradient(circle at 20% 10%, rgba(234,179,8,.16), transparent 30%), radial-gradient(circle at 90% 0%, rgba(39,39,42,.14), transparent 26%); }
/* Ghana flag palette (green / gold / red), kept subtle and professional
   rather than literal — a school-facing option next to the neutral themes. */
.theme-ghana { --primary:#0a5c36; --primary-2:#046a38; --accent:#fcd116; --good:#046a38; --bad:#ce1126; --bg:#f7faf6; --bg-pattern:radial-gradient(circle at 18% 10%, rgba(252,209,22,.20), transparent 28%), radial-gradient(circle at 90% 4%, rgba(206,17,38,.10), transparent 24%); }
.theme-ghana .sidebar { background: linear-gradient(180deg, #0a5c36, #063d24); }
.theme-ghana .sidebar::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg,#ce1126 0 33%, #fcd116 33% 66%, #046a38 66% 100%); }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg-pattern), var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", Tahoma, Arial, sans-serif;
}
a { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar {
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  color: #fff;
  padding: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  box-shadow: 18px 0 36px rgba(15,23,42,.16);
}
.brand-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.brand-logo { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: var(--radius); padding: 5px; }
.brand-mark { width: 48px; height: 48px; display:grid; place-items:center; border-radius: var(--radius); background: var(--accent) url('assets/mj-portal-logo.svg') center/cover no-repeat; color: transparent; font-weight: 900; overflow:hidden; }
.brand-title { font-weight: 850; line-height: 1.15; }
.brand-sub { color: rgba(255,255,255,.68); font-size: 13px; margin-top: 3px; }
.nav-list { display: grid; gap: 7px; }
.nav-list a {
  text-decoration: none;
  color: rgba(255,255,255,.88);
  padding: 10px 11px;
  border-radius: var(--radius);
  font-weight: 650;
}
.nav-list a:hover, .nav-list .active { background: rgba(255,255,255,.13); color: #fff; transform: translateX(2px); }
.main { padding: 26px; max-width: 1280px; width: 100%; }
.topbar { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.eyebrow { color: var(--muted); font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
h1, h2, h3 { margin: 0; line-height: 1.16; }
.page-title { font-size: 28px; margin-top: 4px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.hero-card {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border: 0;
  position: relative;
  overflow: hidden;
}
.hero-card > * { position: relative; z-index: 1; }
.hero-title { font-size: clamp(28px, 4vw, 46px); max-width: 760px; margin: 6px 0 10px; }
.hero-text { color: rgba(255,255,255,.76); max-width: 720px; line-height: 1.55; }
.metric { color: var(--muted); font-weight: 700; }
.metric strong { display: block; color: var(--text); font-size: 30px; margin-top: 8px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  padding: 10px 13px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.secondary { background: var(--accent); color: #111; }
.btn.ghost { background: var(--surface); color: var(--primary); border: 1px solid var(--line); }
.btn.danger { background: var(--bad); }
.actions { display: flex; gap: 9px; flex-wrap: wrap; }
.actions form { margin: 0; }
.notice {
  border: 1px solid color-mix(in srgb, var(--accent), #fff 45%);
  background: color-mix(in srgb, var(--accent), #fff 82%);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.pill.open { background: #dcfce7; color: var(--good); }
.pill.closed { background: #fee2e2; color: var(--bad); }
.mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.quick-card {
  background: color-mix(in srgb, var(--surface), var(--accent) 5%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}
.quick-card strong { display:block; margin-bottom:5px; }
.quick-card span { color: var(--muted); font-size: 13px; }
.notice strong { display: block; margin-bottom: 4px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); }
.status { font-weight: 850; }
.paid, .active { color: var(--good); }
.pending { color: var(--warn); }
.revoked { color: var(--bad); }
label { display:block; color: var(--text); font-weight: 750; margin: 12px 0 6px; }
input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font: inherit;
}
.signature-pad {
  width: 100%;
  height: 150px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: #fff;
  touch-action: none;
}
.muted { color: var(--muted); }
td input[type=number] { max-width: 110px; }
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  background: var(--primary);
}
.auth-visual {
  color: #fff;
  padding: 54px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
.auth-panel { background: var(--bg); display:grid; place-items:center; padding: 30px; }
.auth-card { width: min(430px, 100%); background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.auth-card-wide { width: min(720px, 100%); }
.auth-card .btn { width: 100%; margin-top: 12px; }
.auth-card input { margin-bottom: 10px; }
.auth-feature-grid { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.auth-feature-grid span {
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 9px 10px;
  color: rgba(255,255,255,.86);
  font-weight: 750;
}
.segmented { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.segmented label {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px;
  margin: 0;
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
}
.segmented input { width:auto; margin:0; }
.premium-page {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: #07111f;
}
.premium-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #07111f;
}
.premium-bg span,
.premium-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  animation: premiumBg 21s infinite;
}
.premium-bg span:nth-child(2),
.premium-bg img:nth-child(2) { animation-delay: 7s; }
.premium-bg span:nth-child(3),
.premium-bg img:nth-child(3) { animation-delay: 14s; }
.premium-bg:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4,12,24,.92), rgba(7,17,31,.72) 44%, rgba(7,17,31,.40)),
    linear-gradient(180deg, rgba(4,12,24,.20), rgba(4,12,24,.78));
}
@keyframes premiumBg {
  0% { opacity: 1; transform: scale(1.05); }
  32% { opacity: 1; }
  42% { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}
.premium-shell {
  position: relative;
  z-index: 1;
}
.premium-chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.premium-chip-row span {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.84);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}
.premium-auth {
  background: #07111f;
  position: relative;
  overflow: hidden;
}
.premium-auth .auth-visual,
.premium-auth .auth-panel {
  position: relative;
  z-index: 1;
}
.premium-auth .auth-visual {
  background: transparent;
}
.premium-auth .auth-panel {
  background: rgba(244,247,251,.88);
  backdrop-filter: blur(14px);
}
.premium-auth .auth-card {
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 24px 70px rgba(7,17,31,.22);
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding: 14px 16px; box-shadow: 0 8px 24px rgba(15,23,42,.12); }
  .sidebar .brand-lockup { margin-bottom: 12px; }
  .sidebar .brand-logo, .sidebar .brand-mark { width: 40px; height: 40px; }
  .nav-list { display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .nav-list::-webkit-scrollbar { display:none; }
  .nav-list a { white-space:nowrap; flex:0 0 auto; }
  .grid-3, .grid-2, .row, .mini-grid, .auth-page { grid-template-columns: 1fr; }
  .auth-visual { min-height: 280px; padding: 30px; }
  .main { padding: 18px; }
  .topbar { align-items:stretch; flex-direction:column; }
  .topbar .actions .btn { flex:1 1 auto; }
  .card { padding:16px; }
  .table-card { padding:0; overflow:hidden; }
  .table-scroll { overflow-x:auto; }
  table { min-width:760px; }
}

.compact { margin:0; }
.full { width:100%; }
.light { color:rgba(255,255,255,.66); }
.danger-notice { border-color:#fecaca; background:#fff1f2; color:#991b1b; }

/* Plan selection */
.pricing-page { min-height:100vh; background:#f5f7fb; }
.pricing-shell { width:min(1180px, calc(100% - 40px)); margin:0 auto; padding:26px 0 42px; }
.pricing-header { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.pricing-intro { max-width:720px; margin:58px 0 30px; }
.pricing-intro h1 { font-size:clamp(38px, 6vw, 66px); line-height:1.02; margin:8px 0 14px; color:#111827; letter-spacing:0; }
.pricing-intro p { color:#5d6878; font-size:18px; line-height:1.6; }
.plan-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.plan-card { min-height:410px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:25px; border:1px solid #dfe5ed; border-radius:8px; background:#fff; color:#152033; cursor:pointer; box-shadow:0 10px 30px rgba(19,33,52,.07); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.plan-card:hover, .plan-card:focus-visible { transform:translateY(-4px); border-color:#0d9488; box-shadow:0 18px 42px rgba(19,33,52,.14); outline:none; }
.plan-card.featured { background:#102a2e; color:#fff; border-color:#102a2e; }
.plan-badge { padding:6px 9px; border-radius:999px; background:#e7f8f5; color:#08766c; font-size:12px; font-weight:850; }
.featured .plan-badge { background:#f6c453; color:#2e260f; }
.plan-name { font-size:21px; font-weight:850; margin-top:28px; }
.plan-price { display:flex; flex-direction:column; margin:13px 0 19px; }
.plan-price strong { font-size:38px; line-height:1; }
.plan-price small { color:#738095; margin-top:7px; font-weight:700; }
.featured .plan-price small, .featured .plan-copy { color:rgba(255,255,255,.7); }
.plan-copy { color:#647184; line-height:1.55; font-size:15px; }
.plan-action { margin-top:auto; width:100%; display:flex; justify-content:space-between; border-top:1px solid currentColor; padding-top:17px; font-weight:850; }
.pricing-footnote { text-align:center; color:#6b7280; margin:24px 0 0; }

/* New-school walkthrough */
.onboarding-page { min-height:100vh; background:#edf2f5; }
.onboarding-shell { min-height:100vh; display:grid; grid-template-columns:minmax(330px,.8fr) minmax(0,1.2fr); }
.onboarding-brand { padding:clamp(28px,5vw,64px); color:#fff; background:#102a2e; display:flex; flex-direction:column; justify-content:space-between; gap:40px; }
.onboarding-brand h1 { font-size:clamp(34px,5vw,58px); line-height:1.04; margin:8px 0 16px; letter-spacing:0; }
.onboarding-brand p { color:rgba(255,255,255,.72); line-height:1.65; max-width:540px; }
.trial-summary { display:grid; gap:5px; padding:17px 0; border-top:1px solid rgba(255,255,255,.2); }
.trial-summary span, .trial-summary small { color:rgba(255,255,255,.62); }
.trial-summary strong { font-size:22px; }
.onboarding-content { padding:clamp(28px,6vw,74px); align-self:center; }
.onboarding-steps { display:grid; gap:8px; max-width:720px; }
.onboarding-steps article { display:grid; grid-template-columns:44px 1fr; gap:15px; padding:16px; border-bottom:1px solid #d9e1e8; }
.onboarding-steps article > span { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#d9f3ef; color:#08766c; font-weight:900; }
.onboarding-steps h2 { font-size:18px; margin-bottom:5px; }
.onboarding-steps p { margin:0; color:#687587; line-height:1.5; }
.onboarding-finish { max-width:720px; display:flex; justify-content:flex-end; margin-top:24px; }

/* Billing and payment recovery */
.billing-shell { min-height:100vh; background:#f3f6f8; }
.billing-topbar { min-height:80px; display:flex; justify-content:space-between; align-items:center; padding:14px max(24px, calc((100% - 1180px)/2)); background:#fff; border-bottom:1px solid #dde5eb; }
.billing-content { width:min(1180px, calc(100% - 40px)); margin:0 auto; padding:46px 0; }
.billing-heading { margin-bottom:24px; }
.billing-heading h1 { font-size:clamp(34px,5vw,54px); margin:7px 0 10px; letter-spacing:0; }
.billing-heading p { color:#697588; }
.payment-alert { display:grid; grid-template-columns:30px 1fr; gap:18px; padding:30px; margin-bottom:22px; color:#fff; background:#7f1d1d; border-radius:8px; }
.payment-alert h1 { font-size:clamp(30px,4vw,48px); margin:5px 0 10px; }
.payment-alert p { color:rgba(255,255,255,.78); max-width:700px; line-height:1.55; }
.status-dot { display:block; width:14px; height:14px; margin-top:7px; border-radius:50%; background:#fecaca; box-shadow:0 0 0 7px rgba(254,202,202,.16); }
.billing-grid { display:grid; grid-template-columns:minmax(310px,.72fr) minmax(0,1.28fr); gap:18px; align-items:start; }
.subscription-card-top { display:flex; justify-content:space-between; align-items:center; }
.subscription-card-top a { color:#08766c; font-weight:800; }
.subscription-card h2 { font-size:26px; margin-top:26px; }
.large-price { font-size:38px; font-weight:900; margin:9px 0 12px; }
.large-price small { display:block; font-size:13px; color:#718096; margin-top:5px; }
.subscription-card p { color:#657386; line-height:1.55; }
.renewal-line { display:flex; justify-content:space-between; gap:14px; padding:15px 0; margin:20px 0; border-top:1px solid #e0e6ed; border-bottom:1px solid #e0e6ed; }
.subscription-card form + form { margin-top:9px; }
.payment-history { min-height:390px; }
.payment-row { display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid #e1e7ed; }
.payment-row span, .payment-row small { display:block; color:#738095; margin-top:4px; font-size:13px; }
.payment-amount { text-align:right; }
.empty-state { min-height:250px; display:grid; place-content:center; text-align:center; gap:7px; color:#788597; }
.empty-state strong { color:#223043; }

/* Focused data-entry pages */
.form-page { min-height:100vh; background:#eef3f5; }
.form-shell { width:min(1080px, calc(100% - 40px)); margin:0 auto; padding:28px 0 46px; }
.form-topbar { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:15px; margin-bottom:26px; }
.form-topbar h1 { font-size:30px; margin-top:3px; }
.back-link { width:40px; height:40px; display:grid; place-items:center; text-decoration:none; background:#fff; border:1px solid #dbe4ea; border-radius:50%; font-size:22px; box-shadow:var(--shadow-soft); }
.form-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr); gap:18px; }
.form-card { padding:26px; }
.form-card input, .form-card select { min-height:48px; }
.price-summary { display:flex; justify-content:space-between; align-items:center; gap:15px; margin:22px 0 14px; padding:16px; background:#ecf8f6; border:1px solid #c9ece6; border-radius:8px; }
.price-summary strong { font-size:21px; color:#08766c; }
.class-info-panel { padding:30px; color:#fff; background:#102a2e; border-radius:8px; align-self:stretch; }
.class-info-panel h2 { font-size:32px; margin:8px 0 12px; }
.class-info-panel p { color:rgba(255,255,255,.7); line-height:1.6; }
.info-points { display:grid; gap:0; margin-top:26px; }
.info-points span { padding:13px 0; border-top:1px solid rgba(255,255,255,.15); font-weight:750; }

/* Admin subscriptions */
.search-box { width:min(320px,100%); }
.school-cell { display:flex; align-items:center; gap:10px; min-width:220px; }
.school-cell img, .school-cell > span { width:38px; height:38px; object-fit:contain; display:grid; place-items:center; background:#e7f3f1; color:#08766c; border-radius:6px; font-weight:900; }
.school-cell small, .failure-text { display:block; color:#798598; margin-top:3px; font-size:12px; }
.failure-text { max-width:190px; color:#a33b3b; }
.inline-control { display:grid; grid-template-columns:70px auto; gap:7px; min-width:180px; }
.inline-control input { padding:8px; }
.inline-control .btn { padding:8px 10px; }

@media (max-width: 900px) {
  .plan-grid, .onboarding-shell, .billing-grid, .form-layout { grid-template-columns:1fr; }
  .plan-card { min-height:350px; }
  .onboarding-brand { min-height:520px; }
  .billing-content, .pricing-shell, .form-shell { width:min(100% - 28px, 720px); }
  .form-topbar { grid-template-columns:42px 1fr; }
  .form-topbar .pill { grid-column:2; justify-self:start; }
}

@media (max-width: 560px) {
  .pricing-header, .billing-topbar { align-items:flex-start; }
  .pricing-header { flex-direction:column; }
  .pricing-intro { margin-top:38px; }
  .pricing-intro h1 { font-size:39px; }
  .onboarding-brand { padding:28px 22px; min-height:480px; }
  .onboarding-content { padding:28px 14px; }
  .onboarding-steps article { padding:15px 8px; }
  .billing-topbar { padding:14px; }
  .payment-alert { padding:22px 18px; grid-template-columns:1fr; }
  .payment-row { align-items:flex-start; }
  .form-shell { width:calc(100% - 22px); }
  .form-card, .class-info-panel { padding:20px; }
  .price-summary { align-items:flex-start; flex-direction:column; }
}

/* ---- Global mobile hardening ----
   Most of Ghana's JHS staff/parents will use this on a phone, often a
   budget Android with a narrow (~360-390px) screen, so these rules apply
   everywhere rather than only on the pages that already had bespoke
   responsive layouts above. */

img, svg.field-icon { max-width: 100%; }

@media (max-width: 900px) {
  /* Any table that wasn't already wrapped in .table-scroll still gets a
     safe horizontal scroll instead of breaking the page layout or
     forcing tiny unreadable columns. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { white-space: nowrap; }

  /* Comfortable tap targets (roughly the 44px WCAG guidance) instead of
     the desktop-sized 10px/13px padding. */
  .btn, input, select, textarea, button { min-height: 44px; }
  .btn { padding: 11px 16px; }

  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn, .actions form { width: 100%; }
  .actions form .btn { width: 100%; }

  .inline-control { grid-template-columns: 1fr; }
  .school-cell { min-width: 0; }
}

@media (max-width: 400px) {
  .page-title { font-size: 22px; }
  .card { padding: 14px; }
  .plan-price strong, .large-price { font-size: 30px; }
}

/* Users on slow/expensive mobile data shouldn't wait on animations. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}