/* HOT X HOST — Premium Design System */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
--bg:#030014;--bg2:#0a0a1a;--surface:rgba(12,12,35,0.65);--surface-hover:rgba(20,20,50,0.8);
--border:rgba(255,255,255,0.06);--border-hover:rgba(255,255,255,0.12);--border-active:rgba(139,92,246,0.5);
--purple:#8b5cf6;--cyan:#06b6d4;--pink:#ec4899;--hot:#f43f5e;--orange:#f97316;
--grad:linear-gradient(135deg,#8b5cf6,#06b6d4);--grad-hot:linear-gradient(135deg,#f43f5e,#f97316);
--grad-hero:linear-gradient(135deg,#8b5cf6 0%,#ec4899 50%,#f43f5e 100%);
--text:#f1f5f9;--text2:#94a3b8;--muted:#64748b;
--success:#10b981;--error:#ef4444;--warning:#f59e0b;--info:#3b82f6;
--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-2xl:24px;--r-full:9999px;
--ease:cubic-bezier(0.16,1,0.3,1);--bounce:cubic-bezier(0.34,1.56,0.64,1);
--fast:150ms var(--ease);--normal:300ms var(--ease);--slow:500ms var(--ease);
--font:'Plus Jakarta Sans','Inter',sans-serif;--mono:'JetBrains Mono',monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;scrollbar-gutter:stable}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100dvh;overflow-x:hidden}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
code{font-family:var(--mono);font-size:.82em;background:rgba(139,92,246,0.12);color:var(--purple);padding:2px 7px;border-radius:4px}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(139,92,246,0.25);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:rgba(139,92,246,0.45)}

/* === BG Effects === */
.bg-effects{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;animation:floatOrb 20s ease-in-out infinite}
.orb-1{width:500px;height:500px;background:radial-gradient(circle,rgba(139,92,246,0.4),transparent 70%);top:-10%;left:-10%;animation-duration:22s}
.orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(6,182,212,0.3),transparent 70%);top:50%;right:-8%;animation-delay:-8s;animation-duration:18s}
.orb-3{width:350px;height:350px;background:radial-gradient(circle,rgba(244,63,94,0.25),transparent 70%);bottom:-5%;left:30%;animation-delay:-14s;animation-duration:24s}
.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%)}
@keyframes floatOrb{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(30px,-40px) scale(1.05)}50%{transform:translate(-20px,30px) scale(.95)}75%{transform:translate(40px,20px) scale(1.08)}}

/* === Layout === */
.container{width:100%;max-width:760px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.app{display:flex;flex-direction:column;min-height:100dvh;padding:20px 0 48px}
.app--hidden{display:none!important}

/* === Login === */
.login-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.login-overlay.hidden{display:none}
.login-card{width:100%;max-width:400px;padding:36px 32px 28px;background:var(--surface);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);border:1px solid var(--border);border-radius:var(--r-2xl);animation:scaleIn .5s var(--bounce) both;position:relative;overflow:hidden}
.login-card::before{content:'';position:absolute;inset:-1px;border-radius:var(--r-2xl);background:linear-gradient(135deg,rgba(139,92,246,0.15),transparent 50%,rgba(6,182,212,0.1));z-index:-1;pointer-events:none}
.login-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:6px}
.login-logo{width:44px;height:44px;filter:drop-shadow(0 0 12px rgba(139,92,246,0.4))}
.login-title{font-family:var(--font);font-size:1.6rem;font-weight:800;background:var(--grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}
.login-subtitle{text-align:center;color:var(--text2);font-size:.85rem;margin-bottom:28px}
.input-group{margin-bottom:16px}
.input-group label{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--text2);margin-bottom:6px}
.input-group label svg{width:15px;height:15px;color:var(--purple);flex-shrink:0}
.input-group input{width:100%;padding:12px 14px;background:rgba(0,0,0,0.3);border:1.5px solid var(--border);border-radius:var(--r-md);color:var(--text);font-size:.88rem;font-family:'Inter',sans-serif;transition:all var(--fast);outline:none}
.input-group input::placeholder{color:var(--muted)}
.input-group input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,0.12)}
.password-wrap{position:relative}
.password-wrap input{padding-right:44px}
.toggle-pass{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--muted);border-radius:var(--r-sm);transition:color var(--fast)}
.toggle-pass:hover{color:var(--text)}
.toggle-pass svg{width:18px;height:18px;position:absolute}
.toggle-pass .eye-closed{display:none}
.toggle-pass.active .eye-open{display:none}
.toggle-pass.active .eye-closed{display:block}
.login-btn{width:100%;padding:13px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--grad);color:#fff;font-size:.9rem;font-weight:700;font-family:var(--font);border-radius:var(--r-md);transition:all var(--fast);position:relative;overflow:hidden}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(139,92,246,0.35)}
.login-btn:active{transform:scale(.97)}
.login-btn svg{width:16px;height:16px}
.login-btn.loading{pointer-events:none;opacity:.75}
.login-btn.loading span{opacity:0}
.login-btn.loading::after{content:'';position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,0.2);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
.login-error{text-align:center;color:var(--error);font-size:.78rem;font-weight:500;margin-top:12px;min-height:18px;transition:opacity var(--fast)}
.login-error:empty{opacity:0}
.login-footer{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:24px;padding-top:18px;border-top:1px solid var(--border);font-size:.72rem;color:var(--muted)}
.login-footer svg{width:14px;height:14px;color:var(--success)}

