*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   PACKING PROOF — evidentiary theme
   Ink + bone + verification-green. The app/manager console is a
   light, dense data UI; the operator pack-bench station overrides
   these tokens to dark (see index.html) because a bright UI glares
   behind a live camera feed. Green is reserved for VERIFIED state;
   primary actions are ink so the green keeps its signal value.
   Display: Hanken Grotesk · Body & data: Inter (no monospace).
   ============================================================ */
:root {
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif; /* data = Inter, no mono */

  /* brand constants */
  --ink:  #16191B;
  --bone: #EDE7DA;

  /* surfaces (light app) */
  --bg:         #F6F4EF;
  --panel:      #FFFFFF;
  --panel-hi:   #FBFAF7;
  --border:     #E5E1D9;
  --border-hi:  #D5D0C4;

  /* text ramp */
  --text:       #1B1E20;
  --text-dim:   #4D5457;
  --text-muted: #727A7D;

  /* verification green — vivid accent + accessible text variant */
  --verify:     #3DBC7F;   /* vivid: dots, marks, focus, reticle, brand */
  --green:      #167A4B;   /* accessible green text on light (legacy name) */
  --green-dim:  #E4F4EB;
  --green-glow: rgba(61,188,127,.28);

  /* flag amber — pending / attention */
  --flag:       #E8A93C;   /* vivid dot */
  --amber:      #8C6411;   /* accessible amber text (legacy name) */
  --amber-dim:  #F6ECD7;
  --amber-glow: rgba(232,169,60,.30);

  /* 'action/active' aliases → INK emphasis. Green is reserved for VERIFIED state only,
     so selected/active/hover affordances use ink, not green. */
  --blue:       var(--ink);
  --blue-dim:   var(--bone);
  --blue-glow:  rgba(22,25,27,.10);

  --red:        #CE3F3F;
  --red-dim:    #FAE9E9;

  --panel-w:    384px;
  --btn-h:      52px;
  --radius:     12px;
  --radius-sm:  8px;

  --shadow-sm:  0 1px 2px rgba(22,25,27,.06);
  --shadow:     0 1px 2px rgba(22,25,27,.05), 0 8px 24px rgba(22,25,27,.07);
  --shadow-lg:  0 24px 60px rgba(22,25,27,.16);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Brand helpers */
.logo-mark { flex-shrink: 0; color: var(--verify); }
.hl { color: var(--verify); }

/* Keyboard focus — a visible green ring on every interactive control (focus is an
   allowed --verify use). Mouse clicks don't trigger :focus-visible, so the UI stays
   clean for pointer users. Inputs keep their own border+halo focus, so they're excluded. */
:where(a, button, [role="button"], summary, [tabindex]):focus-visible {
  outline: 2px solid var(--verify);
  outline-offset: 2px;
}

/* ── Buttons (tall CTA, operator station) ── */
.btn {
  height: var(--btn-h); padding: 0 16px 0 18px;
  border: 1px solid var(--border-hi); border-radius: var(--radius);
  font-size: 15px; font-weight: 600; font-family: var(--font-body);
  letter-spacing: 0; cursor: pointer;
  background: var(--panel); color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
  white-space: nowrap; box-shadow: var(--shadow-sm);
}
.btn:hover  { background: var(--panel-hi); border-color: var(--text-muted); }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .45; cursor: default; pointer-events: none; box-shadow: none; }
.btn-key {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--text-muted); background: var(--bg); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: var(--radius-sm); flex-shrink: 0; letter-spacing: .03em;
}
.btn-primary { background: var(--green-dim); border-color: color-mix(in srgb, var(--verify) 38%, transparent); color: var(--green); }
.btn-primary:hover { background: color-mix(in srgb, var(--verify) 16%, var(--panel)); border-color: var(--verify); }
.btn-primary .btn-key { color: var(--green); background: color-mix(in srgb, var(--verify) 16%, transparent); border-color: transparent; }
.btn-accept { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.btn-accept:hover { background: color-mix(in srgb, #000 12%, var(--ink)); border-color: var(--ink); }
.btn-accept .btn-key { color: var(--bone); background: rgba(237,231,218,.16); border-color: transparent; }
.btn-danger { background: transparent; border-color: var(--border-hi); color: var(--text-muted); box-shadow: none; }
.btn-danger:hover { background: var(--red-dim); border-color: color-mix(in srgb, var(--red) 35%, transparent); color: var(--red); }

/* ── Small buttons ── */
.btn-sm {
  height: 38px; padding: 0 15px;
  border: 1px solid var(--border-hi); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer; background: var(--panel); color: var(--text);
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, border-color .15s, box-shadow .15s; box-shadow: var(--shadow-sm);
}
.btn-sm:hover { background: var(--panel-hi); border-color: var(--text-muted); }
.btn-sm.primary { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.btn-sm.primary:hover { background: color-mix(in srgb, #000 12%, var(--ink)); }
.btn-sm.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 32%, transparent); background: var(--panel); }
.btn-sm.danger:hover { background: var(--red-dim); border-color: var(--red); }

/* ── Header (ghost) buttons ── */
.btn-header {
  height: 32px; padding: 0 12px;
  border: 1px solid var(--border-hi); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text-dim);
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: .02em; cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s; box-shadow: var(--shadow-sm);
}
.btn-header:hover  { border-color: var(--text-muted); color: var(--text); background: var(--panel-hi); }
.btn-header:active { transform: scale(.97); }

/* ── ShipStation / status pill ── */
.linkpill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--green); background: var(--green-dim);
  border: 1px solid color-mix(in srgb, var(--verify) 30%, transparent);
}
.linkpill svg { color: var(--verify); }

/* ── Toasts ── */
#toast-container { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; }
.toast {
  padding: 12px 16px; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  border: 1px solid var(--border-hi); background: var(--panel); color: var(--text);
  box-shadow: var(--shadow-lg);
  animation: toastIn .22s cubic-bezier(.34,1.56,.64,1);
  max-width: 320px; line-height: 1.45;
}
.toast.error   { border-left: 3px solid var(--red);    color: var(--text); }
.toast.success { border-left: 3px solid var(--verify); color: var(--text); }
@keyframes toastIn {
  from { transform: translateX(12px) scale(.97); opacity: 0; }
  to   { transform: translateX(0)    scale(1);   opacity: 1; }
}

.hidden { display: none !important; }

/* ── Date inputs ── */
.filter-date {
  background: var(--panel); color: var(--text); border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm); padding: 8px 10px; font-family: var(--font-mono);
  font-size: 13px; box-shadow: var(--shadow-sm);
}
.filter-date:focus { outline: none; border-color: var(--verify); }

