:root{--c-bg-page: #ffffff;--c-bg-panel: #FAF6F0;--c-bg-input: #ffffff;--c-bg-elevated: #ffffff;--c-border: #E2E8F0;--c-border-hover: #cbd5e1;--c-border-focus: #F8BE1E;--c-text-primary: #0F172A;--c-text-secondary: #334155;--c-text-muted: #64748b;--c-text-hint: #94a3b8;--c-accent: #F8BE1E;--c-accent-gradient: linear-gradient(135deg, #F8BE1E, #DB7C07);--c-accent-glow: rgba(248, 190, 30, .2);--c-accent-soft: rgba(248, 190, 30, .1);--c-success: #10b981;--c-danger: #ef4444;--glass-bg: rgba(255, 255, 255, .03);--glass-border: rgba(255, 255, 255, .06);--glass-blur: blur(12px);--ff-sans: "Inter", system-ui, -apple-system, sans-serif;--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--fs-xs: .75rem;--fs-sm: .8125rem;--fs-base: .875rem;--fs-md: 1rem;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--shadow-sm: 0 1px 3px rgba(15, 23, 42, .05);--shadow-md: 0 4px 12px rgba(15, 23, 42, .08);--shadow-lg: 0 12px 48px rgba(15, 23, 42, .12);--shadow-glow: 0 0 30px var(--c-accent-glow);--header-h: 64px;--sidebar-w: 400px;--ease-out: cubic-bezier(.19, 1, .22, 1);--t-fast: .2s;--t-normal: .4s}.bg-glow{position:fixed;width:600px;height:600px;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:-1;opacity:.15}.bg-glow-1{top:-200px;left:-100px;background:var(--c-accent)}.bg-glow-2{bottom:-200px;right:-100px;background:var(--c-bg-panel)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--ff-sans);font-size:var(--fs-base);color:var(--c-text-primary);background:var(--c-bg-page);-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--c-border-hover)}#app-header{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-6);background:var(--c-bg-panel);border-bottom:1px solid var(--c-border);flex-shrink:0;position:relative;z-index:10}.header-left,.header-right{display:flex;align-items:center;gap:var(--sp-3)}.logo-wrapper{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.header-icon{width:36px;height:36px;object-fit:contain;display:block}.header-title-group{display:flex;flex-direction:column;line-height:1.1}.header-title-group h1{font-size:1.1rem;font-weight:700;letter-spacing:-.02em}.header-badge{font-size:8px;font-weight:900;color:var(--c-accent);letter-spacing:.15em;opacity:.8}.status-pill{display:flex;align-items:center;gap:8px;background:var(--c-bg-panel);padding:4px 12px;border-radius:100px;border:1px solid var(--c-border)}.status-dot{width:6px;height:6px;background:var(--c-success);border-radius:50%;box-shadow:0 0 8px var(--c-success);animation:pulse 2s infinite}.header-hint{font-size:var(--fs-xs);color:var(--c-text-muted)}.user-pill{display:flex;align-items:center;gap:7px;background:var(--c-bg-panel);padding:4px 4px 4px 10px;border-radius:100px;border:1px solid var(--c-border)}.user-pill-icon{width:13px;height:13px;color:var(--c-text-muted);flex-shrink:0}.user-email{font-size:var(--fs-xs);color:var(--c-text-secondary);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logout-btn{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;background:var(--c-bg-page);cursor:pointer;color:var(--c-text-muted);transition:all var(--t-fast) ease}.logout-btn svg{width:13px;height:13px}.logout-btn:hover{background:#fee2e2;color:#ef4444}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}to{transform:scale(1);opacity:1}}#app-layout{display:flex;flex:1;height:calc(100vh - var(--header-h));overflow:hidden}#sidebar{width:var(--sidebar-w);background:var(--c-bg-panel);border-right:1px solid var(--c-border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--c-border);background:var(--c-bg-panel);flex-shrink:0}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px var(--sp-4);font-family:var(--ff-sans);font-size:var(--fs-sm);font-weight:500;color:var(--c-text-muted);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all var(--t-fast) ease}.tab-btn:hover{color:var(--c-text-primary);background:var(--c-accent-soft)}.tab-btn.active{color:var(--c-text-primary);border-bottom-color:var(--c-accent);background:transparent}.tab-icon{width:15px;height:15px;flex-shrink:0}.tab-panel{display:flex;flex-direction:column;flex:1;overflow:hidden}.tab-panel.active{display:flex}.sidebar-scroll{flex:1;overflow-y:auto;padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4)}.sidebar-footer{padding:var(--sp-5) var(--sp-5);background:#00000008;border-top:1px solid var(--c-border);flex-shrink:0}.panel-section{display:flex;flex-direction:column;gap:var(--sp-2)}.section-title{font-size:10px;font-weight:900;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.15em;display:flex;align-items:center;gap:8px}.section-title:after{content:"";flex:1;height:1px;background:var(--c-border)}.text-input{width:100%;background:var(--c-bg-input);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);font-family:var(--ff-sans);font-size:var(--fs-base);color:var(--c-text-primary);outline:none;transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease}.text-input:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-glow)}.text-input::placeholder{color:var(--c-text-hint)}.text-textarea{width:100%;background:var(--c-bg-input);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);font-family:var(--ff-sans);font-size:var(--fs-base);color:var(--c-text-primary);outline:none;resize:vertical;min-height:70px;transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease;line-height:1.5}.text-textarea:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-glow)}.text-textarea::placeholder{color:var(--c-text-hint)}.input-hint{font-size:var(--fs-xs);color:var(--c-text-hint);transition:color var(--t-fast) ease}.input-hint.valid{color:var(--c-success)}.input-hint.invalid{color:var(--c-danger)}.input-hint em{font-style:normal;color:var(--c-text-secondary)}.option-grid{display:grid;gap:var(--sp-2)}.option-grid.cols-2{grid-template-columns:1fr 1fr}.option-grid.cols-3{grid-template-columns:1fr 1fr 1fr}.option-grid.cols-4{grid-template-columns:1fr 1fr 1fr 1fr}.option-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-1);border:1.5px solid var(--c-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--t-fast) ease;font-size:10px;color:var(--c-text-secondary);background:transparent;-webkit-user-select:none;user-select:none}.option-label:hover{border-color:var(--c-border-hover);background:var(--c-accent-soft)}.option-label canvas{display:block;border-radius:4px}input[type=radio]:checked+.option-label{border-color:var(--c-accent);background:var(--c-accent-soft);color:var(--c-text-primary);box-shadow:0 0 0 2px var(--c-accent);transform:scale(1.05)}.option-label-text{flex-direction:column;padding:var(--sp-3) var(--sp-2);gap:2px}.option-mode-title{font-size:11px;font-weight:600;color:var(--c-text-primary)}.option-mode-sub{font-size:9px;color:var(--c-text-muted)}.icon-placeholder{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--c-text-muted)}.icon-placeholder svg{width:20px;height:20px}.color-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}.color-label{font-size:var(--fs-sm);color:var(--c-text-secondary)}.color-input-group{display:flex;align-items:center;gap:var(--sp-2)}.color-text-input{width:76px;background:var(--c-bg-input);border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:5px 8px;font-family:var(--ff-sans);font-size:var(--fs-xs);color:var(--c-text-primary);outline:none;text-transform:uppercase;letter-spacing:.04em;transition:border-color var(--t-fast) ease}.color-text-input:focus{border-color:var(--c-accent)}.color-picker{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;width:30px;height:30px;border-radius:var(--radius-sm);cursor:pointer;padding:0;background:none;overflow:hidden}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:2px solid var(--c-border);border-radius:var(--radius-sm)}.color-row-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}.color-compact-item{display:flex;align-items:center;gap:6px;background:var(--c-bg-input);padding:4px 8px;border-radius:var(--radius-sm);border:1px solid var(--c-border)}.color-tiny-label{font-size:9px;font-weight:700;color:var(--c-text-muted);text-transform:uppercase}.color-picker-sm{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;width:18px;height:18px;border-radius:4px;cursor:pointer;padding:0;background:none}.color-picker-sm::-webkit-color-swatch-wrapper{padding:0}.color-picker-sm::-webkit-color-swatch{border:1px solid var(--c-border);border-radius:4px}.toggle-row{padding:var(--sp-1) 0}.toggle-label{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--c-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-checkbox{display:none}.toggle-switch{width:36px;height:20px;background:var(--c-border);border-radius:10px;position:relative;transition:background var(--t-fast) ease;flex-shrink:0}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--c-text-secondary);border-radius:50%;transition:transform var(--t-normal) var(--ease-out),background var(--t-fast) ease}.toggle-checkbox:checked+.toggle-switch{background:var(--c-accent)}.toggle-checkbox:checked+.toggle-switch:after{transform:translate(16px);background:#fff}.slider-row{display:flex;flex-direction:column;gap:var(--sp-1)}.slider-header{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--c-text-secondary)}.slider-value{font-weight:var(--fw-semibold);color:var(--c-accent);font-variant-numeric:tabular-nums}.range-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:var(--c-border);border-radius:2px;outline:none;cursor:pointer}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--c-accent);border-radius:50%;border:2px solid var(--c-bg-panel);cursor:pointer;box-shadow:0 0 0 3px transparent;transition:box-shadow var(--t-fast) ease}.range-slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 4px var(--c-accent-glow)}.range-slider::-moz-range-thumb{width:16px;height:16px;background:var(--c-accent);border-radius:50%;border:2px solid var(--c-bg-panel);cursor:pointer}.drop-zone{position:relative;border:2px dashed var(--c-border);border-radius:var(--radius-md);transition:all var(--t-fast) ease;overflow:hidden;min-height:70px}.drop-zone:hover{border-color:var(--c-border-hover)}.drop-zone.dragover{border-color:var(--c-accent);background:var(--c-accent-soft);border-style:solid}.drop-zone-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;z-index:2}.drop-zone-prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:var(--sp-2);text-align:center;font-size:10px;color:var(--c-text-muted)}.drop-icon{width:20px;height:20px;color:var(--c-text-hint);margin-bottom:2px}.drop-hint{font-size:10px;color:var(--c-text-hint)}.drop-zone-loaded{display:flex;align-items:center;justify-content:center;padding:var(--sp-2);position:relative}.drop-preview-img{height:48px;max-width:100%;object-fit:contain;border-radius:var(--radius-sm)}.drop-clear-btn{position:absolute;top:var(--sp-2);right:var(--sp-2);width:22px;height:22px;border:none;background:#f87171e6;color:#fff;border-radius:50%;font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:transform var(--t-fast) ease,background var(--t-fast) ease}.drop-clear-btn:hover{background:#f87171;transform:scale(1.15)}.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}.btn-primary{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:12px var(--sp-5);background:var(--c-accent-gradient);color:#0f172a;border:none;border-radius:var(--radius-md);font-family:var(--ff-sans);font-size:var(--fs-base);font-weight:700;cursor:pointer;box-shadow:0 4px 14px var(--c-accent-glow);transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) ease,filter var(--t-fast) ease}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--c-accent-glow);filter:brightness(1.05)}.btn-primary:active{transform:translateY(0)}.btn-secondary{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:10px var(--sp-4);background:var(--c-bg-page);color:var(--c-text-primary);border:1px solid var(--c-border);border-radius:var(--radius-md);font-family:var(--ff-sans);font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:all var(--t-fast) ease}.btn-secondary:hover{background:var(--c-bg-panel);border-color:var(--c-border-hover)}.btn-row{display:flex;gap:var(--sp-2)}.btn-icon{width:16px;height:16px;flex-shrink:0}.mb-2{margin-bottom:8px}.mt-2{margin-top:8px}.qr-mini-wrap{display:flex;justify-content:center;background:var(--c-bg-input);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:var(--sp-3)}#qrCanvas{display:block;width:240px;height:240px;border-radius:var(--radius-sm)}#main-area{flex:1;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:32px 24px 48px;gap:0;background:#f7f0dc;position:relative}#main-area:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle at 2px 2px,rgba(0,0,0,.04) 1px,transparent 0);background-size:32px 32px;pointer-events:none}#certPreviewWrapper{display:flex;flex-direction:column;align-items:center;width:100%}.cert-preview-item{width:1122px;height:794px;transform-origin:top center;transform:scale(.62);margin-bottom:-270px;flex-shrink:0}.canvas-hint{font-size:var(--fs-xs);color:var(--c-text-muted);font-weight:500;letter-spacing:.02em;text-align:center;position:relative;z-index:1}.sparkle{margin-right:4px}#mainViewToggle{display:flex;gap:4px;background:var(--c-bg-panel);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:4px;position:relative;z-index:1;flex-shrink:0;margin-bottom:var(--sp-5)}.main-view-btn{display:flex;align-items:center;gap:6px;padding:8px 18px;font-family:var(--ff-sans);font-size:var(--fs-sm);font-weight:500;color:var(--c-text-muted);background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--t-fast) ease}.main-view-btn:hover{color:var(--c-text-primary);background:var(--c-accent-soft)}.main-view-btn.active{color:var(--c-text-primary);background:var(--c-accent-soft);box-shadow:0 0 0 1.5px var(--c-accent)}#qrMainPreviewWrapper{flex-direction:column;align-items:center;gap:var(--sp-4);position:relative;z-index:1}.qr-main-card{background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:var(--radius-xl);padding:var(--sp-5);box-shadow:var(--shadow-lg)}#qrMainCanvas{display:block;width:480px;height:480px;border-radius:var(--radius-md)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(100px);background:var(--c-bg-elevated);color:var(--c-text-primary);padding:var(--sp-3) var(--sp-6);border-radius:var(--radius-lg);font-size:var(--fs-sm);font-weight:500;box-shadow:var(--shadow-lg),0 0 0 1px var(--c-border);opacity:0;pointer-events:none;transition:transform .4s var(--ease-out),opacity .4s ease;z-index:100;white-space:nowrap}.toast.visible{transform:translate(-50%) translateY(0);opacity:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}