/* === Header === */
.header{text-align:center;padding:24px 0 20px;animation:fadeDown .7s var(--ease) both}
.logo{display:inline-flex;align-items:center;gap:12px}
.logo-icon{width:44px;height:44px;filter:drop-shadow(0 0 16px rgba(139,92,246,0.35));transition:transform var(--normal)}
.logo:hover .logo-icon{transform:rotate(-10deg) scale(1.1)}
.logo-text{font-family:var(--font);font-size:clamp(1.5rem,5vw,2rem);font-weight:800;background:var(--grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.03em}
.x-mark{margin:0 2px;font-size:1.1em}
.header-row{display:flex;align-items:center;justify-content:center;position:relative}
.btn-logout{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:5px;padding:7px 14px;font-size:.75rem;font-weight:600;color:var(--muted);background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:var(--r-full);transition:all var(--fast);white-space:nowrap}
.btn-logout:hover{color:var(--hot);border-color:rgba(244,63,94,0.3);background:rgba(244,63,94,0.06)}
.btn-logout:active{transform:translateY(-50%) scale(.95)}
.btn-logout svg{width:14px;height:14px}
.tagline{font-size:clamp(.82rem,2.5vw,.95rem);color:var(--text2);margin-top:8px}
.tagline strong{color:var(--text);font-weight:600}

/* === Stats Bar === */
.stats-bar{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:28px;animation:fadeUp .7s var(--ease) .1s both}
.stat-item{display:flex;align-items:center;gap:6px;padding:6px 14px;font-size:.75rem;font-weight:500;color:var(--text2);background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:var(--r-full);transition:all var(--fast);white-space:nowrap}
.stat-item svg{width:13px;height:13px;color:var(--purple);flex-shrink:0}
.stat-item:hover{background:rgba(139,92,246,0.08);border-color:rgba(139,92,246,0.2);color:var(--text)}

/* === Upload Card === */
.upload-card{position:relative;border-radius:var(--r-2xl);padding:2px;background:linear-gradient(135deg,var(--border),rgba(139,92,246,0.1),var(--border));animation:fadeUp .7s var(--ease) .15s both;transition:all var(--normal)}
.upload-card:hover{background:linear-gradient(135deg,rgba(139,92,246,0.15),rgba(6,182,212,0.1),rgba(139,92,246,0.15))}
.upload-card-glow{position:absolute;inset:-1px;border-radius:var(--r-2xl);background:conic-gradient(from 0deg,transparent,rgba(139,92,246,0.15),transparent,rgba(6,182,212,0.1),transparent);opacity:0;transition:opacity var(--slow);filter:blur(8px);z-index:-1}
.upload-card:hover .upload-card-glow{opacity:1}
.upload-zone{position:relative;border-radius:calc(var(--r-2xl) - 2px);padding:48px 28px;text-align:center;cursor:pointer;background:var(--surface);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transition:all var(--normal);overflow:hidden}
.upload-zone.drag-over{background:rgba(139,92,246,0.1);transform:scale(1.01)}
.upload-zone.uploading{pointer-events:none;opacity:.65}
.upload-visual{margin-bottom:20px}
.upload-icon-ring{width:88px;height:88px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(139,92,246,0.18),rgba(6,182,212,0.12));border:2px solid rgba(139,92,246,0.35);transition:all var(--normal);box-shadow:0 0 30px rgba(139,92,246,0.1),inset 0 0 20px rgba(139,92,246,0.05)}
.upload-zone:hover .upload-icon-ring{transform:translateY(-4px);border-color:rgba(139,92,246,0.6);box-shadow:0 8px 40px rgba(139,92,246,0.25),inset 0 0 20px rgba(139,92,246,0.08)}
.upload-zone.drag-over .upload-icon-ring{transform:scale(1.08);border-color:var(--purple);box-shadow:0 0 50px rgba(139,92,246,0.4)}
.upload-icon{width:44px;height:44px;color:var(--purple);filter:drop-shadow(0 0 8px rgba(139,92,246,0.4))}
.upload-title{font-family:var(--font);font-size:clamp(1rem,3vw,1.2rem);font-weight:700;margin-bottom:6px}
.upload-subtitle{font-size:.88rem;color:var(--text2);margin-bottom:18px}
.upload-subtitle span{color:var(--purple);font-weight:600;cursor:pointer;border-bottom:1.5px dashed rgba(139,92,246,0.4);transition:border-color var(--fast)}
.upload-subtitle span:hover{border-color:var(--purple)}
.upload-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;font-size:.72rem;color:var(--muted);background:rgba(255,255,255,0.03);border-radius:var(--r-full);border:1px solid var(--border)}
.badge svg{width:12px;height:12px;opacity:.5}
.file-input{display:none}

