:root {
      --primary: hsla(196, 100%, 46.9%, 1);
      --secondary: hsla(219, 12.1%, 22.7%, 1);
      --accent: hsla(0, 0%, 50.2%, 1);
      --hyperlink: hsla(221, 87%, 51%, 1);
      --btn-bg-primary-default: hsla(196, 100%, 46.9%, 1);
      --btn-bg-primary-hover: hsla(196, 100%, 34.5%, 1);
      --btn-border-primary-default: hsla(196, 100%, 46.9%, 1);
      --btn-bg-secondary-default: hsla(219, 12.1%, 22.7%, 1);
      --btn-bg-secondary-hover: hsla(233, 8.9%, 17.6%, 1);
      --btn-border-secondary-default: hsla(219, 12.1%, 22.7%, 1);
      --black: hsla(225, 13.3%, 5.9%, 1);
      --black-l-1: hsla(220, 3.9%, 15.1%, 1);
      --black-l-2: hsla(225, 3.23%, 24.31%, 1);
      --black-l-3: hsla(220, 1.75%, 33.53%, 1);
      --black-l-4: hsla(225, 1.83%, 42.75%, 1);
      --black-l-7: hsla(220, 1.99%, 70.39%, 1);
      --black-l-8: hsla(210, 1.92%, 79.61%, 1);
      --black-l-9: hsla(220, 5.26%, 88.82%, 1);
      --white: hsla(0, 0%, 100%, 1);

      --bg: var(--black);
      --bg-soft: hsl(221 18% 9%);
      --surface: hsl(220 16% 13%);
      --surface-2: hsl(220 13% 17%);
      --surface-3: hsl(220 10% 20%);
      --text: hsl(210 20% 94%);
      --muted: var(--black-l-8);
      --line: hsl(220 12% 27%);
      --line-strong: hsl(220 14% 35%);
      --brand: var(--primary);
      --brand-ink: hsl(196 100% 88%);
      --brand-soft: hsl(196 80% 22%);
      --link: var(--hyperlink);
      --warning: hsl(27 82% 63%);
      --ok-bg: hsl(155 45% 23%);
      --ok-fg: hsl(153 58% 77%);
      --ok-line: hsl(155 38% 34%);
      --warn-bg: hsl(27 53% 24%);
      --warn-fg: hsl(34 86% 77%);
      --warn-line: hsl(29 45% 38%);
      --danger-bg: hsl(0 45% 24%);
      --danger-fg: hsl(0 70% 80%);
      --danger-line: hsl(0 40% 38%);
      --info-bg: hsl(210 45% 24%);
      --info-fg: hsl(210 70% 80%);
      --info-line: hsl(210 40% 40%);
      --muted-bg: hsl(220 11% 22%);
      --muted-fg: hsl(215 20% 78%);
      --muted-line: hsl(220 10% 35%);
      --ring: color-mix(in srgb, var(--primary) 42%, transparent);
      --shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
      --shadow-soft: 0 14px 30px rgba(0, 0, 0, 0.32);
      --radius: 16px;
    }

    [data-theme="light"] {
      --primary: hsla(196, 100%, 46.9%, 1);
      --secondary: hsla(219, 12.1%, 88%, 1);
      --accent: hsla(0, 0%, 50.2%, 1);
      --hyperlink: hsla(221, 87%, 51%, 1);
      --btn-bg-primary-default: hsla(196, 100%, 46.9%, 1);
      --btn-bg-primary-hover: hsla(196, 100%, 38%, 1);
      --btn-border-primary-default: hsla(196, 100%, 46.9%, 1);
      --btn-bg-secondary-default: hsla(219, 12.1%, 88%, 1);
      --btn-bg-secondary-hover: hsla(219, 12.1%, 80%, 1);
      --btn-border-secondary-default: hsla(219, 12.1%, 82%, 1);
      --black: hsla(0, 0%, 96%, 1);
      --black-l-1: hsla(0, 0%, 91%, 1);
      --black-l-2: hsla(0, 0%, 85%, 1);
      --black-l-3: hsla(0, 0%, 78%, 1);
      --black-l-4: hsla(0, 0%, 70%, 1);
      --black-l-7: hsla(0, 0%, 45%, 1);
      --black-l-8: hsla(0, 0%, 30%, 1);
      --black-l-9: hsla(0, 0%, 12%, 1);
      --white: hsla(0, 0%, 100%, 1);

      --bg: var(--white);
      --bg-soft: hsl(0, 0%, 96%);
      --surface: hsl(0, 0%, 100%);
      --surface-2: hsl(0, 0%, 93%);
      --surface-3: hsl(0, 0%, 86%);
      --text: hsl(0, 0%, 12%);
      --muted: var(--black-l-7);
      --line: hsl(0, 0%, 82%);
      --line-strong: hsl(0, 0%, 72%);
      --brand: var(--primary);
      --brand-ink: hsl(196, 100%, 30%);
      --brand-soft: hsl(196, 60%, 88%);
      --link: var(--hyperlink);
      --warning: hsl(27, 82%, 43%);
      --ok-bg: hsl(155, 30%, 88%);
      --ok-fg: hsl(155, 60%, 25%);
      --ok-line: hsl(155, 38%, 70%);
      --warn-bg: hsl(27, 30%, 90%);
      --warn-fg: hsl(27, 60%, 35%);
      --warn-line: hsl(29, 45%, 75%);
      --danger-bg: hsl(0, 40%, 90%);
      --danger-fg: hsl(0, 62%, 34%);
      --danger-line: hsl(0, 40%, 73%);
      --info-bg: hsl(210, 44%, 91%);
      --info-fg: hsl(213, 52%, 34%);
      --info-line: hsl(210, 42%, 73%);
      --muted-bg: hsl(0, 0%, 93%);
      --muted-fg: hsl(0, 0%, 40%);
      --muted-line: hsl(0, 0%, 82%);
      --ring: color-mix(in srgb, var(--primary) 42%, transparent);
      --shadow: 0 26px 60px rgba(0, 0, 0, 0.12);
      --shadow-soft: 0 14px 30px rgba(0, 0, 0, 0.08);
      --radius: 16px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 8% -10%, color-mix(in srgb, var(--brand) 16%, transparent) 0, transparent 36%),
        radial-gradient(circle at 92% -14%, color-mix(in srgb, var(--link) 13%, transparent) 0, transparent 32%),
        linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
      min-height: 100vh;
    }

    a {
      color: var(--link);
      text-underline-offset: 2px;
    }

    a:hover { color: color-mix(in srgb, var(--link) 70%, var(--white) 30%); }

    .shell {
      max-width: 1180px;
      margin: 0 auto;
      padding: 10px 5px 56px;
      animation: fade-up 260ms ease-out;
    }

    .global-header {
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg-soft) 80%, transparent);
      backdrop-filter: blur(14px);
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .global-inner {
      max-width: 1180px;
      margin: 0 auto;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .brand {
      font-weight: 800;
      color: var(--text);
      text-decoration: none;
      letter-spacing: 0.01em;
      font-size: 0.98rem;
    }

    .brand-block {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .header-meta {
      margin: 0;
      font-size: 0.8rem;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 520px;
    }

    .global-links {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .top-link {
      text-decoration: none;
      color: var(--muted-fg);
      border: 1px solid var(--line);
      background: var(--surface-2);
      border-radius: 11px;
      padding: 7px 11px;
      font-size: 0.9rem;
      font-weight: 600;
    }

    .top-link:hover {
      border-color: var(--line-strong);
      color: var(--text);
      background: var(--surface-3);
    }

    .top-link.portal-login {
      background: color-mix(in srgb, var(--brand) 26%, transparent);
      border-color: color-mix(in srgb, var(--brand) 44%, var(--line) 56%);
      color: var(--brand-ink);
    }

    .header-menu-toggle {
      display: none;
      cursor: pointer;
      font-family: inherit;
      align-items: center;
      justify-content: center;
    }

    .header-menu-panel {
      display: none;
      border-top: 1px solid var(--line);
      padding: 12px 16px;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }

    .header-menu-panel .top-link {
      display: block;
      text-align: left;
    }

    .header-menu-panel .inline-form {
      display: block;
    }

    .header-menu-panel .inline-form .top-link {
      width: 100%;
      text-align: left;
      cursor: pointer;
    }

    .header-menu-meta {
      max-width: 100%;
      padding: 2px 1px 4px;
    }

    .topbar {
      display: none;
    }

    .theme-toggle {
      cursor: pointer;
      border: none;
      font-family: inherit;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .theme-icon-sun { display: none; }

    [data-theme="light"] .theme-icon-moon { display: none; }
    [data-theme="light"] .theme-icon-sun { display: inline; }

    .auth-shell {
      max-width: 560px;
      margin: 4vh auto 0;
    }

    .card {
      background: color-mix(in srgb, var(--surface) 88%, var(--surface-2) 12%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow);
    }

    .card.flat {
      box-shadow: none;
      background: var(--surface-2);
      border-color: var(--line-strong);
    }

    .card.tight { padding: 14px; }

    .card + .card { margin-top: 12px; }

    .stack { display: grid; gap: 12px; }
    .stack-6 { display: grid; gap: 6px; }
    .stack-10 { display: grid; gap: 10px; }
    .stack-14 { display: grid; gap: 14px; }
    .gap-8 { gap: 8px; }
    .gap-10 { gap: 10px; }
    .gap-16 { gap: 16px; }
    .muted { color: var(--muted); }
    .warning { color: var(--warning); }
    .hidden { display: none; }
    .w-auto { width: auto; }
    .w-inline { display: inline; }
    .min-w-260 { min-width: 260px; }
    .min-w-280 { min-width: 280px; }
    .max-w-480 { max-width: 480px; }
    .text-right { text-align: right; }
    .text-center { text-align: center; }
    .text-truncate { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nowrap { white-space: nowrap; }
    .center-v { align-items: center; }
    .space-between { justify-content: space-between; }
    .full { width: 100%; }
    .mt-10 { margin-top: 10px; }
    .mt-12 { margin-top: 12px; }
    .mt-14 { margin-top: 14px; }
    .mb-16 { margin-bottom: 16px; }
    .m-0 { margin: 0; }
    .inline { display: inline-block; }

    .row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .row.end { justify-content: flex-end; }

    .grid {
      display: grid;
      gap: 10px;
    }

    .grid.two { grid-template-columns: minmax(260px, 1fr) auto; }
    .grid.three { grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) auto; }
    .grid.six { grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(140px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) auto; }

    .field-label {
      display: grid;
      gap: 6px;
    }

    .inline-form {
      display: inline;
    }

    [data-filter-form="1"] .filter-toggle-btn {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .option-card {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      background: color-mix(in srgb, var(--surface-2) 80%, var(--surface-3) 20%);
    }

    .option-head {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .helper { font-size: 0.78rem; }

    .loading-state {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 0;
    }

    .spinner {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 2px solid color-mix(in srgb, var(--muted) 55%, transparent);
      border-top-color: var(--brand);
      animation: spin 0.8s linear infinite;
      flex: 0 0 auto;
    }

    .section-gap { height: 14px; }

    .eyebrow {
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 700;
      color: var(--brand-ink);
      font-size: 0.75rem;
      margin: 0;
    }

    h1 {
      margin: 6px 0 0;
      font-size: clamp(1.5rem, 2.1vw, 2rem);
      line-height: 1.2;
    }

    h2 {
      margin: 0;
      font-size: 1.15rem;
      line-height: 1.3;
    }

    .field {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 1rem;
      outline: none;
      color: var(--text);
      background: var(--surface-2);
      transition: border-color 120ms ease, box-shadow 120ms ease;
    }

    .field::placeholder { color: var(--muted); }

    .field:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 4px var(--ring);
    }

    select.field {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding-right: 38px;
      background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
      background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
    }

    select.field option,
    select.field optgroup {
      background: var(--surface);
      color: var(--text);
    }

    .choices {
      margin-bottom: 0;
      width: 100%;
      position: relative;
      z-index: 1;
    }
    .choices.is-open,
    .choices.is-focused {
      z-index: 40;
    }
    .choices__inner {
      min-height: 0;
      border: 1px solid var(--line) !important;
      border-color: var(--line) !important;
      border-radius: 12px;
      background: var(--surface-2) !important;
      color: var(--text);
      padding: 12px 14px;
      box-shadow: none;
    }
    .choices[data-type*=select-one] .choices__inner,
    .choices[data-type*=select-multiple] .choices__inner {
      background: var(--surface-2) !important;
      border-color: var(--line) !important;
      border-radius: 12px;
    }
    .choices[data-type*=select-one] .choices__inner {
      padding-bottom: 12px;
    }
    .choices__list--single .choices__item,
    .choices__item,
    .choices__input,
    .choices__input--cloned {
      color: var(--text);
    }
    .choices__input,
    .choices__input--cloned,
    .choices__list--dropdown .choices__input,
    .choices__list[aria-expanded] .choices__input {
      background: var(--surface-2) !important;
    }
    .choices.is-open .choices__inner,
    .choices.is-focused .choices__inner {
      border-color: var(--brand);
      box-shadow: 0 0 0 4px var(--ring);
    }
    .choices__list--single { padding: 0 18px 0 0; }
    .choices[data-type*=select-one]::after { right: 14px; }
    .choices__list--dropdown,
    .choices__list[aria-expanded] {
      border-radius: 12px;
      border-color: var(--line-strong);
      background: var(--surface) !important;
      z-index: 50;
    }
    .choices__list--dropdown .choices__list,
    .choices__list[aria-expanded] .choices__list,
    .choices__list--dropdown .choices__item,
    .choices__list[aria-expanded] .choices__item,
    .choices__list--dropdown .choices__item--choice,
    .choices__list[aria-expanded] .choices__item--choice {
      background: transparent !important;
    }
    .choices__list--dropdown .choices__item,
    .choices__list[aria-expanded] .choices__item {
      color: var(--text);
    }
    .choices__item--disabled,
    .choices__item--choice.is-disabled {
      color: var(--muted);
    }
    .choices__list--dropdown .choices__item--selectable.is-highlighted,
    .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
      background: var(--brand-soft);
      color: var(--brand-ink);
    }
    .choices__input {
      background: transparent;
      color: var(--text);
    }
    .choices__placeholder {
      opacity: 1;
      color: var(--muted);
    }

    .btn {
      border: 1px solid transparent;
      border-radius: 12px;
      padding: 11px 16px;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, color-mix(in srgb, var(--btn-bg-primary-default) 84%, white 16%), var(--btn-bg-primary-default));
      border-color: var(--btn-border-primary-default);
      color: var(--white);
      transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 18px color-mix(in srgb, var(--btn-bg-primary-default) 38%, transparent);
      background: linear-gradient(180deg, color-mix(in srgb, var(--btn-bg-primary-hover) 88%, white 12%), var(--btn-bg-primary-hover));
    }
    .btn:disabled, .btn.locked { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

    .btn.sm { padding: 6px 10px; font-size: 0.82rem; }
    .btn.sm-alt { padding: 6px 10px; font-size: 0.82rem; background: color-mix(in srgb, var(--btn-bg-secondary-default) 72%, transparent); color: var(--text); border-color: var(--btn-border-secondary-default); }
    .btn.sm-alt:hover { background: color-mix(in srgb, var(--btn-bg-secondary-hover) 78%, transparent); box-shadow: 0 6px 12px color-mix(in srgb, var(--btn-bg-secondary-hover) 30%, transparent); }

    .cart-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--brand);
      color: var(--white);
      font-size: 0.65rem;
      font-weight: 700;
      min-width: 17px;
      height: 17px;
      border-radius: 999px;
      padding: 0 5px;
      margin-left: 4px;
      line-height: 1;
    }

    .cart-qty {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .cart-qty-value {
      font-weight: 700;
      min-width: 18px;
      text-align: center;
      font-size: 0.88rem;
    }
    .btn.alt {
      background: color-mix(in srgb, var(--btn-bg-secondary-default) 72%, transparent);
      color: var(--text);
      border-color: var(--btn-border-secondary-default);
    }

    .btn.alt:hover {
      background: color-mix(in srgb, var(--btn-bg-secondary-hover) 78%, transparent);
      box-shadow: 0 10px 18px color-mix(in srgb, var(--btn-bg-secondary-hover) 35%, transparent);
    }

    .topbar { display: none; }

    .logout-link {
      text-decoration: none;
      border: 1px solid var(--line);
      color: var(--muted);
      background: var(--surface-2);
      padding: 8px 12px;
      border-radius: 11px;
      font-weight: 600;
    }

    .nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: color-mix(in srgb, var(--surface) 70%, transparent);
      backdrop-filter: blur(8px);
    }

    .nav-link {
      text-decoration: none;
      padding: 8px 12px;
      border-radius: 10px;
      border: 1px solid transparent;
      color: var(--muted-fg);
      font-weight: 600;
    }

    .nav-link:hover {
      color: var(--text);
      border-color: var(--line);
      background: var(--surface-2);
    }

    .nav-link.active {
      color: var(--brand-ink);
      background: color-mix(in srgb, var(--brand) 25%, transparent);
      border-color: color-mix(in srgb, var(--brand) 40%, var(--line) 60%);
    }

    .subnav {
      margin-top: -8px;
      margin-bottom: 16px;
      background: color-mix(in srgb, var(--surface-2) 82%, var(--surface-3) 18%);
      border-color: var(--line-strong);
    }

    .tab-strip {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      padding: 8px;
      background: var(--surface-2);
    }

    .tab-chip {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 9px;
      border: 1px solid var(--line);
      background: transparent;
      text-decoration: none;
      color: var(--muted-fg);
      font-size: 0.85rem;
      font-weight: 600;
    }

    .tab-chip:hover {
      color: var(--text);
      border-color: var(--line-strong);
      background: var(--surface-3);
    }

    .tab-chip.active {
      color: var(--brand-ink);
      background: color-mix(in srgb, var(--brand) 25%, transparent);
      border-color: color-mix(in srgb, var(--brand) 42%, var(--line) 58%);
    }

    .subnav .nav-link {
      font-size: 0.88rem;
      padding: 7px 11px;
    }

    .table-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface-2);
    }

    .table-wrap.scroll-y {
      max-height: 65vh;
      overflow-y: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 620px;
    }

    .table-wrap table.compact { min-width: 0; }

    .table-wrap table.printer-cartridge-table {
      table-layout: fixed;
    }

    th, td {
      text-align: left;
      padding: 11px 12px;
      border-bottom: 1px solid var(--line);
    }

    th {
      background: var(--surface-2);
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--muted);
    }

    .table-wrap.scroll-y thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      box-shadow: 0 1px 0 var(--line);
    }

    tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface) 70%, transparent); }
    tbody tr:hover { background: color-mix(in srgb, var(--surface-3) 65%, transparent); }

    .meta-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 10px;
      margin-top: 16px;
    }

    .meta-tile {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface-2);
      padding: 12px;
    }

    .meta-label {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
      margin: 0 0 5px;
      font-weight: 700;
    }

    .meta-value { margin: 0; font-weight: 700; }

    .pill {
      display: inline-block;
      padding: 4px 9px;
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 700;
      line-height: 1.1;
      border: 1px solid transparent;
      white-space: nowrap;
    }

    .pill.ok {
      background: var(--ok-bg);
      color: var(--ok-fg);
      border-color: var(--ok-line);
    }

    .pill.warn {
      background: var(--warn-bg);
      color: var(--warn-fg);
      border-color: var(--warn-line);
    }

    .pill.danger {
      background: var(--danger-bg);
      color: var(--danger-fg);
      border-color: var(--danger-line);
    }

    .pill.info {
      background: var(--info-bg);
      color: var(--info-fg);
      border-color: var(--info-line);
    }

    .pill.muted {
      background: var(--muted-bg);
      color: var(--muted-fg);
      border-color: var(--muted-line);
    }

    .pill.brand {
      background: var(--brand-soft);
      color: var(--brand-ink);
      border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    }

    .status-flash-wrap {
      position: fixed;
      top: 72px;
      right: 18px;
      z-index: 120;
      pointer-events: none;
    }

    .status-flash {
      pointer-events: auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: min(420px, calc(100vw - 36px));
      max-width: min(560px, calc(100vw - 36px));
      padding: 12px 16px;
      border-width: 2px;
      font-size: 0.98rem;
      line-height: 1.25;
      white-space: normal;
      box-shadow: var(--shadow-soft);
      transition: opacity 180ms ease, transform 180ms ease;
      opacity: 0;
      transform: translateY(-4px);
    }

    .status-flash.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .status-flash.is-closing {
      opacity: 0;
      transform: translateY(-4px);
    }

    .support-panel {
      display: none;
      background: color-mix(in srgb, var(--warn-bg) 62%, transparent);
      border-color: var(--warn-line);
      box-shadow: none;
      padding: 14px;
    }

    .ticket-note {
      box-shadow: none;
      padding: 14px;
    }

    .status-flash-close {
      margin-left: auto;
      border: none;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font-size: 1rem;
      line-height: 1;
      padding: 0;
    }

    .empty-state {
      border: 1px dashed var(--line);
      border-radius: 12px;
      padding: 22px 16px;
      text-align: center;
      background: color-mix(in srgb, var(--surface-2) 72%, transparent);
    }

    .empty-state h3 {
      margin: 0;
      font-size: 1rem;
    }

    .empty-state p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .skeleton {
      border-radius: 8px;
      background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.2s linear infinite;
    }

    .skeleton-row {
      height: 40px;
      margin-bottom: 8px;
    }

    .skip-link {
      position: absolute;
      left: 10px;
      top: -100px;
      z-index: 200;
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      padding: 8px 10px;
      text-decoration: none;
    }

    .skip-link:focus {
      top: 10px;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .code-muted {
      font-size: 0.86rem;
      color: var(--muted);
      background: color-mix(in srgb, var(--surface-2) 80%, transparent);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 2px 6px;
    }

    @media (max-width: 760px) {
      .card { padding: 18px; border-radius: 14px; }
      .topbar { align-items: flex-start; flex-direction: column; }
      .logout-link { align-self: flex-start; }
      .auth-shell { margin-top: 18px; }

      /* Compact single-row header: brand left, hamburger + theme right */
      .global-inner {
        flex-direction: row;
        align-items: center;
        padding: 8px 12px;
      }
      .brand-block { flex: 1; min-width: 0; }
      .brand {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .header-meta { display: none; }
      .global-links {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 6px;
      }
      .global-links > .top-link:not(.theme-toggle):not(.header-menu-toggle),
      #header-account-slot {
        display: none;
      }
      .header-menu-toggle { display: inline-flex; }
      .header-menu-panel:not([hidden]) { display: flex; }

      /* Single-row swipeable nav chips */
      .nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px;
        margin-bottom: 8px;
      }
      .nav::-webkit-scrollbar { display: none; }
      .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 6px 10px;
        font-size: 0.88rem;
      }
      .subnav {
        margin-top: -4px;
        margin-bottom: 10px;
      }
      .shell { padding-top: 6px; }
      .grid.two,
      .grid.three,
      .grid.six { grid-template-columns: 1fr; }
      [data-filter-form="1"] .filter-toggle-btn {
        display: inline-flex;
        width: 100%;
      }
      [data-filter-form="1"] .filter-extra {
        display: none;
      }
      [data-filter-form="1"].filters-open .filter-extra {
        display: grid;
      }
      .row.end { justify-content: flex-start; }
      form .btn:not(.sm):not(.sm-alt) { width: 100%; }
      .logout-link { width: auto; }
      .table-wrap { border-radius: 10px; }
      table { min-width: 540px; }
      .table-wrap table.compact { min-width: 420px; }
      .status-flash-wrap {
        top: 76px;
        right: 12px;
      }

      .status-flash {
        min-width: min(340px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        padding: 11px 13px;
        font-size: 0.92rem;
      }
    }

    @keyframes fade-up {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes status-flash-in {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes shimmer {
      from { background-position: 200% 0; }
      to { background-position: -200% 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .shell { animation: none; }
      .status-flash,
      .status-flash.is-closing { transition: none; }
      .skeleton { animation: none; }
      .spinner { animation: none; }
      .btn,
      .btn:hover { transition: none; transform: none; }
    }