/* ==========================================================================
   Beautifly Shop — Stylesheet (v3, mobile-first redesign)

   Design tokens
   Color   bg #FAF5F3 (warm blush white) · surface #FFFFFF · ink #2A2023
           accent #A23B5C (berry rose — primary brand color) · muted #8B7377
   Type    display: Georgia (elegant serif, boutique feel, no external font
           load needed — this app must work fully offline)
           body: system sans-serif, for everything functional/data-entry
   Shape   soft 12-14px radii, thin 1px warm-toned borders, minimal shadow

   Print rules below (slip layout, @page, @media print) are UNCHANGED from
   the tested/verified version — do not adjust their dimensions casually,
   they were tuned against real printer output.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Palette ported from the v0 "inventory management dashboard" mock.
     Those values were authored in oklch; they are written here as sRGB hex
     so the app keeps working in older Android WebViews, which is what a
     shop phone is likely to be running.

       background  oklch(0.986 0.002 320)  ->  #FBFAFB
       primary     oklch(0.48  0.135 3  )  ->  #983556
       border      oklch(0.92  0.004 320)  ->  #E6E4E6
       success     oklch(0.6   0.13  155)  ->  #2C965D
       destructive oklch(0.585 0.2   22 )  ->  #D93442

     The canvas is now a near-neutral off-white rather than the old warm
     blush, which is what makes the white cards read as separate layers.
     --------------------------------------------------------------------- */
  --bg: #FBFAFB;
  --surface: #FFFFFF;
  --ink: #1B171C;
  --muted: #6F6A70;
  --muted-soft: #A6A1A7;
  --accent: #983556;
  --accent-dark: #7C2B46;
  --accent-soft: #FAF0F4;
  --line: #E6E4E6;
  --line-strong: #D6D3D7;
  --success: #2C965D;
  --success-soft: #E8F5EE;
  --warn: #D93442;
  --warn-soft: #FCEBEC;
  --info: #4E72AC;
  --info-soft: #EAF0F8;
  /* Secondary/muted surfaces the mock uses for table heads and inset rows. */
  --secondary: #F5F3F5;
  --warning: #DC932E;
  --warning-soft: #FDF3E4;
  --warning-ink: #6B4405;
  /* Softer corners throughout: cards ~ rounded-2xl, controls ~ rounded-xl. */
  --r: 20px;
  --r-sm: 12px;
  --r-pill: 999px;
  /* The mock leans on shadow-sm for everything and lifts only on hover. */
  --shadow: 0 1px 2px rgba(24, 20, 26, 0.05);
  --shadow-md: 0 4px 14px rgba(24, 20, 26, 0.08);
  --ring: 0 0 0 4px rgba(152, 53, 86, 0.15);
  /* The mock drops the serif entirely — headings are sans, semibold, tight. */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
/* Belt-and-braces against the whole UI zooming on a phone: the viewport
   meta tag in index.html already sets user-scalable=no, but iOS Safari can
   still pinch-zoom or double-tap-zoom the page in some versions unless
   touch-action also rules it out here. This blocks pinch/double-tap zoom
   while leaving normal scrolling and every button/input tap untouched. */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
[hidden] { display: none !important; }

/* ------------------------------- top bar ------------------------------ */
/* Single merged header row: brand | Orders/All Orders/Fraud Checker/Tracking
   nav | Settings button — all in one bar that stays pinned at the top across
   every tab (this header sits outside every <main> view, so switching tabs
   never re-renders it). On narrow screens the nav wraps to its own full-width
   row below the brand + Settings button. */
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: calc(12px + var(--safe-top)) 20px 12px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; flex-shrink: 0; }
/* Letter fallback: a soft rounded badge (not a hard circle, so a two-letter
   monogram still sits comfortably). */
.brand-mark {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  border: 1.5px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--accent);
}
/* When a real logo image is uploaded, the frame gets out of its way entirely:
   no circle, no border, no crop. A shop logo is usually wider than it is tall
   and often has its own wordmark baked in, so forcing it into a circle with
   object-fit:cover cut the edges off. `contain` inside a wide, borderless box
   shows the whole logo at its natural proportions instead. */
.brand-mark.has-logo,
.auth-gate-mark.has-logo {
  border: none; background: none; border-radius: 0;
  width: auto; height: 40px; max-width: 190px; padding: 0;
}
.brand-mark.has-logo img,
.auth-gate-mark.has-logo img {
  width: auto; height: 100%; max-width: 100%; object-fit: contain; display: block; border-radius: 0;
}
.auth-gate-mark.has-logo { height: 56px; max-width: 220px; margin-left: auto; margin-right: auto; }
.brand-text { min-width: 0; }
.brand h1 {
  font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0;
  color: var(--ink); letter-spacing: 0.2px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.subtitle { margin: 0; font-size: 11px; color: var(--muted); }
.status-line {
  font-size: 11.5px; white-space: nowrap; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-dark);
  padding: 5px 11px; border-radius: var(--r-pill);
}
.panel-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.panel-head-row h2 { margin: 0; }

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.sa-admin-app-btn,
.sa-payment-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 20px;
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  color: #C9005D;
  transition: all 0.15s ease;
}
.sa-admin-app-btn:hover,
.sa-payment-app-btn:hover {
  background: #FFE4E6;
  border-color: #FDA4AF;
}

.sa-user-chip-wrap {
  position: relative;
}
.sa-user-profile-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  background: #C9005D;
  color: #ffffff;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(201, 0, 93, 0.25);
  transition: all 0.15s ease;
}
.sa-user-profile-btn:hover {
  background: #A1004A;
  box-shadow: 0 2px 6px rgba(201, 0, 93, 0.35);
  transform: translateY(-1px);
}
.sa-user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.sa-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  z-index: 1000;
}
.sa-user-dd-header {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sa-user-dd-header strong {
  font-size: 13px;
  color: #0f172a;
}
.sa-user-dd-header span {
  font-size: 11.5px;
  color: #64748b;
  word-break: break-all;
}
.sa-user-dd-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 6px 0;
}
.sa-user-dd-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: none;
  border: none;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.sa-user-dd-item:hover {
  background: #f1f5f9;
}
.sa-user-dd-item.is-danger {
  color: #ef4444;
}
.sa-user-dd-item.is-danger:hover {
  background: #fef2f2;
}

@media (max-width: 640px) {
  .header-actions {
    gap: 8px;
  }
  .sa-admin-app-btn,
  .sa-payment-app-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background: #C9005D !important;
    color: #ffffff !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(201, 0, 93, 0.25);
  }
  .sa-admin-app-text,
  .sa-payment-app-text {
    display: none !important;
  }
  .sa-admin-app-icon,
  .sa-payment-app-icon {
    stroke: #ffffff !important;
    width: 18px !important;
    height: 18px !important;
  }
}

/* ------------------------------- tab switch ---------------------------- */
/* Lives directly inside .topbar now (Orders / All Orders / Fraud Checker /
   Tracking), styled as plain flat nav links — like the Settings button, the
   active tab gets a soft pink pill fill instead of its own separate bordered
   card, so the whole header reads as one connected bar instead of two boxes
   stacked on each other. */
.tab-switch {
  display: flex; gap: 4px; flex-wrap: wrap; min-width: 0;
}
.tab-btn {
  appearance: none; border: none; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  font-family: var(--font-body); border-radius: var(--r-pill);
}
.tab-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; }
.btn-icon-svg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex-shrink: 0; vertical-align: -3px; margin-right: 2px;
}
.btn-icon-svg svg { width: 15px; height: 15px; display: block; }
.tab-icon svg { width: 16px; height: 16px; display: block; }
.tab-btn:hover { color: var(--ink); background: var(--bg); }
.tab-btn.active { color: var(--accent-dark); background: var(--accent-soft); }
@media (max-width: 900px) {
  /* Not enough room for brand + full nav + Settings on one line — nav drops
     to its own full-width row below, still inside the same header bar. Keeps
     the normal horizontal icon+label tab-btn style here (this covers tablets
     and resized desktop windows, which have plenty of width for that once
     the nav has its own row — only true phone widths need the more cramped
     stacked style below). */
  .tab-switch { order: 3; flex-basis: 100%; justify-content: center; gap: 4px; margin-top: 4px; }
}
@media (max-width: 640px) {
  /* True phone widths: switch to compact stacked icon-over-label tabs so all
     4 fit across the screen without wrapping awkwardly. */
  .tab-switch { justify-content: space-between; gap: 2px; }
  .tab-btn { flex: 1; flex-direction: column; gap: 4px; padding: 8px 2px; font-size: 10.5px; border-radius: var(--r-sm); }
  /* Explicit matching px on BOTH the wrapper and the svg itself (not a
     percentage) — Safari has a known quirk where an SVG with only a
     viewBox (no width/height attributes) sized by percentage inside an
     inline-flex parent can fall back to its intrinsic default size
     instead of respecting the percentage, which is what made these
     render oversized on iPhone even though the desktop math was correct. */
  .tab-icon { width: 18px; height: 18px; }
  .tab-icon svg { width: 18px; height: 18px; }
}

/* ------------------------------- layout ------------------------------- */
.layout {
  max-width: 1250px; margin: 0 auto; padding: 16px 14px calc(40px + var(--safe-bottom));
  display: grid; grid-template-columns: 1fr; gap: 16px;
  min-width: 0;
}
@media (min-width: 1000px) {
  .layout { grid-template-columns: 400px 1fr; align-items: start; padding-top: 22px; gap: 20px; }
}

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px; min-width: 0; box-shadow: var(--shadow);
}
.panel-head { margin-bottom: 13px; }
/* Circular icon badge + title + short description, used on every Settings
   card header (Branding, Password, Sync, Sort & Print, Delivery Slip Design,
   and each courier's API/Fraud/Tracking sections). */
.panel-head-icon { display: flex; align-items: flex-start; gap: 12px; }
.panel-head-badge {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
}
.panel-head-badge svg { width: 18px; height: 18px; display: block; }
.panel-head-icon h2 { margin: 0 0 2px; }
.panel-head-desc { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.panel-head h2 {
  font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 0 0 4px;
  color: var(--ink);
}
.hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.tiny-note { font-size: 11.5px; color: var(--muted-soft); line-height: 1.6; margin: 10px 0 0; }
.tiny-note code { background: var(--accent-soft); color: var(--accent-dark); padding: 1px 5px; border-radius: 4px; }

/* ------------------------------ segmented control ---------------------- */
.segmented {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 4px; margin-bottom: 12px;
}
.segmented-opt {
  display: flex; align-items: center; justify-content: center;
  padding: 9px 8px; border-radius: var(--r-pill); cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--muted); text-align: center;
  transition: background .15s ease, color .15s ease;
}
.segmented-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented-opt:has(input:checked) { background: var(--surface); color: var(--accent-dark); box-shadow: var(--shadow); }

/* ---------------------------------- forms ------------------------------- */
#rawInput {
  width: 100%; min-height: 200px; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px;
  font-size: 15px; font-family: var(--font-mono); line-height: 1.55;
  background: var(--bg);
}
/* --------------- screenshot -> text button on the paste box -------------- */
.paste-box-wrap { position: relative; display: block; }
.paste-box-wrap #rawInput { display: block; padding-bottom: 42px; }
.paste-image-btn {
  position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.paste-image-btn svg { width: 18px; height: 18px; display: block; }
.paste-image-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.paste-image-btn.is-busy { pointer-events: none; opacity: .6; animation: ocrPulse 1s ease-in-out infinite; }
@keyframes ocrPulse { 0%,100% { opacity: .45; } 50% { opacity: .9; } }
/* Highlight the box while a screenshot is dragged over it. */
#rawInput.drop-target { border-color: var(--accent); background: var(--accent-soft); }

.ocr-status {
  margin-top: 8px; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 12px; line-height: 1.5; border: 1px solid var(--line);
  background: var(--bg); color: var(--muted);
}
.ocr-status.busy { background: var(--info-soft); border-color: #CFDCE8; color: var(--info); }
.ocr-status.ok { background: var(--success-soft); border-color: #BEDAC7; color: var(--success); }
.ocr-status.err { background: var(--warn-soft); border-color: #EBC9C4; color: var(--warn); }

#rawInput:focus, input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.button-row-secondary { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; }
.button-row-secondary .btn { width: 100%; }
.export-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 12px; }

.btn {
  appearance: none; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  padding: 10px 15px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: var(--font-body); line-height: 1.3;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  min-height: 44px;
}
.btn:hover { background: var(--bg); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--muted); }
.btn-ghost:hover { background: var(--bg); color: var(--ink); }
.btn-ghost-inverse { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.btn-ghost-inverse:hover { background: rgba(255,255,255,.12); }
.btn-danger-text { color: var(--warn); }
.btn-ghost.btn-danger-text { border-color: var(--warn); }
.btn-ghost.btn-danger-text:hover { background: var(--warn-soft); }
.btn-danger { border-color: var(--warn); color: var(--warn); }
.btn-block { width: 100%; }
.btn-large { padding: 13px 16px; font-size: 14.5px; margin-top: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-icon-text { background: transparent; border-color: transparent; color: var(--muted); padding: 10px 10px; }
.sync-btn { margin-top: 10px; border-color: var(--line-strong); font-size: 12px; }
.btn-icon-text:hover { background: var(--bg); color: var(--ink); }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
#searchInput, #gridSelect, #maxProdSelect {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14px;
  background: var(--surface); color: var(--ink);
}
#searchInput { flex: 1; min-width: 140px; }

#sortSelect {
  appearance: none; -webkit-appearance: none;
  padding: 9px 30px 9px 13px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  background-color: var(--accent-soft); color: var(--accent-dark);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='%23832C48' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 7px;
  cursor: pointer; flex-shrink: 0;
}
#sortSelect:hover { background-color: #EFD3D9; }

/* ------------------------------ print settings accordion --------------- */
.print-settings { margin-bottom: 12px; }
.print-settings summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted);
  padding: 9px 2px; list-style: none; display: flex; align-items: center; gap: 6px;
}
.print-settings summary::-webkit-details-marker { display: none; }
.print-settings summary::before { content: "\203A"; font-size: 16px; transition: transform .15s ease; display: inline-block; }
.print-settings[open] summary::before { transform: rotate(90deg); }
.print-options-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: 4px;
}
.inline-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.checkbox-label { cursor: pointer; }
.checkbox-label input { width: 16px; height: 16px; accent-color: var(--accent); }

