*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Original warm slate base, darkened further per request (still not pure #000). */
  --bg:#050508;--surface:#0f1017;--card:#16171f;--card2:#1a1b25;--border:#262733;
  --surface-rgb:15,16,23;--card-rgb:22,23,31;--card2-rgb:26,27,37;
  /* Blue accent kept (already close to Instafel's palette), tuned brighter */
  --accent:#4f7fce;--accent2:#6a9adf;--success:#22c55e;
  --warn:#e9a23b;--error:#f43f5e;--text:#e8ecf1;--muted:#6b7a8d;
  --accent-rgb:79,127,206;--accent2-rgb:106,154,223;--success-rgb:34,197,94;--warn-rgb:233,162,59;--error-rgb:244,63,94;
  --mono:'JetBrains Mono',monospace;--sans:'Inter',system-ui,sans-serif;
  --radius:18px;--radius-lg:26px;--radius-pill:999px;
  /* iOS-style frosted glass — a translucent tint plus blur+saturation.
     Tuned lighter than a naive iOS copy (24px/180%) since backdrop-filter
     compositing is the #1 GPU cost on this page; 14px/140% still reads as
     "frosted" but is noticeably cheaper to paint, especially once several
     glass surfaces (nav + tabs + modal) are on screen at once. */
  --glass-blur:blur(14px) saturate(140%);
}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
button,.btn,.tab,.route-opt,a,input,select{-webkit-tap-highlight-color:transparent;touch-action:manipulation;outline:none}
button:focus-visible,a:focus-visible{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.45)}
/* Subtle topographic contour pattern — routes and maps are the visual
   language of logistics. Much more distinctive than the generic grid. */
body::before{content:'';position:fixed;inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M40 10 Q60 40 100 30 T160 50 T190 40' fill='none' stroke='%232a3444' stroke-width='.6' opacity='.4'/%3E%3Cpath d='M10 60 Q50 80 90 70 T150 90 T200 80' fill='none' stroke='%232a3444' stroke-width='.5' opacity='.3'/%3E%3Cpath d='M20 120 Q70 140 110 125 T170 145 T200 130' fill='none' stroke='%232a3444' stroke-width='.5' opacity='.25'/%3E%3Cpath d='M30 170 Q80 190 120 180 T180 195' fill='none' stroke='%232a3444' stroke-width='.4' opacity='.2'/%3E%3C/svg%3E");
  background-size:200px 200px;pointer-events:none;z-index:0}
/* Ambient glow — b1 (blue) now does a slow breathing pulse in addition
   to drifting, for a more "alive" feel. Still just transform + opacity
   (compositor-only properties, no layout/paint work), plus contain:strict
   and will-change to keep it isolated to its own GPU layer — this is the
   cheapest possible kind of continuous animation, so it stays smooth even
   on low-end devices regardless of duration. */
.blob{position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:.15;contain:strict}
body.tab-hidden .blob{opacity:0;transition:opacity .5s}
body.admin-open .blob{opacity:0;transition:opacity .5s}
.b1{width:600px;height:600px;background:radial-gradient(circle,rgba(79,127,206,.4) 0%,transparent 70%);top:-250px;left:-200px;
  animation:blueGlow 9s ease-in-out infinite;will-change:transform,opacity}
.b2{width:450px;height:450px;background:radial-gradient(circle,rgba(233,162,59,.15) 0%,transparent 70%);bottom:-180px;right:-150px;animation:drift2 36s ease-in-out infinite}
@keyframes blueGlow{
  0%,100%{transform:translate(0,0) scale(1);opacity:.18}
  50%{transform:translate(18px,14px) scale(1.1);opacity:.34}
}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(15px,10px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,-15px)}}
@media(max-width:620px){
  .b1,.maint-blob.m1{width:340px;height:340px}
  .b2,.maint-blob.m2{width:280px;height:280px}
}
@media(prefers-reduced-motion:reduce){
  .blob,.maint-blob{animation:none!important;opacity:.1!important}
  .animate-up{animation:none!important;opacity:1!important;transform:none!important}
  .aup-skel{animation:none!important;opacity:.5}
}

