:root{--bg-body:#f5f5f7;--bg-card:#fff;--bg-input:#f5f5f8;--bg-input-hover:#eeeff3;--bg-input-focus:#fff;--bg-muted:#f0f0f5;--bg-elevated:#fff;--text-primary:#111118;--text-secondary:#52525e;--text-muted:#8b8b9e;--text-placeholder:#b4b4c4;--text-inverse:#fff;--accent:#6c5ce7;--accent-hover:#5a48d5;--accent-light:#f0edff;--accent-muted:#6c5ce714;--accent-border:#6c5ce740;--emerald:#10b981;--rose:#f43f5e;--amber:#f59e0b;--gradient-accent:linear-gradient(135deg, #6c5ce7 0%, #a78bfa 100%);--gradient-display:linear-gradient(145deg, #f8f7ff 0%, #f0edff 100%);--border:#00000012;--border-strong:#0000001f;--border-accent:#6c5ce74d;--shadow-xs:0 1px 2px #0000000a;--shadow-sm:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-md:0 4px 6px -1px #0000000f, 0 2px 4px -1px #0000000a;--shadow-lg:0 10px 15px -3px #00000012, 0 4px 6px -2px #0000000a;--shadow-xl:0 20px 40px -4px #00000014, 0 8px 16px -4px #00000008;--shadow-card:0 0 0 1px #00000008, 0 2px 4px #0000000a, 0 12px 24px #0000000f;--shadow-accent:0 4px 14px #6c5ce740;--shadow-accent-lg:0 8px 24px #6c5ce74d;--radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px;--font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-smooth:cubic-bezier(.4, 0, .2, 1);--dur-fast:.15s;--dur-base:.2s;--dur-slow:.35s;--dur-slower:.5s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;font-size:16px}body{font-family:var(--font);background:var(--bg-body);color:var(--text-primary);min-height:100vh;line-height:1.5;overflow-x:hidden}body:before{content:"";z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#0000000b 1px,#0000 1px);background-size:20px 20px;position:fixed;inset:0}a{color:var(--accent);text-decoration:none}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}canvas{display:block}.container{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleReveal{0%{opacity:0;filter:blur(6px);transform:scale(.88)}60%{filter:blur();transform:scale(1.01)}to{opacity:1;filter:blur();transform:scale(1)}}@keyframes slideFormIn{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes pulseGhost{0%,to{opacity:.15;transform:scale(1)}50%{opacity:.25;transform:scale(1.02)}}@keyframes checkPop{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.3)}to{opacity:1;transform:scale(1)}}@keyframes toastSlide{0%{opacity:0;transform:translate(-50%)translateY(20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.toast{background:var(--text-primary);color:var(--text-inverse);border-radius:var(--radius-full);box-shadow:var(--shadow-xl);z-index:1000;pointer-events:none;opacity:0;transition:all var(--dur-slow) var(--ease-spring);align-items:center;gap:6px;padding:10px 20px;font-size:13px;font-weight:600;display:flex;position:fixed;bottom:28px;left:50%;transform:translate(-50%)translateY(20px)}.toast.visible{opacity:1;transform:translate(-50%)translateY(0)}.toast-icon{animation:checkPop var(--dur-slow) var(--ease-spring) both;display:flex}.site-header{-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);z-index:100;background:#f5f5f7cc;padding:14px 0;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;display:flex}.logo{color:var(--text-primary);align-items:center;gap:10px;text-decoration:none;display:flex}.logo-mark{background:var(--gradient-accent);width:32px;height:32px;transition:transform var(--dur-base) var(--ease-spring);border-radius:9px;place-items:center;display:grid;box-shadow:0 2px 8px #6c5ce740}.logo:hover .logo-mark{transform:rotate(-8deg)scale(1.06)}.logo-mark svg{width:18px;height:18px}.logo-text{letter-spacing:-.03em;font-size:17px;font-weight:750}.logo-text span{color:var(--accent)}.header-tag{background:var(--accent-light);color:var(--accent);border-radius:var(--radius-full);letter-spacing:.02em;transition:all var(--dur-base) var(--ease-smooth);padding:4px 10px;font-size:11px;font-weight:700}.header-tag:hover{background:var(--accent);color:#fff}.app-card{background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);animation:fadeInUp var(--dur-slower) var(--ease-out);margin:32px 0 48px;overflow:hidden}.tab-bar{border-bottom:1px solid var(--border);background:var(--bg-muted);scrollbar-width:none;align-items:center;gap:2px;padding:12px 16px;display:flex;position:relative;overflow-x:auto}.tab-bar::-webkit-scrollbar{display:none}.tab{border-radius:var(--radius-sm);color:var(--text-muted);white-space:nowrap;cursor:pointer;transition:all var(--dur-base) var(--ease-smooth);z-index:1;background:0 0;border:none;flex-shrink:0;align-items:center;gap:7px;padding:8px 16px;font-size:13px;font-weight:600;display:flex;position:relative}.tab:hover{color:var(--text-secondary);background:#00000008}.tab.active{color:var(--accent)}.tab-icon{transition:transform var(--dur-base) var(--ease-spring);font-size:15px;line-height:1}.tab:hover .tab-icon{transform:scale(1.12)}.tab:active .tab-icon{transform:scale(.92)}.tab-indicator{background:var(--bg-card);border-radius:var(--radius-sm);height:calc(100% - 24px);box-shadow:var(--shadow-sm);transition:left var(--dur-slow) var(--ease-out), width var(--dur-slow) var(--ease-out);z-index:0;pointer-events:none;position:absolute;bottom:12px}.app-body{grid-template-columns:1fr 400px;min-height:480px;display:grid}.left-panel{border-right:1px solid var(--border);flex-direction:column;display:flex}.form-panel{animation:slideFormIn var(--dur-slow) var(--ease-out) both;flex:1;padding:28px 32px}.form-panel-header{align-items:center;gap:8px;margin-bottom:24px;display:flex}.form-panel-icon{background:var(--accent-light);border-radius:8px;place-items:center;width:28px;height:28px;font-size:14px;display:grid}.form-panel-title{color:var(--text-primary);letter-spacing:-.01em;font-size:14px;font-weight:700}.form-group{margin-bottom:20px}.form-group:last-child{margin-bottom:0}.form-label{color:var(--text-secondary);transition:color var(--dur-fast);margin-bottom:6px;font-size:12.5px;font-weight:600;display:block}.form-label .req{color:var(--rose);margin-left:2px}.form-group:focus-within .form-label{color:var(--accent)}.form-input,.form-select,.form-textarea{background:var(--bg-input);border-radius:var(--radius-xs);width:100%;color:var(--text-primary);transition:all var(--dur-base) var(--ease-smooth);border:1.5px solid #0000;outline:none;padding:10px 14px;font-size:14px}.form-input::placeholder,.form-textarea::placeholder{color:var(--text-placeholder)}.form-input:hover,.form-select:hover,.form-textarea:hover{background:var(--bg-input-hover)}.form-input:focus,.form-select:focus,.form-textarea:focus{background:var(--bg-input-focus);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}.form-textarea{resize:vertical;min-height:88px}.form-select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%238b8b9e' d='M5 7L1 3h8z'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px}.section-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:12px;font-size:11px;font-weight:700}.controls{border-top:1px solid var(--border);background:var(--bg-elevated);padding:20px 32px}.ctrl-row{align-items:center;gap:12px;margin-bottom:12px;display:flex}.ctrl-row:last-child{margin-bottom:0}.ctrl-label{color:var(--text-secondary);flex-shrink:0;min-width:44px;font-size:12px;font-weight:600}.ctrl-value{color:var(--text-primary);font-variant-numeric:tabular-nums;text-align:right;width:40px;margin-left:auto;font-size:12px;font-weight:700}.slider{appearance:none;background:var(--border-strong);border-radius:var(--radius-full);cursor:pointer;outline:none;flex:1;height:4px}.slider::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;width:16px;height:16px;transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast);border:2.5px solid #fff;border-radius:50%;box-shadow:0 1px 4px #6c5ce759}.slider::-webkit-slider-thumb:hover{transform:scale(1.25);box-shadow:0 2px 8px #6c5ce773}.slider::-moz-range-thumb{background:var(--accent);cursor:pointer;border:2.5px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 4px #6c5ce759}.color-btn{border:2px solid var(--border-strong);cursor:pointer;width:26px;height:26px;transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast);border-radius:6px;padding:0;position:relative;overflow:hidden}.color-btn:hover{box-shadow:var(--shadow-sm);transform:scale(1.15)}.color-btn input[type=color]{cursor:pointer;opacity:0;border:none;width:calc(100% + 16px);height:calc(100% + 16px);position:absolute;inset:-8px}.ctrl-select{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text-secondary);cursor:pointer;appearance:none;transition:border-color var(--dur-fast);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%238b8b9e' d='M4 6L1 2h6z'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;outline:none;padding:6px 24px 6px 10px;font-size:12px;font-weight:600}.ctrl-select:focus{border-color:var(--accent)}.export-bar{border-top:1px solid var(--border);background:var(--bg-card);padding:20px 32px}.seg-control{background:var(--bg-muted);border-radius:var(--radius-xs);margin-bottom:16px;padding:3px;display:flex;position:relative}.seg-btn{color:var(--text-muted);text-align:center;border-radius:calc(var(--radius-xs) - 2px);cursor:pointer;transition:color var(--dur-base);z-index:1;background:0 0;border:none;flex:1;padding:8px 0;font-size:12px;font-weight:700;position:relative}.seg-btn:hover{color:var(--text-secondary)}.seg-btn.active{color:var(--accent)}.seg-indicator{background:var(--bg-card);border-radius:calc(var(--radius-xs) - 2px);height:calc(100% - 6px);box-shadow:var(--shadow-xs);transition:left var(--dur-slow) var(--ease-out);z-index:0;position:absolute;top:3px}.action-row{gap:12px;display:flex}.btn{border-radius:var(--radius-xs);transition:all var(--dur-base) var(--ease-out);flex:1;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:13.5px;font-weight:700;display:flex}.btn:active:not(:disabled){transition-duration:60ms;transform:scale(.96)}.btn:disabled{opacity:.3;cursor:not-allowed}.btn-primary{background:var(--gradient-accent);color:#fff;box-shadow:var(--shadow-accent)}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-accent-lg);transform:translateY(-1px)}.btn-ghost{background:var(--bg-muted);color:var(--text-secondary)}.btn-ghost:hover:not(:disabled){background:var(--bg-input-hover);color:var(--text-primary)}.btn-icon{transition:transform var(--dur-base) var(--ease-spring);align-items:center;display:flex}.btn:hover:not(:disabled) .btn-icon{transform:translateY(-1px)}.right-panel{background:linear-gradient(#fafafa 0%,#f4f5f8 100%);flex-direction:column;display:flex}.qr-display-panel{flex-direction:column;flex:1;justify-content:center;align-items:center;padding:40px;display:flex;position:relative}.qr-display-panel:before{content:"";border-radius:var(--radius-md);pointer-events:none;background-image:radial-gradient(circle,#6c5ce70d 1px,#0000 1px);background-size:16px 16px;position:absolute;inset:20px}.qr-display-area{aspect-ratio:1;z-index:1;justify-content:center;align-items:center;width:100%;max-width:320px;display:flex;position:relative}.qr-display-area canvas{object-fit:contain;border-radius:var(--radius-xs);animation:scaleReveal var(--dur-slow) var(--ease-out) both;width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important}.qr-empty{color:var(--text-muted);text-align:center;flex-direction:column;align-items:center;gap:16px;display:flex}.qr-empty-icon{border-radius:var(--radius-md);border:2px dashed #6c5ce733;place-items:center;width:80px;height:80px;animation:3s ease-in-out infinite pulseGhost;display:grid}.qr-empty-icon svg{opacity:.25}.qr-empty-text{max-width:180px;font-size:13.5px;font-weight:500;line-height:1.4}.qr-size-badge{color:var(--text-muted);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);z-index:1;background:#fff;margin-top:24px;padding:4px 12px;font-size:11px;font-weight:700}.site-footer{text-align:center;color:var(--text-muted);padding:20px 0 32px;font-size:12.5px}.site-footer a{color:var(--text-muted);text-underline-offset:2px;transition:color var(--dur-fast);text-decoration:underline}.site-footer a:hover{color:var(--accent)}@media (width<=900px){.app-body{grid-template-columns:1fr}.left-panel{border-right:none;border-bottom:1px solid var(--border)}.right-panel{order:-1}.qr-display-panel{padding:32px}.qr-display-area{max-width:240px}}@media (width<=500px){.app-card{border-radius:var(--radius-lg);margin:16px 0 32px}.form-panel,.controls,.export-bar{padding:20px}.tab{padding:8px 12px;font-size:12px}.action-row{flex-direction:column}}