/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --black:   #0A0A0A;
  --ink:     #1A1A1A;
  --ink2:    #4A4A4A;
  --ink3:    #909090;
  --rule:    #E5E5E5;
  --rule2:   #D0D0D0;
  --bg:      #F7F7F5;
  --w:       #FFFFFF;
  --panel:   #F2F2F0;

  --blue:    #0066FF;
  --blue2:   #0052CC;
  --blueb:   #EBF2FF;
  --green:   #00875A;
  --greenb:  #E3FCEF;
  --red:     #DE350B;
  --redb:    #FFEBE6;
  --amber:   #974F0C;
  --amberb:  #FFF4E5;

  --sans: 'Sora', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --th:   58px;
  --r:    6px;
  --r2:   10px;
  --r3:   16px;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; }
body { font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,select,textarea {
  font-family:var(--mono); font-size:13px; color:var(--ink);
  background:var(--w); border:1.5px solid var(--rule2); border-radius:var(--r);
  padding:10px 13px; outline:none; width:100%;
  transition:border-color .14s, box-shadow .14s;
}
input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,102,255,.1); }
input::placeholder,textarea::placeholder { color:var(--ink3); }
select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23909090' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
}
textarea { resize:vertical; line-height:1.5; }
a { color:inherit; text-decoration:none; }

/* ── Topbar ───────────────────────────────────────────────────────────────── */
#topbar {
  height:var(--th);
  background:var(--w);
  border-bottom:1.5px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  position:sticky; top:0; z-index:100;
  box-shadow:0 1px 0 var(--rule);
}
.tb-left  { display:flex; align-items:center; gap:32px; }
.tb-right { display:flex; align-items:center; gap:12px; }
.tb-logo  { display:flex; align-items:center; gap:9px; }
.tb-mark  { width:30px; height:30px; background:var(--blue); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; font-weight:800; flex-shrink:0; }
.tb-name  { font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }

.tb-nav  { display:flex; gap:2px; }
.tn {
  display:block; padding:7px 14px; border-radius:6px;
  font-size:13px; font-weight:500; color:var(--ink3);
  transition:all .12s;
}
.tn:hover  { color:var(--ink); background:var(--panel); }
.tn.active { color:var(--blue); background:var(--blueb); font-weight:600; }

.agent-badge {
  display:flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:99px;
  border:1.5px solid var(--rule); background:var(--panel);
}
.ab-dot { width:7px; height:7px; border-radius:50%; background:var(--rule2); transition:background .3s; }
.agent-badge.live .ab-dot { background:var(--green); box-shadow:0 0 0 3px var(--greenb); }
.ab-label { font-size:11px; font-weight:600; color:var(--ink3); }
.agent-badge.live .ab-label { color:var(--green); }

/* ── Stage ────────────────────────────────────────────────────────────────── */
#stage { height:calc(100vh - var(--th)); overflow:hidden; }

/* ── LISTING WIZARD ───────────────────────────────────────────────────────── */
.wizard {
  height:100%;
  display:grid;
  grid-template-columns:1fr 320px;
  grid-template-rows:1fr auto;
}
.wiz-main  { grid-column:1; grid-row:1; overflow-y:auto; display:flex; flex-direction:column; }
.wiz-side  { grid-column:2; grid-row:1/3; background:var(--panel); border-left:1.5px solid var(--rule); overflow-y:auto; padding:28px 22px; display:flex; flex-direction:column; gap:16px; }
.wiz-foot  { grid-column:1; grid-row:2; background:var(--w); border-top:1.5px solid var(--rule); padding:16px 40px; display:flex; align-items:center; gap:12px; }

/* ── Slide area ───────────────────────────────────────────────────────────── */
.wiz-slides { flex:1; position:relative; }
.wiz-slide  { position:absolute; inset:0; overflow-y:auto; padding:40px 48px 40px; opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .22s, transform .22s; display:flex; flex-direction:column; align-items:flex-start; }
.wiz-slide > * { width:100%; max-width:600px; }
.wiz-slide.active { opacity:1; pointer-events:all; transform:translateY(0); }