/* === Progress === */
.progress-container{margin-top:20px;display:none;animation:fadeIn .3s var(--ease)}
.progress-container.active{display:block}
.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.8rem}
.progress-filename{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}
.progress-percent{color:var(--purple);font-weight:600;font-family:var(--mono);font-size:.78rem}
.progress-bar{width:100%;height:5px;background:rgba(255,255,255,0.06);border-radius:var(--r-full);overflow:hidden}
.progress-fill{height:100%;width:0%;background:var(--grad);border-radius:var(--r-full);transition:width var(--normal);position:relative}
.progress-fill::after{content:'';position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25));animation:shimmer 1.2s ease infinite}

/* === Result Card === */
.result-card{display:none;margin-top:20px;padding:24px;background:var(--surface);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:var(--r-xl);animation:scaleIn .4s var(--bounce) both}
.result-card.active{display:block}
.result-success-badge{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;margin-bottom:16px;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.2);border-radius:var(--r-md);font-size:.85rem;font-weight:600;color:var(--success)}
.result-success-badge svg{width:18px;height:18px}
.result-preview{width:100%;max-height:260px;object-fit:contain;border-radius:var(--r-md);margin-bottom:18px;background:rgba(0,0,0,0.3);border:1px solid var(--border)}
.result-label{font-size:.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.result-link-box{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-top:8px;background:rgba(0,0,0,0.35);border:1px solid var(--border);border-radius:var(--r-md);transition:border-color var(--fast)}
.result-link-box:focus-within{border-color:var(--purple)}
.result-link{flex:1;font-family:var(--mono);font-size:.8rem;color:var(--cyan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}
.btn-copy{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:var(--grad);color:#fff;font-size:.8rem;font-weight:600;border-radius:var(--r-sm);transition:all var(--fast);flex-shrink:0;white-space:nowrap}
.btn-copy:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(139,92,246,0.3)}
.btn-copy:active{transform:scale(.96)}
.btn-copy svg{width:14px;height:14px}
.btn-copy.copied{background:var(--success)}
.result-meta{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}
.result-meta-item{display:flex;align-items:center;gap:5px;font-size:.75rem;color:var(--muted)}
.result-meta-item svg{width:14px;height:14px;opacity:.4}
.result-actions{display:flex;gap:10px;margin-top:14px}
.btn-secondary{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text2);font-size:.8rem;font-weight:500;border-radius:var(--r-sm);transition:all var(--fast);flex:1;justify-content:center}
.btn-secondary:hover{background:rgba(255,255,255,0.07);border-color:var(--border-hover);color:var(--text);transform:translateY(-1px)}
.btn-secondary:active{transform:scale(.97)}
.btn-secondary svg{width:14px;height:14px}

/* === Features Section === */
.features-section{margin-top:64px;animation:fadeUp .6s var(--ease) .2s both}
.section-title{font-family:var(--font);font-size:clamp(1.2rem,4vw,1.6rem);font-weight:800;text-align:center;letter-spacing:-.02em;margin-bottom:6px}
.gradient-text{background:var(--grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-subtitle{text-align:center;color:var(--text2);font-size:.9rem;margin-bottom:32px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-card{padding:22px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);transition:all var(--normal);position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(139,92,246,0.06),transparent);opacity:0;transition:opacity var(--normal)}
.feature-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,0.2)}
.feature-card:hover::before{opacity:1}
.feature-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);background:linear-gradient(135deg,rgba(139,92,246,0.12),rgba(6,182,212,0.08));margin-bottom:14px;transition:transform var(--normal)}
.feature-card:hover .feature-icon{transform:scale(1.1)}
.feature-icon svg{width:20px;height:20px;color:var(--purple)}
.feature-card h3{font-family:var(--font);font-size:.92rem;font-weight:700;margin-bottom:6px}
.feature-card p{font-size:.78rem;color:var(--text2);line-height:1.55}

