*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0b0b0d;color:#eaeaea;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto}
.container{max-width:1040px;margin:32px auto;padding:20px}
.header{display:flex;align-items:center;gap:12px}
.header img{width:36px;height:36px}
.card{background:#141419;border:1px solid #23232b;border-radius:16px;padding:20px;margin-top:16px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
h1{font-size:28px;margin:0}
h2{font-size:16px;font-weight:500;color:#b6b6bf;margin:0}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.btn{border:1px solid #3a3a46;background:#1b1b22;color:#fff;border-radius:12px;padding:14px 22px;cursor:pointer;font-weight:800;font-size:18px}
.btn:active{transform:scale(.98)}
.badge{background:#222230;border:1px solid #313141;border-radius:10px;padding:8px 10px;font-weight:700}
.result{font-size:30px;direction:rtl;line-height:1.8;margin-top:8px;word-break:break-word}
.small{font-size:12px;color:#9b9baa}
.footer{opacity:.7;text-align:center;margin-top:24px;font-size:12px}
.drop{border:2px dashed #3a3a46;border-radius:12px;padding:12px;text-align:center}