* { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f4f9; color: #2b2b2b; display: flex; height: 100vh; overflow: hidden; }

  /* ── Sidebar ── */
  #sidebar { width: 220px; background: #1a1a2e; color: #fff; display: flex; flex-direction: column; flex-shrink: 0; }
  #sidebar .brand { padding: 20px 18px 16px; border-bottom: 1px solid #2d2d4e; }
  #sidebar .brand h1 { font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #6c5ce7; }
  #sidebar .brand p { font-size: 11px; color: #6b7280; margin-top: 2px; }
  #sidebar nav { flex: 1; padding: 10px 0; overflow-y: auto; }
  #sidebar .nav-section { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #4b5563; padding: 14px 18px 4px; text-transform: uppercase; }
  #sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 13px; color: #9ca3af; cursor: pointer; border-left: 3px solid transparent; transition: all .15s; text-decoration: none; }
  #sidebar nav a:hover { color: #fff; background: #2d2d4e; }
  #sidebar nav a.active { color: #fff; background: #2d2d4e; border-left-color: #6c5ce7; }
  #sidebar nav a .icon { font-size: 16px; width: 20px; text-align: center; }
  #sidebar .user-bar { padding: 14px 18px; border-top: 1px solid #2d2d4e; display: flex; align-items: center; gap: 10px; }
  #sidebar .user-bar .avatar { width: 30px; height: 30px; border-radius: 50%; background: #6c5ce7; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
  #sidebar .user-bar .info { flex: 1; min-width: 0; }
  #sidebar .user-bar .info .name { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #sidebar .user-bar .info .role { font-size: 10px; color: #6b7280; }
  #sidebar .user-bar .logout { color: #4b5563; cursor: pointer; font-size: 14px; }
  #sidebar .user-bar .logout:hover { color: #ef4444; }

  /* ── Main ── */
  #main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
  .topbar { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 0 24px; height: 54px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
  .topbar h2 { font-size: 16px; font-weight: 700; color: #1a1a2e; }
  .topbar .actions { display: flex; gap: 8px; }
  .content { flex: 1; overflow-y: auto; padding: 24px; }

  /* ── Screens ── */
  .screen { display: none; }
  .screen.active { display: block; }

  /* ── Cards ── */
  .card { background: #fff; border-radius: 16px; border: 1px solid #eeedf3; padding: 22px; margin-bottom: 18px; box-shadow: 0 2px 12px rgba(40,30,80,.05); }
  .card-title { font-size: 13px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }

  /* ── Buttons ── */
  .btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 11px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all .18s ease; }
  .btn:active { transform: scale(.97); }
  .btn-primary { background: #6c5ce7; color: #fff; box-shadow: 0 2px 8px rgba(169,139,106,.30); }
  .btn-primary:hover { background: #5544c9; box-shadow: 0 4px 12px rgba(169,139,106,.38); }
  .btn-secondary { background: #fff; color: #6b6a78; border: 1px solid #e7e6ee; }
  .btn-secondary:hover { background: #f6f5fb; border-color: #ddd9ef; }
  .btn-danger { background: transparent; color: #d56a6a; }
  .btn-danger:hover { background: #fbeded; color: #c25555; }
  .btn-success { background: #e7f6ef; color: #0f9d6e; }
  .btn-success:hover { background: #d4efe2; }
  .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 9px; }
  .btn-lg { padding: 13px 30px; font-size: 15px; border-radius: 13px; }
  .btn-full { width: 100%; justify-content: center; }

  /* ── Stats row ── */
  .stats-row { display: grid; gap: 14px; margin-bottom: 20px; }
  .stats-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .stats-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .stats-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .stat-card { background: #fff; border-radius: 16px; border: 1px solid #eeedf3; padding: 18px 22px; box-shadow: 0 2px 12px rgba(40,30,80,.05); }
  .stat-card .label { font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .5px; }
  .stat-card .value { font-size: 28px; font-weight: 800; color: #1a1a2e; margin: 4px 0 2px; }
  .stat-card .sub { font-size: 12px; color: #6b7280; }
  .stat-card.purple .value { color: #6c5ce7; }
  .stat-card.green .value { color: #6c5ce7; }
  .stat-card.blue .value { color: #6c5ce7; }
  .stat-card.orange .value { color: #6c5ce7; }

  /* ── Table ── */
  .table-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
  td { padding: 11px 14px; border-bottom: 1px solid #f3f4f6; color: #374151; vertical-align: middle; }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: #f9fafb; }

  /* ── Badges ── */
  .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 600; }
  .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
  .badge-purple { background: #f1eefc; color: #6d5dc4; }
  .badge-green { background: #e7f6ef; color: #0f9d6e; }
  .badge-blue { background: #e8f1fb; color: #2f6cb0; }
  .badge-gray { background: #f1f0f5; color: #6b6a78; }
  .badge-orange { background: #fbf2e3; color: #b07d2e; }
  .badge-red { background: #fbeded; color: #c25555; }

  /* ── Form ── */
  .form-row { display: grid; gap: 14px; margin-bottom: 14px; }
  .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .form-group { display: flex; flex-direction: column; gap: 5px; }
  .form-group label { font-size: 12px; font-weight: 600; color: #374151; }
  .form-group input, .form-group select, .form-group textarea { padding: 11px 14px; border: 1px solid #e3e1ec; border-radius: 11px; font-size: 13px; color: #2b2b2b; background: #fff; outline: none; transition: all .18s; }
  .form-group input:focus, .form-group select:focus { border-color: #6c5ce7; box-shadow: 0 0 0 4px #f1eefc; }
  .form-group .hint { font-size: 11px; color: #9ca3af; }

  /* ── Filter bar ── */
  .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
  .filter-bar input, .filter-bar select { padding: 10px 14px; border: 1px solid #e7e6ee; border-radius: 11px; font-size: 13px; color: #4a4858; background: #fff; outline: none; transition: all .18s; }
  .filter-bar input:focus, .filter-bar select:focus { border-color: #6c5ce7; }

  /* ── Modal ── */
  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100; align-items: center; justify-content: center; }
  .modal-overlay.open { display: flex; }
  .modal { background: #fff; border-radius: 18px; padding: 26px; width: 500px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 16px 48px rgba(40,30,80,.18); }
  .modal h3 { font-size: 16px; font-weight: 700; margin-bottom: 20px; color: #1a1a2e; }
  .modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e5e7eb; }

  /* ── Products & Variants rich view ── */
  .pv-tab { padding: 8px 2px; font-size: 14px; font-weight: 600; color: #9ca3af; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .pv-tab.pv-tab-on { color: #5544c9; border-bottom-color: #5544c9; }
  .pv-menu { position: absolute; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.14); z-index: 70; min-width: 200px; padding: 6px; }
  .pv-menu a { display: block; padding: 9px 12px; font-size: 13px; color: #374151; border-radius: 7px; cursor: pointer; }
  .pv-menu a:hover { background: #f3f4f6; }
  .pv-col { display: flex; align-items: center; gap: 9px; padding: 7px 14px; font-size: 13px; color: #374151; cursor: pointer; }
  .pv-col input { width: 16px; height: 16px; accent-color: #5544c9; cursor: pointer; }
  .pv-i { color: #5544c9; cursor: help; font-size: 12px; }

  /* ── Scan screen ── */
  .scan-wrap { max-width: 480px; margin: 0 auto; }
  .scan-card { background: #fff; border-radius: 14px; border: 1px solid #e5e7eb; padding: 24px; margin-bottom: 14px; }
  .scan-field-wrap { border: 2px dashed #a5b4fc; border-radius: 10px; padding: 20px; text-align: center; margin-bottom: 14px; }
  .scan-field-wrap .icon { font-size: 28px; margin-bottom: 6px; }
  .scan-field-wrap p { font-size: 12px; color: #9ca3af; margin-top: 6px; }
  .scan-field-wrap input { width: 100%; border: 1px solid #e5e7eb; border-radius: 7px; padding: 10px 14px; font-size: 14px; text-align: center; outline: none; margin-top: 10px; }
  .scan-field-wrap input:focus { border-color: #6c5ce7; box-shadow: 0 0 0 3px #ecebfb; }
  .qty-row { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 16px 0; }
  .qty-btn { width: 40px; height: 40px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #374151; }
  .qty-btn:hover { background: #f3f4f6; }
  .qty-val { font-size: 32px; font-weight: 800; color: #1a1a2e; min-width: 50px; text-align: center; }
  .qty-label { font-size: 12px; color: #9ca3af; text-align: center; }
  /* Barcode lookup result */
  .barcode-result { display: none; margin-top: 10px; padding: 10px 14px; background: #f5f4f9; border: 1px solid #bbf7d0; border-radius: 8px; }
  .barcode-result.found { display: flex; align-items: center; gap: 10px; }
  .barcode-result.not-found { display: flex; align-items: center; gap: 10px; background: #fef2f2; border-color: #fecaca; }
  .barcode-result .br-icon { font-size: 20px; }
  .barcode-result .br-info .br-name { font-size: 14px; font-weight: 700; color: #1a1a2e; }
  .barcode-result .br-info .br-meta { font-size: 12px; color: #6b7280; margin-top: 1px; }

  .cut-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #e5e7eb; border-radius: 10px; cursor: pointer; }
  .cut-row input[type=checkbox] { width: 18px; height: 18px; accent-color: #6c5ce7; cursor: pointer; }
  .cut-row label { font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; }
  .counters-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .counter-box { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px; text-align: center; }
  .counter-box.highlight { background: #f5f4f9; border-color: #bbf7d0; }
  .counter-box .num { font-size: 36px; font-weight: 800; color: #1a1a2e; }
  .counter-box .lbl { font-size: 12px; color: #6b7280; margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 5px; }

  /* ── Inventory multi-location ── */
  .inv-table th, .inv-table td { text-align: center; }
  .inv-table th:first-child, .inv-table td:first-child { text-align: left; }
  .inv-total { font-weight: 700; color: #1a1a2e; }
  .inv-reserved { font-size: 11px; color: #9ca3af; }
  .inv-available { color: #5544c9; font-weight: 600; }

  /* ── Tailor history ── */
  .day-group { margin-bottom: 20px; }
  .day-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #f3f4f6; border-radius: 8px; margin-bottom: 1px; cursor: pointer; }
  .day-header .day-title { font-size: 13px; font-weight: 700; color: #374151; }
  .day-header .day-total { font-size: 12px; font-weight: 600; color: #6c5ce7; }

  /* ── Login ── */
  #login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #1a1a2e; position: fixed; inset: 0; z-index: 200; }
  .login-box { background: #fff; border-radius: 16px; padding: 40px 36px; width: 380px; }
  .login-box h1 { font-size: 20px; font-weight: 800; color: #1a1a2e; margin-bottom: 4px; }
  .login-box p { font-size: 13px; color: #6b7280; margin-bottom: 28px; }
  .login-box .form-group { margin-bottom: 14px; }
  .login-error { background: #fee2e2; color: #dc2626; padding: 10px 14px; border-radius: 7px; font-size: 13px; margin-bottom: 14px; display: none; }

  /* ── Toast ── */
  #toast { position: fixed; bottom: 24px; right: 24px; background: #2b2b2b; color: #fff; padding: 13px 22px; border-radius: 14px; font-size: 13px; font-weight: 600; z-index: 300; opacity: 0; transform: translateY(10px); transition: all .25s; pointer-events: none; box-shadow: 0 8px 28px rgba(40,30,80,.28); }
  #toast.show { opacity: 1; transform: translateY(0); }

  /* ── Settings ── */
  .settings-section { background:#fff; border:1px solid #eeedf3; border-radius:16px; padding:24px 26px; margin-bottom:18px; box-shadow: 0 2px 12px rgba(40,30,80,.05); }
  .settings-section h3 { font-size:14px; font-weight:700; color:#1a1a2e; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid #f3f4f6; display:flex; align-items:center; gap:8px; }
  .setting-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid #f9fafb; }
  .setting-row:last-child { border-bottom:none; padding-bottom:0; }
  .setting-info { flex:1; }
  .setting-info .s-label { font-size:13px; font-weight:600; color:#1a1a2e; }
  .setting-info .s-desc { font-size:12px; color:#6b7280; margin-top:2px; }
  .setting-info .s-warn { font-size:11px; color:#5544c9; margin-top:3px; font-weight:600; }
  .toggle-wrap { display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .toggle { position:relative; width:44px; height:24px; cursor:pointer; }
  .toggle input { opacity:0; width:0; height:0; }
  .toggle-slider { position:absolute; inset:0; background:#d1d5db; border-radius:24px; transition:.2s; }
  .toggle-slider:before { content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
  .toggle input:checked + .toggle-slider { background:#6c5ce7; }
  .toggle input:checked + .toggle-slider:before { transform:translateX(20px); }
  .toggle.danger input:checked + .toggle-slider { background:#ef4444; }
  .setting-input { padding:7px 12px; border:1px solid #e5e7eb; border-radius:7px; font-size:13px; width:160px; outline:none; }
  .setting-input:focus { border-color:#6c5ce7; }
  .settings-footer { display:flex; justify-content:flex-end; margin-top:4px; }

  /* ── Column picker ── */
  .col-picker-wrap { position:relative; }
  .col-picker-dropdown { display:none; position:absolute; right:0; top:36px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:14px 16px; width:220px; z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.1); }
  .col-picker-dropdown.open { display:block; }
  .col-picker-dropdown h4 { font-size:11px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
  .col-option { display:flex; align-items:center; gap:8px; padding:5px 0; cursor:pointer; }
  .col-option input[type=checkbox] { accent-color:#6c5ce7; width:15px; height:15px; cursor:pointer; }
  .col-option label { font-size:13px; color:#374151; cursor:pointer; }
  .col-picker-dropdown .btn { margin-top:10px; width:100%; justify-content:center; }

  /* ── Multi-select ── */
  .ms-wrap { position:relative; }
  .ms-tags { display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;min-height:42px;cursor:text;background:#fff;align-items:center; }
  .ms-tags:focus-within { border-color:#6c5ce7;box-shadow:0 0 0 3px #ecebfb; }
  .ms-tag { display:inline-flex;align-items:center;gap:5px;background:#ecebfb;color:#5544c9;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:600; }
  .ms-tag button { background:none;border:none;cursor:pointer;color:#6c5ce7;font-size:14px;line-height:1;padding:0; }
  .ms-tag button:hover { color:#5544c9; }
  .ms-search { border:none;outline:none;font-size:13px;min-width:120px;flex:1;padding:2px 4px; }
  .ms-dropdown { display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.1);z-index:100;max-height:220px;overflow-y:auto;margin-top:4px; }
  .ms-dropdown.open { display:block; }
  .ms-option { padding:9px 14px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:space-between; }
  .ms-option:hover,.ms-option.selected { background:#f5f4f9; }
  .ms-option.selected { color:#5544c9;font-weight:600; }
  .ms-option .ms-opt-sku { font-size:11px;color:#9ca3af; }
  .ms-option .ms-opt-stock { font-size:11px;font-weight:600;color:#6c5ce7; }

  /* ── Misc ── */
  .empty { text-align: center; padding: 48px; color: #9ca3af; font-size: 14px; }
  .empty .icon { font-size: 36px; margin-bottom: 10px; }
  .text-muted { color: #9ca3af; font-size: 12px; }
  .mt-2 { margin-top: 8px; }
  .flex { display: flex; }
  .items-center { align-items: center; }
  .gap-2 { gap: 8px; }
  .justify-between { justify-content: space-between; }
  .chip { display: inline-flex; align-items: center; padding: 3px 10px; background: #ecebfb; color: #5544c9; border-radius: 20px; font-size: 11px; font-weight: 700; }