:root{font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;color:#191c20;background:#f2f4f6;font-synthesis:none;--page: #f2f4f6;--surface: #fbfcfd;--surface-2: #f4f6f8;--ink: #191c20;--muted: #626a73;--line: #dce1e6;--line-strong: #b9c1ca;--accent: #2052bb;--accent-hover: #183f91;--on-accent: #f8f8f8;--stage: #e8edf2;--warning: #a13d12;--success: #176b52;--shadow: 0 12px 36px rgba(25, 32, 40, .06)}@media(prefers-color-scheme:dark){:root{color:#eef1f4;background:#121416;--page: #121416;--surface: #1b1e21;--surface-2: #24282c;--ink: #eef1f4;--muted: #a2abb4;--line: #343a40;--line-strong: #525c65;--accent: #8baff7;--accent-hover: #abc4f8;--on-accent: #10244c;--stage: #101315;--warning: #ffae87;--success: #77d3b2;--shadow: 0 16px 42px rgba(0, 0, 0, .2)}}*{box-sizing:border-box}html{min-width:320px;scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;min-height:100dvh}button,input,textarea,select{font:inherit;color:inherit;border-radius:0}button,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:not-allowed;opacity:.42}button,a,input,textarea,select{outline:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{transition:background-color .16s ease,color .16s ease,border-color .16s ease,opacity .16s ease}::selection{color:var(--on-accent);background:var(--accent)}.app-shell{min-height:100vh;min-height:100dvh;background:var(--page);color:var(--ink)}.topbar{height:68px;padding:0 32px;border-bottom:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark{width:28px;height:28px;flex:none}.brand>div{display:flex;align-items:baseline;gap:12px}.brand strong{font-size:16px;font-weight:650;letter-spacing:.01em;white-space:nowrap}.brand span{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;letter-spacing:.18em;color:var(--muted)}.local-badge{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;white-space:nowrap}.local-badge i{width:6px;height:6px;border-radius:50%;background:var(--success);margin-left:4px}.workbench{max-width:1440px;margin:0 auto;padding:24px 32px 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,500px);gap:24px;align-items:start}.parameters{min-width:0;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}.panel-heading{min-height:88px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}.overline{display:block;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;letter-spacing:.18em;color:var(--muted);margin-bottom:4px}h1{margin:0;font-size:23px;line-height:1.35;font-weight:650;letter-spacing:-.02em}h2{margin:0;font-size:14px;font-weight:650}.button{min-height:44px;border:1px solid transparent;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;font-size:13px;font-weight:550}.button.ghost{border-color:var(--line);color:var(--muted)}.button.ghost:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line-strong)}.button.primary{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}.button.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.button.secondary{background:var(--surface);border-color:var(--line-strong)}.button.secondary:hover:not(:disabled){background:var(--surface-2);border-color:var(--accent);color:var(--accent)}.type-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);padding:0 24px}.type-tabs button{min-height:58px;padding:0 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:9px;font-size:14px}.type-tabs button:hover{color:var(--ink);background:var(--surface-2)}.type-tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}.content-section{padding:24px 24px 18px;border-bottom:1px solid var(--line)}.field{display:flex;flex-direction:column;gap:8px;min-width:0}.field-label{min-height:20px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;font-weight:550}.field-label small{color:var(--muted);font-size:11px;font-weight:400}input:not([type=checkbox]):not([type=range]):not([type=color]),textarea,select{width:100%;min-height:44px;border:1px solid var(--line-strong);background:var(--surface);padding:10px 12px;font-size:14px;transition:border-color .16s ease,background-color .16s ease}textarea{resize:vertical;min-height:116px;line-height:1.65}input:hover,textarea:hover,select:hover{border-color:var(--accent)}input:focus,textarea:focus,select:focus{border-color:var(--accent)}input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--warning)}input:disabled{color:var(--muted);background:var(--surface-2);cursor:not-allowed}select{cursor:pointer}.character-count{display:flex;justify-content:flex-end;gap:16px;color:var(--muted);font-size:11px;margin-top:8px;font-variant-numeric:tabular-nums}.inline-message{margin:10px 0 0;min-height:18px;color:var(--success);font-size:12px;line-height:1.5}.inline-message.error{color:var(--warning)}.wifi-fields{display:flex;flex-direction:column;gap:18px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.checkbox-row{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}.checkbox-row input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border:1px solid var(--line-strong);background:var(--surface);display:grid;place-content:center;flex:none}.checkbox-row input:before{content:"";width:9px;height:5px;border-left:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .12s ease}.checkbox-row input:checked{background:var(--accent);border-color:var(--accent)}.checkbox-row input:checked:before{transform:rotate(-45deg) scale(1)}.checkbox-row span{display:flex;flex-direction:column;gap:2px}.checkbox-row strong{font-size:13px;font-weight:550}.checkbox-row small{font-size:11px;color:var(--muted)}.control-section{padding:22px 24px;border-bottom:1px solid var(--line)}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-title>span{color:var(--muted);font-size:11px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.section-title h2{display:flex;align-items:center;gap:8px}.color-presets{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line)}.color-presets button{min-width:0;min-height:82px;padding:10px 4px 8px;border:0;border-right:1px solid var(--line);background:var(--surface);color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;position:relative;font-size:11px}.color-presets button:last-child{border-right:0}.color-presets button:hover{background:var(--surface-2);color:var(--ink)}.color-presets button.active{color:var(--accent);background:var(--surface-2);box-shadow:inset 0 -2px var(--accent)}.color-presets button>svg{position:absolute;top:5px;right:5px}.swatch{width:32px;height:32px;border:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:5px}.swatch i{background:currentColor}.swatch i:last-child{opacity:.45}.custom-colors{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.color-input{display:grid;grid-template-columns:44px 1fr}.color-input input[type=color]{width:44px;height:44px;padding:5px;background:var(--surface);border:1px solid var(--line-strong);border-right:0;cursor:pointer}.color-input input:not([type=color]){font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}.contrast-note{margin:12px 0 0;display:flex;align-items:center;justify-content:space-between;color:var(--success);font-size:11px}.contrast-note span{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.contrast-note.warning{color:var(--warning)}.two-controls{display:grid;grid-template-columns:1fr 1.25fr;gap:20px}.segment{display:flex;min-height:42px;padding:3px;background:var(--surface-2);border:1px solid var(--line)}.segment button{flex:1;min-width:0;min-height:36px;padding:0 8px;border:0;background:transparent;color:var(--muted);font-size:12px}.segment button:hover{color:var(--ink)}.segment button[aria-pressed=true]{color:var(--accent);background:var(--surface);box-shadow:0 1px 3px #00000014;font-weight:650}.control-help{color:var(--muted);font-size:10px;margin:9px 0 0;line-height:1.5}.upload-button{width:100%;min-height:72px;padding:12px 14px;border:1px dashed var(--line-strong);background:var(--surface-2);display:flex;align-items:center;gap:12px;text-align:left}.upload-button:hover{border-color:var(--accent);background:var(--surface)}.upload-button>svg{color:var(--accent);flex:none}.upload-button>span:nth-child(2){display:flex;flex-direction:column;gap:3px}.upload-button strong{font-size:12px;font-weight:600}.upload-button small{color:var(--muted);font-size:10px}.upload-action{margin-left:auto;color:var(--accent);font-size:11px;white-space:nowrap}.visually-hidden{position:absolute;width:1px!important;height:1px!important;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.logo-editor{display:flex;align-items:center;gap:16px}.logo-preview{width:68px;height:68px;padding:8px;background:#fff;border:1px solid var(--line);flex:none}.logo-preview img{display:block;width:100%;height:100%;object-fit:contain}.logo-actions{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.logo-actions strong{font-size:13px}.logo-actions>span{color:var(--muted);font-size:11px}.logo-actions .button{min-height:32px;padding:0;border:0;margin-top:3px}.danger-text{color:var(--warning)}.slider-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--line-strong)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;margin-top:-7px;border:3px solid var(--accent);border-radius:2px;background:var(--surface)}input[type=range]::-moz-range-track{height:4px;background:var(--line-strong)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border:3px solid var(--accent);border-radius:2px;background:var(--surface)}.history-section{padding:22px 24px 24px}.text-button{border:0;padding:6px;min-height:32px;background:transparent;color:var(--accent);font-size:11px}.text-button:hover{text-decoration:underline}.history-empty{padding:18px;border:1px dashed var(--line);color:var(--muted);text-align:center;font-size:12px}.history-list{border-top:1px solid var(--line)}.history-list button{width:100%;min-height:48px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;padding:8px 4px}.history-list button:hover{background:var(--surface-2)}.history-type{color:var(--accent);font-size:11px}.history-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.history-time{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.storage-note{margin:12px 0 0;color:var(--muted);font-size:10px;line-height:1.6}.preview-panel{min-width:0;position:sticky;top:24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}.preview-heading{min-height:56px;padding:0 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px}.preview-heading>div{display:flex;align-items:center;gap:8px}.preview-heading strong{font-size:13px}.preview-heading>span{color:var(--muted);font-size:11px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 14%,transparent)}.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.metrics>div{min-height:76px;padding:14px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px}.metrics>div:last-child{border-right:0}.metrics span{color:var(--muted);font-size:9px;letter-spacing:.12em;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.metrics strong{font-size:23px;line-height:1.2;font-weight:550;font-variant-numeric:tabular-nums}.metrics small{margin-left:5px;color:var(--muted);font-size:10px;font-weight:400}.qr-stage{min-height:398px;padding:32px;background-color:var(--stage);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;display:grid;place-items:center;position:relative}.qr-paper{width:min(100%,334px);aspect-ratio:1;padding:0;background:#fff;box-shadow:0 8px 26px #141e281a}.qr-svg{display:block;width:100%;height:100%}.qr-svg svg{display:block;width:100%;height:100%}.crop-mark{position:absolute;width:14px;height:14px;border-color:var(--line-strong);border-style:solid}.top-left{top:16px;left:16px;border-width:1px 0 0 1px}.top-right{top:16px;right:16px;border-width:1px 1px 0 0}.bottom-left{bottom:16px;left:16px;border-width:0 0 1px 1px}.bottom-right{bottom:16px;right:16px;border-width:0 1px 1px 0}.preview-placeholder{max-width:310px;padding:28px;text-align:center;color:var(--muted)}.preview-placeholder .brand-mark{width:42px;height:42px;margin-bottom:18px;opacity:.4}.preview-placeholder strong{display:block;color:var(--ink);font-size:15px;margin-bottom:8px}.preview-placeholder p{margin:0;font-size:12px;line-height:1.7}.capacity{padding:16px 22px;border-bottom:1px solid var(--line)}.capacity>div:first-child{display:flex;align-items:center;justify-content:space-between;font-size:11px}.capacity>div:first-child span{color:var(--muted)}.capacity>div:first-child strong{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}.capacity-track{height:4px;background:var(--surface-2);margin-top:9px;overflow:hidden}.capacity-track i{display:block;height:100%;background:var(--accent);transition:width .2s ease}.capacity p{margin:8px 0 0;color:var(--muted);font-size:10px}.scan-check{padding:16px 22px;border-bottom:1px solid var(--line)}.scan-check>span{font-size:12px;font-weight:650}.scan-check>p{color:var(--muted);font-size:10px;margin:4px 0 10px}.scan-check pre{margin:0;max-height:70px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:9px 10px;background:var(--surface-2);color:var(--muted);font:10px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}.export-area{padding:18px 22px 20px}.export-size{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.export-size label{color:var(--muted);font-size:11px}.export-size select{width:174px;min-height:38px;padding:6px 10px;font-size:12px}.export-buttons{display:grid;grid-template-columns:1.25fr 1fr;gap:10px}.export-buttons .button{min-height:46px}.card-button{width:100%;margin-top:10px;color:var(--accent);background:var(--surface-2);border-color:var(--line)}.card-button:hover:not(:disabled){border-color:var(--accent);background:var(--surface)}.export-feedback{min-height:17px;margin:10px 0 0;color:var(--muted);text-align:center;font-size:10px}footer{max-width:1440px;margin:0 auto;padding:0 32px 28px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:10px;letter-spacing:.04em}@media(min-width:1280px){.workbench{grid-template-columns:minmax(0,1fr) 500px;gap:28px}}@media(max-width:1100px){.workbench{padding:20px;grid-template-columns:minmax(0,1fr) 420px;gap:20px}.topbar{padding:0 20px}.panel-heading,.content-section,.control-section,.history-section{padding-left:20px;padding-right:20px}.type-tabs{padding:0 12px}.color-presets{grid-template-columns:repeat(3,1fr)}.color-presets button{min-height:70px;border-bottom:1px solid var(--line)}.color-presets button:nth-child(3){border-right:0}.color-presets button:nth-child(n+4){border-bottom:0}.qr-stage{min-height:360px;padding:28px}.qr-paper{width:min(100%,304px)}.two-controls{grid-template-columns:1fr}}@media(max-width:860px){.workbench{grid-template-columns:1fr;max-width:720px;padding:16px 16px 32px}.preview-panel{position:static}.topbar{padding:0 16px}.brand>div{gap:8px}.local-badge span{display:none}.qr-stage{min-height:380px}.qr-paper{width:min(100%,340px)}.two-controls{grid-template-columns:1fr 1.25fr}footer{padding:0 20px 24px}}@media(max-width:520px){.topbar{height:62px}.brand strong{font-size:14px}.brand span{display:none}.local-badge{gap:4px}.workbench{padding:0 0 24px;gap:16px}.parameters,.preview-panel{border-left:0;border-right:0;box-shadow:none}.panel-heading{min-height:80px;padding:16px}h1{font-size:21px}.panel-heading .button{padding:0 11px;font-size:12px}.type-tabs{padding:0 8px}.type-tabs button{min-height:56px}.content-section,.control-section,.history-section{padding-left:16px;padding-right:16px}.field-grid,.custom-colors,.slider-grid{gap:12px}.two-controls{grid-template-columns:1fr;gap:20px}.history-time{display:none}.history-list button{grid-template-columns:44px minmax(0,1fr)}.preview-heading,.capacity,.scan-check,.export-area{padding-left:16px;padding-right:16px}.qr-stage{min-height:0;padding:32px 24px}.qr-paper{width:min(100%,340px)}.metrics>div{padding:12px 16px}.metrics strong{font-size:21px}.export-size select{width:164px}footer{padding:0 16px 20px;flex-direction:column;gap:5px}}@media(max-width:370px){.color-presets{grid-template-columns:repeat(2,1fr)}.color-presets button:nth-child(3){border-right:1px solid var(--line)}.color-presets button:nth-child(2n){border-right:0}.color-presets button:nth-child(n+4){border-bottom:1px solid var(--line)}.color-presets button:nth-child(n+5){border-bottom:0}.field-grid,.export-buttons{grid-template-columns:1fr}.export-size{align-items:flex-start;flex-direction:column;gap:8px}.export-size select{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