/* -------------------------------- banners ------------------------------- */
.review-banner {
  background: var(--warn-soft); color: var(--warn); border: 1px solid #EBC9C4;
  border-radius: var(--r-sm); padding: 10px 13px; font-size: 12.5px; margin-bottom: 12px; line-height: 1.5;
}
.empty-state { grid-column: 1 / -1; color: var(--muted); font-size: 13.5px; padding: 32px 10px; text-align: center; line-height: 1.7; }

/* ------------------------------ order cards ----------------------------- */
.orders-list { display: grid; grid-template-columns: 1fr; gap: 10px; min-width: 0; }
@media (min-width: 1500px) { .orders-list { grid-template-columns: 1fr 1fr; } }

.order-card {
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 13px; background: var(--bg);
  min-width: 0; overflow: hidden;
}
.order-card.review { border-left-color: var(--warn); }

.card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-width: 0; }
.card-title {
  font-family: var(--font-display); font-size: 14px; font-weight: 700; flex: 1;
  min-width: 0; overflow-wrap: anywhere; word-break: break-word; color: var(--ink);
}
.card-review-flag {
  font-size: 10px; font-weight: 700; color: var(--warn); background: var(--warn-soft);
  padding: 3px 8px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .3px;
}
.card-delete {
  border: none; background: none; color: var(--muted-soft); cursor: pointer; font-size: 16px;
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; line-height: 1;
}
.card-delete:hover { background: var(--warn-soft); color: var(--warn); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; min-width: 0; }
@media (min-width: 480px) { .field-grid { grid-template-columns: repeat(4, 1fr); } }
.field-grid.secondary { grid-template-columns: repeat(3, 1fr); margin-top: 4px; }
/* Desktop only: keep Order # + Name on one row and Phone + Due on the next,
   with Order # and Due narrower (1/3) and Name and Phone wider (2/3) so
   long names and phone numbers have more room to show fully. */
@media (min-width: 1000px) {
  .field-grid.field-grid-main { grid-template-columns: repeat(3, 1fr); }
  .field-grid.field-grid-main label:nth-child(1) { grid-column: span 1; } /* Order # */
  .field-grid.field-grid-main label:nth-child(2) { grid-column: span 2; } /* Name */
  .field-grid.field-grid-main label:nth-child(3) { grid-column: span 2; } /* Phone */
  .field-grid.field-grid-main label:nth-child(4) { grid-column: span 1; } /* Due (or PAID) */
}

label {
  display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; color: var(--muted);
  font-weight: 600; letter-spacing: .2px; min-width: 0;
}
label.full-width { margin-bottom: 8px; }
input, textarea, select {
  font-family: inherit; font-size: 16px; color: var(--ink); padding: 9px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  resize: vertical; width: 100%; min-width: 0; box-sizing: border-box;
  overflow-wrap: anywhere; word-break: break-word;
}
@media (min-width: 640px) { input, textarea, select { font-size: 13.5px; } }

/* -------------------------- fraud/reliability check ---------------------- */
.fraud-check {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r-sm); font-size: 12px; line-height: 1.6;
  border: 1px solid var(--line); background: var(--bg);
}
.fraud-check.checking { color: var(--muted); font-style: italic; }
.fraud-check.trusted { border-color: #BEDAC7; background: var(--success-soft); }
.fraud-check.risky { border-color: #EBC9C4; background: var(--warn-soft); }
.fraud-check.new-customer { border-color: var(--line-strong); background: var(--surface); }
/* Low success rate AND too few orders to be sure — the whole box goes light
   red so it is impossible to miss while scanning a long list of new orders.
   Placed after the three states above so it wins regardless of which one the
   score produced. */
.fraud-check.caution { border-color: #E9B7B0 !important; background: #FDECEA !important; }
.fraud-check.caution .fraud-check-note { color: var(--warn); font-weight: 600; }
.fraud-check-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.fraud-check-item { font-weight: 700; }
.fraud-check-item .ok-count { color: var(--success); }
.fraud-check-item .ok-count.zero { color: var(--warn); font-weight: 800; }
.fraud-check-item .bad-count { color: var(--warn); }
.fraud-check-note { color: var(--muted); font-size: 11px; margin-top: 3px; }
.fraud-check-err { color: var(--warn); font-size: 11px; }

/* ---------------------- standalone fraud checker tab --------------------- */
@media (min-width: 1000px) {
  .layout-single { grid-template-columns: 1fr; max-width: 640px; }
  /* All Orders should use the full 1250px layout width (same box width as
     the Orders / All Orders / Fraud Checker / Settings tab bar above it),
     not the narrow single-column width used by the Fraud Checker tab. */
  .layout-history { grid-template-columns: 1fr; }
}
.fraud-lookup-row { display: flex; gap: 8px; margin-top: 4px; }
.fraud-lookup-row input {
  flex: 1; font-size: 16px; padding: 11px 13px;
}
.fraud-lookup-row .btn { padding: 11px 20px; }

.tracking-courier-select { grid-template-columns: repeat(4, 1fr); margin-top: 4px; margin-bottom: 14px; }

.tr-result { margin-top: 18px; }
.tr-result-head { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-bottom: 14px; color: var(--ink); }
.tr-id { font-family: var(--font-mono); font-size: 13px; color: var(--muted); font-weight: 400; }
.tr-delivered {
  padding: 10px 13px; background: var(--success-soft); color: var(--success);
  border: 1px solid #BEDAC7; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 700; margin-bottom: 10px;
}
.tr-cancelled {
  padding: 10px 13px; background: var(--warn-soft); color: var(--warn); border: 1px solid #EBC9C4;
  border-radius: var(--r-sm); font-weight: 700; font-size: 13.5px;
}
.tr-current-status { margin-top: 10px; font-size: 13px; color: var(--muted); }
.tr-current-status strong { color: var(--ink); }

/* ---- simple horizontal stepper (Steadfast: single current status) ---- */
.tr-stepper { display: flex; align-items: flex-start; }
.tr-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; width: 78px; }
.tr-step-dot {
  width: 14px; height: 14px; border-radius: 50%; background: var(--line-strong);
  border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--line-strong);
}
.tr-step.done .tr-step-dot { background: var(--success); box-shadow: 0 0 0 2px var(--success); }
.tr-step.current .tr-step-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 2px var(--accent); }
.tr-step-label { font-size: 10.5px; color: var(--muted); text-align: center; font-weight: 600; }
.tr-step.done .tr-step-label, .tr-step.current .tr-step-label { color: var(--ink); }
.tr-step-line { flex: 1 1 auto; height: 2px; background: var(--line-strong); margin-top: 6px; min-width: 8px; }

/* ---- vertical timeline (RedX: full event history) ---- */
.tr-info-card {
  padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 12.5px; margin-bottom: 16px; line-height: 1.6;
}
.tr-info-line { color: var(--muted); }
.tr-timeline { display: flex; flex-direction: column; }
.tr-timeline-item { display: flex; gap: 12px; position: relative; padding-bottom: 18px; }
.tr-timeline-item:last-child { padding-bottom: 0; }
.tr-timeline-item::before {
  content: ''; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--line-strong);
}
.tr-timeline-item:last-child::before { display: none; }
.tr-timeline-dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; margin-top: 2px;
}
.tr-timeline-item.latest .tr-timeline-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tr-timeline-msg { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.tr-timeline-item.latest .tr-timeline-msg { color: var(--accent-dark); }
.tr-timeline-time { font-size: 11px; color: var(--muted-soft); margin-top: 2px; }

.fc-result { margin-top: 20px; }
.fc-summary {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.fc-donut { flex-shrink: 0; }
.fc-donut-pct { font-size: 22px; font-weight: 800; fill: var(--ink); font-family: var(--font-display); }
.fc-donut-sub { font-size: 9px; fill: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.fc-donut-placeholder {
  width: 132px; height: 132px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); font-size: 40px;
}
.fc-summary-text { flex: 1; min-width: 180px; }
.fc-phone { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.fc-verdict { font-size: 13px; font-weight: 600; line-height: 1.5; padding: 8px 11px; border-radius: var(--r-sm); }
.fc-verdict-unknown { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.fc-verdict-new { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.fc-verdict-risky { background: var(--warn-soft); color: var(--warn); border: 1px solid #EBC9C4; }
.fc-verdict-mixed { background: #FBF3E4; color: #8A611E; border: 1px solid #EEDBAF; }
.fc-verdict-trusted { background: var(--success-soft); color: var(--success); border: 1px solid #BEDAC7; }
.fc-totals { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.fc-totals strong { color: var(--ink); }
.fc-totals strong.ok-count { color: var(--success); }
.fc-totals strong.bad-count { color: var(--warn); }

.fc-bars { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.fc-bar-row { display: grid; grid-template-columns: 84px 1fr; gap: 4px 12px; align-items: center; }
.fc-bar-label { font-size: 12.5px; font-weight: 700; color: var(--ink); grid-row: span 2; }
.fc-bar-track {
  height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--line);
  display: flex;
}
.fc-bar-success { background: var(--success); height: 100%; }
.fc-bar-cancel { background: var(--warn); height: 100%; }
.fc-bar-flat { background: var(--line-strong); height: 100%; width: 100%; }
.fc-bar-nums { font-size: 11.5px; color: var(--muted); }
.fc-bar-nums .ok-count { color: var(--success); font-weight: 700; }
.fc-bar-nums .ok-count.zero { color: var(--warn); }
.fc-bar-nums .bad-count { color: var(--warn); font-weight: 700; }
.fc-bar-total { color: var(--muted-soft); }
.fc-bar-empty { font-size: 12px; color: var(--muted-soft); font-style: italic; }
.fc-bar-none .fc-bar-label { color: var(--muted-soft); }

/* ------------------------- all orders / history ------------------------- */
.history-panel { max-width: 100%; }

.history-controls-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-top: 4px; }
.history-range { grid-template-columns: repeat(5, 1fr); flex: 1 1 380px; min-width: 340px; }
.history-range .segmented-opt { font-size: 12px; padding: 8px 3px; }

.history-search-row { display: flex; gap: 8px; flex: 1 1 220px; min-width: 180px; }
.search-with-icon { position: relative; flex: 1; }
.search-with-icon .search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 13px; opacity: .5; pointer-events: none;
}
.search-with-icon input { width: 100%; padding-left: 32px; }

.history-filter-wrap { position: relative; flex-shrink: 0; }
.history-filter-btn { white-space: nowrap; display: flex; align-items: center; gap: 5px; position: relative; }
.filter-caret { font-size: 9px; opacity: .7; }
.filter-count-badge {
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: var(--r-pill); padding: 1px 6px; margin-left: 2px;
}
.history-filter-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  box-shadow: var(--shadow); padding: 12px; width: 200px;
}
.history-filter-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); margin: 10px 0 6px;
}
.history-filter-group-label:first-child { margin-top: 0; }
.history-filter-opt {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink);
  padding: 5px 2px; cursor: pointer;
}
.history-filter-opt input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
.history-filter-clear { margin-top: 12px; font-size: 12px; }

.history-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: 14px; padding: 11px 13px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.toolbar-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; flex-shrink: 0; }
.toolbar-check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.history-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.history-actions .btn { font-size: 12.5px; padding: 8px 13px; }
.history-count-row { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
#historyOrderCount { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.history-customer-filters { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.history-customer-filter {
  appearance: none; min-height: 34px; padding: 0 11px; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); background: var(--surface); color: var(--muted); cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.history-customer-filter:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }
.history-customer-filter.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.reload-btn {
  appearance: none; border: 1px solid var(--line-strong); background: var(--surface);
  width: 30px; height: 30px; border-radius: 50%; font-size: 14px; color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.reload-btn:hover { color: var(--ink); background: var(--bg); }
.reload-btn.spinning { animation: reload-spin .7s linear infinite; }
@keyframes reload-spin { to { transform: rotate(360deg); } }

.history-table-wrap { overflow-x: auto; margin-top: 12px; }
.history-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 680px; }
.history-table thead th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); font-weight: 700; padding: 9px 8px; border-bottom: 1px solid var(--line-strong);
  white-space: nowrap; background: var(--bg);
}
.history-table tbody td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.history-table tbody tr:hover { background: var(--bg); }
.history-table tbody tr.is-selected { background: var(--accent-soft); }
.hc-check { width: 34px; }
.hc-check input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
/* Running serial number — muted and monospaced so it reads as a register
   index and never competes with the order number sitting next to it. */
