/* ============================================================================
   CloudPrint SaaS — Merchant panel layout
   Reuses design tokens from main.css (loaded first); adds dashboard chrome:
   sidebar, topbar, stat cards, tables, forms.
   ========================================================================= */

.panel-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--text-primary) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text-primary) 4%, transparent) 1px, transparent 1px),
    radial-gradient(520px circle at 8% 0%, color-mix(in srgb, var(--accent-1) 7%, transparent), transparent 70%),
    radial-gradient(480px circle at 96% 40%, color-mix(in srgb, var(--accent-2) 5%, transparent), transparent 70%);
  background-size: 48px 48px, 48px 48px, auto, auto;
  background-attachment: fixed, fixed, fixed, fixed;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
}
@media (max-width: 720px) {
  .panel-shell {
    background-image:
      linear-gradient(color-mix(in srgb, var(--text-primary) 3%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--text-primary) 3%, transparent) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px;
    background-attachment: scroll, scroll;
  }
}

/* ---------------- Sidebar ---------------- */
.panel-sidebar {
  width: 240px;
  flex-shrink: 0;
  background-color: var(--bg-elevated);
  background-image:
    linear-gradient(color-mix(in srgb, var(--text-primary) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text-primary) 4%, transparent) 1px, transparent 1px),
    radial-gradient(360px circle at 0% 0%, color-mix(in srgb, var(--accent-1) 6%, transparent), transparent 70%);
  background-size: 40px 40px, 40px 40px, auto;
  background-attachment: fixed, fixed, fixed;
  background-repeat: repeat, repeat, no-repeat;
  border-right: 1px solid var(--surface-glass-border);
  padding: 20px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.panel-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  padding: 6px 8px 22px;
}

.panel-nav { display: flex; flex-direction: column; gap: 2px; }
.panel-nav-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); padding: 16px 10px 6px; }

.panel-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 500;
  color: var(--text-muted);
}
.panel-nav a:hover { background: var(--surface-glass); color: var(--text-primary); }
.panel-nav a.active { background: var(--accent-gradient); color: #fff; }
.panel-nav a svg { flex-shrink: 0; width: 18px; height: 18px; }

/* ---------------- Main column ---------------- */
.panel-main { flex: 1; min-width: 0; }

.panel-topbar {
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--surface-glass-border);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
}

