:root{
  --ink:#1c2430; --ink-soft:#4a5568; --paper:#f6f5f1; --panel:#ffffff; --line:#c9d3d8;
  --navy:#2484bf; --navy-deep:#144969; --navy-soft:#e9f3f9;
  --amber:#f2762e; --amber-soft:#fdeae0; --gold:#f2b33d;
  --ok:#2f7a4f; --ok-soft:#e3f0e7; --danger:#b04a3f; --danger-soft:#fbeee8;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink);padding:32px 20px 80px;}
.wrap{max-width:1100px;margin:0 auto;}
header.page{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  border-bottom:2px solid var(--ink);padding-bottom:18px;margin-bottom:28px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:16px;}
.brand img{height:58px;width:auto;flex-shrink:0;}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 6px;}
h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.01em;}
.lede{margin:6px 0 0;color:var(--ink-soft);font-size:14px;max-width:52ch;}
.step-indicator{font-family:var(--mono);font-size:11px;color:var(--ink-soft);text-align:right;}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px 24px;margin-bottom:20px;}
.panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;color:var(--navy);display:flex;align-items:center;gap:8px;}
.panel h2 .n, .panel summary .n{font-family:var(--mono);background:var(--navy);color:#fff;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;}

/* Collapsible panel sections — native <details> so keyboard/AT support is free */
.panel > details.sect > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--navy);font-weight:600;
}
.panel > details.sect > summary::-webkit-details-marker{display:none;}
.panel > details.sect > summary:hover{color:var(--navy-deep);}
.panel > details.sect > summary::after{
  content:'';margin-left:12px;flex-shrink:0;width:7px;height:7px;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease;
}
.panel > details.sect[open] > summary::after{transform:rotate(-135deg);}
/* margin-left:auto here pushes both the meta and the chevron to the right edge */
.sect-meta{font-family:var(--sans);font-size:12px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-soft);margin-left:auto;text-align:right;}
.sect-body{margin-top:16px;}

/* Long rosters scroll inside the panel instead of stretching the page */
.table-scroll{max-height:420px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;}
.table-scroll table{margin:0;}
.table-scroll thead th{position:sticky;top:0;background:var(--panel);z-index:1;box-shadow:inset 0 -1px 0 var(--line);}

