/* ═══════════════════════════════════════════════
   skanvia.io — Version v5.92
   Desktop layout refinements (1024px+ only):
   - QR preview pill top-aligned with type selector grid
   - Header white background extends across full shell width
   - Bottom nav: larger icons/labels, black inactive, blue active
   Back navigation rebuilt (all versions):
   - Stack-based back — airtight across all QR types and sub-steps
   - Each tap clears current step input and returns to previous step
   - vCard (6 sub-steps) and WiFi (2 sub-steps) fully covered
   - No step skipping in either direction
   - Mobile CSS completely untouched
═══════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
  height:100dvh;
  overflow:hidden;
}
body{
  overscroll-behavior:none;
  height:100dvh;
  overflow:hidden;
}

:root{
  --ink:    #1A1A1A;
  --navy:   #2C5AA0;
  --navy-d: #1E4080;
  --navy-l: #EEF3FB;
  --muted:  #9CA3AF;
  --slate:  #6B7280;
  --border: #E8EAED;
  --surface:#F9FAFB;
  --white:  #FFFFFF;
  --sh-sm:  0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --sh-md:  0 4px 12px rgba(0,0,0,.10),0 2px 4px rgba(0,0,0,.06);
  --sh-lg:  0 16px 48px rgba(0,0,0,.14);
  --t:.18s ease;
  --r8:8px;--r12:12px;--r16:16px;--r24:24px;--r32:32px;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  background:#E8EBF0;color:var(--ink);line-height:1.5;
  font-size:18px;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

/* ── SHELL ── */
.shell{
  max-width:430px;margin:0 auto;
  background:var(--white);
  height:100dvh;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  /* Source protection — disable casual text selection on UI surfaces */
  -webkit-user-select:none;
  user-select:none;
}
/* Restore selection for all interactive text entry */
.shell input,.shell textarea{
  -webkit-user-select:text;
  user-select:text;
}

/* ════════════════════════════════════════════
   HEADER
════════════════════════════════════════════ */
.header{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:14px 16px 12px;
  background:var(--white);
  border-bottom:1px solid rgba(0,0,0,.06);
  position:sticky;top:0;z-index:80;flex-shrink:0;
}
.logo-block{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex-shrink:0;}
.logo{font-size:32px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1;}
.logo span{color:#DC2626}
.dsb-logo span{color:#DC2626}
.logo-tagline{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.04em;line-height:1;text-transform:uppercase;margin-top:3px;}
.header-ai-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px 10px 12px;
  background:var(--navy);color:var(--white);
  border-radius:var(--r16);border:none;font-family:inherit;
  cursor:pointer;transition:var(--t);flex-shrink:0;align-self:center;
  box-shadow:0 4px 14px rgba(44,90,160,.35);
}
.header-ai-chip:hover{background:var(--navy-d)}
.ai-chip-text{display:flex;flex-direction:column;align-items:flex-start;gap:1px;white-space:nowrap;}
.ai-chip-text span{font-size:11px;font-weight:700;letter-spacing:.03em;line-height:1.3;}
.ai-pulse{width:7px;height:7px;border-radius:50%;background:#22C55E;animation:pulse 1.8s infinite;flex-shrink:0;box-shadow:0 0 6px rgba(34,197,94,.6);}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ════════════════════════════════════════════
   SCROLLABLE CONTENT + TAB PAGES
════════════════════════════════════════════ */
.content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.tab-spacer{height:90px;flex-shrink:0;}
.tab-page{display:none!important}
.tab-page.active{display:flex!important;flex-direction:column;flex:1;min-height:0;overflow:hidden;}
#dashPage.active,#libPage.active,#aiPage.active,#analyticsPage.active{display:flex!important;flex-direction:column;flex:1;min-height:0;overflow:hidden;}

/* ════════════════════════════════════════════
   DASHBOARD
════════════════════════════════════════════ */
.dash-pad{
  padding:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  touch-action:pan-y;flex:1;min-height:0;display:flex;flex-direction:column;
}

/* QR hero card */
.qr-hero-card{
  display:flex;flex-direction:row;align-items:center;gap:16px;
  padding:16px;background:var(--white);
  border:1px solid rgba(0,0,0,.08);border-radius:20px;
  box-shadow:0 2px 16px rgba(44,90,160,.08),0 1px 4px rgba(0,0,0,.04);
  margin-bottom:16px;
}
.qr-hero-preview{
  width:120px;height:120px;flex-shrink:0;background:var(--white);
  border-radius:14px;border:2.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;box-sizing:border-box;padding:5px;
}
#heroQr{width:106px;height:106px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#heroQr > div{width:106px!important;height:106px!important;overflow:hidden!important;border:none!important;box-shadow:none!important;}
#heroQr canvas{width:106px!important;height:106px!important;display:block!important;}
.qr-hero-info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;}
.qr-hero-eyebrow{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.qr-hero-name{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;margin-bottom:2px;}
.qr-hero-meta{font-size:13px;color:var(--slate);margin-bottom:10px;}
.qr-hero-scans{font-size:36px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1;}
.qr-hero-scans-lbl{font-size:12px;color:var(--muted);font-weight:500;margin-top:2px;}

/* Suppress tap highlight */
#createQr,#createQr *,[id^="lq"],[id^="lq"] *,
.qr-hero-preview,.qr-hero-preview *,.lib-qr,.lib-qr *,
.create-top-qr canvas,.create-top-qr div{
  outline:none!important;-webkit-tap-highlight-color:transparent!important;
}
[id^="lq"] > div{border:none!important;box-shadow:none!important;}
#createQr{width:200px;min-height:200px;height:auto;overflow:visible;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#createQr canvas{display:block!important;}

/* Stats */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.stat-card{padding:14px 12px;background:var(--white);border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 1px 8px rgba(0,0,0,.04);}
.stat-lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:5px;line-height:1.3;}
.stat-val{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1;}
.stat-sub{font-size:13px;color:var(--slate);margin-top:2px}
.section-lbl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}

