:root{
  --bg:#0f172a; --card:#111827; --ink:#e5e7eb; --muted:#9ca3af; --line:#1f2937; --accent:#38bdf8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:980px;margin:auto;padding:20px}
header,footer{border-bottom:1px solid var(--line)} footer{border-top:1px solid var(--line);border-bottom:none}
.brand{display:flex;align-items:center;gap:10px}
nav a{margin-right:14px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:14px 0}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
label{display:block;margin:8px 0 4px}
input,select,button,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #334155;background:#0b1220;color:var(--ink)}
button{cursor:pointer}
.result{margin-top:10px;font-weight:600}
.small{font-size:.92rem;color:var(--muted)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:4px 10px;border:1px solid #334155;border-radius:999px;color:var(--muted)}
.ad{display:flex;align-items:center;justify-content:center;height:90px;border:1px dashed #334155;border-radius:10px;color:#94a3b8;margin:10px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:720px){ .grid-2{grid-template-columns:1fr} }