/* Which order is currently open */
.order-context{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--navy-soft);border:1px solid var(--navy);border-radius:10px;padding:12px 16px;margin-bottom:20px;
}
.order-context .who{font-size:15px;font-weight:600;color:var(--navy-deep);}
.order-context .who em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:400;color:var(--ink-soft);margin-top:3px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:16px;}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:5px;}
.field .hint{font-size:11px;color:#9a9488;margin-top:3px;text-transform:none;letter-spacing:0;}
.field input, .field select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:6px;font-size:14px;font-family:var(--sans);background:#fff;color:var(--ink);}
.field input:focus, .field select:focus{outline:2px solid var(--navy);outline-offset:1px;}
.row-gap{margin-bottom:16px;}
details.advanced{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px;}
details.advanced summary{cursor:pointer;font-size:12px;color:var(--navy);font-weight:600;}
.advgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.advgrid .field input{font-family:var(--mono);font-size:13px;}
.adv-sub{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#9a9488;margin:16px 0 4px;}
table{width:100%;border-collapse:collapse;}
thead th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);border-bottom:1px solid var(--line);padding:6px 8px;}
tbody td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr.clickable{cursor:pointer;}
tbody tr.clickable:hover{background:var(--paper);}
.row-input{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:5px;font-size:13px;font-family:var(--sans);}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:20px;overflow:hidden;font-size:11px;font-family:var(--mono);}
.toggle button{border:none;background:#fff;padding:5px 9px;cursor:pointer;color:var(--ink-soft);}
.toggle button.active{background:var(--navy);color:#fff;}
.rm-btn{background:none;border:none;color:var(--danger);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px;}
.toolbar{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;align-items:center;}
.btn{font-family:var(--sans);font-size:13px;font-weight:600;padding:9px 16px;border-radius:7px;border:1px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;}
.btn:hover{background:var(--navy);color:#fff;}
.btn.primary{background:var(--navy);color:#fff;}
.btn.primary:hover{background:var(--navy-deep);}
.btn.amber{border-color:var(--amber);color:var(--amber);}
.btn.amber:hover{background:var(--amber);color:#fff;}
.btn.ghost{border-color:var(--line);color:var(--ink-soft);}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn.danger{border-color:var(--danger);color:var(--danger);}
.btn.danger:hover{background:var(--danger);color:#fff;}
.btn.big{width:100%;padding:14px;font-size:15px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn:disabled:hover{background:#fff;color:var(--navy);}
.bulk-inline{display:none;gap:10px;align-items:end;background:var(--amber-soft);border:1px solid var(--amber);border-radius:8px;padding:12px 14px;margin-top:12px;flex-wrap:wrap;}
.bulk-inline.show{display:flex;}
.bulk-inline .field{flex:1;min-width:120px;}
.bulk-inline .field label{margin-bottom:4px;}
.count-pill{font-family:var(--mono);font-size:12px;color:var(--ink-soft);}
.summary-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.summary-card{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:14px 16px;}
.summary-card .label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:4px;}
.summary-card .value{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--navy);}
.summary-card.total .value{color:var(--amber);}
.preview-table td, .preview-table th{font-family:var(--mono);font-size:12px;}
.preview-table td.pw{color:var(--amber);}
.warn{background:var(--danger-soft);border:1px solid #e0b7a3;color:#8a4526;border-radius:8px;padding:12px 14px;font-size:12.5px;margin-top:14px;line-height:1.5;}
.info-box{background:var(--ok-soft);border:1px solid #a9cbb4;color:#1f5233;border-radius:8px;padding:14px 16px;font-size:13px;margin-top:14px;line-height:1.6;}
.status-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:20px;border:1px solid var(--line);color:var(--ink-soft);}
.status-pill.live{border-color:var(--ok);color:var(--ok);}
.status-pill.offline{border-color:var(--danger);color:var(--danger);}
.badge{font-family:var(--mono);font-size:10px;text-transform:uppercase;padding:3px 8px;border-radius:10px;background:var(--amber-soft);color:var(--amber);}
.payment-gate{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:14px 16px;transition:background .15s,border-color .15s;}
.payment-gate input[type=checkbox]{width:18px;height:18px;cursor:pointer;flex-shrink:0;}
.payment-gate label{font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;}
.payment-gate.confirmed{background:var(--ok-soft);border-color:var(--ok);}
.payment-gate.confirmed label{color:#1f5233;}
/* Explains why Generate is disabled — a disabled button swallows clicks, so
   the warn box inside generateCredentials() can never fire from the button. */
.gate-hint{font-size:11.5px;color:var(--ink-soft);margin-top:6px;line-height:1.4;}
.gate-hint.blocked{color:#8a4526;}
#previewSection{display:none;}
#previewSection.show{display:block;}
/* PayPal invoice helper — one copyable row per field in PayPal's builder */
.invoice-build{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px;}
.inv-row{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);}
.inv-row:last-child{border-bottom:none;}
.inv-row .inv-label{flex:0 0 132px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);}
.inv-row .inv-value{flex:1 1 auto;font-family:var(--mono);font-size:13px;color:var(--ink);overflow-wrap:anywhere;}
.inv-row button{flex:0 0 auto;font-family:var(--sans);font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;
  border:1px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;}
.inv-row button:hover{background:var(--navy);color:#fff;}
.inv-row button.copied{background:var(--ok);border-color:var(--ok);color:#fff;}

.success-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;align-items:center;}
/* Pushes the irreversible "mark complete" away from the download buttons */
.success-actions .grow{flex:1 1 auto;}
.btn.copied{background:var(--ok);border-color:var(--ok);color:#fff;}
.btn.copied:hover{background:var(--ok);color:#fff;}
tbody tr.active{background:var(--navy-soft);box-shadow:inset 3px 0 0 var(--navy);}
tbody tr.clickable.active:hover{background:var(--navy-soft);}
footer.note{text-align:center;color:var(--ink-soft);font-size:11px;margin-top:30px;font-family:var(--mono);}
.staff-link{background:none;border:none;color:#c4c0b4;font-family:var(--mono);font-size:11px;cursor:pointer;text-decoration:underline;margin-top:8px;}
.staff-link:hover{color:var(--ink-soft);}
.empty-state{text-align:center;padding:30px 20px;color:var(--ink-soft);font-size:13px;border:1px dashed var(--line);border-radius:8px;}
.login-wrap{max-width:340px;margin:80px auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px;}
.login-wrap .login-brand{text-align:center;margin-bottom:8px;}
.login-wrap img{height:64px;width:auto;}
.login-wrap h1{font-size:18px;}
@media (max-width:760px){
  .grid2, .grid3, .grid4, .advgrid, .summary-cards{grid-template-columns:1fr 1fr;}
  header.page{flex-direction:column;align-items:flex-start;}
  .step-indicator{text-align:left;}
}
@media (max-width:480px){
  .grid2, .grid3, .grid4, .advgrid, .summary-cards{grid-template-columns:1fr;}
}

/* Queue bulk actions — appears only while rows are ticked, so the queue stays
   uncluttered in the normal case of processing one order at a time. */
.bulk-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:12px; padding:10px 14px;
  background:var(--navy-soft); border:1px solid var(--navy);
  border-radius:8px;
}
.bulk-count{ font-weight:600; color:var(--navy-deep); margin-right:auto; }
.queue-actions{ white-space:nowrap; }
.queue-actions .btn{ vertical-align:middle; }
.btn.ghost.danger-text{ color:#b3261e; padding-left:10px; padding-right:10px; font-weight:700; }
.btn.ghost.danger-text:hover{ background:#fdecea; border-color:#b3261e; }
/* Row checkboxes sit inside a clickable row; make the hit area comfortable so
   staff don't miss and open the order instead. */
#queueTableWrap tbody input[type=checkbox],
#queueTableWrap thead input[type=checkbox]{ width:16px; height:16px; cursor:pointer; }

/* "Recently deleted" — subordinate to the live queue, so it reads as a
   secondary affordance rather than a second queue competing for attention. */
.deleted-sect{ margin-top:18px; border-top:1px solid var(--line); padding-top:6px; }
.deleted-sect > summary{ font-size:0.9rem; color:#5b6b78; font-weight:600; }
.deleted-sect table{ font-size:0.9rem; }