/* AI insight strip */
.ai-strip{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--ink);border-radius:16px;margin-bottom:12px;position:relative;overflow:hidden;}
.ai-strip::before{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:50%;background:rgba(44,90,160,.2);}
.ai-strip-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;background:var(--navy);color:var(--white);border-radius:var(--r32);font-size:12px;font-weight:700;white-space:nowrap;flex-shrink:0;margin-top:1px;letter-spacing:.03em;}
.ai-strip-text{font-size:15px;color:rgba(255,255,255,.85);line-height:1.5;flex:1;}
.ai-strip-text strong{color:var(--white)}
.ai-strip-nav{display:flex;flex-direction:column;gap:3px;flex-shrink:0;margin-top:2px;}
.ai-nav-btn{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;color:rgba(255,255,255,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:var(--t);font-family:inherit;line-height:1;}
.ai-nav-btn:hover{border-color:rgba(255,255,255,.5);color:var(--white)}

/* Analytics */
.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.a-card{padding:12px 11px;background:var(--white);border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 1px 8px rgba(0,0,0,.04);}
.a-card.full{grid-column:1/-1}
.a-card-lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:9px;}
.trend-svg{width:100%;height:52px}
.trend-x{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:500;margin-top:4px;}
.donut-wrap{display:flex;align-items:center;gap:9px}
.donut-svg{width:52px;height:52px;flex-shrink:0}
.leg{display:flex;flex-direction:column;gap:4px;flex:1}
.leg-row{display:flex;align-items:center;gap:5px;font-size:13px}
.leg-dot{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.leg-name{flex:1;color:var(--ink);font-weight:500}
.leg-pct{color:var(--slate);font-weight:700;font-size:13px}
.loc{margin-bottom:7px}.loc:last-child{margin-bottom:0}
.loc-row{display:flex;justify-content:space-between;margin-bottom:3px}
.loc-name{font-size:14px;color:var(--ink);font-weight:500}
.loc-count{font-size:13px;color:var(--slate);font-weight:700}
.loc-bar{height:3px;background:var(--surface);border-radius:2px;overflow:hidden}
.loc-fill{height:100%;background:var(--navy);border-radius:2px}

/* ════════════════════════════════════════════
   LIBRARY TAB
════════════════════════════════════════════ */
.lib-pad{padding:16px 16px 24px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;flex:1;min-height:0;}
.lib-search{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:14px;}
.lib-search svg{width:16px;height:16px;color:var(--muted);flex-shrink:0}
.lib-search input{border:none;background:transparent;outline:none;font-family:inherit;font-size:15px;color:var(--ink);flex:1;}
.lib-search input::placeholder{color:var(--muted)}
.lib-section{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;margin-top:14px}
.lib-section:first-of-type{margin-top:0}
.lib-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity var(--t);}
.lib-item:last-child{border-bottom:none}
.lib-item:active{opacity:.6}
.lib-qr{width:48px;height:48px;border-radius:var(--r8);border:1px solid var(--border);overflow:hidden;flex-shrink:0;background:var(--white);display:flex;align-items:center;justify-content:center;}
.lib-qr canvas{display:block!important}
.lib-info{flex:1;min-width:0}
.lib-name{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lib-meta{font-size:14px;color:var(--muted)}
.lib-right{text-align:right;flex-shrink:0}
.lib-scans{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.lib-scans-lbl{font-size:12px;color:var(--muted)}
.status-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:2px 7px;border-radius:var(--r32);margin-top:3px;}
.badge-active{background:var(--navy-l);color:var(--navy);}
.badge-paused{background:var(--surface);color:var(--slate);}
.badge-dot{width:4px;height:4px;border-radius:50%;background:currentColor}

/* Hero screen (logged-out dash) */
.hero-screen{display:none;flex-direction:column;flex:1;min-height:0;padding:0;overflow:hidden;background:#ffffff;}
.hero-screen.visible{display:flex}
.hero-headline{padding:10px 20px 0;text-align:center;flex-shrink:0;}
.hero-h1{font-size:36px;font-weight:900;color:var(--ink);letter-spacing:-.04em;line-height:1.05;margin-bottom:4px;white-space:nowrap;}
.hero-h1 span{color:var(--navy)}
.hero-h1-black{color:var(--ink)!important}
.hero-qr-demo{margin:8px 16px 8px;background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:10px 16px 28px;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 20px rgba(0,0,0,.08);flex:1;min-height:0;justify-content:center;}
.hero-qr-wrap{width:180px;height:180px;flex-shrink:0;background:var(--white);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:8px;}
.hero-qr-caption{width:100%;text-align:center;}
.hero-qr-caption-name{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:1px;}
.hero-qr-caption-url{font-size:11px;color:var(--muted);height:14px;transition:opacity .3s ease;}
.dash-logged-in{display:none}
.dash-logged-in.visible{display:block}

/* ════════════════════════════════════════════
   CREATE TAB — v5.6
   - Steps reduced to 6 (FG+BG combined)
   - create-top hidden on mobile when kb-open
   - Desktop: create-top always hidden (phone mockup is preview)
════════════════════════════════════════════ */

#createPage.active{
  display:flex!important;flex-direction:column!important;
  overflow:hidden!important;width:100%!important;
  flex:1!important;min-height:0!important;
}
.create-preview-strip{display:none!important;}
.shell.create-active .header{display:none;}
body.create-active .shell .header{display:none;}

/* ── Sticky QR Preview (top ~25%) ── */
.create-top{
  flex-shrink:0;
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:14px 16px;
  display:flex;flex-direction:row;align-items:center;gap:16px;
  position:sticky;top:0;z-index:60;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.create-top-qr{width:200px;height:200px;min-height:200px;max-height:200px;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;flex-shrink:0;}
.create-top-qr canvas{display:block!important;}
.create-top-info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.create-top-lbl{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;}
.create-top-name{font-size:22px;font-weight:800;color:var(--ink);line-height:1.2;word-break:break-word;white-space:normal;width:100%;}
.create-top-type{font-size:16px;font-weight:600;color:var(--muted);margin-top:2px;}

/* Back/undo */
.create-back-btn{
  display:none;align-items:center;justify-content:center;
  position:absolute;bottom:12px;right:16px;
  width:38px;height:38px;border:none;border-radius:50%;
  background:#1A1A1A;cursor:pointer;flex-shrink:0;transition:var(--t);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.create-back-btn:active{opacity:.7;transform:scale(.93);}
.create-back-btn svg{width:18px;height:18px;fill:#FFFFFF;flex-shrink:0;}
.create-back-btn.visible{display:flex}

/* ── Progress bar — hidden ── */
.create-progress{display:none!important;}
.create-progress-fill{display:none!important;}

/* ── Scroll panel — keyboard overlays this, layout never shrinks ── */
.create-scroll{
  flex:1;min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  background:var(--white);
}
.create-pad{
  padding:0;
  min-height:100%;
}

/* ── SINGLE-FIELD FLOW ── */
.create-section{display:none !important;}
.create-section.active-sec{
  display:block !important;
  background:var(--white);
  padding:16px 16px 0;
  /* Bottom padding = enough space so the field clears the keyboard.
     Since interactive-widget=overlays-content the layout does NOT
     shrink — the KB overlays. Field sits near the top, KB slides
     over the empty space beneath it. */
  padding-bottom:50vh;
  animation:secFadeIn .18s ease-out both;
}

@keyframes secFadeIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* sec-lbl: 10px below action row — enforced by padding:10px top in active-sec */
.sec-lbl{
  font-size:11px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--navy);
  margin-bottom:10px;
  padding-left:9px;
  border-left:3px solid var(--navy);
  flex-shrink:0;
}

/* Form fields */
.field{margin-bottom:14px}
.field-lbl{display:block;font-size:14px;font-weight:700;letter-spacing:.03em;color:var(--slate);margin-bottom:8px;}
.field-inp{
  width:100%;padding:14px 16px;
  border:1.5px solid rgba(0,0,0,.1);border-radius:12px;
  font-family:inherit;font-size:17px;color:var(--ink);
  -webkit-text-fill-color:var(--ink);
  background:var(--white);outline:none;
  transition:all .15s ease;-webkit-appearance:none;min-height:50px;
}
.field-inp::placeholder{color:var(--muted);-webkit-text-fill-color:var(--muted);font-weight:400}
select.field-inp{cursor:pointer}

/* Step indicator (legacy compat — hidden) */
.step-indicator{display:none;}
.step-bar-fill{display:none;}
.step-rail,.step-rail-track,.step-rail-fill,.step-dot{display:none;}
.continue-wrap{display:none!important;}
.continue-btn{display:none!important;}
.sec-h{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:3px;}
.sec-sub{font-size:13px;color:var(--slate);margin-bottom:12px;line-height:1.5;}

/* Type grid — compact, no-scroll fit */
.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:0;}
.type-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:8px 4px 7px;
  border:1.5px solid rgba(0,0,0,.08);border-radius:12px;
  background:#FFFFFF;cursor:pointer;transition:all .15s ease;
  font-family:inherit;font-size:11px;font-weight:600;color:var(--ink);
  min-height:0;box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.type-btn:hover{border-color:var(--muted);background:var(--surface)}
.type-btn:active{transform:scale(.96);box-shadow:none}
.type-btn.sel{background:var(--ink);color:var(--white);border-color:var(--ink);box-shadow:0 4px 14px rgba(26,26,26,.22);}
.type-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;flex-shrink:0;}
.type-btn svg[fill="currentColor"]{fill:currentColor;stroke:none}
/* Sec1 (type grid) — no padding-bottom override, no scroll */
#sec1{overflow:hidden !important;padding-bottom:10px !important;}

/* Swatches */
.swatch-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:0}
.swatch{width:34px;height:34px;border-radius:9px;cursor:pointer;border:2px solid transparent;transition:transform .12s ease,box-shadow .12s ease;flex-shrink:0;position:relative;}
.swatch:hover{transform:scale(1.12);box-shadow:0 2px 10px rgba(0,0,0,.15)}
.swatch.sel{box-shadow:0 0 0 2.5px #FFFFFF,0 0 0 4.5px var(--navy)}
.swatch-custom{display:flex;align-items:center;justify-content:center;font-size:19px;border:1.5px dashed var(--border)!important;background:var(--surface)!important;color:var(--slate);}
.swatch-custom:hover{border-color:var(--navy)!important;color:var(--navy)}
.swatch-custom input[type="color"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}

/* ── Scan Confidence Indicator ── */
.sci-bar{
  display:flex;align-items:center;gap:12px;
  min-height:56px;
  padding:13px 16px;
  margin-top:14px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--border);
  transition:background .2s ease,border-color .2s ease;
  flex-shrink:0;
  overflow:hidden;
}
.sci-bar.sci-warn,
.sci-bar.sci-fail{
  background:#FEF2F2;
  border-color:rgba(220,38,38,.2);
}
/* Crosshair icon — SVG-rendered inline; colour via currentColor */
.sci-icon{
  width:18px;height:18px;flex-shrink:0;
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:color .2s ease;
}
.sci-bar.sci-warn .sci-icon,
.sci-bar.sci-fail .sci-icon{color:#DC2626;}
.sci-text{
  display:flex;align-items:center;gap:8px;
  flex:1;min-width:0;font-size:14px;
  overflow:hidden;
}
/* "SCAN CONFIDENCE" — compact uppercase label */
.sci-label{
  font-weight:700;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate);
  white-space:nowrap;
}
.sci-bar.sci-warn .sci-label,
.sci-bar.sci-fail .sci-label{color:#DC2626;}
/* Percentage — hero metric */
.sci-pct{
  font-weight:800;font-size:17px;
  color:var(--ink);
  white-space:nowrap;
  transition:color .2s ease;
  letter-spacing:-.01em;
}
.sci-bar.sci-warn .sci-pct,
.sci-bar.sci-fail .sci-pct{color:#DC2626;}
/* Status descriptor — matches SCAN CONFIDENCE label style exactly */
.sci-desc{
  font-weight:700;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex-shrink:1;
}
.sci-bar.sci-warn .sci-desc,
.sci-bar.sci-fail .sci-desc{color:#DC2626;}
/* Action buttons */
.sci-actions{display:flex;gap:6px;flex-shrink:0;}
.sci-fix{
  padding:6px 12px;background:var(--navy);color:var(--white);
  border:none;border-radius:8px;font-family:inherit;
  font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;
}
.sci-fix:active{opacity:.8;}
.sci-ignore{
  padding:6px 12px;background:none;color:var(--muted);
  border:1px solid var(--border);border-radius:8px;font-family:inherit;
  font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.sci-ignore:active{opacity:.6;}

/* ── sec4 divider — separates colour swatches from module shape ── */
.sec4-divider{
  margin:14px 0 10px;
}
.sec4-divider-lbl{
  font-size:11px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--navy);
  padding-left:9px;
  border-left:3px solid var(--navy);
  display:block;
}

/* ── Auth panel buttons & elements ── */
.auth-btn{width:100%;padding:15px;background:var(--navy);color:var(--white);border:none;border-radius:var(--r12);font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;margin-bottom:10px;transition:background var(--t);}
.auth-btn:hover{background:var(--navy-d);}
.auth-btn-ghost{width:100%;padding:12px;background:none;border:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;}
.auth-btn-ghost:hover{color:var(--ink);}
.auth-btn-outline{width:100%;padding:12px;border:1.5px solid var(--border);border-radius:var(--r12);background:var(--white);font-family:inherit;font-size:15px;font-weight:600;color:var(--slate);cursor:pointer;transition:border-color var(--t);}
.auth-btn-outline:hover{border-color:var(--muted);}
.auth-btn-upgrade{width:100%;padding:15px;background:var(--navy);color:var(--white);border:none;border-radius:var(--r12);font-family:inherit;font-size:18px;font-weight:700;cursor:pointer;margin-bottom:6px;transition:background var(--t);}
.auth-btn-upgrade:hover{background:var(--navy-d);}
.auth-link{background:none;border:none;font-family:inherit;font-size:13px;color:var(--navy);cursor:pointer;padding:0;font-weight:600;}
.auth-link:hover{text-decoration:underline;}
.auth-hint{text-align:center;font-size:13px;color:var(--muted);}
.auth-forgot-row{text-align:right;margin-bottom:14px;}
.auth-inp{margin-bottom:10px;display:block;width:100%;}
.auth-inp-last{margin-bottom:6px;display:block;width:100%;}
.auth-inp-spaced{margin-bottom:14px;display:block;width:100%;}
.auth-error{font-size:13px;color:#E988E9;margin-bottom:10px;display:none;}
.auth-profile-row{display:flex;align-items:center;gap:14px;padding:14px;background:var(--surface);border-radius:var(--r12);margin-bottom:16px;border:1px solid var(--border);}
.auth-profile-avatar{width:48px;height:48px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.auth-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.auth-stat-card{padding:12px;border:1px solid var(--border);border-radius:var(--r12);text-align:center;}
.auth-stat-val{font-size:26px;font-weight:700;color:var(--ink);}
.auth-stat-lbl{font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.auth-upgrade-hint{text-align:center;font-size:13px;color:var(--muted);margin-bottom:14px;}
.auth-forgot-hint{font-size:14px;color:var(--muted);margin-bottom:14px;}

/* Colour sub-label */
.colour-sublbl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:8px;margin-top:10px;}
.colour-sublbl:first-child{margin-top:0;}

/* Corner / frame */
.corner-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:260px}
.corner-row.three{grid-template-columns:repeat(3,1fr);max-width:100%}
/* Module shape row: pills fill available space; next button is pulled
   out of flex flow and pinned to the section's right edge so its
   centre aligns pixel-perfectly with the action-row back button above.
   sec4 must be position:relative (set on .create-section#sec4 below). */
.corner-row.corner-row-with-next{
  display:flex;
  gap:8px;
  align-items:center;
  width:100%;
  /* Reserve right space for the absolutely-positioned next button */
  padding-right:44px;
}
.corner-row.corner-row-with-next .corner-btn{
  flex:1;
  min-width:0;
}
.corner-row.corner-row-with-next .create-nav-btn.next{
  position:absolute;
  right:16px;
  width:36px;
  height:36px;
}
/* sec4 is the containing block for the absolutely-positioned next button */
.create-section#sec4{position:relative;}
.frame-toggle-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.frame-mode-btn{padding:12px 8px;border:1.5px solid rgba(0,0,0,.08);border-radius:12px;background:var(--white);font-family:inherit;font-size:15px;font-weight:600;color:var(--slate);cursor:pointer;transition:all .15s ease;letter-spacing:.02em;}
.frame-mode-btn:hover{border-color:var(--ink);color:var(--ink);background:var(--surface)}
.frame-mode-btn.sel{background:var(--ink);color:var(--white);border-color:var(--ink);box-shadow:0 3px 10px rgba(26,26,26,.2);}
.corner-btn{padding:12px 14px;border:1.5px solid rgba(0,0,0,.08);border-radius:12px;background:var(--white);font-family:inherit;font-size:15px;font-weight:600;color:var(--slate);cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;box-shadow:var(--sh-sm);}
.corner-btn:hover{border-color:var(--ink);color:var(--ink);background:var(--surface)}
.corner-btn.sel{border-color:var(--ink);background:var(--ink);color:var(--white);box-shadow:0 3px 10px rgba(26,26,26,.2);}

/* File drop */
.file-drop{border:1.5px dashed var(--border);border-radius:16px;padding:20px;text-align:center;cursor:pointer;transition:all var(--t);background:var(--surface);}
.file-drop:hover{border-color:var(--navy);background:var(--navy-l)}
.file-drop input[type="file"]{display:none}
.fd-icon{font-size:28px;margin-bottom:6px}
.fd-text{font-size:15px;color:var(--slate);line-height:1.5}
.iso-notice{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--slate);margin-top:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;}
.iso-notice svg{width:14px;height:14px;flex-shrink:0;stroke:var(--slate);fill:none;}

/* Action */
.action-row{display:flex;gap:8px;margin-top:8px}
.save-btn{flex:1;padding:15px;background:var(--navy);color:var(--white);border:none;border-radius:14px;font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;transition:all .15s ease;box-shadow:0 4px 18px rgba(44,90,160,.35);letter-spacing:.01em;}
.save-btn:active{transform:scale(.98);box-shadow:0 2px 8px rgba(44,90,160,.2)}
.save-btn:hover{background:var(--navy-d)}
.dl-btn{width:50px;height:50px;border:1.5px solid var(--border);border-radius:var(--r12);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--t);box-shadow:var(--sh-sm);color:var(--slate);}
.dl-btn:hover{background:var(--surface);border-color:var(--muted)}

/* ════════════════════════════════════════════
   BOTTOM TAB BAR — v5.6
   5 buttons: Home | Library | AI Create | Account | Analytics
════════════════════════════════════════════ */
.tab-bar{
  position:relative;width:100%;background:var(--white);
  border-top:1px solid rgba(0,0,0,.06);
  display:flex;z-index:70;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 20px rgba(0,0,0,.05);
  flex-shrink:0;
}
.tab-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;padding:10px 4px 12px;
  background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:10px;font-weight:700;color:var(--muted);
  transition:var(--t);letter-spacing:.04em;text-transform:uppercase;
}
.tab-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;}
.tab-btn svg[fill="currentColor"]{fill:currentColor;stroke:none;}
.tab-btn.active{color:var(--navy)}
.tab-btn.active svg{stroke:var(--navy)}

