@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
--bg:#04040e;
--glass:rgba(255,255,255,0.04);
--glass-h:rgba(255,255,255,0.07);
--border:rgba(255,255,255,0.08);
--border-h:rgba(255,255,255,0.16);
--p1:#8b5cf6;
--p2:#6d28d9;
--p3:#4f46e5;
--glow:rgba(139,92,246,0.4);
--glow-sm:rgba(139,92,246,0.2);
--text:#f0f2ff;
--muted:#7c8498;
--muted2:#a0aaba;
--success:#10b981;
--success-bg:rgba(16,185,129,0.12);
--success-b:rgba(16,185,129,0.3);
--error:#f43f5e;
--error-bg:rgba(244,63,94,0.1);
--error-b:rgba(244,63,94,0.3);
--r:14px;
--r-lg:22px;
}
html{scroll-behavior:smooth;}
body{
font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
background:var(--bg);
color:var(--text);
min-height:100vh;
display:flex;
flex-direction:column;
overflow-x:hidden;
}
.bg-orbs{
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
overflow:hidden;
}
.orb{
position:absolute;
border-radius:50%;
filter:blur(52px);
opacity:0;
animation:orbAppear 1.5s ease forwards,orbFloat var(--dur) ease-in-out infinite;
}
.orb-1{
width:1100px;height:1100px;
background:radial-gradient(circle,rgba(139,92,246,0.38) 0%,rgba(109,40,217,0.16) 45%,transparent 70%);
top:-400px;left:-280px;
--dur:14s;
animation-delay:0s,1.5s;
}
.orb-2{
width:800px;height:800px;
background:radial-gradient(circle,rgba(6,182,212,0.22) 0%,rgba(79,70,229,0.12) 45%,transparent 70%);
bottom:-200px;right:-180px;
--dur:18s;
animation-delay:0.3s,1.8s;
}
.orb-3{
width:600px;height:600px;
background:radial-gradient(circle,rgba(99,102,241,0.2) 0%,rgba(6,182,212,0.1) 45%,transparent 70%);
top:35%;left:42%;
--dur:11s;
animation-delay:0.6s,2.1s;
}
body::before{
content:'';
position:fixed;
inset:0;
background-image:radial-gradient(rgba(255,255,255,0.025) 1px,transparent 1px);
background-size:32px 32px;
pointer-events:none;
z-index:0;
}
header{
position:sticky;
top:0;
z-index:100;
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 48px;
background:rgba(4,4,14,0.7);
backdrop-filter:blur(20px) saturate(180%);
border-bottom:1px solid var(--border);
animation:fadeDown .6s ease both;
}
.logo{
display:flex;
align-items:center;
gap:11px;
text-decoration:none;
color:var(--text);
}
.logo-mark{
width:34px;height:34px;
border-radius:9px;
background:linear-gradient(135deg,var(--p1),var(--p3));
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 20px var(--glow-sm);
transition:box-shadow .3s,transform .3s;
}
.logo:hover .logo-mark{
box-shadow:0 0 32px var(--glow);
transform:rotate(-5deg) scale(1.05);
}
.logo-name{
font-size:17px;
font-weight:700;
letter-spacing:-.3px;
}
.header-right{display:flex;align-items:center;gap:12px;}
.badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 14px;
border-radius:100px;
font-size:12px;
font-weight:500;
letter-spacing:.1px;
}
.badge-secure{
background:var(--success-bg);
border:1px solid var(--success-b);
color:var(--success);
}
.badge-dot{
width:6px;height:6px;
border-radius:50%;
background:var(--success);
flex-shrink:0;
animation:pulseDot 2s ease-in-out infinite;
}
.local-btn-wrap{
position:relative;
}
.local-btn{
display:inline-flex;
align-items:center;
gap:7px;
padding:7px 18px;
border-radius:9px;
font-size:13.5px;
font-weight:500;
cursor:pointer;
border:none;
background:linear-gradient(135deg,var(--p1),var(--p3));
color:#fff;
box-shadow:0 2px 14px var(--glow-sm);
transition:all .2s;
white-space:nowrap;
letter-spacing:.01em;
}
.local-btn:hover{
box-shadow:0 2px 22px var(--glow);
filter:brightness(1.08);
}
.local-btn-wrap.open .local-btn{
box-shadow:0 2px 22px var(--glow);
filter:brightness(1.08);
}
.local-btn-caret{
opacity:.7;
transition:transform .25s;
}
.local-btn-wrap.open .local-btn-caret{
transform:rotate(180deg);
}
.local-popup{
position:absolute;
top:calc(100%+10px);
right:0;
width:320px;
background:var(--glass);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
border:1px solid var(--border-h);
border-radius:16px;
padding:20px;
box-shadow:0 20px 60px rgba(0,0,0,0.45),0 0 0 1px rgba(16,185,129,0.12);
display:flex;
gap:14px;
opacity:0;
pointer-events:none;
transform:translateY(-6px);
transition:opacity .22s ease,transform .22s ease;
z-index:200;
}
.local-btn-wrap.open .local-popup{
opacity:1;
pointer-events:auto;
transform:translateY(0);
}
.local-popup-icon{
flex-shrink:0;
width:40px;height:40px;
border-radius:10px;
background:linear-gradient(135deg,rgba(16,185,129,0.2),rgba(6,182,212,0.15));
border:1px solid rgba(16,185,129,0.25);
display:flex;align-items:center;justify-content:center;
color:var(--success);
}
.local-popup-body{flex:1;min-width:0;}
.local-popup-title{
font-size:14px;
font-weight:600;
color:var(--text);
margin-bottom:7px;
}
.local-popup-text{
font-size:12.5px;
color:var(--muted2);
line-height:1.55;
margin-bottom:12px;
}
.local-popup-list{
list-style:none;
display:flex;
flex-direction:column;
gap:6px;
}
.local-popup-list li{
display:flex;
align-items:flex-start;
gap:8px;
font-size:12px;
color:var(--muted2);
line-height:1.45;
}
.local-check{
color:var(--success);
font-weight:700;
flex-shrink:0;
margin-top:1px;
}
main{
flex:1;
position:relative;
z-index:1;
max-width:900px;
width:100%;
margin:0 auto;
padding:80px 24px 60px;
}
.hero{
text-align:center;
margin-bottom:60px;
}
.hero-eyebrow{
display:inline-flex;
align-items:center;
gap:7px;
padding:5px 14px;
background:var(--glass);
border:1px solid var(--border);
border-radius:100px;
font-size:12px;
font-weight:500;
color:var(--muted2);
margin-bottom:24px;
animation:fadeSlideUp .6s .1s ease both;
}
.hero h1{
font-size:clamp(36px,6vw,64px);
font-weight:900;
line-height:1.05;
letter-spacing:-1.5px;
margin-bottom:20px;
animation:fadeSlideUp .6s .2s ease both;
}
.grad-text{
background:linear-gradient(135deg,#fff 0%,#c4b5fd 45%,#818cf8 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.hero p{
font-size:17px;
color:var(--muted2);
max-width:520px;
margin:0 auto 32px;
line-height:1.7;
font-weight:400;
animation:fadeSlideUp .6s .3s ease both;
}
.formats{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
animation:fadeSlideUp .6s .4s ease both;
}
.fmt{
padding:5px 13px;
background:var(--glass);
border:1px solid var(--border);
border-radius:8px;
font-size:12px;
font-weight:600;
color:var(--muted2);
font-family:'SF Mono','Fira Code','Consolas',monospace;
transition:all .2s;
cursor:default;
}
.fmt:hover{
background:var(--glass-h);
border-color:var(--border-h);
color:var(--text);
transform:translateY(-1px);
}
.dropzone-wrap{
position:relative;
margin-bottom:24px;
animation:fadeSlideUp .6s .5s ease both;
}
.dropzone-wrap::before{
content:'';
position:absolute;
inset:-1px;
border-radius:calc(var(--r-lg)+1px);
background:linear-gradient(90deg,var(--p1),var(--p3),#818cf8,var(--p1));
background-size:300%;
opacity:0;
transition:opacity .4s;
animation:gradientMove 4s linear infinite;
z-index:0;
}
.dropzone-wrap.active::before{opacity:1;}
.dropzone{
position:relative;
z-index:1;
border:2px dashed rgba(255,255,255,0.1);
border-radius:var(--r-lg);
padding:72px 32px;
text-align:center;
cursor:pointer;
background:var(--glass);
backdrop-filter:blur(8px);
transition:all .3s cubic-bezier(.25,.8,.25,1);
overflow:hidden;
user-select:none;
}
.dropzone *{cursor:pointer;}
.dropzone::after{
content:'';
position:absolute;
inset:0;
background:radial-gradient(ellipse at 50% 0%,rgba(139,92,246,0.1) 0%,transparent 60%);
opacity:0;
transition:opacity .3s;
pointer-events:none;
}
.dropzone:hover,
.dropzone.drag-over{
border-color:transparent;
background:rgba(139,92,246,0.06);
}
.dropzone:hover::after,
.dropzone.drag-over::after{opacity:1;}
.dropzone.drag-over{
transform:scale(1.01);
box-shadow:0 0 60px var(--glow-sm),inset 0 0 60px rgba(139,92,246,0.05);
}
.drop-icon-wrap{
position:relative;
width:72px;height:72px;
margin:0 auto 20px;
}
.drop-icon-bg{
width:72px;height:72px;
border-radius:18px;
background:linear-gradient(135deg,rgba(139,92,246,0.2),rgba(79,70,229,0.2));
border:1px solid rgba(139,92,246,0.3);
display:flex;align-items:center;justify-content:center;
transition:all .3s;
}
.dropzone:hover .drop-icon-bg,
.dropzone.drag-over .drop-icon-bg{
background:linear-gradient(135deg,rgba(139,92,246,0.35),rgba(79,70,229,0.35));
box-shadow:0 0 30px var(--glow-sm);
transform:scale(1.05) rotate(-3deg);
}
.drop-icon-ring{
position:absolute;
inset:-8px;
border-radius:26px;
border:1.5px solid rgba(139,92,246,0.2);
animation:ringPulse 2.5s ease-in-out infinite;
}
.drop-title{
font-size:20px;
font-weight:700;
letter-spacing:-.3px;
margin-bottom:8px;
}
.drop-sub{
font-size:14px;
color:var(--muted);
margin-bottom:24px;
line-height:1.6;
}
.drop-cta{
display:inline-flex;
align-items:center;
gap:8px;
padding:12px 28px;
background:linear-gradient(135deg,var(--p1),var(--p3));
color:white;
border-radius:10px;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:all .3s;
box-shadow:0 4px 24px var(--glow-sm);
position:relative;
z-index:2;
}
.drop-cta::before{
content:'';
position:absolute;
inset:0;
border-radius:10px;
background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);
opacity:0;
transition:opacity .2s;
pointer-events:none;
}
.drop-cta:hover{
transform:translateY(-2px);
box-shadow:0 8px 32px var(--glow);
}
.drop-cta:hover::before{opacity:1;}
.drop-cta:active{transform:translateY(0);}
.drag-hint{
font-size:12px;
color:var(--muted);
margin-top:16px;
}
.drop-drag-hint{
margin-top:12px;
font-size:14px;
font-weight:600;
color:#c4b5fd;
opacity:0;
transform:translateY(4px);
transition:opacity .2s,transform .2s;
pointer-events:none;
}
.dropzone.drag-over .drop-drag-hint{
opacity:1;
transform:translateY(0);
}
.dropzone.drag-over .drop-default-content{
opacity:0.3;
pointer-events:none;
}
.drop-default-content{
transition:opacity .2s;
}
#fileList{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:24px;
}
.file-card{
background:var(--glass);
border:1px solid var(--border);
border-radius:var(--r);
padding:14px 16px;
display:flex;
align-items:center;
gap:14px;
backdrop-filter:blur(8px);
transition:border-color .3s,box-shadow .3s,transform .3s,opacity .3s,max-height .4s,padding .4s;
animation:cardIn .4s cubic-bezier(.34,1.56,.64,1) both;
overflow:hidden;
max-height:200px;
}
.file-card:hover{border-color:var(--border-h);}
.file-card.processing{
border-color:rgba(139,92,246,0.5);
box-shadow:0 0 20px rgba(139,92,246,0.1);
}
.file-card.done{
border-color:var(--success-b);
box-shadow:0 0 20px rgba(16,185,129,0.06);
}
.file-card.error{
border-color:var(--error-b);
animation:shake .4s ease;
}
.file-card.removing{
opacity:0;
transform:translateX(16px) scale(0.97);
max-height:0;
padding-top:0;
padding-bottom:0;
pointer-events:none;
}
.file-thumb{
width:46px;height:46px;
border-radius:10px;
overflow:hidden;
flex-shrink:0;
background:var(--glass-h);
border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;
transition:transform .3s;
}
.file-card:hover .file-thumb{transform:scale(1.05);}
.file-thumb img{
width:100%;height:100%;
object-fit:cover;
display:block;
}
.file-thumb-icon{
width:22px;height:22px;
opacity:.7;
}
.file-body{flex:1;min-width:0;}
.file-name{
font-size:14px;
font-weight:600;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
letter-spacing:-.1px;
margin-bottom:4px;
}
.file-meta{
display:flex;
align-items:center;
gap:6px;
font-size:12px;
color:var(--muted);
}
.meta-sep{opacity:.4;}
.file-progress{
height:3px;
background:rgba(255,255,255,0.06);
border-radius:3px;
margin-top:8px;
overflow:hidden;
display:none;
}
.file-card.processing .file-progress{display:block;}
.file-progress-inner{
height:100%;
border-radius:3px;
background:linear-gradient(90deg,var(--p1),var(--p3));
transition:width .4s ease;
position:relative;
}
.file-progress-inner::after{
content:'';
position:absolute;
top:0;left:0;right:0;bottom:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);
animation:shimmer 1.4s ease-in-out infinite;
}
.file-card.done .file-progress{display:block;}
.file-card.done .file-progress-inner{
background:linear-gradient(90deg,var(--success),#34d399);
}
.file-card.done .file-progress-inner::after{display:none;}
.file-status{
flex-shrink:0;
font-size:12px;
font-weight:600;
display:flex;
align-items:center;
gap:5px;
padding:4px 10px;
border-radius:100px;
transition:all .3s;
}
.file-status.pending{background:rgba(99,102,241,0.1);color:#818cf8;border:1px solid rgba(99,102,241,0.25);}
.file-status.pending .status-dot{width:6px;height:6px;border-radius:50%;background:#818cf8;display:inline-block;animation:pulseDot 1.8s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.file-status.processing{background:rgba(139,92,246,0.15);color:#c4b5fd;border:1px solid rgba(139,92,246,0.3);}
.file-status.done{background:var(--success-bg);color:var(--success);border:1px solid var(--success-b);animation:successPop .4s cubic-bezier(.34,1.56,.64,1);}
.file-status.error{background:var(--error-bg);color:var(--error);border:1px solid var(--error-b);}
.status-spinner{
width:10px;height:10px;
border:1.5px solid rgba(139,92,246,0.3);
border-top-color:#c4b5fd;
border-radius:50%;
animation:spin .7s linear infinite;
}
.file-actions{display:flex;align-items:center;gap:7px;flex-shrink:0;}
.btn-dl{
display:none;
align-items:center;
gap:5px;
padding:6px 14px;
background:var(--success-bg);
border:1px solid var(--success-b);
color:var(--success);
border-radius:8px;
font-size:12px;
font-weight:600;
cursor:pointer;
text-decoration:none;
transition:all .2s;
white-space:nowrap;
}
.btn-dl:hover{background:rgba(16,185,129,0.2);transform:translateY(-1px);}
.file-card.done .btn-dl{display:inline-flex;animation:successPop .4s .1s cubic-bezier(.34,1.56,.64,1) both;}
.btn-rm{
width:30px;height:30px;
background:transparent;
border:1px solid var(--border);
color:var(--muted);
border-radius:8px;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .2s;
flex-shrink:0;
}
.btn-rm:hover{
background:var(--error-bg);
border-color:var(--error-b);
color:var(--error);
transform:scale(1.05);
}
.summary-bar{
display:none;
align-items:center;
justify-content:space-between;
padding:10px 16px;
background:var(--glass);
border:1px solid var(--border);
border-radius:var(--r);
margin-bottom:24px;
font-size:13px;
color:var(--muted2);
animation:fadeSlideUp .3s ease both;
}
.summary-bar.visible{display:flex;}
.summary-stats{display:flex;gap:20px;}
.stat{display:flex;align-items:center;gap:6px;}
.stat-val{font-weight:700;color:var(--text);}
.stat-done .stat-val{color:var(--success);}
.bottom-actions{
display:none;
align-items:center;
justify-content:space-between;
gap:12px;
animation:fadeSlideUp .3s ease both;
}
.bottom-actions.visible{display:flex;}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:12px 28px;
border-radius:10px;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:all .25s cubic-bezier(.25,.8,.25,1);
border:none;
outline:none;
letter-spacing:-.1px;
position:relative;
overflow:hidden;
}
.btn::before{
content:'';
position:absolute;
inset:0;
background:rgba(255,255,255,0.08);
opacity:0;
transition:opacity .2s;
}
.btn:hover::before{opacity:1;}
.btn:active{transform:scale(.98);}
.btn-primary{
background:linear-gradient(135deg,var(--p1),var(--p3));
color:white;
box-shadow:0 4px 20px var(--glow-sm);
}
.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 8px 32px var(--glow);
}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-secondary{
background:var(--glass);
backdrop-filter:blur(8px);
border:1px solid var(--border);
color:var(--text);
}
.btn-secondary:hover{border-color:var(--border-h);transform:translateY(-1px);}
.btn-secondary:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.btn-busy{
background:linear-gradient(90deg,var(--p1),var(--p3),var(--p1));
background-size:200%;
animation:gradientMove 1.5s linear infinite !important;
}
.left-actions{display:flex;gap:8px;}
footer{
position:relative;
z-index:1;
border-top:1px solid var(--border);
padding:48px 48px 40px;
}
.footer-inner{
max-width:900px;
margin:0 auto;
}
.footer-title{
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--muted);
margin-bottom:20px;
}
.what-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:12px 20px;
}
.what-item{
display:flex;
align-items:center;
gap:10px;
font-size:13px;
color:var(--muted2);
transition:color .2s;
}
.what-item:hover{color:var(--text);}
.what-icon{
width:28px;height:28px;
border-radius:7px;
background:rgba(139,92,246,0.1);
border:1px solid rgba(139,92,246,0.2);
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
transition:all .2s;
}
.what-item:hover .what-icon{
background:rgba(139,92,246,0.2);
box-shadow:0 0 12px var(--glow-sm);
}
.footer-note{
margin-top:32px;
padding-top:24px;
border-top:1px solid var(--border);
font-size:12px;
color:var(--muted);
display:flex;
align-items:center;
gap:20px;
flex-wrap:wrap;
}
.footer-note a{color:var(--muted2);text-decoration:none;transition:color .2s;}
.footer-note a:hover{color:var(--text);}
.theme-toggle{
width:34px;height:34px;
border-radius:8px;
background:var(--glass);
border:1px solid var(--border);
cursor:pointer;
display:flex;align-items:center;justify-content:center;
color:var(--muted2);
flex-shrink:0;
transition:all .2s;
}
.theme-toggle:hover{
background:var(--glass-h);
border-color:var(--border-h);
color:var(--text);
transform:rotate(20deg) scale(1.05);
}
.theme-toggle svg{transition:none;}
.lang-select{position:relative;}
.lang-btn{
display:flex;align-items:center;gap:6px;
padding:7px 11px;
background:var(--glass);
border:1px solid var(--border);
border-radius:8px;
color:var(--text);
font-size:13px;font-weight:500;
cursor:pointer;
transition:all .2s;
white-space:nowrap;
}
.lang-btn:hover{background:var(--glass-h);border-color:var(--border-h);}
.lang-btn .lang-flag{font-size:15px;line-height:1;}
.lang-caret{
width:11px;height:11px;
opacity:.5;
transition:transform .2s;
flex-shrink:0;
}
.lang-select.open .lang-caret{transform:rotate(180deg);}
.lang-dropdown{
position:absolute;
top:calc(100%+8px);
right:0;
background:rgba(10,10,24,0.97);
border:1px solid var(--border-h);
border-radius:10px;
padding:6px;
min-width:162px;
display:none;
z-index:200;
box-shadow:0 8px 32px rgba(0,0,0,0.55);
backdrop-filter:blur(20px);
}
.lang-select.open .lang-dropdown{display:block;animation:fadeSlideUp .15s ease both;}
.lang-opt{
display:flex;align-items:center;gap:10px;
padding:7px 10px;
border-radius:7px;
cursor:pointer;
font-size:13px;
color:var(--muted2);
transition:all .15s;
}
.lang-opt:hover{background:var(--glass-h);color:var(--text);}
.lang-opt.active{color:var(--p1);}
.lang-opt-flag{font-size:15px;}
.lang-opt-name{flex:1;}
.lang-opt-check{width:13px;height:13px;opacity:0;flex-shrink:0;}
.lang-opt.active .lang-opt-check{opacity:1;}
body,header,footer,
.dropzone,.file-card,.summary-bar,
.hero-eyebrow,.fmt,.btn-secondary,
.badge-secure,.drop-drag-hint,
.file-meta,.file-name,.drop-title,.drop-sub,
.file-status,.btn-rm,.footer-note,
.what-item,.what-icon,.what-item,.footer-title{
transition:background-color .3s ease,border-color .3s ease,
color .3s ease,box-shadow .3s ease !important;
}
html.light{
--bg:#f6f4ff;
--glass:rgba(255,255,255,0.72);
--glass-h:rgba(255,255,255,0.96);
--border:rgba(109,40,217,0.1);
--border-h:rgba(109,40,217,0.24);
--glow:rgba(109,40,217,0.22);
--glow-sm:rgba(109,40,217,0.1);
--text:#160f30;
--muted:#7b6f96;
--muted2:#554d70;
--success:#047857;
--success-bg:rgba(4,120,87,0.08);
--success-b:rgba(4,120,87,0.25);
--error:#be123c;
--error-bg:rgba(190,18,60,0.08);
--error-b:rgba(190,18,60,0.25);
}
html.light body{background:var(--bg);}
html.light body::before{
background-image:radial-gradient(rgba(109,40,217,0.07) 1px,transparent 1px);
}
html.light header{background:rgba(246,244,255,0.88);}
html.light .orb-1{background:radial-gradient(circle,rgba(139,92,246,0.1) 0%,transparent 70%);}
html.light .orb-2{background:radial-gradient(circle,rgba(79,70,229,0.07) 0%,transparent 70%);}
html.light .orb-3{background:radial-gradient(circle,rgba(99,102,241,0.05) 0%,transparent 70%);}
html.light .hero h1{
background:linear-gradient(135deg,#160f30 0%,#6d28d9 55%,#4f46e5 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
html.light .grad-text{
background:linear-gradient(135deg,#7c3aed 0%,#4338ca 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
html.light .hero-eyebrow{
background:rgba(109,40,217,0.07);
border-color:rgba(109,40,217,0.14);
color:#554d70;
}
html.light .fmt{background:rgba(255,255,255,0.85);color:#554d70;}
html.light .fmt:hover{background:#fff;color:var(--text);}
html.light .dropzone{
background:rgba(255,255,255,0.55);
border-color:rgba(109,40,217,0.15);
}
html.light .dropzone:hover,
html.light .dropzone.drag-over{
background:rgba(255,255,255,0.8);
border-color:transparent;
}
html.light .drop-title{color:var(--text);}
html.light .drop-sub{color:var(--muted);}
html.light .file-card{
background:rgba(255,255,255,0.78);
box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
html.light .file-card:hover{
background:rgba(255,255,255,0.95);
box-shadow:0 4px 14px rgba(0,0,0,0.08);
}
html.light .file-card.processing{box-shadow:0 0 20px rgba(109,40,217,0.1);}
html.light .file-card.done{box-shadow:0 0 16px rgba(4,120,87,0.07);}
html.light .file-thumb{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.06);}
html.light .file-status.pending{background:rgba(0,0,0,0.04);}
html.light .summary-bar{background:rgba(255,255,255,0.75);}
html.light .btn-secondary{background:rgba(255,255,255,0.85);color:var(--text);}
html.light .btn-rm{border-color:rgba(0,0,0,0.1);}
html.light footer{background:rgba(246,244,255,0.6);}
html.light .what-icon{
background:rgba(109,40,217,0.07);
border-color:rgba(109,40,217,0.15);
}
html.light .dropzone-wrap::before{
background:linear-gradient(90deg,#7c3aed,#6d28d9,#818cf8,#7c3aed);
}
.main-nav{
display:flex;
align-items:center;
gap:2px;
position:absolute;
left:50%;
transform:translateX(-50%);
background:var(--glass);
border:1px solid var(--border);
border-radius:12px;
padding:4px;
backdrop-filter:blur(12px);
}
.nav-tab{
display:flex;
align-items:center;
gap:7px;
padding:7px 18px;
border-radius:9px;
font-size:13.5px;
font-weight:500;
cursor:pointer;
background:transparent;
border:none;
color:var(--muted2);
transition:all .2s;
white-space:nowrap;
letter-spacing:.01em;
}
.nav-tab:hover{background:var(--glass-h);color:var(--text);}
.nav-tab.active{
background:linear-gradient(135deg,var(--p1),var(--p3));
color:#fff;
box-shadow:0 2px 14px var(--glow-sm);
}
.nav-tab svg{opacity:.65;flex-shrink:0;}
.nav-tab.active svg{opacity:1;}
.tool-section{display:none;}
.tool-section.active{display:block;animation:fadeSlideUp .4s ease both;}
.conv-hero{
text-align:center;
margin-bottom:48px;
animation:fadeSlideUp .5s .1s ease both;
}
.conv-hero h2{
font-size:clamp(28px,4vw,46px);
font-weight:900;
letter-spacing:-1.2px;
margin-bottom:12px;
background:linear-gradient(135deg,#fff 0%,#c4b5fd 45%,#818cf8 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
html.light .conv-hero h2{
background:linear-gradient(135deg,#160f30 0%,#7c3aed 55%,#4f46e5 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.conv-hero p{font-size:16px;color:var(--muted2);max-width:460px;margin:0 auto;line-height:1.6;}
.conv-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:12px;
margin-bottom:32px;
}
.conv-card{
background:var(--glass);
border:1px solid var(--border);
border-radius:var(--r);
padding:20px;
cursor:pointer;
transition:all .25s cubic-bezier(.25,.8,.25,1);
display:flex;
flex-direction:column;
gap:6px;
position:relative;
overflow:hidden;
animation:cardIn .4s ease both;
}
.conv-card::after{
content:'';
position:absolute;
top:0;left:0;right:0;
height:2px;
background:var(--cc,#8b5cf6);
transform:scaleX(0);
transform-origin:left;
transition:transform .3s;
pointer-events:none;
}
.conv-card:hover{border-color:var(--border-h);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,0.15);}
html.light .conv-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.1);}
.conv-card:hover::after{transform:scaleX(1);}
.conv-card-badge{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;height:42px;
border-radius:11px;
font-size:19px;
margin-bottom:6px;
}
.conv-card-label{
font-size:22px;
font-weight:900;
letter-spacing:-.5px;
}
.conv-card-desc{
font-size:13px;
color:var(--muted2);
line-height:1.45;
}
.conv-card-from{
font-family:'SF Mono','Fira Code',monospace;
font-size:11px;
font-weight:600;
color:var(--muted);
margin-top:4px;
}
.conv-panel{display:none;}
.conv-panel.visible{display:block;animation:fadeSlideUp .3s ease both;}
.conv-back-row{
display:flex;
align-items:center;
gap:14px;
margin-bottom:28px;
}
.conv-back-btn{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 14px;
background:var(--glass);
border:1px solid var(--border);
border-radius:8px;
font-size:13px;
font-weight:500;
cursor:pointer;
color:var(--muted2);
transition:all .2s;
flex-shrink:0;
}
.conv-back-btn:hover{border-color:var(--border-h);color:var(--text);}
.conv-panel-title{font-size:20px;font-weight:800;letter-spacing:-.4px;}
.conv-panel-sub{font-size:13px;color:var(--muted);margin-top:2px;}
@keyframes fadeDown{
from{opacity:0;transform:translateY(-12px);}
to{opacity:1;transform:translateY(0);}
}
@keyframes fadeSlideUp{
from{opacity:0;transform:translateY(20px);}
to{opacity:1;transform:translateY(0);}
}
@keyframes cardIn{
from{opacity:0;transform:translateY(12px) scale(.98);}
to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes orbAppear{
from{opacity:0;}
to{opacity:1;}
}
@keyframes orbFloat{
0%,100%{transform:translate(0,0) scale(1);}
33%{transform:translate(30px,-25px) scale(1.05);}
66%{transform:translate(-20px,15px) scale(.96);}
}
@keyframes spin{
to{transform:rotate(360deg);}
}
@keyframes shimmer{
from{transform:translateX(-200%);}
to{transform:translateX(200%);}
}
@keyframes gradientMove{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}
@keyframes bounce{
from{transform:translateY(-6px);}
to{transform:translateY(4px);}
}
@keyframes shake{
0%,100%{transform:translateX(0);}
20%{transform:translateX(-6px);}
40%{transform:translateX(6px);}
60%{transform:translateX(-4px);}
80%{transform:translateX(4px);}
}
@keyframes successPop{
0%{transform:scale(.6);opacity:0;}
70%{transform:scale(1.08);}
100%{transform:scale(1);opacity:1;}
}
@keyframes pulseDot{
0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,0.4);}
50%{opacity:.8;box-shadow:0 0 0 4px rgba(16,185,129,0);}
}
@keyframes ringPulse{
0%,100%{transform:scale(1);opacity:.4;}
50%{transform:scale(1.06);opacity:.15;}
}
@keyframes loadingBar{
0%{transform:translateX(-150%);}
100%{transform:translateX(350%);}
}
.meta-subnav{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:3px;
padding:5px;
background:var(--glass);
border:1px solid var(--border);
border-radius:14px;
margin:0 auto 36px;
width:fit-content;
max-width:100%;
scrollbar-width:none;
animation:fadeSlideUp .5s ease both;
}
.meta-subnav::-webkit-scrollbar{display:none;}
.meta-tab{
display:flex;
align-items:center;
gap:6px;
padding:9px 16px;
border-radius:10px;
font-size:13px;
font-weight:500;
cursor:pointer;
background:transparent;
border:none;
color:var(--muted2);
transition:all .2s;
white-space:nowrap;
flex-shrink:0;
letter-spacing:.01em;
}
.meta-tab:hover{background:var(--glass-h);color:var(--text);}
.meta-tab.active{
background:linear-gradient(135deg,#8b5cf6,#6366f1,#0891b2);
background-size:220% 220%;
animation:holoShift 5s ease infinite;
color:#fff;
box-shadow:0 2px 14px var(--glow-sm);
}
.tab-glow{
position:fixed;
width:520px;height:520px;
border-radius:50%;
background:radial-gradient(circle,rgba(139,92,246,.5) 0%,rgba(6,182,212,.22) 45%,transparent 70%);
filter:blur(52px);
pointer-events:none;
z-index:0;
opacity:0;
left:0;top:0;
transition:left .7s cubic-bezier(.34,1.1,.64,1),
top .7s cubic-bezier(.34,1.1,.64,1),
opacity .5s ease;
}
.tab-glow.visible{opacity:1;}
.meta-tool-panel{display:none;}
.meta-tool-panel.active{display:block;animation:fadeSlideUp .3s ease both;}
.drop-single{padding:40px 32px;}
.meta-result{
background:var(--glass);
border:1px solid var(--border);
border-radius:var(--r-lg);
overflow:hidden;
backdrop-filter:blur(8px);
margin-bottom:16px;
animation:fadeSlideUp .4s ease both;
}
.meta-section-head{
padding:11px 20px;
background:rgba(139,92,246,0.07);
border-bottom:1px solid var(--border);
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--muted2);
}
.meta-row{
display:flex;
align-items:flex-start;
padding:10px 20px;
border-bottom:1px solid rgba(255,255,255,0.035);
gap:20px;
transition:background .15s;
}
.meta-row:last-child{border-bottom:none;}
.meta-row:hover{background:rgba(255,255,255,0.02);}
.meta-row-label{
width:210px;
flex-shrink:0;
font-size:13px;
font-weight:500;
color:var(--muted2);
}
.meta-row-value{
flex:1;
font-size:13px;
color:var(--text);
word-break:break-all;
font-family:'SF Mono','Fira Code',monospace;
}
.meta-gps-link{
display:inline-flex;
align-items:center;
gap:4px;
margin-left:10px;
font-size:11px;
color:var(--p1);
text-decoration:none;
padding:2px 8px;
background:rgba(139,92,246,0.1);
border-radius:4px;
transition:background .2s;
font-family:inherit;
}
.meta-gps-link:hover{background:rgba(139,92,246,0.2);}
.meta-empty{
text-align:center;
padding:56px 32px;
color:var(--muted);
font-size:14px;
}
.meta-form-block{
background:var(--glass);
border:1px solid var(--border);
border-radius:var(--r-lg);
overflow:hidden;
margin-bottom:16px;
}
.meta-form-head{
padding:11px 20px;
background:rgba(139,92,246,0.07);
border-bottom:1px solid var(--border);
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--muted2);
}
.meta-form-row{
display:flex;
align-items:center;
padding:10px 20px;
border-bottom:1px solid rgba(255,255,255,0.035);
gap:16px;
}
.meta-form-row:last-child{border-bottom:none;}
.meta-form-label{
width:210px;
flex-shrink:0;
font-size:13px;
font-weight:500;
color:var(--muted2);
}
.meta-form-input{
flex:1;
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:8px;
padding:7px 12px;
font-size:13px;
color:var(--text);
font-family:'SF Mono','Fira Code',monospace;
transition:border-color .2s,background .2s;
outline:none;
}
.meta-form-input:focus{border-color:var(--p1);background:rgba(139,92,246,0.07);}
.meta-form-input::placeholder{color:var(--muted);font-family:inherit;}
.meta-del-btn{
padding:5px 10px;
background:var(--error-bg);
border:1px solid var(--error-b);
color:var(--error);
border-radius:6px;
font-size:11px;
cursor:pointer;
transition:all .2s;
flex-shrink:0;
}
.meta-del-btn:hover{background:rgba(244,63,94,0.2);}
.compare-drops{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:16px;
align-items:start;
margin-bottom:24px;
}
.compare-drop-label{
font-size:13px;
font-weight:600;
color:var(--muted2);
margin-bottom:10px;
display:flex;
align-items:center;
gap:8px;
}
.lbl-badge{
padding:2px 9px;
border-radius:6px;
font-size:11px;
font-weight:800;
}
.lbl-a{background:rgba(139,92,246,0.18);color:#c4b5fd;}
.lbl-b{background:rgba(59,130,246,0.18);color:#93c5fd;}
.compare-vs{
display:flex;
align-items:center;
justify-content:center;
padding-top:72px;
color:var(--muted);
font-size:13px;
font-weight:700;
}
.compare-table{margin-bottom:16px;}
.compare-header{
display:grid;
grid-template-columns:200px 1fr 1fr;
gap:12px;
padding:8px 16px;
background:rgba(255,255,255,0.03);
border-radius:8px;
margin-bottom:4px;
font-size:12px;
font-weight:700;
color:var(--muted2);
}
.compare-row{
display:grid;
grid-template-columns:200px 1fr 1fr;
gap:12px;
padding:9px 16px;
border-bottom:1px solid var(--border);
font-size:13px;
align-items:center;
}
.compare-row:hover{background:rgba(255,255,255,0.02);}
.compare-row.diff{background:rgba(245,158,11,0.04);}
.compare-row.diff .cmp-val-a{color:#fbbf24;}
.compare-row.diff .cmp-val-b{color:#34d399;}
.compare-sec-head{
padding:8px 16px 4px;
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--p1);
border-bottom:none;
}
.cmp-label{color:var(--muted2);font-weight:500;}
.cmp-val{color:var(--text);font-family:'SF Mono',monospace;word-break:break-all;}
.diff-badge{
display:inline-block;
padding:1px 6px;
background:rgba(245,158,11,0.15);
color:#fbbf24;
border-radius:4px;
font-size:10px;
font-weight:700;
margin-left:6px;
}
.copy-grid{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:16px;
align-items:start;
margin-bottom:24px;
}
.copy-arrow{
display:flex;
align-items:center;
justify-content:center;
padding-top:72px;
color:var(--p1);
font-size:22px;
}
.copy-file-info{
background:var(--glass);
border:1px solid var(--border);
border-radius:var(--r);
padding:12px 16px;
font-size:13px;
color:var(--muted2);
margin-top:10px;
display:none;
}
.copy-file-info.visible{display:block;}
.copy-file-name{font-weight:600;color:var(--text);margin-bottom:2px;}
html.light .meta-section-head{background:rgba(109,40,217,0.05);border-bottom-color:rgba(0,0,0,0.06);}
html.light .meta-row{border-bottom-color:rgba(0,0,0,0.05);}
html.light .meta-row:hover{background:rgba(0,0,0,0.02);}
html.light .meta-result{background:rgba(255,255,255,0.85);}
html.light .meta-form-block{background:rgba(255,255,255,0.85);}
html.light .meta-form-row{border-bottom-color:rgba(0,0,0,0.05);}
html.light .meta-form-input{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:var(--text);}
html.light .meta-form-input:focus{border-color:var(--p1);background:rgba(109,40,217,0.05);}
html.light .main-nav{background:rgba(255,255,255,0.8);border-color:rgba(0,0,0,0.1);}
html.light .nav-tab:hover{background:rgba(0,0,0,0.05);}
html.light .meta-subnav{background:rgba(255,255,255,0.72);border-color:rgba(0,0,0,0.1);}
html.light .meta-tab.active{box-shadow:0 2px 12px rgba(109,40,217,0.25);}
html.light .nav-tab.active{box-shadow:0 2px 12px rgba(109,40,217,0.3);}
html.light .local-btn{background:linear-gradient(135deg,rgba(16,185,129,0.12),rgba(6,182,212,0.08));}
html.light .local-popup{background:rgba(255,255,255,0.95);box-shadow:0 12px 40px rgba(0,0,0,0.15);}
html.light .compare-row{border-bottom-color:rgba(0,0,0,0.05);}
html.light .compare-row:hover{background:rgba(0,0,0,0.02);}
html.light .compare-header{background:rgba(0,0,0,0.03);}
html.light .copy-file-info{background:rgba(255,255,255,0.85);}
.compress-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-bottom:24px;
}
@media (max-width:680px){.compress-grid{grid-template-columns:1fr;}}
.compress-card{
background:var(--glass);
border:1px solid var(--border);
border-radius:var(--r-lg);
overflow:hidden;
cursor:pointer;
transition:all .25s;
}
.compress-card:hover{border-color:var(--border-h);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,0.14);}
.compress-card.selected{border-color:var(--p1);box-shadow:0 0 0 2px rgba(139,92,246,0.2);}
.compress-card-head{
display:flex;
align-items:center;
gap:12px;
padding:18px 20px 14px;
border-bottom:1px solid var(--border);
}
.compress-card-icon{
width:40px;height:40px;
border-radius:10px;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
}
.compress-card-title{font-size:16px;font-weight:800;letter-spacing:-.3px;}
.compress-card-sub{font-size:12px;color:var(--muted2);margin-top:1px;}
.compress-card-body{padding:20px;}
.slider-label{
display:flex;
justify-content:space-between;
font-size:13px;
font-weight:500;
color:var(--muted2);
margin-bottom:10px;
}
.slider-label strong{color:var(--text);}
.slider-desc{font-size:11px;color:var(--muted);margin-top:6px;}
input[type=range]{
-webkit-appearance:none;
width:100%;
height:5px;
border-radius:3px;
background:linear-gradient(90deg,var(--p1) var(--pct,70%),var(--border) var(--pct,70%));
outline:none;
cursor:pointer;
transition:background .1s;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;
width:18px;height:18px;
border-radius:50%;
background:white;
box-shadow:0 2px 8px rgba(0,0,0,0.3);
transition:transform .15s,box-shadow .15s;
cursor:grab;
}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.2);cursor:grabbing;}
html.light input[type=range]::-webkit-slider-thumb{background:white;box-shadow:0 2px 8px rgba(0,0,0,0.2);}
.resize-row{
display:flex;
align-items:center;
gap:8px;
margin-top:14px;
}
.resize-input{
flex:1;
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:8px;
padding:7px 10px;
font-size:13px;
color:var(--text);
outline:none;
text-align:center;
transition:border-color .2s;
}
.resize-input:focus{border-color:var(--p1);}
.resize-input::placeholder{color:var(--muted);}
html.light .resize-input{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);}
.resize-sep{color:var(--muted);font-size:13px;flex-shrink:0;}
#compFileList{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.comp-badge{
display:inline-flex;
align-items:center;
gap:5px;
padding:3px 9px;
border-radius:6px;
font-size:11px;
font-weight:700;
}
.comp-badge.saved{background:var(--success-bg);color:var(--success);border:1px solid var(--success-b);}
.comp-badge.bigger{background:var(--error-bg);color:var(--error);border:1px solid var(--error-b);}
html.light .compress-card{background:rgba(255,255,255,0.78);}
html.light .compress-card.selected{box-shadow:0 0 0 2px rgba(109,40,217,0.18);}
html.light .compress-card-head{border-bottom-color:rgba(0,0,0,0.07);}
.seo-section{
max-width:860px;
margin:0 auto 64px;
padding:0 24px;
}
.seo-section-title{
font-size:26px;
font-weight:700;
color:var(--text);
text-align:center;
margin-bottom:40px;
letter-spacing:-.02em;
}
.seo-intro{
font-size:15px;
line-height:1.7;
color:var(--muted2);
text-align:center;
margin-bottom:48px;
max-width:660px;
margin-left:auto;
margin-right:auto;
}
.faq-list{
display:flex;
flex-direction:column;
gap:12px;
}
.faq-item{
background:var(--glass);
border:1px solid var(--border);
border-radius:14px;
padding:22px 26px;
transition:border-color .2s;
}
.faq-item:hover{border-color:var(--border-h);}
.faq-q{
font-size:15px;
font-weight:600;
color:var(--text);
margin-bottom:10px;
line-height:1.4;
}
.faq-a{
font-size:14px;
line-height:1.75;
color:var(--muted2);
}
html.light .faq-item{background:rgba(255,255,255,0.7);border-color:rgba(0,0,0,0.08);}
html.light .faq-q{color:#1a1040;}
@media (max-width:640px){
header{padding:14px 20px;}
.logo-name{display:none;}
main{padding:48px 16px 40px;}
.hero h1{font-size:32px;}
.hero p{font-size:15px;}
.dropzone{padding:48px 16px;}
.bottom-actions{flex-direction:column-reverse;}
.bottom-actions.visible{display:flex;}
.left-actions,.btn{width:100%;}
footer{padding:32px 20px;}
}
.hero h1,.conv-hero h2{
font-family:'Space Grotesk','Inter',sans-serif;
letter-spacing:-2px;
}
.hero h1{letter-spacing:-2.5px;}
@keyframes holoShift{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}
.btn-primary{
background:linear-gradient(135deg,#8b5cf6 0%,#6366f1 45%,#06b6d4 100%) !important;
background-size:220% 220% !important;
animation:holoShift 4s ease infinite;
box-shadow:0 4px 28px rgba(6,182,212,.2),0 2px 12px rgba(139,92,246,.3) !important;
}
.btn-primary:hover{
animation-duration:1.5s;
box-shadow:0 8px 40px rgba(6,182,212,.3),0 4px 20px rgba(139,92,246,.4) !important;
transform:translateY(-2px);
}
.btn-primary:disabled{
animation:none !important;
background:rgba(139,92,246,.3) !important;
box-shadow:none !important;
}
.drop-cta{
background:linear-gradient(135deg,#8b5cf6 0%,#6366f1 45%,#06b6d4 100%) !important;
background-size:220% 220% !important;
animation:holoShift 4s ease infinite;
box-shadow:0 4px 24px rgba(6,182,212,.18) !important;
}
.drop-cta:hover{animation-duration:1.5s;}
.logo-mark{
background:linear-gradient(135deg,#8b5cf6 0%,#6366f1 50%,#06b6d4 100%) !important;
background-size:200% 200% !important;
animation:holoShift 6s ease infinite;
box-shadow:0 0 24px rgba(6,182,212,.2),0 0 12px rgba(139,92,246,.25) !important;
}
.file-card.processing{
border-color:transparent !important;
isolation:isolate;
position:relative;
}
.file-card.processing::before{
content:'';
position:absolute;inset:-1px;
border-radius:calc(var(--r)+1px);
background:linear-gradient(90deg,#8b5cf6,#06b6d4,#6366f1,#8b5cf6);
background-size:300%;
animation:gradientMove 2s linear infinite;
z-index:-1;
}
.file-card.processing>*{position:relative;z-index:1;}
.file-progress{height:4px !important;border-radius:4px !important;}
.nav-tab.active{
background:linear-gradient(135deg,#8b5cf6,#6366f1,#0891b2) !important;
background-size:220% 220% !important;
animation:holoShift 5s ease infinite;
}
.meta-tab.active{
background:linear-gradient(135deg,#8b5cf6,#6366f1,#0891b2) !important;
background-size:220% 220% !important;
animation:holoShift 5s ease infinite;
}
.dropzone:hover,.dropzone.drag-over{
box-shadow:0 0 80px rgba(6,182,212,.08),0 0 40px rgba(139,92,246,.1) !important;
}
.dropzone:hover .drop-icon-bg,
.dropzone.drag-over .drop-icon-bg{
background:linear-gradient(135deg,rgba(139,92,246,.38),rgba(6,182,212,.28)) !important;
}
#toast-container{
position:fixed;bottom:28px;right:28px;
z-index:9999;display:flex;flex-direction:column;gap:10px;
pointer-events:none;
}
.toast{
display:flex;align-items:center;gap:10px;
padding:12px 18px;
background:rgba(8,8,20,.96);
border:1px solid var(--border-h);
border-radius:14px;font-size:13px;font-weight:500;color:var(--text);
backdrop-filter:blur(24px);box-shadow:0 8px 40px rgba(0,0,0,.5);
pointer-events:auto;max-width:300px;
animation:toastIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
.toast.removing{animation:toastOut .2s ease forwards;}
.toast.success{border-color:var(--success-b);}
.toast.error{border-color:var(--error-b);}
html.light .toast{background:rgba(255,255,255,.98);box-shadow:0 8px 40px rgba(0,0,0,.12);}
@keyframes toastIn{from{opacity:0;transform:translateX(14px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateX(14px) scale(.96);}}
.faq-item{cursor:pointer;user-select:none;}
.faq-q{
display:flex;align-items:flex-start;
justify-content:space-between;gap:16px;
}
.faq-q::after{
content:'+';font-size:22px;font-weight:300;
color:var(--muted);flex-shrink:0;
transition:transform .35s cubic-bezier(.34,1.56,.64,1),color .25s;
line-height:1;margin-top:2px;
}
.faq-item.open .faq-q::after{transform:rotate(45deg);color:var(--p1);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.25,.8,.25,1);}
.faq-item.open .faq-a{max-height:500px;}
.faq-a p{padding-top:14px;}
.kbd-hint{
display:inline-flex;align-items:center;gap:5px;
font-size:11px;color:var(--muted);margin-top:12px;
}
.kbd{
display:inline-block;padding:2px 7px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
border-radius:5px;font-size:10px;
font-family:'SF Mono','Fira Code',monospace;color:var(--muted2);
}
html.light .kbd{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.13);}
.mobile-bottom-nav{
display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;
background:rgba(4,4,14,.95);backdrop-filter:blur(24px) saturate(180%);
border-top:1px solid var(--border);
padding:8px 0 max(8px,env(safe-area-inset-bottom));
}
.mob-nav-inner{display:flex;justify-content:space-around;align-items:center;}
.mob-nav-btn{
display:flex;flex-direction:column;align-items:center;gap:3px;
padding:4px 20px;background:none;border:none;cursor:pointer;
color:var(--muted);font-size:10px;font-weight:600;
font-family:inherit;letter-spacing:.2px;transition:color .2s;
}
.mob-nav-btn.active{color:var(--p1);}
.mob-nav-btn svg{transition:transform .2s;}
.mob-nav-btn.active svg{transform:translateY(-2px);}
html.light .mobile-bottom-nav{background:rgba(246,244,255,.96);}
@media (max-width:640px){
.main-nav{display:none !important;}
.mobile-bottom-nav{display:block;}
main{padding-bottom:80px;}
#toast-container{bottom:90px;right:12px;}
}
@media (prefers-reduced-motion:reduce){
.orb{animation:none !important;}
.btn-primary,.drop-cta,.logo-mark,
.nav-tab.active,.meta-tab.active{animation:none !important;}
}