:root {
      --bg: #ffffff;
      --surface: #ffffff;
      --sidebar-bg: #ffffff;
      --border: #e5e7eb;
      --border-2: #d1d5db;
      --text: #111827;
      --text-2: #374151;
      --text-3: #6b7280;
      --text-4: #9ca3af;
      --accent: #2563eb;
      --accent-light: #eff6ff;
      --accent-border: #bfdbfe;
      --ok: #059669;
      --ok-bg: #ecfdf5;
      --ok-border: #a7f3d0;
      --warn: #d97706;
      --warn-bg: #fffbeb;
      --warn-border: #fde68a;
      --danger: #dc2626;
      --danger-bg: #fef2f2;
      --danger-border: #fecaca;
      --pdf-color: #ef4444;
      --doc-color: #2563eb;
      --ppt-color: #ea580c;
      --img-color: #7c3aed;
      --xls-color: #16a34a;
      --other-color: #6b7280;
      --radius: 12px;
      --radius-sm: 8px;
      --radius-xs: 6px;
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
      --shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
      --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
      --transition: 0.18s cubic-bezier(.4, 0, .2, 1);
      --font: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
      --mono: 'Geist Mono', 'Consolas', monospace;
      --primary-btn-bg: #000000;
      --primary-btn-text: #ffffff;
      --primary-btn-hover: #333333;
      --hover-bg: #f9fafb;
      --hover-text: #4b5563;
      --active-bg: #f4f5f7;
      --active-text: #111827;
      --card-mix-bg: white;
      --card-mix-text: black;
      --card-text: rgba(0, 0, 0, 0.78);
      --card-active-color: #fff;
      --card-active-text: rgba(17, 24, 39, 0.95);
      --card-icon-bg: rgba(255, 255, 255, 0.9);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }

    /* Custom minimalist scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border-2);
      border-radius: 999px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--text-4);
    }

    .app {
      display: flex;
      min-height: 100vh;
    }

    /* ── Sidebar ── */
    .sidebar {
      width: 260px;
      flex-shrink: 0;
      background: var(--sidebar-bg);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      padding: 24px 0;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      overflow-y: auto;
      z-index: 10;
    }

    .sidebar-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 24px 24px;
    }

    .brand-name {
      font-size: 1.4rem;
      font-weight: 800;
      letter-spacing: -.02em;
    }

    .sidebar-section {
      margin-bottom: 0;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 24px;
      font-size: .95rem;
      font-weight: 500;
      color: #9ca3af;
      cursor: pointer;
      border: none;
      background: transparent;
      width: 100%;
      text-align: left;
      transition: background var(--transition), color var(--transition);
    }

    .nav-item svg {
      width: 22px;
      height: 22px;
      fill: currentColor;
      flex-shrink: 0;
    }

    .nav-item:hover {
      background: var(--hover-bg);
      color: var(--hover-text);
    }

    .nav-item.active {
      background: var(--active-bg);
      color: var(--active-text);
      font-weight: 600;
    }

    .sidebar-bottom {
      margin-top: auto;
      padding: 14px 24px 0;
      border-top: 1px solid var(--border);
    }

    .storage-widget {
      padding: 12px;
      background: var(--bg);
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
    }

    .storage-label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: .75rem;
      font-weight: 600;
      color: var(--text-2);
      margin-bottom: 8px;
    }

    .storage-label span {
      color: var(--text-3);
      font-weight: 400;
    }

    .storage-bar {
      height: 5px;
      background: var(--border-2);
      border-radius: 999px;
      overflow: hidden;
    }

    .storage-fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), #60a5fa);
      transition: width .6s ease;
    }

    .storage-sub {
      margin-top: 6px;
      font-size: .7rem;
      color: var(--text-4);
    }

    /* ── Main ── */
    .main {
      flex: 1;
      margin-left: 260px;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .topnav {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 0 28px;
      height: 60px;
      display: flex;
      align-items: center;
      gap: 20px;
      position: sticky;
      top: 0;
      z-index: 9;
    }

    .nav-tabs {
      display: flex;
      align-items: center;
      gap: 2px;
      flex: 1;
    }

    .nav-tab {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 7px 14px;
      border-radius: var(--radius-sm);
      font-size: .84rem;
      font-weight: 500;
      color: #9ca3af;
      cursor: pointer;
      border: none;
      background: transparent;
      transition: background var(--transition), color var(--transition);
    }

    .nav-tab svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
    }

    .nav-tab:hover {
      background: var(--hover-bg);
      color: var(--hover-text);
    }

    .nav-tab.active {
      background: var(--active-bg);
      color: var(--active-text);
      font-weight: 600;
    }

    .topnav-center {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 320px;
    }

    .top-store-name {
      font-weight: 700;
      font-size: 1.05rem;
    }

    .topnav-right {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex: 1;
    }

    .search-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 7px 12px;
      width: 320px;
      transition: border-color var(--transition), width var(--transition);
    }

    .search-wrap:focus-within {
      border-color: var(--accent);
      width: 420px;
      background: var(--surface);
    }

    .search-wrap svg {
      width: 14px;
      height: 14px;
      fill: var(--text-4);
      flex-shrink: 0;
    }

    .search-wrap input {
      border: none;
      background: transparent;
      outline: none;
      font-size: .82rem;
      font-family: var(--mono);
      color: var(--text);
      width: 100%;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .search-wrap input::placeholder {
      text-transform: none;
      letter-spacing: 0;
      color: var(--text-4);
      font-size: .82rem;
    }

    .search-clear {
      border: none;
      background: none;
      cursor: pointer;
      color: var(--text-4);
      font-size: .85rem;
      padding: 0 2px;
      display: none;
    }

    .search-wrap:focus-within .search-clear {
      display: block;
    }

    .icon-btn-top {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--bg);
      display: grid;
      place-items: center;
      cursor: pointer;
      position: relative;
      transition: background var(--transition), border-color var(--transition);
    }

    .icon-btn-top:hover {
      background: var(--surface);
      border-color: var(--border-2);
    }

    .icon-btn-top svg {
      width: 16px;
      height: 16px;
      fill: var(--text-3);
    }

    .notif-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background: var(--danger);
      color: #fff;
      font-size: .58rem;
      font-weight: 700;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 2px solid var(--surface);
    }

    .content {
      padding: 24px 28px 48px;
    }

    /* Quick Access */
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .section-title {
      font-size: .95rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.01em;
    }

    .quick-access-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 12px;
      margin-bottom: 28px;
    }

    .format-card {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      cursor: pointer;
      transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
      position: relative;
      overflow: hidden;
    }

    .format-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-radius: 4px 4px 0 0;
      background: var(--card-color, var(--text-4));
      opacity: 0;
      transition: opacity var(--transition);
    }

    .format-card:hover {
      border-color: var(--card-color, var(--border-2));
      box-shadow: var(--shadow);
      transform: translateY(-1px);
    }

    .format-card:hover::before {
      opacity: 1;
    }

    .format-card.active {
      border-color: var(--card-color, var(--accent));
      background: color-mix(in srgb, var(--card-color, var(--accent)) 5%, white);
      box-shadow: var(--shadow);
    }

    .format-card.active::before {
      opacity: 1;
    }

    .quick-access-grid .format-card {
      border: 0;
      background: linear-gradient(135deg, color-mix(in srgb, var(--card-color) 18%, var(--card-mix-bg, white)) 0%, color-mix(in srgb, var(--card-color) 6%, var(--card-mix-bg, white)) 100%);
      box-shadow: 0 6px 14px rgba(20, 20, 30, 0.05);
      padding: 18px;
      border-radius: 14px;
      transition: box-shadow var(--transition), filter var(--transition);
      color: var(--card-text, rgba(0, 0, 0, 0.78));
    }

    .quick-access-grid .format-card::before {
      display: none;
    }

    .quick-access-grid .format-card .format-icon-wrap {
      background: var(--card-icon-bg, rgba(255, 255, 255, 0.9));
      border-radius: 12px;
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      margin-bottom: 12px;
    }

    .quick-access-grid .format-card .format-icon-wrap svg,
    .quick-access-grid .format-card .format-icon-wrap img {
      width: 26px;
      height: 26px;
      filter: none;
      object-fit: contain;
      display: block;
    }

    .quick-access-grid .format-card:hover {
      filter: brightness(0.78);
      box-shadow: 0 12px 34px rgba(12, 12, 20, 0.12);
    }

    .quick-access-grid .format-card.active {
      filter: brightness(0.88);
      box-shadow: 0 8px 20px rgba(12, 12, 20, 0.10);
    }

    .format-icon-wrap {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--card-color, var(--text-4)) 12%, var(--card-mix-bg, white));
      display: grid;
      place-items: center;
      margin-bottom: 12px;
    }

    .format-icon-wrap svg,
    .format-icon-wrap img {
      width: 24px;
      height: 24px;
      object-fit: contain;
      display: block;
    }

    .format-name {
      font-size: .85rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 3px;
    }

    .format-count {
      font-size: .74rem;
      color: var(--text-3);
    }

    .format-count strong {
      color: var(--card-color, var(--text-2));
      font-family: var(--mono);
      font-weight: 600;
    }

    .format-card[data-filter="all"] {
      --card-color: var(--accent);
    }

    .format-card[data-filter="pdf"] {
      --card-color: var(--pdf-color);
    }

    .format-card[data-filter="doc"] {
      --card-color: var(--doc-color);
    }

    .format-card[data-filter="ppt"] {
      --card-color: var(--ppt-color);
    }

    .format-card[data-filter="img"] {
      --card-color: var(--img-color);
    }

    .format-card[data-filter="xls"] {
      --card-color: var(--xls-color);
    }

    .format-card[data-filter="manual"] {
      --card-color: #353b39;
    }

    /* File Table */
    .files-section-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .files-section-title {
      font-size: .95rem;
      font-weight: 700;
      letter-spacing: -.01em;
    }

    .filter-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 600;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-3);
    }

    .filter-pill.active {
      background: var(--accent-light);
      border-color: var(--accent-border);
      color: var(--accent);
    }

    .filter-pill-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
    }

    .header-end {
      margin-left: auto;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .file-table-wrap {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    .file-table-head {
      display: grid;
      grid-template-columns: 2.5fr 1fr 90px 110px 180px;
      gap: 12px;
      align-items: center;
      padding: 10px 18px;
      border-bottom: 1px solid var(--border);
      background: var(--bg);
    }

    .th {
      font-size: .7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--text-4);
    }

    .th.sortable {
      cursor: pointer;
      user-select: none;
    }

    .th.sortable:hover {
      color: var(--text-2);
    }

    .file-row {
      display: grid;
      grid-template-columns: 2.5fr 1fr 90px 110px 180px;
      gap: 12px;
      align-items: center;
      padding: 12px 18px;
      border-bottom: 1px solid var(--border);
      transition: background var(--transition);
    }

    .file-row:last-child {
      border-bottom: none;
    }

    .file-row:hover {
      background: var(--hover-bg);
    }

    .file-row.selected {
      background: var(--accent-light);
    }

    .file-name-cell {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .file-type-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    .file-type-icon svg,
    .file-type-icon img {
      width: 34px;
      height: 34px;
      object-fit: contain;
      display: block;
    }

    .file-type-icon.pdf svg {
      fill: var(--pdf-color);
    }

    .file-type-icon.doc svg {
      fill: var(--doc-color);
    }

    .file-type-icon.ppt svg {
      fill: var(--ppt-color);
    }

    .file-type-icon.img svg {
      fill: var(--img-color);
    }

    .file-type-icon.xls svg {
      fill: var(--xls-color);
    }

    .file-type-icon.other svg {
      fill: var(--text-4);
    }

    .file-name-info {
      min-width: 0;
    }

    .file-name-text {
      font-size: .85rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .file-name-sub {
      font-size: .72rem;
      color: var(--text-3);
      margin-top: 1px;
    }

    .customer-code-cell {
      font-family: var(--mono);
      font-weight: 700;
      font-size: .78rem;
      color: var(--text);
    }

    .copies-cell {
      display: inline-flex;
      justify-content: flex-start;
    }

    .copies-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      padding: 4px 10px;
      border-radius: 999px;
      font-family: var(--mono);
      font-size: .72rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      background: var(--accent-light);
      border: 1px solid var(--accent-border);
      color: var(--accent);
      transition: background var(--transition), border-color var(--transition), color var(--transition);
    }

    .copies-badge:hover {
      border-color: var(--accent-border);
      color: var(--accent);
      background: var(--accent-light);
    }

    .print-type-cell {
      font-size: .78rem;
      font-weight: 600;
      color: var(--text-2);
    }

    .print-type-cell.color {
      color: #ea580c;
    }

    .print-type-cell.bw {
      color: #6b7280;
    }

    .td {
      font-size: .8rem;
      color: var(--text-2);
    }

    .td.muted {
      color: var(--text-3);
      font-size: .76rem;
    }

    .td.mono {
      font-family: var(--mono);
      font-size: .78rem;
    }

    .file-actions-cell {
      display: flex;
      align-items: center;
      gap: 5px;
      justify-content: flex-end;
      flex-shrink: 0;
    }

    .action-btn {
      padding: 5px 9px;
      border-radius: var(--radius-xs);
      font-size: .7rem;
      font-weight: 600;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-2);
      cursor: pointer;
      transition: background var(--transition), border-color var(--transition), color var(--transition);
      font-family: var(--font);
      white-space: nowrap;
    }

    .action-btn:hover {
      background: var(--bg);
      border-color: var(--border-2);
    }

    .action-btn.primary {
      background: var(--primary-btn-bg);
      border-color: var(--primary-btn-bg);
      color: var(--primary-btn-text);
    }

    .action-btn.primary:hover {
      background: var(--primary-btn-hover);
      border-color: var(--primary-btn-hover);
    }

    .print-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      margin-top: 3px;
    }

    .po-chip {
      font-size: .62rem;
      font-weight: 600;
      padding: 1px 5px;
      border-radius: 3px;
      border: 1px solid;
      white-space: nowrap;
    }

    .po-chip.color {
      background: #fff7ed;
      border-color: #fed7aa;
      color: #ea580c;
    }

    .po-chip.bw {
      background: #f9fafb;
      border-color: #d1d5db;
      color: #6b7280;
    }

    .po-chip.size {
      background: #f0fdf4;
      border-color: #bbf7d0;
      color: #16a34a;
    }

    .po-chip.meta {
      background: #f5f3ff;
      border-color: #ddd6fe;
      color: #7c3aed;
    }

    .file-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .toolbar-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border-radius: var(--radius-sm);
      font-size: .78rem;
      font-weight: 600;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-2);
      cursor: pointer;
      transition: all var(--transition);
      font-family: var(--font);
    }

    .toolbar-btn svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
    }

    .toolbar-btn:hover {
      background: var(--bg);
      border-color: var(--border-2);
    }

    .toolbar-btn:disabled {
      opacity: .4;
      cursor: default;
      pointer-events: none;
    }

    .toolbar-btn.danger {
      color: var(--danger);
      border-color: var(--danger-border);
      background: var(--danger-bg);
    }

    .toolbar-btn.accent {
      color: var(--accent);
      border-color: var(--accent-border);
      background: var(--accent-light);
    }

    .empty-state {
      padding: 56px 24px;
      text-align: center;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }

    .empty-icon {
      width: 52px;
      height: 52px;
      margin: 0 auto 14px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      display: grid;
      place-items: center;
    }

    .empty-icon svg {
      width: 24px;
      height: 24px;
      fill: var(--text-4);
    }

    .empty-title {
      font-size: .92rem;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .empty-sub {
      font-size: .8rem;
      color: var(--text-3);
    }

    /* ── Modals ── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(6px);
      z-index: 50;
      display: grid;
      place-items: center;
      animation: fadeIn .18s ease;
    }

    .modal-overlay.hidden {
      display: none;
    }

    /* ── Print Modal ── */
    .modal-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: min(92vw, 420px);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      animation: fadeIn .18s ease;
    }
    .modal-box .modal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 22px; border-bottom: 1px solid var(--border);
    }
    .modal-box .modal-close {
      background: none; border: none; font-size: 24px; line-height: 1;
      color: var(--text-3); cursor: pointer; padding: 0; width: 28px; height: 28px;
    }
    .modal-box .modal-close:hover { color: var(--text); }
    .modal-box .modal-body { padding: 20px 22px; }
    .modal-box .modal-footer {
      display: flex; justify-content: flex-end; gap: 10px;
      padding: 16px 22px; border-top: 1px solid var(--border);
    }
    .print-label {
      display: block; font-size: 0.72rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.04em;
      color: var(--text-3); margin-bottom: 5px;
    }
    .print-input {
      width: 100%; padding: 9px 12px; border: 1px solid var(--border-2);
      border-radius: 8px; font-size: 0.88rem; font-family: var(--font);
      background: var(--bg); color: var(--text); outline: none;
    }
    .print-input:focus { border-color: var(--accent); }

    .hidden {
      display: none !important;
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .modal-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px;
      width: min(92vw, 460px);
      box-shadow: var(--shadow-lg);
      animation: slideUp .2s ease;
      max-height: 88vh;
      overflow-y: auto;
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(12px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .modal-title {
      font-size: 1.1rem;
      font-weight: 800;
      margin-bottom: 4px;
      letter-spacing: -.02em;
    }

    .modal-sub {
      font-size: .82rem;
      color: var(--text-3);
      margin-bottom: 20px;
    }

    .modal-actions {
      display: flex;
      gap: 8px;
      margin-top: 20px;
    }

    .field-label {
      display: block;
      font-size: .75rem;
      font-weight: 600;
      color: var(--text-3);
      margin: 14px 0 5px;
    }

    .field-input {
      width: 100%;
      border: 1px solid var(--border-2);
      border-radius: var(--radius-sm);
      background: var(--bg);
      color: var(--text);
      padding: 9px 12px;
      font-size: .84rem;
      font-family: var(--font);
      outline: none;
      transition: border-color var(--transition);
    }

    .field-input:focus {
      border-color: var(--accent);
      background: var(--surface);
    }

    .field-select {
      flex: 1;
      border: 1px solid var(--border-2);
      border-radius: var(--radius-sm);
      padding: 8px 10px;
      font-size: .82rem;
      font-family: var(--font);
      color: var(--text);
      background: var(--bg);
      outline: none;
      cursor: pointer;
    }

    .field-select:focus {
      border-color: var(--accent);
    }

    .divider {
      height: 1px;
      background: var(--border);
      margin: 14px 0;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: var(--radius-sm);
      font-size: .82rem;
      font-weight: 600;
      font-family: var(--font);
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-2);
      transition: all var(--transition);
    }

    .btn:hover {
      background: var(--bg);
    }

    .btn.primary {
      background: var(--primary-btn-bg);
      border-color: var(--primary-btn-bg);
      color: var(--primary-btn-text);
    }

    .btn.primary:hover {
      background: var(--primary-btn-hover);
      border-color: var(--primary-btn-hover);
    }

    .btn.danger {
      background: var(--danger-bg);
      border-color: var(--danger-border);
      color: var(--danger);
    }

    /* Status */
    .status-dot-live {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: .72rem;
      font-weight: 600;
      color: var(--ok);
    }

    .status-dot-live::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--ok);
      animation: blink 1.4s ease-in-out infinite;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .3
      }
    }

    .statusbar {
      position: fixed;
      bottom: 16px;
      right: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .72rem;
      color: var(--text-3);
      z-index: 9;
    }

    /* ── NOTIFICATION POPUP ── */
    .notif-popup {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      left: 0;
      max-height: 420px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-lg);
      z-index: 100;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .notif-popup.open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .notif-popup-head {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .notif-popup-head h4 {
      font-size: .85rem;
      font-weight: 700;
      color: var(--text);
    }

    .notif-popup-list {
      flex: 1;
      overflow-y: auto;
      padding: 6px 0;
    }

    .notif-item {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      font-size: .78rem;
    }

    .notif-item:last-child {
      border-bottom: none;
    }

    .notif-item-title {
      font-weight: 700;
      margin-bottom: 4px;
      color: var(--text);
    }

    .notif-item-body {
      color: var(--text-3);
    }

    .notif-item.unread .notif-item-title {
      color: var(--accent);
    }

    /* ── SETTINGS MODAL ── */
    .store-row-item {
      display: flex;
      justify-content: space-between;
      padding: 7px 0;
      border-bottom: 1px solid var(--border);
      font-size: .8rem;
    }

    .store-row-item:last-child {
      border-bottom: none;
    }

    .store-row-key {
      color: var(--text-3);
    }

    .store-row-val {
      color: var(--text-2);
      font-weight: 600;
      text-align: right;
      word-break: break-all;
      max-width: 60%;
    }

    .retention-row {
      display: flex;
      gap: 8px;
      margin-top: 6px;
    }

    .toggle-switch {
      position: relative;
      width: 38px;
      height: 22px;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }

    .toggle-track {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: var(--border-2);
      cursor: pointer;
      transition: background var(--transition);
    }

    .toggle-switch input:checked+.toggle-track {
      background: var(--accent);
    }

    .toggle-thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      pointer-events: none;
      transition: transform var(--transition), background var(--transition);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .toggle-switch input:checked~.toggle-thumb {
      transform: translateX(16px);
      background: var(--bg);
    }

    .theme-toggle-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .toggle-label {
      font-size: .78rem;
      color: var(--text-2);
      font-weight: 500;
    }

    .chip-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
    }

    .chip {
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-2);
      font-size: .74rem;
      font-weight: 600;
      cursor: pointer;
      transition: all var(--transition);
    }

    .chip:hover {
      border-color: var(--accent-border);
      color: var(--accent);
    }

    .chip.active {
      background: var(--accent-light);
      border-color: var(--accent-border);
      color: var(--accent);
    }

    .offer-head {
      display: grid;
      grid-template-columns: 1fr 90px 90px 110px 28px;
      gap: 6px;
      font-size: .65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--text-4);
      padding: 0 2px;
      margin-bottom: 4px;
    }

    .offer-row {
      display: grid;
      grid-template-columns: 1fr 90px 90px 110px 28px;
      gap: 6px;
      align-items: center;
      margin-bottom: 6px;
    }

    .offer-row input,
    .offer-row select {
      border: 1px solid var(--border-2);
      border-radius: var(--radius-xs);
      padding: 6px 8px;
      font-size: .76rem;
      font-family: var(--font);
      color: var(--text);
      background: var(--bg);
      outline: none;
      width: 100%;
    }

    .offer-row input:focus,
    .offer-row select:focus {
      border-color: var(--accent);
    }

    .mini-del-btn {
      width: 28px;
      height: 28px;
      border-radius: var(--radius-xs);
      border: 1px solid var(--danger-border);
      background: var(--danger-bg);
      color: var(--danger);
      font-size: .9rem;
      cursor: pointer;
    }

    /* ── QR MODAL ── */
    .qr-modal {
      width: min(94vw, 560px);
      position: relative;
      max-height: 94vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    /* preview area flexes to fill leftover space; min-height:0 lets it shrink so nothing overflows */
    .qr-modal .qr-wrap {
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    /* Poster preview scaler — the fixed A4 poster (793.7px wide) is scaled by JS (fitPosterPreview)
       to exactly fill its preview box, so there are never gray gaps regardless of box size. */
    .pk-poster-scale {
      width: 793.7px;
      transform-origin: top left;
    }

    /* Close cross (top-right) */
    .modal-close-x {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 32px;
      height: 32px;
      border: none;
      background: var(--hover-bg);
      color: var(--text-2);
      border-radius: 8px;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s, color .15s;
      z-index: 5;
    }
    .modal-close-x:hover {
      background: var(--danger-light, #fee2e2);
      color: var(--danger, #dc2626);
    }

    .qr-wrap {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      display: grid;
      place-items: center;
      min-height: 250px;
      color: #111827;
    }

    .qr-img {
      max-width: 280px;
      display: none;
    }

    /* ── HOW IT WORKS ── */
    .steps-list {
      list-style: none;
      counter-reset: step;
      display: grid;
      gap: 10px;
    }

    .steps-list li {
      counter-increment: step;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: .83rem;
      color: var(--text-2);
      line-height: 1.5;
    }

    .steps-list li::before {
      content: counter(step);
      width: 24px;
      height: 24px;
      border-radius: 7px;
      flex-shrink: 0;
      background: var(--accent-light);
      border: 1px solid var(--accent-border);
      color: var(--accent);
      font-size: .72rem;
      font-weight: 700;
      display: grid;
      place-items: center;
    }

    /* ═══════════════════════════════════════════════
       REDESIGNED: MANUAL ENTRY MODAL
    ═══════════════════════════════════════════════ */
    .entry-modal-card {
      width: min(96vw, 540px);
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .entry-modal-header {
      padding: 22px 26px 18px;
      border-bottom: 1px solid var(--border);
      background: var(--bg);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-shrink: 0;
    }

    .entry-modal-header .modal-title {
      margin-bottom: 2px;
    }

    .entry-modal-body {
      padding: 20px 26px 24px;
      overflow-y: auto;
      flex: 1;
    }

    /* File lookup strip */
    .file-lookup-strip {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: var(--accent-light);
      border: 1px solid var(--accent-border);
      border-radius: var(--radius-sm);
      margin-bottom: 18px;
      cursor: pointer;
      transition: background var(--transition);
    }

    .file-lookup-strip:hover {
      background: #dbeafe;
    }

    .file-lookup-strip svg {
      width: 14px;
      height: 14px;
      fill: var(--accent);
      flex-shrink: 0;
    }

    .file-lookup-strip-text {
      font-size: .78rem;
      font-weight: 600;
      color: var(--accent);
      flex: 1;
    }

    .file-lookup-strip-code {
      font-family: var(--mono);
      font-size: .76rem;
      color: var(--text-2);
      background: #fff;
      border: 1px solid var(--border);
      padding: 2px 8px;
      border-radius: 4px;
    }

    /* Auto-detected info bar */
    .file-info-bar {
      display: none;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      padding: 8px 12px;
      background: var(--ok-bg);
      border: 1px solid var(--ok-border);
      border-radius: var(--radius-sm);
      margin-bottom: 14px;
    }

    .file-info-bar.visible {
      display: flex;
    }

    .file-info-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: .7rem;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 4px;
      background: rgba(5, 150, 105, 0.12);
      border: 1px solid var(--ok-border);
      color: var(--ok);
    }

    .file-info-bar-label {
      font-size: .72rem;
      color: var(--ok);
      font-weight: 600;
    }

    .file-info-bar-edit {
      font-size: .7rem;
      color: var(--text-3);
      margin-left: auto;
      cursor: pointer;
      text-decoration: underline;
    }

    /* Service row */
    .service-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      margin-bottom: 14px;
    }

    .service-selector {
      width: 100%;
    }

    /* Print spec grid */
    .print-spec-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px;
    }

    @media (max-width: 480px) {
      .print-spec-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .spec-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .spec-label {
      font-size: .7rem;
      font-weight: 700;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: .05em;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .spec-label .spec-hint {
      font-size: .62rem;
      font-weight: 400;
      color: var(--text-4);
      text-transform: none;
      letter-spacing: 0;
    }

    .spec-input {
      width: 100%;
      border: 1px solid var(--border-2);
      border-radius: var(--radius-sm);
      background: var(--bg);
      color: var(--text);
      padding: 9px 11px;
      font-size: .88rem;
      font-family: var(--mono);
      font-weight: 600;
      outline: none;
      transition: border-color var(--transition), background var(--transition);
    }

    .spec-input:focus {
      border-color: var(--accent);
      background: var(--surface);
    }

    .spec-input.auto-filled {
      background: var(--ok-bg);
      border-color: var(--ok-border);
      color: var(--ok);
    }

    /* Color mode toggle */
    .color-toggle-row {
      display: flex;
      gap: 6px;
      margin-bottom: 14px;
    }

    .color-toggle-btn {
      flex: 1;
      padding: 9px 10px;
      border-radius: var(--radius-sm);
      font-size: .78rem;
      font-weight: 700;
      border: 1.5px solid var(--border);
      background: var(--bg);
      color: var(--text-3);
      cursor: pointer;
      transition: all var(--transition);
      text-align: center;
    }

    .color-toggle-btn:hover {
      border-color: var(--border-2);
      color: var(--text-2);
    }

    .color-toggle-btn.active {
      background: var(--primary-btn-bg) !important;
      border-color: var(--primary-btn-bg) !important;
      color: var(--primary-btn-text) !important;
    }

    .color-toggle-btn.active:hover {
      background: var(--primary-btn-hover) !important;
      border-color: var(--primary-btn-hover) !important;
      color: var(--primary-btn-text) !important;
    }

    /* Pricing breakdown */
    .pricing-breakdown {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      margin-bottom: 14px;
    }

    .pricing-breakdown-title {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--text-4);
      margin-bottom: 12px;
    }

    .pricing-formula-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 10px;
      justify-content: space-between;
    }

    .pf-val {
      font-family: var(--mono);
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 6px 12px;
      border-radius: 6px;
      flex: 1;
      text-align: center;
      min-width: 0;
    }

    .pf-nowrap {
      white-space: nowrap;
      flex: 2;
      font-size: .82rem;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .pf-pages-val {
      flex: 0 0 44px;
    }

    .pf-op {
      font-size: .9rem;
      color: var(--text-4);
      font-weight: 600;
      flex-shrink: 0;
    }

    .pf-label {
      font-size: .8rem;
      color: var(--text-3);
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 6px 10px;
      border-radius: 6px;
      flex: 1;
      text-align: center;
    }

    /* Editable rate box — visually distinct so owners know they can tap it */
    .pf-rate-box {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      background: var(--accent-light);
      border: 1.5px dashed var(--accent);
      border-radius: 6px;
      padding: 4px 8px 4px 10px;
      flex: 0 0 88px;
      cursor: text;
      transition: border-color .15s ease, background .15s ease;
    }

    .pf-rate-box:hover,
    .pf-rate-box:focus-within {
      border-style: solid;
      background: var(--accent-light);
    }

    .pf-rate-currency {
      font-family: var(--mono);
      font-size: .9rem;
      color: var(--accent);
      font-weight: 700;
      flex-shrink: 0;
    }

    .pf-rate-input {
      width: 100%;
      min-width: 0;
      border: none;
      background: transparent;
      font-family: var(--mono);
      font-size: 1rem;
      font-weight: 800;
      color: var(--text);
      padding: 2px 2px;
      outline: none;
      text-align: left;
    }

    .pf-edit-icon {
      width: 12px;
      height: 12px;
      color: var(--accent);
      flex-shrink: 0;
      opacity: .8;
    }

    .pf-rate-hint {
      font-size: .68rem;
      color: var(--text-3);
      margin: -2px 0 10px 2px;
    }

    .pricing-total-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 8px;
      border-top: 1px solid var(--border);
    }

    .pricing-total-label {
      font-size: .8rem;
      font-weight: 600;
      color: var(--text-2);
    }

    .pricing-total-amount {
      font-family: var(--mono);
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -.02em;
      transition: all .15s ease;
      background: transparent;
      border: none;
      border-bottom: 1.5px dashed var(--border-2);
      outline: none;
      text-align: right;
      width: 100px;
      padding: 0;
      margin: 0;
    }

    .pricing-total-amount:focus {
      border-bottom-style: solid;
      border-bottom-color: var(--accent);
    }

    .pricing-total-amount.pulse {
      color: var(--accent);
      transform: scale(1.04);
    }

    /* Note field */
    .note-field {
      margin-bottom: 0;
    }

    /* Entry actions */
    .entry-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 16px 26px;
      border-top: 1px solid var(--border);
      background: var(--bg);
    }

    .add-entry-btn {
      background: var(--primary-btn-bg);
      color: var(--primary-btn-text);
      border: none;
      border-radius: var(--radius-sm);
      padding: 10px 20px;
      font-size: .84rem;
      font-weight: 700;
      cursor: pointer;
      font-family: var(--font);
      transition: background var(--transition);
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .add-entry-btn:hover {
      background: var(--primary-btn-hover);
    }

    .add-entry-btn svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
    }

    .entry-err {
      font-size: .74rem;
      color: var(--danger);
      min-height: 16px;
      margin-top: 0;
      flex: 1;
    }

    /* ═══════════════════════════════════════════════
       REDESIGNED: DAILY REPORT — PowerBI Style
    ═══════════════════════════════════════════════ */
    .report-view-wrap {
      background: transparent;
      border: none;
      box-shadow: none;
    }

    /* Report Header Strip */
    .report-header-strip {
      padding: 16px 22px;
      border-bottom: 1px solid var(--border);
      background: transparent;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .report-header-strip .report-title {
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: -.02em;
    }

    .report-date-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }

    .report-date-input {
      border: 1px solid var(--border-2);
      border-radius: var(--radius-sm);
      padding: 6px 10px;
      font-size: .8rem;
      font-family: var(--font);
      color: var(--text);
      background: var(--bg);
      outline: none;
    }

    .report-date-input:focus {
      border-color: var(--accent);
    }

    .report-nav-btn {
      width: 30px;
      height: 30px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface);
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: background var(--transition);
    }

    .report-nav-btn:hover {
      background: var(--bg);
    }

    .report-nav-btn svg {
      width: 14px;
      height: 14px;
      fill: var(--text-3);
    }

    /* KPI Cards Row */
    .report-kpi-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-bottom: 1px solid var(--border);
    }

    .kpi-card {
      padding: 20px 22px;
      border-right: 1px solid var(--border);
      position: relative;
      overflow: hidden;
      cursor: default;
      transition: background .2s ease;
    }

    .kpi-card:last-child {
      border-right: none;
    }

    .kpi-card:hover {
      background: var(--hover-bg);
    }

    .kpi-card-label {
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--text-4);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .kpi-card-label-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--kpi-color, var(--accent));
    }

    .kpi-card-value {
      font-family: var(--mono);
      font-size: 2rem;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -.04em;
      line-height: 1;
      margin-bottom: 4px;
      transition: color .15s ease, transform .15s ease;
      transform-origin: left center;
    }

    .kpi-card:hover .kpi-card-value {
      color: var(--kpi-color, var(--accent));
      transform: scale(1.04);
    }

    .kpi-card-sub {
      font-size: .7rem;
      color: var(--text-4);
    }

    .kpi-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      background: var(--kpi-color, var(--accent));
      opacity: 0.3;
      transition: opacity .2s ease, width .6s ease;
      width: 0;
    }

    .kpi-card:hover .kpi-bar {
      opacity: 0.7;
    }

    /* Report Body */
    .report-body {
      display: grid;
      grid-template-columns: 1fr 280px;
      min-height: 360px;
    }

    .report-main {
      border-right: 1px solid var(--border);
    }

    /* Chart Area */
    .report-chart-area {
      padding: 18px 22px;
      border-bottom: 1px solid var(--border);
    }

    .report-chart-title {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--text-4);
      margin-bottom: 14px;
    }

    .bar-chart {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      height: 80px;
      position: relative;
    }

    .bar-chart-bar-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      height: 100%;
      justify-content: flex-end;
      cursor: pointer;
    }

    .bar-chart-bar {
      width: 100%;
      border-radius: 4px 4px 0 0;
      background: var(--accent);
      opacity: 0.3;
      transition: height .4s ease, opacity .2s ease;
      min-height: 3px;
    }

    .bar-chart-bar-wrap:hover .bar-chart-bar {
      opacity: 0.8;
    }

    .bar-chart-bar-wrap.active .bar-chart-bar {
      opacity: 1;
      background: var(--accent);
    }

    .bar-chart-label {
      font-size: .6rem;
      color: var(--text-4);
      font-family: var(--mono);
    }

    /* Entries table */
    .report-entries-area {
      padding: 0;
    }

    .report-entries-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 22px;
      border-bottom: 1px solid var(--border);
    }

    .report-entries-title {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--text-4);
    }

    .report-entries-count {
      font-size: .7rem;
      color: var(--text-3);
      font-family: var(--mono);
    }

    .report-entry-row {
      display: grid;
      grid-template-columns: 1fr 80px 70px 72px;
      gap: 8px;
      align-items: center;
      padding: 10px 22px;
      border-bottom: 1px solid var(--border);
      cursor: default;
      transition: background .15s ease;
    }

    .report-entry-row:last-child {
      border-bottom: none;
    }

    .report-entry-row:hover {
      background: var(--hover-bg);
    }

    .re-service {
      font-size: .8rem;
      font-weight: 600;
      color: var(--text);
    }

    .re-source {
      font-size: .64rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 3px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }

    .re-source.qr {
      background: var(--accent-light);
      color: var(--accent);
      border: 1px solid var(--accent-border);
    }

    .re-source.manual {
      background: var(--warn-bg);
      color: var(--warn);
      border: 1px solid var(--warn-border);
    }

    .re-qty {
      font-size: .78rem;
      color: var(--text-3);
      font-family: var(--mono);
    }

    .re-amount {
      font-size: .85rem;
      font-weight: 700;
      color: var(--text);
      font-family: var(--mono);
      text-align: right;
      transition: color .15s ease;
    }

    .report-entry-row:hover .re-amount {
      color: var(--ok);
    }

    /* Right sidebar of report */
    .report-sidebar {
      padding: 18px 18px;
      overflow-y: auto;
      max-height: 600px;
    }

    .report-sidebar-title {
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--text-4);
      margin-bottom: 12px;
    }

    /* Breakdown donut-style bars */
    .breakdown-item {
      margin-bottom: 12px;
      cursor: default;
      transition: background .15s ease;
      padding: 6px 8px;
      border-radius: var(--radius-sm);
    }

    .breakdown-item:hover {
      background: var(--hover-bg);
    }

    .breakdown-item-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }

    .breakdown-item-name {
      font-size: .78rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 140px;
    }

    .breakdown-item-amount {
      font-family: var(--mono);
      font-size: .78rem;
      font-weight: 700;
      color: var(--text-2);
      transition: color .15s ease;
    }

    .breakdown-item:hover .breakdown-item-amount {
      color: var(--ok);
    }

    .breakdown-bar-track {
      height: 4px;
      background: var(--border);
      border-radius: 999px;
      overflow: hidden;
    }

    .breakdown-bar-fill {
      height: 100%;
      border-radius: 999px;
      background: var(--accent);
      transition: width .6s ease;
    }

    .breakdown-item-sub {
      font-size: .66rem;
      color: var(--text-4);
      margin-top: 3px;
    }

    /* Empty report state */
    .report-empty-state {
      grid-column: 1/-1;
      padding: 48px 24px;
      text-align: center;
    }

    .report-empty-icon {
      width: 44px;
      height: 44px;
      margin: 0 auto 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      display: grid;
      place-items: center;
    }

    .report-empty-icon svg {
      width: 20px;
      height: 20px;
      fill: var(--text-4);
    }

    .report-empty-title {
      font-size: .88rem;
      font-weight: 700;
      color: var(--text-2);
      margin-bottom: 4px;
    }

    .report-empty-sub {
      font-size: .76rem;
      color: var(--text-4);
    }

    /* ── Detailed report additions ─────────────────────── */
    .report-today-btn, .report-print-btn {
      color: var(--text-2);
    }
    .report-print-btn {
      display: inline-flex;
      align-items: center;
      background: var(--primary-btn-bg);
      color: var(--primary-btn-text);
      border-color: var(--primary-btn-bg);
    }
    .report-print-btn svg { fill: var(--primary-btn-text); }
    .report-print-btn:hover { background: var(--primary-btn-hover); }

    /* Insight strip */
    .report-insight-strip {
      display: flex;
      gap: 0;
      flex-wrap: wrap;
      border-bottom: 1px solid var(--border);
      background: var(--hover-bg);
    }
    .insight-pill {
      flex: 1;
      min-width: 130px;
      padding: 12px 18px;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .insight-pill:last-child { border-right: none; }
    .insight-pill-label {
      font-size: .62rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--text-4);
    }
    .insight-pill-value {
      font-size: .92rem;
      font-weight: 700;
      color: var(--text);
      font-family: var(--mono);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Hourly chart variant */
    .bar-chart.hourly {
      height: 64px;
      gap: 2px;
    }
    .bar-chart.hourly .bar-chart-bar {
      background: #7c3aed;
      border-radius: 2px 2px 0 0;
    }
    .bar-chart.hourly .bar-chart-bar-wrap.active .bar-chart-bar {
      background: #7c3aed;
    }
    .bar-chart.hourly .bar-chart-label {
      font-size: .52rem;
    }

    /* Ledger header row */
    .report-ledger-head {
      display: grid;
      grid-template-columns: 58px 1fr 78px 64px 78px;
      gap: 8px;
      padding: 8px 22px;
      background: var(--hover-bg);
      border-bottom: 1px solid var(--border);
      font-size: .62rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--text-4);
    }

    /* Sidebar sections */
    .report-sidebar-section {
      margin-bottom: 22px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--border);
    }
    .report-sidebar-section:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    /* Detailed entry row with time */
    .report-entry-row.detailed {
      grid-template-columns: 58px 1fr 78px 64px 78px;
    }
    .re-time {
      font-size: .72rem;
      color: var(--text-3);
      font-family: var(--mono);
    }
    .re-color-tag {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 5px;
      vertical-align: middle;
    }
    .re-color-tag.color { background: linear-gradient(135deg,#ef4444,#7c3aed,#2563eb); }
    .re-color-tag.bw { background: #6b7280; }

    /* Print styles */
    @media print {
      .sidebar, .topbar, .nav-tabs, #connError, .report-date-nav,
      #subExpiryBanner, .report-insight-strip .insight-pill:hover { display: none !important; }
      .report-print-btn, .report-today-btn { display: none !important; }
      body { background: #fff !important; }
      .report-body { grid-template-columns: 1fr !important; }
      .report-sidebar { border-top: 1px solid #ddd; }
    }

    /* Conn error */
    .conn-error {
      display: none;
      background: #fef2f2;
      border-bottom: 1px solid var(--danger-border);
      padding: 14px 24px;
      font-size: .8rem;
      color: var(--danger);
      font-weight: 600;
      text-align: center;
    }
    .conn-error #connErrorBlocked > div {
      gap: 4px;
    }
    .conn-error .pna-arrow-hint {
      margin-bottom: 0;
    }

    /* Device limit reached — a blocking full-screen state, not a banner. It
       replaces the dashboard (the .app tree and the connection banner are hidden
       while it is up) because this device holds no slot on the host. */
    .device-limit-screen {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: var(--bg);
    }

    .device-limit-screen.show {
      display: flex;
    }

    body.device-limit-blocked .app,
    body.device-limit-blocked .conn-error {
      display: none !important;
    }

    .device-limit-card {
      width: 100%;
      max-width: 460px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 30px 26px;
      text-align: center;
    }

    .device-limit-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      margin-bottom: 16px;
      border-radius: 50%;
      background: var(--danger-bg);
      border: 1px solid var(--danger-border);
      color: var(--danger);
    }

    .device-limit-title {
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--text);
      margin: 0 0 10px;
    }

    .device-limit-body {
      font-size: .84rem;
      line-height: 1.6;
      color: var(--text-3);
      margin: 0 0 20px;
    }

    .device-limit-actions {
      display: flex;
      justify-content: center;
    }

    .device-limit-hint {
      margin-top: 14px;
      font-size: .72rem;
      color: var(--text-4);
    }

    /* Device-limit removal view (task 7.2). A widened device-limit-card that
       lists each active session with a per-row "Log out" action, letting the
       user free a slot and retry the login. Reuses the .device-limit-* look. */
    .device-limit-card.device-limit-card-wide {
      max-width: 520px;
      text-align: left;
    }

    .device-limit-card-wide .device-limit-badge,
    .device-limit-card-wide .device-limit-title,
    .device-limit-card-wide .device-limit-body {
      text-align: center;
      display: block;
    }

    .device-limit-card-wide .device-limit-badge {
      margin-left: auto;
      margin-right: auto;
    }

    .device-session-list {
      list-style: none;
      margin: 0 0 16px;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-height: 260px;
      overflow-y: auto;
    }

    .device-session-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--bg);
    }

    .device-session-info {
      min-width: 0;
      flex: 1 1 auto;
    }

    .device-session-name {
      font-size: .84rem;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .device-session-meta {
      font-size: .72rem;
      color: var(--text-4);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .device-session-logout {
      flex: 0 0 auto;
      padding: 7px 12px;
      font-size: .78rem;
    }

    .device-limit-msg {
      display: none;
      font-size: .8rem;
      font-weight: 600;
      border-radius: var(--radius-sm);
      padding: 9px 12px;
      margin: 0 0 14px;
    }

    .device-limit-msg.show {
      display: block;
    }

    .device-limit-msg.error {
      background: var(--danger-bg);
      border: 1px solid var(--danger-border);
      color: var(--danger);
    }

    .device-limit-msg.info {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-3);
    }

    /* Login screen — a blocking full-screen gate for non-host devices. Like the
       device-limit screen it replaces the dashboard (the .app tree and the
       connection banner are hidden while it is up) until a valid session is
       established. The host over loopback never sees this. */
    .login-screen {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: var(--bg);
    }

    .login-screen.show {
      display: flex;
    }

    body.login-gated .app,
    body.login-gated .conn-error {
      display: none !important;
    }

    .login-card {
      width: 100%;
      max-width: 400px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 32px 28px;
    }

    .login-brand {
      font-size: 1.5rem;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--text);
      margin-bottom: 4px;
    }

    .login-sub {
      font-size: .84rem;
      color: var(--text-3);
      margin-bottom: 22px;
    }

    .login-field {
      margin-bottom: 14px;
    }

    .login-field label {
      display: block;
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--text-3);
      margin-bottom: 6px;
    }

    .login-input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--border-2);
      border-radius: var(--radius-sm);
      font-size: .88rem;
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      outline: none;
      transition: border-color var(--transition);
    }

    .login-input:focus {
      border-color: var(--accent);
      background: var(--surface);
    }

    .login-remember {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .82rem;
      color: var(--text-2);
      margin: 4px 0 18px;
      cursor: pointer;
      user-select: none;
    }

    .login-remember input {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    .login-submit {
      width: 100%;
      justify-content: center;
      padding: 11px 14px;
    }

    .login-error {
      display: none;
      background: var(--danger-bg);
      border: 1px solid var(--danger-border);
      color: var(--danger);
      font-size: .8rem;
      font-weight: 600;
      border-radius: var(--radius-sm);
      padding: 9px 12px;
      margin-bottom: 14px;
    }

    .login-error.show {
      display: block;
    }

    /* ═══════════════════════════════════════════════
       REDESIGNED: SETTINGS VIEW — Open & Dedicated Tab
    ═══════════════════════════════════════════════ */
    .settings-view-wrap {
      background: transparent;
      border: none;
      box-shadow: none;
    }

    .settings-header-strip {
      padding: 16px 22px;
      border-bottom: 1px solid var(--border);
      background: transparent;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .settings-header-strip .settings-title {
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--text);
    }

    .settings-body {
      display: grid;
      grid-template-columns: 1fr 300px;
      min-height: 360px;
    }

    .settings-main {
      border-right: 1px solid var(--border);
      padding: 22px;
    }

    .settings-sidebar {
      padding: 22px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .settings-group {
      margin-bottom: 24px;
    }

    .settings-group-title {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--text-4);
      margin-bottom: 14px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 6px;
    }

    .settings-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 16px;
      margin-bottom: 18px;
    }

    .settings-full-width {
      grid-column: span 2;
    }

    .settings-input-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .settings-input-group label {
      font-size: .72rem;
      font-weight: 700;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .status-dot-live.error {
      color: var(--danger);
    }

    .status-dot-live.error::before {
      background: var(--danger);
    }

    @media (max-width: 960px) {
      .settings-body {
        grid-template-columns: 1fr;
      }

      .settings-main {
        border-right: none;
        padding: 16px;
      }

      .settings-sidebar {
        border-top: 1px solid var(--border);
        padding: 16px;
      }

      .settings-form-grid {
        grid-template-columns: 1fr;
      }

      .settings-full-width {
        grid-column: span 1;
      }
    }


    input[type=checkbox] {
      accent-color: var(--accent);
      cursor: pointer;
    }

    @media (max-width: 960px) {
      .report-kpi-row {
        grid-template-columns: repeat(2, 1fr);
      }

      .report-body {
        grid-template-columns: 1fr;
      }

      .report-sidebar {
        border-top: 1px solid var(--border);
      }

      .report-main {
        border-right: none;
      }
    }

    @media (max-width: 820px) {
      .sidebar {
        display: none;
      }

      .main {
        margin-left: 0;
      }

      .quick-access-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .file-table-head,
      .file-row {
        grid-template-columns: 1fr 80px 90px;
      }
    }

    /* ── Mobile-responsive breakpoints (Req 15) ──────────────────────────
       Additive only: these override earlier rules inside the media queries
       so the wide-viewport desktop layout is preserved untouched (Req 15.5).
       This is the always-on cloud entry point; the same treatment mirrors the
       bundled dashboard so the LAN/host and remote/tunnel cases behave the
       same on a phone (Req 15.4). Placed at the end of the style block so
       they win over the earlier 820px/960px rules. */

    /* Tablet and below: the 260px sidebar already hides at 820px; here we make
       the topnav a usable mobile nav (its .nav-tabs mirror the sidebar items)
       by letting it scroll horizontally instead of cramping, and we relax the
       fixed-width search so it doesn't crowd out the tabs. */
    @media (max-width: 900px) {
      .topnav {
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .nav-tabs {
        flex: 0 0 auto;
        flex-wrap: nowrap;
      }

      .nav-tab {
        white-space: nowrap;
        flex: 0 0 auto;
      }

      .topnav-center {
        flex: 0 0 auto;
      }

      .search-wrap {
        width: 200px;
      }

      .search-wrap:focus-within {
        width: 240px;
      }

      .content {
        padding: 18px 16px 40px;
      }

      /* Report / KPI cards: fewer columns so they don't squeeze. */
      .report-kpi-row {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Phone: collapse the top nav to a horizontally scrollable button bar,
       stack report cards, make file rows and tables horizontally scrollable so
       no column is cut off, and size the login / device-limit / device-removal
       controls for touch. */
    @media (max-width: 600px) {
      /* The sidebar is hidden (820px rule); the topnav becomes the mobile
         nav — a horizontally scrollable row of buttons. */
      .topnav {
        height: auto;
        padding: 8px 12px;
        gap: 8px;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .nav-tabs {
        flex: 0 0 auto;
        gap: 4px;
      }

      .nav-tab {
        min-height: 40px;
        padding: 8px 12px;
      }

      /* Store name and search take secondary priority on a phone. */
      .topnav-center {
        display: none;
      }

      .topnav-right {
        flex: 0 0 auto;
        gap: 8px;
      }

      .search-wrap,
      .search-wrap:focus-within {
        width: 150px;
      }

      .content {
        padding: 14px 12px 36px;
      }

      /* Report / KPI cards stack vertically on a phone. */
      .report-kpi-row {
        grid-template-columns: 1fr;
      }

      .kpi-card {
        border-right: none;
        border-bottom: 1px solid var(--border);
      }

      .kpi-card:last-child {
        border-bottom: none;
      }

      /* Quick-access format cards: comfortable two-up grid. */
      .quick-access-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      /* File list and any tables: reflow to horizontal scroll so the full
         five-column layout stays intact instead of being cut off. This wins
         over the 820px three-column collapse above. */
      .file-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .file-table-head,
      .file-row {
        grid-template-columns: 2.5fr 1fr 90px 110px 180px;
        min-width: 640px;
      }

      /* Report ledger rows share the same reflow treatment. */
      .report-ledger-head,
      .report-entry-row,
      .report-entry-row.detailed {
        min-width: 520px;
      }

      .report-main {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      /* Login / device-limit / device-removal screens: full-width cards with
         touch-sized (~44px) inputs and buttons and comfortable padding. */
      .login-screen,
      .device-limit-screen {
        padding: 16px;
      }

      .login-card,
      .device-limit-card,
      .device-limit-card.device-limit-card-wide {
        max-width: 100%;
        padding: 24px 18px;
      }

      .login-input {
        min-height: 44px;
        font-size: 16px; /* prevents iOS zoom-on-focus */
      }

      .login-remember input,
      input[type=checkbox] {
        width: 20px;
        height: 20px;
      }

      .btn,
      .login-submit,
      .device-session-logout {
        min-height: 44px;
      }

      .login-submit {
        width: 100%;
      }

      /* Device-removal session rows stack their label and log-out button so
         the touch target isn't squeezed. */
      .device-session-row {
        flex-wrap: wrap;
      }

      .device-session-logout {
        flex: 1 1 100%;
        justify-content: center;
      }
    }

    .bottom-tab-bar { display: none; }
    .mobile-hamburger-btn { display: none; }
    .mobile-drawer-overlay { display: none; }

    @media (max-width: 768px) {
      .bottom-tab-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 40;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding-bottom: max(6px, env(safe-area-inset-bottom));
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
      }
      .bottom-tab-bar .bottom-tab {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 56px;
        min-width: 44px;
        padding: 6px 4px;
        font-size: .68rem;
        font-weight: 600;
        color: var(--text-3);
        background: transparent;
        border: none;
        cursor: pointer;
      }
      .bottom-tab-bar .bottom-tab svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
      }
      .bottom-tab-bar .bottom-tab.active {
        color: var(--accent);
      }

      .topnav {
        height: auto;
        min-height: 52px;
        padding: 8px 12px;
        position: sticky;
        top: 0;
        justify-content: space-between;
      }
      /* The 900px and 600px rules above set .topnav { overflow-x: auto } for the
         tablet nav-tabs-scrolling case, but max-width media queries stack — those
         rules are still active at this width too. .nav-tabs/.search-wrap are
         hidden below, so there's no overflowing content left to scroll, yet
         overflow-x:auto can still show/rubber-band a scrollbar or allow an
         accidental horizontal drag on the hamburger/center/bell layout. Reset it
         here (after the rule above, so it wins by source order). */
      .topnav {
        overflow-x: hidden;
      }
      .topnav .nav-tabs,
      .topnav .search-wrap {
        display: none;
      }
      /* Superseded: this rule used to left-align the store name (flex:1 1 auto;
         justify-content:flex-start) back when the topnav only had the store name
         and the notif bell. Now that a hamburger button sits on the left (Part A),
         the store name is centered between hamburger and bell instead. */
      .topnav-center {
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
      }
      .top-store-name {
        font-size: .95rem;
      }
      .topnav-right {
        flex: 0 0 auto;
      }
      .mobile-hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border: none;
        background: transparent;
        color: var(--text-2);
        cursor: pointer;
        border-radius: var(--radius-sm);
      }
      .mobile-hamburger-btn svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
      }
      .mobile-hamburger-btn:hover {
        background: var(--hover-bg);
      }
      .sidebar {
        display: none;
      }

      /* Modal sizing for phone widths. Two separate modal systems in this file share
         this treatment: .modal-overlay/.modal-card (QR, How It Works, manual entry)
         and .modal-box (the dynamically-built print modal). No script
         change — openModal()/closeModal()/openPrintModal() are untouched.
         (The former "More" bottom sheet used to share .modal-card here too, but it
         has been superseded by the .mobile-drawer-overlay/.mobile-drawer-panel side
         drawer below, which is a separate, unrelated element — #qrModal, #howModal,
         #entryModal remain the consumers of this rule.) */
      .modal-card {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        padding: 20px 18px;
        max-height: 85vh;
      }
      .modal-close-x {
        width: 40px;
        height: 40px;
      }
      .modal-box {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        max-height: 85vh;
        overflow-y: auto;
      }
      .modal-box .modal-close {
        width: 40px;
        height: 40px;
        font-size: 22px;
      }

      /* Notification popup: already anchored to #notifWrapper (kept visible in the
         restyled .topnav per Task 3), so it does not need full repositioning — just
         enough bottom clearance so its max-height:420px never collides with the
         fixed Bottom_Tab_Bar (z-index 40) on shorter phone viewports. */
      .notif-popup {
        max-height: min(420px, calc(100vh - 140px));
      }

      /* Side drawer (hamburger menu) — supersedes the former bottom "More" sheet.
         .modal-close-x already has 40x40 sizing from the rule above; reused as-is. */
      .mobile-drawer-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 60;
        background: rgba(0,0,0,0.4);
        align-items: stretch;
        justify-content: flex-start;
      }
      .mobile-drawer-overlay:not(.hidden) {
        display: flex;
      }
      .mobile-drawer-panel {
        width: min(78vw, 300px);
        max-width: 300px;
        height: 100%;
        background: var(--surface);
        box-shadow: var(--shadow-lg);
        padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
        padding-top: max(16px, env(safe-area-inset-top));
        display: flex;
        flex-direction: column;
        gap: 4px;
        overflow-y: auto;
      }
      .mobile-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
      }
      .mobile-drawer-panel .nav-item {
        width: 100%;
        padding: 14px 10px;
        font-size: .9rem;
        border-radius: var(--radius-sm);
      }

      /* Card layout for .file-row at phone widths. Uses POSITIONAL child selectors
         against createFileRow()'s fixed 5-cell output order (name, code, copies, type,
         actions) — createFileRow() itself is NOT edited. Column headers
         (.file-table-head) don't map to a card layout, so they're hidden here. */
      .file-table-head {
        display: none;
      }
      /* Received-file card, rebuilt to match a specific reference layout: one
         horizontal row (not a stacked card). Cell order is unchanged from
         createFileRow()'s fixed DOM output (name-block, code, copies, type,
         actions) — cell 4 (print-type text) is hidden here since it duplicates
         the "Color"/"B&W" chip already shown inside cell 1's print-chips row in
         the reference image; nothing is removed from the DOM, only visually hidden. */
      .file-row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px 14px;
        margin: 0 0 10px;
        background: var(--surface);
        box-shadow: var(--shadow-sm);
        overflow-x: auto;
      }
      .file-row > *:nth-child(1) {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
      }
      .file-row > *:nth-child(2) {
        order: 2;
        flex: 0 0 auto;
        font-size: .74rem;
        color: var(--text-3);
        white-space: nowrap;
      }
      .file-row > *:nth-child(3) {
        order: 3;
        flex: 0 0 auto;
      }
      .file-row > *:nth-child(4) {
        display: none;
      }
      .file-row > *:nth-child(5) {
        order: 4;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      /* Quick Access: horizontal scroller instead of a 2-column grid. The 6 filter
         cards (all/pdf/doc/ppt/img/xls) scroll horizontally in row 1; Manual Entry
         (data-filter="manual") breaks to its own full-width row below, rendered as
         a wide rectangular card instead of a square tile. No DOM move — #formatCards
         keeps its original 7 children in original order, this is CSS-only
         (setFormatFilter()/openManualEntry() untouched).
         CSS Grid, not flex: flex-wrap cannot both let 6 siblings overflow into
         horizontal scroll AND force the 7th (Manual Entry) onto its own row —
         wrap and overflow-scroll are mutually exclusive on one flex line. Grid
         solves this: the 6 filter cards are explicitly pinned to row 1 and
         auto-flow (grid-auto-flow:column) into columns left to right in DOM
         order, each column fixed at 76px, overflowing into horizontal scroll;
         Manual Entry (:last-child, always the 7th DOM child — confirmed, no
         DOM move needed) is explicitly placed on row 2 spanning full width. */
      .quick-access-grid {
        display: grid !important;
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        grid-auto-columns: 76px;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        /* Comfortable horizontal inset on the scroller so the first ("All
           Files") and last tiles aren't clipped flush against the edge. */
        padding: 4px 12px 10px;
        margin-bottom: 4px;
      }
      .quick-access-grid .format-card:last-child {
        grid-row: 2;
        grid-column: 1 / -1;
        /* Row 1 is a horizontal scroller (grid-auto-flow:column), so `1 / -1`
           spans only the implicit column tracks that exist - which left the
           full-width Manual Entry card clipped against the scroller's left
           inset. Sticking it to the left keeps it aligned to the visible
           viewport at every scroll position, and the width clamp below stops it
           from stretching to the full (overflowing) scroll width. */
        position: sticky;
        left: 0;
        width: calc(100vw - 24px);
        max-width: 100%;
      }
      .format-card {
        min-height: 44px;
        padding: 12px;
      }
      /* Compact "story tile" for the 6 filter cards: small square, icon centered
         on top, tiny label below — deliberately NOT the desktop card (large
         gradient tile with left-aligned multi-line text). Overrides the desktop
         .quick-access-grid .format-card styling at this width. */
      .quick-access-grid .format-card:not([data-filter="manual"]) {
        grid-row: 1;
        min-height: 0;
        padding: 10px 6px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 4px;
        scroll-snap-align: start;
        border-radius: 14px;
        /* Fixed compact height so every tile is the same square-ish size no
           matter how long its label is; icon + labels are vertically centered
           inside the box and anything that would spill is clipped. */
        height: 84px;
        overflow: hidden;
      }
      .quick-access-grid .format-card:not([data-filter="manual"]) .format-icon-wrap {
        width: 34px;
        height: 34px;
        min-height: 34px;
        margin-bottom: 0;
      }
      .quick-access-grid .format-card:not([data-filter="manual"]) .format-icon-wrap img,
      .quick-access-grid .format-card:not([data-filter="manual"]) .format-icon-wrap svg {
        width: 20px;
        height: 20px;
      }
      .quick-access-grid .format-card:not([data-filter="manual"]) .format-name {
        font-size: .68rem;
        line-height: 1.2;
        margin-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
      .quick-access-grid .format-card:not([data-filter="manual"]) .format-count {
        font-size: .6rem;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
      /* Compact filter tiles now clamp each label to a single line with an
         ellipsis (see .format-name / .format-count above) — and the tile has a
         fixed compact height — so labels like "DOC / DOCX" or "XLS / CSV"
         truncate with … instead of wrapping and stretching the tile tall; the
         tiles stay square-ish. Keep word-break/overflow-wrap normal so nothing
         breaks mid-word before the ellipsis kicks in. */
      .quick-access-grid .format-card:not([data-filter="manual"]) .format-name,
      .quick-access-grid .format-card:not([data-filter="manual"]) .format-count {
        word-break: normal;
        overflow-wrap: normal;
      }
      .format-card[data-filter="manual"] {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 64px;
        padding: 14px 16px;
        margin-top: 4px;
      }
      .format-card[data-filter="manual"] .format-icon-wrap {
        margin-bottom: 0;
        flex-shrink: 0;
      }
      .format-card[data-filter="manual"] .format-name {
        margin-bottom: 2px;
      }

      /* Daily Report: force single-column KPI cards down from 768px instead of only
         600px (the existing 900/960px rules already collapse .report-body to one
         column at this width, so only .report-kpi-row needs a stronger override
         here). Extends the existing 600px ledger/chart horizontal-scroll treatment
         down to 768px too, so there's no seam between the two ranges. No script
         changes, renderReport() populates the same elements regardless of layout. */
      .report-kpi-row {
        grid-template-columns: 1fr;
      }
      .report-main {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .report-ledger-head,
      .report-entry-row,
      .report-entry-row.detailed {
        min-width: 520px;
      }

      /* Devices panel rows (renderDeviceList) use inline styles with no class hooks
         today, so a single additive class was added to the <li> and its Log-out
         button (device-row / device-row-logout) purely so this rule can touch-size
         them — no inline style value or rendering logic was changed. */
      .device-row {
        flex-wrap: wrap;
        padding: 14px 16px !important;
      }
      .device-row-logout {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px !important;
      }

      /* Extend the existing ≤600px login/device-limit touch-sizing rules down to
         768px, so there is no seam between the phone range and this feature's
         Mobile_UI range. Values copied verbatim from the existing 600px rules;
         no script change — submitLogin()/showDeviceLimitScreen() etc. are untouched. */
      .login-screen,
      .device-limit-screen {
        padding: 16px;
      }
      .login-card,
      .device-limit-card,
      .device-limit-card.device-limit-card-wide {
        max-width: 100%;
        padding: 24px 18px;
      }
      .login-input {
        min-height: 44px;
        font-size: 16px;
      }
      .btn,
      .login-submit,
      .device-session-logout {
        min-height: 44px;
      }

      /* Offline banner (Files section only — see mobileOfflineState comment
         near its declaration in the script for why Report is excluded). */
      #mobileOfflineBanner {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 14px;
        margin-bottom: 10px;
        border-radius: var(--radius-sm);
        background: var(--warn-bg, #fffbeb);
        border: 1px solid var(--warn-border, #fde68a);
        color: var(--warn, #d97706);
        font-size: .74rem;
        font-weight: 600;
      }
      #mobileOfflineBanner.show {
        display: flex;
      }

      /* ── Mobile overflow containment ─────────────────────────────────────
         Lock the page to the viewport width so nothing scrolls the whole page
         sideways. Only specific inner containers (the report table via
         .report-main) are allowed to scroll horizontally; everything else must
         wrap or shrink. Fixes the phone horizontal-scroll / clipped-content bug. */
      html, body {
        max-width: 100%;
        overflow-x: hidden;
      }
      .app {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }
      .main {
        margin-left: 0;      /* no sidebar on mobile; also covered by the 820px rule */
        width: 100%;
        max-width: 100%;
        min-width: 0;        /* let this flex child shrink below content width */
        overflow-x: hidden;
      }
      .content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 14px 12px calc(72px + env(safe-area-inset-bottom));  /* bottom clears the fixed tab bar */
        overflow-x: hidden;
      }
      /* Generic guard: common wide children must not exceed the content box. */
      .content > * {
        max-width: 100%;
        min-width: 0;
      }
      /* The file list is a CARD layout at this width (not a table), so the
         Requirement-15 640px min-width forced-scroll rule must not apply here —
         it would otherwise push the whole page wide. */
      .file-table-wrap {
        overflow-x: hidden;
        min-width: 0;
      }
      .file-row {
        min-width: 0;
      }
      /* Quick Access format cards: ensure the grid fits the viewport and cards
         can shrink; long counts/names wrap instead of forcing width. */
      .quick-access-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }
      .format-card {
        min-width: 0;
      }
      /* Only break when a single unbreakable token is genuinely wider than the
         box — never mid-word on normal short labels. Aggressive mid-word breaking
         (word-break: break-word / overflow-wrap: anywhere) was splitting short
         labels like "All Files"/"0 files" mid-word, which wrapped to 3-4 lines and
         stretched the compact filter tiles into tall pills. */
      .format-card .format-name,
      .format-card .format-count {
        overflow-wrap: break-word;
        word-break: normal;
      }
      /* Report table keeps its own internal horizontal scroll (min-width rows),
         confined to .report-main which already has overflow-x:auto — but make
         sure that scroll never escapes to the page. */
      .report-main {
        max-width: 100%;
      }
      .report-body {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
      }
      /* Daily Report inner containers: flex/grid children default to
         min-width:auto, which refuses to shrink below content width even when
         the parent (.report-body/.report-main, already constrained above) is
         narrower. Left unfixed, this pushes the whole report — and the page
         itself — wider than the viewport, clipping text at both edges (e.g.
         "ACTIVITY" rendering as "VITY"). Scoped to this 768px block only; the
         900/960px tablet rules above already collapse .report-body to one
         column but don't need this shrink fix since there's more room there.
         No script change — renderReport() populates the same elements. */
      .report-sidebar {
        min-width: 0;
        max-width: 100%;
      }
      .report-sidebar-section {
        min-width: 0;
      }
      .report-chart-area {
        min-width: 0;
        max-width: 100%;
      }
      .bar-chart,
      .bar-chart-bar-wrap {
        min-width: 0;
      }
      .breakdown-item,
      .breakdown-item-top,
      .breakdown-item-name {
        min-width: 0;
      }
      .breakdown-item-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .kpi-card {
        min-width: 0;
      }
      /* Received-files header: sender name (.file-name-sub) still wraps rather
         than stretching the row. .file-name-text is handled separately below —
         the single-horizontal-row reference layout needs it to truncate with an
         ellipsis instead, so it is intentionally excluded from this wrap rule
         (see the conflict note further down). */
      .file-name-sub {
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
      }
      /* Conflict resolution: an earlier "wrap long names" fix put .file-name-text
         in the wrap rule above (white-space:normal), which conflicts with this
         reference image's single continuous row — a wrapped filename would grow
         the row's height and break the one-line layout. Re-override it back to
         the desktop truncate/ellipsis behavior so long filenames clip with "..."
         instead, matching the reference image and keeping the row single-line;
         .file-row > *:nth-child(1) already has min-width:0 so this can shrink. */
      .file-row .file-name-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /* Received-file card internals: the action buttons stay on one line next
         to the name block (this reference layout is a single row, not a wrapping
         card), so no flex-wrap here — .file-row's own overflow-x:auto is the
         fallback if things genuinely don't fit. */
      .file-actions-cell {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
      }
      .file-actions-cell .action-btn {
        white-space: nowrap;   /* keep each button's own label intact ... */
        padding: 7px 14px;
        font-size: .72rem;
        border-radius: 999px;
      }
      .file-row .file-type-icon {
        width: 30px;
        height: 30px;
      }
      .file-row .file-type-icon svg,
      .file-row .file-type-icon img {
        width: 18px;
        height: 18px;
      }
      .file-row .file-name-text {
        font-size: .82rem;
      }
      .file-row .file-name-sub {
        font-size: .68rem;
      }
      .file-name-cell {
        min-width: 0;          /* allow the name column to shrink and wrap */
      }
      .file-name-info {
        min-width: 0;
        flex: 1 1 auto;
      }
      .print-chips {
        max-width: 100%;
      }

      /* Mobile login screen: make the fixed centered overlay scrollable and
         safe-area aware so a tall card (short/landscape phone, on-screen
         keyboard open, or error banner showing) can always be scrolled to
         reach the Sign in button. Applies to the device-limit blocking screens
         too, since they share the same fixed-overlay pattern. */
      .login-screen,
      .device-limit-screen {
        align-items: flex-start;
        justify-content: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: max(16px, env(safe-area-inset-top)) 16px
                 max(16px, env(safe-area-inset-bottom)) 16px;
      }
      .login-card,
      .device-limit-card,
      .device-limit-card.device-limit-card-wide {
        margin: auto;              /* vertically center when it fits, top-align + scroll when it doesn't */
        max-height: none;          /* never clip the card; the overlay scrolls instead */
      }
      .login-card {
        width: 100%;
        max-width: 420px;
      }
      /* The device-name field the login form now requires is just another
         .login-input — no special rule needed, but make sure the form itself
         never forces width beyond the card. */
      #loginForm {
        width: 100%;
        min-width: 0;
      }

      /* Daily Report header: let the date-nav controls wrap onto a second line
         at phone width instead of overflowing the right edge (which the page's
         overflow-x:hidden guard would otherwise clip, cutting off the Export
         button). */
      .report-date-nav {
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 0;
      }

      /* Settings "Pricing Rates" table: the .offer-row grid (1fr 90px 90px 110px
         28px) is wider than a small phone. Let the pricing block scroll
         horizontally WITHIN the settings view instead of pushing the whole view
         wide and clipping against the viewport's right edge. The rows keep a
         sensible min-width so the columns stay usable; the scroll is confined to
         this container. */
      .settings-main,
      .settings-group {
        min-width: 0;
        max-width: 100%;
      }
      #offerPricingRows,
      .settings-group .offer-head {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .offer-head,
      .offer-row {
        min-width: 320px;
      }
    }
  
    /* Offline snapshot — a read-only "last known" surface shown only when the
       shop PC is off (Req 14.5/14.6). It replaces the dashboard the same way the
       device-limit screen does, so no live or action controls are reachable. */
    .offline-snapshot {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9500;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: var(--bg);
    }
    .offline-snapshot.show { display: flex; }
    body.offline-snapshot-active .app,
    body.offline-snapshot-active .conn-error,
    body.offline-snapshot-active .statusbar { display: none !important; }
    .offline-snapshot-card {
      width: 100%;
      max-width: 480px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: var(--shadow-lg);
      padding: 28px;
      text-align: center;
      animation: slideUp .2s ease;
    }
    .offline-snapshot-badge {
      width: 48px;
      height: 48px;
      margin: 0 auto 14px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: var(--warn-bg);
      color: var(--warn);
      border: 1px solid var(--warn-border);
    }
    .offline-snapshot-pill {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 999px;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      background: var(--warn-bg);
      color: var(--warn);
      border: 1px solid var(--warn-border);
      margin-bottom: 12px;
    }
    .offline-snapshot-title {
      font-size: 1.2rem;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--text);
      margin: 0 0 6px;
    }
    .offline-snapshot-sub {
      font-size: .84rem;
      color: var(--text-3);
      margin: 0 0 20px;
      line-height: 1.5;
    }
    .offline-snapshot-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 18px;
    }
    .offline-snapshot-metric {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 16px 10px;
    }
    .offline-snapshot-metric-label {
      font-size: .64rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--text-4);
      margin-bottom: 8px;
    }
    .offline-snapshot-metric-value {
      font-family: var(--mono);
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--text);
      word-break: break-all;
    }
    .offline-snapshot-empty {
      font-size: .86rem;
      color: var(--text-3);
      font-weight: 600;
      padding: 18px 8px;
      background: var(--bg);
      border: 1px dashed var(--border-2);
      border-radius: var(--radius-sm);
      margin-bottom: 18px;
    }
    .offline-snapshot-stamp {
      font-size: .74rem;
      color: var(--text-3);
      font-weight: 600;
      margin-bottom: 10px;
    }
    .offline-snapshot-note {
      font-size: .7rem;
      color: var(--text-4);
      line-height: 1.5;
    }
    @media (max-width: 480px) {
      .offline-snapshot-grid { grid-template-columns: 1fr; }
    }

    .pna-arrow-hint {
      color: var(--danger);
      animation: pnaBounce 1.2s ease-in-out infinite;
    }
    @keyframes pnaBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
  
    @keyframes shimmer {
      to {
        background-position: -200% 0;
      }
    }