/* Design tokens (Ocean mặc định) + nối vào Bootstrap 5. Theme FPT / High Tech ghi đè trong themes.css. */
:root {
  --sun: #FFD93D; --sun-deep: #F5B700;
  --ocean: #29B6F6; --ocean-deep: #0277BD; --ocean-dark: #01579B;
  --coral: #FF6B9D; --orange: #FF9F45; --aqua: #2EC4B6; --leaf: #6BCB77; --leaf-deep: #2E9E48;
  --danger: #E53935; --danger-soft: #FDECEA;
  --navy: #123B5C; --ink: #2C4A63; --muted: #6B8299; --line: #D9EAF4;
  --bg: #F0FAFF; --card: #FFFFFF; --card-border: transparent; --soft: #E6F6FE;
  --row: #F7FCFF; --row-hover: #F2FAFF; --table-head: #FAFDFF; --input-bg: #FFFFFF;
  --on-primary: #FFFFFF; --on-accent: #123B5C; --overlay: rgba(18, 59, 92, .55);
  --radius: 18px; --radius-sm: 12px;
  --shadow: 0 6px 20px rgba(2, 119, 189, .10); --shadow-lg: 0 14px 40px rgba(2, 119, 189, .18);
  --font: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --heading-font: var(--font); --heading-weight: 800;

  --primary: #0277BD; --primary-hover: #01579B; --primary-rgb: 2, 119, 189;
  --success: #2E9E48; --success-hover: #24823A;
  --warning: #FFD93D; --warning-hover: #F5B700; --warning-ink: #123B5C;
  --info: #E8437C; --info-hover: #D12F69;
  --btn-primary: var(--primary); --btn-radius: 999px;

  --t-blue-bg: #E6F6FE; --t-blue-ink: #01579B; --t-green-bg: #E3F6E6; --t-green-ink: #1E7A36;
  --t-sun-bg: #FFF4C2; --t-sun-ink: #7A5A00; --t-red-bg: #FDECEA; --t-red-ink: #B3261E;
  --t-coral-bg: #FFE3EE; --t-coral-ink: #B0245A; --t-gray-bg: #EEF2F5; --t-gray-ink: #5B6F80;
  --t-aqua-bg: #D2F5F0; --t-aqua-ink: #0F6B61; --t-sim-bg: #FFF0DC; --t-sim-ink: #9A5200; --t-sim-border: #F0A04B;

  --c-energy: #6BCB77; --c-sim: #FF9F45; --c-primary: #0277BD; --c-secondary: #FF6B9D; --c-steps: #29B6F6;
  --c-bar-grad: linear-gradient(90deg, var(--ocean), var(--aqua)); --c-danger-grad: linear-gradient(90deg, #FF9F45, #E53935);

  --sidebar-bg: linear-gradient(180deg, #0277BD 0%, #01579B 100%); --sidebar-ink: #EAF7FF;
  --sidebar-hover: rgba(255, 255, 255, .14); --sidebar-active-bg: #FFFFFF; --sidebar-active-ink: #01579B;
  --topbar-bg: rgba(255, 255, 255, .9); --code-bg: #0B2A42; --code-ink: #D6F1FF; --pre-bg: #F4FAFD;

  --m-body: #29B6F6; --m-fin: #0288D1; --m-belly: #E1F5FE; --m-cheek: #FF6B9D; --m-bolt: #FFD93D; --m-bolt-line: #F5B700; --m-eye: #123B5C;
  --live-off: #9AA9B5; --live-on: #2E9E48;
  --g-blue: linear-gradient(135deg, #4FC3F7, #0277BD); --g-green: linear-gradient(135deg, #81E08B, #2E9E48);
  --g-orange: linear-gradient(135deg, #FFB74D, #F57C00); --g-coral: linear-gradient(135deg, #FF8FB1, #E8437C);
  --g-violet: linear-gradient(135deg, #B39DDB, #7E57C2); --g-aqua: linear-gradient(135deg, #4DD0C4, #00897B);
  --g-red: linear-gradient(135deg, #FF8A80, #E53935); --g-gray: linear-gradient(135deg, #B0BEC5, #607D8B);
  --tile-shadow: 0 8px 16px -8px rgba(2, 60, 110, .55);
  --logo-1: #4FC3F7; --logo-2: #0277BD; --logo-sole: #FFFFFF; --logo-bolt: #FF9F45;
  --logo-toe: #FFFFFF; --logo-toe-1: #FFD93D; --logo-toe-2: #6BCB77; --logo-arc: rgba(255, 255, 255, .55);
  --wm-accent: #FF9F45;
  --gold: linear-gradient(135deg, #FFE27A, #F5B700); --gold-ink: #6B4A00;
  --silver: linear-gradient(135deg, #F1F5F9, #A7B4C2); --silver-ink: #3C4A59;
  --bronze: linear-gradient(135deg, #F7C59F, #C27A45); --bronze-ink: #5A2E0E;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}

html[data-theme] {
  --bs-body-font-family: var(--font); --bs-body-color: var(--navy); --bs-body-bg: var(--bg);
  --bs-emphasis-color: var(--navy); --bs-secondary-color: var(--muted); --bs-tertiary-bg: var(--soft);
  --bs-secondary-bg: var(--soft); --bs-border-color: var(--line); --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius); --bs-border-radius-sm: 8px;
  --bs-primary: var(--primary); --bs-primary-rgb: var(--primary-rgb);
  --bs-link-color: var(--ocean-deep); --bs-link-color-rgb: var(--primary-rgb); --bs-link-hover-color: var(--ocean-dark);
  --bs-code-color: var(--ocean-dark); --bs-heading-color: var(--navy);
}
body { font-size: 15px; min-height: 100vh; background: var(--bg); }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: var(--heading-weight); font-family: var(--heading-font); color: var(--navy); }
p { margin: 0; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.line { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.line.between, .between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--t-green-ink); }
.neg { color: var(--t-coral-ink); }
pre.code { background: var(--code-bg); color: var(--code-ink); padding: 12px; border-radius: var(--radius-sm); margin: 0; overflow: auto; font-size: 12px; }
pre.sample { background: var(--pre-bg); padding: 10px; border-radius: 10px; margin: 0; overflow: auto; font-size: 12px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }

/* Bootstrap: nút (kiểu Material: chữ đậm, bo góc, đổ bóng nhẹ) */
.btn {
  --bs-btn-font-weight: 700; --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .5rem; --bs-btn-border-radius: var(--btn-radius);
  --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .25);
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; text-decoration: none;
  transition: background-color .15s, box-shadow .15s, transform .1s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-sm { --bs-btn-padding-x: .75rem; --bs-btn-padding-y: .3rem; --bs-btn-font-size: .82rem; }
.btn-primary, .btn-success, .btn-warning, .btn-danger, .btn-info { box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .25); }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary);
  --bs-btn-color: var(--on-primary); --bs-btn-hover-color: var(--on-primary); --bs-btn-active-color: var(--on-primary); --bs-btn-disabled-color: var(--on-primary); }
.btn-success { --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success); --bs-btn-hover-bg: var(--success-hover); --bs-btn-hover-border-color: var(--success-hover);
  --bs-btn-active-bg: var(--success-hover); --bs-btn-active-border-color: var(--success-hover); --bs-btn-disabled-bg: var(--success); --bs-btn-disabled-border-color: var(--success); }
.btn-warning { --bs-btn-bg: var(--warning); --bs-btn-border-color: var(--warning); --bs-btn-hover-bg: var(--warning-hover); --bs-btn-hover-border-color: var(--warning-hover);
  --bs-btn-active-bg: var(--warning-hover); --bs-btn-color: var(--warning-ink); --bs-btn-hover-color: var(--warning-ink); --bs-btn-active-color: var(--warning-ink); }
.btn-info { --bs-btn-bg: var(--info); --bs-btn-border-color: var(--info); --bs-btn-hover-bg: var(--info-hover); --bs-btn-hover-border-color: var(--info-hover);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--info-hover); }
.btn-outline-primary { --bs-btn-color: var(--ocean-deep); --bs-btn-border-color: var(--line); --bs-btn-bg: var(--card);
  --bs-btn-hover-bg: var(--soft); --bs-btn-hover-color: var(--ocean-deep); --bs-btn-hover-border-color: var(--line);
  --bs-btn-active-bg: var(--soft); --bs-btn-active-color: var(--ocean-deep); --bs-btn-active-border-color: var(--ocean); }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; display: inline-grid; place-items: center; color: var(--ink); }
.icon-btn:hover { background: var(--soft); }

/* Bootstrap: ô nhập kiểu Material (nhãn nổi, viền sáng khi chọn) */
.form-control, .form-select { background-color: var(--input-bg); color: var(--navy); border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; min-height: 44px; }
.form-control:focus, .form-select:focus { background-color: var(--input-bg); color: var(--navy); border-color: var(--primary); box-shadow: 0 0 0 .22rem rgba(var(--primary-rgb), .18); }
.form-control::placeholder { color: var(--muted); opacity: .75; }
.form-floating > label { color: var(--muted); font-weight: 600; }
.form-floating > .form-control:focus ~ label, .form-floating > .form-select ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--primary); }
.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after { background: var(--input-bg); }
.form-floating > textarea.form-control { min-height: 96px; }
.form-text { color: var(--muted); font-size: 12px; margin-top: 4px; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
label.field { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: 13px; color: var(--ink); margin: 0; }
.hint { font-weight: 500; color: var(--muted); font-size: 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filters label.field { min-width: 150px; flex: 1 1 150px; max-width: 240px; }

/* Bootstrap: thẻ, bảng, tab, phân trang, hộp thoại, menu, thông báo */
.card { display: block; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; border: 1px solid var(--card-border); color: inherit; }
.card h3 { font-size: 16px; margin-bottom: 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h3 { margin: 0; }
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--navy); --bs-table-hover-bg: var(--row-hover); --bs-table-hover-color: var(--navy); --bs-table-border-color: var(--line); margin: 0; min-width: 560px; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 12px; border-bottom-width: 2px; white-space: nowrap; background: var(--table-head); }
.table td { padding: 11px 12px; vertical-align: middle; }
.table td.actions { text-align: right; white-space: nowrap; }
.table td.actions .btn { margin-left: 4px; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--card); --bs-nav-pills-link-active-color: var(--primary); --bs-nav-link-color: var(--ink); --bs-nav-link-hover-color: var(--primary);
  --bs-nav-pills-border-radius: 999px; gap: 4px; background: var(--soft); padding: 4px; border-radius: 999px; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.nav-pills .nav-link { font-weight: 800; padding: .45rem 1rem; display: inline-flex; align-items: center; gap: .4rem; }
.nav-pills .nav-link.active { box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pagination { --bs-pagination-color: var(--ink); --bs-pagination-bg: var(--card); --bs-pagination-border-color: var(--line);
  --bs-pagination-hover-bg: var(--soft); --bs-pagination-hover-color: var(--primary); --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary); --bs-pagination-disabled-bg: var(--card); --bs-pagination-disabled-color: var(--muted);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .2); margin: 0; }
