*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at top,#7c3aed 0,#111827 45%,#020617 100%);color:#fff;display:flex;align-items:center;justify-content:center;padding:24px}.wrap{width:100%;max-width:760px}.card{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 80px rgba(0,0,0,.35);backdrop-filter:blur(18px);border-radius:34px;padding:34px}.badge{display:inline-block;background:#22c55e;color:#052e16;padding:8px 14px;border-radius:999px;font-weight:800}h1{font-size:42px;margin:18px 0 8px}.sub{color:#dbeafe;font-size:18px;line-height:1.5}.box{margin-top:24px}.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:170px;border:2px dashed rgba(255,255,255,.45);border-radius:26px;background:rgba(255,255,255,.08);cursor:pointer;text-align:center}.drop input{display:none}.drop span{font-size:22px;font-weight:900}.drop small{color:#cbd5e1}.btn{border:0;border-radius:18px;padding:17px 24px;font-size:18px;font-weight:900;cursor:pointer;transition:.2s;box-shadow:0 12px 28px rgba(0,0,0,.25)}.btn:hover{transform:translateY(-2px)}.primary{width:100%;margin-top:16px;background:linear-gradient(135deg,#22c55e,#84cc16);color:#052e16}.copy{background:linear-gradient(135deg,#38bdf8,#2563eb);color:#fff}.replace{width:100%;margin-top:16px;background:linear-gradient(135deg,#f97316,#ef4444);color:#fff}.msg{margin-top:18px;background:rgba(255,255,255,.16);padding:14px;border-radius:16px}.result{margin-top:24px}.result img{width:100%;max-height:360px;object-fit:contain;background:#fff;border-radius:24px;padding:10px}.result label{display:block;margin:18px 0 8px;font-weight:800}.urlrow{display:flex;gap:10px}input#url{flex:1;border:0;border-radius:16px;padding:16px;font-size:15px}.hint{color:#cbd5e1;text-align:center}@media(max-width:620px){.card{padding:22px;border-radius:24px}h1{font-size:32px}.urlrow{flex-direction:column}.btn{width:100%}}