:root { --blue:#1268f6; --blue-deep:#0758e8; --ink:#0b1425; --muted:#596983; --line:#e3eaf4; --soft:#f6f9ff; --card:#fff; --shadow:0 14px 30px rgba(36,73,135,.07); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; overflow-x:hidden; color:var(--ink); background:linear-gradient(125deg,#fff 0%,#fbfcff 58%,#f7faff 100%); font-family:Inter,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid rgba(18,104,246,.28); outline-offset:3px; }
a { color:inherit; text-decoration:none; }
svg { display:block; width:20px; height:20px; }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.site-shell { width:min(1332px,calc(100% - 48px)); margin:0 auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.qr-header { height:71px; border-bottom:1px solid #e8edf5; background:rgba(255,255,255,.94); }
.header-inner { display:flex; align-items:center; height:100%; }
.brand { display:inline-flex; align-items:center; gap:9px; font-size:21px; font-weight:800; letter-spacing:-1.15px; white-space:nowrap; }
.brand > span:last-child span { color:var(--blue); }
.brand-mark { display:grid; place-items:center; width:29px; height:29px; color:#fff; border-radius:10px 11px 11px 4px; transform:rotate(-8deg); background:linear-gradient(145deg,#3086ff,#0753de); box-shadow:0 5px 12px rgba(20,103,243,.3); }
.brand-mark svg { width:20px; height:20px; transform:rotate(8deg); }
.qr-nav { display:flex; align-items:center; gap:clamp(24px,2.6vw,39px); margin-left:auto; margin-right:54px; }
.qr-nav a { display:inline-flex; align-items:center; gap:4px; padding:25px 0; font-size:13px; font-weight:500; transition:color .18s; }
.qr-nav a:hover { color:var(--blue); }.qr-nav .nav-down { width:14px; height:14px; }
.header-tools { display:flex; align-items:center; gap:17px; }.header-search { position:relative; display:flex; align-items:center; width:358px; height:39px; border:1px solid #d7dfeb; border-radius:8px; background:#fff; }.header-search input { width:100%; height:100%; padding:0 39px 0 15px; color:var(--ink); font-size:12px; border:0; outline:0; border-radius:inherit; background:transparent; }.header-search input::placeholder { color:#74819a; }.header-search svg { position:absolute; right:12px; width:18px; height:18px; color:#60708b; pointer-events:none; }
.login-button { min-width:74px; height:39px; color:#fff; font-size:13px; font-weight:700; border:0; border-radius:7px; background:linear-gradient(135deg,#287cff,#0759e8); box-shadow:0 7px 16px rgba(11,87,226,.2); }.login-button:hover { filter:brightness(1.06); }.mobile-menu { display:none; color:var(--ink); border:0; background:transparent; }

.breadcrumb { display:flex; align-items:center; gap:13px; min-height:65px; overflow:auto; color:#66758f; font-size:12px; white-space:nowrap; }.breadcrumb a { display:inline-flex; align-items:center; gap:9px; }.breadcrumb a:first-child svg { width:16px; height:16px; }.breadcrumb > svg { flex:0 0 auto; width:13px; height:13px; color:#8c9ab0; }.breadcrumb span[aria-current] { color:#172136; font-weight:600; }

.generator-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); justify-content:space-between; gap:52px; padding-top:0; }.generator-grid > * { min-width:0; }.generator-copy { padding:14px 4px 0; }.tool-badge { display:inline-flex; gap:5px; align-items:center; margin:0 0 18px; padding:6px 11px; color:var(--blue); font-size:10px; font-weight:800; border-radius:20px; background:#edf4ff; }.tool-badge span { font-size:8px; }.generator-copy h1 { margin:0; font-size:48px; line-height:1.1; letter-spacing:-2.2px; }.generator-copy h1 strong { color:var(--blue); }.lead { margin:16px 0 27px; color:#566681; font-size:15px; line-height:1.55; }
.generator-form { overflow:hidden; border:1px solid #e5ebf3; border-radius:12px; background:#fff; box-shadow:var(--shadow); }.type-tabs { display:flex; align-items:stretch; gap:1px; min-height:47px; overflow-x:auto; border-bottom:1px solid #e7edf6; scrollbar-width:none; }.type-tabs::-webkit-scrollbar { display:none; }.type-tab { position:relative; display:inline-flex; flex:0 0 auto; align-items:center; gap:6px; min-width:66px; padding:0 12px; color:#596982; font-size:11px; border:0; background:#fff; }.type-tab svg { width:15px; height:15px; }.type-tab::after { position:absolute; right:10px; bottom:-1px; left:10px; height:2px; border-radius:2px 2px 0 0; background:transparent; content:""; }.type-tab.is-active { color:var(--blue); font-weight:700; }.type-tab.is-active::after { background:var(--blue); }
.form-content { padding:20px; }.form-panel label { display:block; margin:0 0 9px; color:#19233a; font-size:12px; font-weight:600; }.form-panel input,.form-panel textarea,.form-panel select { width:100%; color:#20304a; font-size:13px; border:1px solid #cfdaea; border-radius:8px; outline:0; background:#fbfcff; transition:border .2s,box-shadow .2s; }.form-panel input,.form-panel select { height:43px; padding:0 12px; }.form-panel textarea { min-height:82px; padding:12px; resize:vertical; }.form-panel input:focus,.form-panel textarea:focus,.form-panel select:focus { border-color:#72a8ff; box-shadow:0 0 0 3px rgba(18,104,246,.1); }.input-wrap { position:relative; }.input-wrap svg { position:absolute; top:12px; left:13px; width:19px; height:19px; color:#4a6a9f; }.input-wrap input { padding-left:45px; }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.form-panel .field-grid + label { margin-top:12px; }.form-panel textarea + label,.form-panel input + label { margin-top:12px; }
.generate-button { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:45px; margin-top:17px; color:#fff; font-size:13px; font-weight:700; border:0; border-radius:7px; background:linear-gradient(135deg,#1975ff,#0758e6); box-shadow:0 9px 18px rgba(12,96,241,.18); }.generate-button:hover { filter:brightness(1.06); }.generate-button svg { width:17px; height:17px; }.privacy-note { display:flex; align-items:center; gap:6px; margin:14px 0 0; color:#42536d; font-size:10px; }.privacy-note svg { width:15px; height:15px; color:var(--blue); }.privacy-note span { color:#7a879d; }

.qr-workspace { display:grid; grid-template-columns:300px minmax(0,1fr); min-height:438px; overflow:hidden; border:1px solid #e8edf4; border-radius:12px; background:#fff; box-shadow:var(--shadow); }.preview-panel { min-width:0; padding:21px 18px 19px; border-right:1px solid #e8edf4; }.panel-title { display:flex; justify-content:space-between; align-items:center; margin:1px 2px 10px; }.panel-title h2,.design-panel h2 { margin:0; font-size:14px; letter-spacing:-.25px; }.panel-title span { padding:4px 9px; color:var(--blue); font-size:9px; font-weight:700; border-radius:12px; background:#edf4ff; }.qr-preview-box { display:grid; place-items:center; height:251px; padding:16px; border:1px solid #edf1f6; border-radius:10px; background:#fff; box-shadow:0 4px 11px rgba(38,76,136,.07); }.qr-preview-box #qr-preview { display:grid; place-items:center; width:100%; height:100%; }.qr-preview-box #qr-preview canvas,.qr-preview-box #qr-preview svg { display:block; width:100%!important; height:100%!important; max-width:100%; max-height:100%; }
.download-primary,.download-secondary { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; height:40px; margin-top:17px; font-size:12px; font-weight:700; border-radius:7px; }.download-primary svg,.download-secondary svg { width:17px; height:17px; }.download-primary { color:#fff; border:0; background:linear-gradient(135deg,#1976ff,#0758e9); box-shadow:0 8px 17px rgba(12,96,241,.17); }.download-secondary { margin-top:9px; color:var(--blue); border:1px solid #cfdaea; background:#fff; }
.design-panel { padding:22px 27px; }.design-panel > h2 { margin-bottom:23px; }.design-panel fieldset { min-width:0; padding:0; margin:0 0 22px; border:0; }.design-panel legend { margin-bottom:11px; color:#172239; font-size:11px; font-weight:600; }.swatches { display:flex; flex-wrap:wrap; gap:12px; }.color-swatch { position:relative; width:29px; height:29px; padding:0; border:0; border-radius:50%; background:var(--swatch,#fff); }.color-swatch.is-selected { border:1px solid #b9c6d8; box-shadow:inset 0 0 0 3px #fff,0 0 0 1px #d1dbea; }.color-swatch.is-selected::after { position:absolute; top:8px; left:9px; width:9px; height:5px; border-bottom:1.8px solid #fff; border-left:1.8px solid #fff; transform:rotate(-45deg); content:""; }.color-swatch.white.is-selected::after,.color-swatch.cream.is-selected::after,.color-swatch.ice.is-selected::after,.color-swatch.mint.is-selected::after,.color-swatch.pink.is-selected::after,.color-swatch.grey.is-selected::after { border-color:#273750; }.dark{background:#0a101b}.blue{background:#1d6df7}.green{background:#1fc276}.purple{background:#7145ed}.red{background:#ef3e45}.orange{background:#ff930f}.rainbow{background:conic-gradient(#e74e9e,#8551ef,#0e87f7,#17c578,#f2ca3f,#e74e9e)}.white{background:#fff}.grey{background:#eef1f5}.cream{background:#fff1c9}.ice{background:#e3f2ff}.mint{background:#def8e9}.pink{background:#fce2ec}
.format-options { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.format-option { display:grid; place-items:center; min-height:70px; padding:8px 4px; color:#68758c; font-size:10px; border:1px solid #d9e2ee; border-radius:7px; background:#fff; }.format-option.is-selected { color:var(--blue); border-color:#2d77fb; background:#f6f9ff; }.format-option b { margin-top:4px; font-size:9px; }.format-icon { display:grid; grid-template-columns:repeat(3,5px); grid-template-rows:repeat(3,5px); gap:2px; width:max-content; height:max-content; }.format-icon::before,.format-icon::after,.format-icon { background:linear-gradient(90deg,currentColor 5px,transparent 5px 7px,currentColor 7px 12px,transparent 12px); }.format-square { border:2px solid currentColor; }.format-rounded { border:2px solid currentColor; border-radius:4px; }.format-dots { width:19px; height:19px; border-radius:50%; background:radial-gradient(circle,currentColor 2px,transparent 2.5px); background-size:7px 7px; }
.logo-control { display:flex; align-items:center; justify-content:space-between; margin:1px 0 12px; }.logo-control label { color:#26334a; font-size:11px; font-weight:600; }.logo-control small { display:block; margin-top:4px; color:#7b8799; font-size:9px; }.switch { position:relative; display:inline-block; width:27px; height:16px; }.switch input { position:absolute; opacity:0; }.switch span { position:absolute; inset:0; border-radius:12px; background:#cdd8e8; transition:.2s; }.switch span::after { position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.2s; content:""; }.switch input:checked + span { background:var(--blue); }.switch input:checked + span::after { transform:translateX(11px); }.upload-button { display:inline-flex; align-items:center; gap:6px; height:31px; padding:0 12px; color:var(--blue); font-size:10px; font-weight:700; border:1px solid #bed1ee; border-radius:6px; background:#fff; cursor:pointer; }.upload-button svg { width:15px; height:15px; }.upload-help { margin:5px 0 0; color:#7a879c; font-size:9px; }

.benefit-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:22px; padding:34px 4px 31px; }.benefit-strip article { display:flex; gap:12px; min-width:0; }.benefit-strip article > span { display:grid; flex:0 0 auto; place-items:center; width:43px; height:43px; color:var(--blue); border-radius:50%; background:#edf4ff; }.benefit-strip article > span svg { width:22px; height:22px; }.benefit-strip b { display:block; margin:1px 0 5px; font-size:12px; }.benefit-strip p { margin:0; color:#66748b; font-size:10px; line-height:1.45; }
.info-grid { display:grid; grid-template-columns:1fr 1.02fr; gap:18px; }.how-card,.uses-card { min-height:231px; padding:18px; border:1px solid #e6ecf4; border-radius:12px; background:#fff; box-shadow:0 8px 20px rgba(38,73,133,.04); }.how-card h2,.uses-card h2 { margin:1px 0 13px; font-size:14px; }.steps { display:grid; grid-template-columns:repeat(4,1fr); }.steps > div { position:relative; padding:4px 9px 0; text-align:center; }.steps > div:not(:last-child)::after { position:absolute; top:28px; left:calc(50% + 27px); width:calc(100% - 53px); border-top:2px dashed #d5e4fa; content:""; }.steps span { position:relative; z-index:1; display:grid; place-items:center; width:48px; height:48px; margin:0 auto 15px; color:var(--blue); font-size:20px; font-weight:700; border-radius:50%; background:linear-gradient(145deg,#f2f7ff,#e6f0ff); }.steps b { display:block; min-height:28px; font-size:11px; }.steps em { font-style:normal; font-weight:400; }.steps p { margin:6px 0 0; color:#60708a; font-size:10px; line-height:1.48; }.uses-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.uses-grid > div { display:flex; align-items:center; gap:9px; min-height:77px; padding:10px; border:1px solid #e6ecf4; border-radius:9px; }.uses-grid > div > span { display:grid; flex:0 0 auto; place-items:center; width:38px; height:38px; border-radius:11px; }.uses-grid > div > span svg { width:21px; height:21px; }.use-blue { color:#176fff; background:#eef5ff; }.use-purple { color:#8354ff; background:#f4f0ff; }.use-green { color:#13af64; background:#edfff5; }.uses-grid p { margin:0; color:#68758b; font-size:10px; line-height:1.35; }.uses-grid b { display:block; margin-bottom:3px; color:#172136; font-size:11px; }
.explore-bar { display:flex; align-items:center; justify-content:space-between; margin:17px auto 20px; padding:18px 80px; border-radius:12px; background:linear-gradient(105deg,#f0f6ff,#f6f9ff); }.explore-bar > div { display:flex; align-items:center; gap:12px; }.explore-mark { display:grid; place-items:center; width:31px; height:31px; color:#fff; border-radius:50%; background:linear-gradient(145deg,#3186ff,#0754df); }.explore-mark svg { width:21px; height:21px; }.explore-bar p { margin:0; font-size:12px; }.explore-bar p span { color:var(--blue); }.explore-bar small { display:block; margin-top:5px; color:#6d7b91; font-size:10px; }.explore-bar a { display:inline-flex; align-items:center; gap:12px; min-width:229px; height:39px; padding:0 17px; color:#fff; font-size:12px; font-weight:700; border-radius:7px; background:linear-gradient(135deg,#267bff,#0758e9); box-shadow:0 8px 17px rgba(12,96,241,.16); }.explore-bar a svg { width:17px; height:17px; margin-left:auto; }
.toast { position:fixed; z-index:30; left:50%; bottom:25px; max-width:calc(100% - 32px); padding:12px 17px; color:#fff; font-size:12px; border-radius:8px; background:#10213b; box-shadow:0 12px 30px rgba(0,0,0,.18); opacity:0; pointer-events:none; transform:translate(-50%,16px); transition:.22s; }.toast.is-visible { opacity:1; transform:translate(-50%,0); }.login-dialog { position:relative; width:min(380px,calc(100% - 36px)); padding:31px; color:var(--ink); border:0; border-radius:15px; box-shadow:0 20px 70px rgba(0,15,45,.25); }.login-dialog::backdrop { background:rgba(2,12,27,.58); backdrop-filter:blur(3px); }.login-dialog > button:first-child { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:33px; height:33px; color:#53637b; border:0; border-radius:50%; background:#f2f6fc; }.login-dialog > button:first-child svg { width:17px; height:17px; }.dialog-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:15px; color:#fff; border-radius:12px; background:var(--blue); }.dialog-icon svg { width:24px; height:24px; }.login-dialog h2 { margin:0; font-size:21px; }.login-dialog p { margin:10px 0 20px; color:var(--muted); font-size:13px; }.login-dialog > button:last-child { width:100%; height:42px; color:#fff; border:0; border-radius:7px; background:var(--blue); }

@media (max-width:1200px) { .site-shell{width:min(1120px,calc(100% - 40px))}.qr-nav{gap:21px;margin-right:28px}.header-search{width:260px}.generator-grid{grid-template-columns:minmax(410px,1fr) minmax(530px,1.04fr);gap:34px}.qr-workspace{grid-template-columns:280px 1fr}.design-panel{padding:22px 20px}.swatches{gap:9px}.benefit-strip{gap:13px}.explore-bar{padding:18px 35px} }
@media (max-width:1160px) { .generator-grid{grid-template-columns:minmax(0,1fr);gap:28px}.generator-copy{max-width:650px;padding-top:7px}.qr-workspace{width:min(650px,100%);grid-template-columns:300px minmax(0,1fr)} }
@media (max-width:1020px) { .qr-header{height:65px}.header-inner{position:relative}.qr-nav{position:absolute;top:64px;right:0;left:0;display:grid;gap:0;max-height:0;margin:0;overflow:hidden;visibility:hidden;border-top:1px solid #e4eaf3;background:#fff;box-shadow:0 12px 22px rgba(31,67,119,.12);transition:max-height .25s,visibility .25s}.qr-header.nav-open .qr-nav{max-height:350px;visibility:visible}.qr-nav a{padding:14px 20px;border-bottom:1px solid #edf1f6}.qr-nav a:last-child{border:0}.header-tools{margin-left:auto}.header-search{display:none}.mobile-menu{display:grid;place-items:center}.generator-grid{grid-template-columns:1fr;gap:26px}.generator-copy{max-width:650px;padding-top:7px}.qr-workspace{width:min(650px,100%);grid-template-columns:300px 1fr}.benefit-strip{grid-template-columns:repeat(3,1fr);row-gap:24px}.info-grid{grid-template-columns:1fr}.explore-bar{padding:18px 30px} }
@media (max-width:840px) { .type-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:hidden}.type-tab{justify-content:center;min-width:0;padding:0 4px;font-size:9px}.type-tab svg{width:14px;height:14px}.type-tab::after{right:4px;left:4px} }
@media (max-width:640px) { .site-shell{width:calc(100% - 32px)}.brand{font-size:19px}.brand-mark{width:27px;height:27px}.login-button{min-width:65px;height:36px;font-size:12px}.breadcrumb{min-height:55px;gap:8px;font-size:11px}.breadcrumb > svg{width:11px;height:11px}.breadcrumb a:first-child span{display:none}.generator-copy{padding-top:10px}.tool-badge{margin-bottom:14px;font-size:9px}.generator-copy h1{font-size:36px;letter-spacing:-1.6px}.lead{margin:13px 0 22px;font-size:13px}.desktop-break{display:none}.generator-form{border-radius:10px}.type-tab{min-width:0;padding:0 4px}.type-tab svg{width:14px;height:14px}.form-content{padding:16px}.field-grid{grid-template-columns:1fr;gap:0}.qr-workspace{grid-template-columns:1fr;border-radius:10px}.preview-panel{border-right:0;border-bottom:1px solid #e8edf4}.qr-preview-box{height:min(74vw,290px)}.design-panel{padding:20px}.format-options{gap:7px}.benefit-strip{grid-template-columns:1fr 1fr;gap:19px 12px;padding:27px 3px}.benefit-strip article:last-child{grid-column:1 / -1}.info-grid{gap:13px}.how-card,.uses-card{padding:17px;min-height:0}.steps{grid-template-columns:1fr;gap:13px}.steps > div{display:grid;grid-template-columns:48px 1fr;column-gap:12px;padding:0;text-align:left}.steps > div:not(:last-child)::after{top:50px;bottom:-13px;left:23px;width:0;height:auto;border-top:0;border-left:2px dashed #d5e4fa}.steps span{grid-row:span 2;margin:0}.steps b{align-self:end;min-height:0}.steps p{margin:3px 0 0}.uses-grid{grid-template-columns:1fr}.uses-grid > div{min-height:65px}.explore-bar{align-items:flex-start;flex-direction:column;gap:16px;padding:20px}.explore-bar a{width:100%;min-width:0}.privacy-note{align-items:flex-start}.privacy-note span{display:none} }
@media (max-width:540px) { .type-tab{padding:0;font-size:0}.type-tab svg{width:16px;height:16px}.type-tab::after{right:3px;left:3px} }
@media (max-width:375px) { .login-button{display:none}.generator-copy h1{font-size:33px}.type-tab{padding:0 9px}.type-tab svg{display:none}.benefit-strip{grid-template-columns:1fr}.benefit-strip article:last-child{grid-column:auto} }

@media (max-width:640px) {
  .generator-grid { grid-template-columns:minmax(0,1fr); }
  .generator-copy,
  .generator-form,
  .qr-workspace,
  .preview-panel,
  .design-panel,
  .qr-preview-box,
  #qr-preview { width:100%; min-width:0; max-width:100%; }
  .form-content,
  .preview-panel,
  .design-panel { overflow-wrap:anywhere; }
}