:root{
  --bg:#f6f7fa;
  --panel:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --primary:#2563eb;
  --primary-ink:#ffffff;
  --ok:#10b981;
  --warn:#f59e0b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.6;color:var(--ink);background:var(--bg)}
a{color:#2563eb;text-decoration:none}
a:hover{text-decoration:underline}

/* Full width as requested */
.container{
  width:100%;
  max-width:none;
  margin:0 auto;
  padding:18px;
}

.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.brand{font-weight:800;font-size:18px;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:9999px;background:var(--primary);display:inline-block}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.table-wrap{overflow:auto;border-radius:12px;margin-top:10px}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{font-weight:700;color:#111827;text-align:left;padding:10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:1}
tbody td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:hover{background:#fafafa}

th.w-xxs{width:32px}
th.w-xs{width:64px}
th.w-sm{width:110px}
th.w-md{width:180px}

.label{font-size:12px;color:var(--muted);margin-bottom:6px}
.input, select, textarea{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--ink);outline:none}
.input:focus, select:focus, textarea:focus{box-shadow:0 0 0 3px rgba(37,99,235,.25);border-color:#c7d2fe}

.toolbar{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;align-items:end}
.toolbar .cell-3{grid-column:span 3}
.toolbar .cell-1{grid-column:span 1}
.toolbar .right{display:flex;gap:8px;justify-content:flex-end;grid-column:9 / -1}

.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--ink);cursor:pointer}
.btn:hover{background:#f9fafb}
.btn-primary{background:var(--primary);color:var(--primary-ink);border-color:transparent}
.btn-primary:hover{opacity:.95}
.btn-ok{background:#dcfce7;color:#065f46;border-color:#bbf7d0}
.btn-mini{padding:7px 10px}

.badge{padding:2px 8px;border-radius:9999px;border:1px solid #d1d5db;background:#f3f4f6;color:#374151;font-size:12px}
.row-storage td .badge{background:#d1fae5;border-color:#a7f3d0;color:#065f46}
.row-packing td .badge{background:#fef3c7;border-color:#fde68a;color:#92400e}
.row-shipped td .badge{background:#e5e7eb;border-color:#d1d5db;color:#374151}
.badge-free{background:#d1fae5;border:1px solid #a7f3d0;color:#065f46;padding:2px 8px;border-radius:9999px;margin-left:6px;font-size:12px}

.seg-summary{margin:10px 0 0;display:flex;gap:10px;flex-wrap:wrap;color:#374151}
.seg-pill{background:#fff;border:1px solid var(--border);border-radius:9999px;padding:6px 10px}

.img-thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--border);cursor:zoom-in}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:1000}
.modal img{max-width:92vw;max-height:92vh;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.modal.show{display:flex}

.footer{padding:22px 8px;color:#6b7280;text-align:center}

@media (max-width:1100px){
  .toolbar{grid-template-columns:repeat(6,1fr)}
  .toolbar .right{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:720px){
  .toolbar{grid-template-columns:1fr}
}