/* QuickQR Plus — design system v5. Tokens drive both themes; no !important layering. */
:root{color-scheme:light;--bg:#f6f7fc;--bg2:#eceefa;--surface:#fff;--surface2:#f2f4fb;--text:#0e1124;--muted:#5a6080;--border:#e1e4f2;--primary:#4f46e5;--primary2:#7c3aed;--on-primary:#fff;--primary-soft:#eceafe;--ring:rgba(79,70,229,.4);--ok:#047857;--ok-bg:#d9f7e8;--warn:#92400e;--warn-bg:#fef0cf;--err:#b91c1c;--err-bg:#fde4e4;--shadow:0 1px 2px rgba(16,18,50,.05),0 8px 28px rgba(16,18,50,.07);--shadow-lg:0 24px 60px rgba(60,50,170,.18);--r:16px;--font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
[data-theme=dark]{color-scheme:dark;--bg:#0a0c18;--bg2:#10132a;--surface:#131628;--surface2:#1a1e36;--text:#eceefc;--muted:#a3a9c8;--border:#272c4a;--primary:#818cf8;--primary2:#a78bfa;--primary-soft:#22274d;--ring:rgba(129,140,248,.5);--ok:#6ee7b7;--ok-bg:#0f3a2c;--warn:#fcd34d;--warn-bg:#3d2c09;--err:#fca5a5;--err-bg:#431616;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);--shadow-lg:0 24px 60px rgba(0,0,0,.55)}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.15;letter-spacing:-.02em}a{color:inherit}button,input,select,textarea{font:inherit;color:inherit}
[hidden],.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:8px}
.ui-icon{width:1.15em;height:1.15em;flex:none}.app-shell{width:min(1180px,100% - 40px);margin:0 auto;padding-bottom:40px}
.accent,.gradient-text{background:linear-gradient(100deg,var(--primary),var(--primary2) 60%,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Header */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;margin:0 -20px;padding:12px 20px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;text-decoration:none;letter-spacing:-.02em}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 6px 16px var(--ring)}
.brand-mark .ui-icon{width:19px;height:19px}.landing-nav{display:flex;gap:4px;margin:0 auto}
.landing-nav a{padding:8px 13px;border-radius:999px;color:var(--muted);font-size:14.5px;font-weight:600;text-decoration:none;transition:.15s}
.landing-nav a:hover{color:var(--text);background:var(--surface2)}.home-nav-link{display:inline-flex;align-items:center;gap:7px;color:var(--text)!important;background:var(--primary-soft)}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.landing-nav+.header-actions{margin-left:0}
.theme-toggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);cursor:pointer;font-size:13.5px;font-weight:600;transition:.15s}
.theme-toggle:hover{border-color:var(--primary)}
/* Buttons */
.button,.upload-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-weight:650;font-size:15px;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .2s,border-color .2s,background .2s}
.button:hover,.upload-button:hover{border-color:var(--primary);transform:translateY(-1px)}.button:active{transform:none}
.button-primary{border-color:transparent;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 8px 22px var(--ring)}
[data-theme=dark] .button-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.button-primary:hover{border-color:transparent;box-shadow:0 12px 30px var(--ring)}
.button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.button-lg{min-height:54px;padding:0 28px;font-size:16.5px;border-radius:14px}
.text-button,.mini-button{border:1px solid var(--border);background:var(--surface2);border-radius:9px;padding:6px 11px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.text-button{border-color:transparent;background:none;color:var(--muted)}.text-button:hover,.mini-button:hover{color:var(--primary);border-color:var(--primary)}.mini-button.danger:hover{color:var(--err);border-color:var(--err)}
/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;padding:72px 0 56px;position:relative}
.hero:before{content:"";position:absolute;inset:-120px -20vw auto;height:640px;z-index:-1;background:radial-gradient(600px 320px at 22% 30%,rgba(124,58,237,.16),transparent 70%),radial-gradient(520px 300px at 85% 20%,rgba(79,70,229,.18),transparent 70%)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:13px;font-weight:650;color:var(--muted)}
.eyebrow b{padding:2px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:11.5px;letter-spacing:.04em}
.hero h1{margin-top:20px;font-size:clamp(38px,5.6vw,66px);font-weight:850;letter-spacing:-.035em;line-height:1.05}
.hero-copy{margin-top:20px;max-width:540px;font-size:clamp(17px,1.7vw,19.5px);color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;color:var(--muted);font-size:14px;font-weight:600}.hero-trust span{display:inline-flex;align-items:center;gap:7px}.hero-trust .ui-icon{color:var(--ok)}
.hero-visual{position:relative;display:grid;place-items:center;min-height:430px}
.hero-card{width:min(360px,100%);padding:18px;border:1px solid var(--border);border-radius:28px;background:var(--surface);box-shadow:var(--shadow-lg);transform:rotate(2deg)}
.hero-qr{--hq:#0e1124;display:block;width:100%;aspect-ratio:1;padding:16px;border-radius:18px;background:#fff;color:var(--hq)}[data-theme=dark] .hero-qr{box-shadow:0 0 0 1px #fff2}
.hero-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-size:13px;font-weight:650;color:var(--muted)}
.hero-swatches{display:flex;gap:8px}.hero-swatches button{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);background:var(--c);box-shadow:0 0 0 1px var(--border);cursor:pointer;padding:0}.hero-swatches button[aria-pressed=true]{box-shadow:0 0 0 2px var(--primary)}
.hero-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);font-size:13.5px;font-weight:700;animation:float 6s ease-in-out infinite}
.hero-chip .ui-icon{color:var(--primary)}.chip-a{top:34px;left:0}.chip-b{bottom:40px;right:-6px;animation-delay:-3s}.chip-b .ui-icon{color:var(--ok)}
@keyframes float{50%{transform:translateY(-8px)}}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:8px 0 24px;border:1px solid var(--border);border-radius:var(--r);background:var(--border);overflow:hidden}
.stats-strip div{padding:22px 16px;background:var(--surface);text-align:center}.stats-strip strong{display:block;font-size:30px;font-weight:850;letter-spacing:-.03em}.stats-strip span{font-size:13.5px;color:var(--muted);font-weight:600}
/* Landing sections */
.landing-section{padding:76px 0 8px}.landing-section-heading{max-width:680px;margin:0 auto 40px;text-align:center}
.section-kicker{margin-bottom:8px;color:var(--primary);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.landing-section h2,.panel h2{font-size:clamp(28px,3.6vw,42px);font-weight:820}.landing-section-heading p:last-child{margin-top:14px;color:var(--muted);font-size:17px}
.feature-grid,.use-case-grid,.showcase-grid,.steps-grid,.help-grid{display:grid;gap:18px}.feature-grid{grid-template-columns:repeat(3,1fr)}.use-case-grid,.help-grid{grid-template-columns:repeat(4,1fr)}.showcase-grid,.steps-grid{grid-template-columns:repeat(3,1fr)}
.feature-card,.use-case-card,.showcase-card,.step-card,.help-card,.panel,.faq-item,.privacy-section{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
.feature-card{padding:26px;transition:.2s}.feature-card:hover,.use-case-card:hover,.showcase-card:hover,.help-card:hover{transform:translateY(-3px);border-color:var(--primary)}
.feature-card h3,.step-card h3{margin:16px 0 8px;font-size:18.5px}.feature-card p,.step-card p,.use-case-card small,.help-card small{color:var(--muted);font-size:15px}
.feature-icon,.use-case-icon,.tool-icon,.help-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--primary-soft);color:var(--primary)}.feature-icon .ui-icon,.use-case-icon .ui-icon,.help-icon .ui-icon{width:22px;height:22px}
.use-case-card,.help-card,.showcase-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:24px;text-align:left;cursor:pointer;transition:.2s;font:inherit;color:inherit}.use-case-card .use-case-icon,.help-card .help-icon{margin-bottom:10px}.use-case-card strong,.help-card strong,.showcase-card strong{font-size:17px}
.use-case-card em,.showcase-card em,.help-card em{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:5px;color:var(--primary);font-style:normal;font-weight:700;font-size:14px}
.step-card{display:flex;gap:18px;padding:28px}.step-card>span{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-weight:800}.step-card h3{margin-top:2px}
.mini-qr{width:72px;height:72px;border-radius:12px;border:6px solid #fff;box-shadow:0 0 0 1px var(--border);background:repeating-conic-gradient(var(--q,#111) 0 25%,#fff 0 50%) 0 0/16px 16px}.mini-qr-classic{--q:#111}.mini-qr-violet{--q:#5b3df5}.mini-qr-midnight{--q:#fff;background-color:#171326;border-color:#171326}
.privacy-section{display:flex;align-items:center;gap:26px;margin-top:76px;padding:34px;background:linear-gradient(135deg,var(--primary-soft),var(--surface))}.privacy-section h2{font-size:26px}.privacy-section p:last-of-type{margin-top:8px;color:var(--muted)}.privacy-promo-icon{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:18px;background:var(--surface);color:var(--primary)}.privacy-promo-icon .ui-icon{width:30px;height:30px}.privacy-section .button{flex:none;margin-left:auto}
.faq-list{display:grid;gap:12px;max-width:820px;margin:0 auto}.faq-item{padding:0;box-shadow:none}.faq-item summary{display:flex;justify-content:space-between;gap:14px;padding:18px 22px;cursor:pointer;font-weight:700;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";color:var(--primary);font-size:22px;line-height:1}.faq-item[open] summary:after{content:"–"}.faq-item p{padding:0 22px 20px;color:var(--muted)}
.faq-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:820px;margin:36px auto 0;padding:34px;border-radius:22px;background:linear-gradient(135deg,#4338ca,#7c3aed);color:#fff}.faq-cta h3{font-size:24px}.faq-cta p{margin-top:6px;opacity:.88;font-size:15px}.faq-cta .button{background:#fff;color:#3730a3;box-shadow:none;flex:none}
.footer{display:flex;flex-direction:column;gap:12px;margin-top:70px;padding-top:26px;border-top:1px solid var(--border);color:var(--muted);font-size:14px}.footer-main{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}.footer-links{display:flex;flex-wrap:wrap;gap:6px 20px}.footer-links a{text-decoration:none;font-weight:600}.footer-links a:hover{color:var(--primary)}
/* Generator */
.generator-app{padding-top:28px}.mobile-nav-row{display:none}
.tabs{display:flex;gap:4px;width:max-content;max-width:100%;margin:0 auto 22px;padding:5px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border:0;border-radius:12px;background:none;color:var(--muted);font-weight:700;cursor:pointer;transition:.15s}.tab:hover{color:var(--text)}.tab.active{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 6px 16px var(--ring)}
.tiny-count,.count-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:12px;font-weight:800}.tab.active .tiny-count{background:#fff3;color:#fff}
.offline-notice{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 auto 22px;padding:9px 16px;width:max-content;max-width:100%;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:13px;color:var(--muted)}.connection-mode-label{font-size:11px;letter-spacing:.08em;color:var(--ok)}.offline-notice.offline .connection-mode-label{color:var(--warn)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-bg)}.offline .status-dot{background:var(--warn);box-shadow:0 0 0 4px var(--warn-bg)}
.view{display:none}.view.active{display:block;animation:fade .25s}@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.qr-workflow{display:flex;align-items:center;gap:10px;max-width:760px;margin:0 auto 24px}.qr-workflow-line{flex:1;height:2px;background:var(--border);border-radius:2px}
.qr-workflow-step{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border:1px solid var(--border);border-radius:999px;background:var(--surface);cursor:pointer;text-align:left}.qr-workflow-step>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--surface2);font-weight:800;font-size:14px}.qr-workflow-step strong{display:block;font-size:14px;line-height:1.2}.qr-workflow-step small{color:var(--muted);font-size:12px}
.qr-workflow-step.is-current{border-color:var(--primary)}.qr-workflow-step.is-current>span,.qr-workflow-step.is-complete>span{background:var(--primary);color:#fff}
.workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:22px;align-items:start}.workspace>*{min-width:0}.workflow-hidden{display:none}
.photo-workspace{display:none}.photo-mode .workspace:not(.photo-workspace){display:none}.photo-mode .photo-workspace{display:grid}.photo-mode .qr-workflow{display:none}
.panel{padding:28px}.panel-heading,.history-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:22px}.panel h2{font-size:26px}.step-badge,.format-tag,.live-pill{padding:5px 11px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:11.5px;font-weight:800;letter-spacing:.06em;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.live-pill{background:var(--ok-bg);color:var(--ok)}.live-pill .status-dot{width:6px;height:6px;box-shadow:none}
.preview-panel{position:sticky;top:84px}
/* Forms */
.field-label{display:block;margin:18px 0 7px;font-size:14px;font-weight:700}.field-hint,.scan-intro,.privacy-note,.download-note,.preview-subtitle,.safety-disclaimer{color:var(--muted);font-size:13.5px}.field-hint{margin-top:6px}.optional{margin-left:6px;padding:2px 7px;border-radius:6px;background:var(--surface2);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
input[type=text],input[type=url],input[type=email],input[type=tel],input[type=search],textarea,select{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface2);color:var(--text);transition:border-color .15s,box-shadow .15s}textarea{resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}input:focus,textarea:focus,select:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px var(--ring);background:var(--surface)}
input[type=color]{width:100%;height:46px;padding:4px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface2);cursor:pointer}input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary)}.checkbox-row{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14.5px}
.type-picker-heading{display:flex;justify-content:space-between;align-items:baseline}.type-picker-note{font-size:12.5px;color:var(--muted)}
.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.type-button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border:1.5px solid var(--border);border-radius:14px;background:var(--surface2);font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s}.type-button:hover{border-color:var(--primary)}.type-button.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);box-shadow:0 0 0 3px var(--ring)}.type-icon .ui-icon{width:22px;height:22px}
.settings-divider{height:1px;margin:24px 0;background:var(--border)}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-row select{width:190px}.settings-row .field-label{margin:0}
.color-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px}.color-controls .field-hint{grid-column:1/-1;margin:0}.qr-default-note{margin:14px 0}
.compatibility-card{display:flex;align-items:center;gap:12px;margin-top:16px;padding:13px 16px;border-radius:12px;background:var(--ok-bg);color:var(--ok);font-size:14px}.compatibility-card strong{display:block}.compatibility-card small{opacity:.85}.universal-auto-dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.logo-control{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;margin-top:20px;padding:16px;border:1.5px dashed var(--border);border-radius:14px}.logo-control .field-label{margin:0}.logo-status{grid-column:1/-1;font-size:13px;color:var(--muted)}.upload-button{min-height:40px;cursor:pointer}
.extra-fields{margin-top:6px}.workflow-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:24px}.workflow-step-note{font-size:13px;color:var(--muted);font-weight:600}
.form-message{margin-top:14px;font-size:14px;font-weight:600;color:var(--muted)}.form-message.error{color:var(--err)}.form-message.success{color:var(--ok)}.form-message:empty{display:none}
/* Templates */
.template-library{margin-bottom:26px;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface2)}.template-library-heading{display:flex;justify-content:space-between;align-items:center}.template-library h3{font-size:19px}.template-count{font-size:12px;font-weight:700;color:var(--muted)}.template-library>.field-hint{margin-bottom:12px}
.template-library-tools{display:grid;grid-template-columns:1fr 150px;gap:10px}.template-library-tools input,.template-library-tools select{min-height:42px;background:var(--surface)}.template-results-note{margin:10px 0;font-size:12.5px;color:var(--muted)}
.template-grid{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:128px;gap:10px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin}
.template-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:9px;border:1.5px solid var(--border);border-radius:13px;background:var(--surface);cursor:pointer;text-align:left;transition:.15s}.template-card:hover,.template-card.selected{border-color:var(--primary)}.template-card.selected{box-shadow:0 0 0 3px var(--ring)}.template-card strong{font-size:12.5px;line-height:1.25}.template-card small{font-size:11px;color:var(--muted)}
.template-swatch{display:grid;place-items:center;width:100%;height:44px;margin-bottom:5px;border-radius:9px;background:var(--sw-bg,#fff);color:var(--sw-fg,#111);box-shadow:inset 0 0 0 1px #0001}.template-swatch i{width:26px;height:26px;border-radius:4px;background:repeating-conic-gradient(currentColor 0 25%,transparent 0 50%) 0 0/8px 8px}
/* Safety checker */
.destination-card{margin-top:18px;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface2)}.tool-card-heading{display:flex;gap:14px}.tool-card-heading strong{font-size:15px}.tool-card-heading p{margin-top:3px;font-size:13.5px;color:var(--muted)}.tool-icon{width:40px;height:40px;flex:none}
.safety-result{margin:14px 0 8px;padding:11px 14px;border-radius:10px;font-size:13.5px;font-weight:600}.safety-result.neutral{background:var(--surface);color:var(--muted);border:1px solid var(--border)}.safety-result.safe{background:var(--ok-bg);color:var(--ok)}.safety-result.warning{background:var(--warn-bg);color:var(--warn)}
/* Preview */
.qr-stage{display:grid;place-items:center;gap:14px;padding:28px 18px;border-radius:18px;background:linear-gradient(160deg,var(--primary-soft),var(--surface2))}
.qr-frame{display:grid;place-items:center;min-width:240px;min-height:240px;max-width:100%;padding:16px;border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(20,20,60,.12);color:#111}
.qr-placeholder{display:grid;justify-items:center;gap:6px;text-align:center;color:#6b7194;font-size:14px}.placeholder-icon .ui-icon{width:54px;height:54px;color:#b9bdd8}.qr-placeholder p{font-weight:700;color:#3a3f60}
.qr-canvas{position:relative;display:grid;place-items:center;max-width:100%;overflow:hidden}.qr-canvas>img:not(.qr-logo-overlay),.qr-canvas>canvas{max-width:100%;height:auto!important}.qr-logo-overlay{position:absolute;top:50%;left:50%;width:22%;height:22%;object-fit:contain;transform:translate(-50%,-50%);padding:3px;border-radius:8px;background:#fff}
.scan-caption{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);font-weight:600}
.preview-details{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0;overflow-wrap:anywhere}.preview-info{display:grid;min-width:0}.preview-info strong{font-size:16px}
.download-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.download-actions .button-primary{grid-column:1/-1}.download-note{margin-top:12px;text-align:center}
#qrFrame[data-qr-style=soft]{border:2px solid #b8a8ff;border-radius:30px;background:#f7f4ff}#qrFrame[data-qr-style=badge]{border-color:#d9ccff;border-radius:26px;background:#f7f4ff;padding:18px}#qrFrame[data-qr-style=neon]{border:3px solid #9b7bff;background:#100b20;box-shadow:0 0 0 4px #8b70ff22,0 0 25px #8b70ff55}#qrFrame[data-qr-style=minimal]{border:1px solid #b8a8ff;border-radius:8px;padding:10px;box-shadow:none}
#qrFrame[data-qr-style=label],#qrFrame[data-qr-style=sticker],#qrFrame[data-qr-style=ticket]{position:relative;padding:14px 14px 34px;border-radius:14px}#qrFrame[data-qr-style=sticker]{border:3px solid #b8a8ff;background:#f4efff;border-radius:23px}#qrFrame[data-qr-style=ticket]{border:3px dashed #8b70ff;border-radius:12px}
#qrFrame[data-qr-style=label]:after,#qrFrame[data-qr-style=sticker]:after,#qrFrame[data-qr-style=ticket]:after{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:10px;font-weight:900;letter-spacing:2px;color:#38245f}#qrFrame[data-qr-style=label]:after{content:"SCAN ME"}#qrFrame[data-qr-style=sticker]:after{content:"MADE TO SCAN"}#qrFrame[data-qr-style=ticket]:after{content:"EVENT PASS"}
#qrFrame[data-qr-style=double]{border:5px double #8b70ff;border-radius:18px;padding:12px}#qrFrame[data-qr-style=corner]{position:relative;border-color:transparent}#qrFrame[data-qr-style=corner]:before{content:"";position:absolute;inset:4px;border:3px solid #9b7bff;border-radius:14px;pointer-events:none}#qrFrame[data-qr-style=gradient]{border:0;border-radius:24px;padding:13px;background:linear-gradient(135deg,#7046dc,#c1b3ff)}
.photo-upload-box{margin:18px 0}.photo-upload-box .button{width:100%;min-height:92px;border-style:dashed;border-width:2px}.photo-preview-wrap{display:flex;gap:16px;align-items:center;margin-bottom:18px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface2)}.photo-preview-wrap img{width:96px;height:96px;object-fit:cover;border-radius:12px}.photo-heading .button{min-height:38px}.generate-button{width:auto}
/* Scan & Bulk */
.scan-panel,.bulk-panel,.history-panel{max-width:880px;margin:0 auto}.scanner-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.scanner-stage{position:relative;display:grid;place-items:center;min-height:340px;overflow:hidden;border-radius:18px;background:#080a16;color:#c8cbe6}.scanner-stage video{width:100%;max-height:520px;object-fit:cover}.scanner-stage:not(:has(video.hidden)):after,.scanner-stage:has(video:not(.hidden)):after{content:"";position:absolute;inset:18% 22%;border:3px solid #fff9;border-radius:22px;box-shadow:0 0 0 999px #0005;pointer-events:none}
.scanner-placeholder{display:grid;justify-items:center;gap:8px;padding:30px;text-align:center}.scanner-placeholder .ui-icon{width:48px;height:48px;color:#818cf8}.scan-image-preview{position:relative;width:100%}.scan-image-preview img{display:block;margin:0 auto;max-width:100%;max-height:420px}.scan-image-preview span{position:absolute;left:12px;bottom:12px;padding:4px 10px;border-radius:8px;background:#000a;font-size:11px;font-weight:700;letter-spacing:.05em;color:#fff}
.scan-result{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;padding:18px;border:1px solid var(--ok);border-radius:14px;background:var(--ok-bg)}.scan-result>div{flex:1;min-width:200px;overflow-wrap:anywhere}.scan-result .section-kicker{color:var(--ok)}
.bulk-summary{margin-top:14px;padding:13px 16px;border-radius:12px;background:var(--primary-soft);color:var(--primary);font-weight:650;font-size:14px}.bulk-actions{margin-top:14px}.privacy-note{margin-top:18px;display:flex;gap:8px;align-items:center}
/* History */
.search-box{display:flex;align-items:center;gap:10px;padding:0 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface2)}.search-box input{border:0;background:none;box-shadow:none!important;min-height:46px;padding-left:0}.history-list{display:grid;gap:12px;margin:18px 0}
.history-item{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface2)}.history-item.is-favorite{border-color:var(--primary)}.history-thumb{display:grid;place-items:center;width:60px;height:60px;border-radius:10px;background:#fff;overflow:hidden}.history-thumb img,.history-thumb canvas{width:44px;height:44px}.history-meta{display:grid;min-width:0}.history-meta strong{display:flex;align-items:center;gap:6px}.history-meta span{color:var(--muted);font-size:13px;overflow-wrap:anywhere}.favorite-marker{color:var(--primary)}.history-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.history-empty{display:flex;align-items:center;gap:16px;padding:36px;border:1.5px dashed var(--border);border-radius:16px;color:var(--muted)}.history-empty-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--primary-soft);color:var(--primary)}.history-empty strong{display:block;color:var(--text)}
.workspace-footer{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;margin-top:44px;padding-top:22px;border-top:1px solid var(--border);font-size:14px;color:var(--muted)}.workspace-footer nav{display:flex;gap:6px 18px;flex-wrap:wrap}.workspace-footer a,.workspace-footer button{background:none;border:0;padding:0;cursor:pointer;font-weight:600;text-decoration:none}.workspace-footer a:hover,.workspace-footer button:hover{color:var(--primary)}.workspace-footer small{flex-basis:100%}
/* Help Center */
.help-card{box-shadow:none}.help-card .help-icon{margin-bottom:6px}
.support-launcher{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 20px 0 8px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-weight:700;font-size:14.5px;box-shadow:0 12px 30px var(--ring);cursor:pointer}.support-launcher>span:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff3;font-weight:800}
.support-chat{position:fixed;right:20px;bottom:86px;z-index:70;display:flex;flex-direction:column;width:min(390px,100vw - 24px);height:min(600px,100dvh - 110px);overflow:hidden;border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-lg);animation:fade .2s}.support-chat[hidden]{display:none}
.support-chat-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:linear-gradient(135deg,#4338ca,#7c3aed);color:#fff}.support-chat-header>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}.support-chat-header small{grid-column:2;opacity:.85;font-size:12.5px}.support-status-dot{grid-row:span 2;width:10px;height:10px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px #4ade8040}.support-chat-header button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#fff2;color:#fff;cursor:pointer}
.support-chat-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:16px;overflow-y:auto;background:var(--bg)}.chat-message{max-width:86%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.bot-message{align-self:flex-start;border:1px solid var(--border);border-bottom-left-radius:4px;background:var(--surface)}.user-message{align-self:flex-end;border-bottom-right-radius:4px;background:var(--primary);color:#fff}[data-theme=dark] .user-message{background:#4f46e5}
.support-copy-report{align-self:flex-start;padding:8px 14px;border:1px solid var(--primary);border-radius:10px;background:var(--primary-soft);color:var(--primary);font-weight:700;cursor:pointer}
.support-quick-actions{display:flex;gap:8px;padding:12px 14px;overflow-x:auto;border-top:1px solid var(--border);background:var(--surface);scrollbar-width:none}.support-quick-actions button,.support-direct-message{flex:none;padding:7px 13px;border:1px solid var(--border);border-radius:999px;background:var(--surface2);font-size:13px;font-weight:650;text-decoration:none;cursor:pointer;white-space:nowrap}.support-quick-actions button:hover,.support-direct-message:hover{border-color:var(--primary);color:var(--primary)}.support-direct-message{background:var(--primary-soft);color:var(--primary)}
.support-chat-form{display:flex;gap:8px;padding:12px 14px 14px;border-top:1px solid var(--border);background:var(--surface)}.support-chat-form input{min-height:44px;border-radius:999px}.support-chat-form button{flex:none;padding:0 18px;border:0;border-radius:999px;background:var(--primary);color:#fff;font-weight:700;cursor:pointer}
/* Responsive */
@media(max-width:980px){.hero{grid-template-columns:1fr;gap:36px;padding-top:44px;text-align:center}.hero-copy{margin-inline:auto}.hero-actions,.hero-trust{justify-content:center}.hero-visual{min-height:380px}.feature-grid,.showcase-grid,.steps-grid{grid-template-columns:repeat(2,1fr)}.use-case-grid,.help-grid{grid-template-columns:repeat(2,1fr)}.workspace{grid-template-columns:1fr}.preview-panel{position:static}.landing-nav{display:none}.header-actions{margin-left:auto}}
@media(max-width:640px){.app-shell{width:calc(100% - 28px)}.topbar{margin:0 -14px;padding:10px 14px}.theme-toggle-label{display:none}.theme-toggle{width:40px;padding:0;justify-content:center}.header-cta{padding:0 14px;min-height:40px}.hero h1{font-size:36px}.hero-actions .button{flex:1 1 100%}.hero-chip{display:none}.stats-strip{grid-template-columns:1fr 1fr}.landing-section{padding-top:56px}.feature-grid,.showcase-grid,.steps-grid,.use-case-grid,.help-grid{grid-template-columns:1fr}.privacy-section,.faq-cta{flex-direction:column;align-items:flex-start;padding:24px}.privacy-section .button{margin-left:0}.panel{padding:20px 16px;border-radius:14px}.tabs{display:grid;grid-template-columns:repeat(4,1fr);width:100%}.tab{flex-direction:column;gap:3px;padding:0 4px;font-size:12px;min-height:54px}.qr-workflow-step small,.qr-workflow-line{display:none}.qr-workflow{justify-content:space-between}.qr-workflow-step{padding:6px 12px 6px 6px}.type-grid{grid-template-columns:repeat(4,1fr);gap:7px}.type-button{padding:11px 2px;font-size:11.5px}.color-controls,.template-library-tools{grid-template-columns:1fr}.settings-row{flex-direction:column;align-items:stretch}.settings-row select{width:100%}.workflow-actions .button{flex:1}.workflow-step-note{order:-1;flex-basis:100%}.scanner-actions .button{flex:1 1 100%}.support-chat{right:10px;left:10px;width:auto;bottom:80px}.support-launcher span:last-child{display:none}.support-launcher{padding:0 8px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Landing/generator mode switching */
body.generator-mode .hero,body.generator-mode .stats-strip,body.generator-mode .landing-section,body.generator-mode .footer,body.generator-mode .landing-nav a:not(.home-nav-link),body.generator-mode .header-cta{display:none}body.generator-mode .landing-nav{display:flex}
@media(max-width:980px){body.generator-mode .landing-nav{display:flex;margin-left:auto}}
/* Print */
.print-sheet{display:none}@media print{@page{size:auto;margin:12mm}body.printing-qr .app-shell,body.printing-sheet .app-shell,.support-launcher,.support-chat{display:none!important}body.printing-qr .print-sheet,body.printing-sheet .print-sheet{display:block;color:#111;background:#fff;font-family:Arial,sans-serif}.print-card{display:flex;flex-direction:column;align-items:center;text-align:center;break-inside:avoid}body.printing-qr .print-card{min-height:85vh;justify-content:center}.print-card img{image-rendering:pixelated}body.printing-qr .print-card img{width:min(75vw,120mm);margin:8mm 0}body.printing-sheet .print-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8mm}body.printing-sheet .print-card{border:1px solid #ddd;padding:6mm}body.printing-sheet .print-card img{width:48mm;height:48mm}.print-sheet-title{text-align:center}}
/* Template library v5 */
.template-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.chip{padding:6px 14px;border:1.5px solid var(--border);border-radius:999px;background:var(--surface);font-size:13px;font-weight:650;cursor:pointer}.chip:hover{border-color:var(--primary)}.chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.template-library-tools{grid-template-columns:1fr}
.template-grid{grid-template-rows:none;grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));grid-auto-columns:auto;max-height:310px;overflow-y:auto;overflow-x:hidden}
.template-card{position:relative}.template-card.selected:after{content:"✓";position:absolute;top:14px;right:14px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight:800}
.template-card:hover{transform:translateY(-2px)}
@media(max-width:640px){.template-grid{grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:116px;max-height:none;overflow-x:auto;overflow-y:hidden}}

/* ===== v6: typography, overflow fixes, guided generator, new hero ===== */
:root{--display:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
html,body{max-width:100%;overflow-x:clip}img,canvas,svg,video{max-width:100%}
body{font-family:var(--font);font-size:16px;line-height:1.65;font-feature-settings:"cv11","ss01";letter-spacing:-.003em}
h1,h2,h3,.brand,.stats-strip strong,.tab,.button{font-family:var(--display)}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}
.landing-section h2,.panel h2{letter-spacing:-.028em}.section-kicker{letter-spacing:.14em}.stats-strip strong{font-variant-numeric:tabular-nums}
.button{letter-spacing:-.005em}.feature-card h3,.step-card h3{font-size:19px;letter-spacing:-.02em}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(700px 380px at 15% -5%,rgba(124,58,237,.14),transparent 70%),radial-gradient(640px 360px at 95% 0,rgba(79,70,229,.15),transparent 70%)}
.hero:before{display:none}.app-shell{overflow-x:clip}
.topbar{margin:12px 0 0;padding:9px 12px 9px 14px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:var(--shadow)}
.panel,.workspace>*,.hero>*{min-width:0}.template-library{overflow:hidden}
/* Hero v6 */
.hero{padding:64px 0 48px;gap:48px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.hero h1{font-size:clamp(38px,5.4vw,68px);line-height:1.03;letter-spacing:-.045em;font-weight:800}
.eyebrow{text-decoration:none;transition:.15s}.eyebrow:hover{border-color:var(--primary)}.eyebrow .ui-icon{width:14px;height:14px;color:var(--primary)}
.hero-form{display:flex;align-items:center;gap:8px;max-width:560px;margin-top:30px;padding:7px 7px 7px 16px;border:1.5px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);transition:.2s}
.hero-form:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}.hero-form-icon{display:grid;color:var(--muted)}
.hero-form input{flex:1;min-width:0;min-height:46px;padding:0 6px;border:0;background:none;box-shadow:none!important;font-size:16px;color:var(--text)}.hero-form input:focus{outline:0;background:none;box-shadow:none}.hero-form .button{min-height:48px;flex:none;border-radius:13px}
.hero-card{width:min(390px,100%);padding:16px;border-radius:28px;transform:none;position:relative}
.hero-card-top{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 12px}.hero-dots{display:flex;gap:6px}.hero-dots i{width:10px;height:10px;border-radius:50%;background:var(--border)}.hero-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--muted)}.hero-live .status-dot{width:7px;height:7px;box-shadow:none}
canvas.hero-qr{display:block;width:100%;height:auto;aspect-ratio:1;padding:0;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px #0001}
.hero-controls{display:grid;gap:12px;margin-top:14px}.hero-styles{display:flex;flex-wrap:wrap;gap:6px}.hero-styles .chip{padding:5px 12px;font-size:12.5px}.hero-controls .hero-swatches{justify-content:flex-start}
.hero-swatches button{width:28px;height:28px}
.hero-visual:before{content:"";position:absolute;inset:8% 4%;border-radius:50%;background:radial-gradient(circle,var(--ring),transparent 68%);filter:blur(30px);opacity:.55;z-index:-1}
.chip-a{left:-4px}.chip-b{right:0}
/* Generator: stage layout */
.panel-sub{margin-top:6px;color:var(--muted);font-size:15px}.panel-heading h2{font-size:clamp(22px,3vw,28px)}
#createView[data-stage=content] .workspace:not(.photo-workspace){grid-template-columns:minmax(0,780px);justify-content:center}
#createView[data-stage=content] .workspace:not(.photo-workspace) .preview-panel,#createView[data-stage=download] .workspace:not(.photo-workspace) .editor-panel{display:none}
#createView[data-stage=download] .workspace:not(.photo-workspace){grid-template-columns:minmax(0,620px);justify-content:center}
#createView:not([data-stage=download]) .workspace:not(.photo-workspace) .download-actions,#createView:not([data-stage=download]) .workspace:not(.photo-workspace) .download-note,#createView:not([data-stage=download]) .workspace:not(.photo-workspace) .download-step-actions,#createView:not([data-stage=download]) .workspace:not(.photo-workspace) .format-tag{display:none}
.ready-banner{display:none;align-items:center;gap:12px;margin-top:16px;padding:13px 16px;border-radius:14px;background:var(--ok-bg);color:var(--ok)}.ready-banner .ui-icon{width:22px;height:22px}.ready-banner strong{display:block;font-family:var(--display)}.ready-banner span{font-size:13.5px}#createView[data-stage=download] .workspace:not(.photo-workspace) .ready-banner{display:flex}
.download-actions{grid-template-columns:1fr 1fr}.download-step-actions{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.type-picker-heading .field-label{margin-top:0}.input-tools{display:flex;align-items:center;gap:4px 8px;flex-wrap:wrap;margin-top:8px}.input-tools .text-button{padding:5px 8px}.char-count{margin-left:auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}.char-count.warn{color:var(--warn)}
#contentInput{min-height:54px;font-size:16px}
.content-summary{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface2)}.content-summary>div{flex:1;min-width:0;display:grid}.content-summary small{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted)}.content-summary span:not(.tool-icon){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:13.5px}
.design-group{margin:22px 0 0;padding:0;border:0;min-width:0}.design-group legend{padding:0;margin-bottom:4px;font-family:var(--display);font-size:17px;font-weight:750;letter-spacing:-.02em}
.opt-label{margin:14px 0 8px;font-size:13px;font-weight:700;color:var(--muted)}.opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.opt-btn{display:grid;justify-items:center;gap:6px;padding:8px 6px 7px;border:1.5px solid var(--border);border-radius:14px;background:var(--surface2);cursor:pointer;font-size:12.5px;font-weight:650;transition:.15s}.opt-btn canvas{width:56px;height:56px;border-radius:8px;background:#fff}.opt-btn:hover{border-color:var(--primary)}.opt-btn.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.swatch-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 4px}.swatch-row button{width:34px;height:34px;border-radius:50%;border:3px solid var(--surface);background:var(--c);box-shadow:0 0 0 1px var(--border);cursor:pointer;transition:.15s}.swatch-row button:hover{transform:scale(1.1)}.swatch-row button[aria-pressed=true]{box-shadow:0 0 0 2px var(--primary)}
.color-controls{grid-template-columns:repeat(3,1fr)}.eye-match{grid-column:1/-1;margin:0}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contrast-badge{display:inline-flex;margin-top:12px;padding:7px 13px;border-radius:999px;font-size:13px;font-weight:700}.contrast-badge.ok,.contrast-badge.good{background:var(--ok-bg);color:var(--ok)}.contrast-badge.bad{background:var(--err-bg);color:var(--err)}
.design-reset{margin-top:14px}.logo-control{margin-top:22px}
.template-grid{max-height:236px}.template-library{margin-bottom:0;margin-top:4px}
.workflow-actions{position:sticky;bottom:0;margin-top:24px;padding:14px 0 2px;background:linear-gradient(to top,var(--surface) 70%,transparent)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:90;padding:11px 20px;border-radius:999px;background:var(--text);color:var(--bg);font-size:14px;font-weight:650;box-shadow:var(--shadow-lg);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
.support-direct-message{display:inline-flex;align-items:center}
@media(max-width:980px){.hero{grid-template-columns:minmax(0,1fr)}.hero-form{margin-inline:auto;text-align:left}.hero-trust{justify-content:center}#createView[data-stage=design] .workspace:not(.photo-workspace) .preview-panel{order:-1;position:static}.topbar{margin-top:8px}}
@media(max-width:640px){.hero{padding-top:36px;gap:32px}.hero h1{font-size:clamp(34px,10.5vw,44px)}.hero-form{padding:6px 6px 6px 12px}.hero-form .button{padding:0 14px}.hero-form-icon{display:none}.hero-visual{min-height:0}.hero-card{width:100%}.color-controls{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}.opt-grid{grid-template-columns:repeat(3,1fr)}.download-actions{grid-template-columns:1fr}.workflow-actions .button-lg{flex:1}.workflow-actions .button:not(.button-primary){flex:0 0 auto}.landing-section{padding-top:48px}.stats-strip strong{font-size:24px}.topbar{border-radius:14px}.qr-stage{padding:20px 10px}.qr-frame{min-width:0;width:100%}#createView[data-stage=design] .workspace:not(.photo-workspace) .preview-panel{padding:16px}#createView[data-stage=design] .workspace:not(.photo-workspace) .qr-stage{padding:14px 8px}}
@media(max-width:380px){.brand{font-size:17px}.header-cta{display:none}.opt-grid{grid-template-columns:repeat(2,1fr)}}
.brand,.button,.header-cta,.theme-toggle,.tab{white-space:nowrap}.hero-title{font-family:var(--display);font-size:13px;font-weight:750;color:var(--text)}
.hero-chip.chip-a{top:-18px;left:22px;right:auto;bottom:auto}.hero-chip.chip-b{bottom:-18px;right:22px;left:auto;top:auto}
@media(max-width:640px){.brand{font-size:17px}.header-cta{padding:0 14px}.topbar{gap:10px}}

/* ===== v6.1: header, enhanced buttons, centered controls ===== */
.topbar{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 10px}
.brand{flex:none;gap:0}.brand-mark{width:42px;height:42px;border-radius:13px}.brand-mark .ui-icon{width:22px;height:22px}
.landing-nav{margin:0 auto 0 8px;gap:2px;min-width:0}.landing-nav+.header-actions,.header-actions{margin-left:auto}
.landing-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;text-align:center}.landing-nav a.active{color:var(--text);background:var(--surface2)}
.header-actions{gap:8px;flex:none}.header-cta{min-height:42px;padding:0 20px}
.theme-toggle{width:42px;height:42px;padding:0;justify-content:center;border-radius:13px}.theme-toggle-label{display:none}.theme-toggle .ui-icon{width:19px;height:19px}
.nav-toggle{display:none;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--border);border-radius:13px;background:var(--surface);cursor:pointer}.nav-bars{display:grid;gap:4px;width:18px}.nav-bars i{display:block;height:2px;border-radius:2px;background:var(--text);transition:.2s}
.nav-toggle[aria-expanded=true] .nav-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}.nav-toggle[aria-expanded=true] .nav-bars i:nth-child(2){opacity:0}.nav-toggle[aria-expanded=true] .nav-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.home-nav-link{gap:8px}
@media(max-width:980px){.nav-toggle{display:grid}.landing-nav{display:none;margin:0}.landing-nav.open{display:flex;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:10px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-lg);animation:fade .18s}.landing-nav.open a{justify-content:flex-start;min-height:48px;padding:0 16px;font-size:16px;border-radius:12px}
 body.generator-mode .nav-toggle{display:none}body.generator-mode .landing-nav{display:flex;margin:0 0 0 8px}}
@media(max-width:480px){.nav-text{display:none}body.generator-mode .home-nav-link{width:42px;padding:0}}
/* Enhanced buttons */
.button,.upload-button,.theme-toggle,.nav-toggle,.text-button,.mini-button,.chip,.tab,.type-button,.opt-btn,.template-card,.help-card,.use-case-card,.support-launcher{-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.button,.upload-button{min-height:46px;padding:0 24px;gap:10px;max-width:100%;line-height:1.1;text-align:center;border-radius:13px;font-weight:700;letter-spacing:-.01em;box-shadow:0 1px 2px rgba(16,18,50,.06)}
.button .ui-icon{width:18px;height:18px;flex:none}.button:hover:not(:disabled){box-shadow:0 8px 20px rgba(16,18,50,.12)}.button:active:not(:disabled){transform:scale(.97);box-shadow:none}
.button-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px var(--ring)}.button-primary:hover:not(:disabled){filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 28px var(--ring)}
.button:disabled{opacity:.45;box-shadow:none;filter:saturate(.6)}.button-lg{min-height:54px;padding:0 32px}.header-cta{min-height:42px;padding:0 20px}
.text-button,.mini-button{min-height:38px;padding:0 14px;justify-content:center;gap:7px;border-radius:11px;line-height:1.1}.text-button:hover{background:var(--primary-soft)}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 16px;line-height:1.1;text-align:center}.chip:active{transform:scale(.96)}
.type-button{justify-content:center;text-align:center;min-width:0;min-height:76px;line-height:1.2;overflow:hidden}.type-button:active,.opt-btn:active,.template-card:active{transform:scale(.97)}
.opt-btn{min-width:0;overflow:hidden;text-align:center}.opt-btn span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab{justify-content:center;text-align:center;line-height:1.1}.tab:active{transform:scale(.97)}
.qr-workflow-step{justify-content:flex-start;min-width:0}.qr-workflow-step:disabled{opacity:.5;cursor:not-allowed}.qr-workflow-step>div{min-width:0}
.workflow-actions{align-items:center}.workflow-actions .button{flex:none}.workflow-step-note{flex:1;text-align:center;min-width:0}
.workflow-actions:has(#contentNextBtn){justify-content:space-between}
.hero-form .button{padding:0 22px;min-height:48px}.hero-actions .button{justify-content:center}
.upload-button{justify-content:center}.logo-control .upload-button{min-height:42px;padding:0 18px}
.support-launcher{justify-content:center}.support-quick-actions button,.support-direct-message{min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;line-height:1}
.download-actions .button{width:100%}.history-actions .mini-button{flex:1 1 auto;min-width:84px}
.view>*,[data-step]:not([hidden]){animation:fade .25s}
@media(max-width:420px){.button{white-space:normal;padding:0 18px}.button-lg{padding:0 22px}.workflow-step-note{flex-basis:100%;order:-1}}
/* v6.2 mobile fit fixes */
.workflow-actions.content-step-actions{position:static;background:none;padding-top:0;flex-direction:column;align-items:stretch;gap:12px}.content-step-actions .workflow-step-note{order:-1;flex:none}.content-step-actions .button{width:100%}
.design-step-actions{background:var(--surface);border-top:1px solid var(--border);margin-inline:-4px;padding:12px 4px}
@media(max-width:640px){
 .qr-workflow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:none}.qr-workflow-line{display:none}
 .qr-workflow-step{justify-content:center;gap:8px;padding:8px 6px;border-radius:14px}.qr-workflow-step>span{width:26px;height:26px;font-size:13px;flex:none}.qr-workflow-step strong{font-size:13px}.qr-workflow-step small{display:none}
 .tab{position:relative}.tab .tiny-count{position:absolute;top:5px;right:6px;min-width:18px;height:18px;font-size:11px}
 .offline-notice{width:100%;justify-content:center;border-radius:14px}#connectionText{display:none}
 .workflow-actions:not(.content-step-actions){flex-wrap:wrap}.design-step-actions .workflow-step-note{order:-1;flex-basis:100%}.design-step-actions .button-lg{flex:1}
}
@media(max-width:640px){.qr-workflow-step{padding:7px 4px;gap:6px;overflow:hidden;min-width:0}.qr-workflow-step>span{width:22px;height:22px;font-size:12px}.qr-workflow-step strong{font-size:12px;letter-spacing:-.02em}}

/* ===== v7: overlap fixes, mobile, security checker, pattern & template upgrades ===== */
.topbar{top:8px;z-index:50;background:color-mix(in srgb,var(--surface) 96%,transparent)}
.topbar:before{content:"";position:absolute;left:-1px;right:-1px;top:-9px;height:9px;background:var(--bg);pointer-events:none}
main,.generator-app,.app-shell>section{position:relative;z-index:1}
.support-launcher{z-index:45}.support-chat{z-index:55}.toast{z-index:80}
/* Security report */
.sec-slot{margin-top:14px}.sec-slot:empty{display:none}
.sec-report{--sc:var(--ok);--sb:var(--ok-bg);border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden}
.sec-moderate{--sc:var(--warn);--sb:var(--warn-bg)}.sec-high,.sec-critical{--sc:var(--err);--sb:var(--err-bg)}
.sec-head{display:flex;align-items:center;gap:16px;padding:16px;background:var(--sb)}
.sec-ring{position:relative;display:grid;place-items:center;flex:none;width:68px;height:68px;border-radius:50%;background:conic-gradient(var(--sc) calc(var(--p)*1%),color-mix(in srgb,var(--sc) 18%,transparent) 0);color:var(--text)}
.sec-ring:before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--surface)}.sec-ring b,.sec-ring small{position:relative;line-height:1}.sec-ring b{font:800 20px var(--display);margin-top:6px}.sec-ring small{position:absolute;bottom:14px;font-size:9px;color:var(--muted)}
.sec-verdict{display:grid;min-width:0;gap:2px}.sec-verdict strong{font:800 18px var(--display);color:var(--sc);letter-spacing:-.02em}.sec-verdict span{font-size:13.5px;color:var(--text)}.sec-verdict em{font-style:normal;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-checks{list-style:none;margin:0;padding:6px 12px}.sec-checks li{display:flex;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border)}.sec-checks li:last-child{border-bottom:0}.sec-checks li div{display:grid;min-width:0;gap:1px}.sec-checks strong{font-size:14px}.sec-checks li span:not(.sec-ico){font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.sec-ico{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:800;margin-top:1px}
.st-pass .sec-ico{background:var(--ok-bg);color:var(--ok)}.st-warn .sec-ico{background:var(--warn-bg);color:var(--warn)}.st-fail .sec-ico{background:var(--err-bg);color:var(--err)}.st-info .sec-ico{background:var(--primary-soft);color:var(--primary)}
.sec-passed,.sec-tips{border-top:1px solid var(--border)}.sec-passed summary,.sec-tips summary{padding:12px 16px;cursor:pointer;font-size:13.5px;font-weight:700;color:var(--muted);list-style:none}.sec-passed summary:before,.sec-tips summary:before{content:"▸ ";color:var(--primary)}.sec-passed[open] summary:before,.sec-tips[open] summary:before{content:"▾ "}
.sec-tips ul{margin:0;padding:0 16px 14px 34px;font-size:13.5px;color:var(--muted)}.sec-tips li{margin:4px 0}
.sec-note{margin:0;padding:10px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}.sec-actions{padding:0 16px 14px}
.sec-pill{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;background:var(--ok-bg);color:var(--ok)}.sec-pill.sec-moderate{background:var(--warn-bg);color:var(--warn)}.sec-pill.sec-high,.sec-pill.sec-critical{background:var(--err-bg);color:var(--err)}
.pro-badge{margin-left:8px;padding:2px 8px;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;vertical-align:middle}
.security-panel{margin-top:22px}.sec-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.sec-toolbar .button{flex:0 1 auto}
.sec-empty{display:grid;justify-items:center;gap:4px;padding:30px 16px;border:1.5px dashed var(--border);border-radius:16px;color:var(--muted);text-align:center}.sec-empty strong{color:var(--text)}
#secInput{min-height:88px}
/* Pattern & template library */
.opt-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}.opt-btn span{font-size:12px}
.grad-toggle{margin-top:16px}.grad-controls{margin-top:6px}.swatch-row button[data-g1]{background:var(--c)}
.template-swatch{height:66px}.template-swatch canvas{width:54px;height:54px;border-radius:6px;box-shadow:0 0 0 1px #0001}.template-swatch:has(canvas) i{display:none}
.template-grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));max-height:340px;padding-right:4px}
.template-chips{max-width:100%}
/* Mobile responsiveness & overlap fixes */
@media(max-width:980px){
 #createView[data-stage=design] .workspace:not(.photo-workspace){display:flex;flex-direction:column;gap:14px}
 #createView[data-stage=design] .workspace:not(.photo-workspace) .preview-panel{position:sticky;top:76px;z-index:20;order:-1;padding:10px 12px;box-shadow:var(--shadow-lg)}
 #createView[data-stage=design] .workspace:not(.photo-workspace) .preview-panel .panel-heading,#createView[data-stage=design] .workspace:not(.photo-workspace) .preview-details,#createView[data-stage=design] .workspace:not(.photo-workspace) .scan-caption{display:none}
 #createView[data-stage=design] .workspace:not(.photo-workspace) .qr-stage{padding:10px;gap:0}#createView[data-stage=design] .workspace:not(.photo-workspace) .qr-frame{min-width:0;min-height:0;padding:8px;border-radius:14px}
 #createView[data-stage=design] .workspace:not(.photo-workspace) .qr-canvas>img:not(.qr-logo-overlay),#createView[data-stage=design] .workspace:not(.photo-workspace) .qr-canvas>canvas{max-height:132px;width:auto}
 #createView[data-stage=design] .workspace:not(.photo-workspace) .qr-placeholder{display:none}
}
@media(max-width:640px){
 .support-launcher{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:50px;height:50px;padding:0;justify-content:center}
 body:has(#createView.active[data-stage=design]) .support-launcher,body:has(#createView.active[data-stage=content]) .support-launcher{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
 .app-shell{padding-bottom:84px}
 .template-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-4px;padding:2px 4px 6px;scrollbar-width:none}.template-chips .chip{flex:none}
 .template-grid{grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:112px;max-height:none;overflow-x:auto;overflow-y:hidden}
 .template-library{padding:14px}.panel-heading{flex-wrap:wrap}.panel-heading .step-badge{order:-1}
 .sec-toolbar .button{flex:1 1 calc(50% - 5px);min-width:0}.sec-toolbar .text-button{flex:1 1 100%}
 .sec-head{padding:14px;gap:12px}.sec-ring{width:60px;height:60px}.sec-verdict strong{font-size:16px}
 .content-summary{flex-wrap:wrap}.content-summary .sec-pill{order:3}
 .history-item{grid-template-columns:auto minmax(0,1fr)}.history-actions .mini-button{flex:1 1 calc(50% - 4px)}
 .feature-grid,.use-case-grid{gap:12px}.feature-card{padding:20px}
 .qr-stage{padding:18px 10px}.download-actions{gap:8px}.bulk-panel .button,.scan-panel .button{width:100%}
 .opt-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.type-grid{gap:6px}
 .workflow-actions{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:360px){.opt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero h1{font-size:32px}.tab{font-size:11px}}
@media(max-width:640px){.template-grid{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;max-height:310px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.template-card{padding:8px}.template-swatch{height:58px}.template-swatch canvas{width:48px;height:48px}}
@media(max-width:980px){.workspace:not(.photo-workspace){align-items:stretch}.workspace>*{width:100%;max-width:100%}#createView[data-stage=design] .workspace:not(.photo-workspace) .preview-panel{width:100%}}
@media(max-width:640px){.toast{bottom:calc(96px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px);text-align:center}}
.sec-ring b{margin-top:-6px}.sec-ring small{bottom:13px}

/* ===== v8: Photo-to-QR, UX-first landing ===== */
html{scroll-padding-top:92px}
/* Photo-to-QR */
.photo-steps{display:flex;gap:8px;list-style:none;margin:0 0 18px;padding:0}.photo-steps li{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;padding:9px 6px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface2);font-size:13px;font-weight:700;color:var(--muted);text-align:center;transition:.2s}
.photo-steps li span{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--surface);font-size:12px}
.photo-steps li.is-current{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}.photo-steps li.is-current span{background:var(--primary);color:#fff}.photo-steps li.is-done{color:var(--ok)}.photo-steps li.is-done span{background:var(--ok);color:#fff}
.photo-upload-box{margin:0 0 16px}.photo-drop{display:grid;justify-items:center;gap:6px;padding:30px 16px;border:2px dashed var(--border);border-radius:18px;background:var(--surface2);text-align:center;cursor:pointer;transition:.2s}
.photo-drop:hover,.photo-upload-box.is-over .photo-drop{border-color:var(--primary);background:var(--primary-soft)}.photo-drop strong{font-family:var(--display);font-size:16px}.photo-drop span:not(.photo-drop-icon){font-size:13px;color:var(--muted)}
.photo-drop-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--surface);color:var(--primary);box-shadow:var(--shadow)}.photo-drop-icon .ui-icon{width:24px;height:24px}
.photo-preview-wrap{margin:0 0 16px}.photo-preview-wrap img{width:84px;height:84px}.photo-change{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-top:6px;padding:0 12px;min-height:34px;border:1px solid var(--border);color:var(--primary)}
.photo-panel .generate-button{width:100%;margin-top:18px}.photo-guidance{margin-top:8px}
.photo-workspace .download-actions{grid-template-columns:1fr 1fr 1fr}
@media(max-width:640px){.photo-workspace .download-actions{grid-template-columns:1fr}.photo-steps li{font-size:12px;padding:8px 4px;gap:5px}}
/* Hero quick types */
.hero-types{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:600px;margin-top:18px}.hero-types-label{font-size:13px;font-weight:700;color:var(--muted);margin-right:2px}
.type-chip{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 14px;border:1.5px solid var(--border);border-radius:999px;background:var(--surface);font-size:13.5px;font-weight:650;cursor:pointer;transition:.15s;line-height:1}.type-chip .ui-icon{width:16px;height:16px;color:var(--primary)}.type-chip:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow)}.type-chip:active{transform:scale(.97)}
.hero-trust{margin-top:22px}
@media(max-width:980px){.hero-types{justify-content:center;margin-inline:auto}.hero-types-label{flex-basis:100%;text-align:center}}
/* Security spotlight */
.security-spot{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.spot-copy h2{font-size:clamp(28px,3.6vw,42px)}.spot-copy>p:not(.section-kicker){margin-top:14px;color:var(--muted);font-size:17px}
.spot-list{list-style:none;margin:20px 0 26px;padding:0;display:grid;gap:12px}.spot-list li{display:flex;gap:10px;align-items:flex-start;font-weight:600}.spot-list .ui-icon{color:var(--ok);margin-top:3px}
.spot-demo{padding:24px;border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-lg)}.spot-demo .field-label{margin-top:0}
.spot-field input{min-height:52px;font-size:15px}.spot-demo .input-tools{margin-top:10px}.spot-demo .sec-slot{margin-top:16px}
@media(max-width:980px){.security-spot{grid-template-columns:minmax(0,1fr);gap:26px}}
@media(max-width:640px){.spot-demo{padding:16px;border-radius:18px}}
/* Reveal + mobile CTA */
.reveal-on .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}.reveal-on .reveal.in{opacity:1;transform:none}
.feature-card:nth-child(3n+2).reveal{transition-delay:.06s}.feature-card:nth-child(3n).reveal{transition-delay:.12s}
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:44;display:none;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--border)}.mobile-cta .button{width:100%}
@media(max-width:640px){.mobile-cta:not([hidden]){display:block}body.has-cta .support-launcher{bottom:calc(84px + env(safe-area-inset-bottom,0px))}body.has-cta .app-shell{padding-bottom:96px}}
/* Landing polish */
.landing-section{padding-top:88px}.landing-section-heading{margin-bottom:44px}.landing-section h2{font-size:clamp(28px,3.8vw,44px)}
.feature-card,.use-case-card,.step-card{transition:transform .2s,border-color .2s,box-shadow .2s}.feature-card:hover,.use-case-card:hover{box-shadow:var(--shadow-lg)}
.stats-strip{box-shadow:var(--shadow)}
@media(max-width:640px){.landing-section{padding-top:60px}.landing-section-heading{margin-bottom:28px}}

