/* ════════════════════════════════════════════════════════════
   HAKS CRM — "Aurora" theme · Vibrant SaaS · gradient + glass
   Loaded AFTER style.css, so these rules win the cascade.
   A ground-up restyle of the shell, sidebar, cards and previews.
   ════════════════════════════════════════════════════════════ */
:root{
  --ink:#1c1633;
  --ink-soft:#4a4163;
  --muted:#8a83a6;
  --line:rgba(124,92,255,.14);
  --line-2:rgba(124,92,255,.09);

  --brand:#7c3aed;
  --brand-ink:#6d28d9;
  --brand-soft:#f1ecff;

  --grad-primary:linear-gradient(135deg,#7c3aed 0%,#c026d3 55%,#ec4899 100%);
  --grad-blue:linear-gradient(135deg,#4f46e5,#22d3ee);
  --grad-green:linear-gradient(135deg,#059669,#34d399);
  --grad-amber:linear-gradient(135deg,#f59e0b,#fb7185);

  --glass:rgba(255,255,255,.66);
  --glass-strong:rgba(255,255,255,.82);
  --glass-line:rgba(255,255,255,.7);

  --radius:18px;
  --radius-sm:12px;
  --shadow-xs:0 1px 2px rgba(76,29,149,.06);
  --shadow:0 8px 30px rgba(76,29,149,.08);
  --shadow-lg:0 24px 60px rgba(76,29,149,.16);
  --shadow-glow:0 14px 34px rgba(124,58,237,.35);
  --sidebar-w:276px;
}

/* Aurora mesh background */
body{
  font-family:'Plus Jakarta Sans',system-ui,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(60% 55% at 6% -4%,  #ece8ff 0%, transparent 60%),
    radial-gradient(50% 50% at 102% 0%, #ffe4f3 0%, transparent 55%),
    radial-gradient(55% 60% at 100% 104%,#dcecff 0%, transparent 55%),
    radial-gradient(50% 50% at -6% 108%,#e3fff4 0%, transparent 55%),
    #f6f5fd;
  background-attachment:fixed;
}
h1,h2,h3,h4{color:var(--ink)}
.muted{color:var(--muted)}
.view-head h2{font-family:'Fraunces',serif}

/* ───────── Sidebar — floating glass panel ───────── */
.sidebar{
  position:fixed;top:16px;left:16px;bottom:16px;width:var(--sidebar-w);
  height:auto;border:1px solid var(--glass-line);
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.64));
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border-radius:22px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;padding:18px 14px;z-index:60;overflow:visible;
}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:4px 8px 14px}
.logo-mark{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:var(--grad-primary);color:#fff;font-family:'Fraunces',serif;font-weight:800;font-size:21px;
  box-shadow:var(--shadow-glow)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text span{font-family:'Fraunces',serif;font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.02em}
.brand-text small{font-size:9.5px;color:var(--muted);font-weight:700;letter-spacing:.16em;text-transform:uppercase}

.side-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 4px 14px;
  padding:12px;border-radius:14px;font-weight:800;font-size:13.5px;color:#fff;
  background:var(--grad-primary);box-shadow:var(--shadow-glow);
  transition:transform .15s,box-shadow .15s}
.side-cta .cta-plus{font-size:17px;line-height:0}
.side-cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(124,58,237,.45)}
.side-cta.is-here{opacity:.92}

.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;padding:0 2px;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-group{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:14px 12px 6px;opacity:.85}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  color:var(--ink-soft);font-weight:600;font-size:13.5px;position:relative;transition:.16s}
.nav-item .nav-ico{display:grid;place-items:center;width:24px;height:24px;color:var(--muted);transition:.16s;flex:none}
.nav-item:hover{background:rgba(124,92,255,.08);color:var(--ink)}
.nav-item:hover .nav-ico{color:var(--brand)}
.nav-item.active{
  background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(236,72,153,.12));
  color:var(--brand-ink);font-weight:800;box-shadow:inset 0 0 0 1px rgba(124,58,237,.16)}
.nav-item.active .nav-ico{color:var(--brand)}
.nav-item.active::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:4px;height:22px;border-radius:0 4px 4px 0;background:var(--grad-primary)}

.sidebar-foot{margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}
.user-chip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:rgba(124,92,255,.06)}
.user-avatar{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--grad-blue);color:#fff;font-weight:800;font-size:15px;box-shadow:0 6px 16px rgba(79,70,229,.3)}
.user-avatar.sm{width:34px;height:34px;border-radius:10px;font-size:13px}
.user-meta{flex:1;min-width:0}
.user-name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-out{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  color:var(--muted);background:rgba(255,255,255,.7);border:1px solid var(--line);transition:.15s}
.user-out:hover{color:#e11d48;background:#fff;border-color:#fecdd3}

/* ───────── Shell + topbar ───────── */
.shell{margin-left:calc(var(--sidebar-w) + 30px);min-height:100vh}
.topbar{
  position:sticky;top:0;z-index:40;height:64px;display:flex;align-items:center;gap:14px;
  padding:0 28px;background:linear-gradient(180deg,rgba(246,245,253,.85),rgba(246,245,253,.5));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.tb-burger{display:none;border:none;background:transparent;font-size:20px;color:var(--ink);cursor:pointer}
.crumb{display:flex;align-items:center;gap:9px;font-size:15px}
.crumb span{font-family:'Fraunces',serif;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.crumb i{color:var(--muted);font-style:normal}
.crumb b{color:var(--muted);font-weight:600;font-size:13px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.tb-date{font-size:13px;color:var(--muted);font-weight:600}
.tb-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--ink-soft);
  background:var(--glass);border:1px solid var(--line);transition:.15s;position:relative}
.tb-icon:hover{color:var(--brand);border-color:rgba(124,58,237,.3);transform:translateY(-1px)}
.tb-icon::after{content:"";position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;
  background:var(--grad-amber);box-shadow:0 0 0 2px rgba(246,245,253,.9)}
.main{padding:28px}

/* ───────── Panels = glass cards ───────── */
.panel{
  background:var(--glass-strong);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--glass-line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px}
.panel-head h3{font-family:'Fraunces',serif;font-size:20px}
.link{color:var(--brand);font-weight:700}

/* ───────── Buttons ───────── */
.btn-primary{background:var(--grad-primary);color:#fff;box-shadow:var(--shadow-glow);border:none}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 18px 40px rgba(124,58,237,.42)}
.btn-secondary{background:var(--brand-soft);color:var(--brand-ink);border:1px solid rgba(124,58,237,.16)}
.btn-secondary:hover{background:#e9e0ff}
.btn-ghost{background:var(--glass);color:var(--ink-soft);border:1px solid var(--line)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:rgba(124,58,237,.25)}
.btn-danger{background:#fff;color:#e11d48;border:1px solid #fecdd3}
.btn-danger:hover{background:#fff1f3}

/* ───────── Inputs ───────── */
.field input,.field textarea,.field select{
  background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:11px}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);background:#fff}
.field label{color:var(--ink-soft);font-weight:700}

/* ───────── Hero banner ───────── */
.hero-banner{
  border-radius:24px;padding:34px 38px;color:#fff;overflow:hidden;position:relative;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(236,72,153,.85) 0%, transparent 45%),
    radial-gradient(120% 130% at 0% 100%, rgba(34,211,238,.55) 0%, transparent 45%),
    linear-gradient(135deg,#6d28d9,#4f46e5);
  box-shadow:var(--shadow-lg)}
.hero-banner::after{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.hero-banner .hb-eye{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25)}
.hero-banner h1 em{color:#fbcfe8}
.hero-banner .hb-btn{background:#fff;color:#6d28d9}
.hero-banner .hb-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.22)}
.hero-banner .hb-btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28)}

/* ───────── KPI cards (glass) ───────── */
.kpi{background:var(--glass-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-line);box-shadow:var(--shadow);border-radius:20px;overflow:hidden}
.kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--grad-primary);opacity:.9}
.kpi:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.kpi-ico{border-radius:14px;box-shadow:var(--shadow-glow)}
.ic-blue{background:var(--grad-blue)}
.ic-violet{background:var(--grad-primary)}
.ic-green{background:var(--grad-green)}
.ic-amber{background:var(--grad-amber)}
.ic-rose{background:var(--grad-primary)}
.ic-slate{background:var(--grad-primary)}
.kpi-trend.up{color:#0a8f5b;background:#dffaef}
.kpi-trend.flat{color:var(--brand-ink);background:var(--brand-soft)}
.kpi-feature{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(244,236,255,.85))}
.kpi-feature .kpi-value{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi-bar span{background:var(--grad-green)}

/* ───────── Charts / breakdown ───────── */
.bar-fill{background:var(--grad-primary);box-shadow:0 6px 14px rgba(124,58,237,.28)}
.chip-soft.pos{color:#0a8f5b;background:#dffaef}
.brk-ico{background:var(--brand-soft);color:var(--brand)}
.brk-bar span{background:var(--grad-primary)}

/* ───────── Wizard stepper (flat bar — keep in sync with style.css) ───────── */
.wiz-step.active .wiz-dot{background:var(--brand);border:none;color:#fff;box-shadow:none}
.wiz-step.done .wiz-dot{background:var(--brand);border:none;color:#fff;box-shadow:none}
.wiz-step.done:not(:last-child)::after{background:none;color:#b6c0d4}
.wstep-head h4{font-family:'Fraunces',serif}
.gate-box{background:rgba(124,92,255,.06);border:1px solid var(--line)}
.field.invalid input,.field.invalid textarea,.field.invalid select{
  border-color:#f43f5e!important;box-shadow:0 0 0 3px #ffe4e6!important}

/* ───────── Pickers ───────── */
.style-swatch.active,.tpl-swatch.active{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.style-swatch:hover,.tpl-swatch:hover{border-color:rgba(124,58,237,.4)}
.fr-thumb input:checked + .fr-box{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}

/* ───────── Create preview — sleek device ───────── */
.create-preview{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(244,240,255,.6));
  border:1px solid var(--glass-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:22px;box-shadow:var(--shadow);top:84px}
.phone-frame{
  width:300px;max-width:100%;height:600px;margin:0 auto;position:relative;
  background:#0b0717;border-radius:42px;padding:13px;
  box-shadow:0 40px 80px rgba(76,29,149,.35),inset 0 0 0 2px rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08)}
.phone-frame::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:120px;height:7px;border-radius:6px;background:#000;z-index:3;opacity:.85}
.phone-frame iframe{width:100%;height:100%;border:none;border-radius:30px;background:#fff;display:block}
.preview-box{
  background:radial-gradient(150px 120px at 30% 18%,rgba(124,92,255,.16),transparent),
    linear-gradient(135deg,#faf8ff,#f0ecff);
  border:1px solid var(--glass-line);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}

/* ───────── List cards (QR / flipbook / form) ───────── */
.qr-card{background:var(--glass-strong);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-line);border-radius:18px;box-shadow:var(--shadow);transition:.18s}
.qr-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.code-row{background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:14px}
.code-row:hover{border-color:rgba(124,58,237,.3);background:#fff;transform:translateX(3px)}

/* ───────── Type grid (Create QR landing) ───────── */
.type-card{background:var(--glass-strong);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-line);border-radius:18px;box-shadow:var(--shadow)}
.type-card:hover{border-color:rgba(124,58,237,.35);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.type-ico{background:var(--grad-primary);color:#fff;box-shadow:var(--shadow-glow)}

/* ───────── Flash + misc ───────── */
.flash{background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(236,72,153,.1));
  border:1px solid rgba(124,58,237,.2);color:var(--brand-ink);border-radius:14px;padding:13px 18px;font-weight:600}
.badge{background:var(--brand-soft);color:var(--brand-ink);border:1px solid rgba(124,58,237,.14)}

/* ───────── Share modal accent ───────── */
.share-card{border-radius:22px;box-shadow:var(--shadow-lg)}
.share-opt:hover{border-color:var(--brand)}

/* ───────── Mobile ───────── */
@media(max-width:1024px){
  .sidebar{transform:translateX(-110%);transition:transform .25s ease;top:0;left:0;bottom:0;border-radius:0 22px 22px 0}
  .sidebar.open{transform:none}
  .shell{margin-left:0}
  .tb-burger{display:block}
}
@media(max-width:560px){
  .main{padding:16px}
  .crumb b{display:none}
}

/* ════════════════════════════════════════════════════════════
   Create QR — ground-up landing (hero + type picker)
   ════════════════════════════════════════════════════════════ */
.create-hero{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-radius:24px;padding:30px 34px;margin-bottom:22px;
  background:linear-gradient(120deg,rgba(255,255,255,.9),rgba(244,236,255,.8));
  border:1px solid var(--glass-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow)}
.create-hero::before{content:"";position:absolute;right:-80px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.16),transparent 70%);pointer-events:none}
.ch-eye{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brand-ink);background:var(--brand-soft);padding:6px 13px;border-radius:999px}
.ch-eye .dot{width:6px;height:6px;border-radius:50%;background:var(--grad-primary);box-shadow:0 0 0 3px rgba(124,58,237,.18)}
.ch-text h1{font-family:'Fraunces',serif;font-weight:800;font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;
  line-height:1.05;margin-top:14px;color:var(--ink)}
.ch-text h1 em{font-style:italic;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.ch-text p{margin-top:10px;color:var(--muted);font-size:14.5px;max-width:54ch}
.ch-glyph{flex:none;color:var(--brand);opacity:.16;transform:rotate(-8deg)}
@media(max-width:720px){.ch-glyph{display:none}}

/* Featured card — Business card */
.qtype-feature{
  display:flex;align-items:center;gap:22px;padding:24px 26px;margin-bottom:24px;position:relative;overflow:hidden;
  background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:20px;box-shadow:var(--shadow);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .18s,box-shadow .18s,border-color .18s}
.qtype-feature::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--grad-primary)}
.qtype-feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.3)}
.qf-ico{flex:none;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;color:#fff;
  background:var(--grad-primary);box-shadow:var(--shadow-glow)}
.qf-main{flex:1;min-width:0}
.qf-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qf-top h3{font-family:'Fraunces',serif;font-size:21px;font-weight:800;color:var(--ink)}
.qf-pill{font-size:11px;font-weight:800;color:#9a6a00;background:linear-gradient(135deg,#fef3c7,#fde68a);
  padding:4px 11px;border-radius:999px;border:1px solid #fcd34d}
.qf-main p{color:var(--muted);font-size:14px;margin-top:6px;max-width:60ch}
.qf-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.qf-tags span{font-size:11.5px;font-weight:700;color:var(--ink-soft);background:rgba(124,92,255,.08);
  border:1px solid var(--line);padding:4px 10px;border-radius:8px}
.qf-go{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:800;
  color:#fff;background:var(--grad-primary);box-shadow:var(--shadow-glow);transition:transform .18s}
.qtype-feature:hover .qf-go{transform:translateX(4px)}
@media(max-width:640px){.qtype-feature{flex-wrap:wrap}.qf-go{display:none}}

.qtype-head{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  margin:0 2px 12px}
.qtype-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.qtype-card{
  position:relative;display:flex;flex-direction:column;padding:20px;border-radius:18px;
  background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:var(--shadow);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .18s,box-shadow .18s,border-color .18s}
.qtype-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.28)}
.qtype-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;
  box-shadow:0 8px 18px rgba(20,30,50,.16);margin-bottom:14px}
.qg-website{background:linear-gradient(135deg,#3b82f6,#22d3ee)}
.qg-text{background:linear-gradient(135deg,#64748b,#334155)}
.qg-wifi{background:linear-gradient(135deg,#0d9488,#34d399)}
.qg-pdf{background:linear-gradient(135deg,#f43f5e,#fb923c)}
.qg-appstore{background:linear-gradient(135deg,#7c3aed,#4f46e5)}
.qtype-name{font-weight:800;font-size:16px;color:var(--ink)}
.qtype-desc{color:var(--muted);font-size:13px;margin-top:5px;flex:1}
.qtype-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.qtype-tag{font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px}
.qtype-tag.is-dyn{color:#0a8f5b;background:#dffaef}
.qtype-tag.is-stat{color:var(--ink-soft);background:#eef1f6}
.qtype-arrow{color:var(--brand);font-weight:800;font-size:16px;opacity:.5;transition:.18s}
.qtype-card:hover .qtype-arrow{opacity:1;transform:translateX(4px)}

.view-head .vh-accent{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ───────── Preview: Site / QR tabs ───────── */
.pv-tabs{display:flex;gap:5px;padding:5px;margin-bottom:16px;border-radius:13px;
  background:rgba(124,92,255,.08);border:1px solid var(--line)}
.pv-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 10px;
  border:none;border-radius:9px;background:transparent;color:var(--ink-soft);font-weight:700;font-size:13px;
  font-family:inherit;cursor:pointer;transition:.15s}
.pv-tab:hover{color:var(--ink)}
.pv-tab.active{background:#fff;color:var(--brand-ink);box-shadow:var(--shadow-xs)}
.pv-tab.active svg{color:var(--brand)}
.pv-pane{display:none;animation:wstepIn .3s ease}
.pv-pane.active{display:block}

.qr-stage{display:grid;place-items:center;padding:30px;border-radius:20px;
  background:radial-gradient(170px 140px at 50% 22%,rgba(124,92,255,.18),transparent),
    linear-gradient(135deg,#faf8ff,#efeaff);
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.qr-stage .qr-render{display:inline-block;line-height:0;background:#fff;padding:16px;border-radius:18px;
  box-shadow:0 14px 34px rgba(76,29,149,.18)}
.qr-stage .qrf .qr-render{background:transparent;padding:0;border-radius:0;box-shadow:none}
.qr-stage .qr-render canvas{display:block;border-radius:6px;max-width:100%;height:auto}
.qr-center-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}

/* ───────── Voucher / scratch card builder ───────── */
.vd-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.vd-thumb{position:relative;cursor:pointer;display:block}
.vd-thumb input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.vd-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:16px 8px;border-radius:14px;border:2px solid var(--line);min-height:104px;transition:.15s}
.vd-thumb input:checked + .vd-box{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.vd-mini{display:flex;width:78px;height:42px;border-radius:7px;overflow:hidden;background:#fff;
  box-shadow:0 6px 14px rgba(20,30,50,.2)}
.vd-mini-side{width:32%}
.vd-mini-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 7px;
  border-left:1.5px dashed rgba(20,28,46,.2)}
.vd-mini-bar{width:62%;height:5px;border-radius:2px}
.vd-mini-l{width:80%;height:3px;border-radius:2px;background:#d9deea}
.vd-mini-l.sm{width:48%}
.vd-name{font-size:11.5px;font-weight:800;color:var(--ink-soft)}
@media(max-width:560px){.vd-picker{grid-template-columns:1fr 1fr}}

.seg{display:flex;gap:6px;background:rgba(124,92,255,.07);border:1px solid var(--line);border-radius:12px;padding:5px}
.seg-opt{flex:1;position:relative;cursor:pointer}
.seg-opt input{position:absolute;opacity:0;inset:0;margin:0}
.seg-opt span{display:block;text-align:center;padding:11px 8px;border-radius:9px;font-weight:700;font-size:12.5px;
  color:var(--ink-soft);transition:.15s}
.seg-opt input:checked + span{background:#fff;color:var(--brand-ink);box-shadow:var(--shadow-xs)}
@media(max-width:560px){.seg{flex-direction:column}}

.prizes-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}
#prizeList.single .prize-grip{display:none}
.prize-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;
  margin-bottom:8px;background:rgba(255,255,255,.65)}
.prize-grip{color:#c3ccda;user-select:none;cursor:default}
.prize-label{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-family:inherit;
  font-size:14px;background:#fff}
.prize-label:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.prize-weight-wrap{display:flex;align-items:center;gap:5px}
.prize-weight{width:62px;padding:11px 6px;border:1px solid var(--line);border-radius:9px;font-family:inherit;
  font-size:13px;text-align:center;background:#fff}
.pw-unit{font-size:11px;color:var(--muted);font-weight:700}
.prize-win{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;cursor:pointer}
.prize-win input{accent-color:var(--brand);width:16px;height:16px}
.prize-del{border:none;background:#fde2e6;color:#e11d48;width:34px;height:38px;border-radius:9px;cursor:pointer;font-size:13px;flex:none}
.prize-del:hover{background:#fbd0d7}

.vch-top{position:relative;min-height:124px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(180deg,#f3f5fa,#e8edf5)}
.vch-mini{display:flex;width:154px;height:66px;border-radius:11px;overflow:hidden;background:#fff;
  box-shadow:0 12px 26px rgba(20,30,50,.2)}
.vch-mini-side{width:32%}
.vch-mini-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 12px;
  border-left:2px dashed rgba(20,28,46,.2)}
.vch-mini-bar{width:55%;height:8px;border-radius:3px}
.vch-mini-l{width:80%;height:4px;border-radius:2px;background:#dce1ec}
.vch-mini-l.sm{width:50%}

.how-list{margin:0;padding-left:20px;color:var(--ink-soft);font-size:14px;line-height:1.9}
.how-list b{color:var(--ink)}
.how-list li{margin:6px 0}

/* ════════════════════════════════════════════════════════════
   HEAVY MOBILE OPTIMIZATION  ·  ~70% of traffic is mobile
   ════════════════════════════════════════════════════════════ */

/* ---- Sidebar as an overlay drawer (≤1024) ---- */
@media(max-width:1024px){
  .sidebar{
    width:min(86vw,320px);top:0;left:0;bottom:0;border-radius:0 22px 22px 0;
    transform:translateX(-106%);transition:transform .26s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 30px 90px rgba(28,12,70,.4);z-index:70}
  .sidebar.open{transform:none}
  .shell{margin-left:0}
  .tb-burger{display:grid !important;place-items:center;width:42px;height:42px;border-radius:12px;
    background:var(--glass);border:1px solid var(--line);color:var(--ink);font-size:18px}
  .tb-burger:active{background:#fff}
  /* dim backdrop injected by footer.js */
  #navBackdrop{position:fixed;inset:0;z-index:65;background:rgba(20,10,45,.5);backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .26s,visibility .26s}
  #navBackdrop.show{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}
}

/* ---- Phones (≤768) ---- */
@media(max-width:768px){
  body{font-size:13.5px}
  .main{padding:16px 14px 44px}
  .topbar{height:58px;padding:0 14px;gap:10px}
  .crumb i,.crumb b{display:none}
  .crumb span{font-size:15px}
  .tb-date{display:none}
  .tb-right{gap:10px}

  /* two-up rows stack */
  .grid2{grid-template-columns:1fr;gap:0}

  /* dashboard */
  .hero-banner{padding:22px 20px;border-radius:20px}
  .hero-banner h1{font-size:23px}
  .hero-banner p{font-size:13.5px}
  .hero-banner .hb-actions{gap:8px}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
  .kpi{padding:16px;border-radius:16px}
  .kpi-value{font-size:27px}
  .kpi-spark{height:30px}
  .dash-grid{gap:14px;margin-bottom:16px}
  .panel{padding:18px;border-radius:16px}
  .bar-chart{height:148px;gap:4px}
  .bar-x{font-size:9px}

  /* view header */
  .view-head{margin-bottom:18px;gap:10px}
  .view-head h2{font-size:23px}

  /* create landing */
  .create-hero{padding:22px 20px;border-radius:18px}
  .qtype-grid{grid-template-columns:1fr;gap:12px}
  .qtype-feature{padding:18px;gap:16px}
  .qf-ico{width:54px;height:54px;border-radius:15px}

  /* create wizard */
  .create-layout{gap:16px}
  .wiz-head{flex-wrap:wrap;gap:8px;row-gap:6px}
  .wiz-head-right{margin-left:auto}
  .wstep-head h4{font-size:17px}
  .tpl-picker-lg{grid-template-columns:1fr 1fr !important;gap:10px}
  .style-picker{grid-template-columns:repeat(3,1fr)}
  .frame-gallery{grid-template-columns:repeat(4,1fr)}

  /* preview: scale the device + qr stage */
  .create-preview{padding:16px;border-radius:18px}
  .phone-frame{width:min(82vw,250px);height:auto;aspect-ratio:1/2;padding:11px;border-radius:36px}
  .phone-frame::before{width:96px;top:16px}
  .qr-stage{padding:20px}
  .pv-tab{font-size:12.5px;padding:9px 6px}

  /* sticky bottom wizard nav for thumb reach */
  .wiz-nav{position:sticky;bottom:0;margin:18px -18px -18px;padding:12px 18px;
    background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.92));
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--line);border-radius:0 0 16px 16px;z-index:6}
  .wiz-nav .btn{flex:1;min-width:0;min-height:48px;font-size:14px}

  /* touch targets */
  .btn{min-height:44px}
  .btn-sm{min-height:36px;padding:8px 13px}
  .nav-item{padding:12px;font-size:14.5px}
  .field input,.field textarea,.field select{font-size:16px;padding:12px 13px} /* 16px stops iOS zoom */
  .qr-card-actions .btn{min-height:40px}

  /* forms / data */
  .table-wrap{border-radius:12px}
  .data-table th,.data-table td{padding:10px 12px}

  /* share modal full-width-ish */
  .share-grid{grid-template-columns:repeat(3,1fr)}
}

/* ---- Small phones (≤480) ---- */
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr}
  .style-picker{grid-template-columns:repeat(2,1fr)}
  .frame-gallery{grid-template-columns:repeat(3,1fr)}
  .hero-banner .hb-actions{flex-direction:column}
  .hero-banner .hb-btn{width:100%;text-align:center;justify-content:center}
  .view-head{flex-direction:column;align-items:flex-start}
  .view-head .btn{width:100%;justify-content:center}
  .qf-top h3{font-size:18px}
  .qf-tags{display:none}
  .wiz-count{display:none}
  .share-grid{grid-template-columns:repeat(2,1fr)}
}

/* ───────── Fix: keep the wizard inside the screen ─────────
   Grid items default to min-width:auto, so the 8-step stepper's
   intrinsic width was forcing the form column wider than the
   viewport (page-level horizontal scrollbar). Allow it to shrink
   and let the stepper scroll inside itself instead. */
.create-layout{min-width:0}
.create-form,.create-preview{min-width:0}
.create-form .wiz-steps{max-width:100%}
/* Slightly tighter stepper so more steps fit before it scrolls */
.wiz-steps{gap:2px}
.wiz-step{padding:9px 8px}
.wiz-step:not(:last-child)::after{width:auto;margin-left:6px}
.wiz-label{font-size:12px}
/* When the stepper can't fit every label, JS adds .compact and we
   show only the active step's label (others become numbered dots). */
.wiz-steps.compact .wiz-step:not(.active) .wiz-label{display:none}
.wiz-steps.compact .wiz-step{padding:9px 6px}

/* ════════════════════════════════════════════════════════════
   MONOCHROME  ·  Vercel-style black / white / gray  (loaded LAST)
   Flips the whole admin app to the clean login palette.
   ════════════════════════════════════════════════════════════ */
:root{
  --ink:#0f172a; --ink-soft:#3a3a3a; --muted:#6b6b76;
  --line:#ebebeb; --line-2:#f2f2f4;
  --brand:#2563eb; --brand-ink:#1d4ed8; --brand-soft:#eaf1ff;
  --grad-primary:linear-gradient(135deg,#3b82f6,#2563eb);
  --grad-blue:linear-gradient(135deg,#3b82f6,#2563eb);
  --grad-green:linear-gradient(135deg,#3b82f6,#2563eb);
  --grad-amber:linear-gradient(135deg,#3b82f6,#2563eb);
  --glass:#ffffff; --glass-strong:#ffffff; --glass-line:#ebebeb;
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 1px 2px rgba(0,0,0,.05),0 10px 26px -14px rgba(0,0,0,.14);
  --shadow-lg:0 14px 44px -16px rgba(0,0,0,.22);
  --shadow-glow:0 6px 16px rgba(0,0,0,.18);
}
body{background:#fafafa}

/* ── sidebar ── */
.sidebar{background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 24px 50px -30px rgba(0,0,0,.25)}
.side-cta{background:#2563eb;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.side-cta:hover{background:#1d4ed8;box-shadow:0 8px 20px rgba(0,0,0,.22)}
.nav-item:hover{background:#f5f5f6;color:#2563eb}
.nav-item:hover .nav-ico{color:#2563eb}
.nav-item.active{background:#f4f4f5;color:#2563eb;box-shadow:inset 0 0 0 1px #e8e8ea}
.nav-item.active .nav-ico{color:#2563eb}
.nav-item.active::before{background:#2563eb}
.user-avatar{background:#2563eb;box-shadow:none}
.user-chip{background:#f7f7f8}

/* ── shell / topbar ── */
.topbar{background:rgba(250,250,250,.82);border-bottom:1px solid var(--line)}
.tb-icon{background:#fff;border:1px solid var(--line)}
.tb-icon:hover{color:#2563eb;border-color:#d4d4d4}
.tb-icon::after{background:#2563eb;box-shadow:0 0 0 2px rgba(250,250,250,.9)}

/* ── panels / cards (flat white, hairline, no glass blur) ── */
.panel,.kpi,.qr-card,.type-card,.qtype-card,.qtype-feature,.create-preview,.create-form{
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.kpi::before{display:none}
.kpi:hover,.qr-card:hover,.type-card:hover,.qtype-card:hover,.qtype-feature:hover{
  box-shadow:var(--shadow-lg);border-color:#d9d9dd}
.kpi-feature{background:#fff}
.kpi-feature .kpi-value{-webkit-text-fill-color:#2563eb;color:#2563eb}

/* ── hero → premium near-black ── */
.hero-banner{background:#2563eb;box-shadow:0 18px 44px -20px rgba(0,0,0,.5)}
.hero-banner::after{background:radial-gradient(circle,rgba(255,255,255,.07),transparent 70%)}
.hero-banner .hb-eye{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.hero-banner .hb-eye .dot{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.hero-banner h1 em{color:#cfcfd6}
.hero-banner .hb-btn{background:#fff;color:#2563eb}
.hero-banner .hb-btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2)}

/* ── buttons ── */
.btn-primary{background:#2563eb;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.btn-primary:hover{background:#1d4ed8;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.btn-secondary{background:#f4f4f5;color:#2563eb;border:1px solid #ebebeb}
.btn-secondary:hover{background:#e9e9ec}
.btn-ghost{background:#fff;color:#3a3a3a;border:1px solid #ebebeb}
.btn-ghost:hover{background:#fafafa;color:#2563eb;border-color:#d4d4d4}
.link{color:#2563eb}

/* ── inputs ── */
.field input,.field textarea,.field select{background:#fff;border:1px solid #ebebeb}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(0,0,0,.08)}

/* ── KPI icon tiles + bars (graphite) ── */
.ic-blue,.ic-violet,.ic-green,.ic-amber{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 10px rgba(0,0,0,.18)}
.kpi-bar span{background:#2563eb}
.bar-fill{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:none}
.brk-bar span{background:#2563eb}
.brk-ico{background:#f4f4f5;color:#2563eb}

/* ── create landing ── */
.create-hero{background:#fff;border:1px solid var(--line)}
.create-hero::before{background:radial-gradient(circle,rgba(0,0,0,.05),transparent 70%)}
.ch-text h1 em{-webkit-text-fill-color:#2563eb;color:#2563eb}
.ch-glyph{color:#2563eb;opacity:.08}
.qtype-feature::before{background:#2563eb}
.qf-ico,.type-ico{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.qf-pill{background:#2563eb;color:#fff;border:none}
.qg-website,.qg-text,.qg-wifi,.qg-pdf,.qg-appstore{background:linear-gradient(135deg,#3b82f6,#2563eb)}

/* ── preview stages → light gray ── */
.preview-box,.qr-stage{background:#f6f6f7;border:1px solid var(--line)}
.create-preview{background:#fff}

/* ── wizard (flat bar) ── */
.wiz-step.active .wiz-dot{background:#2563eb;border:none;color:#fff;box-shadow:none}
.wiz-step.done .wiz-dot{background:#2563eb;border:none;color:#fff;box-shadow:none}
.wiz-step.done:not(:last-child)::after{background:none;color:#c4c4cc}

/* ── flash / badges (neutral) ── */
.flash{background:#f4f4f5;border:1px solid #ebebeb;color:#2563eb}
.badge{background:#f4f4f5;color:#3a3a3a;border:1px solid #ebebeb}
.vh-accent{-webkit-text-fill-color:#2563eb;color:#2563eb}

/* ── brand logo (HAKS CART lockup image) ── */
.sidebar-brand{padding:6px 6px 16px}
.brand-logo{display:block;width:100%;max-width:198px;height:auto}