*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#181818;--bg1:#1a1a1a;--bg2:#212121;--bg3:#2a2a2a;
  --line:#2E2E2E;--line2:#3a3a3a;--line3:#484848;
  --em:#34d399;--em2:#6ee7b7;--em-rgb:52,211,153;--yel:#fbbf24;--red:#f87171;--sky:#38bdf8;
  --t1:#e5e5e5;--t2:#a0a0a0;--t3:#616161;--t4:rgba(255,255,255,.07);
  --mono:'Ubuntu Mono',monospace;--font:'DM Sans',system-ui,sans-serif;--rad:4px;--rs:4px;
}
html,body{min-height:100vh;background:var(--bg);color:var(--t1);font-family:var(--font);font-size:13.5px}
.nav{height:50px;background:var(--bg1);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.5rem;padding:0 1rem;position:sticky;top:0;z-index:50;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important}
.nav-logo{font-size:.8rem;font-weight:700;color:var(--em);display:flex;align-items:center;gap:.4rem;text-decoration:none}
.nav-dot{width:7px;height:7px;border-radius:50%;background:var(--em)}
.nav-r{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.nav-status{font-size:.65rem;font-weight:600;color:var(--em);letter-spacing:.05em;display:flex;align-items:center;gap:.4rem;animation:statusPulse 3s ease-in-out infinite}
.nav-status-dot{width:6px;height:6px;border-radius:50%;background:var(--em);box-shadow:0 0 8px rgba(var(--em-rgb),.6)}
@keyframes statusPulse{0%,100%{opacity:.6}50%{opacity:1}}
.wrap{max-width:640px;margin:0 auto;padding:2rem 1rem 4rem;position:relative;z-index:1}
.page-title{font-size:1.1rem;font-weight:700;margin-bottom:.25rem}
.page-sub{font-size:.65rem;color:var(--t3);margin-bottom:1.6rem;line-height:1.7}
.card{background:var(--bg1);border:1px solid var(--line);border-radius:var(--rad);padding:1.25rem;margin-bottom:1rem}
.f-label{font-size:.57rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);display:block;margin-bottom:.28rem}
.f-inp{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:var(--rs);padding:.58rem .8rem;color:var(--t1);font-family:var(--font);font-size:.8rem;outline:none;transition:border-color .15s}
.f-inp:focus{border-color:rgba(var(--em-rgb),.3)}
.f-inp::placeholder{color:var(--t4)}
.mb{margin-bottom:.75rem}
.btn{width:100%;font-family:var(--font);font-size:.75rem;font-weight:700;padding:.65rem;border-radius:var(--rs);border:none;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:.4rem}
.btn-em{background:var(--em);color:#040d09}
.btn-em:hover:not(:disabled){background:var(--em2)}
.btn-em:disabled{opacity:.4;cursor:not-allowed}
.or-divider{display:flex;align-items:center;gap:.75rem;margin:.85rem 0;color:var(--t3);font-size:.65rem;font-weight:600}
.or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.drop-zone{border:2px dashed var(--line2);border-radius:var(--rad);padding:2.5rem 1rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg2);position:relative;overflow:hidden}
.drop-zone:hover,.drop-zone.over{border-color:rgba(var(--em-rgb),.4);background:rgba(var(--em-rgb),.03)}
.drop-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop-icon{width:40px;height:40px;border-radius:50%;background:rgba(var(--em-rgb),.08);border:1px solid rgba(var(--em-rgb),.15);display:flex;align-items:center;justify-content:center;margin:0 auto .7rem}
.drop-icon svg{width:18px;height:18px;color:var(--em)}
.drop-title{font-size:.8rem;font-weight:700;margin-bottom:.3rem}
.drop-sub{font-size:.62rem;color:var(--t3)}
.preview-img{max-width:100%;max-height:200px;border-radius:4px;display:block;margin:.85rem auto 0;object-fit:contain}
.result-box{background:var(--bg2);border:1px solid rgba(var(--em-rgb),.2);border-radius:var(--rs);padding:.8rem 1rem;margin-top:1rem;display:none}
.result-box.show{display:block}
.result-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:.3rem}
.result-url{font-size:.72rem;color:var(--em);word-break:break-all;font-family:monospace;line-height:1.6;background:var(--bg3);border-radius:3px;padding:.45rem .65rem;cursor:pointer;transition:background .15s}
.result-url:hover{background:rgba(var(--em-rgb),.08)}
.result-actions{display:flex;gap:.5rem;margin-top:.55rem}
.btn-sm{font-size:.65rem;font-weight:700;padding:.32rem .85rem;border-radius:3px;border:none;cursor:pointer;font-family:var(--font);transition:all .15s}
.btn-sm-em{background:rgba(var(--em-rgb),.12);color:var(--em);border:1px solid rgba(var(--em-rgb),.2)}
.btn-sm-em:hover{background:rgba(var(--em-rgb),.2)}
.btn-sm-sky{background:rgba(56,189,248,.1);color:var(--sky);border:1px solid rgba(56,189,248,.2)}
.btn-sm-sky:hover{background:rgba(56,189,248,.18)}
.err-box{background:rgba(248,113,113,.07);border:1px solid rgba(248,113,113,.2);border-radius:var(--rs);padding:.55rem .8rem;font-size:.7rem;color:var(--red);margin-top:.65rem;display:none}
.err-box.show{display:block}
.progress-bar{height:4px;background:var(--line);border-radius:2px;margin-top:.75rem;overflow:hidden;display:none}
.progress-bar.show{display:block}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--em),var(--em2));width:0%;transition:width .35s;border-radius:2px}
.toast{position:fixed;top:1rem;left:50%;transform:translateX(-50%) translateY(-12px);display:flex;align-items:center;gap:.5rem;padding:.65rem 1.1rem .65rem .75rem;border-radius:4px;font-size:.78rem;font-weight:700;z-index:9999;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;max-width:92vw;backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{background:rgba(24,24,24,.97);border:1.5px solid rgba(var(--em-rgb),.5);color:var(--em)}
.toast.err{background:rgba(24,24,24,.97);border:1.5px solid rgba(248,113,113,.5);color:var(--red)}
.t-ico{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.toast.ok .t-ico{background:rgba(var(--em-rgb),.18)}.toast.err .t-ico{background:rgba(248,113,113,.18)}
.info-banner{background:rgba(var(--em-rgb),.05);border:1px solid rgba(var(--em-rgb),.12);border-radius:var(--rs);padding:.65rem .9rem;font-size:.68rem;color:var(--t2);line-height:1.7;margin-bottom:1.2rem}
.recent-list{display:flex;flex-direction:column;gap:.45rem;margin-top:.75rem}
.recent-item{background:var(--bg2);border:1px solid var(--line);border-radius:var(--rs);padding:.6rem .85rem;display:flex;align-items:center;gap:.6rem;cursor:pointer;transition:border-color .15s}
.recent-item:hover{border-color:var(--line2)}
.recent-thumb{width:34px;height:34px;border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--bg3)}
.recent-info{flex:1;min-width:0}
.recent-name{font-size:.7rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.1rem}
.recent-url{font-size:.6rem;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:monospace}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin .7s linear infinite;display:inline-block;line-height:1}
.slug-row{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:var(--rs);overflow:hidden;transition:border-color .15s}
.slug-row:focus-within{border-color:rgba(var(--em-rgb),.3)}
.slug-prefix{font-size:.65rem;color:var(--t3);padding:.58rem 0 .58rem .8rem;white-space:nowrap;flex-shrink:0;font-family:monospace}
.slug-ext{font-size:.65rem;color:var(--em);padding:.58rem .8rem .58rem 0;white-space:nowrap;flex-shrink:0;font-family:monospace}
.slug-inp{border:none!important;border-radius:0!important;padding-left:.25rem!important;padding-right:0!important;background:transparent!important;flex:1;min-width:0}
body{background-color:#181818!important;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px)!important;background-size:50px 50px!important;position:relative}
body::before{content:'';position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);width:800px;height:600px;background:radial-gradient(ellipse,rgba(255,255,255,.028) 0%,transparent 65%)!important;filter:blur(80px)!important;pointer-events:none;z-index:0}
@media(max-width:600px){.wrap{padding:1.25rem .75rem 4rem}.card{padding:1rem}.drop-zone{padding:1.75rem .75rem}.page-title{font-size:1rem}.info-banner{font-size:.64rem;padding:.55rem .75rem}.result-actions{flex-wrap:wrap}}