.hero-paste{flex:none;border:1px solid var(--border);background:var(--surface2)}.hero-form input::placeholder{color:var(--muted)}
@media(max-width:420px){.hero-paste .ui-icon{display:none}.hero-paste{padding:0 10px}}

/* ===== v9: clean, restrained UI (no glow, no gradients, tighter spacing) ===== */
:root{--r:12px;--primary:#4338ca;--primary2:#4338ca;--primary-soft:#eef0ff;--ring:rgba(67,56,202,.28);--shadow:0 1px 2px rgba(15,18,40,.05);--shadow-lg:0 8px 24px rgba(15,18,40,.10)}
[data-theme=dark]{--primary:#8b93ff;--primary2:#8b93ff;--primary-soft:#1f2347;--ring:rgba(139,147,255,.35);--shadow:none;--shadow-lg:0 8px 24px rgba(0,0,0,.45)}
body:before,.hero:before,.hero-visual:before{display:none}
body{font-size:15.5px;line-height:1.55;letter-spacing:0}
h1,h2,h3{letter-spacing:-.02em;font-weight:700}
.accent,.gradient-text{background:none;color:var(--primary);-webkit-text-fill-color:currentColor}
/* header */
.topbar{margin:8px 0 0;padding:6px 8px;border-radius:12px;box-shadow:none;backdrop-filter:none;background:var(--surface)}
.topbar:before{display:none}.brand-mark{width:38px;height:38px;border-radius:10px;background:var(--primary);box-shadow:none}.brand-mark .ui-icon{width:20px;height:20px}
.landing-nav a{min-height:36px;padding:0 12px;border-radius:8px;font-size:14px}.header-cta{min-height:38px;padding:0 16px}.theme-toggle,.nav-toggle{width:38px;height:38px;border-radius:10px}
/* buttons */
.button,.upload-button{min-height:42px;padding:0 18px;border-radius:10px;font-weight:600;letter-spacing:0;box-shadow:none}
.button:hover:not(:disabled){box-shadow:none;transform:none;border-color:var(--primary)}.button:active:not(:disabled){transform:scale(.98)}
.button-primary,[data-theme=dark] .button-primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:none}
[data-theme=dark] .button-primary{color:#0b0d1e}.button-primary:hover:not(:disabled){filter:none;background:color-mix(in srgb,var(--primary) 88%,#000);border-color:transparent;box-shadow:none}
.button-lg{min-height:48px;padding:0 24px;font-size:15.5px}.text-button,.mini-button{min-height:34px;border-radius:8px}.chip,.type-chip{min-height:34px}
/* surfaces */
.feature-card,.use-case-card,.showcase-card,.step-card,.help-card,.panel,.faq-item,.privacy-section,.stats-strip,.spot-demo,.hero-card,.sec-report,.template-library,.qr-stage,.content-summary{border-radius:var(--r);box-shadow:none}
.feature-card:hover,.use-case-card:hover,.showcase-card:hover,.help-card:hover{transform:none;box-shadow:none;border-color:var(--primary)}
.hero-chip,.step-badge,.live-pill,.format-tag,.pro-badge{display:none}
.tab.active,.qr-workflow-step.is-current>span,.qr-workflow-step.is-complete>span,.step-card>span{background:var(--primary);box-shadow:none;color:#fff}
[data-theme=dark] .tab.active,[data-theme=dark] .step-card>span{color:#0b0d1e}[data-theme=dark] .tab.active .tiny-count{color:#0b0d1e}
.feature-icon,.use-case-icon,.help-icon,.tool-icon{width:38px;height:38px;border-radius:10px}.feature-icon .ui-icon,.use-case-icon .ui-icon,.help-icon .ui-icon{width:19px;height:19px}
.privacy-section{background:var(--surface2)}.privacy-promo-icon{display:none}
.faq-cta{background:var(--primary);border-radius:var(--r)}[data-theme=dark] .faq-cta{color:#0b0d1e}.faq-cta .button{background:#fff;color:#1e1b4b}
.support-launcher{background:var(--primary);box-shadow:var(--shadow-lg);min-height:44px;padding:0 16px 0 6px}[data-theme=dark] .support-launcher{color:#0b0d1e}
.support-launcher>span:first-child{width:30px;height:30px}
/* hero */
.hero{padding:28px 0 20px;gap:32px}.hero h1{font-size:clamp(32px,4.6vw,54px);line-height:1.08;font-weight:750;letter-spacing:-.035em}.hero-copy{margin-top:14px;font-size:17px;max-width:520px}
.hero-form{margin-top:20px;padding:5px 5px 5px 14px;border-radius:12px;box-shadow:none}.hero-form:focus-within{box-shadow:0 0 0 3px var(--ring)}.hero-form .button{min-height:42px;border-radius:9px}
.hero-types{margin-top:12px;gap:6px}.hero-trust{margin-top:14px;gap:6px 18px;font-size:13.5px}
.hero-card{transform:none;padding:14px}.hero-visual{min-height:0}canvas.hero-qr{border-radius:10px}
.hero-card-top{padding-bottom:8px}.hero-controls{margin-top:10px;gap:10px}
/* tight spacing */
.stats-strip{margin:4px 0 8px}.stats-strip div{padding:14px 10px}.stats-strip strong{font-size:24px;font-weight:700}
.landing-section{padding-top:52px}.landing-section-heading{margin:0 auto 24px}.landing-section-heading p:last-child{margin-top:8px;font-size:15.5px}.landing-section h2,.panel h2{font-size:clamp(24px,3vw,32px)}
.feature-grid,.use-case-grid,.showcase-grid,.steps-grid,.help-grid{gap:12px}.feature-card,.use-case-card,.showcase-card,.help-card{padding:18px}.step-card{padding:18px;gap:14px}.feature-card h3,.step-card h3{margin:12px 0 4px;font-size:17px;font-weight:650}
.security-spot{gap:28px}.spot-demo{padding:18px}.spot-list{margin:14px 0 18px;gap:8px}
.privacy-section{margin-top:40px;padding:20px;gap:18px}.faq-cta{margin-top:24px;padding:22px}.footer{margin-top:32px;padding-top:18px}
.faq-item summary{padding:14px 18px}.faq-item p{padding:0 18px 16px}
/* generator spacing */
.generator-app{padding-top:12px}.tabs{margin-bottom:12px;padding:4px;border-radius:12px;box-shadow:none}.tab{min-height:40px;border-radius:9px;box-shadow:none}
.offline-notice{margin-bottom:12px;padding:6px 12px}.qr-workflow{margin-bottom:14px}.qr-workflow-step{padding:6px 12px 6px 6px}
.panel{padding:20px}.panel-heading,.history-heading{margin-bottom:14px}.panel h2{font-size:22px}.panel-sub{font-size:14px}.workspace{gap:14px}
.field-label{margin:12px 0 5px;font-size:13.5px}input[type=text],input[type=url],input[type=email],input[type=tel],input[type=search],textarea,select{min-height:44px;border-radius:10px}
.type-button{min-height:68px;border-radius:10px}.opt-btn{border-radius:10px}.design-group{margin-top:16px}.settings-divider{margin:16px 0}
.template-library{padding:14px}.template-card{border-radius:10px}.logo-control{margin-top:16px;padding:12px}
.workflow-actions{margin-top:16px}.qr-stage{padding:18px}.qr-frame{border-radius:14px;box-shadow:none}
.sec-head{padding:14px}.sec-ring{width:60px;height:60px}.sec-verdict strong{font-size:17px}
.history-item{padding:12px;border-radius:10px}.history-list{gap:8px;margin:12px 0}
/* Help Center */
.support-chat{width:min(380px,100vw - 24px);height:min(560px,100dvh - 100px);border-radius:14px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;bottom:76px}
.support-chat-header{background:var(--primary);padding:14px 16px}[data-theme=dark] .support-chat-header{color:#0b0d1e}[data-theme=dark] .support-chat-header button{color:#0b0d1e;background:#0001}
.support-chat-header>div{display:grid;grid-template-columns:1fr}.support-chat-header small{grid-column:1}.support-status-dot{display:none}
.help-scroll{flex:1;overflow-y:auto;background:var(--bg);padding:10px}.help-home{display:grid;gap:6px}
.help-topic{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);text-align:left;cursor:pointer;transition:border-color .15s}.help-topic:hover{border-color:var(--primary)}
.help-topic>span:nth-child(2){flex:1;min-width:0;display:grid}.help-topic strong{font-size:14.5px}.help-topic small{font-size:12.5px;color:var(--muted)}
.help-topic-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:9px;background:var(--primary-soft);color:var(--primary)}.help-topic-icon .ui-icon{width:17px;height:17px}.help-chev{color:var(--muted);font-size:20px}
.help-article{padding:6px 4px}.help-back{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;margin-bottom:6px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-weight:600;cursor:pointer}
.help-article h3{font-size:19px;margin:6px 0 10px}.help-steps{margin:0;padding-left:20px;display:grid;gap:8px}.help-tip{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--primary-soft);font-size:13.5px}
.help-report{margin:14px 0 10px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto}
.help-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface);font-size:13.5px;color:var(--muted)}.help-foot .button{min-height:38px}
@media(max-width:640px){.hero{padding-top:16px}.landing-section{padding-top:40px}.panel{padding:14px}.support-chat{left:10px;right:10px;width:auto;bottom:70px;height:min(560px,100dvh - 90px)}.feature-card,.use-case-card,.showcase-card,.help-card,.step-card{padding:14px}.stats-strip div{padding:10px 6px}}

/* ===== v10: design system — spacing scale, type scale, alignment, contrast ===== */
:root{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--fs-xs:12px;--fs-sm:13.5px;--fs-md:15.5px;--fs-lg:18px;--fs-xl:clamp(24px,3vw,32px);--fs-2xl:clamp(32px,4.6vw,54px)}
[data-theme=dark]{--border:#2f3558;--muted:#adb3d1}
/* type hierarchy: one clear step between display, heading, subheading, body, caption */
body{font-size:var(--fs-md);line-height:1.55}
h1{font-size:var(--fs-2xl);font-weight:750;line-height:1.08;letter-spacing:-.035em}
h2{font-size:var(--fs-xl);font-weight:700;line-height:1.15;letter-spacing:-.02em}
h3{font-size:var(--fs-lg);font-weight:650;line-height:1.25;letter-spacing:-.01em}
.landing-section h2,.panel h2{font-size:var(--fs-xl)}.panel h2{font-size:22px}
.section-kicker{margin:0 0 var(--sp-2);font-size:var(--fs-xs);font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
.field-label{font-size:var(--fs-sm);font-weight:600}.field-hint,small{font-size:var(--fs-sm);line-height:1.45}
p{color:inherit}.hero-copy,.landing-section-heading p:last-child,.panel-sub,.feature-card p,.step-card p{color:var(--muted)}
/* alignment: one left edge for headings and content, same on every screen size */
:where([data-icon]){display:inline-flex;align-items:center;justify-content:center;line-height:0}.ui-icon{display:block;flex:none}
.landing-section-heading{margin:0 0 var(--sp-5);max-width:640px;text-align:left}
.landing-section{padding-top:var(--sp-8)}
.faq-list{max-width:none;margin:0}.faq-cta{max-width:none;margin:var(--sp-5) 0 0}
.feature-card,.use-case-card,.step-card,.showcase-card,.help-card{text-align:left;align-items:flex-start}
@media(max-width:980px){.hero{text-align:left}.hero-copy{margin-inline:0}.hero-actions,.hero-trust,.hero-types{justify-content:flex-start}.hero-form{margin-inline:0}.hero-types-label{flex-basis:auto}}
@media(max-width:640px){.landing-section{padding-top:var(--sp-7)}.landing-section-heading{margin-bottom:var(--sp-4)}}
/* centered icon controls */
.theme-toggle{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;gap:0}.theme-toggle-label{display:none}
.nav-toggle{display:none;place-items:center}.brand-mark{display:grid;place-items:center}
.support-launcher{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 18px 0 8px;line-height:1}
.support-launcher>.launcher-icon:first-child{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);font-size:15px;font-weight:800;line-height:1}
.launcher-label{line-height:1}
@media(max-width:980px){.nav-toggle{display:grid}body.generator-mode .nav-toggle{display:none}}
@media(max-width:640px){.support-launcher{width:48px;height:48px;padding:0;gap:0;border-radius:50%}.support-launcher>.launcher-icon:first-child{width:48px;height:48px;background:none;font-size:20px}.support-launcher .launcher-label{display:none}}
/* contrast: one strong action per area, quieter secondary and tertiary actions */
.button:not(.button-primary){background:var(--surface);color:var(--text);border-color:var(--border)}.text-button{color:var(--muted)}.text-button:hover{color:var(--primary)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
.section-kicker,.type-row-best em{color:var(--primary)}[data-theme=dark] .type-row-best em{color:var(--text)}
/* consistency: shared radius, border and control height */
input[type=text],input[type=url],input[type=email],input[type=tel],input[type=search],textarea,select{border-width:1px;min-height:44px}
/* new landing sections */
.type-table{display:grid;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden}
.type-row{display:grid;grid-template-columns:36px minmax(0,1.2fr) minmax(0,1fr) 20px;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);border:0;border-bottom:1px solid var(--border);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.type-row:last-child{border-bottom:0}.type-row:hover{background:var(--surface2)}
.type-row-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary)}
.type-row-main{display:grid;gap:2px;min-width:0}.type-row-main strong{font-size:var(--fs-md)}.type-row-main small,.type-row-best{color:var(--muted);font-size:var(--fs-sm)}
.type-row-best em{display:block;margin-bottom:2px;font-style:normal;font-size:var(--fs-xs);font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.type-row-go{display:grid;place-items:center;color:var(--muted)}.type-row:hover .type-row-go{color:var(--primary)}
.spec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.spec-card{padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.spec-num{display:block;margin-bottom:var(--sp-3);font:700 28px/1 var(--display);letter-spacing:-.03em;color:var(--primary)}
.spec-card strong{display:block;font-size:var(--fs-lg)}.spec-card p{margin-top:var(--sp-1);color:var(--muted);font-size:var(--fs-sm)}
.tip-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.tip-list li{display:flex;gap:var(--sp-3);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.tip-n{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;font:700 13px/1 var(--display)}[data-theme=dark] .tip-n{color:#0b0d1e}
.tip-list strong{display:block}.tip-list p{margin-top:2px;color:var(--muted);font-size:var(--fs-sm)}
.check-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--sp-4)}.check-tags span{padding:5px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:var(--fs-xs);font-weight:600}
.footer{display:block;margin-top:var(--sp-7);padding-top:var(--sp-6)}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.footer-brand strong{font:700 var(--fs-lg) var(--display);color:var(--text)}.footer-brand p{margin-top:var(--sp-2);max-width:300px;font-size:var(--fs-sm)}
.footer-col{display:grid;align-content:start;gap:var(--sp-2)}.footer-col h3{margin:0 0 var(--sp-1);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.footer-col a{color:var(--muted);text-decoration:none;font-size:var(--fs-sm);font-weight:500}.footer-col a:hover{color:var(--primary)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-5);padding:var(--sp-4) 0;border-top:1px solid var(--border);font-size:var(--fs-sm)}
@media(max-width:900px){.spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.type-row{grid-template-columns:36px minmax(0,1fr) 20px}.type-row-best{display:none}.tip-list{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:520px){.spec-grid{gap:var(--sp-2)}.spec-card{padding:var(--sp-3)}.spec-num{font-size:22px;margin-bottom:var(--sp-2)}.spec-card strong{font-size:var(--fs-md)}}

/* ===== v11: logo fix, V9 landing layout restored, mobile-first, professional polish ===== */
.qr-canvas{position:relative;display:inline-block;line-height:0;max-width:100%}
.qr-canvas>img:not(.qr-logo-overlay),.qr-canvas>canvas{display:block;max-width:100%;height:auto}
.qr-canvas .qr-logo-overlay{position:absolute;top:50%;left:50%;width:22%;height:22%;max-width:none;max-height:none;object-fit:contain;transform:translate(-50%,-50%);padding:3px;border-radius:8px;background:#fff;box-sizing:border-box}
/* V9 landing layout */
.landing-section{padding-top:56px}.landing-section-heading{max-width:680px;margin:0 auto 28px;text-align:center}
.faq-list{max-width:820px;margin:0 auto}.faq-cta{max-width:820px;margin:24px auto 0}
@media(max-width:980px){.hero{text-align:center}.hero-copy{margin-inline:auto}.hero-form{margin-inline:auto}}
@media(max-width:640px){.landing-section{padding-top:44px}}
/* professional polish */
.hero{padding:44px 0 24px;gap:56px}.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.06;letter-spacing:-.04em}
.hero-copy{max-width:500px;font-size:18px;line-height:1.55}
.hero-form{max-width:540px;min-height:60px;margin-top:28px;padding:6px 6px 6px 16px;border-radius:14px;box-shadow:0 1px 2px rgba(15,18,40,.05),0 10px 28px -8px rgba(15,18,40,.14)}
[data-theme=dark] .hero-form{box-shadow:0 10px 28px -8px rgba(0,0,0,.5)}
.hero-form .button{min-height:46px;padding:0 22px}
.hero-card{padding:12px 12px 14px;border-radius:18px;box-shadow:0 1px 2px rgba(15,18,40,.05),0 28px 56px -16px rgba(15,18,40,.22)}
[data-theme=dark] .hero-card{box-shadow:0 28px 56px -16px rgba(0,0,0,.6)}
.hero-card-top{margin:0 -12px 12px;padding:0 14px 10px;border-bottom:1px solid var(--border)}.hero-dots{display:flex;gap:6px}.hero-dots i{display:block;width:9px;height:9px;border-radius:50%;background:var(--border)}
.stats-strip{margin:28px 0 0;border-radius:14px}.stats-strip div{padding:18px 12px}.stats-strip strong{font-size:26px;letter-spacing:-.02em}.stats-strip span{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.landing-section-heading h2{margin-bottom:0}.landing-section-heading p:last-child{max-width:520px;margin-inline:auto}
.feature-card,.use-case-card,.step-card,.showcase-card,.help-card{padding:22px;border-radius:14px}
.feature-card h3,.step-card h3{font-size:17px}.use-case-card strong{font-size:17px}
.use-case-card small{font-size:14px;color:var(--muted)}.use-case-card em{font-weight:600}
.faq-item{border-radius:12px}.faq-item summary{font-weight:600}.faq-item summary:hover{color:var(--primary)}
.faq-cta{border-radius:16px;padding:28px}
/* footer */
.footer{padding-inline:4px}
/* mobile-first experience */
@media(max-width:640px){
 input,select,textarea{font-size:16px}
 .chip,.type-chip{min-height:40px}.text-button,.mini-button{min-height:40px}.button{min-height:46px}
 .hero{padding:24px 0 8px;gap:28px}.hero h1{font-size:clamp(32px,9.5vw,40px)}.hero-copy{font-size:16.5px}
 .hero-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;margin-top:22px}.hero-form-icon{display:none}.hero-form input{grid-column:1/-1;min-height:48px;padding:0 6px;border-bottom:1px solid var(--border);border-radius:0}
 .hero-form .button,.hero-paste{width:100%;min-height:46px}.hero-paste .ui-icon{display:inline-block}
 .stats-strip{margin-top:20px}.stats-strip div{padding:14px 8px}.stats-strip strong{font-size:22px}.stats-strip span{font-size:11px}
 .feature-card,.use-case-card,.step-card,.showcase-card,.help-card{padding:18px}
 .footer{padding:var(--sp-6) var(--sp-4) calc(var(--sp-7) + env(safe-area-inset-bottom,0px))}.footer-grid{gap:var(--sp-5) var(--sp-4)}.footer-col a{display:flex;align-items:center;min-height:36px}.footer-bottom{flex-direction:column;gap:6px}
 body.has-cta .footer{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
 body.generator-mode .tabs{position:fixed;left:0;right:0;bottom:0;z-index:48;width:100%;margin:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));border:0;border-top:1px solid var(--border);border-radius:0;background:var(--surface);gap:4px}
 body.generator-mode .tab{min-height:54px;font-size:11.5px}
 body.generator-mode .app-shell{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
 body.generator-mode .support-launcher{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
 body.generator-mode .toast{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
 body.generator-mode .workflow-actions{bottom:calc(68px + env(safe-area-inset-bottom,0px))}
 body.generator-mode .workflow-actions.content-step-actions{bottom:auto}
 .support-chat{left:0;right:0;bottom:0;width:100%;height:min(80dvh,620px);border-radius:16px 16px 0 0;border-bottom:0}
 .support-chat-header{padding:14px 16px}.help-topic{min-height:56px}.help-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
 .template-card{min-height:112px}.opt-btn{min-height:84px}.type-button{min-height:72px}
}
/* v11 fixes: summary layout and Help button clearance */
.content-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 12px}
.content-summary>div{grid-column:2;grid-row:1}.content-summary #editContentBtn{grid-column:3;grid-row:1}.content-summary .sec-pill{grid-column:2/-1;grid-row:2;justify-self:start}.content-summary .tool-icon{grid-row:1}
.sec-pill[hidden]{display:none}
@media(max-width:640px){body.generator-mode:has(#createView.active[data-stage=design]) .support-launcher{bottom:calc(150px + env(safe-area-inset-bottom,0px))!important}}

/* ===== v12: plans, pricing, GCash checkout, locks ===== */
.plan-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.plan-chip:hover{border-color:var(--primary)}.plan-chip[data-plan=plus],.plan-chip[data-plan=pro]{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.nav-plan{display:none}
@media(max-width:980px){.nav-plan{display:flex;align-items:center;min-height:48px;padding:0 16px;border:0;border-radius:12px;background:none;font:600 16px var(--font);color:var(--muted);text-align:left;cursor:pointer}body.generator-mode .nav-plan{display:none}}
@media(max-width:640px){.plan-chip{width:38px;padding:0}.plan-chip-label{display:none}}
.tier-badge{display:inline-flex;align-items:center;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.6;vertical-align:middle}
body[data-plan=plus] .tier-badge[data-tier=plus],body[data-plan=pro] .tier-badge{display:none}
.template-card .tier-badge{position:absolute;top:6px;right:6px;margin:0;display:none}.template-card.is-locked .tier-badge{display:inline-flex}.template-card.is-locked canvas{opacity:.5}
.opt-btn{position:relative}.opt-btn .lock-dot{display:none;position:absolute;top:5px;right:5px;width:17px;height:17px;border-radius:50%;background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/10px no-repeat}
.opt-btn.is-locked .lock-dot{display:block}.opt-btn.is-locked canvas{opacity:.5}
/* modal */
body.bill-open{overflow:hidden}
.bill-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px}.bill-modal[hidden]{display:none}
.bill-backdrop{position:absolute;inset:0;background:rgba(10,12,28,.55)}
.bill-sheet{position:relative;display:flex;flex-direction:column;width:min(920px,100%);max-height:min(90dvh,860px);border:1px solid var(--border);border-radius:16px;background:var(--bg);box-shadow:var(--shadow-lg);overflow:hidden;animation:fade .2s}
.bill-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border)}.bill-head h2{font-size:18px}
.bill-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:22px;line-height:1;cursor:pointer}
.bill-body{padding:18px;overflow-y:auto}
.bill-note{margin:0 0 14px;padding:10px 14px;border-radius:10px;background:var(--primary-soft);color:var(--text);font-size:14px;font-weight:500}
.bill-foot{margin:16px 0 0;text-align:center;color:var(--muted);font-size:13.5px}.bill-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.period-toggle{display:flex;width:max-content;max-width:100%;margin:0 auto 18px;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.period-toggle button{min-height:36px;padding:0 16px;border:0;border-radius:8px;background:none;color:var(--muted);font-weight:600;cursor:pointer}
.period-toggle button[aria-pressed=true]{background:var(--primary);color:#fff}[data-theme=dark] .period-toggle button[aria-pressed=true]{color:#0b0d1e}
.period-toggle em{margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:11px;font-style:normal;font-weight:700}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.plan-card{position:relative;display:flex;flex-direction:column;padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.plan-card.is-popular{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.plan-flag{position:absolute;top:-11px;left:16px;padding:2px 10px;border-radius:999px;background:var(--primary);color:#fff;font-size:11px;font-weight:700}[data-theme=dark] .plan-flag{color:#0b0d1e}
.plan-card h3{font-size:17px}.plan-price{display:flex;align-items:baseline;gap:6px;margin:8px 0 0}.plan-price strong{font:700 32px/1 var(--display);letter-spacing:-.03em}.plan-price span{color:var(--muted);font-size:13.5px}.plan-sub{display:block;min-height:18px;margin-top:2px;color:var(--muted)}
.plan-list{flex:1;display:grid;gap:8px;margin:14px 0 18px;padding:0;list-style:none}.plan-list li{position:relative;padding-left:22px;font-size:14px}.plan-list li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
.plan-card .button{width:100%}.pricing-note{margin:16px 0 0;text-align:center;color:var(--muted);font-size:13.5px}
.co-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.co-summary small{display:block;color:var(--muted)}.co-summary b{font:700 24px var(--display)}
.bill-warn{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-size:13.5px}
.gcash-box{margin-top:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}.gcash-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border)}.gcash-head small{color:var(--muted)}
.gcash-badge{padding:3px 10px;border-radius:6px;background:#007cff;color:#fff;font-weight:800;font-size:13px}
.gcash-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:center;padding:14px}.gcash-grid:has(.gcash-qr){grid-template-columns:128px minmax(0,1fr)}.gcash-qr{width:128px;height:128px;border-radius:10px;background:#fff;object-fit:contain}
.gcash-details{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:center;margin:0}.gcash-details dt{color:var(--muted);font-size:13px}.gcash-details dd{display:flex;align-items:center;gap:8px;margin:0;font-weight:650;overflow-wrap:anywhere}.gcash-details dd span{flex:1;min-width:0}
.co-steps{display:grid;gap:6px;margin:14px 0 0;padding-left:20px;font-size:14px}
.bill-submit{width:100%;margin-top:14px}
.status-card,.acct-card{margin-bottom:14px;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.status-card h3,.acct-card h3{margin:8px 0 4px}.status-card p,.acct-card p{margin:0;color:var(--muted)}
.status-dot-lg{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 5px var(--warn-bg)}
.status-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:14px 0 0}.status-meta dt{color:var(--muted);font-size:13px}.status-meta dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.acct-plan{display:inline-block;padding:3px 12px;border-radius:999px;background:var(--primary);color:#fff;font-size:12px;font-weight:700}[data-theme=dark] .acct-plan{color:#0b0d1e}.acct-soon{color:var(--warn)!important}
.acct-list{margin:0 0 16px}.acct-actions{display:flex;flex-wrap:wrap;gap:8px}
/* brand kit */
.brand-kit{margin-top:16px;padding:14px;border:1px solid var(--border);border-radius:12px}.brand-kit-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand-kit-head small{display:block;color:var(--muted)}
.kit-list{display:grid;gap:6px;margin-top:10px}.kit-item{display:flex;align-items:center;gap:8px}.kit-apply{display:flex;flex:1;align-items:center;gap:10px;min-height:42px;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);text-align:left;cursor:pointer}.kit-apply:hover{border-color:var(--primary)}
.kit-swatch{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 0 1px var(--border)}
@media(max-width:820px){.plan-grid{grid-template-columns:minmax(0,1fr)}.plan-card.is-popular{order:-1}}
@media(max-width:640px){.bill-modal{padding:0;align-items:end}.bill-sheet{width:100%;max-height:92dvh;border-radius:16px 16px 0 0;border-bottom:0}.bill-body{padding:14px 14px calc(20px + env(safe-area-inset-bottom,0px))}.gcash-grid:has(.gcash-qr){grid-template-columns:minmax(0,1fr);justify-items:center}.gcash-details{width:100%}.brand-kit-head{flex-wrap:wrap}.period-toggle{width:100%}.period-toggle button{flex:1}}

/* ===== v13: account pages, compact nav, usage notes ===== */
body.auth-mode .hero,body.auth-mode .stats-strip,body.auth-mode .landing-section,body.auth-mode .footer,body.auth-mode #generatorApp,body.auth-mode .mobile-cta{display:none!important}
.auth-view{padding:28px 0 8px}.auth-view[hidden]{display:none}
.auth-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);max-width:960px;margin:0 auto;border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden}
.auth-aside{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:36px;background:var(--primary);color:#fff}
.auth-aside .section-kicker{color:rgba(255,255,255,.8);margin:0}.auth-aside h2{font-size:26px;color:#fff}
.auth-perks{display:grid;gap:12px;margin:8px 0 0;padding:0;list-style:none}.auth-perks li{position:relative;padding-left:26px;font-size:15px;color:rgba(255,255,255,.95)}.auth-perks li:before{content:"✓";position:absolute;left:0;font-weight:800}
.auth-aside-foot{margin-top:auto;padding-top:16px;font-size:13.5px;color:rgba(255,255,255,.8)}
[data-theme=dark] .auth-aside{background:#232a5c}
.auth-main{padding:32px;display:flex;flex-direction:column;gap:14px;min-width:0}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--surface2)}
.auth-tabs button{min-height:40px;border:0;border-radius:8px;background:none;color:var(--muted);font-weight:600;cursor:pointer}.auth-tabs button[aria-selected=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(15,18,40,.12)}
.auth-view[data-mode=forgot] .auth-tabs,.auth-view[data-mode=reset] .auth-tabs{display:none}
.auth-main h1{font-size:26px;margin:4px 0 0}.auth-sub{margin:0;color:var(--muted);font-size:15px}
.google-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:600 15.5px var(--font);cursor:pointer;transition:border-color .15s,background .15s}.google-btn:hover{border-color:var(--primary);background:var(--surface2)}
.auth-view[data-mode=forgot] .google-btn,.auth-view[data-mode=reset] .google-btn,.auth-view[data-mode=forgot] .auth-or,.auth-view[data-mode=reset] .auth-or{display:none}
.auth-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}.auth-or:before,.auth-or:after{content:"";flex:1;height:1px;background:var(--border)}
#authForm{display:grid;gap:12px}.auth-field{display:grid;gap:6px}.auth-field label{font-size:13.5px;font-weight:600}
[data-show]{display:none}.auth-view[data-mode=signup] [data-show=signup],.auth-view[data-mode=login] [data-show=login]{display:grid}.auth-view[data-mode=signup] p[data-show=signup]{display:block}
.auth-view[data-mode=reset] [data-hide=reset],.auth-view[data-mode=forgot] [data-hide=forgot]{display:none}
.pw-field{position:relative}.pw-field input{padding-right:70px}.pw-field button{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:34px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--primary);font-weight:600;cursor:pointer}
.auth-row{justify-content:flex-end}.link-btn{padding:0;border:0;background:none;color:var(--primary);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.auth-switch{margin:0;text-align:center;color:var(--muted);font-size:14px}
/* compact nav */
.nav-more{position:relative}.nav-more-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--muted);font:600 14px var(--font);cursor:pointer}.nav-more-btn:hover,.nav-more.open .nav-more-btn{color:var(--text);background:var(--surface2)}
.caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}.nav-more.open .caret{transform:translateY(1px) rotate(-135deg)}
.nav-more-menu{position:absolute;left:0;top:calc(100% + 8px);z-index:60;display:none;min-width:200px;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-lg)}.nav-more.open .nav-more-menu{display:grid}
.nav-more-menu a{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:8px}
.nav-auth-mobile{display:none}.header-cta{display:none}body.is-authed .header-cta{display:inline-flex}
.auth-actions{display:flex;gap:8px}.auth-actions[hidden],.user-menu[hidden]{display:none}.auth-actions .button{min-height:38px;padding:0 16px}
.user-menu{position:relative}.avatar-btn{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--primary);color:#fff;font-weight:700;overflow:hidden;cursor:pointer}[data-theme=dark] .avatar-btn{color:#0b0d1e}.avatar-btn img{width:100%;height:100%;object-fit:cover}
.user-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:230px;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-lg)}.user-pop[hidden]{display:none}
.user-pop-head{display:grid;gap:2px;padding:10px 12px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}.user-pop-head small{color:var(--muted);overflow-wrap:anywhere}.user-pop-head em{font-style:normal;font-size:12px;font-weight:700;color:var(--primary)}
.user-pop button{display:flex;align-items:center;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--text);font:600 14px var(--font);text-align:left;cursor:pointer}.user-pop button:hover{background:var(--surface2)}
.usage-note{margin:10px 0 0;text-align:center;font-size:13px;color:var(--muted)}
body.generator-mode .nav-more,body.generator-mode .nav-plan,body.generator-mode .nav-auth-mobile{display:none}
@media(max-width:980px){
 .nav-more{display:block}.nav-more-btn{width:100%;justify-content:space-between;min-height:48px;padding:0 16px;font-size:16px;border-radius:12px}
 .nav-more-menu{position:static;min-width:0;padding:0 0 0 12px;border:0;box-shadow:none;background:none}.nav-more-menu a{min-height:44px;font-size:15px;color:var(--muted)}
 .landing-nav.open .nav-auth-mobile{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;padding:12px 4px 4px;border-top:1px solid var(--border)}.nav-auth-mobile .button{min-height:46px}.nav-auth-mobile #navLogout{grid-column:1/-1}
 .auth-actions .auth-login{display:none}
 .auth-card{grid-template-columns:minmax(0,1fr);max-width:520px}.auth-aside{display:none}.auth-main{padding:22px 18px}.auth-view{padding-top:16px}
}
@media(max-width:640px){.header-cta,body.is-authed .header-cta{display:none}.auth-actions .button{min-height:38px;padding:0 14px;font-size:14px}.auth-main h1{font-size:23px}}
input[type=password]{width:100%;min-height:44px;padding:11px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--text);transition:border-color .15s,box-shadow .15s}
input[type=password]:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring);background:var(--surface)}
.auth-main .help-back{align-self:flex-start;margin:0}
@media(max-width:640px){input[type=password]{font-size:16px}}