/* === Steps Section === */
.steps-section{margin-top:56px;animation:fadeUp .6s var(--ease) .25s both}
.steps-grid{display:flex;align-items:stretch;justify-content:center;gap:0}
.step-card{flex:1;max-width:220px;padding:24px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);text-align:center;transition:all var(--normal)}
.step-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.step-number{width:40px;height:40px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-family:var(--font);font-weight:800;font-size:.95rem;box-shadow:0 4px 16px rgba(139,92,246,0.25)}
.step-content h3{font-family:var(--font);font-size:.9rem;font-weight:700;margin-bottom:6px}
.step-content p{font-size:.76rem;color:var(--text2);line-height:1.55}
.step-connector{display:flex;align-items:center;padding:0 8px;color:var(--muted);opacity:.3}
.step-connector svg{width:32px;height:12px;flex-shrink:0}

/* === History === */
.history-section{margin-top:48px;animation:fadeUp .6s var(--ease) .3s both}
.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.history-title{font-family:var(--font);font-size:1rem;font-weight:700;display:flex;align-items:center;gap:8px}
.history-title svg{width:17px;height:17px;color:var(--purple)}
.history-count{font-size:.72rem;color:var(--muted);background:rgba(255,255,255,0.04);padding:2px 10px;border-radius:var(--r-full);font-weight:500}
.btn-clear{font-size:.76rem;color:var(--muted);transition:color var(--fast);display:flex;align-items:center;gap:4px}
.btn-clear:hover{color:var(--error)}
.btn-clear svg{width:13px;height:13px}
.history-list{display:flex;flex-direction:column;gap:8px}
.history-empty{text-align:center;padding:28px;color:var(--muted);font-size:.85rem}
.history-empty svg{width:36px;height:36px;margin:0 auto 10px;opacity:.25}
.history-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);transition:all var(--fast);animation:fadeIn .3s var(--ease) both}
.history-item:hover{background:var(--surface-hover);border-color:var(--border-hover);transform:translateX(3px)}
.history-thumb{width:42px;height:42px;border-radius:var(--r-sm);object-fit:cover;background:rgba(0,0,0,0.3);flex-shrink:0;border:1px solid var(--border)}
.history-info{flex:1;min-width:0}
.history-name{font-size:.8rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-details{font-size:.7rem;color:var(--muted);margin-top:2px;display:flex;gap:10px}
.history-actions{display:flex;gap:5px;flex-shrink:0}
.btn-icon{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);background:rgba(255,255,255,0.03);border:1px solid var(--border);transition:all var(--fast);color:var(--muted)}
.btn-icon:hover{background:rgba(255,255,255,0.07);border-color:var(--border-hover);color:var(--text)}
.btn-icon:active{transform:scale(.88)}
.btn-icon svg{width:14px;height:14px}

/* === Trust Section === */
.trust-section{margin-top:48px;animation:fadeUp .6s var(--ease) .35s both}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.trust-item{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);transition:all var(--normal)}
.trust-item:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.trust-item svg{width:24px;height:24px;color:var(--success);flex-shrink:0}
.trust-item div{min-width:0}
.trust-item strong{font-family:var(--font);font-size:.84rem;font-weight:700;display:block;white-space:nowrap}
.trust-item span{font-size:.73rem;color:var(--muted);display:block;white-space:nowrap}

