:root{--bg:#f4f5fb;--surface:#fff;--surface-2:#f7f8fc;--border:#e6e8f0;--text:#1a1a2e;--text-soft:#5b6072;--muted:#8b90a3;--brand:#7b2ff7;--brand-2:#4b6cff;--brand-grad:linear-gradient(135deg,#7b2ff7,#4b6cff);--shadow:0 4px 20px rgba(20,20,50,.06);--shadow-lg:0 12px 40px rgba(20,20,50,.12);--radius:14px;--radius-sm:9px}[data-theme=dark]{--bg:#0e0f1a;--surface:#171826;--surface-2:#1e2032;--border:#2a2c42;--text:#f0f1f8;--text-soft:#a9adc4;--muted:#6d7290;--shadow:0 4px 20px rgba(0,0,0,.35);--shadow-lg:0 12px 40px rgba(0,0,0,.5)}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}.toolbar{justify-content:space-between;padding:12px 24px;background:var(--surface);border-bottom:1px solid var(--border);position:-webkit-sticky;position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}.toolbar,.toolbar__brand{display:flex;align-items:center}.toolbar__brand{gap:12px}.toolbar__logo{height:38px;width:auto;object-fit:contain}.toolbar__logo-fallback{height:40px;width:40px;display:grid;place-items:center;background:var(--brand-grad);color:#fff;font-weight:800;font-size:16px;border-radius:10px;letter-spacing:.5px}.toolbar__title{display:flex;flex-direction:column;line-height:1.1}.toolbar__name{font-weight:800;font-size:17px;letter-spacing:.3px}.toolbar__sub{font-size:12px;font-weight:600;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.toolbar__nav{display:flex;align-items:center;gap:14px}.toolbar__badge{font-size:12px;font-weight:600;color:var(--text-soft);padding:6px 12px;border-radius:999px}.toolbar__badge,.toolbar__theme{background:var(--surface-2);border:1px solid var(--border)}.toolbar__theme{width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:16px;transition:transform .15s}.toolbar__theme:hover{transform:scale(1.08)}.layout{flex:1 1;display:grid;grid-template-columns:230px 1fr 380px;grid-gap:18px;gap:18px;padding:18px 24px;max-width:1500px;width:100%;margin:0 auto;align-items:start}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.panel--preview{position:-webkit-sticky;position:sticky;top:82px}.panel__heading{font-size:15px;font-weight:700;margin-bottom:14px}.type-list{display:flex;flex-direction:column;gap:4px}.type-btn{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--text-soft);cursor:pointer;text-align:left;font-size:14px;font-weight:500;font-family:inherit;transition:all .12s;width:100%}.type-btn:hover{background:var(--surface-2);color:var(--text)}.type-btn--active{background:var(--brand-grad);color:#fff;box-shadow:0 4px 12px rgba(123,47,247,.3)}.type-btn__ico{width:22px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.type-btn__ico svg{width:18px;height:18px}.tabs{display:flex;gap:6px;margin-bottom:16px;background:var(--surface-2);padding:4px;border-radius:10px}.tab{flex:1 1;padding:8px;border:none;background:transparent;color:var(--text-soft);font-weight:600;font-size:13px;border-radius:7px;cursor:pointer;font-family:inherit;transition:all .12s}.tab--active{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}.tabpane{display:none}.tabpane--active{display:block;animation:fade .2s}@keyframes fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.fields{gap:14px}.field,.fields{display:flex;flex-direction:column}.field{gap:6px}.field--split{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}.field--split>div{display:flex;flex-direction:column;gap:6px}.field__label{font-size:12.5px;font-weight:600;color:var(--text-soft)}.file-input,.input{width:100%;padding:10px 12px;font-size:14px;font-family:inherit;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);transition:border .12s}.file-input:focus,.input:focus{outline:none;border-color:var(--brand)}textarea.input{resize:vertical;min-height:84px}.color{height:42px;padding:4px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2)}.color,input[type=range]{width:100%;cursor:pointer}input[type=range]{accent-color:var(--brand)}.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-soft);cursor:pointer}.check input{accent-color:var(--brand);width:16px;height:16px}.sep{border:none;border-top:1px solid var(--border);margin:4px 0}.logo-row{display:flex;gap:8px;align-items:center}.logo-row .file-input{flex:1 1}.preset-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}.chip{padding:6px 12px;font-size:12.5px;font-weight:600;font-family:inherit;border:1px solid var(--border);background:var(--surface-2);color:var(--text-soft);border-radius:999px;cursor:pointer;transition:all .12s}.chip:hover{border-color:var(--brand);color:var(--brand)}.preview{display:grid;place-items:center;background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--radius);padding:22px;margin-bottom:16px;min-height:300px}.preview__qr{line-height:0}.preview__qr canvas,.preview__qr svg{border-radius:8px;max-width:100%;height:auto!important;box-shadow:var(--shadow-lg)}.size-row{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}.download__formats{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px}.btn{padding:11px 14px;font-size:13.5px;font-weight:600;font-family:inherit;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:var(--radius-sm);cursor:pointer;transition:all .12s}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}.btn--primary{grid-column:1/-1;background:var(--brand-grad);color:#fff;border:none}.btn--ghost{background:transparent}.btn--sm{padding:8px 10px;font-size:12.5px}.preview__note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.5}.footer{text-align:center;padding:16px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--border);background:var(--surface)}@media (max-width:1100px){.layout{grid-template-columns:200px 1fr}.panel--preview{grid-column:1/-1;position:static}}@media (max-width:720px){.layout{grid-template-columns:1fr;padding:14px}.panel--types .type-list{flex-direction:row;flex-wrap:wrap}.type-btn{flex:1 1 auto;width:auto}.toolbar{padding:10px 14px}.toolbar__badge{display:none}}