/* ================================================================
   GP ANSOR TORAJA RAYA — MODERN UI LAYER
   Final override layer. Keeps legacy module markup compatible while
   unifying spacing, typography, motion, responsive behavior, and a11y.
   ================================================================ */

:root {
  --brand-950: #052a1d;
  --brand-900: #073c2a;
  --brand-800: #095137;
  --brand-700: #0d6848;
  --brand-600: #11815a;
  --brand-500: #169c6d;
  --brand-100: #dff5ea;
  --brand-50: #effaf5;
  --gold-600: #bd8114;
  --gold-500: #d9a228;
  --gold-100: #fff3d7;
  --slate-950: #0b1320;
  --slate-900: #111b2d;
  --slate-800: #1b2940;
  --slate-700: #33435d;
  --slate-600: #53627a;
  --slate-500: #6e7c91;
  --slate-400: #91a0b4;
  --slate-300: #c5cfdb;
  --slate-200: #dfe6ee;
  --slate-100: #edf2f7;
  --slate-50: #f7f9fc;
  --danger-700: #a92320;
  --danger-600: #c0342f;
  --danger-50: #fff2f1;
  --warning-700: #945b08;
  --warning-50: #fff8e8;
  --info-700: #1e5c95;
  --info-50: #eef7ff;
  --success-700: #0b734b;
  --success-50: #edfbf4;

  --page: #f2f6f4;
  --page-glow: rgba(22, 156, 109, .09);
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #f7faf8;
  --surface-muted: #edf4f0;
  --ink: var(--slate-950);
  --muted: var(--slate-600);
  --line: #dbe6e0;
  --line-strong: #c5d6ce;
  --ansor-green: var(--brand-700);
  --ansor-green-dark: var(--brand-950);
  --ansor-green-soft: var(--brand-50);
  --ansor-gold: var(--gold-500);
  --danger: var(--danger-600);
  --success: var(--success-700);

  --radius-xs: 8px;
  --radius-sm: 11px;
  --radius-md: 15px;
  --radius-lg: 21px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);

  --shadow-xs: 0 1px 2px rgba(8, 42, 31, .04);
  --shadow-sm: 0 8px 24px rgba(8, 42, 31, .07);
  --shadow-md: 0 16px 44px rgba(8, 42, 31, .10);
  --shadow-lg: 0 28px 72px rgba(6, 38, 27, .16);
  --shadow-soft: var(--shadow-sm);
  --ring: 0 0 0 3px rgba(22, 156, 109, .22);
  --sidebar-w: 280px;
  --content-max: 1640px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --duration-fast: 150ms;
  --duration: 260ms;
  --duration-slow: 520ms;
  color-scheme: light;
}

