@font-face { font-family:"Be Vietnam Pro"; src:url("asset/fonts/be-vietnam-pro-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Be Vietnam Pro"; src:url("asset/fonts/be-vietnam-pro-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("asset/fonts/montserrat-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("asset/fonts/montserrat-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Roboto Slab"; src:url("asset/fonts/roboto-slab-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Roboto Slab"; src:url("asset/fonts/roboto-slab-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Dancing Script"; src:url("asset/fonts/dancing-script-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Dancing Script"; src:url("asset/fonts/dancing-script-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  color-scheme:dark;
  --blue:#296acc;
  --blue-hover:#3478df;
  --page:#1c1c1d;
  --panel:#242425;
  --panel-soft:#2d2d2e;
  --field:#39393a;
  --field-focus:#414143;
  --line:#3b3b3d;
  --line-blue:#4b83d5;
  --text:#ffffff;
  --muted:#a2a2a6;
  --danger:#ff8a91;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  min-width:320px;
  min-height:100vh;
  overflow-x:hidden;
  background:var(--page);
  color:var(--text);
  font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button { color:inherit; }
[hidden] { display:none !important; }
.page-glow { display:none; }

.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:92px;
  padding:0 clamp(22px,4vw,68px);
  background:#202021;
  border-bottom:1px solid var(--line);
}
.brand { display:inline-flex; align-items:center; gap:14px; color:#fff; text-decoration:none; }
.brand img { display:block; width:48px; height:48px; }
.brand > span { display:grid; gap:1px; }
.brand strong { font-size:22px; line-height:1; letter-spacing:-.02em; text-transform:uppercase; }
.brand small { color:rgba(255,255,255,.75); font-size:11px; }

.workspace {
  display:grid;
  grid-template-columns:minmax(0,2.1fr) minmax(360px,.9fr);
  align-items:stretch;
  width:100%;
  min-height:calc(100vh - 142px);
  margin:0;
  padding:0;
}
.builder { min-width:0; padding:0 clamp(24px,3.6vw,58px); background:#202021; }
.intro { padding:31px 0 27px; border-bottom:1px solid var(--line); }
.intro h1 { margin:0; font-size:clamp(30px,3.2vw,48px); line-height:1.02; letter-spacing:-.045em; }
.intro h1 em { color:#6fa5f6; font-style:normal; }
.intro > p:last-child { max-width:720px; margin:13px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }

.card { border:0; border-radius:0; background:transparent; box-shadow:none; }
.type-card,.content-card,.design-card { padding:28px 0 30px; border-bottom:1px solid var(--line); }
.section-heading { display:flex; align-items:flex-start; gap:11px; margin-bottom:18px; }
.step {
  display:grid;
  place-items:center;
  flex:0 0 27px;
  width:27px;
  height:27px;
  border:0;
  border-radius:5px;
  background:var(--blue);
  color:#fff;
  font-size:12px;
  font-weight:800;
}
.section-heading h2,.preview-heading h2 { margin:1px 0 4px; font-size:17px; line-height:1.2; }
.section-heading p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }

.type-menu { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.type-button {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  min-width:0;
  min-height:49px;
  padding:8px 13px;
  border:1px solid #49494b;
  border-radius:7px;
  background:#333334;
  color:#d1d1d4;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.type-button span { display:grid; place-items:center; width:24px; height:24px; border-radius:5px; background:#29292a; color:#7aabf4; font-size:12px; font-weight:800; }
.type-button:hover { border-color:#6a6a6d; background:#3a3a3b; color:#fff; }
.type-button.active { border-color:#5390e8; background:var(--blue); color:#fff; }
.type-button.active span { background:rgba(0,0,0,.17); color:#fff; }

.form-panel { animation:panelIn .18s ease both; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px 20px; }
@keyframes panelIn { from { opacity:0; transform:translateY(3px); } }
label { display:grid; align-content:start; gap:8px; color:#f0f0f1; font-size:12px; font-weight:650; }
label.full { grid-column:1/-1; }
label small { justify-self:end; color:#8b8b8e; font-size:10px; font-weight:500; }
.field-label { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:15px; }
.field-label small { flex:0 0 auto; }
input,textarea,select {
  width:100%;
  min-width:0;
  border:1px solid #4a4a4c;
  border-radius:7px;
  outline:0;
  background:var(--field);
  color:#fff;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
input,select { height:49px; padding:0 14px; }
textarea { min-height:102px; padding:13px 14px; resize:vertical; line-height:1.5; }
input::placeholder,textarea::placeholder { color:#808084; }
input:focus,textarea:focus,select:focus { border-color:#6da4f6; background:var(--field-focus); box-shadow:0 0 0 2px rgba(41,106,204,.24); }
select { appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,#c5c5c8 50%),linear-gradient(135deg,#c5c5c8 50%,transparent 50%); background-position:calc(100% - 18px) 21px,calc(100% - 12px) 21px; background-size:6px 6px; background-repeat:no-repeat; padding-right:38px; }

.input-prefix,.phone-field { display:flex; overflow:hidden; border:1px solid #4a4a4c; border-radius:7px; background:var(--field); transition:border-color .16s ease,box-shadow .16s ease; }
.input-prefix:focus-within,.phone-field:focus-within { border-color:#6da4f6; box-shadow:0 0 0 2px rgba(41,106,204,.24); }
.input-prefix > span,.phone-field > span { display:flex; align-items:center; padding:0 0 0 14px; color:#81aef1; font-size:13px; font-weight:700; white-space:nowrap; }
.input-prefix input,.phone-field input { border:0; border-radius:0; background:transparent; box-shadow:none; }
.input-prefix input:focus,.phone-field input:focus { background:transparent; box-shadow:none; }
.phone-field > span { margin:9px 0 9px 9px; padding:0 11px; border-right:1px solid #565658; }

.check-label { display:flex; align-items:center; align-self:end; grid-template-columns:none; gap:10px; min-height:49px; padding:0 14px; border:1px solid #4a4a4c; border-radius:7px; background:var(--field); cursor:pointer; }
.check-label input { position:absolute; opacity:0; pointer-events:none; }
.check-label > span { position:relative; width:37px; height:21px; border-radius:999px; background:#202021; }
.check-label > span::after { content:""; position:absolute; left:3px; top:3px; width:15px; height:15px; border-radius:50%; background:#8b8b8e; transition:.18s ease; }
.check-label input:checked + span { background:var(--blue); }
.check-label input:checked + span::after { left:19px; background:#fff; }
.form-error { min-height:17px; margin:13px 0 -8px; color:var(--danger); font-size:11px; }
.bank-note { margin:0; padding:12px 14px; border-left:3px solid var(--blue); background:#2c2c2d; color:#aaaab0; font-size:10px; font-weight:500; line-height:1.65; }

.design-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px 20px; }
.color-control { display:flex; height:49px; overflow:hidden; border:1px solid #4a4a4c; border-radius:7px; background:var(--field); }
.color-control input[type="color"] { flex:0 0 56px; width:56px; height:49px; padding:5px; border:0; border-right:1px solid #515153; border-radius:0; cursor:pointer; }
.color-control output { display:flex; align-items:center; padding:0 14px; color:#d0d0d3; font-size:11px; letter-spacing:.04em; }
.logo-upload { display:flex; align-items:center; justify-content:space-between; min-height:58px; padding:9px 10px 9px 14px; border:1px dashed #646467; border-radius:7px; background:#303031; cursor:pointer; }
.logo-upload > span { display:grid; gap:3px; }
.logo-upload small { color:#98989b; font-size:10px; font-weight:500; }
.logo-upload input { position:absolute; width:1px; height:1px; opacity:0; }
.logo-upload b { padding:10px 13px; border-radius:5px; background:var(--blue); color:#fff; font-size:11px; white-space:nowrap; }
.logo-upload:hover { border-color:#6da4f6; }
.range-control { grid-template-columns:1fr auto; align-items:center; }
.range-control output { color:#79aaf2; font-size:10px; font-weight:700; }
.range-control input[type="range"] {
  grid-column:1/-1;
  width:100%;
  height:6px;
  padding:0;
  border:0;
  border-radius:999px;
  appearance:none;
  background:linear-gradient(90deg,var(--blue),#5b5b5e);
  cursor:pointer;
  box-shadow:none;
}
.range-control input[type="range"]::-webkit-slider-thumb { width:17px; height:17px; border:2px solid #fff; border-radius:50%; appearance:none; background:var(--blue); box-shadow:0 2px 8px rgba(0,0,0,.3); }
.range-control input[type="range"]::-moz-range-thumb { width:14px; height:14px; border:2px solid #fff; border-radius:50%; background:var(--blue); }
.design-check { align-self:end; }
.design-subtitle { margin:10px 0 -3px; padding-top:19px; border-top:1px solid var(--line); color:#72a6f3; font-size:10px; font-weight:800; letter-spacing:.16em; }
.inline-tool { min-height:38px; border:1px solid #505053; border-radius:6px; background:#303031; color:#bfc0c4; cursor:pointer; font-size:10px; font-weight:700; }
.inline-tool:hover { border-color:#6da4f6; color:#fff; }
.drag-help { margin:-3px 0 0; color:#929296; font-size:10px; font-weight:500; }

.preview-card {
  position:sticky;
  top:0;
  align-self:start;
  min-height:calc(100vh - 142px);
  padding:36px clamp(25px,3vw,46px);
  border-left:1px solid var(--line);
  background:#272728;
}
.preview-heading { display:flex; align-items:center; gap:11px; margin-bottom:21px; padding-bottom:17px; border-bottom:1px solid #454547; }
.preview-heading > div { min-width:0; }
.preview-heading p { margin:0 0 3px; color:#77aaf5; font-size:9px; font-weight:800; letter-spacing:.15em; }
.preview-heading h2 { margin:0; }

.qr-stage { position:relative; display:grid; place-items:center; isolation:isolate; aspect-ratio:1; overflow:hidden; padding:22px; border:1px solid #6d6d70; border-radius:7px; background:#e6eaf4; box-shadow:none; touch-action:none; }
.canvas-background { position:absolute; z-index:-1; inset:-9%; background:#e6eaf4 center/cover no-repeat; transform:scale(1.02); pointer-events:none; }
#qrCanvas { position:relative; z-index:2; display:grid; grid-area:1/1; place-items:center; width:80%; height:80%; transition:width .16s ease,height .16s ease; }
#qrCanvas canvas,#qrCanvas svg { display:block; width:100% !important; height:100% !important; }
#qrCanvas .bank-qr { display:block; width:100%; height:100%; border-radius:5px; background:#fff; object-fit:contain; }
.qr-placeholder { position:relative; z-index:2; display:grid; grid-area:1/1; place-items:center; gap:8px; width:100%; color:#252c37; text-align:center; }
.qr-placeholder strong { font-size:16px; }
.qr-placeholder small { color:#767e89; font-size:11px; }
.mini-qr { position:relative; display:block; width:136px; height:136px; margin-bottom:10px; background:repeating-conic-gradient(from 0deg,#dce2e9 0 25%,transparent 0 50%) 50%/24px 24px; opacity:.78; }
.mini-qr i { position:absolute; width:40px; height:40px; border:9px solid #b6c0cb; background:#fff; }
.mini-qr i:nth-child(1) { left:6px; top:6px; }.mini-qr i:nth-child(2) { right:6px; top:6px; }.mini-qr i:nth-child(3) { left:6px; bottom:6px; }
.mini-qr i:nth-child(4),.mini-qr i:nth-child(5) { width:14px; height:14px; border:0; background:#b6c0cb; }.mini-qr i:nth-child(4) { right:25px; bottom:33px; }.mini-qr i:nth-child(5) { right:44px; bottom:10px; }
.overlay-text { position:absolute; z-index:4; left:50%; top:90%; max-width:90%; padding:4px 7px; color:#000; font-family:"Be Vietnam Pro",sans-serif; font-size:19px; font-weight:700; line-height:1.15; text-align:center; text-shadow:0 1px 5px rgba(255,255,255,.8); white-space:nowrap; cursor:grab; user-select:none; transform:translate(-50%,-50%); }
.overlay-text:empty { display:none; }
.overlay-text:active { cursor:grabbing; }
.overlay-text:focus-visible { outline:1px dashed #fff; outline-offset:3px; }

.download-size { margin-top:14px; }
.download-size select { height:45px; }
.primary-button { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:52px; margin-top:14px; border:1px solid #4b8bea; border-radius:6px; background:var(--blue); color:#fff; cursor:pointer; font-size:13px; font-weight:800; box-shadow:none; transition:background .16s ease; }
.primary-button span { font-size:19px; font-weight:500; }
.primary-button:hover:not(:disabled) { background:var(--blue-hover); }
.primary-button:active:not(:disabled) { background:#205bb4; }
.primary-button:disabled { border-color:#444447; background:#333334; color:#747478; cursor:not-allowed; }
.secondary-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:9px; }
.secondary-actions button { min-height:42px; border:1px solid #505053; border-radius:6px; background:#333334; color:#c5c5c8; cursor:pointer; font-size:10px; font-weight:700; }
.secondary-actions button:hover:not(:disabled) { border-color:#6da4f6; color:#fff; }
.secondary-actions button:disabled { opacity:.42; cursor:not-allowed; }
.scan-note { display:flex; align-items:flex-start; gap:7px; margin:14px 1px 0; color:#929296; font-size:9px; line-height:1.5; }
.scan-note span { color:#68a0f2; }

.faq-section { padding:52px clamp(22px,4vw,68px) 58px; border-top:1px solid var(--line); background:#202021; }
.faq-wrap { width:min(100%,920px); margin-inline:auto; }
.faq-kicker { margin:0 0 8px; color:#73a8f7; font-size:10px; font-weight:800; letter-spacing:.16em; }
.faq-wrap > h2 { margin:0 0 26px; font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.035em; }
.faq-list { border-top:1px solid #48484a; }
.faq-list details { border-bottom:1px solid #48484a; }
.faq-list summary { position:relative; padding:20px 42px 20px 0; color:#f4f4f5; cursor:pointer; font-size:14px; font-weight:700; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; top:50%; right:3px; color:#73a8f7; font-size:23px; font-weight:400; transform:translateY(-50%); transition:transform .16s ease; }
.faq-list details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq-list details[open] summary { color:#73a8f7; }
.faq-list p { max-width:760px; margin:-5px 42px 20px 0; color:var(--muted); font-size:12px; line-height:1.7; }

footer { display:grid; place-items:center; min-height:62px; padding:16px 22px; border-top:1px solid var(--line); background:#1c1c1d; color:#85858a; font-size:11px; }
footer p { margin:0; }
footer a { color:#72a8f7; font-weight:700; text-decoration:none; }
footer a:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.toast { position:fixed; z-index:100; left:50%; bottom:24px; max-width:min(420px,calc(100% - 30px)); padding:11px 15px; border:1px solid #5d8ed7; border-radius:6px; background:#296acc; color:#fff; font-size:11px; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:.18s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:1050px) {
  .workspace { grid-template-columns:minmax(0,1.7fr) minmax(330px,.8fr); }
  .type-menu { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .preview-card { padding-inline:25px; }
}

@media (max-width:820px) {
  .topbar { min-height:76px; padding-inline:18px; }
  .brand img { width:42px; height:42px; }
  .brand strong { font-size:19px; }
  .workspace { grid-template-columns:1fr; }
  .builder { padding-inline:20px; }
  .preview-card { position:relative; min-height:0; border-top:1px solid var(--line); border-left:0; }
  .type-menu { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .qr-stage { width:min(100%,410px); margin-inline:auto; }
}

@media (max-width:580px) {
  .topbar { min-height:68px; }
  .brand img { width:36px; height:36px; }
  .brand small { display:none; }
  .builder { padding-inline:14px; }
  .intro { padding:24px 0 21px; }
  .intro h1 { font-size:32px; }
  .intro > p:last-child { font-size:12px; }
  .type-card,.content-card,.design-card { padding-block:23px; }
  .type-menu { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-grid,.design-grid { grid-template-columns:1fr; gap:14px; }
  label.full,.logo-upload { grid-column:auto; }
  .preview-card { padding:25px 18px 29px; }
  .qr-stage { padding:18px; }
  .secondary-actions { grid-template-columns:1fr 1fr; }
  .secondary-actions #resetButton { grid-column:1/-1; }
  .faq-section { padding:38px 18px 42px; }
  .faq-wrap > h2 { margin-bottom:18px; font-size:27px; }
  .faq-list summary { padding-block:18px; font-size:13px; }
  .faq-list p { margin-right:24px; }
  footer { min-height:58px; padding-block:13px; text-align:center; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}