.hc-serial {
  width: 34px; text-align: center; color: var(--muted-soft);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.hc-sl { color: var(--ink); font-weight: 700; font-size: 12px; white-space: nowrap; }
.hc-name { min-width: 190px; }
.hc-phone { font-size: 12px; white-space: nowrap; color: var(--ink); }
.hc-date { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.hc-courier { min-width: 150px; }
.hc-fraud { white-space: nowrap; }

.customer-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.customer-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.customer-info { min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.customer-name { font-weight: 700; color: var(--ink); font-size: 12.5px; }
.customer-order-no { display: none; color: var(--muted-soft); font-size: 10.5px; font-weight: 600; }
.customer-tag {
  font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: .3px;
}
.customer-tag.tag-new { background: var(--info-soft); color: var(--info); }
.customer-tag.tag-returning { background: #F1E7DA; color: #8A6C3E; }
.customer-repeat-count { margin-left: 3px; opacity: .52; font-weight: 800; }

/* Eye toggle sitting right after the New/Returning tag — opens the details
   panel underneath the row. */
.customer-tag-row { display: inline-flex; align-items: center; gap: 5px; }
.customer-detail-btn {
  appearance: none; border: 1px solid transparent; background: transparent;
  color: var(--muted-soft); cursor: pointer; padding: 2px; border-radius: 50%;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s ease, color .15s ease;
}
.customer-detail-btn svg { width: 15px; height: 15px; display: block; }
.customer-detail-btn:hover { color: var(--accent); background: var(--accent-soft); }
.customer-detail-btn.is-open { color: #fff; background: var(--accent); border-color: var(--accent); }

/* Details panel: total amount, address and products for one order. */
.history-table tbody tr.history-detail-row td { background: var(--bg); padding: 14px 18px; }
.history-detail-row[hidden] { display: none !important; }
.history-table tbody tr.has-detail-open { background: var(--accent-soft); }
.order-detail { display: flex; flex-direction: column; gap: 9px; }
.order-detail-item { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; }
.order-detail-key {
  font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .4px; padding-top: 1px;
}
.order-detail-val { font-size: 12.5px; color: var(--ink); line-height: 1.5; word-break: break-word; }
.order-detail-item:first-child .order-detail-val { font-weight: 700; font-size: 13.5px; color: var(--accent-dark); }
.order-detail-extra {
  font-size: 11.5px; color: var(--muted); line-height: 1.6;
  border-top: 1px dashed var(--line-strong); padding-top: 8px; word-break: break-word;
}
@media (max-width: 560px) {
  .order-detail-item { grid-template-columns: 1fr; gap: 2px; }
}

.courier-tracking { display: flex; flex-direction: column; gap: 2px; }
.courier-tracking-name { font-weight: 600; color: var(--ink); font-size: 12px; }
.courier-tracking-id { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; font-family: var(--font-mono); }
.copy-tracking-btn {
  appearance: none; border: none; background: transparent; cursor: pointer; color: var(--muted-soft);
  font-size: 12px; padding: 1px 2px; line-height: 1; flex-shrink: 0;
}
.copy-tracking-btn:hover { color: var(--accent); }
.copy-tracking-btn.copied { color: var(--success); }
.no-courier { color: var(--muted-soft); font-size: 12px; }

.btn-tiny { padding: 6px 12px; font-size: 11.5px; min-height: 0; }
.history-table tbody tr.history-fraud-row td { background: var(--bg); padding: 16px 18px; }
.history-fraud-inner { font-size: 12px; }
.history-fraud-loading { color: var(--muted); font-style: italic; font-size: 12px; }
.history-fraud-err { color: var(--warn); font-size: 12px; }

.history-pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.history-page-size { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.history-page-size select { padding: 5px 8px; font-size: 12.5px; }
.history-page-info { font-size: 12px; color: var(--muted); }
.history-page-nav { display: flex; gap: 4px; align-items: center; }
.page-nav-btn {
  appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  min-width: 28px; height: 28px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 0 6px;
}
.page-nav-btn:hover { background: var(--bg); }
.page-nav-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.page-nav-ellipsis { color: var(--muted-soft); font-size: 12px; padding: 0 2px; }

@media (max-width: 999px) {
  .customer-order-no { display: block; }
  .history-search-row { flex-wrap: wrap; }
  .history-search-row .search-with-icon { flex-basis: 100%; }
  .history-count-row { margin-left: 0; width: 100%; justify-content: space-between; }
  .history-actions { width: 100%; }
  .history-actions .btn { flex: 1 1 calc(50% - 4px); }

  /* Card layout for All Orders — no horizontal or nested scrollbar needed. */
  .history-table-wrap { overflow-x: visible; }
  .history-table { min-width: 0; width: 100%; border-collapse: separate; border-spacing: 0; }
  .history-table thead { display: none; }
  .history-table tbody { display: flex; flex-direction: column; gap: 10px; }
  .history-table tbody tr {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    grid-template-areas:
      "check name    serial"
      "check phone   date"
      "check courier courier"
      "check fraud   fraud";
    column-gap: 10px; row-gap: 6px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 12px;
  }
  .history-table tbody tr.is-selected { background: var(--accent-soft); }
  .history-table tbody tr:hover { background: var(--surface); }
  .history-table tbody tr.is-selected:hover { background: var(--accent-soft); }
  .history-table tbody td { padding: 0; border: none; vertical-align: top; }
  .hc-check { grid-area: check; align-self: start; }
  /* Serial stays visible on mobile (it's what the shop reads off the sheet),
     shown as "SL 3" in the card's top-right corner. The #order number is
     already repeated inside the customer cell, so that column is dropped. */
  .hc-serial { grid-area: serial; text-align: right; align-self: start; width: auto; }
  .hc-serial::before { content: "SL "; opacity: .7; }
  .hc-sl { display: none; }
  .hc-name { grid-area: name; min-width: 0; }
  .hc-phone { grid-area: phone; min-width: 0; }
  .hc-phone::before { content: "\260E\FE0E  "; opacity: .6; }
  .hc-date { grid-area: date; min-width: 0; text-align: right; }
  .hc-courier { grid-area: courier; min-width: 0; }
  .hc-fraud { grid-area: fraud; display: flex; justify-content: flex-end; }

  /* The two expandable rows have to escape the card grid above and render as
     plain full-width blocks, otherwise their single cell would be squeezed
     into the first grid column. */
  .history-fraud-row, .history-detail-row { background: transparent; }
  .history-fraud-row[hidden], .history-detail-row[hidden] { display: none !important; }
  .history-fraud-row:not([hidden]), .history-detail-row:not([hidden]) { display: block !important; }
  .history-table tbody tr.history-fraud-row td,
  .history-table tbody tr.history-detail-row td { display: block; width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: var(--r-sm); }
}

.app-footer { text-align: center; font-size: 11px; color: var(--muted-soft); padding: 18px; }

/* --------------------------- password gate overlay ---------------------- */
.auth-gate {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.auth-gate[hidden] { display: none !important; }
.auth-gate-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 30px 26px; width: 100%; max-width: 320px;
  text-align: center;
}
.auth-gate-mark {
  width: 52px; height: 52px; border-radius: 14px; border: 1.5px solid var(--accent);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--accent);
}
.auth-gate-card h1 {
  font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 0 0 6px; color: var(--ink);
}
.auth-gate-card p { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; line-height: 1.5; }
.auth-gate-card .auth-gate-subtitle { margin: -4px 0 14px; font-size: 11px; }
.auth-gate-card input {
  width: 100%; text-align: center; letter-spacing: 5px; font-size: 18px;
  padding: 12px; margin-bottom: 12px;
}
.auth-gate-error { color: var(--warn); font-size: 12px; margin: 12px 0 0; }
@keyframes auth-gate-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.auth-gate-shake .auth-gate-card { animation: auth-gate-shake .4s; }

/* --------------------------- delete confirm modal ------------------------ */
.confirm-modal {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(42, 32, 35, .5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.confirm-modal[hidden] { display: none !important; }
.confirm-modal-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 26px 24px; width: 100%; max-width: 340px;
  text-align: center;
}
.confirm-modal-mark {
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--warn);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
  font-size: 22px; color: var(--warn); background: var(--warn-soft);
}
.confirm-modal-card h2 {
  font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--ink);
}
.confirm-modal-card p { font-size: 12.5px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }
.confirm-modal-label {
  display: block; text-align: left; font-size: 10.5px; color: var(--muted); font-weight: 600;
  margin-bottom: 4px;
}
.confirm-modal-card input {
  width: 100%; text-align: center; letter-spacing: 5px; font-size: 18px;
  padding: 12px; margin-bottom: 6px;
}
.confirm-modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.btn-danger-solid { background: var(--warn); border-color: var(--warn); color: #fff; }
.btn-danger-solid:hover { background: #A93E36; border-color: #A93E36; }
.confirm-modal-shake .confirm-modal-card { animation: auth-gate-shake .4s; }

/* --------------------------- preview / settings overlay ----------------- */
.preview-overlay {
  position: fixed; inset: 0; background: rgba(42, 32, 35, .78); z-index: 100;
  display: flex; flex-direction: column; backdrop-filter: blur(2px);
}
.preview-overlay[hidden] { display: none !important; }
.preview-bar {
  display: flex; align-items: center; gap: 11px;
  padding: calc(12px + var(--safe-top)) 16px 12px;
  background: var(--ink); color: #fff; font-size: 14px; font-family: var(--font-display); font-weight: 700;
}
.preview-bar .spacer { flex: 1; }
#previewInfo { color: rgba(255,255,255,.65); font-size: 12px; font-family: var(--font-body); font-weight: 400; }
.preview-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.preview-pager {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 12px calc(12px + var(--safe-bottom)) calc(12px + var(--safe-bottom));
  background: var(--ink);
}
.preview-nav-btn {
  appearance: none; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08);
  color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.preview-nav-btn:hover { background: rgba(255,255,255,.18); }
.preview-nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.preview-page-indicator { color: #fff; font-size: 13px; font-weight: 600; min-width: 60px; text-align: center; }
.preview-scroll .a4-page {
  width: 210mm; min-height: 297mm; background: #fff; padding: 12mm;
  box-sizing: border-box;
  box-shadow: 0 2px 20px rgba(0,0,0,.35); flex-shrink: 0;
  transform-origin: top left;
}
/* Mirrors the printed sheet height (the 244mm ceiling used in @media print)
   so the on-screen preview shows exactly what comes out of the printer. */
.preview-scroll .a4-grid { display: grid; gap: 3mm; height: 244mm; }
.a4-page-frame { overflow: hidden; }

/* --------------------------- settings sub-nav ---------------------------- */
/* The Settings tab's own General/Pathao/Paperfly/Steadfast/RedX switcher —
   redesigned to match the main Orders/All Orders/Fraud Checker/Tracking tab
   bar above it (.tab-switch/.tab-btn) in size and visual weight, so the two
   navigation bars read as one consistent system instead of a big bar sitting
   on top of a small, cramped one. */
/* CSS Grid (not flex) so every column is exactly the same width whether it's
   5-across on desktop or wraps to 3-across on phones — flex with wrapping
   would let the leftover 2 items on the last mobile row stretch wider than
   the 3 above them, and would let long labels ("Steadfast", "Paperfly")
   shrink unpredictably instead of wrapping cleanly. */
.settings-subnav {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; max-width: 1250px; margin: 0 auto 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 5px;
}
.settings-subnav-opt {
  min-width: 0; position: relative; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 10px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  font-family: var(--font-body); border-radius: var(--r-sm);
  border-bottom: 2.5px solid transparent; transition: background .15s ease, color .15s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.settings-subnav-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.settings-subnav-opt:hover { color: var(--ink); background: var(--bg); }
.settings-subnav-opt:has(input:checked) { color: var(--accent-dark); border-bottom-color: var(--accent); background: var(--accent-soft); }
.settings-subnav-opt .tab-icon { width: 16px; height: 16px; }
.settings-subnav-opt .tab-icon svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .settings-subnav { grid-template-columns: repeat(3, 1fr); row-gap: 4px; }
  .settings-subnav-opt { flex-direction: column; gap: 4px; padding: 8px 2px; font-size: 10.5px; white-space: normal; }
  .settings-subnav-opt .tab-icon { width: 18px; height: 18px; }
  .settings-subnav-opt .tab-icon svg { width: 18px; height: 18px; }
}
.settings-panel { display: flex; flex-direction: column; gap: 16px; }

/* The Settings tabs use the full 1250px layout width (same as the tab bar
   above them) instead of the narrow 640px .layout-single width used by the
   simpler Fraud Checker / Tracking tabs, so the card grid below has room to
   lay cards out side-by-side instead of stacking everything full-width. */
@media (min-width: 1000px) {
  #settingsView.layout-single { max-width: 1250px; }
}

/* Space-efficient card grid used inside each Settings sub-tab — short cards
   (Password, Sort & Print, Fraud/Tracking notes) sit side-by-side instead of
   always stacking full width, while longer cards (Branding, API forms,
   Delivery Slip Design, Sync) span the full row via .settings-full. */
.settings-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px; align-items: start;
}
.settings-full { grid-column: 1 / -1; }

/* Optional 2-column field layout inside a card (Branding + the courier API/
   Fraud forms) so short fields pair up instead of each eating a full row;
   hints, checkboxes, proxy blocks, messages and button rows still span both
   columns so they stay readable. */
.settings-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
.settings-field-grid > .hint,
.settings-field-grid > .checkbox-field,
.settings-field-grid > div,
.settings-field-grid > .btn,
.settings-field-grid > .button-row,
.settings-field-grid > .settings-field-full { grid-column: 1 / -1; }
@media (max-width: 560px) { .settings-field-grid { grid-template-columns: 1fr; } }

/* --------------------- delivery slip design picker ----------------------- */
/* Settings → General → Delivery Slip Design: 3 selectable cards, each with a
   true-to-life miniature of the actual .slip / .slip2 print markup (same
   classes as the real slip, just scaled down with transform: scale()) so the
   preview always matches what actually prints, plus a round radio "switch"
   and label. Clicking anywhere on the card selects it. */
.slip-design-options {
  /* Each card holds a fixed 168px-wide preview (see .slip-preview-frame) plus
     12px padding on each side, so no column may end up narrower than that or
     the preview overflows its card. min(206px, 100%) also guarantees a
     single full-width column instead of overflowing on very narrow phones
     (<238px of usable width). */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(206px, 100%), 1fr));
  gap: 12px; margin-top: 10px;
}
.slip-design-opt { cursor: pointer; display: block; }
.slip-design-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.slip-design-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r); padding: 12px;
  background: var(--bg); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.slip-design-opt:hover .slip-design-card { border-color: var(--muted-soft); }
.slip-design-opt input:checked + .slip-design-card {
  border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft);
}
.slip-preview-frame {
  width: 168px; height: 142px; max-width: 100%; overflow: hidden; position: relative;
  border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; flex-shrink: 0;
}
.slip-preview-inner {
  position: absolute; top: 0; left: 0; width: 226.8px; height: 191.3px;
  transform: scale(0.741); transform-origin: top left; pointer-events: none;
}
.slip-preview-inner .slip, .slip-preview-inner .slip2 { width: 100%; height: 100%; font-size: 7.4pt; }
.slip-design-name { font-size: 12.5px; font-weight: 700; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.slip-design-radio-dot {
  width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--line-strong); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; background: #fff;
  transition: border-color .15s ease;
}
.slip-design-opt input:checked + .slip-design-card .slip-design-radio-dot { border-color: var(--accent); }
.slip-design-opt input:checked + .slip-design-card .slip-design-radio-dot::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}
/* ------------------------- self-learning module -------------------------- */
/* Banner on an order card listing what the app corrected by itself. Uses the
   informational blue rather than the warning red — an auto-fix is helpful
   news, not an error, but it still has to be impossible to miss so the owner
   can catch a bad rule early. */
.card-autofix {
  display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap;
  background: var(--info-soft); border: 1px solid #CFDCE8; border-radius: var(--r-sm);
  padding: 9px 11px; margin-bottom: 11px;
}
.card-autofix-icon { flex-shrink: 0; font-size: 13px; line-height: 1.4; }
.card-autofix-text { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.card-autofix-text strong { display: block; font-size: 12px; color: var(--info); margin-bottom: 2px; }
.card-autofix-item { display: block; word-break: break-word; }
.card-autofix-undo {
  appearance: none; border: 1px solid #CFDCE8; background: var(--surface); color: var(--info);
  font-family: var(--font-body); font-size: 11px; font-weight: 600; cursor: pointer;
  padding: 5px 10px; border-radius: var(--r-pill); flex-shrink: 0;
}
.card-autofix-undo:hover { background: var(--info-soft); }

/* Returning-customer summary: what happened with this person's last orders.
   Warm/amber by default; red when a previous parcel was cancelled or
   returned, since that changes how the shop wants to treat this one. */
.card-repeat {
  display: flex; align-items: flex-start; gap: 9px;
  border-radius: var(--r-sm); padding: 9px 11px; margin-bottom: 11px;
  background: #FBF3E7; border: 1px solid #E8D5B5;
}
.card-repeat.tone-warn { background: var(--warn-soft); border-color: #EBC9C4; }
.card-repeat.tone-good { background: var(--success-soft); border-color: #BEDAC7; }
.card-repeat-icon { flex-shrink: 0; font-size: 13px; line-height: 1.4; }
.card-repeat-text { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.card-repeat-head {
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: #8A6C3E; margin-bottom: 3px;
}
.card-repeat.tone-warn .card-repeat-head { color: var(--warn); }
.card-repeat.tone-good .card-repeat-head { color: var(--success); }
.card-repeat-line { display: block; word-break: break-word; }
.card-repeat-line strong { color: var(--ink); font-weight: 700; }
.card-repeat.tone-warn .card-repeat-line strong { color: var(--warn); }
.card-repeat-products {
  display: block; margin-top: 3px; padding-left: 2px;
  font-size: 11px; color: var(--ink); line-height: 1.6;
}

.learning-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.learning-stat {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 12px; font-size: 11.5px; color: var(--muted);
}
.learning-stat strong { color: var(--accent-dark); font-size: 13px; }

.learning-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; margin-bottom: 12px; }
.learning-item {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px;
}
.learning-item-kind {
  flex-shrink: 0; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 7px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-dark);
  margin-top: 1px;
}
.learning-item-kind.kind-drop { background: var(--warn-soft); color: var(--warn); }
.learning-item-kind.kind-label { background: var(--info-soft); color: var(--info); }
.learning-item-kind.kind-due { background: var(--success-soft); color: var(--success); }
.learning-item-text { flex: 1; min-width: 0; font-size: 12px; color: var(--ink); line-height: 1.45; word-break: break-word; }
.learning-item-meta { display: block; font-size: 10.5px; color: var(--muted-soft); margin-top: 2px; }
.learning-item-del {
  appearance: none; border: none; background: transparent; color: var(--muted-soft);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 3px 5px; border-radius: 5px; flex-shrink: 0;
}
.learning-item-del:hover { background: var(--warn-soft); color: var(--warn); }
.learning-item-kind.kind-kb { background: var(--info-soft); color: var(--info); }

/* Detailed observation trail: every cell edit, deletion and cross-cell paste. */
.learning-log-wrap { margin-top: 4px; }
.learning-log-wrap summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent-dark);
  padding: 8px 0; list-style: none; display: flex; align-items: center; gap: 6px;
}
.learning-log-wrap summary::-webkit-details-marker { display: none; }
.learning-log-wrap summary::before { content: "\203A"; font-size: 15px; transition: transform .15s ease; display: inline-block; }
.learning-log-wrap[open] summary::before { transform: rotate(90deg); }
.learning-log { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; margin-top: 6px; }
.learning-log-row {
  display: grid; grid-template-columns: auto auto auto 1fr; gap: 8px; align-items: baseline;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; font-size: 11px;
}
.log-time { color: var(--muted-soft); font-family: var(--font-mono); font-size: 10px; white-space: nowrap; }
.log-type {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  padding: 2px 6px; border-radius: var(--r-pill); background: var(--line); color: var(--muted); white-space: nowrap;
}
.log-type.type-paste, .log-type.type-copy, .log-type.type-cut { background: var(--info-soft); color: var(--info); }
.log-type.type-learn { background: var(--success-soft); color: var(--success); }
.log-field { font-weight: 700; color: var(--ink); white-space: nowrap; }
.log-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; word-break: break-word; }
.log-del { color: var(--warn); }
.log-add { color: var(--success); }
@media (max-width: 560px) {
  .learning-log-row { grid-template-columns: 1fr; gap: 3px; }
}

