: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);background:var(--surface-2);padding:6px 12px;border-radius:999px;border:1px solid var(--border)}.toolbar__link{text-decoration:none;transition:all .12s}.toolbar__link:hover{color:var(--brand);border-color:var(--brand)}.toolbar__theme{background:var(--surface-2);border:1px solid var(--border);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)}.follow{max-width:1100px;margin:0 auto;padding:28px 24px 60px}.follow__top{justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}.follow__brand,.follow__top{display:flex;align-items:center}.follow__brand{gap:14px}.follow__logo{height:52px;width:auto;object-fit:contain}.follow__logo-fallback{height:52px;width:52px;display:grid;place-items:center;background:var(--brand-grad);color:#fff;font-weight:800;font-size:20px;border-radius:12px}.follow__title{font-size:24px;font-weight:800;line-height:1.1}.follow__sub{font-size:14px;color:var(--text-soft);margin-top:4px}.follow__back{font-size:13.5px;font-weight:600;color:var(--text-soft);text-decoration:none;padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);transition:all .12s}.follow__back:hover{color:var(--brand);border-color:var(--brand)}.follow__grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:22px;gap:22px;align-items:start}.follow__note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:26px}.sfcard{background:#fff;color:#1a1a2e;border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-lg);display:flex;flex-direction:column}.sfcard__head{display:flex;align-items:center;gap:12px;padding:16px 20px;color:#fff}.sfcard__brandico{display:inline-flex}.sfcard__brandico svg{width:28px;height:28px}.sfcard__platform{font-size:19px;font-weight:800;letter-spacing:.3px}.sfcard__body{padding:22px 20px 18px;text-align:center}.sfcard__kicker{font-size:13px;font-weight:800;letter-spacing:3px;color:var(--accent);margin-bottom:14px}.sfcard__qrframe{display:inline-block;padding:10px;border-radius:14px;background:#fff;border:3px solid var(--accent)}.sfcard__qr{display:block;width:210px;height:210px}.sfcard__handle{font-size:18px;font-weight:800;margin-top:16px}.sfcard__cta{font-size:13.5px;font-weight:600;color:#5b6072;margin-top:2px}.sfcard__foot{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-top:1px solid #eef0f6;background:#fafbff}.sfcard__logo{height:22px;width:auto;object-fit:contain}.sfcard__logo-fallback{height:24px;width:24px;display:grid;place-items:center;background:var(--brand-grad);color:#fff;font-weight:800;font-size:11px;border-radius:6px}.sfcard__brandname{font-size:13px;font-weight:800;color:#1a1a2e;letter-spacing:.3px}[data-theme=dark] .sfcard{border-color:#2a2c42}@media print{.follow__back,.follow__note,.follow__top,.footer,.toolbar{display:none!important}body{background:#fff}.follow{padding:0}.follow__grid{gap:12px}.sfcard{box-shadow:none;border:1px solid #ccc;page-break-inside:avoid;break-inside:avoid}}@media (max-width:640px){.follow__grid{grid-template-columns:1fr}}@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}}