:root {
      --layout-shell-max: 1260px;
      --layout-shell-padding: 20px;
      --bg: #f2f2f2;
      --surface: #ffffff;
      --surface-strong: #fafafa;
      --surface-soft: #f5f5f5;
      --ink: #111111;
      --muted: #6b6b6b;
      --border: rgba(17, 17, 17, 0.1);
      --shadow: 0 20px 44px rgba(0, 0, 0, 0.08);
      --accent: #111111;
      --accent-dark: #2b2b2b;
      --accent-soft: rgba(17, 17, 17, 0.06);
      --accent-cool: rgba(17, 17, 17, 0.08);
      --btn-primary-a: #111111;
      --btn-primary-b: #2a2a2a;
      --available-bg: #f4f4f4;
      --available-fg: #111111;
      --taken-bg: #ededed;
      --taken-fg: #111111;
      --lost-bg: #e8e8e8;
      --lost-fg: #111111;
      --broken-bg: #e3e3e3;
      --broken-fg: #111111;
      --custom-bg: #efefef;
      --custom-fg: #111111;
      /* Semantic field tokens — dark mode redefines the value, so base rules
         theme themselves instead of being fought by per-selector !important overrides. */
      --field-bg: rgba(255, 255, 255, 0.92);
      --field-bg-focus: #ffffff;
      --field-border: rgba(17, 17, 17, 0.12);
      --field-border-focus: rgba(17, 17, 17, 0.35);
      --field-ring-focus: rgba(17, 17, 17, 0.08);
      --panel-bg: rgba(255, 255, 255, 0.98);
    }

    [data-theme="dark"] {
      --bg: #161616;
      --surface: #232323;
      --surface-strong: #2d2d2d;
      --surface-soft: #2a2a2a;
      --ink: #f5f5f5;
      --muted: #aeaeae;
      --border: rgba(255, 255, 255, 0.16);
      --shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
      --accent: #e8e8e8;
      --accent-dark: #cccccc;
      --accent-soft: rgba(255, 255, 255, 0.07);
      --accent-cool: rgba(255, 255, 255, 0.1);
      --btn-primary-a: #e8e8e8;
      --btn-primary-b: #cccccc;
      --available-bg: #2a2a2a;
      --available-fg: #e8e8e8;
      --taken-bg: #272727;
      --taken-fg: #e8e8e8;
      --lost-bg: #252525;
      --lost-fg: #e8e8e8;
      --broken-bg: #232323;
      --broken-fg: #e8e8e8;
      --custom-bg: #2b2b2b;
      --custom-fg: #e8e8e8;
      --field-bg: var(--surface-strong);
      --field-bg-focus: var(--surface-strong);
      --field-border: var(--border);
      --field-border-focus: rgba(255, 255, 255, 0.3);
      --field-ring-focus: rgba(255, 255, 255, 0.12);
      --panel-bg: var(--surface);
    }

    /* ───────── Акцентные палитры (поверх базовой dark/light темы) ───────── */
    /* Тёмные палитры — идут вместе с data-theme="dark" */
    html[data-accent="neon-lime"]{ --bg:#1C1C1C; --surface:#262626; --surface-strong:#303030; --surface-soft:#2c2c2c; --ink:#F5F5F5; --muted:#a6a6a6; --border:rgba(204,255,0,.22); --accent:#CCFF00; --accent-dark:#CCFF00; --btn-primary-a:#CCFF00; --btn-primary-b:#b8e600; }
    html[data-accent="gold"]{ --bg:#4C516D; --surface:#565c7c; --surface-strong:#626989; --surface-soft:#5b6184; --ink:#F4ECDA; --muted:#c2c6d6; --border:rgba(227,180,72,.32); --accent:#E3B448; --accent-dark:#E3B448; --btn-primary-a:#E3B448; --btn-primary-b:#d4a53a; }
    html[data-accent="acid"]{ --bg:#4B0082; --surface:#5a1397; --surface-strong:#6a1ba8; --surface-soft:#65199f; --ink:#F3E8FF; --muted:#cdb0e6; --border:rgba(57,255,20,.30); --accent:#39FF14; --accent-dark:#39FF14; --btn-primary-a:#39FF14; --btn-primary-b:#2fe60f; }
    html[data-accent="fog"]{ --bg:#373A40; --surface:#41454c; --surface-strong:#4d525a; --surface-soft:#474b53; --ink:#DCDDE1; --muted:#a6acb4; --border:rgba(220,221,225,.22); --accent:#DCDDE1; --accent-dark:#DCDDE1; --btn-primary-a:#DCDDE1; --btn-primary-b:#c4c6cc; }
    html[data-accent="fuchsia"]{ --bg:#013220; --surface:#0a3d2a; --surface-strong:#114a34; --surface-soft:#0e4631; --ink:#F3E8F3; --muted:#a6c2b4; --border:rgba(255,98,255,.30); --accent:#FF62FF; --accent-dark:#FF62FF; --btn-primary-a:#FF62FF; --btn-primary-b:#e84fe8; }
    html[data-accent="bronze"]{ --bg:#0F172A; --surface:#182238; --surface-strong:#202c46; --surface-soft:#1d2842; --ink:#E8EDF5; --muted:#9aa8c0; --border:rgba(205,127,50,.34); --accent:#CD7F32; --accent-dark:#CD7F32; --btn-primary-a:#CD7F32; --btn-primary-b:#b86f2a; }
    html[data-accent="indigo"]{ --bg:#000080; --surface:#0d0d96; --surface-strong:#1818ad; --surface-soft:#1414a3; --ink:#FFF8D0; --muted:#bcbce8; --border:rgba(255,215,0,.34); --accent:#FFD700; --accent-dark:#FFD700; --btn-primary-a:#FFD700; --btn-primary-b:#e6c200; }
    html[data-accent="mint"]{ --bg:#2B1E16; --surface:#382820; --surface-strong:#453228; --surface-soft:#3f2e24; --ink:#EAF7EA; --muted:#aebeae; --border:rgba(152,255,152,.28); --accent:#98FF98; --accent-dark:#98FF98; --btn-primary-a:#98FF98; --btn-primary-b:#84e684; }
    html[data-accent="terra"]{ --bg:#E2725B; --surface:#e57e69; --surface-strong:#e88f7c; --surface-soft:#e88a77; --ink:#FFF3EE; --muted:#f6d2c8; --border:rgba(64,224,208,.34); --accent:#40E0D0; --accent-dark:#40E0D0; --btn-primary-a:#40E0D0; --btn-primary-b:#33cabb; }
    /* Светлые палитры — идут с базовой светлой темой (тёмный текст) */
    html[data-accent="ultra"]{ --bg:#FFDAB9; --surface:#ffe6cf; --surface-strong:#fff0e3; --surface-soft:#ffefe0; --ink:#120A8F; --muted:#6b5e8a; --border:rgba(18,10,143,.22); --accent:#120A8F; --accent-dark:#0d0769; --btn-primary-a:#120A8F; --btn-primary-b:#0d0769; }
    html[data-accent="silk"]{ --bg:#EFE6DD; --surface:#f6f0e9; --surface-strong:#fbf6f0; --surface-soft:#faf5ef; --ink:#3a4a4f; --muted:#8a9499; --border:rgba(93,114,122,.28); --accent:#5D727A; --accent-dark:#4a5c63; --btn-primary-a:#5D727A; --btn-primary-b:#4a5c63; }

    * {
      box-sizing: border-box;
    }

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
    }

    body {
      font-family: "Avenir Next", "Trebuchet MS", sans-serif;
      margin: 0;
      padding: 0;
      min-height: 100vh;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.45;
      padding-bottom: env(safe-area-inset-bottom, 0);
      transition: background 0.2s, color 0.2s;
    }

    :root:not([data-theme="dark"]) body {
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), transparent 32%),
        radial-gradient(circle at top right, rgba(0, 0, 0, 0.06), transparent 24%),
        radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.04), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
    }

    /* У тем с акцентной палитрой — плоский фон палитры (без градиента) */
    html[data-accent] body {
      background: var(--bg) !important;
    }

    .theme-toggle {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--surface-soft);
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s;
    }

    .theme-toggle:hover {
      background: var(--accent-soft);
    }

    .theme-picker {
      position: relative;
      display: inline-flex;
    }

    .theme-panel {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 140;
      width: min(300px, calc(100vw - 28px));
      max-height: min(72vh, 560px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 10px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .theme-panel[hidden] {
      display: none;
    }

    .theme-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid transparent;
      background: var(--surface-soft);
      color: var(--ink);
      font: inherit;
      font-size: 12px;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.12s, background 0.12s;
    }

    .theme-option:hover {
      background: var(--accent-soft);
    }

    .theme-option[aria-pressed="true"] {
      border-color: var(--accent);
      background: var(--accent-soft);
    }

    .theme-option-swatch {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      flex: 0 0 auto;
      border: 1px solid var(--border);
      box-shadow: inset 0 0 0 4px var(--swatch-bg, transparent);
      background: var(--swatch-dot, #888);
    }

    .theme-option-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    a {
      color: inherit;
    }

    .container {
      max-width: var(--layout-shell-max);
      margin: 0 auto;
      padding: 24px var(--layout-shell-padding) 40px;
    }

    .topbar {
      position: relative;
      z-index: 70;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      padding: 18px 20px;
      margin-bottom: 24px;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
    }

    .topbar h1 {
      margin: 0;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1;
      letter-spacing: -0.03em;
    }

    .topbar-title {
      display: grid;
      gap: 6px;
    }

    .btn {
      display: inline-block;
      background: linear-gradient(135deg, var(--btn-primary-a) 0%, var(--btn-primary-b) 100%);
      color: #ffffff;
      text-decoration: none;
      padding: 12px 16px;
      border-radius: 14px;
      border: none;
      cursor: pointer;
      font: inherit;
      font-weight: 700;
      letter-spacing: 0.01em;
      transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
      min-height: 48px;
      touch-action: manipulation;
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 28px rgba(0, 0, 0, 0.2);
    }

    .btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .btn.gray,
    .btn.orange {
      background: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
    }

    .btn.green,
    .btn-keep-green {
      background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
    }

    /* «Клод-оранж» — фирменный коралл Claude Code, для кнопок приложений (Отчёт/Реквизит, Закупки) */
    .btn.claude-orange {
      background: #d97757;
      color: #ffffff;
      border: none;
    }
    .btn.claude-orange:hover {
      background: #c4634a;
      color: #ffffff;
    }

    .btn.red,
    .btn-keep-red {
      background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
    }

    .btn-take {
      background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
    }

    .btn-return {
      background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
    }

    .flash {
      background: #ffffff;
      border: 1px solid var(--border);
      padding: 14px 16px;
      border-radius: 16px;
      margin-bottom: 18px;
      box-shadow: var(--shadow);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
      gap: 18px;
    }

    .card {
      background: var(--surface);
      border-radius: 24px;
      padding: 18px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }

    /* Блок админских действий — отделён сверху, приглушён */
    .admin-actions-block {
      margin-top: 28px;
      padding-top: 18px;
      border-top: 1px dashed var(--border);
    }
    .admin-actions-label {
      font-size: 11px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 12px;
    }
    .admin-actions-block .details-panel {
      opacity: 0.92;
    }

    .user-avatar-chip {
      width: 42px;
      height: 42px;
      display: inline-grid;
      place-items: center;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(246, 237, 222, 0.92) 100%);
      border: 1px solid rgba(17, 17, 17, 0.1);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
      font-size: 24px;
      line-height: 1;
      flex: 0 0 auto;
    }

    .user-avatar-chip.large {
      width: 72px;
      height: 72px;
      border-radius: 22px;
      font-size: 40px;
    }

    .profile-heading {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }

    .profile-meta-lines {
      display: grid;
      gap: 6px;
    }

    .profile-summary-grid,
    .profile-achievements-grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .profile-achievements-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
      align-items: stretch;
    }

    .profile-summary-tile {
      display: grid;
      gap: 4px;
      padding: 14px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.88);
    }

    .achievement-card {
      display: grid;
      gap: 10px;
      padding: 16px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.88);
    }

    .achievement-card.is-unlocked {
      border-color: rgba(22, 163, 74, 0.3);
      background: linear-gradient(180deg, rgba(240, 253, 244, 0.98) 0%, rgba(255, 255, 255, 0.94) 100%);
    }

    .achievement-title-line {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      min-width: 0;
    }

    .achievement-title-line > div {
      min-width: 0;
    }

    .achievement-title-line strong {
      display: block;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.2;
    }

    .achievement-card .muted {
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .achievement-emoji {
      font-size: 26px;
      line-height: 1;
    }

    .achievement-progress {
      height: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(17, 17, 17, 0.08);
    }

    .achievement-progress > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #f59e0b 0%, #22c55e 100%);
    }

    .thumb {
      width: 100%;
      aspect-ratio: 4 / 3;
      height: auto;
      object-fit: cover;
      border-radius: 18px;
      background: #ebebeb;
    }

    .muted {
      color: var(--muted);
      font-size: 14px;
    }

    input:not([type="hidden"]), select, textarea {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--field-border);
      border-radius: 14px;
      box-sizing: border-box;
      background: var(--field-bg);
      color: var(--ink);
      font: inherit;
      transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    input:not([type="hidden"]):focus, select:focus, textarea:focus {
      outline: none;
      border-color: var(--field-border-focus);
      box-shadow: 0 0 0 4px var(--field-ring-focus);
      background: var(--field-bg-focus);
    }

    .search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      margin-bottom: 0;
      align-items: start;
    }

    .search-row .stack {
      justify-items: stretch;
    }

    .search-row .btn {
      justify-content: center;
      text-align: center;
    }

    .form-col {
      display: grid;
      gap: 12px;
    }

    .filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin: 12px 0 22px;
    }

    .badge {
      display: inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      background: var(--surface-soft);
      border: 1px solid var(--border);
      letter-spacing: 0.03em;
    }

    .storage-badge {
      background: rgba(17, 17, 17, 0.08);
      color: #111111;
      border: 1px solid rgba(17, 17, 17, 0.12);
    }

    .storage-main {
      background: rgba(17, 17, 17, 0.08);
      color: #111111;
    }

    .storage-street {
      background: rgba(120, 120, 120, 0.14);
      color: #2c2c2c;
    }

    .storage-corner {
      background: rgba(70, 70, 70, 0.16);
      color: #111111;
    }

    .storage-shower {
      background: rgba(90, 90, 90, 0.16);
      color: #111111;
    }

    .storage-toilet {
      background: rgba(140, 140, 140, 0.18);
      color: #111111;
    }

    .form-checkbox {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.88);
    }

    .form-checkbox input[type="checkbox"] {
      width: 18px;
      height: 18px;
      margin: 2px 0 0;
      flex: 0 0 auto;
    }

    .settings-split-grid,
    .settings-danger-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    .settings-nested-card {
      margin: 0;
      padding: 12px;
      background: rgba(255, 255, 255, 0.72);
    }

    .settings-item-list {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }

    .settings-item-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(17, 17, 17, 0.08);
      background: rgba(255, 255, 255, 0.82);
    }

    .storage-custom {
      background: rgba(100, 100, 100, 0.12);
      color: #111111;
    }

    .special-assets-grid {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: minmax(280px, 320px);
      gap: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 6px;
      align-items: stretch;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .special-assets-grid::-webkit-scrollbar {
      display: none;
    }

    .special-asset-card {
      display: grid;
      gap: 14px;
      padding: 16px;
      height: 100%;
      align-content: start;
    }

    .special-asset-card.special-asset-overdue {
      border-color: rgba(220, 38, 38, 0.3);
      box-shadow: 0 18px 36px rgba(185, 28, 28, 0.12);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 243, 243, 0.98) 100%);
    }

    .special-asset-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }

    .special-asset-title {
      margin: 0;
      font-size: 22px;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    .special-asset-subtitle {
      margin-top: 6px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 600;
    }

    .special-asset-status-stack {
      display: grid;
      gap: 8px;
      justify-items: end;
    }

    .special-asset-overdue-badge {
      background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
      color: #fff;
      box-shadow: 0 10px 20px rgba(220, 38, 38, 0.18);
    }

    .special-asset-meta-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .special-asset-meta {
      padding: 12px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid var(--border);
    }

    .special-asset-meta-label {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .special-asset-meta-value {
      font-weight: 700;
      line-height: 1.35;
      word-break: break-word;
    }

    .special-asset-notes {
      margin: 0;
      padding: 12px 14px;
      border-radius: 16px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
      color: var(--ink);
    }

    .special-asset-form {
      display: grid;
      gap: 12px;
    }

    .special-asset-admin-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .special-asset-empty {
      text-align: center;
      padding: 24px;
    }

    .access-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }

    .access-badge-enabled {
      background: rgba(22, 163, 74, 0.14);
      color: #166534;
    }

    .access-badge-disabled {
      background: rgba(17, 17, 17, 0.08);
      color: #5f5f5f;
    }

    .users-admin-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
      gap: 16px;
      align-items: end;
      margin-bottom: 16px;
    }

    .users-admin-toolbar h3 {
      margin-bottom: 6px;
    }

    .users-admin-toolbar .form-col {
      gap: 8px;
    }

    .users-admin-table-head {
      display: grid;
      grid-template-columns: minmax(320px, 2.8fr) minmax(220px, 1fr);
      gap: 12px;
      padding: 0 10px 8px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .users-admin-row-card {
      margin-bottom: 10px;
      padding: 10px 12px;
    }

    .users-admin-row-grid {
      display: grid;
      grid-template-columns: minmax(320px, 2.8fr) minmax(220px, 1fr);
      gap: 10px;
      align-items: center;
    }

    .users-admin-primary {
      min-width: 0;
    }

    .users-admin-primary-stack {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .users-admin-primary-copy {
      min-width: 0;
      flex: 1 1 auto;
    }

    .users-admin-name-line {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      min-width: 0;
    }

    .users-admin-name {
      font-size: 16px;
      line-height: 1.1;
      overflow-wrap: anywhere;
    }

    .users-admin-handle {
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      overflow-wrap: anywhere;
    }

    .users-admin-summary-badges {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 6px;
      min-width: 0;
    }

    .users-admin-role-badge {
      background: rgba(17, 17, 17, 0.06);
      color: #3b3b3b;
    }

    .users-admin-meta {
      display: flex;
      gap: 8px 12px;
      flex-wrap: wrap;
      margin-top: 8px;
      color: var(--muted);
      font-size: 13px;
      min-width: 0;
    }

    .users-admin-meta > span {
      overflow-wrap: anywhere;
    }

    .users-admin-cell {
      display: grid;
      gap: 8px;
      align-content: start;
      min-width: 0;
    }

    .users-admin-cell strong,
    .users-admin-cell .muted {
      overflow-wrap: anywhere;
    }

    .users-admin-cell-label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .users-admin-status-stack {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: flex-start;
    }

    .users-admin-mini-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: flex-start;
      min-width: 0;
    }

    .users-admin-status-stack .badge,
    .users-admin-summary-badges .badge,
    .users-admin-mini-badges .badge {
      max-width: 100%;
      overflow-wrap: anywhere;
    }

    .users-admin-quick-actions {
      justify-items: start;
      align-content: center;
    }

    .users-admin-quick-buttons {
      display: flex;
      gap: 6px;
      align-items: center;
      width: 100%;
      min-width: 0;
    }

    .users-admin-quick-btn {
      min-height: 38px;
      padding: 9px 12px;
      border-radius: 12px;
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
    }

    .users-admin-quick-note {
      font-size: 13px;
      white-space: nowrap;
    }

    .users-admin-details {
      margin-top: 10px;
    }

    .users-admin-detail-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
      color: var(--muted);
      font-size: 13px;
    }

    .users-admin-detail-meta > span {
      padding: 8px 10px;
      border-radius: 12px;
      background: rgba(17, 17, 17, 0.04);
      overflow-wrap: anywhere;
    }

    .users-admin-detail-meta strong {
      color: var(--text);
    }

    .users-admin-panel-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 8px;
    }

    .users-admin-panel {
      display: grid;
      gap: 8px;
      align-content: start;
      min-width: 0;
    }

    .users-admin-panel h4 {
      margin: 0;
      font-size: 13px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .users-admin-panel .muted {
      margin: 0;
    }

    .users-admin-toggle-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .users-admin-toggle {
      padding: 10px;
    }

    .users-admin-toggle strong {
      display: block;
      margin-bottom: 3px;
    }

    .users-admin-panel-danger {
      border-color: rgba(220, 38, 38, 0.16);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 244, 244, 0.9) 100%);
    }

    /* ── Баннер пуш-уведомлений ── */
    .push-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1200;
      background: #1e293b;
      color: #f1f5f9;
      padding: 14px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }
    .push-banner.push-banner--visible {
      transform: translateY(0);
    }
    .push-banner-text {
      flex: 1;
      min-width: 180px;
      font-size: 14px;
      line-height: 1.4;
    }
    .push-banner-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }
    .push-banner-btn {
      padding: 8px 16px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: opacity 0.15s;
    }
    .push-banner-btn:hover { opacity: 0.85; }
    .push-banner-btn--enable {
      background: #f97316;
      color: #fff;
    }
    .push-banner-btn--later {
      background: rgba(255,255,255,0.12);
      color: #cbd5e1;
    }
    @media (max-width: 480px) {
      .push-banner { padding: 12px 16px; }
      .push-banner-text { font-size: 13px; }
    }

    /* ── Задачи по студии ── */
    .studio-tasks-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .studio-task-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 10px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }
    .studio-task-row--done {
      opacity: 0.6;
    }
    .studio-task-row--done .studio-task-text {
      text-decoration: line-through;
    }
    .studio-task-body {
      flex: 1;
      min-width: 0;
    }
    .studio-task-text {
      font-size: 15px;
      word-break: break-word;
    }
    .studio-task-meta {
      font-size: 12px;
      margin-top: 3px;
    }
    .studio-task-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
      align-items: center;
    }
    .studio-task-btn {
      padding: 4px 10px;
      font-size: 13px;
    }

    .status-available {
      background: #16a34a;
      color: #ffffff;
      border: none;
    }

    .status-taken {
      background: #dc2626;
      color: #ffffff;
      border: none;
    }
    .status-lost { background: #6b7280; color: #ffffff; border: none; }
    .status-broken { background: #ea580c; color: #ffffff; border: none; }
    .status-custom { background: #475569; color: #ffffff; border: none; }

    .auth-box {
      display: grid;
      gap: 10px;
      width: min(100%, 760px);
      justify-items: end;
    }

    .topbar-user-line {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      text-align: right;
    }

    .topbar-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 10px;
      width: 100%;
      min-width: 0;
    }

    .topbar-primary {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex: 1 1 auto;
      flex-wrap: wrap;
      min-width: 0;
    }

    /* Компактные кнопки навигации в шапке */
    .topbar-primary .btn,
    .topbar-more > .btn,
    .topbar-more > button.btn {
      padding: 8px 12px;
      min-height: 38px;
      font-size: 13px;
      border-radius: 10px;
      box-shadow: none;
      font-weight: 600;
    }
    .topbar-primary .btn:hover {
      transform: none;
      box-shadow: none;
    }

    .topbar-more {
      position: relative;
      z-index: 90;
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
      justify-self: end;
      align-self: start;
    }

    .topbar-more-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 140;
      width: min(320px, calc(100vw - 28px));
      max-height: min(72vh, 680px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 12px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .topbar-more-menu[hidden] {
      display: none;
    }

    .topbar-more-list {
      display: grid;
      gap: 8px;
    }

    .topbar-more-list .btn,
    .topbar-more-list .inline-form,
    .topbar-more-list .inline-form button {
      width: 100%;
      justify-content: center;
    }

    .menu-section-title {
      margin: 8px 4px 2px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .menu-settings {
      margin-top: 8px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }

    .menu-settings summary {
      list-style: none;
      cursor: pointer;
      font-weight: 700;
      padding: 8px 6px;
      border-radius: 12px;
    }

    .menu-settings summary::-webkit-details-marker {
      display: none;
    }

    .menu-settings-panel {
      display: grid;
      gap: 10px;
      margin-top: 10px;
    }

    .menu-settings-grid {
      display: grid;
      gap: 8px;
    }

    .menu-settings-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    .menu-settings-item input[type="checkbox"] {
      width: 16px;
      height: 16px;
      margin: 0;
      flex: 0 0 auto;
    }

    .menu-settings-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .menu-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      min-width: 52px;
      padding: 0;
    }

    .menu-utility-button {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      min-width: 52px;
      min-height: 52px;
      padding: 0;
      border-radius: 16px;
    }

    .menu-utility-icon {
      font-size: 20px;
      line-height: 1;
    }

    .menu-utility-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #b91c1c;
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    }

    .menu-utility-badge[hidden] {
      display: none;
    }

    .menu-toggle-lines {
      display: grid;
      gap: 5px;
    }

    .menu-toggle-lines span {
      display: block;
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
    }

    .inline-form {
      margin: 0;
    }

    .page-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 0 0 20px;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
      gap: 16px;
      margin-bottom: 20px;
    }

    .stat-card {
      background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
      border-radius: 22px;
      padding: 16px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }

    .stat-value {
      font-size: 32px;
      font-weight: 700;
      line-height: 1.1;
      margin: 8px 0 4px;
    }

    .stat-label {
      font-size: 13px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .stat-hint {
      font-size: 13px;
      color: var(--muted);
    }

    .section-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
      gap: 16px;
      align-items: start;
    }

    .list-stack {
      display: grid;
      gap: 10px;
    }

    .list-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      background: var(--surface-soft);
      align-items: center;
    }

    .table-wrap {
      overflow-x: auto;
    }

    .table {
      width: 100%;
      border-collapse: collapse;
    }

    .table th,
    .table td {
      padding: 10px 8px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      vertical-align: top;
    }

    .table th {
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
    }

    .empty-state {
      color: var(--muted);
      padding: 8px 0;
    }

    .hero {
      display: grid;
      gap: 10px;
      padding: 16px 18px;
      margin-bottom: 14px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: none;
    }

    .hero-title {
      margin: 0;
      font-size: clamp(20px, 3vw, 26px);
      line-height: 1.12;
      letter-spacing: -0.02em;
      max-width: 800px;
    }

    .hero-note {
      max-width: 760px;
      font-size: 13px;
      color: var(--muted);
      margin: 0;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0;
      background: none;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .search-shell {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
    }

    .search-main {
      position: relative;
      display: grid;
      gap: 8px;
      min-width: 0;
      overflow: visible;
    }

    .search-input {
      font-size: 20px;
      padding: 16px 18px;
      border-radius: 18px;
    }

    .search-suggestions {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 20;
      width: 100%;
      max-width: 520px;
      display: grid;
      gap: 6px;
      padding: 10px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid var(--border);
      box-shadow: 0 18px 32px rgba(0, 0, 0, 0.12);
      backdrop-filter: blur(10px);
      max-height: 280px;
      overflow-y: auto;
    }

    .search-suggestions[hidden] {
      display: none;
    }

    .search-suggestions-group {
      display: grid;
      gap: 6px;
    }

    .search-suggestions-title {
      font-size: 11px;
      color: var(--muted);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0 2px;
    }

    .search-suggestion,
    .popular-query-button {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--surface-soft);
      color: var(--ink);
      cursor: pointer;
      text-align: left;
      font: inherit;
    }

    .search-suggestion:hover,
    .popular-query-button:hover {
      background: #ffffff;
    }

    .search-suggestion-main {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .search-suggestion-name {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.1;
    }

    .search-suggestion-meta {
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .search-suggestion-badge {
      flex-shrink: 0;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .field-label {
      display: block;
      margin-bottom: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .field-help {
      color: var(--muted);
      font-size: 13px;
      margin: 0;
    }

    .chip-group {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 6px 0 10px;
      scrollbar-width: none;
    }

    /* Компактные сворачиваемые фильтры на главной */
    .catalog-filters {
      margin-bottom: 14px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      padding: 6px 12px;
    }
    .catalog-filters-summary {
      cursor: pointer;
      list-style: none;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      padding: 4px 0;
      user-select: none;
    }
    .catalog-filters-summary::-webkit-details-marker { display: none; }
    .catalog-filters-summary::before {
      content: "▸";
      display: inline-block;
      margin-right: 8px;
      color: var(--muted);
      transition: transform 0.15s ease;
    }
    .catalog-filters[open] .catalog-filters-summary::before { transform: rotate(90deg); }
    .catalog-filters-active { color: var(--muted); font-weight: 400; }
    .catalog-filters[open] { padding-bottom: 4px; }
    .catalog-filters .chip-group:last-child { margin-bottom: 6px; }

    .chip-group::-webkit-scrollbar {
      display: none;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      text-decoration: none;
      color: var(--ink);
      background: var(--surface-soft);
      border: 1px solid var(--border);
      transition: background 0.15s ease, border-color 0.15s ease;
      min-height: 32px;
      font-size: 13px;
      white-space: nowrap;
      touch-action: manipulation;
    }

    .chip:hover {
      transform: translateY(-1px);
      background: var(--surface);
    }

    .chip.active {
      background: var(--accent);
      color: #fffdf7;
      border-color: transparent;
    }

    .results-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin: 20px 0 16px;
    }

    .results-title {
      margin: 0;
      font-size: 24px;
      line-height: 1.1;
    }

    .item-card {
      display: grid;
      gap: 14px;
    }

    .catalog-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      align-items: start;
    }

    .catalog-grid .item-card {
      gap: 10px;
      padding: 12px;
      border-radius: 18px;
    }

    .catalog-card {
      height: 100%;
      align-content: start;
      min-width: 0;
      overflow: hidden;
    }

    .catalog-grid .item-title {
      font-size: 16px;
      line-height: 1.1;
    }

    .catalog-grid .stock-pill {
      min-width: 88px;
      padding: 8px 10px;
      border-radius: 14px;
    }

    .catalog-grid .stock-main {
      font-size: 18px;
    }

    .catalog-grid .stock-note {
      font-size: 10px;
    }

    .catalog-meta {
      display: grid;
      gap: 6px;
    }

    .catalog-meta-line {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .catalog-stock {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 14px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    .catalog-stock-value {
      display: block;
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
    }

    .catalog-stock-label {
      display: block;
      font-size: 10px;
      color: var(--muted);
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .catalog-note {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 5px 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid var(--border);
      color: var(--accent-dark);
      font-size: 10px;
      font-weight: 700;
      text-align: center;
    }

    .catalog-note-available {
      background: rgba(22, 163, 74, 0.14);
      border-color: rgba(22, 163, 74, 0.2);
      color: #166534;
    }

    .catalog-note-taken {
      background: rgba(220, 38, 38, 0.14);
      border-color: rgba(220, 38, 38, 0.2);
      color: #b91c1c;
    }

    .catalog-caption {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      min-height: 32px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .catalog-grid .quick-form {
      padding: 10px;
      border-radius: 14px;
    }

    .catalog-quick-form {
      margin-top: auto;
    }

    .catalog-undo-form {
      margin-top: 8px;
      padding-top: 8px;
    }

    .catalog-status-form {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
    }

    .catalog-status-details summary.catalog-status-toggle {
      cursor: pointer;
      font-size: 12px;
      list-style: none;
      user-select: none;
    }

    .catalog-status-details summary.catalog-status-toggle::marker,
    .catalog-status-details summary.catalog-status-toggle::-webkit-details-marker {
      display: none;
    }

    .catalog-status-details[open] summary.catalog-status-toggle::after {
      content: " ▲";
    }

    .catalog-status-details:not([open]) summary.catalog-status-toggle::after {
      content: " ▼";
    }

    .catalog-status-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .catalog-status-chip {
      padding: 6px 10px;
      min-height: 32px;
      font-size: 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.72);
      border: 1px solid var(--border);
      color: var(--ink);
      cursor: pointer;
    }

    .catalog-status-chip.active {
      background: var(--accent);
      color: #fffdf7;
      border-color: transparent;
    }

    .subtle-btn {
      width: 100%;
    }

    .catalog-grid .field-label {
      font-size: 11px;
    }

    .catalog-grid .inline-qty {
      gap: 6px;
    }

    .catalog-grid .qty-chip {
      min-height: 36px;
      padding: 6px 10px;
      font-size: 13px;
    }

    .catalog-grid .mini-input {
      max-width: 64px;
      min-height: 34px;
      padding-top: 7px;
      padding-bottom: 7px;
    }

    .catalog-qty-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .catalog-qty-row .field-label {
      margin: 0;
    }

    .catalog-qty-input {
      width: 64px !important;
      max-width: 64px;
    }

    .catalog-grid .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 8px 10px;
      font-size: 13px;
      min-width: 0;
      line-height: 1.05;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .catalog-grid .secondary-link {
      min-height: 40px;
      font-size: 14px;
    }

    .catalog-grid .details-summary {
      min-height: 36px;
      font-size: 14px;
    }

    .catalog-links {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .catalog-links .secondary-link {
      min-height: 40px;
    }

    .thumb-link {
      position: relative;
      display: block;
      text-decoration: none;
    }

    .thumb-placeholder {
      display: grid;
      place-items: center;
      width: 100%;
      aspect-ratio: 4 / 3;
      border-radius: 18px;
      background: linear-gradient(135deg, #f4f4f4 0%, #e5e5e5 100%);
      color: #6b6b6b;
      font-size: 15px;
      font-weight: 700;
    }

    .catalog-photo-shell {
      position: relative;
      display: grid;
      place-items: center;
      aspect-ratio: 1 / 1;
      padding: 10px;
      border-radius: 16px;
      overflow: hidden;
      background: linear-gradient(135deg, #efefef 0%, #dedede 100%);
    }

    [data-progressive-image] {
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    [data-progressive-image].loaded {
      opacity: 1;
    }

    .photo-count-pill {
      position: absolute;
      right: 10px;
      bottom: 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      border-radius: 999px;
      background: rgba(17, 17, 17, 0.82);
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      backdrop-filter: blur(8px);
    }

    .catalog-thumb {
      width: 100%;
      height: 100%;
      aspect-ratio: 1 / 1;
      object-fit: contain;
      background: transparent;
    }

    .catalog-thumb-placeholder {
      aspect-ratio: 1 / 1;
      font-size: 13px;
    }

    .floating-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .item-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .item-title {
      margin: 0 0 4px;
      font-size: 24px;
      line-height: 1.05;
      letter-spacing: -0.03em;
    }

    .item-title a {
      text-decoration: none;
    }

    .stock-pill {
      min-width: 112px;
      padding: 10px 12px;
      border-radius: 18px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
      text-align: right;
    }

    .stock-main {
      display: block;
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
    }

    .stock-note {
      display: block;
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .info-tile {
      padding: 12px;
      border-radius: 18px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    .tile-label {
      display: block;
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 6px;
    }

    .tile-value {
      font-weight: 700;
      line-height: 1.25;
    }

    .compact-storage-form {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .compact-storage-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .compact-storage-row select {
      min-width: 0;
      margin: 0;
    }

    .compact-storage-button {
      min-height: 42px;
      padding: 10px 12px;
      white-space: nowrap;
    }

    .compact-form-feedback {
      min-height: 18px;
      margin: 0;
    }

    .quick-form {
      display: grid;
      gap: 10px;
      padding: 14px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 245, 245, 0.96) 100%);
      border: 1px solid rgba(17, 17, 17, 0.08);
    }

    .inline-qty {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .mini-input {
      width: 84px !important;
      text-align: center;
      font-weight: 700;
      padding-left: 10px;
      padding-right: 10px;
    }

    .qty-chip {
      border: 1px solid var(--border);
      background: #ffffff;
      color: var(--ink);
      border-radius: 999px;
      padding: 8px 12px;
      cursor: pointer;
      font: inherit;
      font-weight: 700;
      min-height: 44px;
      touch-action: manipulation;
    }

    .action-buttons {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .compact-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .secondary-links {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .secondary-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 10px 14px;
      border-radius: 12px;
      text-decoration: none;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.88);
      color: var(--ink);
      font-weight: 700;
    }

    .details-panel {
      border-top: 1px solid var(--border);
      padding-top: 12px;
    }

    .details-summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      list-style: none;
      cursor: pointer;
      font-weight: 700;
      color: var(--accent-dark);
      min-height: 36px;
      touch-action: manipulation;
    }

    /* Свёрнутый блок-карточка: компактно, без лишнего паддинга под одну строку */
    .details-panel.card {
      padding: 8px 16px;
    }
    .details-panel.card[open] {
      padding-bottom: 14px;
    }

    .details-summary::-webkit-details-marker {
      display: none;
    }

    .details-summary::after {
      content: "Открыть";
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .details-panel[open] .details-summary::after {
      content: "Скрыть";
    }

    .details-body {
      display: grid;
      gap: 14px;
      padding-top: 12px;
    }

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

    .split-two {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .page-section {
      margin-bottom: 18px;
    }

    .section-title {
      margin: 0 0 10px;
      font-size: 17px;
      line-height: 1.15;
    }

    .subtle-panel {
      padding: 16px;
      border-radius: 20px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    .history-list {
      display: grid;
      gap: 10px;
    }

    .history-entry {
      padding: 14px;
      border-radius: 16px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    .history-details {
      margin-top: 6px;
    }

    .history-summary {
      padding: 4px 0;
    }

    .history-summary::after {
      content: none;
    }

    .history-empty {
      color: var(--muted);
      padding-top: 8px;
    }

    .support-fab {
      position: relative;
      min-height: 52px;
      padding: 12px 16px;
      border-radius: 999px;
      background: linear-gradient(135deg, #111111 0%, #2c2c2c 100%);
      color: #fff;
      border: 0;
      cursor: pointer;
      font: inherit;
      font-weight: 700;
      box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
    }

    .support-fab-shell {
      position: fixed;
      right: 18px;
      bottom: calc(18px + env(safe-area-inset-bottom, 0px));
      z-index: 165;
    }

    .support-fab-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      min-width: 24px;
      height: 24px;
      padding: 0 7px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #b91c1c;
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    }

    .support-fab-badge[hidden] {
      display: none;
    }

    .support-panel {
      position: fixed;
      right: 18px;
      bottom: calc(84px + env(safe-area-inset-bottom, 0px));
      z-index: 180;
      width: min(560px, calc(100vw - 28px));
      height: min(78dvh, 760px);
      max-height: calc(100dvh - 112px);
      display: grid;
      grid-template-rows: auto auto auto 1fr auto;
      gap: 12px;
      padding: 16px;
      border-radius: 24px;
      background: var(--panel-bg);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
      overflow: hidden;
    }

    .scroll-top-button {
      position: fixed;
      right: 18px;
      bottom: calc(96px + env(safe-area-inset-bottom, 0px));
      z-index: 44;
      width: 46px;
      height: 46px;
      border: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(17, 17, 17, 0.92);
      color: #ffffff;
      box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
      cursor: pointer;
      font: inherit;
      font-size: 18px;
      font-weight: 800;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .scroll-top-button[hidden] {
      display: inline-flex;
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
    }

    .support-panel[hidden] {
      display: none;
    }

    .support-panel-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }

    .support-panel-head > div {
      min-width: 0;
    }

    .support-panel-title {
      margin: 0;
      font-size: 22px;
      line-height: 1.05;
    }

    .support-panel-note {
      margin: 6px 0 0 0;
    }

    .support-panel-close {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface-soft);
      color: var(--ink);
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
    }

    .support-messages {
      display: grid;
      gap: 10px;
      min-height: 0;
      overflow-y: auto;
      padding-right: 2px;
      align-content: start;
    }

    .support-thread-bar {
      display: grid;
      gap: 10px;
    }

    .support-thread-list {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: none;
    }

    .support-thread-list::-webkit-scrollbar {
      display: none;
    }

    .support-thread-chip {
      min-width: 0;
      display: grid;
      gap: 4px;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--surface-soft);
      color: var(--ink);
      cursor: pointer;
      text-align: left;
      font: inherit;
      white-space: nowrap;
    }

    .support-thread-chip.active {
      background: #111111;
      color: #ffffff;
      border-color: transparent;
    }

    .support-thread-chip-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 800;
    }

    .support-thread-chip-meta {
      font-size: 11px;
      color: var(--muted);
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .support-thread-chip.active .support-thread-chip-meta {
      color: rgba(255, 255, 255, 0.78);
    }

    .support-thread-chip-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 6px;
      border-radius: 999px;
      background: rgba(185, 28, 28, 0.14);
      color: #b91c1c;
      font-size: 11px;
      font-weight: 800;
    }

    .support-thread-chip.active .support-thread-chip-count {
      background: rgba(255, 255, 255, 0.16);
      color: #ffffff;
    }

    .support-thread-state {
      min-height: 18px;
      color: var(--muted);
      font-size: 13px;
    }

    .support-thread-empty {
      color: var(--muted);
      font-size: 14px;
      padding: 8px 2px;
    }

    .support-message-pair {
      display: grid;
      gap: 8px;
    }

    .support-bubble {
      max-width: 92%;
      padding: 12px 14px;
      border-radius: 18px;
      line-height: 1.35;
      font-size: 14px;
      border: 1px solid var(--border);
    }

    .support-bubble.user,
    .support-bubble.mine {
      margin-left: auto;
      background: linear-gradient(135deg, #111111 0%, #313131 100%);
      color: #ffffff;
      border-color: transparent;
    }

    .support-bubble.reply,
    .support-bubble.peer {
      background: var(--surface-soft);
      color: var(--ink);
    }

    .support-bubble.system {
      background: rgba(17, 17, 17, 0.04);
      color: var(--ink);
      border-style: dashed;
    }

    .support-bubble-meta {
      margin-top: 6px;
      font-size: 11px;
      opacity: 0.78;
    }

    .support-form {
      display: grid;
      gap: 10px;
    }

    .support-form textarea {
      width: 100%;
      min-height: 92px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(17, 17, 17, 0.12);
      resize: vertical;
      font: inherit;
      background: rgba(255, 255, 255, 0.94);
    }

    .support-form textarea:focus {
      outline: none;
      border-color: rgba(17, 17, 17, 0.35);
      box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.08);
      background: #fff;
    }

    .support-form-foot {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      flex-wrap: nowrap;
    }

    .support-status {
      color: var(--muted);
      font-size: 13px;
      min-height: 18px;
      min-width: 0;
      flex: 1 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .support-admin-thread {
      display: grid;
      gap: 10px;
    }

    .support-admin-reply {
      margin-top: 18px;
    }

    .support-admin-reply textarea {
      min-height: 120px;
    }

    .toast-stack {
      position: fixed;
      right: 18px;
      top: 18px;
      z-index: 80;
      display: grid;
      gap: 10px;
      width: min(360px, calc(100vw - 28px));
      pointer-events: none;
    }

    .toast {
      position: relative;
      overflow: hidden;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: rgba(17, 17, 17, 0.92);
      color: #ffffff;
      box-shadow: var(--shadow);
      transform: translateY(-8px);
      opacity: 0;
      transition: transform 0.18s ease, opacity 0.18s ease;
    }

    .toast.visible {
      transform: translateY(0);
      opacity: 1;
    }

    @keyframes toastAchievementGlow {
      0% {
        transform: scale(0.94) rotate(-4deg);
      }
      45% {
        transform: scale(1.04) rotate(2deg);
      }
      100% {
        transform: scale(1) rotate(0deg);
      }
    }

    @keyframes toastAchievementShine {
      0% {
        transform: translateX(-140%) skewX(-18deg);
      }
      100% {
        transform: translateX(160%) skewX(-18deg);
      }
    }

    .toast-success {
      background: rgba(22, 163, 74, 0.94);
    }

    .toast-error {
      background: rgba(220, 38, 38, 0.94);
    }

    .toast-achievement {
      min-width: min(420px, calc(100vw - 32px));
      padding: 14px 16px;
      border: 1px solid rgba(245, 158, 11, 0.28);
      background: linear-gradient(135deg, rgba(255, 247, 214, 0.98) 0%, rgba(255, 236, 182, 0.96) 48%, rgba(255, 255, 255, 0.96) 100%);
      color: #2b2118;
      box-shadow: 0 18px 42px rgba(245, 158, 11, 0.16);
    }

    .toast-achievement::after {
      content: "";
      position: absolute;
      inset: -30% auto -30% -20%;
      width: 44%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0));
      opacity: 0.55;
      pointer-events: none;
      animation: toastAchievementShine 1.2s ease forwards;
    }

    .toast-achievement-inner {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      animation: toastAchievementGlow 0.34s ease;
    }

    .toast-achievement-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.8);
      font-size: 28px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    }

    .toast-achievement-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .toast-achievement-title {
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #9a5800;
    }

    .toast-achievement-body {
      font-size: 14px;
      line-height: 1.35;
      font-weight: 700;
    }

    .btn-with-count {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .nav-counter {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      min-height: 22px;
      padding: 0 7px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.22);
      color: inherit;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }

    .online-panel {
      position: fixed;
      top: 96px;
      right: 18px;
      z-index: 160;
      width: min(320px, calc(100vw - 28px));
      max-height: min(60vh, 480px);
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 10px;
      padding: 16px;
      border-radius: 24px;
      background: var(--panel-bg);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
      overflow: hidden;
    }

    .online-panel[hidden] { display: none; }

    .online-panel-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .online-panel-title {
      margin: 0;
      font-size: 20px;
      line-height: 1.05;
    }

    .online-panel-close {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface-soft);
      color: var(--ink);
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
      flex-shrink: 0;
    }

    .online-list {
      display: grid;
      gap: 8px;
      overflow-y: auto;
    }

    .online-empty {
      color: var(--muted);
      font-size: 14px;
      padding: 4px 0;
    }

    .online-user-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 12px;
      background: var(--surface-soft);
      font-size: 14px;
    }

    .online-user-emoji {
      font-size: 22px;
      line-height: 1;
      width: 32px;
      text-align: center;
    }

    .online-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22c55e;
      flex-shrink: 0;
      margin-left: auto;
    }

    .notifications-panel {
      position: fixed;
      top: 96px;
      right: 18px;
      z-index: 160;
      width: min(420px, calc(100vw - 28px));
      max-height: min(72vh, 640px);
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 12px;
      padding: 16px;
      border-radius: 24px;
      background: var(--panel-bg);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
    }

    .notifications-panel[hidden] {
      display: none;
    }

    .notifications-panel-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }

    .notifications-panel-title {
      margin: 0;
      font-size: 22px;
      line-height: 1.05;
    }

    .notifications-panel-close {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface-soft);
      color: var(--ink);
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
    }

    .notifications-list {
      display: grid;
      gap: 10px;
      overflow-y: auto;
      padding-right: 2px;
    }

    .notifications-empty {
      color: var(--muted);
      font-size: 14px;
      padding: 8px 2px;
    }

    .notification-entry {
      display: grid;
      gap: 8px;
      padding: 14px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: var(--surface-soft);
    }

    .notification-entry.unread {
      border-color: rgba(220, 38, 38, 0.28);
      background: linear-gradient(180deg, rgba(255, 244, 244, 0.98) 0%, rgba(255, 250, 250, 0.96) 100%);
    }

    .notification-entry-title {
      font-weight: 700;
      line-height: 1.3;
    }

    .notification-entry-meta {
      color: var(--muted);
      font-size: 12px;
    }

    .notification-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .notification-button {
      border: 1px solid var(--border);
      background: #ffffff;
      color: var(--ink);
      border-radius: 999px;
      padding: 8px 12px;
      cursor: pointer;
      font: inherit;
      font-weight: 700;
      text-decoration: none;
    }

    .notification-button:hover {
      background: var(--surface);
    }

    .notification-button-approve {
      background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
      border-color: rgba(21, 128, 61, 0.2);
      color: #ffffff;
    }

    .notification-button-approve:hover {
      background: linear-gradient(135deg, #166534 0%, #16a34a 100%);
    }

    .notification-button-reject {
      background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
      border-color: rgba(185, 28, 28, 0.18);
      color: #ffffff;
    }

    .notification-button-reject:hover {
      background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
    }

    .notifications-archive {
      display: grid;
      gap: 10px;
      padding: 12px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: rgba(247, 247, 247, 0.92);
    }

    .notifications-archive-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      cursor: pointer;
      font-weight: 800;
      list-style: none;
    }

    .notifications-archive-summary::-webkit-details-marker {
      display: none;
    }

    .notifications-archive-actions {
      display: flex;
      justify-content: flex-end;
    }

    .notifications-archive-list {
      display: grid;
      gap: 10px;
    }

    .return-storage-modal {
      position: fixed;
      inset: 0;
      z-index: 240;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(8px);
    }

    .return-storage-modal[hidden] {
      display: none;
    }

    .return-storage-dialog {
      width: min(520px, calc(100vw - 28px));
      display: grid;
      gap: 16px;
      padding: 20px;
      border-radius: 24px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    }

    .return-storage-head {
      display: grid;
      gap: 6px;
    }

    .return-storage-title {
      margin: 0;
      font-size: 24px;
      line-height: 1.1;
    }

    .return-storage-subtitle,
    .return-storage-recommended {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.35;
    }

    .return-storage-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .return-storage-option {
      min-height: 72px;
      display: grid;
      align-content: center;
      gap: 4px;
      padding: 14px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: #ffffff;
      color: var(--ink);
      cursor: pointer;
      text-align: left;
      font: inherit;
      font-weight: 800;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .return-storage-option:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }

    .return-storage-option.recommended {
      border-color: rgba(21, 128, 61, 0.28);
      background: linear-gradient(180deg, #f3fff7 0%, #ffffff 100%);
    }

    .return-storage-option small {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .return-storage-actions {
      display: flex;
      justify-content: flex-end;
    }

    .changelog-modal {
      position: fixed;
      inset: 0;
      z-index: 260;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(0, 0, 0, 0.32);
      backdrop-filter: blur(8px);
    }

    .changelog-modal[hidden] {
      display: none;
    }

    .changelog-dialog {
      width: min(540px, calc(100vw - 28px));
      max-height: min(80vh, 640px);
      display: flex;
      flex-direction: column;
      border-radius: 24px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.99);
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
      overflow: hidden;
    }

    .changelog-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 20px 20px 16px 20px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .changelog-head-copy {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .changelog-head-eyebrow {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .changelog-head-title {
      font-size: 18px;
      font-weight: 700;
      margin: 0;
      color: var(--ink);
    }

    .changelog-close {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--surface-soft);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
    }

    .changelog-close:hover {
      background: var(--accent-soft);
      color: var(--ink);
    }

    .changelog-body {
      flex: 1;
      overflow-y: auto;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .changelog-entry {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .changelog-entry-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
      margin: 0;
    }

    .changelog-entry-date {
      font-size: 12px;
      color: var(--muted);
    }

    .changelog-entry-lines {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .changelog-entry-lines li {
      font-size: 14px;
      color: var(--ink);
      padding-left: 18px;
      position: relative;
    }

    .changelog-entry-lines li::before {
      content: "•";
      position: absolute;
      left: 4px;
      color: var(--muted);
    }

    .changelog-actions {
      padding: 12px 20px 16px 20px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      flex-shrink: 0;
    }

    .overdue-grid {
      display: grid;
      gap: 14px;
    }

    .my-returns-grid {
      display: grid;
      gap: 14px;
    }

    .my-return-card {
      display: grid;
      grid-template-columns: minmax(0, 128px) minmax(0, 1fr);
      gap: 14px;
      padding: 14px;
      border-radius: 22px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
      box-shadow: var(--shadow);
      align-items: start;
    }

    .my-return-card.is-selected {
      border-color: rgba(22, 163, 74, 0.38);
      background: linear-gradient(180deg, rgba(240, 253, 244, 0.98) 0%, rgba(220, 252, 231, 0.95) 100%);
      box-shadow: 0 18px 36px rgba(22, 163, 74, 0.12);
    }

    .my-return-card.is-selected .my-return-meta-tile,
    .my-return-card.is-selected .my-return-target-tile {
      border-color: rgba(22, 163, 74, 0.22);
      background: rgba(255, 255, 255, 0.82);
    }

    .my-return-card.is-selected .my-return-check {
      color: #166534;
    }

    .my-return-photo,
    .my-return-photo-placeholder {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 18px;
      object-fit: contain;
      background: linear-gradient(135deg, #efefef 0%, #dddddd 100%);
    }

    .my-return-photo-placeholder {
      display: grid;
      place-items: center;
      color: var(--muted);
      font-weight: 700;
      text-align: center;
      padding: 12px;
    }

    .my-return-body {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .my-return-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
    }

    .my-return-title {
      margin: 0;
      font-size: 22px;
      line-height: 1.05;
    }

    .my-return-check {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      cursor: pointer;
    }

    .my-return-check input[type="checkbox"] {
      width: 20px;
      height: 20px;
      margin: 0;
      accent-color: #15803d;
      cursor: pointer;
    }

    .my-return-meta-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
    }

    .my-return-meta-tile {
      padding: 12px 14px;
      border-radius: 16px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
      display: grid;
      gap: 4px;
    }

    .my-return-meta-label {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 700;
    }

    .my-return-meta-value {
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
    }

    .my-return-controls {
      display: grid;
      grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
      gap: 10px;
      align-items: end;
    }

    .my-return-bulk-card {
      display: grid;
      gap: 14px;
      margin-bottom: 16px;
    }

    .my-return-master-check {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
      font-weight: 700;
      color: #166534;
      cursor: pointer;
      width: fit-content;
    }

    .my-return-master-check input[type="checkbox"] {
      width: 20px;
      height: 20px;
      margin: 0;
      accent-color: #15803d;
      cursor: pointer;
    }

    .my-return-bulk-controls {
      display: grid;
      gap: 12px;
    }

    .my-return-bulk-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .my-return-bulk-chips .qty-chip.active {
      background: #111111;
      color: #ffffff;
      border-color: #111111;
    }

    .my-return-bulk-select {
      display: grid;
      gap: 6px;
      max-width: 320px;
    }

    .my-return-target-tile {
      display: grid;
      gap: 8px;
      align-content: end;
      min-width: 0;
    }

    .my-return-override {
      margin-top: 4px;
    }

    .my-return-summary {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 14px;
    }

    .overdue-card {
      display: grid;
      grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
      gap: 14px;
      padding: 14px;
      border-radius: 22px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
      box-shadow: var(--shadow);
    }

    .overdue-card.is-overdue {
      border-color: rgba(220, 38, 38, 0.24);
      background: linear-gradient(180deg, rgba(255, 245, 245, 0.98) 0%, rgba(255, 251, 251, 0.97) 100%);
    }

    .overdue-photo,
    .overdue-photo-placeholder {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 18px;
      object-fit: cover;
      background: linear-gradient(135deg, #efefef 0%, #dddddd 100%);
    }

    .overdue-photo-placeholder {
      display: grid;
      place-items: center;
      color: var(--muted);
      font-weight: 700;
      text-align: center;
      padding: 12px;
    }

    .overdue-card-body {
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .overdue-card-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      align-items: flex-start;
    }

    .overdue-card-title {
      margin: 0;
      font-size: 22px;
      line-height: 1.05;
    }

    .overdue-chip {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid var(--border);
    }

    .overdue-chip.red {
      background: rgba(220, 38, 38, 0.12);
      color: #b91c1c;
      border-color: rgba(220, 38, 38, 0.2);
    }

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

    .overdue-meta-tile {
      padding: 12px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.86);
      border: 1px solid var(--border);
    }

    .overdue-meta-label {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .overdue-meta-value {
      font-weight: 700;
      line-height: 1.3;
    }

    .gallery-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .gallery-limit-note {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .product-gallery {
      display: grid;
      gap: 14px;
    }

    .gallery-stage {
      position: relative;
      display: block;
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: zoom-in;
    }

    .gallery-stage-image {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: contain;
      border-radius: 20px;
      background: linear-gradient(135deg, #f0f0f0 0%, #e1e1e1 100%);
    }

    .gallery-stage-hint {
      position: absolute;
      right: 12px;
      bottom: 12px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(17, 17, 17, 0.8);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
    }

    .gallery-strip {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
      gap: 10px;
    }

    .gallery-thumb-button {
      position: relative;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface-soft);
      overflow: hidden;
      cursor: pointer;
      text-align: left;
    }

    .gallery-thumb-button.active {
      border-color: var(--ink);
      box-shadow: inset 0 0 0 1px var(--ink);
    }

    .gallery-thumb-image {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      background: linear-gradient(135deg, #efefef 0%, #dedede 100%);
    }

    .gallery-thumb-index {
      position: absolute;
      top: 8px;
      left: 8px;
      padding: 4px 7px;
      border-radius: 999px;
      background: rgba(17, 17, 17, 0.78);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
    }

    .gallery-thumb-delete {
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 8px;
      padding: 6px 8px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.9);
      color: #111;
      font-size: 11px;
      font-weight: 700;
      text-align: center;
    }

    .upload-dropzone {
      display: grid;
      gap: 10px;
      padding: 16px;
      border-radius: 20px;
      border: 2px dashed rgba(17, 17, 17, 0.18);
      background: linear-gradient(180deg, #fbfbfb 0%, #f1f1f1 100%);
      transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
    }

    .upload-dropzone.dragover {
      border-color: rgba(17, 17, 17, 0.42);
      background: #ffffff;
      transform: translateY(-1px);
    }

    .upload-dropzone-title {
      font-size: 18px;
      font-weight: 800;
      line-height: 1.1;
    }

    .upload-dropzone-text {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .upload-dropzone-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    .upload-input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .upload-preview-list {
      display: grid;
      gap: 8px;
    }

    .upload-preview-card {
      display: grid;
      grid-template-columns: 60px 1fr;
      gap: 10px;
      padding: 10px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid var(--border);
      align-items: center;
    }

    .upload-preview-image {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 12px;
      background: #ededed;
    }

    .upload-preview-meta {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .upload-preview-name {
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .upload-preview-note {
      font-size: 12px;
      color: var(--muted);
    }

    .upload-progress {
      width: 100%;
      height: 10px;
      border-radius: 999px;
      background: #e0e0e0;
      overflow: hidden;
    }

    .upload-progress-bar {
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(135deg, #111111 0%, #444444 100%);
      transition: width 0.15s linear;
    }

    .upload-status {
      min-height: 20px;
      font-size: 13px;
      color: var(--muted);
    }

    .gallery-modal {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: grid;
      place-items: center;
    }

    .gallery-modal[hidden] {
      display: none;
    }

    .gallery-modal-backdrop {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(0, 0, 0, 0.82);
      cursor: pointer;
    }

    .gallery-modal-dialog {
      position: relative;
      z-index: 1;
      width: min(96vw, 1120px);
      max-height: 92vh;
      padding: 20px;
      border-radius: 24px;
      background: rgba(17, 17, 17, 0.96);
      box-shadow: 0 26px 60px rgba(0, 0, 0, 0.3);
      display: grid;
      gap: 14px;
      align-items: center;
      justify-items: center;
    }

    .gallery-modal-image {
      max-width: 100%;
      max-height: calc(92vh - 120px);
      object-fit: contain;
      border-radius: 18px;
      background: #0e0e0e;
    }

    .gallery-modal-close,
    .gallery-modal-arrow {
      position: absolute;
      border: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
      color: #fff;
      font-size: 24px;
      cursor: pointer;
    }

    .gallery-modal-close {
      top: 14px;
      right: 14px;
      font-size: 28px;
    }

    .gallery-modal-arrow {
      top: 50%;
      transform: translateY(-50%);
    }

    .gallery-modal-arrow.left {
      left: 14px;
    }

    .gallery-modal-arrow.right {
      right: 14px;
    }

    .gallery-modal-caption {
      color: rgba(255, 255, 255, 0.78);
      font-size: 14px;
      text-align: center;
    }

    .install-banner {
      position: fixed;
      left: 14px;
      right: 14px;
      bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      z-index: 50;
      display: grid;
      gap: 12px;
      padding: 16px;
      border-radius: 20px;
      background: linear-gradient(135deg, rgba(17, 17, 17, 0.96) 0%, rgba(43, 43, 43, 0.96) 100%);
      color: #ffffff;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
      transition: transform 0.22s ease, opacity 0.22s ease;
    }

    .install-banner[hidden] {
      display: none;
    }

    .install-banner-title {
      margin: 0;
      font-size: 18px;
      line-height: 1.05;
    }

    .install-banner-text {
      margin: 0;
      color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
      line-height: 1.45;
    }

    .install-banner-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .install-banner .btn {
      box-shadow: none;
    }

    .install-banner .btn.gray {
      background: rgba(255, 255, 255, 0.18);
      color: #fffaff;
    }

    hr {
      border: 0;
      border-top: 1px solid var(--border);
      margin: 20px 0;
    }

    @media (max-width: 1320px) {
      .catalog-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .users-admin-table-head,
      .users-admin-row-grid {
        grid-template-columns: minmax(260px, 2.4fr) minmax(210px, 1fr);
      }
    }

    @media (max-width: 1120px) {
      .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .users-admin-toolbar {
        grid-template-columns: 1fr;
      }

      .users-admin-table-head {
        display: none;
      }

      .users-admin-row-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .users-admin-primary,
      .users-admin-cell,
      .users-admin-quick-actions {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 900px) {
      .search-row {
        grid-template-columns: 1fr;
      }

      .topbar {
        padding: 16px;
      }

      .topbar-actions {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
      }

      .auth-box {
        width: 100%;
        justify-items: stretch;
      }

      .item-head {
        flex-direction: column;
        align-items: stretch;
      }

      .info-grid,
      .special-asset-meta-grid,
      .split-two,
      .action-buttons,
      .section-grid,
      .grid {
        grid-template-columns: 1fr;
      }

      .compact-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .special-assets-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(250px, 300px);
      }

      .users-admin-row-grid,
      .users-admin-toggle-grid {
        grid-template-columns: 1fr;
      }

      .users-admin-row-card {
        padding: 12px;
      }

      .users-admin-primary-stack {
        align-items: center;
        gap: 10px;
      }

      .users-admin-primary-copy {
        width: 100%;
        text-align: center;
      }

      .users-admin-quick-actions {
        justify-items: stretch;
      }

      .users-admin-quick-buttons {
        justify-content: center;
        flex-wrap: wrap;
      }

      .users-admin-quick-buttons > form,
      .users-admin-quick-buttons > button {
        flex: 1 1 160px;
      }

      .users-admin-quick-actions form,
      .users-admin-quick-actions .btn {
        width: 100%;
      }

      .users-admin-detail-meta {
        display: grid;
        grid-template-columns: 1fr;
      }

      .stock-pill {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
      }

      .stock-note {
        margin-top: 0;
      }
    }

    @media (max-width: 640px) {
      .container {
        padding: 16px 14px 32px;
      }

      .topbar {
        gap: 14px;
        border-radius: 20px;
      }

      .topbar-title .muted {
        font-size: 13px;
      }

      .topbar-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: start;
      }

      .topbar-primary {
        order: 2;
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        flex: 1 1 100%;
      }

      .auth-box > .muted {
        width: 100%;
        text-align: left;
      }

      .topbar-primary > a,
      .topbar-primary > form,
      .page-actions > a,
      .page-actions > form {
        width: 100%;
      }

      .topbar-primary .btn,
      .topbar-primary .inline-form button,
      .page-actions .btn,
      .secondary-link {
        width: 100%;
        justify-content: center;
      }

      .topbar-more {
        justify-self: end;
        align-self: start;
        gap: 8px;
        align-items: center;
      }

      .users-admin-name-line,
      .users-admin-summary-badges,
      .users-admin-mini-badges {
        justify-content: center;
      }

      .users-admin-quick-note {
        text-align: center;
        white-space: normal;
      }

      .topbar-more-menu {
        right: 0;
        left: auto;
        width: min(320px, calc(100vw - 20px));
      }

      .page-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .hero,
      .card {
        padding: 16px;
        border-radius: 20px;
      }

      .hero {
        gap: 14px;
      }

      .hero-title {
        font-size: clamp(26px, 10vw, 36px);
      }

      .gallery-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .gallery-modal-dialog {
        width: min(100vw - 18px, 1000px);
        padding: 16px 14px 20px;
      }

      .gallery-modal-arrow.left {
        left: 8px;
      }

      .gallery-modal-arrow.right {
        right: 8px;
      }

      .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: stretch;
      }

      .catalog-grid .item-card {
        gap: 8px;
        padding: 8px;
        border-radius: 14px;
        min-width: 0;
      }

      .catalog-photo-shell {
        aspect-ratio: 4 / 5.2;
        min-height: 0;
        padding: 4px;
        border-radius: 12px;
      }

      .catalog-thumb,
      .catalog-thumb-placeholder {
        width: 100%;
        height: 100%;
        min-height: 0;
        border-radius: 10px;
      }

      .catalog-thumb {
        object-fit: cover;
        object-position: center;
      }

      .catalog-thumb-placeholder {
        font-size: 11px;
        padding: 8px;
      }

      .floating-badge {
        top: 4px;
        left: 4px;
        padding: 3px 5px;
        font-size: 8px;
        border-radius: 999px;
      }

      .photo-count-pill {
        right: 4px;
        bottom: 4px;
        padding: 2px 5px;
        font-size: 8px;
      }

      .catalog-meta {
        gap: 6px;
        min-width: 0;
      }

      .catalog-grid .item-title {
        font-size: 13px;
        line-height: 1.15;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .catalog-caption,
      .catalog-stock-label {
        display: none;
      }

      .catalog-meta-line {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;
      }

      .catalog-meta-line > .muted {
        display: none;
      }

      .catalog-meta-line .storage-badge {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 4px 8px;
        font-size: 10px;
        border-radius: 999px;
        max-width: 100%;
      }

      .catalog-stock {
        flex-direction: row;
        padding: 6px 7px;
        border-radius: 10px;
        justify-content: space-between;
        text-align: left;
        min-width: 0;
      }

      .catalog-stock > div {
        display: grid;
        gap: 0;
        justify-items: start;
      }

      .catalog-stock-value {
        font-size: 15px;
      }

      .catalog-note {
        padding: 4px 6px;
        font-size: 9px;
        min-width: 0;
      }

      .catalog-grid .quick-form {
        padding: 6px;
        border-radius: 10px;
        gap: 4px;
        min-width: 0;
      }

      .catalog-qty-row {
        gap: 4px;
        justify-content: stretch;
      }

      .catalog-qty-row .field-label {
        display: none;
      }

      .catalog-grid .mini-input,
      .catalog-qty-input {
        width: 100% !important;
        max-width: none;
        min-height: 32px;
        font-size: 12px;
        padding: 5px 7px;
        text-align: center;
      }

      .catalog-grid .compact-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
      }

      .catalog-grid .btn {
        min-height: 42px;
        padding: 8px 6px;
        font-size: 11px;
        border-radius: 10px;
      }

      .catalog-grid [data-form-feedback] {
        display: none;
      }

      .hero-note {
        font-size: 14px;
      }

      .search-input {
        font-size: 18px;
        padding: 15px 16px;
      }

      .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .stat-card {
        padding: 14px;
      }

      .stat-value {
        font-size: 28px;
      }

      .chip-group {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        margin-top: 8px;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
      }

      .chip {
        scroll-snap-align: start;
        min-height: 34px;
        padding: 7px 10px;
        gap: 6px;
        font-size: 12px;
        border-radius: 999px;
      }

      .special-assets-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(220px, 76vw);
        gap: 8px;
        padding-bottom: 4px;
      }

      .special-asset-card {
        gap: 10px;
        padding: 12px;
        border-radius: 18px;
      }

      .special-asset-title {
        font-size: 18px;
      }

      .special-asset-subtitle {
        font-size: 12px;
      }

      .special-asset-meta-grid {
        gap: 8px;
      }

      .special-asset-meta {
        padding: 10px;
      }

      .special-asset-notes {
        font-size: 13px;
      }

      .results-bar {
        align-items: flex-start;
        margin-top: 16px;
      }

      .item-title {
        font-size: 22px;
      }

      .results-title {
        font-size: 22px;
      }

      .inline-qty {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .mini-input {
        width: 100% !important;
        min-width: 0;
      }

      .secondary-links {
        display: grid;
        grid-template-columns: 1fr;
      }

      .history-entry {
        padding: 12px;
      }

      .install-banner-actions {
        display: grid;
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 420px) {
      .stats-grid {
        grid-template-columns: 1fr 1fr;
      }

      .inline-qty {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .mini-input {
        grid-column: span 2;
      }

      .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }

      .catalog-grid .item-card {
        padding: 6px;
        gap: 6px;
      }

      .catalog-photo-shell {
        aspect-ratio: 4 / 5.4;
        padding: 4px;
      }

      .catalog-thumb {
        object-fit: cover;
      }

      .catalog-grid .item-title {
        font-size: 12px;
      }

      .catalog-stock {
        padding: 5px 6px;
      }

      .catalog-stock-value {
        font-size: 13px;
      }

      .catalog-grid .btn {
        min-height: 42px;
        font-size: 11px;
      }

      .chip {
        min-height: 32px;
        padding: 6px 9px;
        font-size: 11px;
      }

      .special-assets-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(210px, 82vw);
      }

      .install-banner {
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
      }

      .gallery-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .notifications-panel {
        top: 84px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: 56vh;
      }

      .return-storage-dialog {
        width: min(100%, calc(100vw - 20px));
        padding: 18px;
        border-radius: 22px;
      }

      .return-storage-title {
        font-size: 22px;
      }

      .return-storage-options {
        grid-template-columns: 1fr;
      }

      .return-storage-option {
        min-height: 64px;
      }

      .toast-stack {
        right: 12px;
        left: 12px;
        width: auto;
      }

      .overdue-card {
        grid-template-columns: 1fr;
      }

      .my-return-card {
        grid-template-columns: 1fr;
      }

      .my-return-controls {
        grid-template-columns: 1fr;
      }

      .my-return-bulk-select {
        max-width: none;
      }

      .support-fab {
        width: auto;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 13px;
        box-shadow: 0 14px 26px rgba(0, 0, 0, 0.2);
      }

      .support-fab-shell {
        right: 12px;
        left: auto;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 165;
      }

      .scroll-top-button {
        right: 14px;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        width: 42px;
        height: 42px;
      }

      .support-panel {
        right: 12px;
        left: 12px;
        width: auto;
        top: calc(8px + env(safe-area-inset-top, 0px));
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        height: auto;
        max-height: none;
        padding: 12px;
        gap: 8px;
        border-radius: 20px;
        grid-template-rows: auto auto 1fr auto;
        z-index: 180;
      }

      .support-panel-head {
        align-items: center;
        gap: 8px;
      }

      .support-panel-title {
        font-size: 18px;
      }

      .support-panel-note,
      .support-thread-state {
        display: none;
      }

      .support-panel-close {
        width: 34px;
        height: 34px;
        font-size: 20px;
        flex-shrink: 0;
      }

      .support-thread-bar {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 8px;
      }

      .support-thread-list {
        min-width: 0;
        gap: 6px;
        padding-bottom: 0;
      }

      .support-thread-chip {
        padding: 8px 10px;
        border-radius: 14px;
        min-width: 110px;
        max-width: 170px;
      }

      .support-thread-chip-title {
        font-size: 12px;
        gap: 6px;
      }

      .support-thread-chip-meta {
        display: none;
      }

      .support-thread-chip-count {
        min-width: 16px;
        height: 16px;
        font-size: 10px;
        padding: 0 5px;
      }

      .support-messages {
        gap: 8px;
        padding-right: 0;
      }

      .support-bubble {
        max-width: 96%;
        padding: 10px 12px;
        border-radius: 16px;
        font-size: 13px;
      }

      .support-bubble-meta {
        font-size: 10px;
      }

      .support-form {
        gap: 8px;
      }

      .support-form textarea {
        min-height: 58px;
        max-height: 104px;
        padding: 10px 12px;
        border-radius: 14px;
        resize: none;
      }

      .support-form-foot {
        gap: 8px;
        align-items: center;
      }

      .support-status {
        font-size: 12px;
        min-height: 16px;
      }

      .support-form .btn,
      [data-support-new-thread] {
        min-height: 38px;
        padding: 9px 12px;
        font-size: 13px;
      }
    }

    /* =====================
       DARK THEME OVERRIDES
       ===================== */

    /* Base text color — force all text to use the light ink variable */
    [data-theme="dark"] body,
    [data-theme="dark"] label,
    [data-theme="dark"] p,
    [data-theme="dark"] span,
    [data-theme="dark"] div,
    [data-theme="dark"] h1,
    [data-theme="dark"] h2,
    [data-theme="dark"] h3,
    [data-theme="dark"] h4,
    [data-theme="dark"] strong,
    [data-theme="dark"] small,
    [data-theme="dark"] a:not(.btn) {
      color: var(--ink);
    }

    /* Защитная сетка: таблицы и ячейки читаемы в тёмной теме без ручного перечисления */
    [data-theme="dark"] table,
    [data-theme="dark"] th,
    [data-theme="dark"] td,
    [data-theme="dark"] li,
    [data-theme="dark"] option,
    [data-theme="dark"] summary {
      color: var(--ink);
    }

    [data-theme="dark"] .muted {
      color: var(--muted) !important;
    }

    [data-theme="dark"] body {
      background: var(--bg);
    }

    /* Hero already uses var(--surface) in its base rule — no dark override needed. */

    /* --- Form checkboxes (white bg rows) --- */
    [data-theme="dark"] .form-checkbox,
    [data-theme="dark"] .menu-settings-item {
      background: var(--surface-strong) !important;
      border-color: var(--border) !important;
      color: var(--ink) !important;
    }

    /* --- Storage badges (hardcoded #111 text) --- */
    [data-theme="dark"] .storage-badge,
    [data-theme="dark"] .storage-main,
    [data-theme="dark"] .storage-street,
    [data-theme="dark"] .storage-corner,
    [data-theme="dark"] .storage-shower,
    [data-theme="dark"] .storage-toilet {
      background: var(--surface-strong) !important;
      color: var(--ink) !important;
      border-color: var(--border) !important;
    }

    /* --- Cards & panels --- */
    [data-theme="dark"] .card,
    [data-theme="dark"] .profile-summary-tile,
    [data-theme="dark"] .settings-nested-card,
    [data-theme="dark"] .details-panel,
    [data-theme="dark"] .overdue-card,
    [data-theme="dark"] .item-list-card,
    [data-theme="dark"] .my-return-card,
    [data-theme="dark"] .special-asset-card,
    [data-theme="dark"] .special-asset-meta,
    [data-theme="dark"] .item-form-card,
    [data-theme="dark"] .loan-card,
    [data-theme="dark"] .login-card,
    [data-theme="dark"] .catalog-note,
    [data-theme="dark"] .overdue-meta-tile,
    [data-theme="dark"] .item-action-audit-row,
    [data-theme="dark"] .return-request-row {
      background: var(--surface) !important;
      border-color: var(--border) !important;
    }

    /* --- Dropdowns & menus --- */
    [data-theme="dark"] .topbar-more-menu,
    [data-theme="dark"] .search-suggestions,
    [data-theme="dark"] .storage-dropdown,
    [data-theme="dark"] .catalog-filters-panel {
      background: rgba(30, 30, 30, 0.98) !important;
      border-color: var(--border) !important;
    }

    /* Panels (notifications/support/online) theme via --panel-bg (see :root). */
    [data-theme="dark"] .install-banner {
      background: var(--surface) !important;
      border-color: var(--border) !important;
    }

    [data-theme="dark"] .notifications-archive {
      background: var(--surface-strong) !important;
      border-color: var(--border) !important;
    }

    [data-theme="dark"] .online-user-row {
      background: var(--surface-strong) !important;
    }

    /* --- Modals & dialogs --- */
    [data-theme="dark"] .return-storage-dialog,
    [data-theme="dark"] .changelog-dialog,
    [data-theme="dark"] .gallery-modal-dialog {
      background: rgba(28, 28, 28, 0.99) !important;
      border-color: var(--border) !important;
    }

    [data-theme="dark"] .return-storage-modal,
    [data-theme="dark"] .changelog-modal {
      background: rgba(0, 0, 0, 0.5) !important;
    }

    /* Inputs/select/textarea theme themselves via --field-* tokens (see :root /
       [data-theme="dark"]) — no per-selector dark override needed. */

    /* Иконка календаря/часов в тёмной теме — инвертируем чтобы была видна */
    [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
    [data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
      filter: invert(1);
    }

    [data-theme="dark"] input::placeholder,
    [data-theme="dark"] textarea::placeholder {
      color: var(--muted) !important;
    }

    /* --- Buttons --- */
    [data-theme="dark"] .btn.gray {
      background: var(--surface-strong) !important;
      color: var(--ink) !important;
      border-color: var(--border) !important;
    }

    [data-theme="dark"] .btn.gray:hover {
      background: var(--surface-soft) !important;
    }

    /* Основная кнопка в тёмной теме: фон светлый → текст тёмный (был белый = нечитаемо) */
    [data-theme="dark"] .btn {
      color: #1a1a1a;
      border-color: var(--border);
    }

    /* Цветные/тёмные кнопки сохраняют белый текст */
    [data-theme="dark"] .btn.orange {
      background: var(--surface-strong);
      color: var(--ink);
      border-color: var(--border);
    }

    /* --- Badge --- */
    [data-theme="dark"] .badge {
      background: var(--surface-strong) !important;
      color: var(--ink) !important;
      border-color: var(--border) !important;
    }

    [data-theme="dark"] .badge.access-badge-enabled {
      background: rgba(21, 128, 61, 0.25) !important;
      color: #4ade80 !important;
    }

    [data-theme="dark"] .badge.access-badge-disabled {
      background: rgba(185, 28, 28, 0.2) !important;
      color: #f87171 !important;
    }

    /* --- Topbar --- */
    [data-theme="dark"] .topbar {
      background: rgba(24, 24, 24, 0.95) !important;
      border-color: var(--border) !important;
    }

    /* --- Support thread chips --- */
    [data-theme="dark"] .support-thread-chip {
      background: var(--surface-strong) !important;
      border-color: var(--border) !important;
    }

    [data-theme="dark"] .support-thread-chip.active {
      background: var(--surface-soft) !important;
      border-color: rgba(255,255,255,0.2) !important;
    }

    /* --- Photo upload area --- */
    [data-theme="dark"] .product-photo-drop-zone,
    [data-theme="dark"] .photo-preview-wrap {
      background: var(--surface-strong) !important;
      border-color: var(--border) !important;
    }

    /* --- Return/storage option buttons --- */
    [data-theme="dark"] .return-storage-option {
      background: var(--surface-strong) !important;
      border-color: var(--border) !important;
      color: var(--ink) !important;
    }

    [data-theme="dark"] .return-storage-option:hover {
      background: var(--surface-soft) !important;
    }

    /* --- Details/summary --- */
    [data-theme="dark"] details summary {
      background: var(--surface-strong) !important;
      color: var(--ink) !important;
    }

    /* --- Achievement cards --- */
    [data-theme="dark"] .achievement-card {
      background: var(--surface-strong) !important;
      border-color: var(--border) !important;
    }

    [data-theme="dark"] .achievement-card.is-unlocked {
      background: linear-gradient(135deg, rgba(21,128,61,0.15) 0%, rgba(16,85,42,0.2) 100%) !important;
      border-color: rgba(34,197,94,0.25) !important;
    }

    /* --- Leaderboard --- */
    [data-theme="dark"] .lb-row {
      background: var(--surface) !important;
      border-color: var(--border) !important;
    }

    [data-theme="dark"] .lb-row.rank-1 {
      background: rgba(120, 90, 10, 0.2) !important;
      border-color: rgba(251,191,36,0.2) !important;
    }

    [data-theme="dark"] .lb-row.rank-2 {
      background: rgba(80, 80, 100, 0.2) !important;
      border-color: rgba(148,163,184,0.2) !important;
    }

    [data-theme="dark"] .lb-row.rank-3 {
      background: rgba(120, 60, 10, 0.2) !important;
      border-color: rgba(234,88,12,0.15) !important;
    }

    /* --- Profile level block --- */
    [data-theme="dark"] .profile-level-block {
      background: var(--surface-strong) !important;
      border-color: var(--border) !important;
    }

    [data-theme="dark"] .profile-xp-bar {
      background: rgba(255,255,255,0.08) !important;
    }

    [data-theme="dark"] .profile-xp-bar-fill {
      background: var(--ink) !important;
    }

    /* --- Item status tags in dark --- */
    [data-theme="dark"] .status-taken {
      background: rgba(180,100,0,0.18) !important;
      color: #fbbf24 !important;
    }

    [data-theme="dark"] .status-lost {
      background: rgba(185,28,28,0.18) !important;
      color: #f87171 !important;
    }

    /* --- Flash messages --- */
    [data-theme="dark"] .flash,
    [data-theme="dark"] .flash-message {
      background: var(--surface-strong) !important;
      border-color: var(--border) !important;
      color: var(--ink) !important;
    }

    /* --- Changelog popup entry lines --- */
    [data-theme="dark"] .changelog-entry-lines li::before {
      color: var(--muted) !important;
    }

    /* --- Filter chips (Все / Все категории active state) --- */
    [data-theme="dark"] .chip {
      background: var(--surface-strong) !important;
      color: var(--ink) !important;
      border-color: var(--border) !important;
    }

    [data-theme="dark"] .chip.active {
      background: var(--ink) !important;
      color: var(--bg) !important;
      border-color: transparent !important;
    }

    [data-theme="dark"] .catalog-status-chip {
      background: var(--surface-strong) !important;
      color: var(--ink) !important;
      border-color: var(--border) !important;
    }

    [data-theme="dark"] .catalog-status-chip.active {
      background: var(--ink) !important;
      color: var(--bg) !important;
      border-color: transparent !important;
    }

    [data-theme="dark"] .catalog-status-form {
      border-color: var(--border) !important;
    }

    /* --- Quantity chips on item cards --- */
    [data-theme="dark"] .qty-chip {
      background: var(--surface-strong) !important;
      color: var(--ink) !important;
      border-color: var(--border) !important;
    }

    [data-theme="dark"] .qty-chip.active {
      background: var(--ink) !important;
      color: var(--bg) !important;
      border-color: transparent !important;
    }

    /* --- Secondary links / subtle buttons --- */
    [data-theme="dark"] .secondary-link {
      background: var(--surface-strong) !important;
      color: var(--ink) !important;
      border-color: var(--border) !important;
    }

    /* --- gray btn visible on dark --- */
    [data-theme="dark"] .btn.gray {
      background: var(--surface-strong) !important;
      color: var(--ink) !important;
      border-color: rgba(255,255,255,0.14) !important;
    }

    [data-theme="dark"] .btn.gray:hover {
      background: var(--surface-soft) !important;
    }

    /* --- Btn default/primary — inverted in dark (light bg, dark text = clearly visible CTA) --- */
    [data-theme="dark"] .btn:not(.red):not(.green):not(.gray):not(.orange):not(.claude-orange) {
      background: #e0e0e0 !important;
      color: #111111 !important;
      border-color: transparent !important;
    }

    [data-theme="dark"] .btn:not(.red):not(.green):not(.gray):not(.orange):not(.claude-orange):hover {
      background: #cccccc !important;
    }

    /* «Клод-оранж» одинаков в обеих темах */
    [data-theme="dark"] .btn.claude-orange {
      background: #d97757 !important;
      color: #ffffff !important;
      border-color: transparent !important;
    }
    [data-theme="dark"] .btn.claude-orange:hover {
      background: #c4634a !important;
    }

    /* --- Support FAB (dark gradient on dark) --- */
    [data-theme="dark"] .support-fab {
      background: #3a3a3a !important;
      color: var(--ink) !important;
    }

    /* --- Support chat bubbles (user/mine = dark on dark) --- */
    [data-theme="dark"] .support-bubble.user,
    [data-theme="dark"] .support-bubble.mine {
      background: linear-gradient(135deg, #3d3d3d 0%, #2e2e2e 100%) !important;
      color: var(--ink) !important;
    }

    /* --- Support textarea focus state --- */
    [data-theme="dark"] .support-form textarea:focus {
      background: var(--surface-strong) !important;
    }

    /* --- Notification read/unread button --- */
    [data-theme="dark"] .notification-button {
      background: var(--surface-strong) !important;
      color: var(--ink) !important;
      border-color: var(--border) !important;
    }

    /* --- Upload area --- */
    [data-theme="dark"] .upload-dropzone,
    [data-theme="dark"] .upload-dropzone.dragover,
    [data-theme="dark"] .upload-preview-card,
    [data-theme="dark"] .product-photo-wrap {
      background: var(--surface-strong) !important;
      border-color: var(--border) !important;
    }

    [data-theme="dark"] .upload-progress {
      background: rgba(255,255,255,0.1) !important;
    }

    [data-theme="dark"] .upload-progress-bar {
      background: var(--ink) !important;
    }

    /* --- Search suggestions hover --- */
    [data-theme="dark"] .search-suggestion:hover,
    [data-theme="dark"] .popular-query-button:hover {
      background: var(--surface-soft) !important;
    }

    /* --- Nav counter badge (number on notification bell) --- */
    [data-theme="dark"] .nav-counter {
      background: #e8e8e8 !important;
      color: #111111 !important;
    }

    /* --- Item status badges in dark --- */
    [data-theme="dark"] .status-available {
      background: rgba(255,255,255,0.08) !important;
      color: var(--ink) !important;
    }

    /* --- Green btn stays green --- */
    [data-theme="dark"] .btn.red {
      color: #fff !important;
    }

    [data-theme="dark"] .btn.green {
      color: #fff !important;
    }

    /* --- HR / dividers --- */
    [data-theme="dark"] hr {
      border-color: var(--border) !important;
    }

    /* --- Table / grid heads --- */
    [data-theme="dark"] .users-admin-table-head,
    [data-theme="dark"] .approvals-table-head {
      background: var(--surface-strong) !important;
      color: var(--muted) !important;
    }

    /* --- Nav link active underline color --- */
    [data-theme="dark"] .topbar {
      background: rgba(22, 22, 22, 0.96) !important;
      border-bottom-color: var(--border) !important;
    }

    /* --- Quick form (white hardcoded bg) --- */
    [data-theme="dark"] .quick-form {
      background: var(--surface-strong) !important;
      border-color: var(--border) !important;
    }

    /* --- Qty chip (hardcoded #ffffff) --- */
    [data-theme="dark"] .qty-chip {
      background: var(--surface-strong) !important;
    }

    /* --- User avatar chip (white gradient) --- */
    [data-theme="dark"] .user-avatar-chip {
      background: var(--surface-strong) !important;
      border-color: var(--border) !important;
    }

    /* --- Catalog note pill (white bg) --- */
    [data-theme="dark"] .catalog-note {
      background: var(--surface-strong) !important;
      color: var(--ink) !important;
    }

    /* --- Overdue card (hardcoded #fff gradient) --- */
    [data-theme="dark"] .overdue-card {
      background: var(--surface) !important;
    }

    [data-theme="dark"] .overdue-card.is-overdue {
      background: rgba(120, 20, 20, 0.2) !important;
      border-color: rgba(220, 38, 38, 0.25) !important;
    }

    /* --- Special asset overdue card --- */
    [data-theme="dark"] .special-asset-card.special-asset-overdue {
      background: rgba(120, 20, 20, 0.15) !important;
      border-color: rgba(220, 38, 38, 0.25) !important;
    }

    /* --- Gallery thumb delete button --- */
    [data-theme="dark"] .gallery-thumb-delete {
      background: rgba(30, 30, 30, 0.9) !important;
      color: var(--ink) !important;
    }

    /* --- Action-link buttons (white bg) --- */
    [data-theme="dark"] .action-link {
      background: var(--surface-strong) !important;
      border-color: var(--border) !important;
      color: var(--ink) !important;
    }

    /* --- Special asset install banner card, overdue section --- */
    [data-theme="dark"] .special-asset-head strong,
    [data-theme="dark"] .overdue-meta strong {
      color: var(--ink) !important;
    }

    /* --- Install banner (white bg card) --- */
    [data-theme="dark"] .install-banner {
      background: var(--surface-strong) !important;
    }