/* --------------------------- settings modal ----------------------------- */
.settings-scroll { flex: 1; overflow: auto; padding: 18px; display: flex; justify-content: center; }
.settings-card {
  background: var(--surface); border-radius: var(--r); padding: 20px;
  max-width: 480px; width: 100%; height: fit-content;
}
/* Same card, but used directly inside a .panel on the Settings page instead
   of inside a centered modal overlay — no extra background/border needed
   since .panel already provides that. */
.settings-card-inline { max-width: none; padding: 0; }
.settings-card-inline .btn-block:last-child { margin-bottom: 0; }
.settings-divider { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
/* Colour picker + hex box side by side: the swatch for choosing by eye, the
   text box for pasting an exact brand code. */
.color-field-row { display: flex; gap: 8px; align-items: stretch; }
input[type="color"]#brandColor {
  padding: 3px; height: 44px; cursor: pointer; flex: 0 0 68px; width: 68px;
}
.color-hex-input {
  flex: 1; min-width: 0; height: 44px;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .5px;
}
.color-hex-input.invalid { border-color: var(--warn); background: var(--warn-soft); }

/* Uploaded-logo preview — a plain light frame with the logo shown whole
   (contain, not cropped), matching how it now appears in the header. */
.brand-logo-preview-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand-logo-preview-box {
  flex-shrink: 0; height: 48px; min-width: 48px; max-width: 170px; padding: 5px 9px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.brand-logo-preview-box img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; display: block; }
.brand-logo-preview-meta { flex: 1; min-width: 140px; font-size: 11.5px; color: var(--muted); line-height: 1.45; font-weight: 400; }
.brand-logo-preview-meta strong { display: block; font-size: 12px; color: var(--ink); margin-bottom: 1px; }

/* Mock browser tab so the favicon + tab title can be checked at a glance. */
.favicon-preview-row { gap: 8px; }
.favicon-preview-label { font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .2px; }
.favicon-tab-mock {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: 9px 9px 0 0; border-bottom: 2px solid var(--accent);
  padding: 8px 16px 8px 11px; max-width: 100%;
}
.favicon-tab-mock img { width: 17px; height: 17px; border-radius: 4px; object-fit: contain; flex-shrink: 0; }
.favicon-tab-mock span {
  font-size: 12.5px; color: var(--ink); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
input[type="file"] { padding: 8px 10px; cursor: pointer; }
.settings-group-label {
  font-size: 11px; font-weight: 700; color: var(--accent-dark); text-transform: uppercase;
  letter-spacing: .4px; margin: 16px 0 4px;
}
.settings-field {
  display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--muted);
  font-weight: 600; letter-spacing: .2px; margin-bottom: 12px;
}
.settings-field input, .settings-field select { font-size: 16px; }
@media (min-width: 640px) { .settings-field input, .settings-field select { font-size: 14px; } }
.settings-field.checkbox-field { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 13px; color: var(--ink); line-height: 1.5; }
.settings-field.checkbox-field span { display: flex; gap: 8px; align-items: flex-start; }
.settings-field.checkbox-field input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
#pathaoProxyRow { margin-bottom: 12px; }
#pathaoProxyRow .hint { margin-bottom: 10px; }
#pathaoProxyRow code { background: var(--accent-soft); color: var(--accent-dark); padding: 1px 5px; border-radius: 4px; }
.settings-card .btn-block { margin-bottom: 10px; }
.settings-card .button-row { flex-direction: column; }

/* Small "already enabled" status pill used on the read-only Fraud Check /
   Tracking notes that just reuse another section's credentials. */
.settings-enabled-badge {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 10px;
  background: var(--success-soft); border: 1px solid #CFE4D5; border-radius: var(--r-sm);
  padding: 9px 11px;
}
.settings-enabled-badge .settings-enabled-icon {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--success);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-top: 1px;
}
.settings-enabled-badge strong { display: block; font-size: 12.5px; color: var(--success); font-weight: 700; margin-bottom: 1px; }
.settings-enabled-badge span.note { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.settings-unavailable-badge {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 10px;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 9px 11px;
}
.settings-unavailable-badge .settings-enabled-icon { background: var(--muted-soft); }
.settings-unavailable-badge strong { display: block; font-size: 12.5px; color: var(--muted); font-weight: 700; margin-bottom: 1px; }
.settings-unavailable-badge span.note { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* Tiny inline info-dot next to a few Sort & Print labels/checkboxes — purely
   decorative (no tooltip logic), just a visual cue that more explanation is
   available in the hint text above. */
.field-info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; color: var(--muted-soft); flex-shrink: 0; margin-left: 3px;
  vertical-align: -2px;
}
.field-info-icon svg { width: 14px; height: 14px; display: block; }

/* Show/hide toggle button placed inside password-type settings fields. */
.settings-field .password-field-wrap { position: relative; display: flex; }
.settings-field .password-field-wrap input { flex: 1; padding-right: 38px; }
.password-toggle-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: none; background: transparent; color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%;
}
.password-toggle-btn:hover { background: var(--bg); color: var(--ink); }
.password-toggle-btn svg { width: 17px; height: 17px; display: block; }

