:root{
  --bg:#0f1115; --card:#171a21; --card2:#1e222b; --line:#2a2f3a;
  --fg:#e8eaed; --muted:#9aa3b2; --accent:#4f8cff; --accent2:#3bd1a8;
  --danger:#ff6b6b; --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--fg);line-height:1.6;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:780px;margin:0 auto;padding:26px 18px 80px;}
header.site{text-align:center;margin-bottom:22px;}
header.site h1{font-size:27px;margin:0 0 8px;letter-spacing:-.3px;}
header.site .sub{color:var(--muted);font-size:16px;margin:0;}
.badge{display:inline-block;background:rgba(59,209,168,.12);color:var(--accent2);
  padding:4px 10px;border-radius:999px;font-size:12px;margin-top:10px;}
.nav{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:13px;margin:14px 0 0;}
.nav a{color:var(--muted);}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;}

/* tool */
.drop{border:2px dashed var(--line);border-radius:var(--radius);padding:34px 18px;text-align:center;
  cursor:pointer;transition:.15s;background:var(--card2);}
.drop.drag{border-color:var(--accent);background:rgba(79,140,255,.08);}
.drop strong{color:var(--accent);}
.drop p{margin:6px 0 0;color:var(--muted);font-size:13px;}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px;}
.preset{background:var(--card2);border:1px solid var(--line);color:var(--fg);padding:8px 13px;
  border-radius:10px;cursor:pointer;font-size:13px;transition:.12s;text-align:left;line-height:1.3;}
.preset:hover{border-color:var(--accent);}
.preset.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.preset small{display:block;opacity:.75;font-size:11px;}
.controls{display:none;margin-top:16px;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;}
.field input,.field select{width:100%;background:var(--card2);border:1px solid var(--line);
  color:var(--fg);padding:9px 11px;border-radius:10px;font-size:14px;}
.kbchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.kbchip{background:var(--card2);border:1px solid var(--line);color:var(--muted);padding:4px 10px;
  border-radius:999px;cursor:pointer;font-size:12px;}
.kbchip.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn{background:var(--accent);color:#fff;border:none;padding:13px 22px;border-radius:11px;
  font-size:15px;font-weight:600;cursor:pointer;transition:.12s;width:100%;}
.btn:hover{filter:brightness(1.08);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn.ghost{background:var(--card2);border:1px solid var(--line);color:var(--fg);}
.result{display:none;margin-top:16px;}
.preview{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.preview img{max-width:140px;max-height:140px;border-radius:10px;border:1px solid var(--line);background:#fff;}
.stats{flex:1;min-width:200px;font-size:14px;}
.stats div{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--line);}
.stats .big{color:var(--accent2);font-weight:700;}
.note{font-size:13px;color:var(--muted);margin-top:10px;}
.warn{color:var(--danger);}

/* content */
.content h2{font-size:20px;margin:26px 0 10px;}
.content h3{font-size:16px;margin:18px 0 6px;}
.content p,.content li{color:#c6ccd6;font-size:15px;}
footer{text-align:center;color:var(--muted);font-size:13px;margin-top:40px;}
footer a{color:var(--muted);}
@media(max-width:480px){.grid{grid-template-columns:1fr;}}