/* Dual-panel layout — shared by defect question slides and zone slides */
.wiz-slide.zone-slide,
.wiz-slide.defect-slide {
  display:grid;
  grid-template-columns:300px 1fr;
  grid-template-rows:1fr;
  gap:0;
  padding:0;
  align-items:stretch;
}
.zone-slide-info,
.defect-slide-info {
  padding:48px 36px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-right:1.5px solid var(--rule);
  background:var(--w);
}
.zone-slide-grid {
  padding:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  margin-left:auto;
  margin-right:auto;
}
.defect-slide-answers {
  padding:40px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:transparent;
  overflow-y:auto;
  margin-left:auto;
  margin-right:auto;
}

/* ── Step counter strip ───────────────────────────────────────────────────── */
.wiz-strip {
  height:4px; background:var(--rule); flex-shrink:0;
  display:flex; gap:3px; overflow:hidden;
}
.ws-seg { flex:1; background:var(--rule); transition:background .25s; }
.ws-seg.done { background:var(--green); }
.ws-seg.cur  { background:var(--blue); }

/* ── Slide content ────────────────────────────────────────────────────────── */
.sl-header { display:flex; align-items:flex-start; gap:24px; margin-bottom:40px; }
.sl-num {
  width:58px; height:58px; border-radius:16px; background:var(--blue); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; color:#fff; letter-spacing:-.02em;
  box-shadow:0 6px 18px rgba(0,102,255,.28);
}
.sl-num.done { background:var(--green); box-shadow:0 6px 18px rgba(0,135,90,.22); }
.sl-header-text { padding-top:4px; }
.sl-step   { font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); margin-bottom:8px; }
.sl-title  { font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1.08; margin-bottom:8px; color:var(--ink); }
.sl-sub    { font-size:15px; color:var(--ink2); line-height:1.55; }

/* ── Serial display ───────────────────────────────────────────────────────── */
.serial-display {
  display:flex; align-items:center; gap:16px;
  padding:22px 28px; border-radius:var(--r2);
  background:transparent; border:2px solid var(--rule2);
  width:100%; max-width:520px; margin:0 auto;
}
.sd-dot { width:12px; height:12px; border-radius:50%; background:var(--rule2); flex-shrink:0; transition:background .3s; }
.sd-dot.wait { animation:pulse 1.4s ease-in-out infinite; }
.sd-dot.found { background:var(--green); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.15} }
.sd-serial { font-family:var(--mono); font-size:20px; letter-spacing:.12em; flex:1; color:var(--ink3); }
.sd-serial.found { color:var(--ink); font-weight:600; }
.sd-tag {
  font-family:var(--mono); font-size:11px; font-weight:700;
  padding:4px 12px; border-radius:99px; border:1.5px solid var(--rule2); color:var(--ink3);
}
.sd-tag.found { border-color:var(--green); color:var(--green); background:var(--greenb); }

/* ── Device confirm strip ─────────────────────────────────────────────────── */
.device-strip {
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  padding:22px 28px; border-radius:var(--r2);
  background:transparent; border:2px solid var(--rule2);
  width:100%; max-width:520px; margin:0 auto;
}
.ds-name    { font-size:18px; font-weight:800; }
.ds-storage { padding:3px 11px; border-radius:99px; font-family:var(--mono); font-size:12px; font-weight:700; background:var(--greenb); color:var(--green); border:1.5px solid var(--green); }
.ds-sp      { flex:1; }
.color-btn  {
  padding:6px 16px; border-radius:99px; font-size:12px; font-weight:600;
  border:1.5px solid var(--rule2); background:var(--w); color:var(--ink2); cursor:pointer; transition:all .12s;
}
.color-btn:hover { border-color:var(--rule2); color:var(--ink); }
.color-btn.on    { border-color:var(--blue); background:var(--blueb); color:var(--blue); font-weight:700; }
.ds-change  { font-size:12px; color:var(--ink3); cursor:pointer; background:none; border:none; font-family:var(--sans); text-decoration:underline; text-underline-offset:3px; }

/* ── Device slide ─────────────────────────────────────────────────────────── */
.wiz-slide.device-slide {
  display:grid;
  grid-template-columns:300px 1fr;
  grid-template-rows:1fr;
  gap:0;
  padding:0;
  align-items:stretch;
}
.device-slide-info {
  padding:48px 36px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-right:1.5px solid var(--rule);
  background:var(--w);
}
.device-slide-content {
  padding:48px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow-y:auto;
  margin-left:auto;
  margin-right:auto;
  gap:32px;
}