/* AI Create centre button — slightly larger icon */
.tab-btn.tab-create{flex:1.2;}
.tab-create-inner{display:flex;flex-direction:column;align-items:center;gap:3px;}
.tab-create-icon{
  width:30px;height:30px;border-radius:8px;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:var(--t);
}
.tab-create-icon svg{width:16px;height:16px;stroke:var(--white);fill:none;}
.tab-btn.active .tab-create-icon{background:var(--navy);}
.tab-create-lbl{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.03em;}
.tab-btn.active .tab-create-lbl{color:var(--navy);}

/* ── Hide nav + pill when native KB is open (input focused in create flow) ── */
#createPage:focus-within ~ .tab-bar,
#createPage:focus-within + .tab-bar{display:none!important;}

/* ── NEW QR CODE FAB — floats above nav bar on Home ── */
.new-qr-pill{
  position:fixed;
  bottom:88px;
  left:50%;
  transform:translateX(-50%);
  z-index:69;
  background:var(--navy);
  color:var(--white);
  border:none;
  border-radius:28px;
  padding:0 24px 0 18px;
  height:52px;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:
    0 4px 16px rgba(44,90,160,.38),
    0 1px 4px rgba(0,0,0,.12),
    0 0 0 1px rgba(44,90,160,.18);
  cursor:pointer;
  transition:
    background var(--t),
    box-shadow var(--t),
    transform .12s ease;
  white-space:nowrap;
  display:none;
  align-items:center;
  gap:10px;
}
.new-qr-pill:hover{
  background:var(--navy-d);
  box-shadow:
    0 6px 22px rgba(44,90,160,.48),
    0 2px 6px rgba(0,0,0,.14),
    0 0 0 1px rgba(44,90,160,.22);
}
.new-qr-pill:active{
  transform:translateX(-50%) scale(.96);
  box-shadow:0 2px 8px rgba(44,90,160,.28);
}
.new-qr-pill.visible{display:flex;}
.new-qr-pill-icon{
  width:22px;height:22px;border-radius:6px;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.new-qr-pill-icon svg{
  width:14px;height:14px;
  stroke:#fff;stroke-width:2.5;fill:none;
}
/* On desktop, hide the FAB */
@media(min-width:1024px){.new-qr-pill{display:none!important;}}
/* Hide FAB when create flow is active — prevents floating pill on create screen */
body.create-active .new-qr-pill{display:none!important;}

/* ── Create Action Row — Restart / Step label / Undo ── */
.create-action-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px;
  background:var(--white);
  border-bottom:1px solid var(--border);
  flex-shrink:0;gap:10px;
}
.create-nav-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:none;font-family:inherit;
  font-size:13px;font-weight:700;
  letter-spacing:.04em;cursor:pointer;
  transition:all .15s ease;flex-shrink:0;
  text-transform:uppercase;
}
.create-nav-btn.back{
  background:none;
  color:var(--muted);
  padding:8px 4px;
  border-radius:6px;
}
.create-nav-btn.back:hover{color:var(--ink);}
.create-nav-btn.back:active{opacity:.6;}
.create-nav-btn.next{
  background:#1A1A1A;
  color:#FFFFFF;
  width:38px;height:38px;
  border-radius:50%;
  border:none;
  padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.create-nav-btn.next:hover{opacity:.85;}
.create-nav-btn.next:active{opacity:.7;transform:scale(.93);}
.create-nav-btn.next svg{
  width:18px;height:18px;
  fill:#FFFFFF;
  flex-shrink:0;
}
.create-step-lbl{
  font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
  flex:1;text-align:center;
}

/* ════════════════════════════════════════════
   AI CREATE PAGE
════════════════════════════════════════════ */
.ai-q-card{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:18px 16px 16px;margin-bottom:14px;box-shadow:0 2px 12px rgba(0,0,0,.06);}
.ai-q-num{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.ai-q-text{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.35;margin-bottom:14px;}
.ai-q-chips{display:flex;flex-wrap:wrap;gap:8px;}
.ai-chip{padding:10px 18px;border:1.5px solid var(--border);border-radius:50px;background:var(--white);font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;transition:all var(--t);}
.ai-chip:hover{border-color:var(--navy);color:var(--navy);background:var(--navy-l)}
.ai-chip.sel{background:var(--navy);color:var(--white);border-color:var(--navy)}
.ai-answer-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:var(--navy-l);border:1px solid rgba(44,90,160,.2);border-radius:var(--r32);font-size:14px;font-weight:600;color:var(--navy);}

/* ════════════════════════════════════════════
   ANALYTICS TAB PAGE
════════════════════════════════════════════ */
.analytics-pad{
  padding:16px 16px 24px;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;flex:1;min-height:0;
}
.analytics-page-title{
  font-size:22px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;margin-bottom:4px;
}
.analytics-page-sub{
  font-size:14px;color:var(--muted);margin-bottom:18px;
}

/* ════════════════════════════════════════════
   DESKTOP LAYOUT — 1024px+
   Two-column: left = app content, right = live QR preview pill
   Mobile CSS completely untouched below this block.
════════════════════════════════════════════ */
@media(min-width:1024px){

  /* Grey outer background — gives depth */
  body{background:#E8EBF0;}

  /* Shell — card flush to right viewport edge, white extends to right */
  .shell{
    max-width:none;
    width:calc(100vw - 24px);
    flex-direction:row;
    height:calc(100dvh - 48px);
    border-radius:24px 0 0 24px;
    overflow:hidden;
    box-shadow:-4px 0 0 0 rgba(0,0,0,.06),0 24px 64px rgba(0,0,0,.14);
    margin:24px 0 24px 24px;
    background:var(--white);
  }

  /* Hide sidebar — desktop uses bottom nav */
  .desktop-sidebar{display:none!important;}
  .continue-wrap{display:none!important;}
  .create-top{display:none!important;}

  /* Bottom tab bar — visible on desktop */
  .tab-bar{
    display:flex!important;
    position:static;
    border-top:none;
    background:var(--white);
    padding-bottom:0;
    box-shadow:none;
    flex-shrink:0;
  }
  .tab-btn{
    padding:12px 4px 14px;
    font-size:11px;
    color:var(--muted);
  }
  .tab-btn svg{width:20px;height:20px;}
  .tab-btn.active{color:var(--navy);}
  .tab-btn.active svg{stroke:var(--navy);}
  .tab-btn:not(.active) svg{stroke:var(--muted);}

  /* Header */
  .header{
    position:static;
    padding:16px 28px 14px;
    border-bottom:1px solid var(--border);
  }

  /* Main column */
  .main-col{
    flex:1;min-width:0;
    display:flex;flex-direction:column;
    overflow:hidden;
    background:var(--white);
  }

  /* Cap content width on desktop so it reads comfortably */
  .dash-pad,
  .lib-pad,
  .analytics-pad{
    max-width:680px;
    margin:0 auto;
    width:100%;
    padding-left:28px;
    padding-right:28px;
  }

  .content{
    padding-bottom:0;
    overscroll-behavior-y:contain;
  }

  /* Right preview column */
  .desktop-live-preview-zone{
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    width:272px;
    flex-shrink:0;
    background:var(--surface);
    padding:28px 16px 16px;
    gap:0;
    border-left:1px solid var(--border);
  }

  /* Zone label above phone */
  .dz-zone-label{
    font-size:10px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);
    margin-bottom:20px;
    align-self:flex-start;
    padding-left:4px;
  }

  /* ── iPhone 16 Pro Max PNG frame ──
     PNG displayed at 200×344px (aspect-correct).
     Screen overlay absolutely positioned at measured coordinates.
     PNG background is white — no transparency, no checkerboard. ── */
  .desktop-preview-pill{
    position:relative;
    width:200px;
    height:378px;
    flex-shrink:0;
    /* drop shadow matches the phone outline */
    filter:drop-shadow(0 12px 28px rgba(0,0,0,.18)) drop-shadow(0 3px 8px rgba(0,0,0,.12));
  }

  /* Phone frame image — fills container, z above screen content */
  .dz-live-preview-img{
    display:block;
    width:200px;
    height:378px;
    position:absolute;
    top:0;left:0;
    z-index:2;
    pointer-events:none;
    /* Scale image to ~92% to make border appear slightly thinner */
    transform:scale(0.92);
    transform-origin:center center;
  }

  /* Status bar and notch are part of PNG — hide CSS versions */
  .dz-status-bar{display:none;}
  .dz-status-time{display:none;}
  .dz-status-icons{display:none;}
  .dz-notch{display:none;}
  .desktop-preview-pill::before,
  .desktop-preview-pill::after{content:none;}

  /* Screen content — absolutely positioned inside phone frame.
     Measured from PNG: top=8.26%, left=12.72%, w=72.41%, h=84.61%.
     At 200×344px display: top=28px, left=25px, w=145px, h=291px.
     Extra inset of 4px each side to clear the frame border cleanly. */
  .dz-screen{
    position:absolute;
    top:28px;
    left:26px;
    width:148px;
    height:324px;
    background:#fff;
    border-radius:20px 20px 24px 24px;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:10px 8px 10px;
  }

  /* Live Demo badge */
  .dz-badge{
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 8px;
    background:var(--navy-l);
    border:1px solid rgba(44,90,160,.18);
    border-radius:20px;
    font-size:8px;font-weight:700;
    letter-spacing:.07em;text-transform:uppercase;
    color:var(--navy);
    margin-bottom:8px;
    flex-shrink:0;
  }
  .dz-badge-dot{
    width:5px;height:5px;border-radius:50%;
    background:#22C55E;flex-shrink:0;
    box-shadow:0 0 4px rgba(34,197,94,.7);
  }

  /* QR canvas */
  .desktop-qr-container{
    width:116px;height:116px;
    display:flex;align-items:center;justify-content:center;
    background:#fff;
    border-radius:6px;
    overflow:hidden;flex-shrink:0;
    margin-bottom:8px;
    box-shadow:0 1px 6px rgba(0,0,0,.10);
  }
  #desktopQrPreview{
    width:116px;height:116px;
    display:flex;align-items:center;justify-content:center;
  }
  #desktopQrPreview canvas{display:block!important;width:116px!important;height:116px!important;}

  /* Labels */
  .live-preview-badge{display:none;}
  .live-preview-name{
    font-size:10px;font-weight:700;color:#1A1A1A;
    text-align:center;line-height:1.3;
    max-width:120px;word-break:break-word;
    margin-bottom:2px;
  }
  .live-preview-type{
    font-size:9px;color:#6B7280;font-weight:500;
    margin-bottom:0;
  }

  /* Home indicator bar */
  .dz-home-bar{
    width:36px;height:3px;
    background:rgba(0,0,0,.15);
    border-radius:2px;
    margin-top:8px;
    flex-shrink:0;
  }

  /* Hide legacy elements */
  .live-preview-mockup{display:none!important;}
  .dz-label{display:none;}
  .dz-hint{display:none;}
  .live-preview-home-bar{display:none;}

  /* Desktop hero */
  .hero-qr-demo{display:none!important;}
  .hero-headline{padding:24px 28px 16px;text-align:left;}
  .hero-h1{font-size:42px;}
  #heroScreen{padding:0;overflow-y:auto;}
  .desktop-type-grid{display:grid!important;width:70%;}

  /* Tile borders restored — original border and shadow preserved on desktop */
  .desktop-type-grid .type-btn{
    border:1.5px solid rgba(0,0,0,.08);
    box-shadow:0 1px 4px rgba(0,0,0,.04);
  }
  .desktop-type-grid .type-btn:hover{
    border-color:var(--muted);
    background:var(--surface);
  }
}