.modal { --bs-modal-bg: var(--card); --bs-modal-color: var(--navy); --bs-modal-border-color: var(--card-border); --bs-modal-border-radius: calc(var(--radius) + 4px);
  --bs-modal-header-border-color: var(--line); --bs-modal-footer-border-color: var(--line); }
.modal-content { box-shadow: var(--shadow-lg); }
.modal-title { font-size: 18px; font-weight: 800; }
.modal-backdrop { --bs-backdrop-bg: #0A1A2E; --bs-backdrop-opacity: .55; }
.dropdown-menu { --bs-dropdown-bg: var(--card); --bs-dropdown-color: var(--navy); --bs-dropdown-border-color: var(--line); --bs-dropdown-link-color: var(--navy);
  --bs-dropdown-link-hover-bg: var(--soft); --bs-dropdown-link-hover-color: var(--navy); --bs-dropdown-link-active-bg: var(--t-blue-bg);
  --bs-dropdown-link-active-color: var(--t-blue-ink); --bs-dropdown-border-radius: var(--radius-sm); --bs-dropdown-header-color: var(--muted);
  box-shadow: var(--shadow-lg); padding: 6px; min-width: 240px; }
.dropdown-item { border-radius: 10px; font-weight: 700; display: flex; align-items: center; gap: 10px; padding: 8px 10px; white-space: normal; }
.dropdown-item small { display: block; color: var(--muted); font-weight: 600; font-size: 11px; }
.dropdown-item.active small { color: inherit; opacity: .8; }
.theme-swatch { width: 34px; height: 20px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.theme-swatch.ocean { background: linear-gradient(90deg, #29B6F6 0 40%, #FFD93D 40% 70%, #FF6B9D 70%); }
.theme-swatch.fpt { background: linear-gradient(90deg, #0466B2 0 33%, #F37321 33% 67%, #21B14B 67%); }
.theme-swatch.hitech { background: linear-gradient(90deg, #0B1022 0 40%, #22D3EE 40% 70%, #A78BFA 70%); }
.toast-container { z-index: 1090; }
.toast { --bs-toast-bg: #123B5C; --bs-toast-color: #fff; --bs-toast-border-color: transparent; --bs-toast-border-radius: 14px; --bs-toast-max-width: 380px;
  font-weight: 700; border-left: 6px solid var(--ocean); box-shadow: var(--shadow-lg); }
.toast.ok { border-left-color: var(--leaf); }
.toast.err { border-left-color: var(--coral); }

/* Thành phần riêng */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--t-blue-bg); color: var(--t-blue-ink); white-space: nowrap; }
.pill.green { background: var(--t-green-bg); color: var(--t-green-ink); }
.pill.gray { background: var(--t-gray-bg); color: var(--t-gray-ink); }
.pill.sun { background: var(--t-sun-bg); color: var(--t-sun-ink); }
.pill.red { background: var(--t-red-bg); color: var(--t-red-ink); }
.pill.coral { background: var(--t-coral-bg); color: var(--t-coral-ink); }
.pill.sim { background: var(--t-sim-bg); color: var(--t-sim-ink); border: 1px dashed var(--t-sim-border); }
.pill.est { background: var(--t-blue-bg); color: var(--t-blue-ink); border: 1px dashed currentColor; }
.empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.empty-art { display: grid; place-items: center; margin-bottom: 10px; }
.empty .emoji { font-size: 42px; display: block; margin-bottom: 6px; }
.empty b { color: var(--navy); display: block; font-size: 16px; }
.sim-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--t-sim-bg); border: 2px dashed var(--t-sim-border); color: var(--t-sim-ink); font-weight: 700; }
.est-banner { background: var(--t-blue-bg); border-color: var(--ocean); color: var(--t-blue-ink); }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, var(--t-blue-bg), var(--t-aqua-bg)); flex: none; }
.spinner-wrap { display: grid; place-items: center; padding: 24px; color: var(--primary); }
.live-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--live-off); display: inline-block; flex: none; }
.live-dot.on { background: var(--live-on); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.15); } }
.watty .w-body { fill: var(--m-body); } .watty .w-fin { fill: var(--m-fin); } .watty .w-belly { fill: var(--m-belly); }
.watty .w-cheek { fill: var(--m-cheek); } .watty .w-bolt { fill: var(--m-bolt); stroke: var(--m-bolt-line); }
.watty .w-eye { fill: var(--m-eye); } .watty .w-mouth { stroke: var(--m-eye); }