/* === Footer === */
.footer{margin-top:56px;padding:32px 0 8px;text-align:center;border-top:1px solid var(--border);animation:fadeIn .6s var(--ease) .4s both}
.footer-brand{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px}
.footer-logo{width:22px;height:22px}
.footer-brand span{font-family:var(--font);font-weight:700;font-size:.9rem;background:var(--grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.footer-text{font-size:.78rem;color:var(--muted);margin-bottom:14px}
.footer-bottom{font-size:.7rem;color:var(--muted);opacity:.5}

/* === Toast === */
.toast-container{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:360px;width:calc(100% - 32px)}
.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;background:rgba(10,10,30,0.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 8px 32px rgba(0,0,0,0.5);animation:toastIn .4s var(--bounce) both;pointer-events:auto;position:relative;overflow:hidden}
.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
.toast.toast-success::before{background:var(--success)}
.toast.toast-error::before{background:var(--error)}
.toast.toast-warning::before{background:var(--warning)}
.toast.toast-info::before{background:var(--info)}
.toast-icon{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.toast.toast-success .toast-icon{color:var(--success)}
.toast.toast-error .toast-icon{color:var(--error)}
.toast.toast-warning .toast-icon{color:var(--warning)}
.toast.toast-info .toast-icon{color:var(--info)}
.toast-body{flex:1;min-width:0}
.toast-title{font-size:.8rem;font-weight:600;margin-bottom:1px}
.toast-message{font-size:.74rem;color:var(--text2);line-height:1.4}
.toast-close{width:18px;height:18px;flex-shrink:0;color:var(--muted);cursor:pointer;transition:color var(--fast)}
.toast-close:hover{color:var(--text)}
.toast.removing{animation:toastOut .3s var(--ease) forwards}

/* === Animations === */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@keyframes toastIn{from{opacity:0;transform:translateX(30px) scale(.95)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateX(30px) scale(.95)}}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,0.1);border-top-color:var(--purple);border-radius:50%;animation:spin .6s linear infinite;display:inline-block}

/* === Responsive === */
@media(max-width:768px){
.features-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.steps-grid{flex-direction:column;gap:12px;align-items:center}
.step-card{max-width:100%;width:100%}
.step-connector{display:none}
.trust-grid{grid-template-columns:1fr;gap:10px}
.section-title{font-size:clamp(1.1rem,4vw,1.4rem)}
}
@media(max-width:480px){
.container{padding:0 16px}
.app{padding:12px 0 32px}
.header{padding:16px 0 14px}
.upload-zone{padding:36px 18px}
.upload-icon-ring{width:68px;height:68px}
.upload-icon{width:30px;height:30px}
.features-grid{grid-template-columns:1fr;gap:10px}
.features-section{margin-top:48px}
.steps-section{margin-top:40px}
.result-card{padding:18px}
.result-preview{max-height:180px}
.result-link-box{flex-direction:column;gap:8px}
.result-link{width:100%;text-align:center}
.btn-copy{width:100%;justify-content:center}
.result-actions{flex-direction:column}
.stats-bar{gap:4px}
.stat-item{padding:5px 10px;font-size:.7rem}
.history-item{padding:10px 12px;gap:10px}
.history-thumb{width:36px;height:36px}
.toast-container{top:10px;right:10px;left:10px;width:auto;max-width:none}
.upload-badges{gap:6px}
.badge{padding:4px 10px;font-size:.68rem}
.trust-section{margin-top:36px}
.history-section{margin-top:36px}
}
@media(hover:none){
.upload-card:hover{background:linear-gradient(135deg,var(--border),rgba(139,92,246,0.1),var(--border))}
.upload-zone:hover .upload-icon-ring{transform:none;border-color:rgba(139,92,246,0.3);box-shadow:none}
.feature-card:hover{transform:none;box-shadow:none;border-color:var(--border)}
.feature-card:hover::before{opacity:0}
.history-item:hover{transform:none}
.step-card:hover{transform:none}
.trust-item:hover{transform:none}
.stat-item:hover{background:rgba(255,255,255,0.03);border-color:var(--border);color:var(--text2)}
}