.page{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:0 20px}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sppulse{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(2.4)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.animate-up{animation:fadeUp .5s cubic-bezier(.4,0,.2,1) both}
.delay-1{animation-delay:.08s}.delay-2{animation-delay:.16s}.delay-3{animation-delay:.24s}.delay-4{animation-delay:.32s}

/* ── iOS-style loading indicator — 8 radial bars fading in sequence,
   the classic UIActivityIndicatorView look. Pure CSS, no images.
   Usage: <div class="ios-spinner"><div></div>×8</div>
   .spin / .boot-spin reuse the same mechanism so every existing loader
   in the app (single-AWB, bulk, label, boot screen) upgrades for free —
   just needs the 8 empty child divs added in the markup. Color follows
   currentColor, so wrap in something with the right text color, or use
   the .white modifier below.
   Trimmed from 12 bars to 8 (real UIActivityIndicatorView default) —
   fewer concurrently-animating nodes, noticeably cheaper on low-end
   devices, and a slightly cleaner/more "modern" cadence at this size.
   Eased with cubic-bezier instead of linear so each blade's fade has a
   soft snap-in / gentle-out feel rather than a mechanical linear ramp,
   plus a subtle glow on the brightest blade. */
@keyframes ios-spin-fade{
  0%{opacity:1;filter:drop-shadow(0 0 3px currentColor)}
  35%{opacity:.5;filter:none}
  100%{opacity:.12;filter:none}
}
.ios-spinner,.spin,.boot-spin{position:relative;display:inline-block;width:38px;height:38px;color:#fff}
.boot-spin{width:34px;height:34px}
.ios-spinner.sm{width:22px;height:22px}
.ios-spinner.white{color:#fff}
.ios-spinner div,.spin div,.boot-spin div{position:absolute;inset:0;animation:ios-spin-fade 1s cubic-bezier(.4,0,.6,1) infinite}
.ios-spinner div::after,.spin div::after,.boot-spin div::after{content:'';position:absolute;top:5%;left:44.5%;width:11%;height:24%;border-radius:50%;background:currentColor}
.ios-spinner div:nth-child(1),.spin div:nth-child(1),.boot-spin div:nth-child(1){transform:rotate(0deg);animation-delay:-.875s}
.ios-spinner div:nth-child(2),.spin div:nth-child(2),.boot-spin div:nth-child(2){transform:rotate(45deg);animation-delay:-.75s}
.ios-spinner div:nth-child(3),.spin div:nth-child(3),.boot-spin div:nth-child(3){transform:rotate(90deg);animation-delay:-.625s}
.ios-spinner div:nth-child(4),.spin div:nth-child(4),.boot-spin div:nth-child(4){transform:rotate(135deg);animation-delay:-.5s}
.ios-spinner div:nth-child(5),.spin div:nth-child(5),.boot-spin div:nth-child(5){transform:rotate(180deg);animation-delay:-.375s}
.ios-spinner div:nth-child(6),.spin div:nth-child(6),.boot-spin div:nth-child(6){transform:rotate(225deg);animation-delay:-.25s}
.ios-spinner div:nth-child(7),.spin div:nth-child(7),.boot-spin div:nth-child(7){transform:rotate(270deg);animation-delay:-.125s}
.ios-spinner div:nth-child(8),.spin div:nth-child(8),.boot-spin div:nth-child(8){transform:rotate(315deg);animation-delay:0s}
@media(prefers-reduced-motion:reduce){
  .ios-spinner div,.spin div,.boot-spin div{animation-duration:2s;animation-timing-function:linear}
}

/* ─── TOKEN SETUP SCREEN ─── */
/* Background is a plain dark gradient plus an inline SVG line pattern
   (#wave-lines, defined once near the top of <body> and reused via
   <use>) — no raster image, no HTTP request, scales crisply at any
   size, and there's no animation running behind the card. */
#setup-screen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;
  background:linear-gradient(160deg,#0e1520 0%,#080c12 60%,#050709 100%)}
#setup-screen.hidden{display:none}
.setup-card{position:relative;z-index:1;background:rgba(var(--card-rgb),.72);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:40px 36px;max-width:440px;width:100%;box-shadow:0 20px 25px -5px rgba(0,0,0,0.5),0 8px 10px -6px rgba(0,0,0,0.5);animation:fadeUp .5s cubic-bezier(.4,0,.2,1) both;}
.setup-icon{width:56px;height:56px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:16px;display:grid;place-items:center;margin:0 auto 20px;box-shadow:0 10px 24px rgba(79,127,206,.32);}
.setup-icon svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.setup-title{font-size:1.3rem;font-weight:700;text-align:center;margin-bottom:6px}
.setup-sub{font-size:.84rem;color:var(--muted);text-align:center;line-height:1.6;margin-bottom:28px}
.setup-sub a{color:var(--accent);text-decoration:none}
.setup-sub a:hover{text-decoration:underline}
.field{margin-bottom:16px}
.field-label{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:7px;display:block}
.field input{width:100%;background:var(--surface);border:1.5px solid var(--border);color:var(--text);font-family:var(--mono);font-size:.88rem;padding:13px 16px;border-radius:12px;outline:none;letter-spacing:.03em;transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:var(--muted);font-family:var(--sans);letter-spacing:0;font-size:.82rem}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,127,206,.14)}
.field input.error{border-color:var(--error);animation:shake .3s ease}
.setup-err{background:rgba(244,63,94,.08);border:1px solid rgba(244,63,94,.25);border-radius:10px;padding:10px 14px;color:#fda4af;font-size:.8rem;margin-bottom:16px;display:none;animation:slideDown .25s ease}
.setup-info{background:rgba(79,127,206,.06);border:1px solid rgba(79,127,206,.16);border-radius:10px;padding:11px 14px;color:var(--accent);font-size:.78rem;margin-bottom:20px;display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.setup-info svg{flex-shrink:0;margin-top:1px}
.setup-footer{text-align:center;margin-top:14px;font-size:.73rem;color:var(--muted)}

/* ── ACCOUNT SCREEN (login/signup gate) ── */
#boot-loader{position:fixed;inset:0;z-index:310;background:var(--bg);display:flex;align-items:center;justify-content:center}
#boot-loader.hidden{display:none}
.boot-spin{margin:0 auto}

#account-screen{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;
  background:linear-gradient(160deg,#0e1520 0%,#080c12 60%,#050709 100%)}
#account-screen.hidden{display:none}
/* .acc-mesh / .acc-grid / .acc-ring decorations were removed: they were
   three permanently-running animations (two using filter:blur, one an
   animated conic-gradient) repainting every frame behind the sign-in
   card. .wave-svg below is a single static (non-animated) inline SVG —
   one paint, no image request, no filter cost. */
.wave-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .acc-card{animation-name:none!important}
}
.acc-card{position:relative;z-index:1;background:rgba(var(--card-rgb),.72);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:40px 34px 32px;max-width:420px;width:100%;box-shadow:0 20px 25px -5px rgba(0,0,0,0.5),0 8px 10px -6px rgba(0,0,0,0.5);animation:fadeUp .5s cubic-bezier(.4,0,.2,1) both;}
.acc-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  background:rgba(15,22,35,.6);color:var(--muted);display:grid;place-items:center;cursor:pointer;z-index:2;
  transition:border-color .15s,color .15s,background-color .15s}
.acc-close svg{width:15px;height:15px}
.acc-close:hover{border-color:var(--error);color:#fda4af;background:rgba(244,63,94,.1)}
.acc-icon{width:60px;height:60px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:18px;display:grid;place-items:center;margin:0 auto 22px;box-shadow:0 10px 30px rgba(79,127,206,.35)}
.acc-icon svg{width:28px;height:28px}
.acc-title{font-size:1.5rem;font-weight:800;text-align:center;letter-spacing:-.02em}
.acc-sub{font-size:.85rem;color:var(--muted);text-align:center;line-height:1.6;margin:8px 0 26px}
.acc-field{margin-bottom:16px}
.acc-input-wrap{position:relative}
.acc-input-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none;transition:color .2s}
.acc-input-wrap input{width:100%;background:var(--surface);border:1.5px solid var(--border);color:var(--text);font-family:var(--sans);font-size:.88rem;padding:13px 16px 13px 42px;border-radius:12px;outline:none;transition:border-color .2s,box-shadow .2s}
.acc-input-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,127,206,.14)}
.acc-input-wrap input:focus + .acc-input-ic,.acc-input-wrap input:not(:placeholder-shown) ~ .acc-input-ic{color:var(--accent)}
.acc-submit{width:100%;justify-content:center;margin-top:6px;padding:14px;font-size:.92rem;box-shadow:0 10px 28px rgba(255,255,255,.14)}
.acc-submit:active{transform:scale(.98)}
.acc-foot{text-align:center;font-size:.75rem;color:var(--muted);margin-top:18px}

/* ── ADMIN USERS TABLE ── */
.aup-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px}
.aup-count{font-size:.78rem;color:var(--muted);font-weight:600}
.aup-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.aup-table{width:100%;min-width:520px;border-collapse:collapse;font-size:.82rem;table-layout:fixed}
.aup-table th{text-align:left;color:var(--muted);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--border);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:visible}
.aup-table td{padding:12px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.aup-cell-name,.aup-table th:nth-child(1){width:33%}
.aup-cell-role,.aup-table th:nth-child(2){width:12%;white-space:nowrap}
.aup-cell-status,.aup-table th:nth-child(3){width:14%;white-space:nowrap}
.aup-cell-login,.aup-table th:nth-child(4){width:21%;white-space:nowrap;color:var(--muted);font-size:.76rem}
.aup-row-actions,.aup-table th:nth-child(5){width:20%;text-align:right;white-space:nowrap}
.aup-name,.aup-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aup-user-cell{display:flex;align-items:center;gap:10px;min-width:0}
.aup-avatar{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:.78rem;font-weight:700;
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));text-transform:uppercase}
.aup-user-text{min-width:0}
.aup-table tbody tr{transition:background-color .15s}
.aup-table tbody tr:hover{background:rgba(148,163,184,.05)}
.aup-name{font-weight:600}
.aup-email{color:var(--muted);font-size:.76rem;margin-top:1px}
.aup-badge{display:inline-block;padding:4px 11px;border-radius:20px;font-size:.68rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.aup-badge.admin{background:rgba(245,158,11,.15);color:var(--warn)}
.aup-badge.user{background:rgba(79,127,206,.15);color:var(--accent)}
.aup-badge.active{background:rgba(34,197,94,.15);color:var(--success)}
.aup-badge.suspended{background:rgba(244,63,94,.15);color:var(--error)}
/* NOTE: display:flex must never be set directly on the <td> — that removes it
   from the table layout algorithm and lets it overlap neighboring columns.
   Flex lives on this inner wrapper instead. */
.aup-actions-wrap{display:inline-flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap}
.aup-icon-btn{width:32px;height:32px;border-radius:9px;border:1.5px solid var(--border);background:transparent;
  color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  transition:border-color .15s,color .15s,background-color .15s}
.aup-icon-btn svg{width:15px;height:15px;pointer-events:none}
.aup-btn-label{display:none}
.aup-icon-btn:hover:not(:disabled){border-color:rgba(255,255,255,.35);color:var(--text);background:rgba(255,255,255,.08)}
.aup-icon-btn.danger:hover:not(:disabled){border-color:var(--error);color:#fda4af;background:rgba(244,63,94,.08)}
.aup-icon-btn:disabled{opacity:.45;cursor:not-allowed}
.aup-icon-btn.is-loading svg{display:none}
.aup-icon-btn.is-loading{position:relative}
.aup-icon-btn.is-loading::after{content:'';width:14px;height:14px;border:2px solid var(--border);border-top-color:#fff;
  border-radius:50%;animation:spin .6s linear infinite}
.aup-icon-btn.danger.is-loading::after{border-top-color:var(--error)}

/* Skeleton loading rows for the user table */
.aup-skel{border-radius:6px;background:linear-gradient(90deg,rgba(148,163,184,.08) 25%,rgba(148,163,184,.18) 37%,rgba(148,163,184,.08) 63%);
  background-size:400% 100%;animation:skelShine 1.4s ease-in-out infinite}
@keyframes skelShine{0%{background-position:100% 0}100%{background-position:-100% 0}}
.limits-head{display:none;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;
  padding:0 2px 8px}
.aup-limits-grid{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;font-size:.8rem;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.aup-limits-grid>span{font-weight:600;text-transform:capitalize}
.aup-limits-grid input,.aup-limits-grid select{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:7px 10px;font-family:var(--sans);font-size:.78rem;outline:none;transition:border-color .2s}
.aup-limits-grid input{width:92px}
.aup-limits-grid select{width:76px}
.aup-limits-grid input:focus,.aup-limits-grid select:focus{border-color:var(--accent)}

/* ── TOP NAV — Instafel-style floating pill bar: icon+name on the
   left, token status + profile cluster on the right. Replaces the
   old full-width green token bar and the two fixed bottom-corner
   fab buttons (now living inside .topnav-right, see #admin-fab /
   #logout-fab rules further down — same ids, so JS is untouched). ── */
.topnav{position:sticky;top:14px;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:8px 8px 8px 16px;margin:14px 0 34px;
  background:rgba(var(--card-rgb),.55);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-pill);box-shadow:0 8px 24px -8px rgba(0,0,0,.6);animation:fadeUp .5s ease both}
.topnav-left{display:flex;align-items:center;gap:10px;min-width:0}
.topnav-icon{flex-shrink:0;width:30px;height:30px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:9px;display:grid;place-items:center;box-shadow:0 4px 12px rgba(79,127,206,.35)}
.topnav-icon svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.topnav-name{font-size:.92rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topnav-name span{color:var(--accent2)}
.topnav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* Compact token status pill — clock icon + status text, colour
   shifts green → yellow → red as the token nears expiry. The pill's
   `color` drives both the text and the icon (stroke="currentColor"
   on the svg), so a single class swap recolors everything at once. */
#token-bar.token-pill{position:relative;z-index:1;display:flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid transparent;border-radius:var(--radius-pill);
  font-family:var(--sans);font-size:.72rem;font-weight:600;cursor:pointer;white-space:nowrap;color:#ffc978;
  transition:background-color .2s,border-color .2s,color .2s;animation:fadeIn .4s ease;}
#token-bar.token-pill.state-ok{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.28);color:#86efac}
#token-bar.token-pill.state-ok:hover{background:rgba(34,197,94,.17);border-color:rgba(34,197,94,.42)}
#token-bar.token-pill.state-warn{background:rgba(233,162,59,.1);border-color:rgba(233,162,59,.28);color:#ffc978}
#token-bar.token-pill.state-warn:hover{background:rgba(233,162,59,.17);border-color:rgba(233,162,59,.42)}
#token-bar.token-pill.state-critical{background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.3);color:#fda4af}
#token-bar.token-pill.state-critical:hover{background:rgba(244,63,94,.17);border-color:rgba(244,63,94,.45)}
.tb-clock{width:14px;height:14px;flex-shrink:0;display:block;color:inherit}

@media(max-width:480px){
  .topnav{padding:7px 7px 7px 12px}
  .topnav-name{font-size:.84rem}
  #token-bar.token-pill{padding:6px 10px 6px 8px;gap:5px}
  #tb-text{font-size:.68rem}
}
@media(max-width:340px){
  #tb-text{display:none} /* icon-only token pill on genuinely tiny screens */
  #token-bar.token-pill{padding:6px 8px}
}

.status-badge-wrap{display:flex;justify-content:center;margin-top:20px}
.status-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 10px;border-radius:999px;border:1px solid transparent;transition:background-color .4s,border-color .4s,color .4s;backdrop-filter:blur(12px)}
.sb-online{background:rgba(34,197,94,.07);border-color:rgba(34,197,94,.25);color:#86efac}
.sb-offline{background:rgba(244,63,94,.07);border-color:rgba(244,63,94,.25);color:#fda4af}
.sb-warn{background:rgba(245,158,11,.07);border-color:rgba(245,158,11,.25);color:#fde68a}
.sb-checking{background:rgba(75,96,128,.07);border-color:rgba(75,96,128,.18);color:var(--muted)}
.sp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;position:relative}
.sp-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;opacity:0}
.sp-dot-ok{background:#22c55e}.sp-dot-ok::after{background:rgba(34,197,94,.4);animation:sppulse 2s ease-in-out infinite}
.sp-dot-err{background:#f43f5e}.sp-dot-err::after{background:rgba(244,63,94,.4);animation:sppulse .85s ease-in-out infinite}
.sp-dot-warn{background:#f59e0b}.sp-dot-warn::after{background:rgba(245,158,11,.4);animation:sppulse 1.3s ease-in-out infinite}
.sp-dot-chk{background:var(--muted)}
.sp-label{font-size:.78rem;font-weight:700;letter-spacing:.02em}
.sp-sep{width:1px;height:11px;background:currentColor;opacity:.25;flex-shrink:0}
.sp-meta{font-size:.7rem;font-weight:500;opacity:.6}
.status-sub{text-align:center;margin-top:8px;font-size:.7rem;color:var(--muted);font-family:var(--mono);letter-spacing:.02em}

/* ── HERO HEADER — big bold Instafel-style headline, pill logo badge ── */
header{text-align:center;margin-bottom:44px;padding-top:8px}
.logo{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;margin-bottom:26px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-pill);
  animation:fadeUp .5s ease both}
.logo-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:9px;display:grid;place-items:center;box-shadow:0 4px 12px rgba(79,127,206,.35)}
.logo-icon svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.logo-name{font-size:.86rem;font-weight:600;letter-spacing:.01em}.logo-name span{color:var(--accent)}
h1{font-size:clamp(2.1rem,7vw,3.4rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;
  background:linear-gradient(180deg,#fff 0%,#c7cdd6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fadeUp .5s .1s ease both}
h1 em{font-style:normal;-webkit-text-fill-color:var(--accent2);background:none}
.sub{margin-top:14px;color:var(--muted);font-size:1rem;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.55;animation:fadeUp .5s .2s ease both}

/* Floating pill nav — mirrors Instafel's rounded segmented tab bar */
.tabs{display:flex;background:rgba(var(--card-rgb),.55);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-pill);padding:6px;gap:4px;margin-bottom:26px;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.tab{flex:1;padding:11px;border:none;border-radius:var(--radius-pill);background:transparent;color:var(--muted);font-family:var(--sans);font-size:.85rem;font-weight:600;cursor:pointer;transition:background-color .22s,color .22s,box-shadow .22s;display:flex;align-items:center;justify-content:center;gap:7px}
.tab svg{width:15px;height:15px;flex-shrink:0}
.tab.active{background:var(--text);color:#000;box-shadow:0 4px 10px -2px rgba(0,0,0,.5)}

/* Tab-switch transition — replays automatically every time switchTab()
   toggles a pane's display from none to visible (CSS animations restart
   on re-entering the render tree), so no JS changes were needed here. */
#pane-single,#pane-bulk,#pane-label{animation:paneIn .32s cubic-bezier(.16,1,.3,1) both}
@keyframes paneIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#pane-single,#pane-bulk,#pane-label{animation:none}}

.search-card{background:rgba(var(--card-rgb),.6);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:28px;margin-bottom:22px;box-shadow:0 10px 15px -3px rgba(0,0,0,0.5),0 4px 6px -4px rgba(0,0,0,0.5)}
.row{display:flex;gap:10px}
input[type=text]{flex:1;background:var(--surface);border:1.5px solid var(--border);color:var(--text);font-family:var(--mono);font-size:.9rem;padding:14px 18px;border-radius:12px;outline:none;letter-spacing:.04em;transition:border-color .2s,box-shadow .2s}
input[type=text]::placeholder{color:var(--muted);font-family:var(--sans);font-size:.85rem;letter-spacing:0}
input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,127,206,.14)}
/* All button variants unified to one black-and-white gradient look
   (matches the home hero's light pill) — blue accent removed from
   buttons specifically; everything else in the UI (badges, focus
   rings on inputs, status colors, icon glows) keeps the blue accent
   as before, per request. */
.btn{position:relative;background:linear-gradient(135deg,#f5f5f7,#e2e3e6);color:#0a0a0c;font-family:var(--sans);font-weight:600;font-size:.9rem;padding:14px 26px;border:none;outline:none;border-radius:var(--radius-pill);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:background .2s,transform .1s,box-shadow .2s}
.btn:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.4)}
/* Instafel-style light pill — the "primary" hero action look, now the
   look every button shares, so this class is kept only for compatibility. */
.btn-light{background:linear-gradient(135deg,#f5f5f7,#e2e3e6);color:#0a0a0c}
.btn-light:hover:not(:disabled){background:linear-gradient(135deg,#ffffff,#eceded);box-shadow:0 4px 16px rgba(255,255,255,.2)}
.btn.btn-loading{color:transparent!important;opacity:1!important;pointer-events:none}
.btn.btn-loading svg{visibility:hidden}
.btn.btn-loading::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid rgba(10,10,12,.25);border-top-color:#0a0a0c;border-radius:50%;animation:spin .6s linear infinite}
.btn-outline.btn-loading::after{border-color:rgba(10,10,12,.25);border-top-color:#0a0a0c}
.btn:hover:not(:disabled){background:linear-gradient(135deg,#ffffff,#eceded);box-shadow:0 4px 16px rgba(0,0,0,.28)}.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed}.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-green{background:linear-gradient(135deg,#f5f5f7,#e2e3e6);color:#0a0a0c}
.btn-outline{background:linear-gradient(135deg,#f5f5f7,#e2e3e6);border:1.5px solid rgba(0,0,0,.06);color:#0a0a0c}
.btn-outline:hover:not(:disabled){background:linear-gradient(135deg,#ffffff,#eceded);color:#0a0a0c}
.btn-sm{padding:9px 16px;font-size:.82rem;border-radius:var(--radius-pill)}

textarea{width:100%;background:var(--surface);border:1.5px solid var(--border);color:var(--text);font-family:var(--mono);font-size:.82rem;padding:14px 16px;border-radius:12px;outline:none;resize:vertical;min-height:140px;letter-spacing:.03em;line-height:1.6;transition:border-color .2s}
textarea::placeholder{color:var(--muted);font-family:var(--sans);font-size:.85rem;letter-spacing:0;line-height:1.5}
textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,127,206,.14)}
.bulk-hint{font-size:.75rem;color:var(--muted);margin-top:8px}
.bulk-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

.progress-wrap{margin-top:18px;display:none}
.progress-bar-bg{background:var(--surface);border-radius:999px;height:6px;overflow:hidden;margin-bottom:10px}
.progress-bar-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .3s}
.progress-stats{display:flex;gap:16px;font-size:.75rem;flex-wrap:wrap}
.ps-item{display:flex;align-items:center;gap:5px}
.ps-dot{width:7px;height:7px;border-radius:50%}

.bulk-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:18px;border-radius:14px;border:1px solid var(--border);display:none}
table{width:100%;border-collapse:collapse;font-size:.8rem}
thead tr{background:var(--surface)}
th{padding:11px 14px;text-align:left;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap}
td{padding:11px 14px;border-top:1px solid var(--border);vertical-align:middle;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr:hover td{background:rgba(79,127,206,.04)}
.td-awb{font-family:var(--mono);font-size:.8rem;color:var(--accent);font-weight:600}
.td-pc{font-family:var(--mono);font-size:.75rem}
.status-chip{display:inline-flex;align-items:center;gap:4px;font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.sc-ok{background:rgba(34,197,94,.1);color:var(--success);border:1px solid rgba(34,197,94,.2)}
.sc-rto{background:rgba(244,63,94,.1);color:#fb7185;border:1px solid rgba(244,63,94,.2)}
.sc-ofd{background:rgba(245,158,11,.1);color:var(--warn);border:1px solid rgba(245,158,11,.2)}
.sc-tr{background:rgba(79,127,206,.1);color:var(--accent);border:1px solid rgba(79,127,206,.2)}
.sc-err{background:rgba(244,63,94,.06);color:#fb7185;border:1px solid rgba(244,63,94,.15)}
.sc-def{background:rgba(75,96,128,.08);color:var(--muted);border:1px solid var(--border)}

#loader{display:none;text-align:center;padding:44px 0}
.spin{margin:0 auto 12px}
#loader p{color:var(--muted);font-size:.88rem}

#err{display:none;background:rgba(244,63,94,.07);border:1px solid rgba(244,63,94,.25);border-radius:14px;padding:14px 18px;color:#fda4af;font-size:.85rem;margin-bottom:18px;animation:slideDown .3s ease}

#result{display:none;animation:fadeUp .4s ease}
.top-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.pill-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.awb-tag{font-family:var(--mono);font-size:.78rem;background:rgba(79,127,206,.1);border:1px solid rgba(79,127,206,.2);color:var(--accent);padding:4px 13px;border-radius:999px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 12px;border-radius:999px}
.p-rto{background:rgba(244,63,94,.12);color:#fb7185;border:1px solid rgba(244,63,94,.25)}
.p-ok{background:rgba(34,197,94,.12);color:var(--success);border:1px solid rgba(34,197,94,.25)}
.p-ofd{background:rgba(245,158,11,.1);color:var(--warn);border:1px solid rgba(245,158,11,.25)}
.p-tr{background:rgba(79,127,206,.1);color:var(--accent);border:1px solid rgba(79,127,206,.25)}
.p-def{background:rgba(75,96,128,.1);color:var(--muted);border:1px solid var(--border)}
.p-hub{background:rgba(79,127,206,.1);color:#7eddd4;border:1px solid rgba(79,127,206,.25)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.p-ofd .dot,.p-tr .dot{animation:blink 1.1s ease-in-out infinite}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.card-full{margin-bottom:20px}
/* Result grid cards intentionally skip backdrop-filter — unlike the
   chrome (nav/tabs/modal) which appears once, these can repeat many
   times on screen at once, and each blurred layer is a separate GPU
   composite pass. A flat translucent tint keeps the "glass" look
   without the per-card blur cost. */
.card{background:rgba(var(--card2-rgb),.9);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s,transform .2s,background-color .2s}
.card:hover{border-color:rgba(79,127,206,.35);transform:translateY(-2px);background:rgba(var(--card2-rgb),1)}
.c-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;margin-bottom:2px}
.ci-blue{background:rgba(79,127,206,.14)}.ci-amber{background:rgba(233,162,59,.14)}.ci-amber svg{stroke:var(--warn)}.ci-green{background:rgba(34,197,94,.14)}
.c-label{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.c-value{font-family:var(--mono);font-size:.95rem;font-weight:600;color:var(--text);word-break:break-all;line-height:1.4}
.c-value.plain{font-family:var(--sans);font-size:.95rem}
.copy-btn{margin-top:auto;align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--text);font-family:var(--sans);font-size:.7rem;font-weight:600;padding:5px 10px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:background .15s}
.copy-btn:hover{background:rgba(255,255,255,.12)}
.copy-btn.ok{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.28);color:var(--success)}

.sec-label{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:12px}
.tl{position:relative;padding-left:26px}
.tl::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(to bottom,var(--accent),transparent)}
.tl-item{position:relative;margin-bottom:16px;animation:fadeUp .4s ease both}
.tl-item:last-child{margin-bottom:0}
.tl-dot{position:absolute;left:-22px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);box-shadow:0 0 0 2px rgba(79,127,206,.2)}
.tl-item:first-child .tl-dot{background:var(--accent2);box-shadow:0 0 0 2px rgba(106,154,223,.2)}
.tl-item:last-child .tl-dot{background:var(--muted);box-shadow:none}
.tl-time{font-family:var(--mono);font-size:.65rem;color:var(--muted);margin-bottom:2px}
.tl-evt{font-size:.8rem;font-weight:600}
.tl-loc{font-size:.74rem;color:var(--muted);margin-top:1px}

/* ─── LABEL GENERATOR ─── */
.label-card{background:rgba(var(--card-rgb),.6);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:26px;margin-bottom:22px;box-shadow:0 10px 15px -3px rgba(0,0,0,0.5),0 4px 6px -4px rgba(0,0,0,0.5)}
.label-section{margin-bottom:20px}
.label-section-title{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.label-section-title::after{content:'';flex:1;height:1px;background:var(--border)}
.label-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.label-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.label-field{display:flex;flex-direction:column;gap:6px}
.label-field label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.label-field input,.label-field textarea,.label-field select{background:var(--surface);border:1.5px solid var(--border);color:var(--text);font-family:var(--sans);font-size:.84rem;padding:10px 13px;border-radius:10px;outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
.label-field input:focus,.label-field textarea:focus,.label-field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,127,206,.14)}
.label-field textarea{min-height:70px;resize:vertical;font-family:var(--sans)}
.label-field select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234b6080' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.label-awb-row{display:flex;gap:10px;align-items:flex-end;margin-bottom:20px}
.label-awb-row .label-field{flex:1;min-width:0}
.label-fetch-btn{padding:10px 18px;font-size:.84rem;white-space:nowrap;align-self:flex-end;flex-shrink:0}

.route-toggle{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:4px;gap:4px;margin-bottom:20px}
.route-opt{flex:1;padding:9px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-family:var(--sans);font-size:.82rem;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s;text-align:center}
.route-opt.active{background:linear-gradient(135deg,#f5f5f7,#e2e3e6);color:#0a0a0c;box-shadow:0 2px 4px -1px rgba(0,0,0,0.35)}

.label-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

#label-preview-area{display:none;margin-top:20px}
.bulk-label-section{display:none}
.bulk-awb-textarea{min-height:100px}
.bulk-limit-note{font-size:.75rem;color:var(--warn);margin-top:6px;display:flex;align-items:center;gap:5px}

#label-loader{display:none;text-align:center;padding:20px 0;color:var(--muted);font-size:.84rem}
#label-loader .spin{width:28px;height:28px;border-width:2.5px;margin:0 auto 8px}
#label-err{display:none;background:rgba(244,63,94,.07);border:1px solid rgba(244,63,94,.25);border-radius:12px;padding:12px 16px;color:#fda4af;font-size:.82rem;margin-bottom:14px;animation:slideDown .3s ease}
#rvp-loader{display:none;text-align:center;padding:20px 0;color:var(--muted);font-size:.84rem}
#rvp-loader .spin{width:28px;height:28px;border-width:2.5px;margin:0 auto 8px}
#rvp-err{display:none;background:rgba(244,63,94,.07);border:1px solid rgba(244,63,94,.25);border-radius:12px;padding:12px 16px;color:#fda4af;font-size:.82rem;margin-bottom:14px;animation:slideDown .3s ease}

/* ═══════════════════════════════════════════════
   PRINTABLE LABEL — matches reference image exactly
   Black & white, Data Matrix, correct layout
   ═══════════════════════════════════════════════ */
.label-printable{
  width:190mm;
  font-family:'Arimo','Arial',Helvetica,sans-serif;
  font-size:9pt;
  border:2px solid #000;
  background:#ffffff;
  color:#000000;
  margin:0 auto 24px;
  page-break-after:always;
  page-break-inside:avoid;
  display:block;
  isolation:isolate;
}
/* Hard reset everything inside the printable label — never inherit theme colors */
.label-printable, .label-printable *{
  box-sizing:border-box;margin:0;padding:0;
  color:#000000 !important;
  font-family:'Arimo','Arial',Helvetica,sans-serif;
  text-shadow:none;
  letter-spacing:normal;
}
.label-printable a{color:#000000 !important;text-decoration:none}

/* Black COD/Prepaid banner — confined to the RIGHT column only, matching
   the reference invoices exactly (left column just shows "Customer
   Address" as plain text with no banner above it). */
.lp-cod-banner{
  display:block;
  width:100%;
  background:#000000;
  color:#ffffff !important;
  font-family:'Arimo','Arial',Helvetica,sans-serif;
  font-weight:700;
  font-size:13pt;
  padding:5px 14px;
  line-height:1.3;
  border-bottom:2px solid #000;
}
.lp-cod-banner *{color:#ffffff !important}

/* 2-column body below the banner */
.lp-top{
  display:flex;
  border-bottom:2px solid #000;
  min-height:72mm;
}

/* LEFT column — address block */
.lp-left{
  flex:0 0 46%;
  padding:10px 12px;
  border-right:2px solid #000;
  font-size:10.5pt;
  line-height:1.42;
  background:#ffffff;
}
.lp-addr-title{font-weight:700;font-size:10pt;margin-bottom:5px}
.lp-cname{font-weight:700;font-size:12.5pt;margin-bottom:4px;line-height:1.2}
.lp-addrline div{font-size:10.5pt;line-height:1.42}
.lp-return-block{
  margin-top:12px;
  padding-top:10px;
  border-top:1.5px solid #000;
  font-size:10.5pt;
  line-height:1.42;
}
.lp-return-title{font-weight:700;font-size:9.5pt;margin-bottom:4px}
.lp-return-name{font-weight:700;font-size:10pt}

/* RIGHT column */
.lp-right{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:0;
  position:relative;
  background:#ffffff;
  overflow:hidden;
}

/* Carrier + DataMatrix row */
.lp-carrier-dm-row{
  display:flex;
  align-items:flex-start;
  padding:10px 12px 4px;
  gap:8px;
  min-width:0;
}
.lp-carrier-left{flex:1;min-width:0}

/* "Valmo Pickup  DD/MM" on one row */
.lp-brand-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
  flex-wrap:nowrap;
}
.lp-brand{
  font-size:20pt;
  font-weight:700;
  font-style:normal;
  letter-spacing:-.4px;
  line-height:1;
  flex-shrink:0;
}
.lp-pickup-badge{
  display:inline-block;
  background:#000000;
  color:#ffffff !important;
  font-size:8.5pt;
  font-weight:700;
  padding:3px 8px;
  border-radius:2px;
  align-self:center;
  line-height:1.3;
  font-family:'Inter','Arial',Roboto,sans-serif;
  flex-shrink:0;
  white-space:nowrap;
}
.lp-pickup-date{
  display:inline-block;
  font-size:16pt;
  font-weight:700;
  border:2.5px solid #000;
  padding:1px 8px;
  margin-left:0;
  line-height:1.15;
  align-self:center;
  background:#ffffff;
  flex-shrink:0;
  white-space:nowrap;
}

/* Route codes — all lines render at the SAME size/weight, matching the
   reference label exactly (no big-main / small-sub split). Uses true
   bold (700) so it actually renders as Arial/Helvetica Bold — 570 isn't
   a loaded font weight so it was silently falling back to regular. */
.lp-route-main, .lp-route-sub{
  font-size:17pt;
  font-weight:660;
  letter-spacing:.3px;
  line-height:1.3;
  padding:1px;
}
.lp-route-main{margin-bottom:22px}
.lp-route-sub{font-weight:550;line-height:1.15;padding:0 1px}

/* DataMatrix — top right */
.lp-dm-box{
  flex-shrink:0;
  width:32mm;
  height:32mm;
}
.lp-dm-box canvas{
  width:32mm !important;
  height:32mm !important;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* AWB number text */
.lp-awb-text{
  font-weight:700;
  font-size:15pt;
  text-align:center;
  padding:1px 2px 1px;
  letter-spacing:1px;
}
/* PCDA-only: black bar with white text, matching reference label.
   D18S and RVP labels keep the plain (unboxed) AWB text style above.
   Bleeds 2px past the lp-right edges (clipped by lp-right's overflow:hidden)
   to guarantee true corner-to-corner coverage — without this, html2canvas
   subpixel rounding on the flex layout can leave a hairline white gap at
   the left/right edges of the box. */
.lp-awb-text.lp-awb-boxed{
  width:calc(100% + 4px);
  margin:8px -2px;
  padding:6px 10px;
  background:#000000;
  color:#ffffff !important;
}

/* Barcode */
.lp-barcode-wrap{
  padding:1px 14px 11px;
  text-align:center;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.lp-barcode-wrap svg{
  display:block;
  margin:0 auto;
  width:100% !important;
}

/* Product details section */
.lp-product{
  padding:8px 12px 8px;
  border-top:2px solid #000;
  background:#ffffff;
}
.lp-product-title{font-weight:700;font-size:9.5pt;margin-bottom:7px}

/* Fully self-contained — the site has a generic table/th/td/thead-tr
   rule (for the Bulk Tracking results grid) that was leaking dark-theme
   backgrounds, grid borders, and forced uppercase into this table since
   nothing here explicitly overrode them. Every inherited property is
   reset explicitly below so this table can never again be affected by
   unrelated site-wide styling, matching the plain, borderless reference
   layout exactly. */
.lp-ptable{width:100%;border-collapse:collapse;font-size:10pt;background:#fff}
.lp-ptable thead tr{background:transparent}
.lp-ptable th{
  font-weight:700;
  font-size:11pt;
  padding:1px 9px 2px 0;
  text-align:left;
  background:transparent;
  border:none;
  text-transform:none;
  letter-spacing:normal;
  white-space:normal;
  max-width:none;
  overflow:visible;
  text-overflow:clip;
}
.lp-ptable td{
  font-size:11pt;
  padding:1px 20px 1px 0;
  vertical-align:top;
  background:transparent;
  border:none;
  text-transform:none;
  letter-spacing:normal;
  white-space:normal;
  max-width:none;
  overflow:visible;
  text-overflow:clip;
}
/* Extra breathing room between the Color and Order No. columns specifically */
.lp-ptable th:nth-child(2),.lp-ptable td:nth-child(2){padding-right:27px}
.lp-ptable th:nth-child(3),.lp-ptable td:nth-child(3){padding-right:25px}
.lp-ptable th:nth-child(4),.lp-ptable td:nth-child(4){padding-right:31px}

/* TAX INVOICE footer */
.lp-tax-bar{
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:7px 12px;
  border-top:2px solid #000;
  font-weight:700;
  font-size:10pt;
  background:#f0f0f0;
}
.lp-tax-bar .lp-tax-center{position:absolute;left:50%;transform:translateX(-50%)}
.lp-tax-bar span:last-child{font-style:bold;font-weight:400}

/* ============================================================
   RVP (Return) label — a completely different, simpler layout
   from the two-column shipping label: plain paper, no outer
   border, big barcode with text baked in, then a details block
   with a small Data Matrix beside it. Matches the reference
   return-label photo exactly, INCLUDING its proportions — the
   reference photo is 3072x4096px, an exact 3:4 portrait ratio,
   with printed content filling only the top portion and plain
   white space below. Reuses .label-printable for font/print/
   export/scale-box handling, but overrides its width and locks
   the aspect-ratio so the whole label — not just its content —
   matches the reference shape exactly.
   ============================================================ */
.label-printable.rvp-printable{
  border:none;
  width:100mm;
  aspect-ratio:3/4;
  margin:0 auto 24px;
  overflow:hidden;
}
.rvp-body{padding:16px 18px 18px}
.rvp-heading{font-size:12pt;font-weight:700;margin-bottom:12px}
.rvp-barcode-wrap{margin:0 0 16px}
.rvp-barcode-wrap svg{width:100%;max-width:100%;height:auto;display:block}
.rvp-details{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.rvp-fields{flex:1;min-width:150px}
.rvp-row{margin-bottom:10px;line-height:1.3}
.rvp-cap{display:block;font-size:8pt;font-weight:400;margin-bottom:1px}
.rvp-val{display:block;font-size:10.5pt;font-weight:700;word-break:break-word}
.rvp-shipto .rvp-shipname{font-size:10.5pt;font-weight:700;margin-top:2px}
.rvp-addr{display:block;font-size:8.5pt;font-weight:400;line-height:1.5;margin-top:3px;max-width:100%}
.rvp-dm-box{flex-shrink:0;padding-top:2px}
.rvp-dm-box canvas{width:26mm;height:26mm;display:block}

/* preview wrapper — hugs the label's own width; no separate white panel behind/around it */
.label-preview-wrapper{
  position:relative;
  width:100%;
  background:transparent;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Scale box — keeps the label at its true 190mm print proportions while
   shrinking it to fit any viewport via transform:scale(), so nothing
   reflows/wraps differently between mobile preview and the printed page. */
.label-scale-box{
  position:relative;
  width:100%;
  max-width:190mm;
  margin:0 auto 24px;
  overflow:hidden;
}
.label-scale-box .label-printable{
  margin:0;
  transform-origin:top left;
}

/* Hub / route codes — editable directly on the label so a wrong
   auto-detected code can be corrected without re-fetching.
   Edit affordance is hover-only and reserves no layout space, so it
   never adds extra vertical gap or shows up in exports/print. */
.lp-route-main[contenteditable],.lp-route-sub[contenteditable]{
  cursor:text;border-radius:4px;outline-offset:2px;position:relative;
}
.lp-route-main[contenteditable]:hover,.lp-route-sub[contenteditable]:hover{
  background:rgba(79,127,206,.08) !important;
}
.lp-route-main[contenteditable]:focus,.lp-route-sub[contenteditable]:focus{
  background:#eef4ff !important;outline:2px solid #4f7fce;
}
.lp-route-main[contenteditable]:hover::after,.lp-route-sub[contenteditable]:hover::after{
  content:'✎ edit';
  position:absolute;right:-2px;top:-9px;
  font-size:6.5pt !important;font-weight:400 !important;font-style:normal;
  color:#4f7fce !important;background:#fff;padding:0 3px;border-radius:3px;
  letter-spacing:0;pointer-events:none;white-space:nowrap;
}

footer{position:relative;z-index:1;text-align:center;padding:36px 20px 28px;margin-top:50px;border-top:1px solid var(--border)}
.footer-brand{font-size:.9rem;font-weight:700;margin-bottom:6px}
.footer-brand span{color:var(--accent)}
.footer-credit{font-size:.78rem;color:var(--muted);line-height:1.7}
.footer-credit strong{color:var(--text)}
.footer-divider{width:40px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;margin:14px auto}

.uf-grid{display:block}
.uf-grid .field.full{grid-column:1 / -1}
.uf-field input,.uf-field select{width:100%;background:var(--surface);border:1.5px solid var(--border);color:var(--text);
  font-family:var(--sans);font-size:.88rem;padding:11px 14px;border-radius:12px;outline:none;transition:border-color .2s,box-shadow .2s}
.uf-field input:focus,.uf-field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,127,206,.14)}
.uf-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b6080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.field-wrap{position:relative}
.field-wrap input{padding-right:44px}
.toggle-pw{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;transition:color .15s}
.toggle-pw:hover{color:var(--text)}

@media print{
  body{background:#fff!important;color:#000!important}
  body::before,.blob,header,.tabs,#pane-single,#pane-bulk,.label-card,
  .label-actions,#token-bar,footer{display:none!important}
  .label-preview-wrapper{
    margin:0!important;padding:0!important;
    background:transparent!important;
    overflow:visible!important;border-radius:0!important;
  }
  .label-scale-box{
    height:auto!important;width:auto!important;max-width:none!important;
    overflow:visible!important;margin:0!important;
  }
  .label-printable{
    margin:0!important;
    border:2px solid #000!important;
    page-break-after:always;
    width:190mm!important;
    transform:none!important;
  }
  .label-printable.rvp-printable{
    border:none!important;
    width:100mm!important;
    aspect-ratio:3/4!important;
  }
  /* Force black backgrounds to print */
  .lp-cod-banner{
    background:#000!important;
    color:#fff!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  .lp-pickup-badge{
    background:#000!important;
    color:#fff!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  #label-preview-area{display:block!important}
  #pane-label{display:block!important}
  @page{size:A4 portrait;margin:8mm}
}

/* ADMIN PANEL + MAINTENANCE MODE */
/* Admin panel + sign-out are merged behind a single shield trigger in
   the nav (.topnav-profile-btn). #admin-fab / #logout-fab are now menu
   rows inside the dropdown — same ids/classes/onclick handlers as
   before, so all existing JS (.is-admin, .hidden toggling) is untouched;
   only their visual role changed from standalone circular buttons to
   list items. */
.topnav-profile-wrap{position:relative}
.topnav-profile-btn{width:34px;height:34px;border-radius:50%;background:transparent;border:1px solid var(--border);
  display:grid;place-items:center;cursor:pointer;opacity:.75;transition:opacity .2s,border-color .2s}
.topnav-profile-btn:hover{opacity:1;border-color:var(--accent)}
.topnav-profile-btn svg{width:16px;height:16px;stroke:var(--muted);transition:stroke .2s}
.topnav-profile-btn:hover svg{stroke:var(--accent)}
/* reflect admin state on the trigger itself once the real #admin-fab row gets .is-admin */
.topnav-profile-wrap:has(#admin-fab.is-admin) .topnav-profile-btn{opacity:1;border-color:rgba(34,197,94,.4)}
.topnav-profile-wrap:has(#admin-fab.is-admin) .topnav-profile-btn svg{stroke:var(--success)}

.topnav-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:30;min-width:172px;padding:6px;
  background:rgba(var(--card-rgb),.85);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 16px 32px -8px rgba(0,0,0,.65);
  display:flex;flex-direction:column;gap:2px;animation:slideDown .18s ease both}
.topnav-menu.hidden{display:none}
.topnav-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;border-radius:10px;
  background:transparent;color:var(--text);font-family:var(--sans);font-size:.82rem;font-weight:500;cursor:pointer;
  transition:background-color .15s}
.topnav-menu-item.hidden{display:none}
.topnav-menu-item svg{width:16px;height:16px;stroke:var(--muted);flex-shrink:0;transition:stroke .15s}
.topnav-menu-item:hover{background:rgba(255,255,255,.06)}
.topnav-menu-item:hover svg{stroke:var(--accent)}
.topnav-menu-item.is-admin svg{stroke:var(--success)}
.topnav-menu-item.danger:hover{background:rgba(244,63,94,.1)}
.topnav-menu-item.danger:hover svg{stroke:var(--error)}


.admin-overlay{position:fixed;inset:0;z-index:200;background:rgba(4,7,14,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .22s ease;
  will-change:opacity}
.admin-overlay.hidden{display:none}
.admin-modal{background:rgba(var(--card-rgb),.75);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:26px 26px;
  max-width:460px;width:100%;box-shadow:0 25px 50px -12px rgba(0,0,0,0.75);
  max-height:88vh;overflow-y:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;contain:content}
.admin-modal.wide{max-width:560px}
.admin-modal-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.admin-modal-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;position:relative;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 22px rgba(79,127,206,.35)}
.admin-modal-icon::after{content:'';position:absolute;inset:-6px;border-radius:18px;background:inherit;opacity:.25;filter:blur(10px);z-index:-1}
.admin-modal-icon svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.admin-modal-title{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.admin-modal-sub{font-size:.78rem;color:var(--muted);margin-top:2px}
.admin-close{margin-left:auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:transparent;
  color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:border-color .15s,color .15s;flex-shrink:0}
.admin-close:hover{border-color:var(--error);color:#fda4af}
.admin-close svg{width:14px;height:14px}

.admin-err{background:rgba(244,63,94,.08);border:1px solid rgba(244,63,94,.25);border-radius:10px;padding:10px 14px;
  color:#fda4af;font-size:.8rem;margin-bottom:16px;display:none;animation:shake .3s ease}
.admin-ok-msg{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);border-radius:10px;padding:10px 14px;
  color:#86efac;font-size:.8rem;margin-bottom:16px;max-height:0;opacity:0;overflow:hidden;padding-top:0;padding-bottom:0;
  border-width:0;margin-bottom:0;transition:max-height .25s ease,opacity .2s ease,padding .25s ease,margin .25s ease,border-width .25s ease}
.admin-ok-msg.show{max-height:60px;opacity:1;padding-top:10px;padding-bottom:10px;border-width:1px;margin-bottom:16px}

.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;padding:13px 15px;margin-bottom:8px;
  transition:border-color .2s,background-color .2s;will-change:border-color,background-color}
.toggle-row:hover{border-color:rgba(148,163,184,.4)}
.toggle-row.is-on{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.05)}
.toggle-row.is-danger.is-on{border-color:rgba(244,63,94,.4);background:rgba(244,63,94,.06)}
.toggle-info{display:flex;align-items:center;gap:11px;min-width:0}
.toggle-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:rgba(75,96,128,.14);transition:background .2s}
.toggle-ic svg{width:16px;height:16px;stroke:var(--muted);transition:stroke .2s}
.toggle-row.is-on .toggle-ic{background:rgba(245,158,11,.16)}
.toggle-row.is-on .toggle-ic svg{stroke:var(--warn)}
.toggle-row.is-danger.is-on .toggle-ic{background:rgba(244,63,94,.16)}
.toggle-row.is-danger.is-on .toggle-ic svg{stroke:#fb7185}
.toggle-text{min-width:0}
.toggle-name{font-size:.87rem;font-weight:600;line-height:1.3}
.toggle-desc{font-size:.72rem;color:var(--muted);margin-top:1px}
.switch{position:relative;width:46px;height:26px;flex-shrink:0;cursor:pointer}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch-track{position:absolute;inset:0;background:var(--border);border-radius:999px;transition:background .25s}
.switch-track::before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;
  transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.switch input:checked + .switch-track{background:linear-gradient(135deg,var(--warn),#f97316)}
.switch input:checked + .switch-track::before{transform:translateX(20px)}
.toggle-row.is-danger .switch input:checked + .switch-track{background:linear-gradient(135deg,var(--error),#be123c)}

.admin-divider{display:flex;align-items:center;gap:12px;margin:22px 0 16px}
.admin-divider::before,.admin-divider::after{content:'';flex:1 1 auto;height:1px;background:var(--border);min-width:12px}
.admin-divider span{flex:0 1 auto;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:700;text-align:center;line-height:1.5;white-space:normal}
.admin-msg-field textarea{width:100%;background:var(--surface);border:1.5px solid var(--border);color:var(--text);
  font-family:var(--sans);font-size:.83rem;padding:11px 14px;border-radius:12px;outline:none;resize:vertical;min-height:64px;transition:border-color .2s}
.admin-msg-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,127,206,.14)}
.admin-foot{display:flex;gap:10px;margin-top:22px}
.admin-foot .btn{flex:1;justify-content:center}
.admin-session-info{font-size:.7rem;color:var(--muted);text-align:center;margin-top:14px;font-family:var(--mono)}
.admin-session-info button{background:none;border:none;color:#fb7185;font-family:var(--sans);font-weight:600;cursor:pointer;text-decoration:underline;font-size:.7rem;padding:0}

.feature-maint{display:none;background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.03));
  border:1px solid rgba(245,158,11,.25);border-radius:18px;padding:30px 26px;text-align:center;margin-bottom:20px;
  animation:fadeUp .4s ease}
.feature-maint.acct-restrict{background:linear-gradient(135deg,rgba(244,63,94,.09),rgba(244,63,94,.03));border-color:rgba(244,63,94,.28)}
.feature-maint.acct-restrict .feature-maint-icon{background:rgba(244,63,94,.14)}
.feature-maint.acct-restrict .feature-maint-icon svg{stroke:#fb7185}
.feature-maint.acct-restrict .feature-maint-title{color:#fb7185}
.feature-maint-icon{width:52px;height:52px;border-radius:15px;background:rgba(245,158,11,.14);display:grid;place-items:center;
  margin:0 auto 14px;animation:pulseIcon 2.4s ease-in-out infinite}
@keyframes pulseIcon{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.feature-maint-icon svg{width:24px;height:24px;stroke:var(--warn);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feature-maint-title{font-size:1.02rem;font-weight:700;margin-bottom:6px}
.feature-maint-sub{font-size:.83rem;color:var(--muted);line-height:1.6;max-width:380px;margin:0 auto}
.admin-preview-badge{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#86efac;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);
  padding:5px 12px;border-radius:999px}
.maint-locked,.acct-locked{display:none !important}

#maintenance-screen{position:fixed;inset:0;z-index:150;background:var(--bg);display:flex;align-items:center;justify-content:center;
  padding:20px;overflow:hidden}
#maintenance-screen.hidden{display:none}
.maint-blob{position:fixed;border-radius:50%;pointer-events:none;opacity:.3}
.maint-blob.m1{width:520px;height:520px;background:radial-gradient(circle,#a8590a 0%,rgba(168,89,10,0) 70%);top:-220px;left:-180px;animation:drift1 20s ease-in-out infinite}
.maint-blob.m2{width:420px;height:420px;background:radial-gradient(circle,#3b5f9e 0%,rgba(59,95,158,0) 70%);bottom:-180px;right:-160px;animation:drift2 24s ease-in-out infinite}
.maint-card{position:relative;z-index:1;background:var(--card);border:1px solid var(--border);border-radius:26px;
  padding:46px 38px;max-width:460px;width:100%;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:fadeUp .5s cubic-bezier(.4,0,.2,1) both}
.maint-icon-ring{width:82px;height:82px;border-radius:50%;margin:0 auto 24px;display:grid;place-items:center;position:relative;
  background:conic-gradient(from 0deg,var(--warn),#f97316,var(--warn));animation:spin 3s linear infinite}
.maint-icon-ring::before{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--card)}
.maint-icon-ring svg{position:relative;z-index:1;width:32px;height:32px;stroke:var(--warn);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.maint-title{font-size:1.4rem;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}
.maint-sub{color:var(--muted);font-size:.9rem;line-height:1.7;margin-bottom:6px}
.maint-custom-msg{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;
  margin-top:18px;font-size:.83rem;color:var(--text);line-height:1.6;text-align:left}
.maint-dots{display:flex;justify-content:center;gap:6px;margin-top:22px}
.maint-dots span{width:6px;height:6px;border-radius:50%;background:var(--warn);animation:sppulse 1.4s ease-in-out infinite}
.maint-dots span:nth-child(2){animation-delay:.2s}
.maint-dots span:nth-child(3){animation-delay:.4s}

@media(max-width:620px){
  .cards,.label-grid,.label-grid-3{grid-template-columns:1fr; gap:12px}
  .row,.bulk-actions,.label-actions{flex-direction:column; gap:12px}
  .bulk-actions .btn,.label-actions .btn{width:100%;justify-content:center}
  .label-awb-row{flex-direction:column;gap:12px}
  .label-awb-row .label-field{width:100%}
  .label-fetch-btn{width:100%!important;justify-content:center;text-align:center}
  .tabs .tab{font-size:.74rem;padding:9px 6px}
  .setup-card{padding:28px 20px}
  .label-card{padding:16px}
  .label-preview-wrapper{padding:10px 0}
  h1{font-size:1.5rem}
  header{padding-top:36px;margin-bottom:24px}
  .route-toggle{flex-wrap:wrap}

  /* Sign-in card: full-bleed with tighter padding */
  .acc-card{padding:32px 22px 26px;border-radius:22px}
  .acc-icon{width:52px;height:52px}
  .acc-title{font-size:1.32rem}

  /* Token setup & sign-in screens, compacted for phones: these are the
     first thing a mobile visitor sees, so a tall, airy desktop-spaced
     card means extra scrolling before the form is even in view. Tightening
     the padding/margins here (rather than in the base .setup-card/.acc-card
     rules) keeps desktop untouched and only compacts the two auth screens
     specifically, not every other card/modal that reuses .field or input. */
  #setup-screen .setup-card{padding:22px 18px;border-radius:20px}
  #setup-screen .setup-icon{width:44px;height:44px;border-radius:13px;margin-bottom:12px}
  #setup-screen .setup-icon svg{width:21px;height:21px}
  #setup-screen .setup-title{font-size:1.08rem;margin-bottom:3px}
  #setup-screen .setup-sub{font-size:.78rem;line-height:1.5;margin-bottom:16px}
  #setup-screen .field{margin-bottom:11px}
  #setup-screen .field input{padding:11px 14px;font-size:.84rem}
  #setup-screen .setup-err{padding:8px 12px;margin-bottom:11px}
  #setup-screen .setup-info{padding:9px 12px;margin-bottom:14px}
  #setup-screen .setup-footer{margin-top:10px}

  #account-screen .acc-card{padding:24px 20px 20px;border-radius:20px}
  #account-screen .acc-close{top:12px;right:12px;width:30px;height:30px}
  #account-screen .acc-icon{width:44px;height:44px;border-radius:13px;margin-bottom:12px}
  #account-screen .acc-icon svg{width:22px;height:22px}
  #account-screen .acc-title{font-size:1.12rem}
  #account-screen .acc-sub{font-size:.78rem;line-height:1.5;margin:5px 0 14px}
  #account-screen .acc-field{margin-bottom:11px}
  #account-screen .acc-input-wrap input{padding:11px 14px 11px 40px;font-size:.84rem}
  #account-screen .acc-submit{padding:12px;font-size:.86rem}
  #account-screen .acc-foot{margin-top:12px;font-size:.72rem}

  /* Admin modals: edge-to-edge bottom sheet instead of a floating centered
     card — easier to reach one-handed and avoids cramped side margins. */
  .admin-overlay{align-items:flex-end;padding:0}
  .admin-modal,.admin-modal.wide{max-width:none;width:100%;border-radius:20px 20px 0 0;
    padding:14px 12px calc(14px + env(safe-area-inset-bottom));max-height:92vh}
  .admin-modal::before{content:'';display:block;width:34px;height:4px;background:var(--border);border-radius:99px;margin:0 auto 12px}
  .admin-modal-head{margin-bottom:12px;padding-bottom:10px;gap:10px}
  .admin-modal-icon{width:32px;height:32px}
  .admin-modal-icon svg{width:16px;height:16px}
  .admin-modal-title{font-size:1.05rem}
  .admin-modal-sub{font-size:.75rem}
  .admin-divider{margin:16px 0 12px}
  .toggle-row{padding:10px 12px; margin-bottom:6px; gap:10px}
  .toggle-ic{width:28px; height:28px}
  .toggle-ic svg{width:14px; height:14px}
  .toggle-name{font-size:.82rem}
  .toggle-desc{font-size:.68rem; line-height:1.3}
  .switch{width:40px; height:22px}
  .switch-track::before{width:16px; height:16px; left:3px; top:3px}
  .switch input:checked + .switch-track::before{transform:translateX(18px)}
  .admin-foot{margin-top:16px}
  .admin-msg-field textarea{min-height:50px; font-size:.8rem; padding:9px 12px}

  /* Users table → stacked cards, no more horizontal-scroll table.
     Kept deliberately tight: smaller avatar/type/padding than a typical
     card so more accounts are visible per screen without scrolling. */
  .aup-toolbar{flex-wrap:wrap;gap:8px;margin-bottom:10px}
  .aup-count{font-size:.74rem}
  .aup-toolbar .btn-sm{padding:7px 13px;font-size:.76rem}
  .aup-table-wrap{overflow-x:visible}
  .aup-table{min-width:0}
  .aup-table,.aup-table thead,.aup-table tbody,.aup-table tr,.aup-table td{display:block;width:100%}
  .aup-table thead{display:none}
  .aup-table tbody tr{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:10px;margin-bottom:6px}
  .aup-table tbody tr:hover{background:var(--surface)}
  .aup-table td{border-bottom:none;padding:0}
  .aup-name,.aup-email{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}
  .aup-table td.aup-cell-name{margin-bottom:7px}
  .aup-user-cell{gap:7px}
  .aup-avatar{width:26px;height:26px;font-size:.68rem;border-radius:7px}
  .aup-name{font-size:.83rem}
  .aup-email{font-size:.7rem}
  .aup-table td.aup-cell-role,.aup-table td.aup-cell-status{display:inline-block;width:auto;margin-right:6px}
  .aup-badge{padding:2px 8px;font-size:.62rem}
  /* No divider line here anymore — a bare top border for one row inside
     an otherwise borderless card read as a stray/unfinished element.
     Spacing alone now separates the badges from the last-login line. */
  .aup-table td.aup-cell-login{margin-top:7px;display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;font-size:.72rem}
  .aup-cell-login::before{content:'Last login ·';font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
  .aup-table td.aup-row-actions{margin-top:8px}
  .aup-actions-wrap{display:flex;width:100%;gap:6px}
  .aup-icon-btn{flex:1;width:auto;min-height:33px;border-radius:8px;gap:5px;font-size:.76rem;font-weight:600;font-family:var(--sans)}
  .aup-icon-btn svg{width:13px;height:13px}
  .aup-btn-label{display:inline}

  /* Feature-limit rows: label on its own line, inputs share the row below —
     nothing gets squeezed on narrow phones. */
  .aup-limits-grid{grid-template-columns:1fr 1fr;grid-template-areas:"label label" "input select";gap:6px; margin-bottom:6px; padding:8px 10px}
  .aup-limits-grid>span{grid-area:label;font-size:.8rem}
  .aup-limits-grid input{grid-area:input;width:100%}
  .aup-limits-grid select{grid-area:select;width:100%}
  .uf-field input,.uf-field select{padding:9px 12px; font-size:.85rem}
  .field{margin-bottom:12px}
}

/* ── Desktop: give modals room to breathe and stop columns from
     cramping/truncating — compact on phones, roomy on wide screens. ── */
@media(min-width:860px){
  .admin-modal.wide{max-width:760px}
  .uf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .uf-grid .field{min-width:0}
  .uf-grid .field.full{grid-column:1 / -1}
  .limits-head{display:grid;grid-template-columns:1fr 92px 76px;gap:10px}
  .toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .toggle-grid .toggle-row{margin-bottom:0}
}