*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f8fafc;--card: #ffffff;--section: #f8fafc;--blue-50: #eff8ff;--blue-100: #dbeffe;--blue-200: #b9e0fd;--blue-300: #7cc8fb;--blue-400: #38aaf4;--blue-500: #0e8de0;--blue-600: #026fb5;--border: #e2e8f0;--border-hover: #7cc8fb;--success: #10b981;--danger: #ef4444;--warning: #f59e0b;--text: #0f172a;--text-muted: #64748b;--text-dim: #94a3b8;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--font: "DM Sans", system-ui, sans-serif;--mono: "DM Mono", "JetBrains Mono", monospace;--radius: 12px;--radius-sm: 8px;--radius-xs: 6px;--transition: .18s ease}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}#app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:40px 20px 80px}header{width:100%;max-width:700px;margin-bottom:32px;display:flex;align-items:center;justify-content:space-between;animation:fadeUp .3s ease both}.logo{display:flex;align-items:center;gap:12px}.logo-icon{width:42px;height:42px;background:linear-gradient(135deg,var(--blue-400),var(--blue-600));border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #38aaf459;flex-shrink:0}.logo-icon svg{width:20px;height:20px}.logo-text{display:flex;flex-direction:column}.logo-name{font-family:var(--mono);font-size:16px;font-weight:500;color:var(--gray-900, #0f172a);letter-spacing:.12em}.logo-sub{font-size:11px;color:var(--blue-500);letter-spacing:.04em;font-weight:400}.header-badges{display:flex;gap:6px}.badge{font-family:var(--mono);font-size:10px;font-weight:500;padding:4px 10px;border-radius:99px;letter-spacing:.06em}.badge-blue{background:var(--blue-50);color:var(--blue-600);border:1px solid var(--blue-200)}.badge-gray{background:var(--gray-100);color:var(--gray-500);border:1px solid var(--gray-200)}.card{width:100%;max-width:700px;background:var(--card);border-radius:20px;border:1px solid var(--border);box-shadow:0 12px 40px #0e8de01f,0 4px 12px #0e8de00f;overflow:hidden;animation:fadeUp .4s ease both}.tabs{display:flex;border-bottom:1px solid var(--border);background:var(--section);padding:6px 6px 0;gap:2px}.tab{flex:1;padding:11px 16px;font-family:var(--font);font-size:13px;font-weight:500;color:var(--text-muted);background:transparent;border:none;border-radius:10px 10px 0 0;cursor:pointer;transition:all var(--transition);letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:7px}.tab:hover{color:var(--blue-500);background:var(--blue-50)}.tab.active{color:var(--blue-600);background:var(--card);border:1px solid var(--border);border-bottom:1px solid var(--card);margin-bottom:-1px}.tab-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}.tab.active .tab-dot{opacity:1}.tab-panel{display:none;padding:24px}.tab-panel.active{display:block;animation:fadeUp .22s ease both}.section{background:var(--section);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:20px;margin-bottom:16px}.section:last-child{margin-bottom:0}.section-header{display:flex;align-items:center;gap:8px;margin-bottom:14px}.section-line{width:3px;height:16px;flex-shrink:0;background:linear-gradient(to bottom,var(--blue-300),var(--blue-500));border-radius:99px}.section-title{font-size:11px;font-weight:600;color:var(--gray-500);letter-spacing:.1em;text-transform:uppercase}.field{margin-bottom:14px}.field:last-child{margin-bottom:0}label{display:block;font-size:12px;font-weight:500;color:var(--gray-600);margin-bottom:6px;letter-spacing:.01em}textarea,input[type=text],input[type=password]{width:100%;font-family:var(--mono);font-size:12px;color:var(--gray-700);background:var(--card);border:1px solid var(--gray-200);border-radius:var(--radius-xs);padding:11px 14px;resize:vertical;outline:none;transition:border-color .15s,box-shadow .15s;line-height:1.6}textarea:focus,input[type=text]:focus,input[type=password]:focus{border-color:var(--blue-300);box-shadow:0 0 0 3px #0e8de014}textarea::placeholder,input::placeholder{color:var(--gray-400);font-family:var(--font)}textarea.key-input{min-height:76px;font-size:11px}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:16px}.toggle-btn{padding:9px;border:1px solid var(--gray-200);border-radius:var(--radius-xs);background:var(--card);font-family:var(--font);font-size:13px;font-weight:500;color:var(--gray-500);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:7px}.toggle-btn:hover{border-color:var(--blue-300);color:var(--blue-500)}.toggle-btn.active{background:var(--blue-50);border-color:var(--blue-300);color:var(--blue-600);box-shadow:0 0 0 3px #0e8de014}.drop-zone{border:2px dashed var(--gray-300);border-radius:var(--radius-xs);padding:24px 20px;text-align:center;cursor:pointer;transition:all .18s;background:var(--card)}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--blue-400);background:var(--blue-50)}.drop-zone.drag-over{animation:pulse-border 1.2s ease-in-out infinite}@keyframes pulse-border{0%,to{box-shadow:none}50%{box-shadow:0 0 16px #38aaf433}}.drop-icon{width:36px;height:36px;background:var(--blue-100);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}.drop-icon svg{width:16px;height:16px;color:var(--blue-400)}.drop-title{font-size:13px;font-weight:500;color:var(--gray-700);margin-bottom:3px}.drop-sub{font-size:11px;color:var(--gray-400)}.drop-zone.has-file .drop-title{color:var(--blue-300)}.file-selected{display:flex;align-items:center;gap:10px;background:var(--blue-50);border:1px solid var(--blue-200);border-radius:var(--radius-xs);padding:10px 14px;margin-top:10px}.file-selected-icon{font-size:18px}.file-selected-name{font-size:13px;font-weight:500;flex:1;color:var(--gray-700)}.file-selected-size{font-size:11px;color:var(--gray-400);font-family:var(--mono)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--radius-xs);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s;letter-spacing:.01em}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--blue-400),var(--blue-600));color:#fff;box-shadow:0 2px 10px #38aaf44d;width:100%;margin-top:16px;padding:13px;font-size:14px;font-weight:600}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--blue-300),var(--blue-500));box-shadow:0 4px 16px #38aaf466;transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:var(--card);color:var(--gray-600);border:1px solid var(--gray-200);font-size:12px;padding:8px 14px}.btn-secondary:hover:not(:disabled){border-color:var(--blue-300);color:var(--blue-600);background:var(--blue-50)}.btn-danger{background:transparent;color:var(--danger);border:1px solid #fecaca;font-size:12px;padding:8px 14px}.btn-danger:hover:not(:disabled){background:#fef2f2;border-color:var(--danger)}.btn-sm{padding:6px 12px!important;font-size:11px!important}.btn-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.btn-row .btn-secondary{flex:1}.output-section{margin-top:14px;display:none}.output-section.visible{display:block}.output-meta{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap}.meta-pill{font-family:var(--mono);font-size:10px;padding:3px 8px;border-radius:99px;background:var(--gray-100);color:var(--gray-500);border:1px solid var(--gray-200)}.output-area{background:var(--section);border:1px solid var(--gray-200);border-radius:var(--radius-xs);padding:12px 14px;font-family:var(--mono);font-size:11px;color:var(--gray-600);word-break:break-all;max-height:180px;overflow-y:auto;user-select:all;line-height:1.8;transition:border-color var(--transition)}.output-area:hover{border-color:var(--blue-300)}.output-area.text-result{color:var(--gray-700);white-space:pre-wrap;word-break:break-word}.sig-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;padding:4px 10px;border-radius:99px}.sig-ok{background:#ecfdf5;color:#059669;border:1px solid #a7f3d0}.sig-fail{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}.info-panel{margin-top:14px;border:1px solid var(--blue-100);border-radius:var(--radius-xs);overflow:hidden}.info-toggle{width:100%;padding:10px 14px;background:var(--blue-50);border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--font);font-size:11px;font-weight:500;color:var(--blue-600);letter-spacing:.02em;transition:background var(--transition)}.info-toggle:hover{background:var(--blue-100)}.info-toggle svg{transition:transform .2s ease}.info-toggle.open svg{transform:rotate(180deg)}.info-body{display:none;padding:12px 14px;font-size:12px;color:var(--gray-600);line-height:1.7;background:var(--card);border-top:1px solid var(--blue-100)}.info-body.open{display:block}.info-stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.stack-item{font-family:var(--mono);font-size:10px;padding:4px 10px;border-radius:6px;background:var(--blue-50);color:var(--blue-600);border:1px solid var(--blue-200)}.key-card{background:var(--card);border:1px solid var(--gray-200);border-radius:var(--radius-xs);padding:14px 16px;margin-bottom:10px}.key-card:last-child{margin-bottom:0}.key-card+.key-card{margin-top:0}.key-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.key-label{font-size:12px;font-weight:600;color:var(--gray-700);display:flex;align-items:center;gap:8px}.key-dot{width:8px;height:8px;border-radius:50%;background:var(--blue-400);flex-shrink:0;box-shadow:0 0 0 3px #0e8de026}.key-value{font-family:var(--mono);font-size:10.5px;color:var(--gray-500);background:var(--section);border:1px solid var(--gray-200);border-radius:6px;padding:9px 12px;word-break:break-all;line-height:1.6}.warning-box{background:#fffbeb;border:1px solid #fde68a;border-radius:var(--radius-xs);padding:12px 14px;font-size:11.5px;color:#92400e;line-height:1.6;margin-top:14px}.danger-section{background:#fef2f2;border:1px solid #fecaca;border-radius:var(--radius-xs);padding:16px;margin-top:14px}.divider{display:flex;align-items:center;gap:12px;margin:4px 0 14px;color:var(--gray-400);font-size:11px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--gray-200)}.alert{padding:10px 12px;border-radius:var(--radius-xs);font-size:12px;margin-top:10px}.alert.error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626}.alert.success{background:#ecfdf5;border:1px solid #a7f3d0;color:#059669}.alert.info{background:var(--blue-50);border:1px solid var(--blue-200);color:var(--blue-600)}.error-msg{font-size:11.5px;color:var(--danger);margin-top:10px;display:none;padding:8px 12px;background:#fef2f2;border-radius:6px;border:1px solid #fecaca}.error-msg.visible{display:block}@keyframes spin{to{transform:rotate(360deg)}}.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.25);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite}@keyframes overlay-dot-pulse{0%,to{transform:scale(1);opacity:.4}50%{transform:scale(1.6);opacity:1}}@keyframes loading-ring{to{transform:rotate(360deg)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.backup-overlay{position:fixed;inset:0;background:#0f172a8c;display:flex;align-items:center;justify-content:center;z-index:200;padding:16px;animation:fade-in .18s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.backup-card{background:var(--card);border-radius:var(--radius);box-shadow:0 20px 60px #0f172a2e,0 4px 16px #0f172a14;padding:32px 28px 24px;max-width:400px;width:100%;animation:slide-up .2s ease}@keyframes slide-up{0%{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}.backup-card-icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#fef3c7,#fde68a);display:flex;align-items:center;justify-content:center;margin-bottom:16px}.backup-card-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:8px}.backup-card-success{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--success);background:#ecfdf5;border-radius:20px;padding:3px 10px;margin-bottom:14px}.backup-card-body{font-size:13px;color:var(--text-muted);line-height:1.65;margin-bottom:20px}.backup-card-body strong{color:var(--text);font-weight:600}.backup-card-warning{background:#fffbeb;border:1px solid #fde68a;border-radius:var(--radius-sm);padding:10px 12px;font-size:12px;color:#92400e;margin-bottom:20px;display:flex;gap:8px;align-items:flex-start}.backup-card-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}.backup-card-skip{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-dim);cursor:pointer;user-select:none}.backup-card-skip input{cursor:pointer;accent-color:var(--blue-500)}.success-toast{position:fixed;bottom:28px;right:28px;background:#fff;border:1px solid #d1fae5;border-left:4px solid var(--success);border-radius:var(--radius-sm);box-shadow:0 4px 20px #0f172a1a;padding:12px 16px;font-size:13px;font-weight:500;color:var(--text);display:flex;align-items:center;gap:8px;z-index:300;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}.success-toast svg{color:var(--success);flex-shrink:0}.success-toast.visible{opacity:1;transform:translateY(0)}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}@media (max-width: 600px){#app{padding:20px 12px 60px}header{flex-wrap:wrap;gap:12px}.header-badges{display:none}.tab-panel{padding:16px}.section{padding:14px}.toggle-group{grid-template-columns:1fr 1fr}}