.panel-topbar h1 { font-size: 1.1rem; }
.panel-status-pill {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 4px 10px; border-radius: 999px;
}
.panel-status-pill.pending  { background: color-mix(in srgb, var(--accent-warm) 20%, transparent); color: var(--accent-warm); }
.panel-status-pill.active   { background: color-mix(in srgb, #16A34A 20%, transparent); color: #16A34A; }
.panel-status-pill.suspended, .panel-status-pill.rejected { background: color-mix(in srgb, #DC2626 20%, transparent); color: #DC2626; }

.panel-body { padding: 28px; max-width: 1100px; }

/* ---------------- Stat cards ---------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card {
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.stat-card .label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 8px; }
.stat-card .value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; }
.stat-card .delta { font-size: 0.76rem; margin-top: 6px; }
.stat-card .delta.up { color: #16A34A; }
.stat-card .delta.down { color: #DC2626; }

/* ---------------- Panels / cards ---------------- */
.panel-card {
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: none;
}
.panel-card h2 { font-size: 1.05rem; margin-bottom: 4px; }
.panel-card .sub { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 20px; }

/* ---------------- Forms ---------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid.full { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.field .hint { font-size: 0.74rem; color: var(--text-faint); }
.field input, .field select, .field textarea {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-glass-border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-2); }
.form-actions { display: flex; gap: 12px; margin-top: 20px; }

.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.86rem; margin-bottom: 20px; }
.alert-error { background: color-mix(in srgb, #DC2626 12%, transparent); color: #DC2626; border: 1px solid color-mix(in srgb, #DC2626 30%, transparent); }
.alert-success { background: color-mix(in srgb, #16A34A 12%, transparent); color: #16A34A; border: 1px solid color-mix(in srgb, #16A34A 30%, transparent); }
.alert-warning { background: color-mix(in srgb, #D97706 12%, transparent); color: #D97706; border: 1px solid color-mix(in srgb, #D97706 30%, transparent); }

/* ---------------- Tables ---------------- */
/* Wraps any wide .data-table so it scrolls horizontally WITHIN its own
   card instead of overflowing past the card's edge onto the raw page
   background (which is what was happening on pages with many columns,
   e.g. Merchant Approvals — the table has ~10 columns of real content
   and table-layout:auto lets a table grow past its container's width
   when content demands it, regardless of `width:100%`). */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .data-table { min-width: 920px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.data-table th {
  text-align: left; font-weight: 600; color: var(--text-faint);
  text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em;
  padding: 10px 14px; border-bottom: 1px solid var(--surface-glass-border);
}
.data-table td { padding: 14px; border-bottom: 1px solid var(--surface-glass-border); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface-glass); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.pill-queued    { background: color-mix(in srgb, #FF7A00 18%, transparent); color: #FF7A00; }
.pill-printing  { background: color-mix(in srgb, #D100C8 18%, transparent); color: #D100C8; }
.pill-completed { background: color-mix(in srgb, #16A34A 18%, transparent); color: #16A34A; }
.pill-failed    { background: color-mix(in srgb, #DC2626 18%, transparent); color: #DC2626; }
.pill-paid      { background: color-mix(in srgb, #16A34A 18%, transparent); color: #16A34A; }
.pill-pending   { background: color-mix(in srgb, #FF7A00 18%, transparent); color: #FF7A00; }

.empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.empty-state svg { margin: 0 auto 14px; color: var(--text-faint); }

/* ---------------- Printer / pricing rows ---------------- */
.printer-row, .pricing-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--surface-glass-border);
  gap: 14px; flex-wrap: wrap;
}
.printer-row:last-child, .pricing-row:last-child { border-bottom: none; }
.printer-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.printer-dot.online { background: #16A34A; box-shadow: 0 0 0 4px color-mix(in srgb, #16A34A 25%, transparent); }
.printer-dot.offline { background: var(--text-faint); }
.printer-dot.error { background: #DC2626; box-shadow: 0 0 0 4px color-mix(in srgb, #DC2626 25%, transparent); }

/* ---------------- QR page ---------------- */
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px 0; }
#qr-canvas-holder { padding: 20px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
#qr-canvas-holder canvas, #qr-canvas-holder img { width: 240px; height: 240px; display: block; }

/* ---------------- Mobile-only sidebar chrome (hidden on desktop) ---------------- */
.panel-sidebar-mobile-head, .panel-sidebar-close, .panel-sidebar-backdrop, .panel-bottom-nav { display: none; }

@media (max-width: 860px) {
  .panel-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow-lifted);
    width: 82vw; max-width: 300px;
  }
  .panel-sidebar.open { transform: translateX(0); }
  .panel-body { padding: 18px; padding-bottom: 94px; }
  .form-grid { grid-template-columns: 1fr; }
  .panel-merchant-name { display: none; }

  /* Drawer header: shop name + connection dot + close button */
  .panel-sidebar-mobile-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 2px 4px 14px;
  }
  .psm-shop { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.86rem; font-weight: 700; }
  .psm-shop .psm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .psm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-faint); }
  .psm-dot.on { background: #16A34A; box-shadow: 0 0 0 3px color-mix(in srgb, #16A34A 25%, transparent); }
  .panel-sidebar-close {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: var(--surface-glass); border: 1px solid var(--surface-glass-border);
    color: var(--text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
  }

  /* Dimmed backdrop behind the open drawer */
  .panel-sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 90;
    background: rgba(17, 24, 39, 0.45); opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .panel-sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

  /* Topbar: fewer, non-colliding elements — title truncates, secondary icons move into the drawer */
  .panel-topbar { padding: 0 14px; gap: 8px; }
  .panel-topbar > div { gap: 8px !important; }
  .panel-topbar h1 { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .panel-mobile-toggle, .panel-icon-btn { width: 34px; height: 34px; flex-shrink: 0; }
  .panel-topbar a[aria-label^="Desktop Agent"] { display: none; }
  .panel-status-pill { display: none; }

  /* Denser, app-like stat cards: 2 per row */
  .stat-grid, .stat-grid.premium { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card, .stat-card.premium { padding: 14px; }
  .stat-card .stat-icon { width: 34px; height: 34px; }
  .stat-card .value { font-size: 1.2rem; }
  .stat-card .label { font-size: 0.72rem; }

  /* ---------------- Bottom tab bar (Swiggy/Zomato-style app nav) ---------------- */
  .panel-bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: var(--bg-elevated); border-top: 1px solid var(--surface-glass-border);
    box-shadow: 0 -6px 20px rgba(20,20,43,0.08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .panel-bottom-nav a, .panel-bottom-nav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; border: none; background: none; cursor: pointer;
    color: var(--text-faint); font-size: 0.66rem; font-weight: 600;
  }
  .panel-bottom-nav svg { width: 20px; height: 20px; }
  .panel-bottom-nav a.active { color: var(--accent-1); }
  .panel-bottom-nav a.active svg { filter: drop-shadow(0 0 0 var(--accent-1)); }

  /* Denser cards, app-style */
  .panel-card { padding: 16px; border-radius: var(--radius-md); }
  .panel-card h2 { font-size: 0.96rem; }

  /* ---------------- Tables → stacked cards (app-style grid) ---------------- */
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr { display: block; width: 100%; }
  .data-table { border: none; }
  .data-table tr {
    background: var(--bg-elevated);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
  }
  .data-table td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid var(--surface-glass-border);
    text-align: right;
  }
  .data-table td:last-child { border-bottom: none; }
  .data-table td:empty { display: none; }
  .data-table td[data-label=""] { justify-content: flex-end; }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 700; color: var(--text-faint); font-size: 0.68rem;
    text-transform: uppercase; letter-spacing: 0.04em; text-align: left;
    flex-shrink: 0;
  }
  .data-table td[data-label=""]::before { content: none; }
  .data-table tr:hover td { background: none; }

  /* Desktop tables can opt out of the generic label/value stacking above
     (an .app-list with richer cards renders alongside instead — see
     below) by adding this class. */
  table.data-table.has-app-cards { display: none; }

  /* ---------------- Rich app-style list cards ---------------- */
  .app-list { display: flex; flex-direction: column; gap: 12px; }
  .app-card {
    background: var(--bg-elevated); border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-soft);
  }
  .app-card-top { display: flex; align-items: flex-start; gap: 10px; }
  .app-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff;
  }
  .app-card-title { flex: 1; min-width: 0; }
  .app-card-name { font-weight: 700; font-size: 0.94rem; overflow-wrap: break-word; line-height: 1.3; }
  .app-card-sub { font-size: 0.76rem; color: var(--text-muted); margin-top: 1px; overflow-wrap: break-word; line-height: 1.3; }
  .app-card-top .pill { flex-shrink: 0; }
  .app-card-meta { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; }
  .app-meta-row { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-muted); }
  .app-meta-row svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-faint); }
  .app-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .app-card-stats { display: flex; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--surface-glass-border); }
  .app-card-stat .v { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; }
  .app-card-stat .l { font-size: 0.68rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; }
  .app-card-actions {
    display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--surface-glass-border);
  }
  .app-card-actions form { display: contents; }
  .app-card-actions .btn { flex: 1; text-align: center; padding: 8px 10px; font-size: 0.8rem; }
  .app-card-actions .btn-icon-only { flex: 0 0 auto; width: 36px; padding: 8px; }

  /* ---------------- Plan pricing card ---------------- */
  .plan-app-card-price { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; }
  .plan-app-card-price .amt { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
  .plan-app-card-price .per { font-size: 0.78rem; color: var(--text-muted); }
  .plan-app-card-price .yearly { font-size: 0.78rem; color: var(--text-muted); margin-left: 4px; }
  .plan-app-card-limits { display: flex; gap: 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--surface-glass-border); }
}
@media (min-width: 861px) {
  .app-list { display: none; }
  .panel-mobile-toggle { display: none; }
}

/* ---------------- Topbar chrome: icon buttons + notification bell ---------------- */
.panel-mobile-toggle, .panel-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--surface-glass); border: 1px solid var(--surface-glass-border);
  color: var(--text-muted); cursor: pointer; flex-shrink: 0; position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}
.panel-mobile-toggle svg, .panel-icon-btn svg { width: 17px; height: 17px; }
.panel-mobile-toggle:hover, .panel-icon-btn:hover { background: var(--accent-gradient); color: #fff; }

.panel-notif { position: relative; }
.panel-notif-badge {
  position: absolute; top: -4px; right: -4px;
  background: #DC2626; color: #fff; font-size: 0.62rem; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.panel-notif-dropdown {
  display: none;
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 320px; max-width: 88vw; max-height: 420px; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lifted);
  z-index: 50;
}
.panel-notif-dropdown.open { display: block; animation: cpFadeSlide 0.15s ease; }
.panel-notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--surface-glass-border);
  font-weight: 700; font-size: 0.86rem;
}
.panel-notif-head button {
  background: none; border: none; color: var(--accent-1); font-size: 0.74rem; font-weight: 700; cursor: pointer;
}
.panel-notif-item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--surface-glass-border); }
.panel-notif-item:last-child { border-bottom: none; }
.panel-notif-item:hover { background: var(--surface-glass); }
.panel-notif-item.unread { background: color-mix(in srgb, var(--accent-2) 6%, transparent); }
.panel-notif-item .title { font-size: 0.84rem; font-weight: 700; margin-bottom: 2px; }
.panel-notif-item .msg { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 4px; }
.panel-notif-item .time { font-size: 0.68rem; color: var(--text-faint); }
.panel-notif-empty { padding: 28px 16px; text-align: center; color: var(--text-faint); font-size: 0.82rem; }