.i { font-size: 1.05em; line-height: 1; width: 1.2em; text-align: center; flex: none; }
.ico-tile { width: 44px; height: 44px; border-radius: 14px; display: inline-grid; place-items: center; color: #fff; flex: none;
  background: var(--g, var(--g-blue)); box-shadow: var(--tile-shadow); position: relative; overflow: hidden; font-size: 19px; }
.ico-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .35), transparent 45%); pointer-events: none; }
.ico-tile .i { width: auto; font-size: 1em; }
.ico-tile.sm { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; }
.ico-tile.lg { width: 64px; height: 64px; border-radius: 20px; font-size: 28px; }
.ico-tile.xl { width: 88px; height: 88px; border-radius: 26px; font-size: 38px; }
.ico-tile.t-blue { --g: var(--g-blue); } .ico-tile.t-green { --g: var(--g-green); } .ico-tile.t-orange { --g: var(--g-orange); }
.ico-tile.t-coral { --g: var(--g-coral); } .ico-tile.t-violet { --g: var(--g-violet); } .ico-tile.t-aqua { --g: var(--g-aqua); }
.ico-tile.t-red { --g: var(--g-red); } .ico-tile.t-gray { --g: var(--g-gray); }
.ico-tile.locked { --g: var(--g-gray); filter: saturate(.2); opacity: .75; }