/* Device name card — looks like a confirmed record */
.device-confirmed-card {
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:20px 24px;
  border-radius:12px;
  border:1.5px solid var(--rule);
  background:var(--w);
}
.device-confirmed-icon {
  width:40px; height:40px; border-radius:10px;
  background:var(--blueb); border:1.5px solid var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0; color:var(--blue);
}
.device-confirmed-body { flex:1; min-width:0; }
.device-name {
  font-size:16px; font-weight:700; color:var(--ink);
  margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.device-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ds-change {
  font-size:12px; color:var(--blue); cursor:pointer; background:none; border:none;
  font-family:var(--sans); font-weight:600; padding:0; text-decoration:none;
  opacity:.75; transition:opacity .12s;
}
.ds-change:hover { opacity:1; }

/* Color picker section */
.device-section-label {
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink3); margin-bottom:14px;
}
.color-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
  gap:10px;
}
.color-tile {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 10px; border-radius:10px;
  border:2px solid var(--rule); background:var(--w);
  cursor:pointer; transition:all .14s; user-select:none;
}
.color-tile:hover { border-color:var(--rule2); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.color-tile.on {
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,102,255,.12), 0 2px 8px rgba(0,102,255,.15);
}
.color-tile-swatch {
  width:48px; height:48px; border-radius:50%;
  border:2px solid rgba(0,0,0,.1);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  flex-shrink:0;
}
.color-tile-name {
  font-size:12px; font-weight:600; color:var(--ink2);
  text-align:center; line-height:1.2;
}
.color-tile.on .color-tile-name { color:var(--blue); font-weight:700; }

