*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-base: #0d0d0d;--bg-surface: #111111;--bg-elevated: #1a1a1a;--bg-input: #1a1a1a;--border: #2a2a2a;--border-focus: #39c211;--accent: #39c211;--accent-hover: #2fa80e;--text-primary: #ffffff;--text-secondary: #cccccc;--text-muted: #888888;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px}body{background:var(--bg-base);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5;min-height:100vh}button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}input,textarea,select{font:inherit;color:inherit}.app{display:flex;flex-direction:column;min-height:100vh}.app-header{background:var(--bg-surface);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;gap:10px;flex-shrink:0}.app-header__icon{width:28px;height:28px;background:var(--accent);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.app-header__title{font-size:16px;font-weight:600}.app-input-section{background:var(--bg-surface);border-bottom:1px solid var(--border);padding:14px 24px}.app-main{display:flex;flex:1;min-height:0}.app-settings{width:320px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.settings-panel{display:flex;flex-direction:column;height:100%;overflow:hidden}.settings-size-section{padding:14px 16px 12px;border-bottom:1px solid var(--border);flex-shrink:0}.settings-size-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.settings-size-value{font-size:16px;font-weight:700;color:var(--accent)}.settings-size-minmax{display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);margin-top:3px}.settings-tab-content{flex:1;overflow-y:auto;padding:12px 16px}.settings-panel .tabs{padding:3px;margin:12px 16px 0}.settings-download-section{padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0}.settings-download-btns{display:flex;gap:6px}.settings-download-btns .btn-download{flex:1}.app-preview{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:16px}.tabs{display:flex;gap:3px;background:var(--bg-elevated);border-radius:var(--radius-md);padding:3px;margin-bottom:16px}.tab-btn{flex:1;padding:6px 8px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;color:var(--text-muted);transition:all .15s;text-align:center}.tab-btn.active{background:var(--accent);color:#000;font-weight:700}.field{margin-bottom:12px}.field label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:5px}.field input,.field textarea,.field select{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;color:var(--text-primary);outline:none;transition:border-color .15s}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--border-focus)}.field textarea{resize:vertical;min-height:80px}.field select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.btn-primary{background:var(--accent);color:#000;font-weight:700;padding:9px 20px;border-radius:var(--radius-md);font-size:13px;transition:background .15s;white-space:nowrap}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border);padding:8px 14px;border-radius:var(--radius-md);font-size:12px;transition:all .15s}.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}.btn-secondary.active{border-color:var(--accent);color:var(--accent);background:#39c21114}.btn-download{flex:1;padding:8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;text-align:center;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-muted);transition:all .15s}.btn-download:hover{border-color:var(--accent);color:var(--accent);background:#39c21114}.mode-selector{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}.mode-btn{padding:5px 12px;border-radius:var(--radius-sm);font-size:12px;background:var(--bg-elevated);color:var(--text-muted);border:1px solid var(--border);transition:all .15s}.mode-btn.active{background:var(--accent);color:#000;font-weight:700;border-color:var(--accent)}.color-row{display:flex;gap:8px;align-items:center;margin-bottom:12px}.color-swatch{width:32px;height:32px;border-radius:var(--radius-sm);border:2px solid var(--border);cursor:pointer;flex-shrink:0;overflow:hidden}.color-swatch input[type=color]{width:100%;height:100%;border:none;padding:0;cursor:pointer;background:none}.color-hex{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:11px;font-family:monospace}.style-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.style-card{background:var(--bg-elevated);border:2px solid var(--border);border-radius:var(--radius-md);padding:10px;cursor:pointer;text-align:center;transition:all .15s}.style-card.active{border-color:var(--accent);background:#39c2110f}.style-card__preview{width:40px;height:40px;margin:0 auto 6px;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.style-card__label{font-size:11px;color:var(--text-secondary)}.upload-area{display:block;border:2px dashed var(--border);border-radius:var(--radius-md);padding:20px;text-align:center;cursor:pointer;transition:border-color .15s;color:var(--text-muted);font-size:12px}.upload-area:hover{border-color:var(--accent)}.upload-area input{display:none}.size-display{text-align:center;font-size:24px;font-weight:700;color:var(--accent);margin-bottom:8px}.size-unit{font-size:14px;color:var(--text-muted)}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.preview-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.preview-empty{color:var(--text-muted);font-size:13px;text-align:center}.qr-version-badge{font-size:10px;color:var(--text-muted);letter-spacing:.05em;background:var(--bg-elevated);border:1px solid var(--border);border-radius:20px;padding:3px 10px}.btn-copy{width:100%;padding:7px 12px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-muted);transition:all .15s;text-align:center}.btn-copy:hover{border-color:var(--accent);color:var(--accent)}.btn-copy.copied{border-color:var(--accent);color:var(--accent);background:#39c2111a}.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:4px}.theme-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 6px;background:var(--bg-elevated);border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s}.theme-card:hover{border-color:var(--accent)}.theme-preview{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;width:24px;height:24px;background:var(--theme-bg, #fff);border-radius:3px;padding:3px}.theme-dot{background:var(--theme-dot, #000);border-radius:1px}.theme-label{font-size:10px;color:var(--text-muted)}.btn-scan{padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-muted);transition:all .15s;white-space:nowrap;cursor:pointer}.btn-scan:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.btn-scan.ok{border-color:#39c211;color:#39c211;background:#39c21114}.btn-scan.fail{border-color:#e55;color:#e55;background:#ee555514}.btn-scan.scanning{opacity:.5}.scan-result{width:100%;border-radius:var(--radius-sm);padding:8px 12px;font-size:12px;display:flex;flex-direction:column;gap:4px}.scan-result.ok{background:#39c21112;border:1px solid rgba(57,194,17,.3);color:var(--text-secondary)}.scan-result.fail{background:#ee555512;border:1px solid rgba(238,85,85,.3);color:#e88}.scan-result-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.scan-result-text{font-family:monospace;font-size:11px;word-break:break-all;color:var(--text-primary)}.qr-content-preview{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px}.qr-content-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.qr-content-toggle{font-size:10px;color:var(--text-muted)}.qr-content-text{font-family:monospace;font-size:11px;color:var(--text-secondary);word-break:break-all;margin-top:6px}.qr-content-text.truncated{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qr-content-expand{margin-top:4px;font-size:10px;color:var(--accent);cursor:pointer;background:none;border:none;padding:0}.upload-area.dragging{border-color:var(--accent);background:#39c2110d;color:var(--accent)}@media (max-width: 768px){.app-input-section{padding:12px 16px}.app-main{flex-direction:column;min-height:0;flex:unset}.app-preview{order:-1;padding:16px;justify-content:flex-start;gap:10px;border-bottom:1px solid var(--border)}.app-settings{width:100%;border-right:none;flex-shrink:unset}.settings-panel{height:auto;overflow:visible}.settings-tab-content{flex:unset;overflow-y:visible;max-height:none}.settings-download-section{position:static}.style-grid{grid-template-columns:repeat(3,1fr)}}