/* ------------------------- mode note + last-added feedback ------------- */
.last-added {
  margin-top: 10px; padding: 12px 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--bg); font-size: 12.5px; line-height: 1.6;
}
.last-added .ok { font-weight: 700; color: var(--success); }
.last-added .warn { color: var(--warn); font-weight: 700; }
.last-added dl { margin: 8px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.last-added dt { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.last-added dd { margin: 0; font-size: 12.5px; word-break: break-word; }

/* ------------------------------ courier UI ------------------------------ */
.courier-card {
  margin-top: 4px;
}
.courier-card-label {
  margin: 0 0 10px; font-size: 11px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .6px;
}
/* ---------------------------- settings rows ----------------------------- */
.settings-row-list { display: flex; flex-direction: column; gap: 8px; }
.settings-row {
  appearance: none; width: 100%; display: flex; align-items: center; gap: 12px;
  background: var(--bg); border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 10px 12px; cursor: pointer; text-align: left;
  font-family: var(--font-body); color: var(--ink);
  transition: background .15s ease, border-color .15s ease;
}
.settings-row:hover { background: var(--accent-soft); }
.settings-row:focus-visible {
  outline: none; border-color: var(--accent); background: var(--accent-soft);
}
.settings-row-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; color: var(--accent-dark);
}
.settings-row-icon svg { width: 17px; height: 17px; display: block; }
.settings-row-label { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); }
.settings-row-chevron { color: var(--muted-soft); font-size: 17px; line-height: 1; }
.settings-row-divider { height: 1px; margin: 2px 4px; border-top: 1px dashed var(--line-strong); }
@media (max-width: 640px) {
  /* Mobile-only: warm pink-tinted, borderless icon chip matching the
     reference mockup. Desktop is intentionally left as-is. */
  .settings-row-icon { background: var(--accent-soft); border-color: transparent; }
  .settings-row { padding: 12px 13px; }
}
.send-to-card {
  margin-top: 16px; padding: 13px; background: var(--info-soft);
  border: 1px solid #D3DEE7; border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 10px;
}
.send-to-label {
  margin: 0; font-size: 11px; font-weight: 700; color: var(--info);
  text-transform: uppercase; letter-spacing: .5px; text-align: center;
}
.courier-row { display: flex; flex-wrap: wrap; gap: 8px; }
.courier-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.courier-row-grid .btn-courier { width: 100%; }
.send-to-card .courier-status { margin-top: 0; }
.btn-courier { border-color: #B9CBDB; background: #fff; color: var(--info); }
.btn-courier:hover { background: #fff; border-color: var(--info); }
.btn-courier:disabled { border-color: var(--line); color: var(--muted-soft); cursor: not-allowed; background: var(--bg); }
.btn-courier:disabled:hover { background: var(--bg); }
.btn-courier.connected { border-color: #2F8F5B; background: #EAF7EF; color: #1F6B41; font-weight: 700; }
.btn-courier.connected:hover { background: #DFF3E7; }
.btn-courier.connected::before { content: "\25CF"; font-size: 9px; margin-right: 5px; color: #2F8F5B; }

.courier-status {
  margin-top: 10px; padding: 10px 13px; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.6;
  border: 1px solid var(--line); background: var(--surface);
}
.courier-status.ok { border-color: #BEDAC7; background: var(--success-soft); color: var(--success); }
.courier-status.err { border-color: #EBC9C4; background: var(--warn-soft); color: var(--warn); }
.courier-status.busy { border-color: #B9CBDB; background: var(--info-soft); color: var(--info); }
.courier-status ul { margin: 6px 0 0; padding-left: 18px; }
.courier-status li { margin-bottom: 2px; }

.card-courier-badge {
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--info-soft); color: var(--info); border: 1px solid #C7D6E2; white-space: nowrap;
}

/* ==========================================================================
   SLIP — shared by preview and print. Black on white only.
   (unchanged from the tested/verified layout — do not adjust casually)
   ========================================================================== */
.print-area { display: none; }

.a4-grid { display: grid; gap: 3mm; }
.a4-grid.g3x5 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); }
.a4-grid.g3x4 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }
.a4-grid.g2x5 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 1fr); }
.a4-grid.g2x4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
.a4-grid.g2x3 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }

.slip {
  border: 0.6pt solid #000;
  padding: 1.4mm 1.7mm;
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0; min-width: 0; /* stop content from forcing the grid row/column past its 1fr share — see PRINT section notes */
  /* Bengali-capable fonts must be listed so Windows/macOS/Android pick a
     font that shapes conjuncts (যুক্তাক্ষর) correctly. Arial has no Bengali
     glyphs, so Latin text uses Arial and Bangla falls through to these. */
  font-family: Arial, Helvetica, "Hind Siliguri", "Nirmala UI", "Vrinda",
               "Shonar Bangla", "Kohinoor Bangla", "Bangla MN", "Noto Sans Bengali",
               "SolaimanLipi", "Siyam Rupali", sans-serif;
  color: #000; background: #fff;
  font-size: 7.4pt;
  line-height: 1.22;
}
/* unused positions stay completely blank so the sticker sheet can be reused */
.slip.empty { border: none; }

/* auto-shrink tiers applied by JS based on content length */
.slip.t1 { font-size: 6.9pt; }
.slip.t2 { font-size: 6.4pt; }
.slip.t3 { font-size: 5.9pt; }
.slip.t4 { font-size: 5.5pt; }

/* No underline under the shop name — the courier name sits directly beneath
   it, which pulls the whole barcode block up and buys vertical room for the
   address (the Due bar was being pushed off the bottom of long slips). */
.slip-shop {
  font-weight: 700; font-size: 10pt; text-align: center; letter-spacing: .3pt;
  padding-bottom: 0; margin-bottom: .4mm;
}
.slip-topline { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
/* 9pt and un-bolded, as requested — also frees a little width for #order. */
.slip-name { font-weight: 400; font-size: 9pt; text-transform: uppercase; }
.slip-ordno { font-size: .82em; white-space: nowrap; }
.slip-phone { font-weight: 700; font-size: 10pt; margin-top: .1mm; }
/* Hard-capped at 2 lines. A long address used to grow without limit and shove
   the Due bar past the bottom edge of the slip, where `overflow: hidden` cut
   it off — which is exactly the reported bug. Clamping here means the courier
   still gets the important part of the address and the money always prints. */
.slip-address {
  font-size: 8pt; margin-top: .35mm; line-height: 1.2;
  word-break: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden;
  max-height: 2.4em;   /* fallback for engines without line-clamp */
}
.slip-products {
  flex: 1; min-height: 0;
  font-size: 8pt; line-height: 1.2; white-space: pre-wrap; word-break: break-word;
  border-top: 0.4pt dashed #000; margin-top: .5mm; padding-top: .4mm;
  overflow: hidden;
}
/* Note + Due are pinned to the bottom and must NEVER be compressed or pushed
   out: flex-shrink:0 stops a long address from stealing their space, which is
   what made the Due amount disappear. */
.slip-bottom { margin-top: auto; flex-shrink: 0; padding-bottom: .6mm; }
.slip-note {
  font-size: 9pt; font-weight: 700; line-height: 1.2;
  margin-top: .4mm; word-break: break-word;
}
.slip-due {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 0.6pt solid #000; margin-top: .4mm; padding-top: .4mm;
  font-weight: 700; font-size: 10pt;
}
.slip-due-label { letter-spacing: .5pt; }
.slip-due.paid .slip-due-val { letter-spacing: 1pt; }

.slip-barcode { text-align: center; margin: 0.6mm 0; }
.slip-barcode-courier { font-size: 6.5pt; font-weight: 700; letter-spacing: .8pt; text-transform: uppercase; color: #444; margin-bottom: .2mm; }
.slip-barcode-id { font-size: 7.5pt; letter-spacing: 0.5pt; margin-bottom: 0.3mm; font-family: ui-monospace, Menlo, Consolas, monospace; }
.slip-barcode-img { display: flex; justify-content: center; }
.slip-barcode-img svg { display: block; max-width: 100%; height: auto; }

/* ==========================================================================
   SLIP2 — "Bold Header" and "Logo Header" delivery-slip designs (Settings →
   Sort & Print → Delivery Slip Design). Same box model / grid-cell sizing
   as .slip above (must fit the same 12-or-15-per-A4-page grid), just a
   different internal layout with icon badges. A single .slip2 element is
   shared by both designs; .variant-bold / .variant-logo toggle the header
   graphic, the barcode-box border style, and the order-number divider.
   ========================================================================== */
.slip2 {
  border: 0.6pt solid #000;
  padding: 1.2mm 1.5mm;
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0; min-width: 0;
  font-family: Arial, Helvetica, "Hind Siliguri", "Nirmala UI", "Vrinda",
               "Shonar Bangla", "Kohinoor Bangla", "Bangla MN", "Noto Sans Bengali",
               "SolaimanLipi", "Siyam Rupali", sans-serif;
  color: #000; background: #fff;
  font-size: 6.6pt;
  line-height: 1.25;
}
.slip2.t1 { font-size: 6.2pt; }
.slip2.t2 { font-size: 5.8pt; }
.slip2.t3 { font-size: 5.4pt; }
.slip2.t4 { font-size: 5pt; }

/* ---- header (shop name, or logo variant) ---- */
.slip2-header { display: flex; align-items: center; justify-content: center; gap: 1.2mm; margin-bottom: 0.6mm; }
.slip2-header-line { flex: 1; height: 0; border-top: 0.6pt solid #000; display: none; }
.slip2.variant-logo .slip2-header-line { display: block; }
.slip2-header-content {
  font-weight: 700; font-size: 1.3em; text-align: center; white-space: nowrap;
  display: flex; align-items: center; gap: 1mm; flex-shrink: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; letter-spacing: .2pt;
}
.slip2-header-content img, .slip2-header-content .slip2-logo-mark {
  width: 3.4mm; height: 3.4mm; border-radius: 50%; flex-shrink: 0; object-fit: cover;
}
.slip2-logo-mark {
  display: flex; align-items: center; justify-content: center;
  border: 0.5pt solid #000; font-weight: 700; font-size: .8em;
}

/* ---- Logo Header design: the mark alone, printed solid black ----
   No shop name beside it, and sized to actually read on paper (the old 3.4mm
   circle was barely visible). `object-fit: contain` with a free width keeps a
   wide logo from being cropped, and the brightness(0) filter flattens a
   coloured logo to pure black while keeping its transparency — slips are
   printed black-ink-only, and a mid-grey halftone of a colour logo prints
   muddy on the cheap thermal/laser printers these sheets go through. */
.slip2-header-content.slip2-header-logo-only { gap: 0; overflow: visible; }
.slip2-header-content.slip2-header-logo-only img {
  width: auto; height: 8mm; max-width: 42mm;
  border-radius: 0; object-fit: contain;
  filter: grayscale(1) brightness(0) contrast(200%);
}
.slip2-header-content.slip2-header-logo-only .slip2-logo-mark {
  width: auto; height: 8mm; min-width: 8mm; padding: 0 1.4mm;
  border-radius: 1mm; border-width: 0.8pt; font-size: 2.4em; letter-spacing: 0;
}
/* Tighter tiers: a long order still has to leave room for the address and
   items, so the mark steps down rather than pushing content off the slip. */
.slip2.t2 .slip2-header-content.slip2-header-logo-only img,
.slip2.t2 .slip2-header-content.slip2-header-logo-only .slip2-logo-mark { height: 7mm; }
.slip2.t3 .slip2-header-content.slip2-header-logo-only img,
.slip2.t3 .slip2-header-content.slip2-header-logo-only .slip2-logo-mark { height: 6mm; }
.slip2.t4 .slip2-header-content.slip2-header-logo-only img,
.slip2.t4 .slip2-header-content.slip2-header-logo-only .slip2-logo-mark { height: 5.2mm; }
.slip2-header-divider { display: none; align-items: center; gap: 1.2mm; margin-bottom: 0.7mm; }
.slip2-header-divider::before, .slip2-header-divider::after { content: ""; flex: 1; border-top: 0.6pt solid #000; }
.slip2-header-diamond { font-size: .8em; flex-shrink: 0; }
.slip2.variant-bold .slip2-header-divider { display: flex; }

/* ---- barcode box ---- */
.slip2-barcode {
  text-align: center; margin: 0.5mm 0; padding: 0.5mm 1mm;
  border: 0.5pt dashed #000; border-radius: 1.2mm;
}
.slip2.variant-logo .slip2-barcode { border-style: solid; }
.slip2-barcode-courier { font-size: .82em; font-weight: 700; letter-spacing: .8pt; text-transform: uppercase; margin-bottom: .2mm; }
.slip2-barcode-id { font-size: .95em; letter-spacing: 0.4pt; margin-bottom: 0.3mm; font-family: ui-monospace, Menlo, Consolas, monospace; }
.slip2-barcode-img { display: flex; justify-content: center; }
.slip2-barcode-img svg { display: block; max-width: 100%; height: auto; }

/* ---- name / phone / address + order-number badge ---- */
.slip2-topline { display: flex; align-items: stretch; gap: 1.5mm; margin-bottom: 0.4mm; }
.slip2-topline-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3mm; }
.slip2-name { font-weight: 700; font-size: 1.25em; text-transform: uppercase; overflow-wrap: anywhere; }
.slip2-row { display: flex; align-items: center; gap: 1mm; min-width: 0; }
.slip2-phone { font-weight: 700; }
.slip2-address { line-height: 1.2; word-break: break-word; min-width: 0; }
.slip2-divider-h { border-top: 0.4pt dashed #000; margin: 0.5mm 0; }
.slip2-ordno-wrap { flex-shrink: 0; display: flex; align-items: flex-start; }
.slip2.variant-logo .slip2-ordno-wrap { padding-left: 1.8mm; border-left: 0.5pt solid #000; align-items: stretch; }
.slip2-ordno {
  background: #000; color: #fff; font-weight: 700; font-size: .85em;
  padding: 0.5mm 1.4mm; border-radius: 0.8mm; white-space: nowrap; height: fit-content;
}

/* ---- round icon badges (phone / address / note) + square badge (items) ---- */
.slip2-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9mm; height: 2.9mm; border-radius: 50%; background: #000; color: #fff;
  flex-shrink: 0;
}
.slip2-icon svg { width: 1.7mm; height: 1.7mm; display: block; }
.slip2-items-label .slip2-icon { border-radius: 0.7mm; }

/* ---- "ORDER ITEMS" ribbon ---- */
.slip2-items-label { display: flex; align-items: center; gap: 1.2mm; margin: 0.5mm 0 0.4mm; }
.slip2-items-rule { flex: 1; border-top: 0.6pt solid #000; }

/* ---- product list ---- */
.slip2-products { flex: 1; min-height: 0; white-space: pre-wrap; word-break: break-word; overflow: hidden; margin-bottom: 0.4mm; }

/* ---- note box + due bar, pinned to the bottom ---- */
.slip2-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 0.5mm; }
.slip2-note-box {
  display: flex; align-items: center; gap: 1.4mm;
  border: 0.5pt solid #000; border-radius: 1mm; padding: 0.5mm 1mm;
}
.slip2-note-lines { min-width: 0; }
.slip2-note-text { font-weight: 700; text-transform: uppercase; }
.slip2-note-caption { font-size: .85em; }
.slip2-due { display: flex; border: 0.6pt solid #000; border-radius: 1mm; overflow: hidden; font-weight: 700; }
.slip2-due-label { background: #000; color: #fff; padding: 0.6mm 1.8mm; display: flex; align-items: center; letter-spacing: .5pt; }
.slip2-due-val { flex: 1; text-align: right; padding: 0.6mm 1.8mm; display: flex; align-items: center; justify-content: flex-end; }
.slip2-due.paid .slip2-due-val { letter-spacing: .8pt; }

/* ------------------------------- PRINT -------------------------------- */

/* ==========================================================================
   v33 — design pass ported from the v0 "inventory management dashboard"

   Presentation only. Nothing below changes markup, ids, class names or
   behaviour; every rule here restyles something that already existed. The
   print block that follows is untouched and uses no custom properties, so
   delivery slips come out of the printer exactly as before.

   What the mock changes, in one sentence each:
     · the canvas goes near-neutral so white cards read as separate layers
     · corners soften (cards ~20px, controls ~12px) and shadows get lighter
     · the active tab becomes a solid berry pill instead of a tinted one
     · headings drop the serif for tight semibold sans
     · every status becomes a dot + label pill rather than coloured text
   ========================================================================== */

/* ------------------------------- top bar -------------------------------- */
.topbar {
  gap: 18px;
  padding: calc(10px + var(--safe-top)) 20px 10px;
  background: rgba(251, 250, 251, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
/* The mock's brand mark is a filled tile, not an outlined one. */
.brand-mark {
  width: 40px; height: 40px; border-radius: 13px;
  border: none; background: var(--accent); color: #fff;
  font-size: 18px; letter-spacing: -.5px; box-shadow: var(--shadow);
}
.brand h1 { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.subtitle { font-size: 11.5px; }

/* Fraud Checker and Tracking are hidden from the bar at the shop's request.
   The buttons stay in the DOM with their handlers attached, so showTab()
   still reaches those views if anything calls it — this hides the entry
   point, it does not remove the feature. */
.tab-btn[data-nav-hidden] { display: none !important; }

.tab-btn {
  padding: 9px 15px; font-size: 13.5px; font-weight: 500;
  border-radius: 13px; transition: background .15s ease, color .15s ease;
}
.tab-btn:hover { background: var(--accent-soft); color: var(--ink); }
.tab-btn.active {
  background: var(--accent); color: #fff; box-shadow: var(--shadow); font-weight: 600;
}
.tab-btn.active:hover { background: var(--accent); color: #fff; }

.header-settings-btn {
  border-radius: 13px; border-color: var(--line); font-weight: 500;
  box-shadow: var(--shadow); padding: 9px 15px;
}
.header-settings-btn:hover { background: var(--accent-soft); }
.header-settings-btn.active {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}

/* -------------------------------- panels -------------------------------- */
.panel { padding: 20px; box-shadow: var(--shadow); }
.panel-head h2 { font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; }
.panel-head-desc { font-size: 12px; }
/* Settings card headers in the mock are a bordered strip with a rounded
   square icon tile, not a floating circle. */
.panel-head-icon {
  gap: 12px; align-items: flex-start;
  margin: -20px -20px 16px; padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.panel-head-badge {
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent-dark);
}
.status-line {
  background: var(--accent-soft); color: var(--accent-dark);
  font-weight: 500; padding: 5px 12px; font-size: 12px;
}

/* --------------------------- segmented control -------------------------- */
.segmented {
  background: var(--secondary); border: none; border-radius: 14px; padding: 4px; gap: 4px;
}
.segmented-opt { border-radius: 10px; font-weight: 500; padding: 8px; }
.segmented-opt:has(input:checked) {
  background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow);
}

/* ------------------------------ form controls --------------------------- */
input, textarea, select {
  border-radius: var(--r-sm); border-color: var(--line);
  padding: 10px 13px; box-shadow: var(--shadow);
}
#rawInput { border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow); }
#rawInput:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--accent); box-shadow: var(--ring);
}
label { font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.paste-image-btn { border-radius: 10px; border-color: var(--line); box-shadow: var(--shadow); }

/* --------------------------------- buttons ------------------------------ */
.btn {
  border-radius: var(--r-sm); border-color: var(--line);
  font-weight: 500; box-shadow: var(--shadow); padding: 10px 16px;
  transition: background .15s ease, border-color .15s ease, filter .15s ease, transform .06s ease;
}
.btn:active { transform: scale(.99); }
.btn:hover { background: var(--accent-soft); }
.btn-primary { font-weight: 600; }
.btn-primary:hover { filter: brightness(1.1); background: var(--accent); }
.btn-danger-text { border-color: rgba(217, 52, 66, .3); }
.btn-danger-text:hover { background: rgba(217, 52, 66, .06); }

/* ------------------------------ order cards ----------------------------- */
/* The mock turns each order into its own white card with a tinted head
   strip. The existing markup already has .card-header as the first child,
   so it only needs to be pulled out to the card edges. */
.order-card {
  background: var(--surface); border: 1px solid var(--line); border-left-width: 1px;
  border-radius: 16px; padding: 0; box-shadow: var(--shadow);
  transition: box-shadow .15s ease;
}
.order-card:hover { box-shadow: var(--shadow-md); }
.order-card.review { border-left-width: 1px; border-color: rgba(220, 147, 46, .45); }
.card-header {
  margin: 0; padding: 11px 14px;
  background: var(--secondary); border-bottom: 1px solid var(--line);
  border-radius: 15px 15px 0 0;
}
.card-title { font-size: 13.5px; font-weight: 600; letter-spacing: -.1px; }
.card-review-flag {
  background: var(--warning-soft); color: var(--warning-ink);
  font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; padding: 3px 9px;
}
.card-delete { border-radius: 9px; width: 28px; height: 28px; }
/* Everything after the head strip is the card body. */
.order-card > *:not(.card-header) { margin-left: 14px; margin-right: 14px; }
.order-card > *:nth-child(2) { margin-top: 13px; }
.order-card > *:last-child { margin-bottom: 13px; }
.field-grid { gap: 10px; margin-bottom: 10px; }

/* ------------------------------- send-to card --------------------------- */
.send-to-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); margin-top: 18px;
}
.send-to-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin: 0 0 12px;
}
.btn-courier { font-weight: 600; padding: 12px 10px; }

/* ------------------------------ empty states ---------------------------- */
.empty-state {
  border: 1px dashed var(--line-strong); border-radius: var(--r);
  padding: 48px 20px; font-size: 13px;
}

/* --------------------------------- banners ------------------------------ */
.review-banner, .ocr-status, .fraud-check { border-radius: var(--r-sm); }

/* -------------------------------- settings ------------------------------ */
/* The mock's settings sub-nav is a row of pills with the active one filled,
   rather than tabs with an underline. */
.settings-subnav {
  background: var(--secondary); border: 1px solid var(--line);
  border-radius: 18px; padding: 6px; gap: 6px;
}
.settings-subnav-opt {
  border-radius: 13px; border-bottom: none; font-weight: 500; padding: 9px 10px;
}
.settings-subnav-opt:hover { background: var(--accent-soft); color: var(--ink); }
.settings-subnav-opt:has(input:checked) {
  background: var(--accent); color: #fff; font-weight: 600;
  border-bottom-color: transparent; box-shadow: var(--shadow);
}
/* Checkbox rows read as an inset panel in the mock, not bare text. */
.settings-field.checkbox-field {
  background: var(--secondary); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 14px;
}
.password-toggle-btn { border-radius: 9px; }
.settings-divider { border-top-color: var(--line); }

/* ----------------------------- misc chrome ------------------------------ */
.settings-card, .history-panel { border-radius: var(--r); }
.tiny-note code { border-radius: 5px; }


/* ==========================================================================
   v35 — the v0 type scale, transcribed

   The mock is written in Tailwind, so its sizes are classes rather than
   numbers. Resolved here once so the rest of this block is arithmetic, not
   taste: text-xs = 12px, text-sm = 14px, text-base = 16px, text-lg = 18px,
   text-xl = 20px, text-2xl = 24px; py-2.5 = 10px, px-3.5 = 14px, px-4 = 16px;
   rounded-lg = 8px, rounded-xl = 12px, rounded-2xl = 16px.

   Geist, the mock's typeface, is a web font. This app has to work with no
   network at all — it is used on a shop counter — so the system sans stack
   stands in for it. Everything else about the scale is the mock's.
   ========================================================================== */

/* --------------------------------------------------------------- headings */
.panel-head h2 { font-size: 14px; font-weight: 600; letter-spacing: -.1px; }
.panel-head-desc { font-size: 12px; line-height: 1.5; }
.brand h1 { font-size: 14px; font-weight: 600; }
.subtitle { font-size: 12px; }

/* Section titles above a group of cards read as small caps in the mock. */
.settings-group-title {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted);
}

/* ----------------------------------------------------------- settings form */
/* A field label in the mock is ordinary dark 14px text, not a small muted
   caption — the caption size is reserved for the hint underneath. */
.settings-field {
  font-size: 14px; font-weight: 500; color: var(--ink);
  gap: 6px;
}
.settings-field input, .settings-field select, .settings-field textarea {
  font-size: 14px; font-weight: 400;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.settings-field.checkbox-field { font-size: 14px; font-weight: 400; }
.hint { font-size: 12px; line-height: 1.6; }
.tiny-note { font-size: 12px; }

/* Cards inside a settings section. */
.settings-card { border-radius: 16px; }
.settings-panel { gap: 18px; }

/* ------------------------------------------------------------- buttons */
.btn {
  font-size: 14px; font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--r-sm);
}
.btn-primary { font-weight: 600; }
.btn-large { font-size: 14px; padding: 13px 16px; }
.tab-btn { font-size: 14px; }
.header-settings-btn { font-size: 14px; }
.settings-subnav-opt { font-size: 14px; }

/* --------------------------------------------------------- order cards */
/* The mock's card field labels are the caption size; only settings labels
   get the larger one. */
.field-grid label, label.full-width { font-size: 12px; font-weight: 500; }
.field-grid input, .field-grid textarea,
label.full-width input, label.full-width textarea { font-size: 14px; }
.card-title { font-size: 14px; }
.status-line { font-size: 12px; }

/* ---------------------------------------------------------------- pills */
/* Status in the mock is always a dot plus a word on a tinted pill. */
.pill-dot {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500;
}
.pill-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}


/* ==========================================================================
   v38 — Product List, the third card on the Orders screen
   ========================================================================== */

/* Three columns once there is room for them. Below that the product list
   drops under the other two rather than squeezing the review cards.

   The Orders screen also stops being capped at 1250px here. Two columns fit
   in that; three do not — squeezing a third in was what left Review & Edit
   too narrow to hold two order cards and cut every product name in half.
   Inventory already takes the whole window for the same reason: its content
   is wide. The 22px side padding matches the gap between the cards, so the
   outer margin and the inner spacing read as one rhythm. */
@media (min-width: 1000px) {
  .layout:not(.layout-single):not(.layout-history) { grid-template-columns: 380px minmax(0, 1fr); }
}
@media (min-width: 1400px) {
  .layout:not(.layout-single):not(.layout-history) {
    max-width: none;
    width: 100%;
    padding-left: 22px;
    padding-right: 22px;
    gap: 22px;
    /* Paste Order stays a fixed, modest width — it is a box to type into.
       The other two share what is left, Review & Edit taking the larger
       share because it holds the cards being edited, and the product list
       taking enough that a full product name fits on one line. */
    grid-template-columns: 340px minmax(0, 1.25fr) minmax(430px, 1fr);
  }
}
.panel-products { min-width: 0; }
@media (min-width: 1400px) {
  .panel-products { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; }
}

.pl-order {
  margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--accent-dark);
  background: var(--accent-soft); border-radius: var(--r-sm); padding: 9px 12px;
  overflow-wrap: anywhere;
}
.pl-order.is-none { background: var(--secondary); color: var(--muted); font-weight: 400; }

.pl-wrap { overflow-x: auto; }
.pl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pl-table th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.pl-table td { padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pl-table tr:last-child td { border-bottom: 0; }
.pl-table { table-layout: fixed; }
.pl-c-sl { width: 30px; }
.pl-c-name { width: auto; }        /* takes whatever the other four leave */
.pl-c-qty { width: 54px; }
.pl-c-pid { width: 112px; }
.pl-c-act { width: 28px; }
.pl-pid { white-space: nowrap; }
.pl-sl { color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-pid code {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  background: var(--secondary); padding: 3px 7px; border-radius: 6px; white-space: nowrap;
}
.pl-row.is-unknown { background: #FDEAEB; }
/* Marked "we do not stock this". Settled, so it is greyed out rather than
   flagged, and it no longer holds a courier send up. */
.pl-row.is-skipped { opacity: .55; }
.pl-row.is-skipped .pl-name { text-decoration: line-through; }
.pl-skip {
  appearance: none; border: 0; background: none; color: var(--muted-soft);
  cursor: pointer; font-size: 13px; width: 22px; height: 24px; border-radius: 6px; line-height: 1;
}
.pl-skip:hover { background: var(--secondary); color: var(--ink); }
.pl-row.is-unsure { background: var(--warning-soft); }
.pl-row.is-unknown .pl-pid code { background: #F9D2D5; color: #A9232F; }

/* The name cell is an input so a wrong match can be typed over. */
.pl-name-wrap { position: relative; }
.pl-name {
  width: 100%; font-size: 13px; padding: 6px 8px;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  box-shadow: none;
}
.pl-name:hover { border-color: var(--line); background: var(--surface); }
.pl-name:focus { border-color: var(--accent); background: var(--surface); box-shadow: var(--ring); }
.pl-qty {
  width: 46px; text-align: center; font-size: 13px; font-weight: 600;
  padding: 6px 2px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; box-shadow: none;
}
.pl-qty:hover { border-color: var(--line); background: var(--surface); }
.pl-qty:focus { border-color: var(--accent); background: var(--surface); box-shadow: var(--ring); }
.pl-del {
  appearance: none; border: 0; background: none; color: var(--muted-soft);
  cursor: pointer; font-size: 14px; width: 24px; height: 24px; border-radius: 6px; line-height: 1;
}
.pl-del:hover { background: var(--warn-soft); color: var(--warn); }

/* ------------------------------------------------------------ suggestions */
.pl-sugg {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-md); max-height: 280px; overflow-y: auto; padding: 4px;
}
.pl-sugg-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--ink);
  padding: 8px 10px; border-radius: 8px; line-height: 1.4;
}
.pl-sugg-item:hover, .pl-sugg-item.is-active { background: var(--accent-soft); }
.pl-sugg-item b { font-weight: 600; }
.pl-sugg-meta { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.pl-sugg-empty { padding: 10px; font-size: 12px; color: var(--muted); }

.pl-empty { font-size: 12.5px; color: var(--muted); padding: 20px 4px; text-align: center; margin: 0; }
#plAddRow { margin-top: 10px; }
.pl-note-warn { color: var(--warn); font-weight: 600; }

/* ==========================================================================
   Cancel / Return on the All Orders detail panel  (orderdesk.js)
   ==========================================================================
   Two buttons in the top-right corner of the panel the eye button opens.
   Deliberately nothing else: this is the one place in the app where a press
   cannot be undone, so it should not sit among controls that can.

   They are positioned OVER app.js's panel rather than beside it. An earlier
   version made the table cell a flex row with the details on one side and
   the buttons on the other, and it wrecked the panel — the detail rows are a
   120px/1fr grid, and as a flex item that 1fr collapsed, so every address
   wrapped one letter per line. Nothing here changes app.js's layout now; it
   only reserves room in the corner.
   ========================================================================== */

.order-detail.od-has-acts {
  position: relative;
  /* Room for the buttons, so a long address never runs underneath them. */
  padding-right: 152px;
}

.od-acts {
  position: absolute; top: 0; right: 0; width: 136px;
  display: flex; flex-direction: column; gap: 8px;
}
.od-act {
  min-height: 34px; padding: 6px 14px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.od-act.is-cancel { color: #A9232F; border-color: #F1CFD3; }
.od-act.is-cancel:hover:not([disabled]) { background: #FDF3F4; }
.od-act.is-return:hover:not([disabled]) { border-color: var(--brand, #8A5CF6); }
/* Used once and it is done — for good. Greyed rather than removed, so the
   shop can see the order was settled and not wonder where the buttons went. */
.od-act[disabled] { opacity: .4; cursor: not-allowed; }
.od-note {
  margin: 0; font-size: 11px; line-height: 1.4;
  color: #1F7A4A; font-weight: 600; text-align: center;
}
.od-note.is-err { color: #A9232F; }

@media (prefers-reduced-motion: reduce) { .od-act { transition: none; } }

/* Not on a phone. The table already scrolls sideways there, and an action
   that cannot be undone should not sit under a thumb on a moving surface. */
@media (max-width: 899px) {
  .od-acts { display: none; }
  .order-detail.od-has-acts { padding-right: 0; }
}

/* ==========================================================================
   Track Order on a phone
   ==========================================================================
   The tracking panel opens inside the All Orders card, and on a phone it was
   pushing the whole page sideways: four .tr-step boxes at a fixed 78px, plus
   the lines between them, plus the card padding, add up to more than a 390px
   screen. A table cell cannot shrink below its content, so the table grew,
   the page gained a horizontal scrollbar, and every card looked shifted.

   The fix is to let the steps share whatever width there is instead of each
   demanding 78px, and to stop anything inside these panels from widening
   their cell. The card size itself is untouched.
   ========================================================================== */
@media (max-width: 780px) {
  /* Nothing inside an expandable row may make the row wider than the card. */
  .history-table tbody tr.history-fraud-row td,
  .history-table tbody tr.history-detail-row td { min-width: 0; overflow-x: hidden; }

  .tr-result { max-width: 100%; }
  .tr-stepper { min-width: 0; }
  /* Share the space rather than each insisting on 78px. */
  .tr-step { flex: 1 1 0; width: auto; min-width: 0; }
  .tr-step-label { font-size: 10px; line-height: 1.25; overflow-wrap: anywhere; }
  .tr-step-line { min-width: 4px; }

  /* A consignment id is one long unbroken string — the other thing that can
     push a card wider than the screen. */
  .tr-id, .tr-result-head { overflow-wrap: anywhere; }
  .tr-info-card, .tr-timeline { min-width: 0; }
}

/* কুরিয়ার পিকার — eye প্যানেলের ডান কোণে, Cancel/Return-এর উপরে */
.od-acts .od-courier {
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--line, #E3E3E3);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 6px;
}
.od-act.is-send { color: #0B7A3B; font-weight: 600; }
.od-sent {
  font-size: 12px;
  line-height: 1.4;
  color: #6B6B6B;
  text-align: right;
}

@media (max-width: 899px) {
  .od-acts { display: none; }     /* আগে থেকেই আছে — মোবাইলে এসব নেই */
}

@media print {
  /* 10mm @page margin + a 2mm inner safety inset on every slip page.
     Real printers each have their own small "unprintable zone" at the
     paper edge (varies by model/brand, often uneven — commonly worse on
     the top and trailing edge because of how the paper feeds through).
     A plain 8mm margin was tight enough that some printers clipped the
     top/right row of slips. 12mm total gives real hardware a safety
     buffer while still fitting 15 slips per page comfortably. */
  @page { size: A4 portrait; margin: 8mm; }

  html, body {
    background: #fff !important; margin: 0; padding: 0;
    width: auto !important; overflow-x: visible !important; /* undo the on-screen mobile-fit rules for print */
  }

  .no-print, .topbar, .layout, .app-footer, .preview-overlay { display: none !important; }
  .print-area { display: block !important; }

  * {
    box-shadow: none !important; text-shadow: none !important;
    background: #fff !important; color: #000 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  .a4-page {
    width: 100%; box-sizing: border-box; padding: 2mm;
    page-break-after: always; break-after: page;
    page-break-inside: avoid; break-inside: avoid;
    /* Last line of defence. If any future change, font substitution or
       printer driver quirk ever made the grid a millimetre too tall again,
       the excess is clipped here instead of being pushed onto a second sheet.
       A sheet of address labels must never be split — half a row on the next
       page ruins the whole sticker sheet, while a clipped hairline is
       invisible. With the sizing below this never actually clips anything;
       it exists so the failure mode can't come back. */
    overflow: hidden;
  }
  .a4-page:last-child { page-break-after: auto; break-after: auto; }

  /* ---------------- HOW THE SHEET IS SIZED (permanent fix) ----------------
     The original bug: the grid was a fixed 265mm tall. `@page { size: A4 }`
     is only a REQUEST — Chrome's print dialog lets the person choose the
     paper and their choice wins. Printing on US Letter (279.4mm, ~18mm
     shorter than A4) made the sheet taller than the page, so the last row
     straddled the boundary: 9 slips on one page, the rest sliced in half
     onto the next.

     Any single hard-coded millimetre value is fragile the same way, because
     the real usable height depends on three things CSS cannot read: the
     paper the person picked, the margin preset in the print dialog, and
     whether browser headers/footers are switched on. So the height is now
     defined two ways at once:

       height     100vh − 4mm   In print, 1vh is 1% of the actual page box,
                                so this measures whatever paper is really
                                loaded — A4, Letter, A5 — and adapts to it.
       max-height 244mm         A hard ceiling for the worst realistic case
                                (Letter at 0.5in margins ≈ 254mm usable),
                                used if a browser ever resolves vh oddly.

     Whichever is smaller wins, so the sheet can shrink to fit a small page
     but can never grow past a safe height on a large one. Combined with
     `overflow: hidden` on .a4-page above, a row physically cannot land on
     the following page any more. The only cost is some white space at the
     foot of an A4 sheet — a fair trade for 12 and 15 slips always landing
     complete on a single page. */
  .a4-grid {
    height: calc(100vh - 4mm);
    max-height: 244mm;
    width: 100%;
    page-break-inside: avoid; break-inside: avoid;
  }
  /* A single slip must never be cut in half by a page break either. */
  .slip, .slip2 { page-break-inside: avoid; break-inside: avoid; }

  /* The block above forces `background:#fff; color:#000` on every element
     (plain black-on-white output, since home printers/ink vary a lot) — but
     the Bold/Logo slip designs' icon badges, order-number badge, and DUE
     bar are deliberately solid black with white glyphs/text, same as they
     look on screen. A class selector always wins over the universal `*`
     selector regardless of !important + source order, so these re-assert
     black/white specifically for those elements without reopening the
     "arbitrary colors in print" problem the reset above exists to prevent. */
  .slip2-icon, .slip2-ordno, .slip2-due-label { background: #000 !important; }
  .slip2-icon, .slip2-icon *, .slip2-ordno, .slip2-due-label { color: #fff !important; }

  /* Keep the Logo Header mark solid black on paper. Re-stated inside the
     print block so it survives regardless of what the reset above touches,
     and because these sheets are printed black-ink-only — a colour logo left
     as-is halftones into muddy grey on the printers these go through. */
  .slip2-header-content.slip2-header-logo-only img {
    filter: grayscale(1) brightness(0) contrast(200%) !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ==========================================================================
   MANAGE SHOP CARD DESIGN SYSTEM FOR DELIVERY APP SETTINGS (#settingsView)
   ========================================================================== */

.sa-settings-view {
  max-width: 1250px !important;
  margin: 0 auto 30px !important;
  padding: 0 16px !important;
}

/* --- Settings Hub Wrap & Header --- */
.sa-st-hub-wrap {
  width: 100% !important;
  margin-bottom: 24px !important;
}
.sa-st-hub-header {
  margin-bottom: 20px !important;
}
.sa-st-hub-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  color: #111827 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}
.sa-st-hub-subtitle {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #6b7280 !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* --- Manage Shop Hub Card Grid --- */
.sa-ms-grid,
.sa-st-hub-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sa-ms-card,
.sa-st-hub-card {
  display: block !important;
  position: relative !important;
  background-color: #ffffff !important;
  border: 1px solid #e0e1e6 !important;
  border-radius: 12px !important;
  padding: 22px 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-align: left !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.sa-ms-card:hover,
.sa-st-hub-card:hover {
  border-color: #A23B5C !important;
  box-shadow: 0 8px 20px rgba(162, 59, 92, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-2px) !important;
}

.sa-ms-icon-wrap,
.sa-st-hub-icon-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: #FAF7FF !important;
  border: 1px solid #EDE9FE !important;
  color: #541DFF !important;
  margin-bottom: 12px !important;
}
.sa-st-hub-card:hover .sa-st-hub-icon-wrap {
  background: #FDF2F4 !important;
  border-color: #FBCFE8 !important;
  color: #A23B5C !important;
}
.sa-st-hub-icon-wrap svg {
  width: 24px !important;
  height: 24px !important;
}

.sa-ms-card-title,
.sa-st-hub-card-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  color: #111827 !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.01em !important;
}

.sa-ms-card-desc,
.sa-st-hub-card-desc {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #6b7280 !important;
  margin: 0 !important;
}

/* Glowing Spinning Badge */
.sa-ms-badge-container,
.sa-st-hub-badge-container {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  display: inline-block !important;
  overflow: hidden !important;
  border-radius: 9999px !important;
  padding: 1.5px !important;
  z-index: 2 !important;
}
.sa-ms-spinning-border {
  position: absolute !important;
  inset: -8px !important;
  background-image: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff) !important;
  animation: 3s linear infinite sa-st-spin-gradient !important;
  border-radius: 9999px !important;
}
@keyframes sa-st-spin-gradient {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.sa-ms-badge-pill {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  color: #541DFF !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* --- Submodule Subview Header --- */
.sa-st-subview-panel {
  width: 100% !important;
  margin-bottom: 24px !important;
}
.sa-st-subview-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
}
.sa-st-back-circle-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}
.sa-st-back-circle-btn:hover {
  background: #f9fafb !important;
  border-color: #A23B5C !important;
  color: #A23B5C !important;
  transform: translateX(-2px) !important;
}
.sa-st-back-circle-btn svg {
  width: 18px !important;
  height: 18px !important;
}
.sa-st-subview-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 !important;
}
.sa-st-subview-desc {
  font-size: 13.5px !important;
  color: #6b7280 !important;
  margin: 2px 0 0 0 !important;
}

/* --- Settings Subnav Tabs --- */
.sa-st-subnav {
  display: flex !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  margin: 0 auto 20px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.sa-st-subnav::-webkit-scrollbar { display: none; }

.sa-st-subnav-opt {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  border-radius: 11px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  background: transparent !important;
  box-shadow: none !important;
}
.sa-st-subnav-opt:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
}
.sa-st-subnav-opt:has(input:checked) {
  background: linear-gradient(135deg, #C9005D 0%, #E62E6B 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(201, 0, 93, 0.3) !important;
  border-color: transparent !important;
}
.sa-st-subnav-opt:has(input:checked) .tab-icon {
  color: #ffffff !important;
}

.sa-st-tab-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s;
}
.sa-st-tab-icon svg { width: 18px; height: 18px; }
.tab-icon-pathao { color: #E11D48; }
.tab-icon-paperfly { color: #0284C7; }
.tab-icon-steadfast { color: #059669; }
.tab-icon-redx { color: #DC2626; }

/* --- Hero Overview Banner --- */
.sa-st-hero-banner {
  background: linear-gradient(135deg, #FFF1F2 0%, #FDF2F8 50%, #FFE4E6 100%);
  border: 1px solid #FECDD3;
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(201, 0, 93, 0.04);
}
.sa-st-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: #C9005D;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sa-st-hero-title {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}
.sa-st-hero-desc {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  max-width: 760px;
  line-height: 1.5;
}
.sa-st-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
}
.sa-st-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  animation: sa-st-pulse 2s infinite;
}
.sa-st-pulse-dot.dot-red { background: #EF4444; }
.sa-st-pulse-dot.dot-blue { background: #0284C7; }
.sa-st-pulse-dot.dot-green { background: #059669; }

@keyframes sa-st-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.25); }
}

/* ==========================================================================
   DELIVERY SLIP DESIGN PICKER & REALISTIC PREVIEW CARDS
   ========================================================================== */

.slip-design-picker,
.sa-st-slip-picker {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 820px) {
  .slip-design-picker,
  .sa-st-slip-picker {
    grid-template-columns: 1fr !important;
  }
}

.slip-design-opt,
.sa-st-slip-opt {
  display: block !important;
  position: relative !important;
  cursor: pointer !important;
  user-select: none !important;
  margin: 0 !important;
}

.slip-design-opt input[type="radio"],
.sa-st-slip-opt input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

.slip-preview-card,
.sa-st-slip-card {
  background: #f8fafc !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 14px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  height: 100% !important;
}

.slip-design-opt:hover .slip-preview-card,
.sa-st-slip-opt:hover .sa-st-slip-card {
  border-color: #cbd5e1 !important;
  background: #f1f5f9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.slip-design-opt:has(input:checked) .slip-preview-card,
.sa-st-slip-opt:has(input:checked) .sa-st-slip-card {
  border-color: #541DFF !important;
  background: #FAF7FF !important;
  box-shadow: 0 8px 20px rgba(84, 29, 255, 0.12) !important;
  transform: translateY(-2px) !important;
}

/* Mock Slip Visual Container */
.slip-mock,
.sa-st-mock {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  min-height: 140px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

.slip-mock-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px dashed #cbd5e1 !important;
  padding-bottom: 5px !important;
  margin-bottom: 2px !important;
}

.mock-shop {
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  color: #0f172a !important;
}

.mock-ordno {
  font-weight: 700 !important;
  color: #64748b !important;
  font-size: 10px !important;
}

.slip-mock-cust {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
}
.slip-mock-cust strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}
.slip-mock-cust span {
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

.slip-mock-addr {
  font-size: 10px !important;
  color: #475569 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.slip-mock-items {
  font-size: 9.5px !important;
  color: #334155 !important;
  background: #f8fafc !important;
  padding: 5px 8px !important;
  border-radius: 4px !important;
  border: 1px solid #f1f5f9 !important;
  margin: 2px 0 !important;
  line-height: 1.3 !important;
}

.slip-mock-due {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px dashed #cbd5e1 !important;
  padding-top: 5px !important;
  margin-top: auto !important;
  font-size: 11px !important;
}
.slip-mock-due span {
  font-weight: 700 !important;
  color: #64748b !important;
  font-size: 9.5px !important;
}
.slip-mock-due strong {
  font-weight: 800 !important;
  color: #0f172a !important;
}

/* Bold Mock Head */
.slip-mock-head-bold {
  background: #0f172a !important;
  color: #ffffff !important;
  padding: 5px 8px !important;
  border-radius: 5px !important;
  text-align: center !important;
  margin-bottom: 2px !important;
}
.slip-mock-head-bold .mock-shop {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 10.5px !important;
}

/* Logo Mock Head */
.slip-mock-head-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 2px !important;
}
.mock-logo-box {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  background: #A23B5C !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  display: grid !important;
  place-items: center !important;
}

.slip-mock-grid {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.slip-mock-badge-box {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  flex-shrink: 0 !important;
}

.slip-mock-due-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: #f8fafc !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  border-top: 1px solid #e2e8f0 !important;
  margin-top: auto !important;
  font-size: 10.5px !important;
}
.slip-mock-due-bar span {
  font-weight: 700 !important;
  color: #64748b !important;
  font-size: 9px !important;
}
.slip-mock-due-bar strong {
  font-weight: 800 !important;
  color: #0f172a !important;
}

/* Radio Indicator & Label */
.slip-design-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-top: auto !important;
  padding-top: 4px !important;
}

.radio-indicator {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 2px solid #cbd5e1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

.slip-design-opt:has(input:checked) .radio-indicator {
  border-color: #C9005D !important;
  background: #C9005D !important;
}

.slip-design-opt:has(input:checked) .radio-indicator::after {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
}

.slip-design-opt:has(input:checked) .slip-design-label {
  color: #C9005D !important;
}

/* --- Courier Hero Banners --- */
.sa-st-courier-banner {
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.sa-st-courier-banner.banner-pathao {
  background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%);
  border: 1px solid #FECDD3;
}
.sa-st-courier-banner.banner-paperfly {
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
  border: 1px solid #BAE6FD;
}
.sa-st-courier-banner.banner-steadfast {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1px solid #A7F3D0;
}
.sa-st-courier-banner.banner-redx {
  background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
  border: 1px solid #FECACA;
}

.sa-st-courier-logo-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.banner-pathao .sa-st-courier-logo-box { color: #E11D48; }
.banner-paperfly .sa-st-courier-logo-box { color: #0284C7; }
.banner-steadfast .sa-st-courier-logo-box { color: #059669; }
.banner-redx .sa-st-courier-logo-box { color: #DC2626; }
.sa-st-courier-logo-box svg { width: 26px; height: 26px; }

.sa-st-courier-info { flex: 1; min-width: 220px; }
.sa-st-courier-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 2px;
}
.sa-st-courier-title {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 3px 0;
}
.sa-st-courier-desc {
  font-size: 13px;
  color: #4b5563;
  margin: 0;
}
.sa-st-courier-status-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.05);
}

/* --- Card Architecture --- */
.sa-st-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.02) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.sa-st-card:hover {
  border-color: #d1d5db !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
}

.sa-st-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  margin-bottom: 0 !important;
  background: #ffffff !important;
}
.sa-st-card-head-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sa-st-head-badge {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
.sa-st-head-badge svg { width: 20px !important; height: 20px !important; }
.badge-purple { background: #F3E8FF !important; color: #7C3AED !important; }
.badge-blue { background: #E0F2FE !important; color: #0284C7 !important; }
.badge-amber { background: #FEF3C7 !important; color: #D97706 !important; }
.badge-emerald { background: #D1FAE5 !important; color: #059669 !important; }
.badge-red { background: #FEE2E2 !important; color: #DC2626 !important; }

.sa-st-card-head h2,
.sa-st-card-head h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 2px 0 !important;
  letter-spacing: -0.01em !important;
}
.sa-st-card-head .panel-head-desc {
  font-size: 13px !important;
  color: #6b7280 !important;
  margin: 0 !important;
}

.sa-st-card-body {
  padding: 22px !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* --- Form Fields & Inputs --- */
.sa-st-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sa-st-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
}
.sa-st-label-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

.sa-st-input,
.sa-st-select,
.sa-st-card-body input[type="text"],
.sa-st-card-body input[type="password"],
.sa-st-card-body input[type="number"],
.sa-st-card-body input[type="url"],
.sa-st-card-body select,
.sa-st-card-body textarea {
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  color: #111827 !important;
  background: #f9fafb !important;
  font-family: inherit !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.sa-st-card-body textarea {
  height: auto !important;
  padding: 10px 14px !important;
  min-height: 80px !important;
}
.sa-st-input:focus,
.sa-st-select:focus,
.sa-st-card-body input[type="text"]:focus,
.sa-st-card-body input[type="password"]:focus,
.sa-st-card-body input[type="number"]:focus,
.sa-st-card-body input[type="url"]:focus,
.sa-st-card-body select:focus,
.sa-st-card-body textarea:focus {
  background: #ffffff !important;
  border-color: #541DFF !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(84, 29, 255, 0.12) !important;
}

.sa-st-file-input {
  padding: 8px 12px !important;
  background: #f9fafb !important;
  border: 1px dashed #d1d5db !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}

.sa-st-color-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.sa-st-color-picker {
  width: 42px !important;
  height: 42px !important;
  padding: 3px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  background: #fff !important;
  cursor: pointer !important;
}

/* --- Password Toggle Wrap --- */
.sa-st-pw-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
.sa-st-pw-toggle {
  position: absolute !important;
  right: 6px !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  color: #9ca3af !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: color 0.15s, background 0.15s !important;
}
.sa-st-pw-toggle:hover {
  color: #374151 !important;
  background: #f3f4f6 !important;
}
.sa-st-pw-toggle svg { width: 17px; height: 17px; }

/* --- Hints & Callouts --- */
.sa-st-hint {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 3.5px solid #6366f1 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.sa-st-hint strong {
  color: #1e293b !important;
  display: block !important;
  margin-bottom: 2px !important;
  font-size: 13px !important;
}
.sa-st-hint p { margin: 0 !important; }

/* --- Toggle Switch Rows --- */
.sa-st-toggles-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sa-st-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s !important;
  margin: 0 !important;
}
.sa-st-toggle-row:hover {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
}
.sa-st-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sa-st-toggle-label strong {
  font-size: 13.5px !important;
  color: #111827 !important;
  font-weight: 600 !important;
}
.sa-st-toggle-desc {
  font-size: 12px !important;
  color: #6b7280 !important;
}
.sa-st-checkbox {
  width: 20px !important;
  height: 20px !important;
  accent-color: #C9005D !important;
  cursor: pointer !important;
}

/* --- Action Buttons --- */
.sa-st-actions-row {
  display: flex !important;
  gap: 12px !important;
  margin-top: 6px !important;
  align-items: center !important;
}
.sa-st-btn-primary {
  height: 42px !important;
  padding: 0 22px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #C9005D 0%, #E62E6B 100%) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(201, 0, 93, 0.25) !important;
  transition: all 0.2s ease !important;
}
.sa-st-btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(84, 29, 255, 0.35) !important;
}
.sa-st-btn-primary:active {
  transform: translateY(0) !important;
}
.sa-st-btn-icon { width: 16px; height: 16px; }

.sa-st-btn-secondary {
  height: 40px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.15s ease !important;
}
.sa-st-btn-secondary:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
}

.sa-st-btn-ghost-danger {
  height: 40px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: #FEF2F2 !important;
  color: #DC2626 !important;
  border: 1px solid #FECACA !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.15s ease !important;
}
.sa-st-btn-ghost-danger:hover {
  background: #FEE2E2 !important;
  border-color: #FCA5A5 !important;
}

.sa-st-btn-sm {
  height: 36px !important;
  padding: 0 16px !important;
  font-size: 12.5px !important;
}

/* --- Danger Box --- */
.sa-st-danger-box {
  background: #FFF8F8 !important;
  border: 1px solid #FECACA !important;
  border-radius: 12px !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.sa-st-danger-text strong {
  color: #991B1B !important;
  font-size: 13.5px !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.sa-st-danger-text p {
  color: #B91C1C !important;
  font-size: 12.5px !important;
  margin: 0 !important;
}

/* --- Badges --- */
.sa-st-badge-active {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #065F46 !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}
.sa-st-badge-inactive {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #F3F4F6 !important;
  border: 1px solid #E5E7EB !important;
  color: #6B7280 !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

/* --- Stats Grid --- */
.sa-st-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 12px !important;
  margin: 8px 0 14px !important;
}
.sa-st-stat-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: center !important;
}
.sa-st-stat-num {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #541DFF !important;
}
.sa-st-stat-label {
  font-size: 11.5px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* --- Details / Logs --- */
.sa-st-details summary {
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #541DFF !important;
  padding: 8px 0 !important;
}
.sa-st-details-body {
  padding: 10px 0 !important;
}

/* --- Sync Box --- */
.sa-st-sync-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px;
}
.sa-st-sync-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sa-st-sync-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.sa-st-sync-btn-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sa-st-sync-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #EEF2FF;
  color: #4F46E5;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sa-st-sync-icon svg { width: 18px; height: 18px; }
.sa-st-sync-btn-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 2px;
}
.sa-st-sync-btn-text strong {
  font-size: 14px;
  color: #111827;
}
.sa-st-sync-btn-text span {
  font-size: 12px;
  color: #6b7280;
}
.sa-st-chevron {
  font-size: 20px;
  color: #9ca3af;
}

/* --- Google Drive Steps --- */
.sa-st-drive-steps {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.sa-st-drive-step-card {
  display: flex !important;
  gap: 14px !important;
  padding: 16px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  align-items: flex-start !important;
}
.sa-st-step-badge {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #C9005D !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.sa-st-step-body {
  flex: 1 !important;
  min-width: 0 !important;
}
.sa-st-auth-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* --- Mobile Breakpoints --- */
@media (max-width: 1024px) {
  .sa-ms-grid,
  .sa-st-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .sa-ms-grid,
  .sa-st-hub-grid {
    grid-template-columns: 1fr !important;
  }
  .sa-st-subnav {
    gap: 6px !important;
    padding: 5px !important;
  }
  .sa-st-subnav-opt {
    padding: 8px 12px !important;
    font-size: 12px !important;
    gap: 6px !important;
  }
  .sa-st-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .sa-st-hero-banner,
  .sa-st-courier-banner {
    padding: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .sa-st-courier-status-badge,
  .sa-st-hero-badge {
    margin-left: 0 !important;
  }
  .sa-st-card-head {
    padding: 14px 16px !important;
  }
  .sa-st-card-body {
    padding: 16px !important;
  }
  .sa-st-danger-box {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}