/* Desktop type grid — shown on hero screen on desktop, hidden on mobile */
.desktop-type-grid{
  display:none;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  padding:0 28px 28px;
}
.desktop-type-grid .type-btn{
  flex-direction:column;
  padding:16px 8px 14px;
  font-size:13px;
  gap:8px;
  min-height:80px;
  border-radius:14px;
}
.desktop-type-grid .type-btn svg{
  width:26px;height:26px;
}

/* Desktop sidebar — hidden on mobile, shown on desktop via media query */
.desktop-sidebar{display:none;}
.dsb-brand{padding:0;}
.dsb-logo{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
.dsb-logo span{color:#DC2626;}
.dsb-tag{display:none;}
.dsb-section{display:none;}
.dsb-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 4px;font-size:10px;font-weight:700;color:var(--ink);cursor:pointer;border:none;background:none;font-family:inherit;width:100%;letter-spacing:.04em;text-transform:uppercase;transition:color var(--t);}
.dsb-item svg{width:22px;height:22px;stroke:currentColor;fill:none;flex-shrink:0;}
.dsb-item.active{color:var(--navy);}
.dsb-spacer{flex:1;}
.dsb-upgrade{display:none;}
.dsb-upgrade-btn{display:none;}

/* Desktop phone zone — hidden on mobile */
.desktop-live-preview-zone{display:none!important;}
.dz-zone-label{display:none;}
@media(min-width:1024px){
  .desktop-live-preview-zone{display:flex!important;}
  .dz-zone-label{display:block;}
}

/* ════════════════════════════════════════════
   LIBRARY SUB-TABS + TEMPLATE GRID
════════════════════════════════════════════ */
.lib-tabs{
  display:flex;gap:0;
  border-bottom:1px solid var(--border);
  margin-bottom:16px;
}
.lib-tab{
  flex:1;padding:11px 8px;
  background:none;border:none;border-bottom:2px solid transparent;
  font-family:inherit;font-size:14px;font-weight:600;
  color:var(--muted);cursor:pointer;
  margin-bottom:-1px;
  transition:color .15s,border-color .15s;
  letter-spacing:.02em;
}
.lib-tab.active{color:var(--navy);border-bottom-color:var(--navy);}

/* Template grid */
.tmpl-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  padding-bottom:24px;
}
.tmpl-card{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:16px;
  padding:16px;
  cursor:pointer;
  transition:all .15s ease;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.tmpl-card:hover{border-color:var(--navy);box-shadow:0 4px 16px rgba(44,90,160,.12);}
.tmpl-card:active{transform:scale(.97);}
.tmpl-qr{
  width:80px;height:80px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;overflow:hidden;
  flex-shrink:0;
}
.tmpl-name{
  font-size:13px;font-weight:700;color:var(--ink);
  text-align:center;line-height:1.3;
}
.tmpl-tag{
  font-size:11px;font-weight:600;color:var(--muted);
  letter-spacing:.05em;text-transform:uppercase;
  text-align:center;
}
.tmpl-apply{
  width:100%;padding:9px;
  background:var(--navy);color:var(--white);
  border:none;border-radius:10px;
  font-family:inherit;font-size:13px;font-weight:700;
  cursor:pointer;margin-top:2px;
  transition:background .15s;
}
.tmpl-apply:hover{background:var(--navy-d);}


.modal-bd{position:fixed;inset:0;background:rgba(10,10,10,.55);backdrop-filter:blur(3px);z-index:200;opacity:0;pointer-events:none;transition:opacity .22s ease;display:flex;align-items:flex-end;justify-content:center;}
.modal-bd.open{opacity:1;pointer-events:all}
.modal-sheet{width:100%;max-width:480px;background:var(--white);border-radius:28px 28px 0 0;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,0,.1,1);max-height:92dvh;overflow-y:auto;overscroll-behavior-y:contain;padding-bottom:max(env(safe-area-inset-bottom),20px);touch-action:pan-y;}
/* Auth panel body — 340px bottom padding ensures inputs always clear
   the keyboard (~320px tall) on Android and iOS. Sheet is scrollable
   so this space is invisible until the keyboard pushes content up. */
