*,*: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);padding:16px;overflow-y:auto}.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}.preview-content{display:flex;align-items:center;gap:20px}.download-sidebar{display:flex;flex-direction:column;align-items:stretch;flex-shrink:0}.download-btns{display:flex;flex-direction:column;gap:6px}.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}