@keyframes cpFadeSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cpPulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------------- Premium stat cards (dashboard) ---------------- */
.stat-grid.premium { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat-card.premium {
  display: flex; align-items: flex-start; gap: 14px;
  animation: cpFadeIn 0.35s ease;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.stat-card.premium:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.stat-card .stat-icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-gradient); color: #fff;
}
.stat-card .stat-icon svg { width: 20px; height: 20px; }
.stat-card .stat-icon.warm { background: linear-gradient(120deg, #FF7A00, #FF7A00); }
.stat-card .stat-icon.green { background: linear-gradient(120deg, #16A34A, #22C55E); }
.stat-card .stat-icon.red { background: linear-gradient(120deg, #DC2626, #EF4444); }
.stat-card .stat-icon.blue { background: linear-gradient(120deg, #2563EB, #3B82F6); }
.stat-card .stat-icon.muted { background: var(--surface-glass); color: var(--text-muted); border: 1px solid var(--surface-glass-border); }
.stat-card .stat-icon svg text { stroke: none; }

/* ---------------- KPI dynamic-state micro-animations ----------------
   Kept intentionally subtle and event-driven (see dashboard.php's poll
   script): a card only pulses when its own value/status just changed,
   never on a fixed timer, per the "no constant pulsing" requirement. */
@keyframes cpKpiValueFlash {
  0%   { background: color-mix(in srgb, var(--accent-2, #D100C8) 14%, transparent); }
  100% { background: transparent; }
}
.stat-card.premium.kpi-flash { animation: cpKpiValueFlash 1.1s ease; border-radius: var(--radius-md); }

@keyframes cpKpiIconPulseGreen { 0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.35); } 50% { box-shadow: 0 0 0 6px rgba(22,163,74,0); } }
@keyframes cpKpiIconPulseBlue  { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.35); } 50% { box-shadow: 0 0 0 6px rgba(37,99,235,0); } }
@keyframes cpKpiIconPulseRed   { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.35); } 50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); } }
@keyframes cpKpiIconPulseWarm  { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,0,0.35); } 50% { box-shadow: 0 0 0 6px rgba(255,122,0,0); } }
.stat-card .stat-icon.pulse-live.green { animation: cpKpiIconPulseGreen 2s infinite; }
.stat-card .stat-icon.pulse-live.blue  { animation: cpKpiIconPulseBlue 1.4s infinite; }
.stat-card .stat-icon.pulse-live.red   { animation: cpKpiIconPulseRed 1.6s infinite; }
.stat-card .stat-icon.pulse-live.warm  { animation: cpKpiIconPulseWarm 1.8s infinite; }

.stat-card.premium.attention { border-color: color-mix(in srgb, #FF7A00 45%, var(--surface-glass-border)); }
.stat-card .kpi-sub { font-size: 0.76rem; margin-top: 6px; color: var(--text-muted); }
.stat-card .kpi-sub.state-ready, .stat-card .kpi-sub.state-active, .stat-card .kpi-sub.state-lifetime { color: #16A34A; }
.stat-card .kpi-sub.state-printing, .stat-card .kpi-sub.state-trial { color: #2563EB; }
.stat-card .kpi-sub.state-busy, .stat-card .kpi-sub.state-expiring, .stat-card .kpi-sub.state-attention { color: #FF7A00; }
.stat-card .kpi-sub.state-offline, .stat-card .kpi-sub.state-error, .stat-card .kpi-sub.state-expired { color: #DC2626; }

@media (prefers-reduced-motion: reduce) {
  .stat-card .stat-icon.pulse-live { animation: none !important; }
  .stat-card.premium.kpi-flash { animation: none !important; }
}

/* ---------------- Quick actions ---------------- */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.quick-action {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 10px; border-radius: var(--radius-md);
  background: var(--surface-glass); border: 1px solid var(--surface-glass-border);
  text-align: center; font-size: 0.76rem; font-weight: 600; color: var(--text-primary);
  transition: transform 0.15s ease, background 0.15s ease;
}
.quick-action:hover { transform: translateY(-2px); background: var(--accent-gradient); color: #fff; }
.quick-action:hover .quick-action-icon { background: rgba(255,255,255,0.2); color: #fff; }
.quick-action-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent-1) 12%, transparent); color: var(--accent-1);
}
.quick-action-icon svg { width: 18px; height: 18px; }

/* ---------------- Shop status widget ---------------- */
.status-widget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.status-widget-row { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; }
.status-widget-row .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-widget-row .dot.on { background: #16A34A; box-shadow: 0 0 0 4px color-mix(in srgb, #16A34A 22%, transparent); animation: cpPulseDot 2s infinite; }
.status-widget-row .dot.off { background: var(--text-faint); }
.status-widget-row .dot.warn { background: #FF7A00; box-shadow: 0 0 0 4px color-mix(in srgb, #FF7A00 22%, transparent); }
.status-widget-row .label-sm { color: var(--text-muted); }
.status-widget-row .value-sm { font-weight: 700; margin-left: auto; }

/* ---------------- Chart cards ---------------- */
.chart-card canvas { max-height: 260px; }
.chart-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
@media (max-width: 960px) { .chart-grid { grid-template-columns: 1fr; } }

/* ---------------- Slider preview thumbnails (dashboard) ---------------- */
.slider-thumb-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.slider-thumb { flex-shrink: 0; width: 96px; height: 60px; border-radius: 10px; object-fit: cover; border: 1px solid var(--surface-glass-border); }

/* ---------------- A4 QR poster ---------------- */
/* This whole design is fixed, identical for every merchant. The ONLY
   dynamic element is the QR code inside .a4p-qrframe, rendered client-side
   by QRCode.js in qr-code.php against that merchant's own $shopUrl — see
   the comments in qr-code.php for how that wiring works. Everything below
   is static artwork; nothing here should reference a specific merchant. */
.qr-poster-card { overflow: visible; }
.a4-poster-viewport {
  display: flex; justify-content: center; margin-top: 22px;
  padding: 24px; border-radius: var(--radius-md);
  background: repeating-linear-gradient(45deg, var(--surface-glass) 0, var(--surface-glass) 10px, transparent 10px, transparent 20px);
}
.a4-poster {
  --a4-orange: #FF7A00; --a4-pink: #FF2E7A; --a4-purple: #8A00D4; --a4-navy: #0B0F1E;
  --a4-grad: linear-gradient(120deg, var(--a4-orange) 0%, var(--a4-pink) 52%, var(--a4-purple) 100%);
  width: 100%; max-width: 460px; aspect-ratio: 210 / 297;
  container-type: inline-size;
  background: #fff; color: var(--a4-navy);
  border-radius: 14px; box-shadow: var(--shadow-lifted);
  border: 2px solid var(--a4-navy);
  display: flex; flex-direction: column;
  padding: 4.5cqw 3.6cqw 0;
  position: relative; overflow: hidden;
}

/* ---- header: logo + tagline, tilted "SMART PRINTING MADE SIMPLE" badge ---- */
.a4p-hd-row { display: flex; align-items: flex-start; justify-content: space-between; }
.a4p-brand { display: flex; align-items: center; gap: 1.2cqw; }
.a4p-brand img { width: 8.2cqw; height: 8.2cqw; border-radius: 22%; flex-shrink: 0; }
.a4p-word { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 5.6cqw; letter-spacing: -0.01em; line-height: 1; color: var(--a4-navy); }
.a4p-word .a4p-niq { background: var(--a4-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.a4p-word sup { font-size: 1.8cqw; vertical-align: super; }
.a4p-tag { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 2.3cqw; margin-top: 0.3cqw; color: var(--a4-navy); }
.a4p-tag-brand { background: var(--a4-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.a4p-brand-rule { height: 3px; width: 34cqw; max-width: 100%; background: var(--a4-grad); border-radius: 3px; margin-top: 0.8cqw; }

.a4p-badge {
  position: relative; transform: rotate(4deg); background: var(--a4-grad); border-radius: 1.6cqw;
  padding: 1.6cqw 2.4cqw; text-align: center; box-shadow: 0.5cqw 0.7cqw 0 rgba(11,15,30,0.18);
  flex-shrink: 0;
}
.a4p-b1, .a4p-b3 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 2.2cqw; color: #fff; line-height: 1.15; }
.a4p-b2 {
  display: flex; align-items: center; justify-content: center; gap: 0.5cqw; margin: 0.3cqw 0;
  background: #FFD400; color: var(--a4-navy); font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 2.4cqw;
  padding: 0.3cqw 1.2cqw; border-radius: 0.7cqw; transform: rotate(-2deg);
}
.a4p-b2 svg { width: 1.6cqw; height: 1.6cqw; color: #fff; flex-shrink: 0; }

/* ---- headline ---- */
.a4p-headline { text-align: center; margin-top: 5.5cqw; }
.a4p-h1 { font-family: 'Poppins', sans-serif; font-weight: 800; font-style: italic; font-size: 4.3cqw; letter-spacing: 0.01em; color: var(--a4-navy); }
.a4p-h2-row { display: flex; align-items: center; justify-content: center; gap: 1.2cqw; }
.a4p-h2 {
  font-family: 'Poppins', sans-serif; font-weight: 900; font-style: italic; font-size: 9.6cqw; line-height: 0.95;
  background: var(--a4-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0.25cqw 0.3cqw 0 rgba(11,15,30,0.15));
}
.a4p-burst { width: 3.6cqw; height: 3.6cqw; color: var(--a4-orange); flex-shrink: 0; }

/* ---- SCAN · UPLOAD · PAY · PRINT ribbon ---- */
.a4p-ribbon {
  margin-top: 4cqw; background: var(--a4-grad); border-radius: 1.4cqw;
  padding: 1.1cqw 0; display: flex; align-items: center; justify-content: center; gap: 0.7cqw;
  width: calc(100% + 7.2cqw); margin-left: -3.6cqw;
}
.a4p-rit { display: flex; align-items: center; gap: 0.6cqw; padding: 0 1.6cqw; }
.a4p-rit svg { width: 1.8cqw; height: 1.8cqw; color: #fff; flex-shrink: 0; }
.a4p-rit span { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 2.1cqw; color: #fff; }
.a4p-rdot { width: 0.5cqw; height: 0.5cqw; border-radius: 50%; background: #FFD400; flex-shrink: 0; }

/* ---- step 1 / QR / step 3 flow row ---- */
.a4p-flow { display: flex; align-items: flex-start; justify-content: center; gap: 1.6cqw; margin-top: 8cqw; position: relative; }

.a4p-scard { width: 15.5cqw; background: #fff; border: 1.5px solid rgba(11,15,30,0.12); border-radius: 1.6cqw; padding: 2cqw 1.2cqw 1.6cqw; text-align: center; box-shadow: 0 0.8cqw 1.6cqw rgba(11,15,30,0.08); position: relative; flex-shrink: 0; }
.a4p-snum {
  position: absolute; top: -1.4cqw; left: -1.2cqw; width: 3.2cqw; height: 3.2cqw; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.7cqw;
  box-shadow: 0 0.3cqw 0.5cqw rgba(11,15,30,0.25);
}
.a4p-sicon { width: 6.6cqw; height: 6.6cqw; margin: 0.6cqw auto 1cqw; color: var(--a4-navy); }
.a4p-sicon svg { width: 100%; height: 100%; }
.a4p-spill {
  display: inline-block; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.5cqw;
  padding: 0.55cqw 1.3cqw; border-radius: 999px; letter-spacing: 0.01em;
}
.a4p-scap { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.5cqw; color: var(--a4-navy); margin-top: 0.8cqw; line-height: 1.3; }

/* QR frame — corner-bracket "viewfinder" style. The blank center is filled
   by the real per-merchant QR canvas; padding here is what keeps equal
   spacing on all four sides around it. */
.a4p-qrwrap { width: 24cqw; flex-shrink: 0; text-align: center; }
.a4p-qrframe {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 1.6cqw; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  padding: 6%;
}
.a4p-corner { position: absolute; width: 2.4cqw; height: 2.4cqw; border-style: solid; border-width: 0; }
.a4p-corner.tl { top: 0.6cqw; left: 0.6cqw; border-top-width: 0.45cqw; border-left-width: 0.45cqw; border-color: var(--a4-orange); border-top-left-radius: 0.6cqw; }
.a4p-corner.tr { top: 0.6cqw; right: 0.6cqw; border-top-width: 0.45cqw; border-right-width: 0.45cqw; border-color: var(--a4-pink); border-top-right-radius: 0.6cqw; }
.a4p-corner.bl { bottom: 0.6cqw; left: 0.6cqw; border-bottom-width: 0.45cqw; border-left-width: 0.45cqw; border-color: var(--a4-purple); border-bottom-left-radius: 0.6cqw; }
.a4p-corner.br { bottom: 0.6cqw; right: 0.6cqw; border-bottom-width: 0.45cqw; border-right-width: 0.45cqw; border-color: var(--a4-navy); border-bottom-right-radius: 0.6cqw; }
/* The dynamic QR itself: always fills the frame at 1:1, never stretched or
   cropped — width/height 100% on a square canvas inside a square frame. */
.a4-poster-qr { width: 100%; height: 100%; }
.a4-poster-qr canvas, .a4-poster-qr img { width: 100% !important; height: 100% !important; display: block; }

.a4p-qrtri { width: 2.6cqw; height: 2.2cqw; color: var(--a4-purple); margin: -0.1cqw auto 0; position: relative; z-index: 2; }
.a4p-scanme {
  display: inline-block; margin-top: -0.2cqw; background: var(--a4-grad); color: #fff;
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 2cqw; padding: 0.55cqw 2.4cqw; border-radius: 999px;
  box-shadow: 0 0.5cqw 1cqw rgba(11,15,30,0.2); position: relative; z-index: 2;
}

/* ---- row 2: "NO MORE HASSLE!" blob / step 2 card / benefits list ---- */
.a4p-row2 { display: flex; align-items: flex-start; justify-content: center; gap: 1.6cqw; margin-top: 8cqw; }

.a4p-hassle {
  width: 15.5cqw; aspect-ratio: 1 / 0.82; flex-shrink: 0; position: relative;
  background: radial-gradient(120% 120% at 30% 20%, var(--a4-purple), var(--a4-navy) 70%);
  border-radius: 46% 54% 51% 49% / 53% 47% 53% 47%; transform: rotate(-6deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0.8cqw 1.4cqw rgba(11,15,30,0.22);
}
.a4p-hl1 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.5cqw; color: #fff; letter-spacing: 0.06em; }
.a4p-hl2 { font-family: 'Poppins', sans-serif; font-weight: 900; font-style: italic; font-size: 2.8cqw; color: #FFD400; line-height: 1; }

.a4p-s2card { width: 24cqw; flex-shrink: 0; background: #fff; border: 1.5px solid rgba(11,15,30,0.12); border-radius: 1.6cqw; padding: 1.6cqw; text-align: center; box-shadow: 0 0.8cqw 1.6cqw rgba(11,15,30,0.08); position: relative; }
.a4p-s2card .a4p-snum { top: -1.4cqw; left: 1.4cqw; }
.a4p-s2icons { display: flex; align-items: center; justify-content: center; gap: 0.8cqw; margin-top: 0.6cqw; }
.a4p-s2icons svg { width: 3.6cqw; height: 3.6cqw; color: var(--a4-navy); }
.a4p-plus { font-size: 2cqw; font-weight: 800; color: var(--a4-navy); }

.a4p-benefits { width: 20cqw; flex-shrink: 0; display: flex; flex-direction: column; gap: 1cqw; margin-top: 0.4cqw; }
.a4p-bitem { display: flex; align-items: center; gap: 0.7cqw; }
.a4p-bic { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.a4p-bic svg { width: 1.5cqw; height: 1.5cqw; color: #fff; }
.a4p-bt { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.1cqw; line-height: 1.15; color: var(--a4-navy); white-space: nowrap; }
.a4p-bs { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1.02cqw; color: var(--text-muted, #626A7D); margin-top: 0.15cqw; white-space: nowrap; }

/* ---- "NO MORE ..." chip row + trust card ---- */
.a4p-nomore-zone { margin-top: 8cqw; }
.a4p-nomore-label { text-align: center; }
.a4p-nomore-label span { background: var(--a4-navy); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.3cqw; letter-spacing: 0.1em; padding: 0.4cqw 1.4cqw; border-radius: 999px; }
.a4p-nomore-row { display: flex; gap: 1cqw; margin-top: 1cqw; align-items: stretch; }
.a4p-nchip { flex: 1; border: 1.5px solid rgba(11,15,30,0.14); border-radius: 1.2cqw; padding: 1.2cqw 0.4cqw 1cqw; text-align: center; position: relative; }
.a4p-nchip svg { width: 2.6cqw; height: 2.6cqw; }
.a4p-xb { position: absolute; top: 0.5cqw; right: 0.5cqw; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #FF2E4A; display: flex; align-items: center; justify-content: center; }
.a4p-xb svg { width: 0.8cqw; height: 0.8cqw; color: #fff; }
.a4p-nlb { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.15cqw; color: var(--a4-navy); margin-top: 0.6cqw; line-height: 1.2; }

.a4p-trust { flex-shrink: 0; width: 15.5cqw; border: 2px dashed rgba(138,0,212,0.4); border-radius: 1.2cqw; padding: 1cqw 1.2cqw; text-align: center; }
.a4p-shield { width: 2.6cqw; height: 2.6cqw; color: var(--a4-purple); }
.a4p-tt { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.15cqw; color: var(--a4-navy); margin-top: 0.4cqw; }
.a4p-tn { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 2.2cqw; color: var(--a4-purple); }
.a4p-stars { display: flex; justify-content: center; gap: 0.15cqw; margin-top: 0.3cqw; }
.a4p-stars svg { width: 1.2cqw; height: 1.2cqw; color: var(--a4-orange); }

/* ---- footer: JOIN PRINTNIQ TODAY bar + feature strip ---- */
.a4p-footer { margin-top: auto; width: calc(100% + 7.2cqw); margin-left: -3.6cqw; }
.a4p-ftop { background: var(--a4-navy); display: flex; align-items: center; justify-content: space-between; padding: 1.6cqw 3.6cqw; gap: 1.2cqw; }
.a4p-join { display: inline-block; background: linear-gradient(120deg, var(--a4-pink), var(--a4-purple)); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.7cqw; padding: 0.5cqw 1.6cqw; border-radius: 999px; }
.a4p-joinsub { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.15cqw; color: rgba(255,255,255,0.75); margin-top: 0.5cqw; }
.a4p-fic { display: flex; align-items: center; gap: 0.8cqw; }
.a4p-fic svg { width: 2.2cqw; height: 2.2cqw; color: #fff; flex-shrink: 0; }
.a4p-fl1 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1cqw; color: #FFD400; letter-spacing: 0.08em; }
.a4p-fl2 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.7cqw; color: #fff; margin-top: 0.2cqw; }

.a4p-fbot { background: #161d38; padding: 1.1cqw 3.6cqw; display: flex; justify-content: space-between; }
.a4p-fbitem { display: flex; align-items: center; gap: 0.6cqw; }
.a4p-fbitem svg { width: 1.6cqw; height: 1.6cqw; color: var(--a4-pink); flex-shrink: 0; }
.a4p-f1 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.1cqw; color: #fff; }
.a4p-f2 { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.95cqw; color: rgba(255,255,255,0.55); }

/* Corner crop marks — a small cue for trimming the printed A4 sheet cleanly
   if a merchant mounts it in a frame or cuts it down. Screen-only guide;
   the print stylesheet below repositions them to the true page corners. */
.a4-crop-mark { position: absolute; width: 18px; height: 18px; opacity: 0.35; pointer-events: none; z-index: 5; }
.a4-crop-mark::before, .a4-crop-mark::after { content: ''; position: absolute; background: #111827; }
.a4-crop-mark::before { width: 100%; height: 1.5px; top: 50%; }
.a4-crop-mark::after { width: 1.5px; height: 100%; left: 50%; }
.a4-crop-mark.tl { top: 10px; left: 10px; }
.a4-crop-mark.tr { top: 10px; right: 10px; }
.a4-crop-mark.bl { bottom: 10px; left: 10px; }
.a4-crop-mark.br { bottom: 10px; right: 10px; }

@media print {
  body * { visibility: hidden; }
  .a4-poster, .a4-poster * { visibility: visible; }
  .a4-poster {
    position: fixed; inset: 0; margin: 0; max-width: none; width: 210mm; height: 297mm;
    aspect-ratio: auto; box-shadow: none; border: 2px solid var(--a4-navy, #0B0F1E); border-radius: 0; page-break-after: avoid;
  }
  .a4-crop-mark { opacity: 0.55; }
  .a4-crop-mark.tl { top: 6mm; left: 6mm; }
  .a4-crop-mark.tr { top: 6mm; right: 6mm; }
  .a4-crop-mark.bl { bottom: 6mm; left: 6mm; }
  .a4-crop-mark.br { bottom: 6mm; right: 6mm; }
  @page { size: A4; margin: 0; }
}


/* ---------------- Mobile order flow (shop.php) ---------------- */
.upload-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 32px 20px;
  border: 2px dashed var(--surface-glass-border);
  border-radius: var(--radius-md);
  background: var(--surface-glass);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.upload-dropzone.dragover { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 8%, var(--surface-glass)); }
.upload-dropzone svg { color: var(--text-faint); }
.upload-dropzone .primary-text { font-weight: 600; font-size: 0.92rem; }
.upload-dropzone .secondary-text { font-size: 0.78rem; color: var(--text-faint); }
.upload-file-chip {
  display: none;
  align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
}
.upload-file-chip.visible { display: flex; }
.upload-file-chip .name { font-weight: 600; font-size: 0.86rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-file-chip .size { font-size: 0.76rem; color: var(--text-faint); }
.upload-file-chip .remove { color: #DC2626; font-size: 0.8rem; font-weight: 600; }

.price-breakdown-row { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-muted); padding: 4px 0; }
.price-breakdown-row.total { font-weight: 700; color: var(--text-primary); border-top: 1px solid var(--surface-glass-border); margin-top: 6px; padding-top: 10px; font-size: 0.95rem; }

@media (max-width: 640px) {
  /* Inputs at 16px+ stop iOS Safari auto-zooming on focus */
  .field input, .field select, .field textarea { font-size: 16px; }

  /* Sticky price + submit bar so the CTA is always reachable on a phone */
  .mobile-sticky-bar {
    position: sticky;
    bottom: 0;
    left: 0; right: 0;
    background: var(--bg);
    border-top: 1px solid var(--surface-glass-border);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    margin: 0 -18px -18px;
    z-index: 50;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
  }
}
@media (min-width: 641px) {
  .mobile-sticky-bar { position: static; box-shadow: none; border-top: none; padding: 0; margin: 0; }
}

/* ---------------- Shop page: step tracker ---------------- */
.step-tracker { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; }
.step-tracker .step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 64px; }
.step-tracker .step-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-glass); border: 1px solid var(--surface-glass-border);
  color: var(--text-faint);
}
.step-tracker .step.active .step-icon { background: var(--accent-gradient); color: #fff; border-color: transparent; }
.step-tracker .step-label { font-size: 0.72rem; font-weight: 600; color: var(--text-faint); text-align: center; }
.step-tracker .step.active .step-label { color: var(--text-primary); }
.step-tracker .step-connector { flex: 0 0 24px; height: 2px; background: var(--surface-glass-border); margin-bottom: 22px; }

/* ---------------- Shop page: status + feature badges ---------------- */
.shop-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 700;
}
.shop-status-pill.open { background: color-mix(in srgb, #16A34A 15%, transparent); color: #16A34A; }
.shop-status-pill.closed { background: color-mix(in srgb, #DC2626 15%, transparent); color: #DC2626; }
.shop-status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.feature-badge-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 20px; }
.feature-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface-glass); border: 1px solid var(--surface-glass-border);
  font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
}
.feature-badge svg { color: var(--accent-2); }

/* ---------------- Shop page: multi-file list ---------------- */
.file-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.file-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--surface-glass); border: 1px solid var(--surface-glass-border);
}
.file-list-item .name { font-weight: 600; font-size: 0.85rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list-item .size { font-size: 0.74rem; color: var(--text-faint); }
.file-list-item input[type=number] { width: 70px; padding: 6px 8px; font-size: 0.85rem; border-radius: 6px; border: 1px solid var(--surface-glass-border); }
.file-list-item .remove-file { color: #DC2626; cursor: pointer; font-size: 0.78rem; font-weight: 600; }

.pay-choice { display: flex; gap: 10px; margin-top: 8px; }
.pay-choice label {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  padding: 14px; border-radius: var(--radius-sm);
  background: var(--surface-glass); border: 2px solid var(--surface-glass-border);
  cursor: pointer; transition: border-color 0.15s ease;
}
.pay-choice input { display: none; }
.pay-choice input:checked + span { color: var(--accent-1); }
.pay-choice label:has(input:checked) { border-color: var(--accent-2); }
.pay-choice .pay-title { font-weight: 700; font-size: 0.88rem; }
.pay-choice .pay-sub { font-size: 0.74rem; color: var(--text-muted); }