/* ── Answer cards ─────────────────────────────────────────────────────────── */
.answer-grid { display:flex; flex-direction:column; gap:10px; width:100%; max-width:520px; margin:0 auto; }
.answer-card {
  display:flex; align-items:center; gap:20px;
  padding:20px 24px; border-radius:var(--r2);
  border:2px solid var(--rule2); background:var(--w);
  cursor:pointer; transition:border-color .13s, background .13s, box-shadow .13s;
  user-select:none;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.answer-card:hover {
  border-color:var(--ink3);
  background:var(--w);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.answer-card.on {
  border-color:var(--blue); background:var(--w);
  box-shadow:0 2px 12px rgba(0,102,255,.18);
}
.answer-card.on.damage {
  border-color:var(--red); background:var(--w);
  box-shadow:0 2px 12px rgba(222,53,11,.18);
}
.ac-radio {
  width:28px; height:28px; border-radius:50%; border:2px solid var(--rule2); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.answer-card.on .ac-radio         { border-color:var(--blue); background:var(--blue); }
.answer-card.on.damage .ac-radio  { border-color:var(--red);  background:var(--red);  }
.ac-radio::after { content:''; width:10px; height:10px; border-radius:50%; background:#fff; opacity:0; transition:opacity .1s; }
.answer-card.on .ac-radio::after  { opacity:1; }
.ac-text  { flex:1; }
.ac-label { font-size:17px; font-weight:700; letter-spacing:-.01em; }
.ac-sub   { font-size:13px; color:var(--ink3); margin-top:4px; line-height:1.4; }
.answer-card.on .ac-sub           { color:var(--blue); opacity:.8; }
.answer-card.on.damage .ac-label  { color:var(--red); }
.answer-card.on.damage .ac-sub    { color:var(--red); opacity:.7; }

/* Multi-select — checkbox radio */
.answer-card.multi .ac-radio { border-radius:7px; }
.answer-card.multi.on .ac-radio        { background:var(--blue); border-color:var(--blue); }
.answer-card.multi.on.damage .ac-radio { background:var(--red);  border-color:var(--red);  }
.answer-card.multi.on .ac-radio::after { content:'✓'; font-size:13px; font-weight:800; border-radius:0; width:auto; height:auto; background:transparent; color:#fff; }


/* ── Color cards ──────────────────────────────────────────────────────────── */
.color-cards { display:flex; flex-wrap:wrap; gap:12px; width:100%; max-width:520px; margin:0 auto; }
.color-card {
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-radius:var(--r2);
  border:2px solid var(--rule); background:var(--w);
  cursor:pointer; transition:all .15s; user-select:none;
  min-width:160px; flex:0 0 auto;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.color-card:hover { border-color:var(--rule2); box-shadow:0 3px 10px rgba(0,0,0,.08); transform:translateY(-1px); }
.color-card.on    { border-color:var(--blue); background:var(--w); box-shadow:0 4px 14px rgba(0,102,255,.18); transform:translateY(-1px); }
.color-swatch {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  border:1.5px solid rgba(0,0,0,.15);
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.color-card-name { font-size:14px; font-weight:700; color:var(--ink); flex:1; }
.color-card.on .color-card-name { color:var(--blue); }
.color-card-check {
  width:22px; height:22px; border-radius:50%; border:2px solid var(--rule2);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.color-card.on .color-card-check { background:var(--blue); border-color:var(--blue); color:#fff; font-size:12px; font-weight:800; }
.color-card.on .color-card-check::after { content:'✓'; }

/* ── Zone grid ────────────────────────────────────────────────────────────── */
.zone-section { margin-top:0; padding-top:0; border-top:none; }
.zone-title   { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin-bottom:14px; }
.zone-sub     { font-size:13px; color:var(--ink3); margin-bottom:0; }
.zone-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:10px;
  width:min(100%,calc(100vh - var(--th) - 120px));
  max-width:min(100%,calc(100vh - var(--th) - 120px));
  aspect-ratio:1;
  margin:0 auto;
}
.zb {
  padding:0; border-radius:var(--r2); border:2px solid var(--rule);
  background:var(--w); font-size:13px; font-weight:600; color:var(--ink3);
  cursor:pointer; text-align:center; white-space:pre-line; line-height:1.4;
  transition:all .12s; user-select:none;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  display:flex; align-items:center; justify-content:center;
}
.zb:hover  { border-color:var(--rule2); color:var(--ink2); background:var(--panel); }
.zb.on     { border-color:var(--red); background:var(--redb); color:var(--red); font-weight:700; box-shadow:0 2px 8px rgba(222,53,11,.15); }
.zb.spacer { border:2px dashed var(--rule); background:transparent; pointer-events:none; box-shadow:none; opacity:.35; }

/* ── Photos ───────────────────────────────────────────────────────────────── */
.photo-tray { display:flex; flex-wrap:wrap; gap:10px; }
.photo-thumb {
  width:120px; height:120px; border-radius:var(--r2); overflow:hidden;
  border:1.5px solid var(--rule); position:relative; cursor:grab; flex-shrink:0;
}
.photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.photo-thumb .del-ph {
  position:absolute; top:5px; right:5px; width:24px; height:24px; border-radius:50%;
  background:rgba(255,255,255,.95); color:var(--red);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; opacity:0; transition:opacity .12s;
}
.photo-thumb:hover .del-ph { opacity:1; }
.photo-thumb.drag-over { border-color:var(--blue); opacity:.6; }
.add-photo {
  width:120px; height:120px; border-radius:var(--r2); border:2px dashed var(--rule2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; cursor:pointer; flex-shrink:0; color:var(--ink3);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  transition:all .14s;
}
.add-photo:hover { border-color:var(--blue); color:var(--blue); background:var(--blueb); }
.add-photo-plus  { font-size:24px; }

/* ── Side panel (dark) ────────────────────────────────────────────────────── */
.side-label { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); margin-bottom:14px; }
.side-row   { display:flex; justify-content:space-between; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--rule); gap:12px; }
.sr-key     { font-size:12px; color:var(--ink3); flex-shrink:0; font-weight:500; }
.sr-val     { font-size:12px; font-weight:700; color:var(--ink); text-align:right; font-family:var(--mono); word-break:break-all; }
.sr-val.empty { color:var(--ink3); font-weight:400; font-family:var(--sans); font-style:italic; }

/* SKU display on success */
.sku-display {
  background:var(--greenb); border:1.5px solid var(--green);
  border-radius:var(--r2); padding:16px 20px; margin-top:8px; text-align:center;
}
.sku-label { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); opacity:.7; margin-bottom:6px; }
.sku-val   { font-family:var(--mono); font-size:28px; font-weight:800; color:var(--green); letter-spacing:.06em; }

/* ── Wizard footer ────────────────────────────────────────────────────────── */
.wiz-counter { font-family:var(--mono); font-size:12px; color:var(--ink3); flex:1; text-align:center; }
.wiz-req     { font-size:12px; color:var(--red); font-weight:500; flex:1; text-align:center; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 22px; border-radius:var(--r); font-family:var(--sans);
  font-size:13px; font-weight:600; letter-spacing:-.01em;
  transition:opacity .12s, transform .08s; white-space:nowrap; cursor:pointer; border:none;
}
.btn:active  { transform:scale(.97); }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue2); }
.btn-primary:disabled { background:var(--rule); color:var(--ink3); pointer-events:none; }
.btn-outline { background:var(--w); color:var(--ink); border:1.5px solid var(--rule2); }
.btn-outline:hover { background:var(--panel); }
.btn-ghost   { background:transparent; color:var(--ink2); }
.btn-ghost:hover { background:var(--panel); color:var(--ink); }
.btn-red     { background:transparent; color:var(--red); border:1.5px solid var(--red); }
.btn-red:hover { background:var(--redb); }
.btn-green   { background:var(--green); color:#fff; }
.btn-sm  { padding:6px 14px; font-size:12px; }
.btn-lg  { padding:13px 28px; font-size:15px; font-weight:700; }
.btn-full { width:100%; justify-content:center; }

/* ── SETUP PAGE ───────────────────────────────────────────────────────────── */
.setup-page { height:calc(100vh - var(--th)); overflow-y:auto; background:var(--bg); }
.setup-wrap { max-width:960px; margin:0 auto; padding:40px 32px 80px; }
.pg-head    { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.pg-title   { font-size:26px; font-weight:800; letter-spacing:-.03em; }

.setup-tabs { display:flex; gap:2px; margin-bottom:24px; border-bottom:1.5px solid var(--rule); }
.stab       { padding:9px 18px; font-size:13px; font-weight:600; color:var(--ink3); border-radius:6px 6px 0 0; border-bottom:2px solid transparent; margin-bottom:-1.5px; transition:all .12s; cursor:pointer; border-left:none; border-right:none; border-top:none; }
.stab:hover { color:var(--ink); background:var(--panel); }
.stab.active { color:var(--blue); border-bottom-color:var(--blue); background:transparent; }
.tab-panel  { display:none; }
.tab-panel.active { display:block; }

.accordion  { border:1.5px solid var(--rule); border-radius:var(--r2); overflow:hidden; }
.acc-row    { border-bottom:1.5px solid var(--rule); background:var(--w); }
.acc-row:last-child { border-bottom:none; }
.acc-trigger { display:flex; align-items:center; gap:14px; padding:16px 20px; cursor:pointer; width:100%; text-align:left; }
.acc-trigger:hover { background:var(--panel); }
.acc-name   { font-size:14px; font-weight:700; flex:1; }
.acc-meta   { font-family:var(--mono); font-size:11px; color:var(--ink3); }
.acc-chev   { font-size:12px; color:var(--ink3); transition:transform .18s; }
.acc-row.open .acc-chev { transform:rotate(90deg); }
.acc-body   { display:none; padding:20px; border-top:1.5px solid var(--rule); }
.acc-row.open .acc-body { display:block; }
.acc-section { margin-bottom:24px; }
.acc-section:last-child { margin-bottom:0; }
.acc-sh     { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.acc-sh-lbl { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); }
.acc-item   { display:flex; align-items:center; padding:9px 0; border-bottom:1px solid var(--rule); gap:10px; }
.acc-item:last-child { border-bottom:none; }
.acc-item-name { flex:1; font-size:13px; font-weight:500; }
.acc-del    { color:var(--red); font-size:13px; opacity:.45; transition:opacity .12s; }
.acc-del:hover { opacity:1; }
.pfx-list   { display:flex; flex-wrap:wrap; gap:7px; }
.pfx-tag    { display:flex; align-items:center; gap:6px; padding:4px 11px; border-radius:99px; border:1.5px solid var(--rule); background:var(--panel); font-family:var(--mono); font-size:11px; font-weight:700; }
.pfx-storage { color:var(--green); }

.dt-card    { border:1.5px solid var(--rule); border-radius:var(--r); padding:14px 16px; background:var(--panel); margin-bottom:8px; display:flex; align-items:flex-start; gap:12px; }
.dt-card-info { flex:1; }
.dt-card-name { font-size:13px; font-weight:700; margin-bottom:4px; }
.dt-card-meta { font-size:11px; color:var(--ink3); font-family:var(--mono); display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.dt-card-acts { display:flex; gap:6px; flex-shrink:0; }

.part-badge {
  display:inline-flex; padding:2px 8px; border-radius:99px;
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  border:1.5px solid var(--rule2); color:var(--ink2); background:var(--panel);
}
.part-badge.screen      { background:var(--blueb);  color:var(--blue);  border-color:var(--blue); }
.part-badge.front_frame { background:var(--amberb); color:var(--amber); border-color:var(--amber); }
.part-badge.back        { background:var(--redb);   color:var(--red);   border-color:var(--red); }

/* ── HISTORY PAGE ─────────────────────────────────────────────────────────── */
.history-page  { height:calc(100vh - var(--th)); overflow:hidden; display:flex; flex-direction:column; background:var(--bg); }
.history-head  { display:flex; align-items:center; justify-content:space-between; padding:24px 32px 0; flex-shrink:0; }
.history-title { font-size:26px; font-weight:800; letter-spacing:-.03em; }
.history-body  { flex:1; overflow:auto; padding:16px 32px 32px; }

.htbl  { width:100%; border-collapse:collapse; }
.htbl th { text-align:left; padding:10px 14px; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink3); background:var(--w); border-bottom:1.5px solid var(--rule); position:sticky; top:0; z-index:1; }
.htbl td { padding:12px 14px; border-bottom:1px solid var(--rule); font-size:13px; vertical-align:middle; background:var(--w); }
.htbl tr:hover td { background:var(--panel); }
.tc-sku    { font-family:var(--mono); font-size:12px; font-weight:800; color:var(--blue); letter-spacing:.06em; }
.tc-serial { font-family:var(--mono); font-size:11px; color:var(--ink2); letter-spacing:.04em; }
.tc-mono   { font-family:var(--mono); font-size:12px; }
.tc-dim    { color:var(--ink3); }

.pill { display:inline-flex; align-items:center; padding:2px 9px; border-radius:99px; font-family:var(--mono); font-size:11px; font-weight:700; border:1.5px solid currentColor; }
.pill-green { color:var(--green);  background:var(--greenb); }
.pill-red   { color:var(--red);    background:var(--redb); }
.pill-amber { color:var(--amber);  background:var(--amberb); }

/* ── Modal ────────────────────────────────────────────────────────────────── */
#veil { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:999; backdrop-filter:blur(6px); }
#veil.hidden { display:none; }
#modal { background:var(--w); border-radius:var(--r3); padding:32px 36px; min-width:420px; max-width:560px; width:100%; box-shadow:0 32px 80px rgba(0,0,0,.2); border:1.5px solid var(--rule); }
.m-title { font-size:20px; font-weight:800; letter-spacing:-.02em; margin-bottom:5px; }
.m-sub   { font-size:13px; color:var(--ink2); margin-bottom:22px; line-height:1.55; }
.m-foot  { display:flex; gap:8px; justify-content:flex-end; margin-top:24px; }
.m-err   { font-size:11px; color:var(--red); margin-top:5px; display:none; }

/* ── Fields ───────────────────────────────────────────────────────────────── */
.fld         { display:flex; flex-direction:column; gap:5px; }
.fld-lbl     { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink3); }
.fld-row     { display:flex; gap:10px; }
.fld-row .fld { flex:1; }
.mt8  { margin-top:8px; }
.mt14 { margin-top:14px; }
.mt20 { margin-top:20px; }
.rule { height:1.5px; background:var(--rule); margin:16px 0; }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.hidden { display:none !important; }
.flex   { display:flex; }
.ac     { align-items:center; }
.jb     { justify-content:space-between; }
.g8     { gap:8px; }
.g12    { gap:12px; }
.muted  { color:var(--ink3); }
.mono   { font-family:var(--mono); }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:64px 0; color:var(--ink3); }
.empty-ico   { font-size:28px; opacity:.2; }
.empty-txt   { font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--rule2); border-radius:99px; }