#acctPanelBody{padding-bottom:340px;}
.modal-bd.open .modal-sheet{transform:translateY(0)}
.modal-drag{width:40px;height:4px;background:var(--border);border-radius:2px;margin:12px auto 0}
.modal-body{padding:18px 20px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 0;}
.modal-title{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
.modal-close{width:30px;height:30px;border:1px solid var(--border);border-radius:50%;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px;margin-left:auto;flex-shrink:0;}
.modal-close:hover{border-color:var(--ink);color:var(--ink)}
.acct-tabs{display:flex;align-items:center;border-bottom:1px solid var(--border);padding:0 16px;gap:0;}
.acct-tab{flex:1;padding:14px 4px 12px;background:none;border:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;letter-spacing:.02em;transition:color .15s,border-color .15s;}
.acct-tab.active{color:var(--navy);border-bottom-color:var(--navy);}
.acct-panel{overflow-y:visible;-webkit-overflow-scrolling:touch;}
.faq-body{padding:8px 20px 24px;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 0;background:none;border:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;gap:8px;}
.faq-arrow{font-size:20px;color:var(--muted);flex-shrink:0;transition:transform .2s;line-height:1;}
.faq-q.open .faq-arrow{transform:rotate(90deg);color:var(--navy);}
.faq-a{display:none;padding:0 0 14px;font-size:14px;color:var(--slate);line-height:1.6;font-weight:400;}
.faq-a.open{display:block;}
.legal-body{padding:8px 20px 32px;}
.legal-section{margin-bottom:4px;}
.legal-divider{height:1px;background:var(--border);margin:20px 0;}
.legal-h{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:4px;margin-top:16px;letter-spacing:-.01em;}
.legal-h2{font-size:14px;font-weight:700;color:var(--ink);margin-top:12px;margin-bottom:3px;}
.legal-meta{font-size:12px;color:var(--muted);margin-bottom:8px;}
.legal-p{font-size:14px;color:var(--slate);line-height:1.65;font-weight:400;}
.ai-intro{font-size:15px;color:var(--slate);line-height:1.6;margin-bottom:16px}
.ai-card{background:var(--ink);border-radius:var(--r12);padding:14px;margin-bottom:10px;}
.ai-card-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:var(--navy);color:var(--white);border-radius:var(--r32);font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:8px;}
.ai-card-text{font-size:15px;color:rgba(255,255,255,.85);line-height:1.55}
.ai-card-text strong{color:var(--white)}
.iso-block{border:1px solid var(--border);border-radius:var(--r12);overflow:hidden;margin-bottom:10px;}
.iso-block-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--surface);}
.iso-code{font-family:monospace;font-size:14px;font-weight:700;color:var(--white);background:var(--ink);padding:3px 9px;border-radius:var(--r8);flex-shrink:0;}
.iso-title-text{font-size:15px;font-weight:600;color:var(--ink)}
.iso-desc{padding:10px 14px;font-size:15px;color:var(--slate);line-height:1.55}
.iso-check{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--ink);font-weight:500;padding:7px 14px;border-top:1px solid var(--border);line-height:1.45;}
.iso-check svg{width:14px;height:14px;color:var(--navy);flex-shrink:0;margin-top:1px}

