/* QR Studio — extracted verbatim from the signed-off mockup */
:root{
    --bg:#F5F6F8; --surface:#FFFFFF; --surface-2:#EDEFF3; --surface-3:#E5E8EF;
    --ink:#12151B; --muted:#586170; --faint:#8A93A1;
    --line:#E0E3EA; --line-2:#D2D7E0;
    --accent:#1B4DFF; --accent-ink:#FFFFFF; --accent-weak:#E7ECFF; --accent-line:#C4D0FF;
    --ok:#137a53; --ok-weak:#E1F3EA;
    --warn:#8f6410; --warn-weak:#F5EBD4;
    --crit:#c0362b; --crit-weak:#F9E4E1;
    --shadow:0 1px 2px rgba(16,20,30,.04), 0 10px 30px -14px rgba(16,20,30,.22);
    --shadow-sm:0 1px 2px rgba(16,20,30,.06);
    --sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --display:"Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
    --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#0D1016; --surface:#151A21; --surface-2:#1A212B; --surface-3:#212A35;
      --ink:#E8EBF1; --muted:#99A3B2; --faint:#69727F;
      --line:#252E39; --line-2:#313B49;
      --accent:#6E8BFF; --accent-ink:#0A0D13; --accent-weak:#182142; --accent-line:#2E3C6E;
      --ok:#43b585; --ok-weak:#123026;
      --warn:#d8ab55; --warn-weak:#332810;
      --crit:#e77a6f; --crit-weak:#361b18;
      --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -16px rgba(0,0,0,.6);
      --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0D1016; --surface:#151A21; --surface-2:#1A212B; --surface-3:#212A35;
    --ink:#E8EBF1; --muted:#99A3B2; --faint:#69727F;
    --line:#252E39; --line-2:#313B49;
    --accent:#6E8BFF; --accent-ink:#0A0D13; --accent-weak:#182142; --accent-line:#2E3C6E;
    --ok:#43b585; --ok-weak:#123026;
    --warn:#d8ab55; --warn-weak:#332810;
    --crit:#e77a6f; --crit-weak:#361b18;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -16px rgba(0,0,0,.6);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  }

  *{box-sizing:border-box}
  body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased}
  a{color:var(--accent); text-decoration:none}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
  button{font-family:var(--sans)}
  h1,h2,h3{font-family:var(--display); letter-spacing:-.015em; margin:0; text-wrap:balance}
  .mono{font-family:var(--mono)}
  .qbg{fill:var(--accent)} .qfg{fill:var(--accent-ink)}

  /* ---------- shell ---------- */
  .topbar{position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:blur(10px) saturate(1.2); border-bottom:1px solid var(--line)}
  .topbar-in{max-width:1060px; margin:0 auto; padding:0 22px; height:58px; display:flex; align-items:center; gap:12px}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:1.04rem; cursor:pointer; background:none; border:0; color:var(--ink); padding:4px 6px 4px 2px; border-radius:8px}
  .brand svg{width:25px; height:25px; display:block}
  .brand .env{font-family:var(--mono); font-weight:400; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); border:1px solid var(--line-2); border-radius:999px; padding:3px 9px; margin-left:4px}
  .sp{flex:1}
  .iconbtn{font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; color:var(--muted); background:var(--surface); border:1px solid var(--line-2); border-radius:999px; padding:7px 13px; cursor:pointer; display:inline-flex; align-items:center; gap:7px}
  .iconbtn:hover{border-color:var(--accent-line); color:var(--ink)}
  .avatar{width:30px;height:30px;border-radius:50%;background:var(--surface-3);border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--muted)}

  .page{max-width:1060px; margin:0 auto; padding:30px 22px 80px}

  /* ---------- buttons ---------- */
  .btn{font-weight:600; font-size:.87rem; border-radius:9px; padding:10px 17px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px; line-height:1; transition:filter .12s}
  .btn.primary{background:var(--accent); color:var(--accent-ink)}
  .btn.primary:hover{filter:brightness(1.07)}
  .btn.primary:disabled{background:var(--surface-2); color:var(--faint); cursor:not-allowed; filter:none}
  .btn.ghost{background:var(--surface); color:var(--ink); border-color:var(--line-2)}
  .btn.ghost:hover{border-color:var(--accent-line)}
  .btn.danger{background:var(--surface); color:var(--crit); border-color:color-mix(in srgb,var(--crit) 32%, transparent)}
  .btn.danger:hover{background:var(--crit-weak)}
  .btn.sm{font-size:.79rem; padding:8px 13px}

  /* ---------- library ---------- */
  .pagehead{display:flex; align-items:flex-end; gap:16px; margin-bottom:22px; flex-wrap:wrap}
  .pagehead h1{font-size:1.65rem; font-weight:800}
  .pagehead .sub{color:var(--muted); font-size:.9rem; margin-top:4px}
  .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px}
  .stat{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:15px 17px; box-shadow:var(--shadow-sm)}
  .stat .n{font-family:var(--display); font-weight:800; font-size:1.65rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
  .stat .l{font-family:var(--mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin-top:2px}
  .toolbar{display:flex; gap:10px; margin-bottom:14px}
  .search{flex:1; font-family:var(--sans); font-size:.88rem; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:9px; padding:10px 14px}
  .search::placeholder{color:var(--faint)}

  .tblwrap{overflow-x:auto; border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:var(--shadow-sm)}
  table.lib{width:100%; border-collapse:collapse; font-size:.87rem; min-width:640px}
  table.lib th{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:500; text-align:left; padding:11px 15px; border-bottom:1px solid var(--line); white-space:nowrap}
  table.lib td{padding:11px 15px; border-bottom:1px solid var(--line); vertical-align:middle}
  table.lib tr:last-child td{border-bottom:0}
  table.lib tbody tr{cursor:pointer; transition:background .1s}
  table.lib tbody tr:hover{background:var(--surface-2)}
  td.slugcell{font-family:var(--mono); color:var(--ink); white-space:nowrap}
  td .prod{color:var(--muted); font-size:.8rem; font-family:var(--sans)}
  .qrthumb{width:30px; height:30px; background:#fff; border:1px solid var(--line-2); border-radius:6px; padding:2px; flex:none}
  .qrthumb img,.qrthumb svg{width:100%; height:100%; display:block}
  .pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.68rem; padding:3px 10px; border-radius:999px; white-space:nowrap}
  .pill.live{color:var(--ok); background:var(--ok-weak)}
  .pill.retired{color:var(--muted); background:var(--surface-2)}
  .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
  td.meta{color:var(--faint); font-size:.78rem; font-family:var(--mono); white-space:nowrap}
  .tablefoot{font-family:var(--mono); font-size:.7rem; color:var(--faint); padding:12px 4px}

  /* ---------- create ---------- */
  .crumb{font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; color:var(--faint); margin-bottom:14px; display:flex; gap:8px; align-items:center}
  .crumb button{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;padding:2px}
  .card{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); padding:24px; max-width:640px}
  .field{margin-bottom:18px}
  .field label{font-family:var(--mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:7px}
  .inp{font-family:var(--sans); font-size:.95rem; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:9px; padding:11px 13px; width:100%}
  .inp:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
  .slugrow{display:flex; align-items:stretch; border:1px solid var(--line-2); border-radius:9px; overflow:hidden; background:var(--surface)}
  .slugrow:focus-within{outline:2px solid var(--accent)}
  .slugrow .pre{font-family:var(--mono); font-size:.85rem; color:var(--muted); background:var(--surface-2); padding:11px 11px; border-right:1px solid var(--line); white-space:nowrap; display:flex; align-items:center}
  .slugrow input{font-family:var(--mono); font-size:.85rem; color:var(--accent); border:0; background:transparent; padding:11px 11px; flex:1; min-width:0}
  .slugrow input:focus{outline:none}
  .avail{display:flex; align-items:center; gap:7px; margin-top:7px; font-family:var(--mono); font-size:.75rem; min-height:18px}
  .avail.ok{color:var(--ok)} .avail.bad{color:var(--crit)} .avail.idle{color:var(--faint)}
  .hint{font-size:.76rem; color:var(--faint); margin-top:6px}

  .drop{border:2px dashed var(--accent-line); background:var(--accent-weak); border-radius:11px; padding:26px 18px; text-align:center; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; transition:filter .12s}
  .drop:hover{filter:brightness(1.02)}
  .drop svg{width:32px;height:32px;color:var(--accent)}
  .drop .big{font-family:var(--display); font-weight:700; font-size:.98rem}
  .drop .sm{font-size:.8rem; color:var(--muted)}
  .staged{display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:11px 13px}
  .staged .fic{width:28px;height:28px;color:var(--crit);flex:none}
  .staged .fn{font-family:var(--mono); font-size:.8rem; color:var(--ink); word-break:break-all}
  .staged .fm{font-family:var(--mono); font-size:.7rem; color:var(--faint)}
  .badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.68rem; font-weight:500; padding:4px 9px; border-radius:6px}
  .badge.ok{color:var(--ok); background:var(--ok-weak)}
  .formfoot{display:flex; gap:10px; margin-top:22px; align-items:center}

  /* preview card */
  .pcard{border:1px solid var(--line-2); border-radius:12px; overflow:hidden; margin-top:4px}
  .pcard .ptop{display:flex; align-items:center; gap:9px; padding:11px 15px; border-bottom:1px solid var(--line); background:var(--surface-2)}
  .pcard .ptop .lbl{font-family:var(--mono); font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; font-weight:600}
  .pcard .ptop .st{margin-left:auto; font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--warn); background:var(--warn-weak); padding:4px 9px; border-radius:6px}
  .prow{display:grid; grid-template-columns:110px 1fr; gap:12px; padding:9px 15px; border-bottom:1px dashed var(--line); align-items:baseline}
  .prow:last-of-type{border-bottom:0}
  .prow .k{font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--faint)}
  .prow .v{font-family:var(--mono); font-size:.8rem; color:var(--ink); word-break:break-word}
  .prow .v .dim{color:var(--muted)}
  .okc{color:var(--ok); font-weight:600}

  /* progress */
  .steps{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:13px}
  .steps li{display:flex; align-items:center; gap:11px; font-family:var(--mono); font-size:.82rem; color:var(--faint)}
  .steps li .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;background:var(--surface-2);border:1px solid var(--line-2);color:var(--faint);flex:none}
  .steps li.doing{color:var(--ink)}
  .steps li.doing .ic{border-color:var(--accent); color:var(--accent)}
  .steps li.done{color:var(--muted)}
  .steps li.done .ic{background:var(--ok-weak); border-color:transparent; color:var(--ok)}
  @media (prefers-reduced-motion:no-preference){
    .steps li.doing .ic{animation:pulse 1s ease-in-out infinite}
    @keyframes pulse{50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent)}}
  }

  /* success + detail */
  .qrpanel{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap}
  .qrtile{background:#fff; border:1px solid var(--line-2); border-radius:13px; padding:14px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; align-items:center; gap:8px; flex:none}
  .qrtile img,.qrtile svg{width:150px; height:150px; display:block}
  .qrtile .cap{font-family:var(--mono); font-size:.62rem; color:#4a4a4a}
  .kv{display:flex; flex-direction:column; gap:12px; min-width:260px; flex:1}
  .kv .row .k{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:3px}
  .kv .row .v{font-family:var(--mono); font-size:.82rem; color:var(--ink); word-break:break-all; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
  .copybtn{font-family:var(--mono); font-size:.64rem; color:var(--muted); background:var(--surface-2); border:1px solid var(--line-2); border-radius:6px; padding:3px 8px; cursor:pointer; flex:none}
  .copybtn:hover{color:var(--ink); border-color:var(--accent-line)}
  .successhead{display:flex; align-items:center; gap:10px; margin-bottom:18px}
  .successhead .tick{width:34px;height:34px;border-radius:50%;background:var(--ok-weak);color:var(--ok);display:grid;place-items:center;font-weight:700}
  .successhead h2{font-size:1.3rem; font-weight:800}
  .successhead .m{color:var(--muted); font-size:.85rem}
  .dlrow{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap}

  .dethead{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap}
  .dethead h1{font-family:var(--mono); font-weight:600; font-size:1.25rem; letter-spacing:0}
  .dethead .meta2{margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--faint)}
  .detgrid{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start}
  .actions{display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
  .locknote{font-family:var(--mono); font-size:.72rem; color:var(--faint); margin-top:12px; line-height:1.6}
  .retire-confirm{margin-top:14px; background:var(--crit-weak); border:1px solid color-mix(in srgb,var(--crit) 30%, transparent); border-radius:10px; padding:14px 16px}
  .retire-confirm p{margin:0 0 10px; font-size:.84rem; color:var(--ink)}

  /* toast */
  #toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); font-family:var(--mono); font-size:.76rem; padding:10px 18px; border-radius:999px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50}
  #toast.show{opacity:1; transform:translateX(-50%) translateY(-4px)}

  @media (max-width:640px){
    .stats{grid-template-columns:1fr 1fr}
    .detgrid{grid-template-columns:1fr}
    .card{padding:18px}
  }
  @media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* ---------- embedded PDF preview ---------- */
.pdfwrap{margin-top:12px;border:1px solid var(--line-2);border-radius:11px;overflow:hidden;background:var(--surface-2)}
.pdfframe{display:block;width:100%;height:420px;border:0;background:#fff}
.prevhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
@media (max-width:640px){.pdfframe{height:300px}}

/* ---------- role chip ---------- */
.rolechip{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-weak);border:1px solid var(--accent-line);border-radius:999px;padding:4px 10px}

/* ---------- login screen (pattern: Vari shipment tracker) ---------- */
.login-wrap{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:38px 34px;max-width:430px;width:100%;text-align:center}
.login-logo-zone{position:relative;display:inline-block;margin-bottom:22px}
.login-glow{position:absolute;inset:-5px;border-radius:18px;background:linear-gradient(90deg,var(--accent),#38bdf8);filter:blur(14px);opacity:.3;transition:opacity .5s}
.login-logo-zone:hover .login-glow{opacity:.55}
.login-badge{position:relative;display:flex;align-items:center;gap:14px;padding:13px 18px;border-radius:14px;background:linear-gradient(135deg,var(--accent) 0%, #4338ca 100%);border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow)}
.login-badge svg{width:38px;height:38px;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}
.login-divider{width:1px;height:30px;background:rgba(255,255,255,.3)}
.login-title{font-family:var(--display);font-weight:800;font-size:1.55rem;letter-spacing:-.02em;margin:0 0 2px}
.login-sub{font-size:.85rem;color:var(--faint);margin:0 0 22px}
.login-journey{background:linear-gradient(135deg,var(--accent-weak) 0%, var(--surface-2) 100%);border:1px solid var(--accent-line);border-radius:13px;padding:20px 16px 14px;margin-bottom:22px}
.lj-grid{display:grid;grid-template-columns:1fr 1fr 1fr;position:relative;min-height:56px;margin-bottom:8px}
.lj-stop{display:flex;flex-direction:column;align-items:center;gap:3px;z-index:2;justify-self:start}
.lj-stop.lj-mid{justify-self:center}
.lj-stop.lj-end{justify-self:end}
.lj-stop span{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.lj-ic{background:var(--surface);border:1px solid var(--line-2);border-radius:9px;padding:7px;box-shadow:var(--shadow-sm);color:var(--accent)}
.lj-ic svg{width:20px;height:20px;display:block}
.lj-doc{position:absolute;top:10px;left:24px;color:var(--accent);opacity:0;z-index:1}
.lj-ping{position:absolute;top:18px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--ok);opacity:0;z-index:1}
@media (prefers-reduced-motion:no-preference){
  .lj-doc{animation:ljdoc 5.5s ease-in-out infinite}
  .lj-ping{animation:ljping 5.5s ease-in-out infinite}
  @keyframes ljdoc{0%{left:26px;opacity:0}6%{opacity:1}42%{opacity:1;left:calc(50% - 9px)}50%{left:calc(50% - 9px);opacity:0}100%{opacity:0}}
  @keyframes ljping{0%,50%{left:calc(50% - 4px);opacity:0}56%{opacity:1}92%{opacity:1;left:calc(100% - 30px)}100%{left:calc(100% - 30px);opacity:0}}
}
.lj-cap{font-size:.72rem;color:var(--faint);margin:0;text-align:center}
.login-btn{width:100%;justify-content:center;padding:12px}
.login-foot{font-size:.74rem;color:var(--faint);margin:12px 0 8px}
.login-foot b{color:var(--accent)}

/* ---------- auth guard: login-only view hides all chrome ---------- */
body.gated .topbar{display:none}
body.gated .login-wrap{min-height:calc(100vh - 40px)}
body.gated .page{max-width:none;padding:20px}

/* ---------- directory autocomplete (users page) ---------- */
.acwrap{position:relative}
.acmenu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow);z-index:20;overflow:hidden;max-height:280px;overflow-y:auto}
.acitem{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:9px 12px;cursor:pointer;font-family:var(--sans)}
.acitem:last-child{border-bottom:0}
.acitem:hover,.acitem:focus{background:var(--surface-2)}
.acname{font-size:.86rem;font-weight:600;color:var(--ink)}
.acsec{font-size:.72rem;color:var(--muted)}
.acmail{font-family:var(--mono);font-size:.7rem;color:var(--faint)}