.brand-mark { display: inline-block; width: 44px; height: 44px; flex: none; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(10, 42, 94, .25)); }
.org-logo { display: block; object-fit: contain; flex: none; }
.logo-card { display: flex; align-items: center; justify-content: center; }
.logo-card img { filter: drop-shadow(0 3px 6px rgba(10, 42, 94, .25)); }
.wordmark { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.wordmark b { font-size: 19px; font-weight: 900; letter-spacing: -.01em; white-space: nowrap; }
.wordmark b i { font-style: normal; color: var(--wm-accent); }
.wordmark small { font-size: 11px; font-weight: 700; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.medal-badge { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 900; font-size: 15px; flex: none;
  background: var(--soft); color: var(--ocean-dark); box-shadow: inset 0 0 0 2px var(--line); position: relative; }
.medal-badge.r1 { background: var(--gold); color: var(--gold-ink); box-shadow: 0 4px 10px -4px rgba(180, 120, 0, .7); }
.medal-badge.r2 { background: var(--silver); color: var(--silver-ink); box-shadow: 0 4px 10px -4px rgba(80, 90, 110, .6); }
.medal-badge.r3 { background: var(--bronze); color: var(--bronze-ink); box-shadow: 0 4px 10px -4px rgba(140, 70, 20, .6); }
.medal-badge.r1::before, .medal-badge.r2::before, .medal-badge.r3::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 9px;
  transform: translateX(-50%); background: var(--coral); clip-path: polygon(0 0, 100% 0, 80% 100%, 50% 70%, 20% 100%); z-index: -1; }
.trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 1px 7px; }
.trend.up { background: var(--t-green-bg); color: var(--t-green-ink); }
.trend.down { background: var(--t-red-bg); color: var(--t-red-ink); }
.trend.flat { background: var(--t-gray-bg); color: var(--t-gray-ink); }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .filters label.field { max-width: none; }
  .table-wrap { overflow: visible; }
  .table { min-width: 0; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px 12px; margin-bottom: 10px; box-shadow: var(--shadow); }
  .table td { border: 0; padding: 7px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; min-height: 34px; }
  .table td + td { border-top: 1px dashed var(--line); }
  .table td::before { content: attr(data-label); font-weight: 800; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; text-align: left; flex: none; max-width: 45%; }
  .table td[data-label=""]::before, .table td.actions::before { display: none; }
  .table td[data-label=""] { justify-content: flex-start; text-align: left; }
  .table td.actions { justify-content: flex-end; flex-wrap: wrap; white-space: normal; }
  .table td > div, .table td > b { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}