/* ════════════════════════════════════════════
   SKIA — HELP CHATBOT
   When Help tab is active the sheet expands to
   near full-screen. Tab row + Skia header are
   sticky. Messages scroll. Input bar is pinned.
════════════════════════════════════════════ */

/* Full-height sheet when Help tab is open.
   height forces the sheet to fill all available space in the flex-end
   backdrop — combined with max-height this pins it ~1cm from the top. */
.modal-sheet.help-open{
  height:calc(100dvh - 40px);
  max-height:calc(100dvh - 40px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:28px 28px 0 0;
}

/* In help-open mode the drag handle and tabs are fixed at top */
.modal-sheet.help-open .modal-drag{flex-shrink:0;}
.modal-sheet.help-open .acct-tabs{flex-shrink:0;}

/* acct-panel fills remaining height in help-open mode */
.modal-sheet.help-open #apanel-help{
  flex:1;min-height:0;display:flex;flex-direction:column;
  overflow:hidden;
}

/* Skia wrap fills the panel */
.skia-wrap{
  display:flex;flex-direction:column;
  flex:1;min-height:0;
}
.skia-header{
  display:flex;align-items:center;gap:12px;
  padding:14px 20px 12px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.skia-avatar{width:36px;height:36px;border-radius:10px;background:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.skia-name{font-size:15px;font-weight:700;color:var(--ink);line-height:1.2;}
.skia-status{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);font-weight:500;}
.skia-dot{width:6px;height:6px;border-radius:50%;background:#22C55E;flex-shrink:0;}

/* Message area — scrolls, shows only recent messages */
.skia-messages{
  flex:1;min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  padding:14px 16px 8px;
  display:flex;flex-direction:column;
  gap:10px;
}
.skia-msg{display:flex;}
.skia-msg-bot{justify-content:flex-start;}
.skia-msg-user{justify-content:flex-end;}
.skia-bubble{
  max-width:82%;padding:10px 14px;border-radius:16px;
  font-size:14px;line-height:1.55;font-weight:400;
}
.skia-msg-bot .skia-bubble{background:var(--surface);border:1px solid var(--border);color:var(--ink);border-bottom-left-radius:4px;}
.skia-msg-user .skia-bubble{background:var(--navy);color:var(--white);border-bottom-right-radius:4px;}
.skia-typing .skia-bubble{color:var(--muted);font-style:italic;}

/* Input bar — pinned at bottom, lifted by JS when keyboard appears */
.skia-input-row{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px max(env(safe-area-inset-bottom),16px);
  border-top:1px solid var(--border);
  flex-shrink:0;
  background:var(--white);
  transition:transform .18s ease;
  will-change:transform;
}
.skia-inp{
  flex:1;padding:11px 14px;
  border:1.5px solid var(--border);border-radius:12px;
  font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--white);outline:none;-webkit-appearance:none;
}
.skia-inp:focus{border-color:var(--navy);}
.skia-inp::placeholder{color:var(--muted);}
.skia-send{
  width:40px;height:40px;border-radius:10px;
  background:var(--navy);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--white);transition:background var(--t);
}
.skia-send:hover{background:var(--navy-d);}
.skia-send:active{transform:scale(.94);}