html[data-theme="dark"] {
  --page: #08130f;
  --page-glow: rgba(27, 187, 129, .09);
  --surface: #101d18;
  --surface-raised: #13231c;
  --surface-soft: #0d1915;
  --surface-muted: #152820;
  --ink: #edf8f2;
  --muted: #a2b7ad;
  --line: #274138;
  --line-strong: #36594c;
  --ansor-green-soft: #153c2f;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, .24);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, .32);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .42);
  color-scheme: dark;
}

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

  html {
    min-width: 320px;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    background: var(--page);
  }

  body {
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
    background:
      radial-gradient(circle at 82% -12%, var(--page-glow), transparent 31rem),
      radial-gradient(circle at -6% 72%, rgba(217, 162, 40, .055), transparent 28rem),
      var(--page);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.58;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .24;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath fill='%230f6a4b' fill-opacity='.055' d='M0 0h1v1H0zM40 40h1v1h-1z'/%3E%3C/svg%3E");
  }

  ::selection { background: rgba(22, 156, 109, .22); color: var(--ink); }
  img, svg { display: block; }
  img { height: auto; }
  a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  button, [role="button"], input[type="submit"], input[type="button"] { touch-action: manipulation; }

  h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-weight: 780;
    letter-spacing: -.025em;
    text-wrap: balance;
  }

  h1 { font-size: clamp(1.65rem, 2vw + 1rem, 2.55rem); line-height: 1.08; }
  h2 { font-size: clamp(1.15rem, .7vw + 1rem, 1.52rem); line-height: 1.2; }
  h3 { font-size: clamp(1rem, .35vw + .95rem, 1.2rem); line-height: 1.28; }
  p { text-wrap: pretty; }
  a { transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast), opacity var(--duration-fast); }

  :focus { outline: none; }
  :focus-visible {
    outline: 3px solid rgba(22, 156, 109, .55);
    outline-offset: 3px;
  }

  .skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    transform: translateY(-160%);
  }
  .skip-link:focus { transform: translateY(0); }

  .ui-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    pointer-events: none;
  }
  .ui-icon-sm { width: 17px; height: 17px; }
  .ui-icon-lg { width: 24px; height: 24px; }

  .app-shell {
    display: grid !important;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100dvh;
    overflow: visible;
  }

  .sidebar {
    position: sticky !important;
    inset: 0 auto auto 0;
    top: 0;
    z-index: 160;
    display: flex !important;
    flex-direction: column;
    width: var(--sidebar-w) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 18px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    color: #f8fffb;
    background:
      radial-gradient(circle at 82% 4%, rgba(255, 255, 255, .12), transparent 14rem),
      linear-gradient(155deg, #0d6647 0%, #083f2c 45%, #052d20 100%) !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 0 !important;
    box-shadow: 10px 0 36px rgba(3, 33, 22, .10);
  }

  .sidebar::-webkit-scrollbar { width: 6px; }
  .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 99px; }

  .sidebar-head { gap: 10px; padding: 2px 2px 12px; }
  .brand-block { gap: 11px; min-width: 0; }
  .brand-logo {
    width: 50px !important;
    height: 50px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 9px 22px rgba(0,0,0,.16);
  }
  .brand-logo img { padding: 5px; }
  .brand { font-size: 21px; font-weight: 820; letter-spacing: -.035em; }
  .brand-sub { color: rgba(255,255,255,.72); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }

  .sidebar-close {
    display: none !important;
    color: #fff;
    background: rgba(255,255,255,.1) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
  }

  .sidebar-user-card {
    position: relative;
    gap: 3px;
    margin: 4px 0 12px;
    padding: 12px 13px 12px 48px;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.075) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }
  .sidebar-user-card::before {
    content: attr(data-initial);
    position: absolute;
    left: 11px;
    top: 50%;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    transform: translateY(-50%);
  }
  .sidebar-user-card strong { color: #fff; font-size: 13px; line-height: 1.25; }
  .sidebar-user-card > span { color: rgba(255,255,255,.67); font-size: 11px; text-transform: capitalize; }

  .sidebar-search {
    position: relative;
    margin-bottom: 10px;
  }
  .sidebar-search .ui-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    color: rgba(255,255,255,.66);
    transform: translateY(-50%);
  }
  .sidebar-search input {
    width: 100%;
    height: 42px;
    padding: 0 12px 0 38px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    color: #fff;
    outline: none;
  }
  .sidebar-search input::placeholder { color: rgba(255,255,255,.5); }
  .sidebar-search input:focus { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.11); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }

  .nav-links { gap: 4px !important; padding: 0 0 8px !important; }
  .nav-links a {
    position: relative;
    display: grid !important;
    grid-template-columns: 34px minmax(0,1fr) 18px;
    min-height: 48px !important;
    align-items: center;
    gap: 8px;
    padding: 7px 9px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: rgba(255,255,255,.79) !important;
    font-size: 13px;
    font-weight: 680;
    line-height: 1.25;
    transform: translateZ(0) !important;
  }
  .nav-links a .nav-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.78);
    transition: background-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
  }
  .nav-links a .nav-copy { min-width: 0; }
  .nav-links a .nav-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .nav-links a .nav-copy small { display: block; margin-top: 1px; overflow: hidden; color: rgba(255,255,255,.48); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  .nav-links a .nav-arrow { width: 15px; height: 15px; opacity: .35; transition: transform var(--duration-fast), opacity var(--duration-fast); }
  .nav-links a:hover {
    border-color: rgba(255,255,255,.1) !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: translateX(2px) !important;
  }
  .nav-links a:hover .nav-arrow { opacity: .8; transform: translateX(2px); }
  .nav-links a.is-active {
    border-color: rgba(255,255,255,.15) !important;
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--gold-500), 0 8px 18px rgba(0,0,0,.08) !important;
  }
  .nav-links a.is-active .nav-icon { background: #fff; color: var(--brand-700); transform: scale(1.02); }
  .nav-links a.is-active .nav-copy small { color: rgba(255,255,255,.67); }
  .nav-links a[hidden] { display: none !important; }
  .nav-empty { display: none; padding: 18px 10px; color: rgba(255,255,255,.58); font-size: 12px; text-align: center; }
  .nav-empty.is-visible { display: block; }

  .sidebar-footer-actions {
    gap: 7px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .sidebar-footer-actions .btn,
  .sidebar-logout-inline button {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.075) !important;
    color: #fff !important;
    box-shadow: none;
  }
  .sidebar-logout-inline button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-weight: 700; }
  .sidebar-footer-actions .btn:hover,
  .sidebar-logout-inline button:hover { background: rgba(255,255,255,.13) !important; }

  .main, .main.has-mobile-nav {
    min-width: 0;
    min-height: 100dvh;
    padding: 18px clamp(14px, 2vw, 32px) 44px !important;
    overflow: visible !important;
  }
  .main > * { width: min(100%, var(--content-max)); margin-inline: auto; }
  .content-shell {
    display: grid !important;
    gap: 18px !important;
    min-width: 0;
    padding-bottom: 20px !important;
  }

  .topbar.app-topbar-card {
    position: sticky;
    top: 12px;
    z-index: 100;
    min-height: 64px;
    margin: 0 auto 18px;
    padding: 10px 12px 10px 14px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent) !important;
    border-radius: 17px !important;
    background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
    box-shadow: 0 10px 32px rgba(8,42,31,.08) !important;
    backdrop-filter: blur(18px) saturate(1.15);
  }
  html[data-theme="dark"] .topbar.app-topbar-card { background: rgba(16,29,24,.87) !important; }
  .topbar-actions { gap: 7px; }
  .topbar-actions form { margin: 0; }
  .user-pill { min-width: 0; gap: 10px; }
  .avatar-dot {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--brand-600), var(--brand-800));
    color: #fff;
    box-shadow: 0 8px 18px rgba(13,104,72,.2);
  }
  .avatar-dot::before { content: attr(data-initial); font-size: 13px; font-weight: 820; }
  .user-pill strong { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .topbar-subline { font-size: 11px; text-transform: capitalize; }

  .command-trigger {
    min-width: 210px;
    justify-content: flex-start !important;
    color: var(--muted) !important;
    font-weight: 600 !important;
  }
  .command-trigger kbd { margin-left: auto; }
  kbd {
    display: inline-flex;
    min-width: 24px;
    height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--surface-soft);
    color: var(--muted);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
  }

  .mobile-shell-bar { display: none !important; }
  .bottom-nav { display: none !important; }

  .card, .section-block, .panel.soft, .table-wrap, .list-card, .public-card {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-md) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-xs) !important;
  }
  .card { padding: clamp(14px, 1.6vw, 20px); }
  .card, .section-block, .panel, .table-wrap, .public-card, .hub-card {
    transition: transform var(--duration) var(--ease-out), box-shadow var(--duration), border-color var(--duration), background-color var(--duration);
  }
  .card:hover, .public-card:hover, a.hub-card:hover {
    border-color: color-mix(in srgb, var(--brand-600) 27%, var(--line)) !important;
    box-shadow: var(--shadow-sm) !important;
  }
  a.card:hover, a.public-card:hover, a.hub-card:hover { transform: translateY(-3px); }

  .page-head {
    align-items: flex-end;
    margin: 0 0 2px;
    padding: 4px 2px 2px;
  }
  .page-head > div:first-child { min-width: 0; }
  .page-head h1 { margin: 0 0 5px; font-size: clamp(1.55rem, 1.4vw + 1rem, 2.25rem); }
  .page-head .muted { max-width: 760px; font-size: 13px; }

  .btn, .icon-btn, button:not(.unstyled) {
    position: relative;
    isolation: isolate;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 11px !important;
    overflow: hidden;
    font-size: 13px;
    font-weight: 720;
    letter-spacing: -.005em;
    box-shadow: none;
    transition: transform var(--duration-fast), box-shadow var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), opacity var(--duration-fast);
  }
  .btn { padding: 10px 14px; }
  .icon-btn { min-width: 44px; padding: 0 11px; }
  .btn:hover, .icon-btn:hover, button:not(.unstyled):hover { transform: translateY(-1px); }
  .btn:active, .icon-btn:active, button:not(.unstyled):active, .nav-pressed { transform: translateY(0) scale(.975) !important; }
  .btn.primary {
    border-color: var(--brand-700);
    background: linear-gradient(145deg, var(--brand-600), var(--brand-800)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(13,104,72,.17);
  }
  .btn.primary:hover { box-shadow: 0 11px 24px rgba(13,104,72,.24); }
  .btn.light {
    border-color: var(--line) !important;
    background: var(--surface-soft) !important;
    color: var(--slate-700) !important;
  }
  html[data-theme="dark"] .btn.light { color: var(--ink) !important; }
  .btn.light:hover { border-color: var(--line-strong) !important; background: var(--surface-muted) !important; }
  .btn.success { background: var(--success-700) !important; color: #fff !important; }
  .btn.danger { background: var(--danger-600) !important; color: #fff !important; }
  .btn[disabled], button[disabled] { opacity: .58; cursor: not-allowed; transform: none !important; }
  .btn.is-loading { padding-right: 38px; }
  .btn.is-loading::after {
    content: "";
    position: absolute;
    right: 14px;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
  }
  .ripple {
    position: absolute;
    z-index: -1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    opacity: .13;
    pointer-events: none;
    transform: translate(-50%,-50%) scale(0);
    animation: ripple .58s var(--ease-out) forwards;
  }

  .badge, .mini-badge {
    border: 1px solid color-mix(in srgb, var(--brand-600) 18%, var(--line));
    background: var(--brand-50);
    color: var(--brand-800);
    letter-spacing: .01em;
  }
  html[data-theme="dark"] .badge { background: var(--ansor-green-soft); color: #b7efd7; }
  .badge { min-height: 27px; padding: 4px 9px; font-size: 11px; }
  .mini-badge { border: 2px solid var(--surface); background: #df3434; color: #fff; }
  .delegate-note { color: #ffe6a5; font-size: 11px; font-weight: 700; }

  .alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 auto 14px;
    padding: 12px 44px 12px 14px;
    border: 1px solid;
    border-radius: 13px !important;
    box-shadow: var(--shadow-sm);
    animation: toast-in .42s var(--ease-out) both;
  }
  .alert.success { border-color: #b8e8d0; background: var(--success-50); color: var(--success-700); }
  .alert.error { border-color: #f0c3c1; background: var(--danger-50); color: var(--danger-700); }
  .alert.is-leaving { animation: toast-out .25s var(--ease-standard) forwards; }
  .alert-dismiss {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 30px;
    min-width: 30px !important;
    height: 30px;
    min-height: 30px !important;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: currentColor;
    opacity: .65;
  }

  .actions, .between, .inline-actions { gap: 8px; }
  .between { justify-content: space-between; }

  input, select, textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line-strong) !important;
    border-radius: 10px !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    box-shadow: inset 0 1px 2px rgba(7,54,36,.025);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background-color var(--duration-fast);
  }
  input, select { padding: 9px 11px; }
  textarea { min-height: 110px; padding: 10px 11px; resize: vertical; }
  input::placeholder, textarea::placeholder { color: var(--slate-400); opacity: 1; }
  input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--brand-600) 25%, var(--line-strong)) !important; }
  input:focus, select:focus, textarea:focus {
    border-color: var(--brand-600) !important;
    box-shadow: var(--ring) !important;
  }
  input:disabled, select:disabled, textarea:disabled, input[readonly] { background: var(--surface-muted) !important; color: var(--muted) !important; }
  input[type="checkbox"], input[type="radio"] { width: 18px; min-height: 18px; height: 18px; accent-color: var(--brand-700); box-shadow: none; }
  input[type="file"] { padding: 7px; }
  input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: var(--brand-50);
    color: var(--brand-800);
    font-weight: 700;
    cursor: pointer;
  }
  label { color: var(--slate-700); font-size: 12px; font-weight: 720; }
  html[data-theme="dark"] label { color: #c7d8d0; }
  .form-grid { gap: 13px !important; }
  .field-hint, .help-text, .small-text { font-size: 11px; line-height: 1.45; }

  .table-wrap, .auto-table-wrap, .responsive-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    scrollbar-width: thin;
  }
  table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--ink); }
  th, td { padding: 11px 12px !important; border-bottom: 1px solid var(--line) !important; vertical-align: top; }
  th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-soft) !important;
    color: var(--slate-700) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  html[data-theme="dark"] th { color: #c6d7cf !important; }
  tbody tr { transition: background-color var(--duration-fast); }
  tbody tr:hover { background: color-mix(in srgb, var(--brand-50) 65%, transparent); }
  tbody tr:last-child td { border-bottom: 0 !important; }

  .hub-grid { grid-template-columns: repeat(auto-fit, minmax(min(230px,100%), 1fr)); gap: 13px; }
  .hub-card { min-height: 136px; padding: 18px; border-radius: var(--radius-md) !important; }
  .hub-card span { font-size: 10px; letter-spacing: .08em; }
  .hub-card strong { font-size: 18px; }

  .dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
  }
  .dashboard-kpi {
    position: relative;
    min-height: 116px;
    overflow: hidden;
    isolation: isolate;
  }
  .dashboard-kpi::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -34px;
    z-index: -1;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22,156,109,.12), transparent 68%);
  }
  .dashboard-kpi span { color: var(--muted); font-size: 11px; font-weight: 700; }
  .dashboard-kpi strong { display: block; margin-top: 9px; color: var(--brand-700); font-size: clamp(1.7rem, 2vw, 2.35rem); line-height: 1; }
  html[data-theme="dark"] .dashboard-kpi strong { color: #69d8aa; }
  .dashboard-focus-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .dashboard-panel h2 { margin: 0; }
  .dashboard-task-list { display: grid; gap: 8px; margin-top: 12px; }
  .dashboard-task-list > a {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 2px 12px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-soft);
  }
  .dashboard-task-list > a:hover { border-color: color-mix(in srgb, var(--brand-600) 28%, var(--line)); background: var(--brand-50); transform: translateX(2px); }
  html[data-theme="dark"] .dashboard-task-list > a:hover { background: var(--surface-muted); }
  .dashboard-task-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .dashboard-task-list span { grid-column: 1; color: var(--muted); font-size: 11px; }
  .dashboard-task-list em { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 10px; font-style: normal; white-space: nowrap; }
  .letter-type-bars > div i, .bar { border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--brand-600), var(--brand-500)) !important; }

  .empty-state { min-height: 190px; align-content: center; justify-items: center; text-align: center; }
  .info-box { border-radius: 12px !important; background: var(--surface-soft) !important; color: var(--muted); }

  .command-dialog {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: grid;
    place-items: start center;
    padding: min(13vh, 110px) 16px 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--duration), visibility var(--duration);
  }
  .command-dialog.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .command-backdrop { position: absolute; inset: 0; background: rgba(3,17,12,.58); backdrop-filter: blur(7px); }
  .command-panel {
    position: relative;
    width: min(620px, 100%);
    max-height: min(680px, 76vh);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px) scale(.985);
    transition: transform var(--duration) var(--ease-out);
  }
  .command-dialog.is-open .command-panel { transform: translateY(0) scale(1); }
  .command-input-wrap { position: relative; display: flex; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); }
  .command-input-wrap > .ui-icon { position: absolute; left: 25px; color: var(--muted); }
  .command-input-wrap input { height: 50px; padding-left: 44px; padding-right: 50px; border: 0 !important; background: var(--surface-soft) !important; font-size: 16px; box-shadow: none !important; }
  .command-close { position: absolute; right: 20px; min-width: 32px !important; width: 32px; min-height: 32px !important; height: 32px; padding: 0; border: 0 !important; background: transparent !important; color: var(--muted); }
  .command-results { display: grid; gap: 5px; max-height: 58vh; padding: 10px; overflow-y: auto; }
  .command-results a {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 10px;
    border-radius: 12px;
  }
  .command-results a:hover, .command-results a.is-selected { background: var(--brand-50); }
  html[data-theme="dark"] .command-results a:hover, html[data-theme="dark"] .command-results a.is-selected { background: var(--surface-muted); }
  .command-results .result-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: var(--surface-muted); color: var(--brand-700); }
  .command-results b { display: block; font-size: 13px; }
  .command-results small { display: block; color: var(--muted); font-size: 10px; }
  .command-results .result-arrow { color: var(--muted); }
  .command-empty { padding: 30px 16px; color: var(--muted); text-align: center; }
  .command-footer { display: flex; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }

  .page-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 0;
    height: 3px;
    opacity: 0;
    background: linear-gradient(90deg, var(--gold-500), var(--brand-500));
    box-shadow: 0 0 14px rgba(22,156,109,.35);
    transition: width .22s var(--ease-out), opacity .2s;
  }
  .page-progress.is-active { width: 72%; opacity: 1; }
  .page-progress.is-complete { width: 100%; opacity: 0; transition: width .13s, opacity .32s .1s; }

  .scroll-top {
    position: fixed;
    right: 20px;
    bottom: 22px;
    z-index: 130;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--surface) 91%, transparent) !important;
    color: var(--brand-700);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    backdrop-filter: blur(12px);
  }
  .scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

  .connection-status {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 700;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #f1cc9a;
    border-radius: var(--radius-pill);
    background: var(--warning-50);
    color: var(--warning-700);
    box-shadow: var(--shadow-md);
    font-size: 11px;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    transition: all var(--duration);
  }
  .connection-status.is-offline { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .connection-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s infinite; }

  .reveal-item {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .52s var(--ease-out), transform .52s var(--ease-out);
    transition-delay: min(calc(var(--reveal-index, 0) * 35ms), 280ms);
  }
  .reveal-item.is-visible { opacity: 1; transform: translateY(0); }

  /* Authentication */
  .auth-body { overflow-x: hidden; background: var(--brand-950); }
  .auth-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr);
    min-height: 100dvh;
    overflow: hidden;
    background:
      radial-gradient(circle at 18% 22%, rgba(255,255,255,.12), transparent 25rem),
      linear-gradient(135deg, #063e2a 0%, #092f23 42%, #071712 100%);
  }
  .auth-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    padding: clamp(32px, 5vw, 72px);
    color: #fff;
  }
  .auth-visual::after {
    content: "";
    position: absolute;
    right: -180px;
    bottom: -220px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(255,255,255,.035), 0 0 0 140px rgba(255,255,255,.025);
  }
  .auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
  .auth-logo { width: 64px; height: 64px; padding: 6px; border-radius: 18px; background: #fff; box-shadow: 0 16px 34px rgba(0,0,0,.2); }
  .auth-brand strong { display: block; color: #fff; font-size: 20px; letter-spacing: -.03em; }
  .auth-brand span { color: rgba(255,255,255,.65); font-size: 12px; }
  .auth-copy { position: relative; z-index: 1; max-width: 580px; padding: 30px 0; }
  .auth-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; color: #f3cb70; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .auth-copy h1 { max-width: 620px; margin: 0 0 18px; color: #fff; font-size: clamp(2.15rem, 4.4vw, 4.65rem); line-height: .98; letter-spacing: -.055em; }
  .auth-copy p { max-width: 530px; margin: 0; color: rgba(255,255,255,.7); font-size: clamp(14px, 1.2vw, 17px); }
  .auth-features { position: relative; z-index: 1; display: flex; gap: 14px; flex-wrap: wrap; }
  .auth-feature { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.68); font-size: 11px; }
  .auth-feature .ui-icon { color: #83e1b9; }
  .auth-form-side { display: grid; min-width: 0; place-items: center; padding: clamp(18px, 4vw, 64px); background: var(--page); }
  .native-auth-wrap, .auth-wrap { display: contents !important; min-height: unset !important; padding: 0 !important; background: none !important; }
  .native-login-card, .login-card {
    width: min(470px, 100%) !important;
    padding: clamp(24px, 4vw, 42px) !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-lg) !important;
  }
  .login-card h2 { margin: 0 0 8px; font-size: clamp(1.65rem, 2vw, 2.15rem); }
  .login-card .login-lead { margin: 0 0 26px; color: var(--muted); font-size: 13px; }
  .login-field { display: grid; gap: 7px; margin-bottom: 15px; }
  .password-wrap { position: relative; }
  .password-wrap input { padding-right: 48px; }
  .password-toggle { position: absolute !important; top: 50%; right: 6px; width: 36px; min-width: 36px !important; height: 36px; min-height: 36px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--muted) !important; transform: translateY(-50%) !important; }
  .login-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 20px; color: var(--muted); font-size: 11px; }
  .login-meta a { color: var(--brand-700); font-weight: 700; }
  .login-security { display: flex; gap: 8px; margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
  .login-security .ui-icon { color: var(--brand-700); }

  /* Public website */
  .public-body { background: var(--page); }
  .public-shell { min-height: 100dvh; padding: 0 !important; }
  .public-topbar.public-header-clean {
    position: sticky;
    top: 0;
    z-index: 160;
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 80px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    padding: 12px clamp(16px, 4vw, 64px);
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow: 0 7px 30px rgba(8,42,31,.06);
    backdrop-filter: blur(18px) saturate(1.15);
  }
  html[data-theme="dark"] .public-topbar.public-header-clean { background: rgba(16,29,24,.9); }
  .public-brand-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .public-logo { width: 50px; height: 50px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
  .public-title-copy { min-width: 0; }
  .public-brand { color: var(--ink) !important; font-size: 17px !important; }
  .public-sub { color: var(--brand-700) !important; font-size: 10px !important; font-weight: 800; }
  .public-desc { max-width: 360px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .public-header-actions { flex-wrap: nowrap; }
  .public-header-actions a { min-height: 40px; padding: 8px 12px; }
  .public-menu-toggle { display: none; }
  .public-main { width: min(calc(100% - 32px), 1480px); margin: 0 auto; padding: clamp(22px, 3.5vw, 50px) 0 44px; }
  .public-main > * + * { margin-top: 18px; }
  .public-hero {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    border: 0 !important;
    border-radius: 26px !important;
    background:
      radial-gradient(circle at 86% 12%, rgba(255,255,255,.17), transparent 22rem),
      linear-gradient(135deg, var(--brand-800), var(--brand-950)) !important;
    color: #fff;
    box-shadow: var(--shadow-md) !important;
  }
  .public-hero::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -180px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    box-shadow: 0 0 0 54px rgba(255,255,255,.035), 0 0 0 108px rgba(255,255,255,.02);
  }
  .public-hero h1, .public-hero h2, .public-hero strong { color: #fff; }
  .public-hero p, .public-hero .muted { color: rgba(255,255,255,.72) !important; }
  .public-hero-copy { position: relative; z-index: 1; max-width: 760px; }
  .section-kicker { color: #f0c65f !important; font-size: 10px; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
  .contrast-light { border-color: rgba(255,255,255,.16) !important; background: rgba(255,255,255,.1) !important; color: #fff !important; }
  .public-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px,100%),1fr)); gap: 13px; }
  .public-card { padding: 14px; }
  .public-cover { aspect-ratio: 16/9; margin: -14px -14px 13px; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--surface-muted); }
  .public-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
  .public-card:hover .public-cover img { transform: scale(1.035); }
  .news-item { border-radius: 12px !important; transition: transform var(--duration-fast), border-color var(--duration-fast), background-color var(--duration-fast); }
  .news-item:hover { transform: translateX(3px); }
  .chart-row { border-radius: 11px; }
  .public-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px clamp(16px, 4vw, 64px);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
  }
  .public-footer-links { display: flex; gap: 14px; flex-wrap: wrap; }
  .public-footer a:hover { color: var(--brand-700); }

  /* Error pages */
  .error-page, body > .error-card { width: min(560px, calc(100% - 32px)); margin: 12vh auto; }

  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes ripple { to { opacity: 0; transform: translate(-50%,-50%) scale(18); } }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
  @keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }

  @media (max-width: 1250px) {
    :root { --sidebar-w: 258px; }
    .dashboard-kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .command-trigger { min-width: 150px; }
  }

  @media (max-width: 900px) {
    html { scrollbar-gutter: auto; }
    .app-shell { display: block !important; }
    .sidebar {
      position: fixed !important;
      inset: 0 auto 0 0;
      z-index: 300 !important;
      width: min(88vw, 340px) !important;
      padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
      padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
      box-shadow: var(--shadow-lg);
      transform: translate3d(-104%,0,0);
      transition: transform .32s var(--ease-out);
    }
    body.nav-open .sidebar { transform: translate3d(0,0,0); }
    .sidebar-close { display: inline-flex !important; }
    .mobile-backdrop {
      position: fixed;
      inset: 0;
      z-index: 290 !important;
      background: rgba(3,18,12,.56) !important;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      backdrop-filter: blur(4px);
      transition: opacity var(--duration), visibility var(--duration);
    }
    body.nav-open .mobile-backdrop { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
    body.nav-open, html.nav-open { overflow: hidden !important; }

    .main, .main.has-mobile-nav {
      width: 100%;
      min-height: 100dvh;
      padding: 0 12px calc(96px + env(safe-area-inset-bottom,0px)) !important;
    }
    .mobile-shell-bar {
      position: sticky;
      top: 0;
      z-index: 180;
      display: grid !important;
      grid-template-columns: 44px minmax(0,1fr) 44px;
      align-items: center;
      gap: 8px;
      width: calc(100% + 24px);
      min-height: calc(66px + env(safe-area-inset-top,0px));
      margin: 0 -12px 14px;
      padding: calc(8px + env(safe-area-inset-top,0px)) 12px 8px;
      border: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
      border-radius: 0 0 16px 16px !important;
      background: color-mix(in srgb, var(--surface) 91%, transparent);
      box-shadow: 0 8px 26px rgba(8,42,31,.07);
      backdrop-filter: blur(18px) saturate(1.1);
    }
    html[data-theme="dark"] .mobile-shell-bar { background: rgba(16,29,24,.91); }
    .mobile-shell-bar .icon-btn { width: 44px !important; height: 44px; padding: 0; }
    .mobile-brand-center { display: grid !important; min-width: 0; justify-items: center; gap: 1px !important; }
    .mobile-brand-center strong, .mobile-brand-center span { max-width: 54vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-brand-center strong { color: var(--ink); font-size: 13px; }
    .mobile-brand-center span { color: var(--muted); font-size: 10px; }
    .topbar.app-topbar-card { display: none !important; }
    .content-shell { gap: 14px !important; }
    .page-head { align-items: flex-start; flex-direction: column; gap: 10px; }
    .page-head .actions { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding: 2px 1px 5px; scrollbar-width: none; }
    .page-head .actions::-webkit-scrollbar { display: none; }
    .page-head .actions .btn { flex: 0 0 auto; }

    .bottom-nav {
      position: fixed !important;
      left: 10px !important;
      right: 10px !important;
      bottom: calc(9px + env(safe-area-inset-bottom,0px)) !important;
      z-index: 230 !important;
      display: flex !important;
      gap: 4px;
      padding: 7px;
      border: 1px solid color-mix(in srgb, var(--line) 80%, transparent) !important;
      border-radius: 18px !important;
      background: color-mix(in srgb, var(--surface) 91%, transparent) !important;
      box-shadow: 0 18px 42px rgba(7,38,27,.18) !important;
      backdrop-filter: blur(18px) saturate(1.15);
    }
    html[data-theme="dark"] .bottom-nav { background: rgba(16,29,24,.92) !important; }
    body.nav-open .bottom-nav { opacity: 0; visibility: hidden; }
    .bottom-nav a {
      display: grid !important;
      flex: 1 1 0;
      min-width: 0;
      min-height: 56px;
      place-items: center;
      align-content: center;
      gap: 3px;
      padding: 5px 2px;
      border-radius: 12px !important;
      color: var(--muted);
    }
    .bottom-nav a .ui-icon { width: 20px; height: 20px; }
    .bottom-nav a small { max-width: 100%; overflow: hidden; font-size: 9px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
    .bottom-nav a.is-active { background: var(--brand-50) !important; color: var(--brand-700) !important; }
    html[data-theme="dark"] .bottom-nav a.is-active { background: var(--surface-muted) !important; color: #79dfb4 !important; }

    .dashboard-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .dashboard-kpi { min-height: 105px; }
    .dashboard-focus-grid { grid-template-columns: 1fr; }
    .card { padding: 14px; }
    .scroll-top { right: 14px; bottom: calc(82px + env(safe-area-inset-bottom,0px)); }
    .connection-status { bottom: calc(84px + env(safe-area-inset-bottom,0px)); }

    .auth-shell { grid-template-columns: 1fr; background: var(--page); }
    .auth-visual { min-height: auto; padding: 24px 20px 34px; background: linear-gradient(145deg,#0b6948,#063624); }
    .auth-copy { padding: 42px 0 12px; }
    .auth-copy h1 { max-width: 560px; font-size: clamp(2.25rem, 11vw, 4rem); }
    .auth-features { display: none; }
    .auth-form-side { padding: 0 14px 28px; background: linear-gradient(180deg, #063624 0 58px, var(--page) 58px); }
    .native-login-card, .login-card { margin-top: 0; border-radius: 22px !important; }

    .public-topbar.public-header-clean { min-height: 68px; padding: 9px 12px; }
    .public-logo { width: 44px; height: 44px; border-radius: 12px; }
    .public-desc { display: none; }
    .public-menu-toggle { display: inline-flex !important; }
    .public-header-actions {
      position: fixed;
      top: calc(70px + env(safe-area-inset-top,0px));
      left: 12px;
      right: 12px;
      z-index: 210;
      display: grid !important;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 8px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--surface);
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px) scale(.985);
      transition: all var(--duration) var(--ease-out);
    }
    body.public-nav-open .public-header-actions { opacity: 1; visibility: visible; transform: none; }
    .public-header-actions a { width: 100%; }
    .public-main { width: min(calc(100% - 24px),1480px); padding-top: 18px; }
    .public-hero { min-height: 300px; border-radius: 20px !important; }
    .public-footer { align-items: flex-start; flex-direction: column; padding: 22px 14px 28px; }
  }

  @media (max-width: 600px) {
    body { font-size: 14px; }
    .dashboard-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dashboard-kpi { min-height: 96px; padding: 13px; }
    .dashboard-kpi strong { font-size: 1.7rem; }
    .dashboard-task-list > a { grid-template-columns: 1fr; }
    .dashboard-task-list em { grid-column: 1; grid-row: auto; justify-self: start; }
    .page-head h1 { font-size: 1.55rem; }
    .page-head .muted { font-size: 12px; }
    .actions .btn { min-height: 42px; padding: 9px 12px; }
    .command-dialog { padding-top: 9vh; }
    .command-panel { max-height: 82vh; border-radius: 17px; }
    .auth-logo { width: 54px; height: 54px; border-radius: 15px; }
    .auth-copy { padding-top: 34px; }
    .native-login-card, .login-card { padding: 23px 18px !important; }
    .public-title-copy .public-brand { font-size: 15px !important; }
    .public-hero { padding: 22px 17px !important; }
  }

  @media (max-width: 420px) {
    .main, .main.has-mobile-nav { padding-inline: 9px !important; }
    .mobile-shell-bar { width: calc(100% + 18px); margin-inline: -9px; }
    .dashboard-kpi-grid { gap: 8px; }
    .dashboard-kpi { min-height: 92px; }
    .bottom-nav { left: 7px !important; right: 7px !important; }
    .bottom-nav a small { font-size: 8px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
      transition-delay: 0ms !important;
    }
    .reveal-item { opacity: 1; transform: none; }
  }
}

@media screen {
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .theme-icon-sun { display: none; }
  html[data-theme="dark"] .theme-icon-moon { display: none; }
  html[data-theme="dark"] .theme-icon-sun { display: block; }
  .has-badge { position: relative; }
  .no-results-row td { padding: 24px !important; color: var(--muted); text-align: center; }
  .file-name-hint { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
}