#qr-studio{max-width:1440px;margin:auto;padding:4px 0 20px}#qr-studio svg{width:22px;height:22px;flex:none}.qs-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:16px;align-items:stretch}.qs-title{border-left:5px solid var(--yellow);padding-left:20px;margin-bottom:22px}#qr-studio h1,#qr-studio .qs-title h2{font-size:clamp(25px,2.6vw,34px);line-height:1.3;margin:0;font-weight:750;letter-spacing:-.025em}#qr-studio h1:before,#qr-studio h2:before{display:none}.qs-tabs{display:grid;grid-template-columns:1fr 1fr;width:min(100%,380px);gap:0;margin-bottom:16px}.qs-tabs button{display:flex;justify-content:center;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;min-height:42px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}.qs-tabs button[aria-pressed=true]{border-color:#edc100;background:color-mix(in srgb,var(--yellow) 13%,var(--white))}#qr-studio textarea{display:block;width:100%;min-height:44px;margin:7px 0 0;padding:10px 14px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:13px;background:var(--white);color:var(--ink);resize:vertical;box-sizing:border-box}#qr-studio select,#qr-studio input[type=number]{width:100%;min-width:0;min-height:40px;padding:8px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:13px;background:var(--white);color:var(--ink);box-sizing:border-box;margin-top:7px}.qs-download-settings{border-top:1px solid var(--line);padding-top:20px;margin-top:22px}#qr-studio .qs-download-settings h2{font-size:21px;margin:0 0 14px;padding-left:20px;border-left:5px solid var(--yellow)}.qs-settings-grid{display:grid;grid-template-columns:1.75fr 1fr 1fr;gap:18px;align-items:start}.qs-label,.qs-settings-grid .pp-field{font-size:12px}.qs-formats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:7px}.qs-formats label{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;min-height:66px;box-sizing:border-box}.qs-formats label:has(input:checked){border-color:#edc100;background:color-mix(in srgb,var(--yellow) 6%,var(--white))}.qs-formats label input{accent-color:#e8b900;margin:0 0 0 auto;width:16px;flex:none}.qs-formats b,.qs-formats small{display:block}.qs-formats b{font-size:14px}.qs-formats small{font-size:11px;color:var(--muted)}.qs-custom{border-top:1px solid var(--line);margin-top:24px;padding-top:12px}.qs-custom>summary{font-size:16px;font-weight:700;cursor:pointer}.qs-colors{display:grid;grid-template-columns:1fr 1fr 1.4fr auto;align-items:end;gap:16px;margin-top:16px}.qs-colors .pp-field{margin:0;font-size:12px}.qs-color{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:7px;padding:4px 8px;margin-top:6px;height:38px;box-sizing:border-box}.qs-color input[type=color]{width:29px;height:29px;min-height:0;min-width:0;border:0;padding:0;background:none;cursor:pointer}.qs-color output{font-size:12px}.qs-border{display:flex;align-items:center;gap:10px;height:38px;margin-top:6px}.qs-border input{width:100%;min-width:30px;accent-color:#f2ca26}.qs-border output{font-size:12px;white-space:nowrap;border:1px solid var(--line);border-radius:5px;padding:5px 8px}.qs-colors .pp-reset{font-size:12px;min-height:38px;padding:8px 10px;white-space:nowrap}.qs-custom .pp-advice{margin:14px 0 0;padding:7px 12px;font-size:11px}.qs-advanced{font-size:12px;margin-top:12px}.qs-advanced>summary{cursor:pointer;color:var(--muted)}.qs-advanced-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:12px}.qs-boost{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px}.qs-preview{background:linear-gradient(145deg,var(--white),var(--surface))}.qs-preview .pp-preview-badge{top:30px;right:24px;padding:0;border:0;background:none;color:var(--muted)}.qs-paper{width:min(100%,290px);aspect-ratio:1;background:white;border-radius:9px;box-shadow:0 6px 24px #0000000a;margin:12px auto 0;overflow:hidden}.qs-paper canvas{display:block;width:100%;height:100%}.qs-paper canvas[hidden]{display:none}.qs-sample-note{text-align:center;color:var(--muted);font-size:11px;margin:7px 0 16px}.qs-meta{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px;border:1px solid var(--line);border-radius:8px;margin-bottom:12px;font-size:12px}.qs-meta>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;min-width:0}.qs-meta small{font-size:10px;color:var(--muted);white-space:nowrap}#qs-error{font-size:12px;color:#bf3535;margin:10px 0 0}#qs-error:empty{display:none}#qr-studio :disabled{cursor:not-allowed}#qr-studio .pp-benefits{border-top:0}#qr-studio .pp-benefits>div>svg{background:none;border-radius:0;padding:6px;color:var(--ink)}
@media(max-width:1150px){.qs-settings-grid{grid-template-columns:1.5fr 1fr}.qs-settings-grid>.pp-field:last-child{grid-column:2}.qs-colors{grid-template-columns:1fr 1fr}.qs-layout{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr)}.qs-formats label{gap:6px;padding:10px}.qs-preview .pp-preview-badge{position:static;display:block;margin:-8px 0 10px 25px}}
@media(max-width:850px){.qs-layout{grid-template-columns:1fr}.qs-settings-grid{grid-template-columns:1.5fr 1fr 1fr}.qs-settings-grid>.pp-field:last-child{grid-column:auto}.qs-preview .pp-preview-badge{position:absolute;top:27px;right:20px;margin:0}.qs-paper{width:min(100%,310px)}}
@media(max-width:560px){.qs-settings-grid{grid-template-columns:1fr 1fr;gap:12px}.qs-settings-grid>div:first-child{grid-column:1/-1}.qs-settings-grid>.pp-field{margin-bottom:0}.qs-colors{gap:12px}.qs-title{padding-left:14px}.qs-title .pp-step{font-size:12px}.qs-meta{flex-direction:column;align-items:stretch;gap:4px}.qs-advanced-fields{grid-template-columns:1fr}.qs-preview .pp-preview-badge{font-size:10px;right:18px}.qs-tabs button{font-size:13px}#qr-studio .pp-panel{padding:18px}}
#qr-studio .pp-benefits,#qr-studio .pp-benefits p,#qr-studio .pp-benefits strong{color:var(--ink);opacity:1}
#qr-studio .pp-benefits small{color:var(--muted);opacity:1}
#qr-studio textarea::placeholder{color:var(--muted);opacity:.75}
.qs-paper:has(canvas[hidden]){display:grid;place-items:center;background:var(--surface);border:1px dashed var(--line)}
.qs-paper:has(canvas[hidden])::after{content:'กรอกลิงก์หรือข้อความเพื่อสร้าง QR';color:var(--muted);font-size:13px;text-align:center;padding:24px}
.qs-meta>span:empty::after{content:'ยังไม่ได้กรอกข้อมูล';color:var(--muted);font-weight:400}