/* Pricing */
.pricing-bd{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;opacity:0;pointer-events:none;transition:opacity var(--t);display:flex;align-items:flex-end;justify-content:center;}
.pricing-bd.open{opacity:1;pointer-events:all}
.pricing-sheet{width:100%;max-width:480px;background:var(--white);border-radius:var(--r24) var(--r24) 0 0;padding:0 22px 36px;transform:translateY(100%);transition:transform .3s ease;padding-bottom:max(env(safe-area-inset-bottom),36px);overscroll-behavior-y:contain;}
.pricing-bd.open .pricing-sheet{transform:translateY(0)}
.pricing-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:12px auto 20px}
.pricing-title{font-size:26px;font-weight:800;color:var(--ink);margin-bottom:3px;letter-spacing:-.03em}
.pricing-sub{font-size:15px;color:var(--slate);margin-bottom:18px}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.plan-card{border:1.5px solid var(--border);border-radius:var(--r12);padding:16px;transition:var(--t);box-shadow:var(--sh-sm)}
.plan-card.hero{border-color:var(--ink);background:var(--ink)}
.plan-name{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:7px}
.plan-card.hero .plan-name{color:rgba(255,255,255,.45)}
.plan-price{font-size:40px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.04em}
.plan-card.hero .plan-price{color:var(--white)}
.plan-period{font-size:15px;color:var(--slate)}
.plan-card.hero .plan-period{color:rgba(255,255,255,.55)}
.plan-save{font-size:13px;color:var(--navy);font-weight:700;margin-top:3px}
.pricing-cta{width:100%;padding:16px;background:var(--ink);color:var(--white);border:none;border-radius:var(--r32);font-family:inherit;font-size:18px;font-weight:700;cursor:pointer;margin-bottom:10px;box-shadow:var(--sh-md);transition:var(--t);}
.pricing-skip{width:100%;padding:10px;background:none;border:none;font-family:inherit;font-size:15px;color:var(--muted);cursor:pointer;}

