:root{
  --bg:#0b0b12; --bg2:#12121e; --card:#171726; --card2:#1e1e30;
  --line:#2a2a40; --txt:#f2f2f8; --mut:#a7a7bd; --acc:#ff3b5c; --acc2:#ffb020;
  --ok:#2fbf71; --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1060px;margin:0 auto;padding:0 18px}
header.site{position:sticky;top:0;z-index:20;background:rgba(11,11,18,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:14px;padding:13px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;text-decoration:none;letter-spacing:.2px}
.logo .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--acc),var(--acc2));display:grid;place-items:center;font-size:18px;color:#fff;flex:none}
.logo small{display:block;font-size:11px;color:var(--mut);font-weight:600;letter-spacing:.4px}
.nav .links{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.nav .links a{text-decoration:none;color:var(--mut);font-size:14px;font-weight:600;padding:8px 12px;border-radius:10px}
.nav .links a:hover,.nav .links a.active{color:var(--txt);background:var(--card2)}
.hero{padding:52px 0 30px;text-align:center}
.hero .badge{display:inline-block;background:var(--card2);border:1px solid var(--line);color:var(--acc2);font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:999px;letter-spacing:.4px}
.hero h1{font-size:clamp(30px,6vw,50px);line-height:1.12;margin:18px auto 12px;max-width:760px}
.hero h1 .grad{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mut);max-width:620px;margin:0 auto;font-size:16.5px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;padding:26px 0 8px}
.tool-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-decoration:none;display:block;transition:transform .15s,border-color .15s}
.tool-card:hover{transform:translateY(-3px);border-color:var(--acc)}
.tool-card .icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:23px;margin-bottom:13px;background:var(--card2)}
.tool-card h3{font-size:19px;margin-bottom:6px}
.tool-card p{color:var(--mut);font-size:14.5px}
.tool-card .go{display:inline-block;margin-top:14px;color:var(--acc2);font-weight:700;font-size:14px}
section.block{padding:30px 0}
section.block h2{font-size:24px;margin-bottom:10px}
section.block p.lead{color:var(--mut);max-width:680px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.step b{color:var(--acc2)}
.step p{color:var(--mut);font-size:14.5px;margin-top:5px}
footer.site{border-top:1px solid var(--line);margin-top:44px;padding:26px 0 34px;color:var(--mut);font-size:13.5px}
footer.site a{color:var(--acc2);text-decoration:none}
/* Tool pages */
.tool-head{padding:36px 0 6px}
.tool-head h1{font-size:clamp(25px,5vw,36px);margin-bottom:8px}
.tool-head p{color:var(--mut);max-width:640px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:20px}
label{display:block;font-size:13.5px;font-weight:700;margin:14px 0 6px;color:var(--txt)}
label:first-child{margin-top:0}
input[type=text],select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:11px;color:var(--txt);padding:12px 13px;font-size:15px;font-family:inherit}
input[type=text]:focus,select:focus,textarea:focus{outline:2px solid var(--acc);border-color:transparent}
.hint{font-size:12.5px;color:var(--mut);margin-top:4px}
.btn{display:inline-block;background:linear-gradient(135deg,var(--acc),#ff5e3a);color:#fff;border:none;font-weight:800;font-size:15.5px;padding:13px 22px;border-radius:12px;cursor:pointer;margin-top:18px;width:100%}
.btn:active{transform:scale(.99)}
.btn.secondary{background:var(--card2);color:var(--txt);border:1px solid var(--line)}
.results{margin-top:22px;display:none}
.results.show{display:block}
.result-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:17px;margin-bottom:12px}
.result-card .tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.5px;color:var(--acc2);background:var(--card2);border:1px solid var(--line);padding:4px 9px;border-radius:999px;margin-bottom:9px}
.result-card h4{font-size:16.5px;margin-bottom:6px}
.result-card p,.result-card li{font-size:15px;color:#e6e6f0}
.result-card ul{padding-left:19px}
.result-card .body{white-space:pre-wrap;word-break:break-word}
.copy-btn{float:right;background:var(--card2);border:1px solid var(--line);color:var(--txt);font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:9px;cursor:pointer}
.copy-btn:hover{border-color:var(--ok);color:var(--ok)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 16px}
.actions .btn{width:auto;margin-top:0;padding:11px 18px;font-size:14px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);background:var(--ok);color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:999px;opacity:0;transition:all .25s;z-index:50;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:560px){.nav .links a{padding:7px 9px;font-size:13px}.hero{padding:38px 0 22px}}