.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.pager button[disabled] { opacity: .45; cursor: default; }

/* ── Auth pages (login + change-password) ── */
body.auth {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; overflow: hidden; user-select: none;
  background:
    radial-gradient(120% 80% at 100% -5%, #EFE7D8 0%, transparent 55%),
    radial-gradient(110% 70% at 0% 110%, #ECEAE2 0%, transparent 55%),
    var(--bg);
}
.login-card {
  width: 380px; position: relative; overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border); border-radius: 18px;
  padding: 38px 34px 32px;
  box-shadow: var(--shadow-lg);
}
.login-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--verify);
}
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-logo .logo-mark { width: 30px; height: 30px; }
.login-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; color: var(--text); text-transform: none;
}
.login-title small {
  display: block; font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); margin-top: 5px;
}
.login-tagline { font-size: 13px; color: var(--text-muted); margin-bottom: 26px; line-height: 1.5; }
.login-card .form-group { margin-bottom: 16px; }
.login-card label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px;
}
.login-card input {
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--panel-hi); border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font-body); font-size: 15px;
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.login-card input::placeholder { color: var(--text-muted); }
.login-card input:focus { border-color: var(--verify); box-shadow: 0 0 0 3px var(--green-dim); }
.login-btn {
  width: 100%; height: 48px; margin-top: 10px;
  background: var(--ink); border: 1px solid var(--ink);
  border-radius: var(--radius-sm); color: var(--bone);
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  letter-spacing: .01em; cursor: pointer;
  transition: filter .15s, transform .1s; box-shadow: var(--shadow);
}
.login-btn:hover  { filter: brightness(1.12); }
.login-btn:active { transform: scale(.99); }
.login-btn:disabled { opacity: .5; cursor: default; filter: none; }
.login-card #error-msg {
  margin-top: 14px; padding: 11px 14px;
  background: var(--red-dim); border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
  border-radius: var(--radius-sm); color: var(--red);
  font-size: 13px; text-align: center;
}
.cp-heading { margin-bottom: 6px; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.cp-sub { margin-bottom: 24px; font-size: 13px; color: var(--text-muted); line-height: 1.55; }

/* ── Skeleton loading rows ── */
.skeleton-wrap { display: flex; flex-direction: column; gap: 9px; }
.skeleton-row {
  height: 56px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--panel);
  position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
}
.skeleton-row::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(22,25,27,.05), transparent);
  animation: skeletonShimmer 1.25s ease-in-out infinite;
}
@keyframes skeletonShimmer { 100% { transform: translateX(100%); } }

/* ── Empty / error states ── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 64px 20px; text-align: center;
}
.empty-state .empty-icon { color: var(--verify); opacity: .85; }
.empty-state .empty-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.empty-state .empty-sub { font-size: 13.5px; color: var(--text-muted); max-width: 340px; line-height: 1.6; }
.empty-state.is-error .empty-icon { color: var(--red); }
.empty-state.is-error .empty-title { color: var(--red); }

/* ── Lightbox ── */
.lightbox { position: fixed; inset: 0; background: rgba(16,18,20,.88); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 1000; }
.lightbox.hidden { display: none; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 10px; box-shadow: var(--shadow-lg); }
.lb-close { position: absolute; top: 16px; right: 20px; font-size: 30px; background: rgba(255,255,255,.1);
  border: none; color: #fff; cursor: pointer; line-height: 1; width: 44px; height: 44px; border-radius: 50%; }
.lb-close:hover { background: rgba(255,255,255,.2); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 40px;
  background: none; border: none; color: #fff; cursor: pointer; padding: 0 16px; line-height: 1; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }

/* ── Mobile ── */
@media (max-width: 640px) {
  .filter-date { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .btn-header { height: 34px; padding: 0 12px; }
  #toast-container { bottom: 14px; right: 12px; left: 12px; }
  .toast { max-width: none; }
}