/* ════════════════════════════════════════════
   DOWNLOAD GATE — auth prompt for guests
════════════════════════════════════════════ */
.dlgate-sheet{
  padding:0 24px max(env(safe-area-inset-bottom),32px);
  text-align:center;
}
.dlgate-bar{
  width:36px;height:4px;background:var(--border);
  border-radius:2px;margin:12px auto 24px;
}
.dlgate-icon-wrap{
  width:56px;height:56px;border-radius:16px;
  background:rgba(44,90,160,.08);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
}
.dlgate-title{
  font-size:20px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;margin-bottom:6px;
}
.dlgate-sub{
  font-size:14px;color:var(--slate);font-weight:500;
  line-height:1.5;margin-bottom:20px;
}
.dlgate-list{
  list-style:none;padding:0;margin:0 0 24px;
  display:flex;flex-direction:column;gap:10px;
  text-align:left;
}
.dlgate-list li{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;color:var(--ink);
}
.dlgate-list svg{flex-shrink:0;}
.dlgate-cta{
  width:100%;padding:16px;
  background:var(--navy);color:var(--white);
  border:none;border-radius:var(--r14);
  font-family:inherit;font-size:16px;font-weight:700;
  cursor:pointer;margin-bottom:10px;
  box-shadow:0 4px 18px rgba(44,90,160,.3);
  transition:var(--t);
}
.dlgate-cta:active{transform:scale(.98);box-shadow:none;}
.dlgate-signin{
  width:100%;padding:10px;background:none;border:none;
  font-family:inherit;font-size:14px;font-weight:600;
  color:var(--muted);cursor:pointer;
}
.dlgate-signin:active{opacity:.6;}

/* ════════════════════════════════════════════
   CUSTOM IN-APP KEYBOARD — v5.8
   Dark charcoal theme. Permanent readonly on
   all managed inputs — native KB suppressed.
════════════════════════════════════════════ */
/* ── Flashing cursor on active input ── */
@keyframes inputCursorBlink{0%,100%{border-color:var(--navy);}50%{border-color:rgba(44,90,160,.25);}}
.field-inp:focus{
  border-color:var(--navy);background:#FFFFFF;
  box-shadow:0 0 0 3px rgba(44,90,160,.10);
  animation:inputCursorBlink 1.1s ease-in-out infinite;
}
/* Ensure caret is visible and on-brand */
.field-inp{caret-color:var(--navy);}
/* Toast */
/* Toast */
#toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 20px;border-radius:var(--r32);font-size:15px;font-weight:600;opacity:0;transition:all .3s ease;pointer-events:none;z-index:490;white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}