/* ===== v14: spacing system per element, legal pages, cookie notice, stricter forms ===== */
:root{--gap-xs:4px;--gap-sm:8px;--gap-md:16px;--gap-lg:24px;--gap-xl:32px;--gap-2xl:48px;--gap-3xl:64px;--pad-card:24px;--measure:62ch}
.skip-link{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:8px;background:var(--primary);color:#fff;font-weight:600;text-decoration:none;transition:top .15s}.skip-link:focus{top:12px}[data-theme=dark] .skip-link{color:#0b0d1e}
/* 1. Section rhythm: big gaps between sections, small gaps inside groups */
.landing-section{padding-top:var(--gap-3xl)}
.landing-section-heading{margin:0 auto var(--gap-xl)}.landing-section-heading .section-kicker{margin-bottom:var(--gap-sm)}.landing-section-heading h2{margin:0}.landing-section-heading p:last-child{margin-top:var(--gap-md);max-width:var(--measure)}
.hero-copy,.panel-sub,.spot-copy>p:not(.section-kicker){max-width:var(--measure)}
/* 2. Cards: one padding, consistent inner order (icon → title → text → action) */
.feature-card,.use-case-card,.step-card,.showcase-card,.help-card,.plan-card,.spec-card{padding:var(--pad-card)}
.feature-icon,.use-case-icon,.help-icon{margin-bottom:var(--gap-md)}.feature-card h3,.step-card h3,.use-case-card strong{margin:0 0 var(--gap-sm)}.feature-card p,.step-card p{margin:0}.use-case-card em,.help-card em{margin-top:var(--gap-md);padding-top:0}
.feature-grid,.use-case-grid,.showcase-grid,.steps-grid,.help-grid,.plan-grid{gap:var(--gap-md)}
/* 3. Panels and forms */
.panel{padding:var(--pad-card)}.panel-heading,.history-heading{margin-bottom:var(--gap-lg)}.panel-sub{margin:var(--gap-sm) 0 0}
.field-label{margin:var(--gap-md) 0 6px}.panel .field-label:first-child,.auth-field label{margin-top:0}.field-hint{margin-top:6px}
.design-group{margin-top:var(--gap-lg)}.design-group legend{margin-bottom:var(--gap-sm)}.opt-label{margin:var(--gap-md) 0 var(--gap-sm)}
.workflow-actions{margin-top:var(--gap-lg);gap:var(--gap-md)}.settings-divider{margin:var(--gap-lg) 0}.template-library{padding:var(--gap-md)}
.button-row,.acct-actions,.sec-toolbar,.download-actions,.scanner-actions,.hero-actions{gap:var(--gap-md)}
.sec-toolbar{margin-top:var(--gap-md)}.scanner-actions{margin:var(--gap-md) 0}
/* 4. Tap targets and focus */
.button,.tab,.opt-btn,.type-button,.kit-apply,.plan-chip,.theme-toggle,.nav-toggle,.avatar-btn{min-height:44px}.theme-toggle,.nav-toggle,.avatar-btn{min-width:44px}
.plan-chip{min-height:44px}.google-btn{min-height:48px}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
@media(max-width:980px){:root{--pad-card:20px;--gap-3xl:48px}}
@media(max-width:640px){:root{--pad-card:16px;--gap-3xl:40px;--gap-xl:24px}.landing-section-heading{margin-bottom:var(--gap-lg)}.panel{padding:var(--pad-card)}.topbar{min-height:60px}.chip,.type-chip,.text-button,.mini-button{min-height:44px}}
/* auth additions */
.pw-meter{display:grid;gap:6px}.pw-bar{display:block;height:6px;border-radius:999px;background:var(--surface2);overflow:hidden}.pw-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--err);transition:width .2s,background .2s}.pw-bar i[data-s="2"]{background:var(--warn)}.pw-bar i[data-s="3"]{background:var(--ok)}.pw-meter small{color:var(--muted);font-size:13px}
.auth-view[data-mode=signup] .pw-meter[data-show=signup]{display:grid}.auth-view[data-mode=signup] label.auth-terms[data-show=signup]{display:flex}
.auth-terms{align-items:flex-start;gap:10px;margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}.auth-terms input{margin-top:3px;flex:none}.auth-terms a,.auth-legal a,.co-agree a{color:var(--primary);font-weight:600}
.co-agree{align-items:flex-start;gap:10px;margin-top:var(--gap-md);font-size:13.5px;line-height:1.5;color:var(--muted)}.co-agree input{margin-top:3px;flex:none}
.auth-legal{margin:0;font-size:12.5px;color:var(--muted);text-align:center}
/* footer: 5 columns */
.footer-grid{grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:var(--gap-lg)}
.footer-link-btn{display:inline-flex;align-items:center;justify-content:flex-start;padding:0;border:0;background:none;color:var(--muted);font:500 13.5px var(--font);cursor:pointer;text-align:left}.footer-link-btn:hover{color:var(--primary)}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-brand{grid-column:1/-1}}
/* cookie notice */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:var(--gap-lg);max-width:960px;margin:0 auto;padding:var(--gap-md) var(--gap-lg);border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-lg)}.cookie-banner[hidden]{display:none}
.cookie-text strong{display:block;margin-bottom:4px}.cookie-text p{margin:0;font-size:14px;color:var(--muted);max-width:60ch}.cookie-text a{color:var(--primary);font-weight:600}
.cookie-actions{display:flex;align-items:center;gap:var(--gap-sm);flex:none}.cookie-actions .button{min-height:44px;padding:0 18px}
.cookie-modal{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:16px}.cookie-modal[hidden]{display:none}
.cookie-sheet{position:relative;width:min(520px,100%);border:1px solid var(--border);border-radius:16px;background:var(--bg);box-shadow:var(--shadow-lg);overflow:hidden}.cookie-body{display:grid;gap:var(--gap-md);padding:var(--gap-lg)}
.ck-row{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md);padding:var(--gap-md);border:1px solid var(--border);border-radius:12px;background:var(--surface)}.ck-row p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}.ck-on{font-size:12px;font-weight:700;color:var(--ok);white-space:nowrap}
.ck-switch{position:relative;flex:none;width:48px;height:28px}.ck-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.ck-switch span{position:absolute;inset:0;border-radius:999px;background:var(--border);transition:background .2s}.ck-switch span:after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s}.ck-switch input:checked+span{background:var(--primary)}.ck-switch input:checked+span:after{transform:translateX(20px)}.ck-switch input:focus-visible+span{outline:3px solid var(--ring);outline-offset:2px}
.ck-foot{display:flex;justify-content:flex-end}
@media(max-width:640px){.cookie-banner{left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;gap:var(--gap-md);border-radius:16px 16px 0 0;border-bottom:0;padding:var(--gap-md) var(--gap-md) calc(var(--gap-md) + env(safe-area-inset-bottom,0px))}.cookie-actions{flex-wrap:wrap}.cookie-actions .button{flex:1 1 calc(50% - 8px)}.cookie-actions .link-btn{flex:1 1 100%;min-height:44px}.cookie-modal{align-items:end;padding:0}.cookie-sheet{width:100%;border-radius:16px 16px 0 0}}
/* legal pages */
.legal-body .app-shell{max-width:1100px}.legal-top{gap:var(--gap-md)}.legal-nav{display:flex;gap:2px;margin:0 auto 0 var(--gap-sm);overflow-x:auto;scrollbar-width:none}.legal-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:8px;color:var(--muted);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}.legal-nav a:hover{background:var(--surface2);color:var(--text)}.legal-nav a[aria-current=page]{background:var(--primary-soft);color:var(--primary)}
.legal{padding:var(--gap-2xl) 0 var(--gap-xl)}.legal article{max-width:760px;margin:0 auto}.legal h1{font-size:clamp(30px,4.5vw,42px);margin:0}.legal-sub{margin:var(--gap-sm) 0 0;font-size:18px;color:var(--muted)}.legal-meta{margin:var(--gap-md) 0 0;font-size:13.5px;color:var(--muted)}
.legal-toc{margin:var(--gap-xl) 0;padding:var(--gap-md) var(--gap-lg);border:1px solid var(--border);border-radius:12px;background:var(--surface)}.legal-toc ol{margin:var(--gap-sm) 0 0;padding-left:20px;display:grid;gap:6px;columns:2}.legal-toc a{color:var(--primary);font-weight:500;text-decoration:none}.legal-toc a:hover{text-decoration:underline}
.legal-sec{margin-top:var(--gap-xl);scroll-margin-top:90px}.legal-sec h2{font-size:22px;margin:0 0 var(--gap-md)}.legal-sec h2 span{color:var(--muted);font-weight:600}.legal-sec h3{font-size:16px;margin:var(--gap-md) 0 6px}
.legal-sec p,.legal-sec li{color:var(--text);line-height:1.7;max-width:70ch}.legal-sec p{margin:0 0 var(--gap-md)}.legal-sec ul{margin:0 0 var(--gap-md);padding-left:22px;display:grid;gap:var(--gap-sm)}.legal-sec a{color:var(--primary);font-weight:600}
.legal-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px}.legal-table{width:100%;border-collapse:collapse;font-size:14px}.legal-table th,.legal-table td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}.legal-table th{background:var(--surface2);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.legal-table tr:last-child td{border-bottom:0}.legal-table code{font-size:12.5px;overflow-wrap:anywhere}
.legal-footer{margin-top:var(--gap-xl);padding-top:0}.legal-links{display:flex;flex-wrap:wrap;gap:var(--gap-sm) var(--gap-md)}.legal-links a{color:var(--muted);font-weight:600;text-decoration:none}.legal-links a:hover{color:var(--primary)}
@media(max-width:760px){.legal-top .legal-nav{display:none}.legal-toc ol{columns:1}.legal{padding-top:var(--gap-xl)}.legal-sec h2{font-size:20px}}


/* V14 refinement: stronger contrast, polished pricing and responsive navigation */
:root{--button-ink:#fff}
.button,.button-primary,.nav-plan,.plan-chip,.theme-toggle,.nav-toggle,.footer-link-btn{
  -webkit-tap-highlight-color:transparent
}
.button{
  min-height:44px;padding:10px 17px;border:1px solid #cbd0e3;border-radius:12px;
  background:#fff;color:#20233d;font-weight:700;line-height:1.2;
  box-shadow:0 2px 5px rgba(20,24,60,.06);transition:transform .18s ease,box-shadow .18s ease,background .18s ease
}
.button:hover{transform:translateY(-1px);background:#f3f4ff;border-color:#a5a9d4;box-shadow:0 8px 18px rgba(40,45,100,.12)}
.button-primary,.button.button-primary{
  background:linear-gradient(135deg,#4338ca 0%,#6d28d9 100%);border-color:#4338ca;color:#fff;
  box-shadow:0 7px 18px rgba(79,70,229,.28)
}
.button-primary:hover,.button.button-primary:hover{background:linear-gradient(135deg,#3730a3,#5b21b6);border-color:#3730a3;box-shadow:0 10px 24px rgba(79,70,229,.36)}
[data-theme=dark] .button:not(.button-primary){background:#252a45;color:#f4f5ff;border-color:#414866}
[data-theme=dark] .button:not(.button-primary):hover{background:#303653;border-color:#737da9}
[data-theme=dark] .button-primary,[data-theme=dark] .button.button-primary{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border-color:#7770f3}
.button:focus-visible,.nav-toggle:focus-visible,.landing-nav a:focus-visible{outline:3px solid rgba(99,102,241,.48);outline-offset:3px}
.button:active{transform:translateY(0) scale(.985)}
button svg,.button svg,.ui-icon{flex-shrink:0}
.plan-grid{align-items:stretch;gap:18px}
.plan-card{min-width:0;padding:26px 24px 22px;border-radius:20px;box-shadow:0 8px 24px rgba(28,32,80,.055);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.plan-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(28,32,80,.11)}
.plan-card.is-popular{border:2px solid #5b50e8;box-shadow:0 14px 36px rgba(79,70,229,.15);background:linear-gradient(180deg,rgba(99,102,241,.075),var(--surface) 42%)}
.plan-card h3{font-size:21px;font-weight:800;letter-spacing:-.03em}
.plan-price{margin:16px 0 2px}
.plan-price strong{font-size:clamp(32px,3vw,42px)}
.plan-list{gap:11px;margin:22px 0 24px;padding-top:18px;border-top:1px solid var(--border)}
.plan-list li{font-size:14px;line-height:1.5}
.plan-card>.button{width:100%;margin-top:auto;justify-content:center;min-height:48px}
.plan-flag{top:-13px;left:20px;padding:5px 13px;background:linear-gradient(120deg,#4338ca,#7c3aed);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.plan-assurance{max-width:850px;margin:22px auto 0;padding:17px 20px;border:1px solid var(--border);border-radius:15px;background:var(--surface2);color:var(--muted);font-size:14px;text-align:center}
.plan-assurance strong{color:var(--text)}
.pricing-note{max-width:800px;margin:16px auto 0;line-height:1.7}
.landing-section[id],.hero[id]{scroll-margin-top:92px}
.footer{scroll-margin-top:90px}
.footer a,.footer-link-btn{transition:color .16s ease,transform .16s ease}
.footer a:hover,.footer-link-btn:hover{color:var(--primary);transform:translateX(2px)}
.footer-link-btn{border:0;background:none;color:var(--muted);padding:0;text-align:left;cursor:pointer;font:inherit}
.topbar{isolation:isolate}
.landing-nav.open{z-index:60}
.nav-toggle{background:var(--surface);color:var(--text)}
.nav-toggle:hover{border-color:var(--primary);background:var(--primary-soft)}
/* Keep icons and labels aligned in modern action buttons */
.button [data-icon],.button .ui-icon,.text-button [data-icon]{display:inline-flex;align-items:center;justify-content:center}
@media(max-width:980px){
  .topbar{gap:10px}
  .landing-nav.open{padding:12px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 18px 42px rgba(20,24,60,.16)}
  .landing-nav.open>a,.landing-nav.open .nav-more-btn{width:100%;min-height:44px;display:flex;align-items:center;padding:11px 14px;border-radius:11px}
  .landing-nav.open .nav-more{width:100%}
  .landing-nav.open .nav-more-menu{position:static;width:100%;margin:5px 0 8px;box-shadow:none;border:1px solid var(--border);border-radius:12px}
  .landing-nav.open .nav-auth-mobile{display:flex;flex-wrap:wrap;gap:8px;padding:10px 8px 4px}
  .landing-nav.open .nav-auth-mobile .button{flex:1;justify-content:center}
}
@media(max-width:760px){
  .app-shell{width:min(100% - 28px,1180px)}
  .topbar{margin:0 -14px;padding:10px 14px}
  .brand{font-size:17px;gap:7px}
  .brand-mark{width:32px;height:32px}
  .header-actions{gap:6px}
  .header-cta,.theme-toggle-label,.plan-chip-label{display:none}
  .theme-toggle,.plan-chip,.nav-toggle{width:40px;height:40px;min-width:40px;padding:0;display:grid;place-items:center}
  .landing-nav.open{left:0;right:0;max-height:calc(100dvh - 76px);overflow-y:auto}
  .plan-grid{grid-template-columns:1fr;gap:18px}
  .plan-card{padding:24px 21px 20px}
  .plan-card.is-popular{order:0}
  .pricing-wrap{width:100%}
  .period-toggle{max-width:100%;width:100%}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  .footer-bottom{flex-wrap:wrap;gap:8px}
  .faq-cta{padding:24px;align-items:flex-start;flex-direction:column}
  .faq-cta .button{width:100%;justify-content:center}
}
@media(max-width:420px){
  .app-shell{width:calc(100% - 22px)}
  .topbar{margin:0 -11px;padding:9px 11px}
  .brand{font-size:15px}
  .header-actions{gap:4px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-col a,.footer-link-btn{font-size:13px}
  .plan-price strong{font-size:35px}
  .plan-assurance{padding:14px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

.plan-blurb{min-height:44px;margin:8px 0 0;color:var(--muted);font-size:13.5px;line-height:1.5}
@media(max-width:760px){.plan-blurb{min-height:0}}