:root{
  --toast-top: 76px;
  --bg:#0b0c10;
  --panel:#111218;
  --muted:#a0a6b2;
  --text:#f3f5f7;
  --red:#b3261e;
  --green:#2e7d32;
  --border:#1e2230;
  --badge:#2a2f45;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

.container{max-width:   1600px;margin:96px auto 64px;padding:0 16px; padding-bottom:140px;}
h1,h2{margin:0 0 16px}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

form.card{display:flex;flex-direction:column;gap:12px;}
form.card input, .scan-form input{
  background:#0f1117;border:1px solid var(--border);
  color:var(--text);padding:12px 14px;border-radius:12px;outline:none;
}
button{
  background:#3b82f6;border:none;color:white;padding:10px 14px;border-radius:12px;
  cursor:pointer;font-weight:600;
}
button:hover{opacity:.95}

.topbar{
  position:sticky;top:0;z-index:20;background:rgba(11,12,16,.85);
  backdrop-filter: blur(8px);border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;gap:16px;align-items:center;
}
.brand{font-weight:800}
.scan-form{display:flex;gap:8px;flex:1}
.scan-form input{flex:1}
.user{opacity:.8}
.topbar .actions{ margin-left:auto; display:flex; gap:8px; align-items:center }
.topbar .ghost{
  background: transparent;
  border:1px solid var(--border);
  color: #dde3f0;
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
  cursor:pointer;
}
.topbar .ghost:hover{ background: rgba(255,255,255,.06) }

/* Layout with Permanent Manual Check panel */
.layout{ display:grid; grid-template-columns: 260px 1fr; gap:12px; }
.sidepanel{
  position: sticky; top:76px; align-self:start;
  background: var(--panel); border:1px solid var(--border); border-radius:16px; padding:14px;
}
.sidepanel h3{ margin:4px 0 8px; font-size:16px }
.sidepanel .muted{ color:#9aa1af; font-size:12px; margin:0 0 10px }
.manual-list{ display:flex; flex-direction:column; gap:10px; }
.manual-item{ overflow:hidden;
  display:flex; flex-direction:column; gap:6px;
  background:#0f1117; border:1px solid var(--border); border-radius:12px; padding:10px;
}
.manual-item .top{ display:flex; justify-content:space-between; align-items:center; gap:8px }
.manual-item .id{ font-weight:800 }
.manual-item .sys{ font-size:12px; background:var(--badge); border:1px solid var(--border); border-radius:999px; padding:2px 8px; color:#c3c8d4 }
.manual-item .who{ font-size:12px; color:#cfd3dc }
.manual-item .progress{ font-size:12px; color:#9aa1af }
.manual-item.resolved{ opacity:.6 }
.manual-item button{
  align-self:flex-start; background:transparent; border:1px dashed var(--border);
  color:#cfd3dc; border-radius:8px; padding:6px 8px; cursor:pointer
}
.manual-item button:hover{ background:rgba(255,255,255,.05) }

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pkg.card{transition:transform .15s ease, box-shadow .15s ease, border-color .2s}
.pkg.card:hover{transform:translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.35)}
.pkg .pkg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pkg .pkg-id{font-weight:800;letter-spacing:.2px}
.badge{background:var(--badge);padding:4px 8px;border-radius:999px;font-size:12px;color:#c3c8d4;border:1px solid var(--border)}

.pkg.pending{border-left:6px solid var(--red)}
.pkg.ok{border-left:6px solid var(--green)}
.pkg .line{font-size:14px;color:#cfd3dc;margin:6px 0}
.pkg .label{color:var(--muted);margin-right:6px}
.pieces .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{display:inline-block;border:1px solid var(--border);padding:2px 8px;border-radius:999px;font-size:12px;opacity:.9}
.chip.done{background:rgba(46,125,50,.18);border-color:#244b2a}

/* Recipient name — full, no truncation */
.recipient .name{
  display:block; white-space:normal; overflow:visible; text-overflow:clip;
  word-break: break-word; overflow-wrap:anywhere;
  font-size: clamp(18px, 2vw, 22px); font-weight:900; line-height:1.15; color:#fff;
}
@media (min-width: 1100px){ .recipient .name{ font-size:22px } }

/* Notification sidebar */
.notify-root{
  position:fixed; right:16px; top:88px; z-index:9999;
  display:flex; flex-direction:column; gap:14px;
}
.toast{
  min-width: 420px;
  max-width: 480px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .3px;
  color: #fff;
  padding: 22px 24px;
  border-radius: 16px;
  border: 2px solid var(--border);
  background: #222633;
  box-shadow: 0 16px 36px rgba(0,0,0,.55);
  opacity: 0; transform: translateX(24px);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show{ opacity:1; transform: translateX(0) }
.toast.success{ background: linear-gradient(0deg, rgba(46,125,50,1), rgba(46,125,50,.92)); }
.toast.error{ background: linear-gradient(0deg, rgba(179,38,30,1), rgba(179,38,30,.92)); }
.toast.info{ background: linear-gradient(0deg, rgba(42,47,69,1), rgba(42,47,69,.92)); }
.toast.warn{
  background: linear-gradient(0deg, rgba(201,142,0,1), rgba(201,142,0,.92));
  color: #0b0c10;
  border-color: #a37400;
}

/* Modal */
.modal-overlay{
  position:fixed; inset:0; z-index:2000;
  background: rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .2s ease;
}
.modal-overlay.hidden{ opacity:0; pointer-events:none }
.modal{
  width: min(560px, 92vw);
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.modal-header{ font-size:20px; font-weight:900; margin-bottom:10px; }
.modal-body{ color:#d6d9e1; margin-bottom:16px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end }
.btn{ border:none; border-radius:12px; padding:10px 14px; font-weight:800; cursor:pointer; color:#fff; }
.btn.green{ background:#2e7d32 }
.btn.red{ background:#b3261e }
.btn:hover{ opacity:.95 }

/* Mobile */
@media (max-width: 900px){
  .topbar-inner{ flex-wrap: wrap; gap:10px }
  .scan-form{ order:3; width:100% }
  .scan-form input{ padding:14px 16px; font-size:18px }
  .scan-form button{ padding:12px 16px; font-size:18px }
  .cards{ grid-template-columns: 1fr; gap:12px }
  .card{ border-radius:14px }
  .recipient .name{ font-size: 18px }
  /* manual panel: static and appears first in DOM (already first), ensure not sticky */
  .sidepanel{ position: static; top: auto; margin-top: 0; }
  /* notifications: fixed so always visible */
  .center-header{ position: static; }
  .inline-toastbar{ position: fixed; top: 76px; left: 16px; right: 16px; align-items: stretch; z-index: 9999; }
}
  .scan-form{ order:3; width:100% }
  .scan-form input{ padding:14px 16px; font-size:18px }
  .scan-form button{ padding:12px 16px; font-size:18px }
  .layout{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; gap:12px }
  .card{ border-radius:14px }
  .recipient .name{ font-size: 18px }
  .toast{ min-width: auto; width: calc(100vw - 32px); font-size: 18px; padding: 16px }
  .notify-root{ right: 16px; left: 16px; top: 86px; align-items: flex-end }


/* v15 3-up grid */
@media (min-width: 1200px){
  .cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Reserve right gutter so notifications never overlap cards */
.has-right-gutter{ padding-right: 520px; } /* ~width of toast column */
@media (max-width: 1200px){
  .has-right-gutter{ padding-right: 16px; } /* collapse gutter on smaller screens */
}

/* v17 three-column layout */
.three-col{ display:grid; grid-template-columns: 260px minmax(0,1fr) 360px; gap:18px; }
.center-col{ min-width:0; } /* prevent overflow */
@media (max-width: 1280px){
  .three-col{ grid-template-columns: 1fr; }
  .logpanel{ position:relative; top:0; }
}

/* Right scan log panel */
.logpanel{
  position: sticky; top:76px; align-self:start;
  background: var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:14px; max-height: calc(100vh - 100px); overflow:auto;
}
.logpanel-head{ font-weight:900; margin-bottom:8px }
.log-list{ display:flex; flex-direction:column; gap:10px }
.log-entry{
  border:1px solid var(--border); border-left-width:6px; padding:10px 12px; border-radius:12px;
  background:#0f1117; font-size:14px; line-height:1.3; color:#e8ecf4;
}
.log-entry .meta{ font-size:12px; color:#aab2c0; margin-bottom:4px }
.log-entry.success{ border-left-color:#2e7d32 }
.log-entry.warn{ border-left-color:#c98e00 }
.log-entry.error{ border-left-color:#b3261e }




/* v19q: Center sticky header with inline toastbar */
.center-header{
  position: sticky;
  top: 70px;
  z-index: 15;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 6px 4px;
  background: rgba(11,12,16,.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.inline-toastbar{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; min-width: 360px; }
.inline-toastbar .toast{
  pointer-events:auto;
  font-size: 18px; font-weight: 900; padding: 12px 16px;
  border-radius: 12px; border:1px solid var(--border);
  box-shadow: 0 12px 26px rgba(0,0,0,.45);
  opacity:0; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.inline-toastbar .toast.show{ opacity:1; transform: translateY(0) }
.inline-toastbar .success{ background: linear-gradient(0deg, rgba(46,125,50,1), rgba(46,125,50,.9)); color:#fff }
.inline-toastbar .warn{ background: linear-gradient(0deg, rgba(201,142,0,1), rgba(201,142,0,.92)); color:#0b0c10; border-color:#a37400; }
.inline-toastbar .error{ background: linear-gradient(0deg, rgba(179,38,30,1), rgba(179,38,30,.92)); color:#fff }

/* Align side panels with cards grid under sticky center header */
.sidepanel, .logpanel{ margin-top: 44px; }
@media (max-width: 1280px){
  .center-header{ position: static; }
  .sidepanel, .logpanel{ margin-top: 0; }
  .inline-toastbar{ align-items: stretch; }
}

/* v19s: robust log panel + dynamic toast top */
.logpanel{ max-height: calc(100vh - 100px); overflow:auto }
.log-list{ display:flex; flex-direction:column; gap:10px }
.log-entry .msg strong{ font-weight:900 }

@media (max-width: 900px){
  /* Toasts always visible but not blocking input */
  .inline-toastbar{
    position: fixed;
    top: var(--toast-top);
    left: 16px; right: 16px;
    z-index: 9999;
    align-items: stretch;
  }
}