:root{--bg:#f3f4f6;--text:#1f2937;--panel:#ffffff;--panel-border:#d1d5db;--muted:#6b7280;--input-bg:#fff;--input-border:#cbd5e1}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Arial,sans-serif;background:var(--bg);margin:0;color:var(--text)}
body[data-theme='dark']{--bg:#0f0f10;--text:#e5e7eb;--panel:#171717;--panel-border:#2a2a2b;--muted:#9ca3af;--input-bg:#202022;--input-border:#3f3f46}
.container{max-width:1100px;margin:0 auto;padding:20px}
.topbar{display:flex;justify-content:space-between;align-items:center;position:relative;gap:12px}
.brand-link{color:var(--text);text-decoration:none}
.brand-link h1{margin:12px 0}
.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mobile-settings-menu{display:none;position:relative}
.icon-btn{border:1px solid var(--panel-border);background:var(--panel);color:var(--text);border-radius:999px;width:40px;height:40px;cursor:pointer}
.mobile-settings-panel{position:absolute;right:0;top:46px;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:190px;z-index:20;box-shadow:0 10px 24px rgba(0,0,0,.16)}
.menu-link{color:var(--text);text-decoration:none;padding:6px 0}
.mobile-lang-form{display:flex;flex-direction:column;gap:5px}
.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:14px;margin-bottom:12px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:10px}
.btn{border:none;border-radius:8px;padding:8px 12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font:inherit}
.btn.primary{background:#2563eb;color:#fff}
.btn.secondary{background:#e2e8f0;color:#111}
body[data-theme='dark'] .btn.secondary{background:#2f2f35;color:#f3f4f6}
.btn.success{background:#16a34a;color:#fff}
.btn.warning{background:#f59e0b;color:#fff}
.return-btn{background:#dc2626;color:#fff}
.btn.disabled{opacity:.45;cursor:not-allowed}
.flash{padding:10px;border-radius:8px}
.flash.success{background:#dcfce7;color:#14532d}
.flash.error{background:#fee2e2;color:#7f1d1d}
body[data-theme='dark'] .flash.success{background:#12351f;color:#bbf7d0}
body[data-theme='dark'] .flash.error{background:#3f1717;color:#fecaca}
.flash-wrap{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.inline-form{display:inline}
.narrow{max-width:420px;margin:40px auto}
input,select{padding:9px;border:1px solid var(--input-border);border-radius:8px;background:var(--input-bg);color:var(--text)}
table{width:100%;border-collapse:collapse}
td,th{border-bottom:1px solid var(--panel-border);padding:8px;text-align:left;vertical-align:middle}
th{font-size:.86rem;color:var(--muted)}
.barcode-value{font-weight:700;font-size:18px}
.history-barcode{font-size:15px}
.muted{color:var(--muted)}
.hidden{display:none!important}
.empty-state{text-align:center;color:var(--muted);padding:22px}

.smart-scan-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.scan-status{font-size:.95rem}
.scan-status.success{color:#22c55e}
.scan-status.error{color:#ef4444}
.scan-status.warning{color:#f59e0b}
.camera-wrapper{position:relative;width:100%;max-width:720px;background:#121214;border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.camera-wrapper video{width:100%;height:100%;object-fit:cover;display:block}
.scan-overlay{position:absolute;inset:0;pointer-events:none}
.scan-mask{position:absolute;background:rgba(10,10,11,.46);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.scan-mask.top{left:0;top:0;width:100%;height:24%}
.scan-mask.bottom{left:0;bottom:0;width:100%;height:28%}
.scan-mask.left{left:0;top:24%;width:12%;height:48%}
.scan-mask.right{right:0;top:24%;width:12%;height:48%}
.scan-rect{position:absolute;left:12%;top:24%;width:76%;height:48%;border:3px solid rgba(34,197,94,.95);border-radius:16px;box-shadow:0 0 0 1px rgba(10,10,11,.22) inset;pointer-events:none}

.courier-pill,.status-pill{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid rgba(15,23,42,.16);color:#fff;font-weight:600;font-size:.83rem;line-height:1.2;white-space:nowrap}
.courier-pill{background:var(--courier-color,#64748b)}
.status-in_store{background:#2563eb}
.status-picked_up{background:#16a34a}
.status-ready_for_return{background:#dc2626}
.status-returned{background:#7c3aed}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px}
.stat-card{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--panel-border);border-radius:12px;background:#f8fbff;color:var(--text);text-decoration:none}
body[data-theme='dark'] .stat-card{background:#1f1f22}
.stat-card strong{font-size:1.4rem}
.settings-content{padding-top:10px}
.settings-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.settings-theme-row{align-items:center;justify-content:space-between}
.quick-filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.chip-filter{border:1px solid var(--panel-border);background:var(--panel);color:var(--text);padding:5px 10px;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-block}
.chip-filter.active{background:#2563eb;color:#fff;border-color:#2563eb}
.search-input-wrap{position:relative;max-width:420px;margin-bottom:8px}
.search-input-wrap input{width:100%;padding-right:36px}
.search-clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer;padding:4px;border-radius:6px}
.search-clear-btn:hover{background:#e5e7eb;color:var(--text)}
body[data-theme='dark'] .search-clear-btn:hover{background:#2f2f35}

.row-menu-cell{position:relative;width:42px}
.icon-menu-btn{border:1px solid var(--panel-border);background:var(--panel);color:var(--text);border-radius:8px;width:30px;height:30px;line-height:1;cursor:pointer}
.row-overflow-menu{position:absolute;left:34px;top:4px;z-index:15;display:flex;flex-direction:column;min-width:140px;border:1px solid var(--panel-border);background:var(--panel);border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.15);padding:4px}
.row-menu-item{border:none;background:transparent;color:var(--text);text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer}
.row-menu-item:hover{background:#e5e7eb}
body[data-theme='dark'] .row-menu-item:hover{background:#2f2f35}
.row-menu-item.danger{color:#dc2626}
.age-cell{min-width:112px}
.age-cell strong{display:block;font-size:.95rem}
.age-cell small{display:block;color:var(--muted);font-size:.73rem;margin-top:2px;white-space:nowrap}

.btn-small{padding:6px 10px;font-size:.85rem;min-height:34px}
.modal{position:fixed;inset:0;background:rgba(15,15,16,.56);display:flex;align-items:center;justify-content:center;padding:14px;z-index:50}
.modal-card{width:min(520px,100%);background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:14px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.settings-panel{padding-top:10px}
.settings-topbar{display:flex;justify-content:flex-start;margin-bottom:8px}
.back-btn{font-size:.85rem;padding:6px 10px;min-height:34px;background:transparent;border:1px solid var(--panel-border);color:var(--muted)}
.settings-heading{display:flex;justify-content:flex-start;align-items:center;gap:12px;flex-wrap:wrap}
.settings-theme-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.theme-switch{width:54px;height:30px;border:none;border-radius:999px;background:#d1d5db;position:relative;cursor:pointer;padding:0;transition:background .2s ease}
.theme-switch .switch-knob{position:absolute;top:3px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s ease}
.theme-switch[aria-checked='true']{background:#22c55e}
.theme-switch[aria-checked='true'] .switch-knob{transform:translateX(22px)}
body[data-theme='dark'] .theme-switch{background:#3f3f46}

.history-header{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.history-header h2{margin-bottom:4px}
.history-subtitle{margin:0}
.history-filter-group{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.history-filter-group:last-child{margin-bottom:0}
.filter-chips{display:flex;gap:6px;flex-wrap:wrap}
.history-table-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.history-action{background:#64748b}
.action-added{background:#2563eb}
.action-picked_up{background:#16a34a}
.action-returned{background:#7c3aed}
.action-deleted{background:#dc2626}
.action-edited{background:#f59e0b}
.action-returned_to_store{background:#0891b2}
.pagination{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.back-to-top{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border:none;border-radius:50%;background:#2563eb;color:#fff;font-size:24px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.22);z-index:40}

@media (max-width:768px){
  .container{padding:12px}
  .topbar{align-items:center;gap:8px}
  .topbar h1{font-size:1.15rem;margin:6px 0}
  .desktop-actions{display:none}
  .mobile-settings-menu{display:block}
  .panel{padding:12px}
  .panel h2{margin:4px 0 10px;font-size:1.05rem}
  .row{gap:10px}
  .row input,.row select,.row button{width:100%;min-height:44px;font-size:16px}
  .btn{min-height:44px;padding:10px 12px}
  .smart-scan-controls{display:grid;grid-template-columns:minmax(130px,170px) 1fr;align-items:center}
  .camera-wrapper{max-width:none;aspect-ratio:3/4}
  .scan-mask.top{height:27%}
  .scan-mask.bottom{height:31%}
  .scan-mask.left{top:27%;width:7%;height:42%}
  .scan-mask.right{top:27%;width:7%;height:42%}
  .scan-rect{left:7%;width:86%;top:27%;height:42%}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{white-space:nowrap}
  .stats-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .row-overflow-menu{left:2px;top:34px}
  .settings-theme-row{align-items:center}
  .back-btn{min-height:32px}
  .history-header .btn{width:100%}
  .back-to-top{right:14px;bottom:14px;width:42px;height:42px}
}