:root { --bg:#0e0e10; --fg:#e7e7ea; --muted:#9aa0a6; --accent:#4aa3ff; --card:#151519; --bad:#ff5c5c; --good:#4cd97b; }
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:80vw;margin:0 auto;padding:20px}
.card{background:var(--card);border:1px solid #22242a;border-radius:12px;padding:16px;margin:14px 0}
.btn{display:inline-block;background:var(--accent);color:#000;padding:8px 12px;border-radius:8px;font-weight:600}
.btn.secondary{background:#2b2f36;color:var(--fg)}
.input,textarea,select{width:100%;background:#0f1116;color:var(--fg);border:1px solid #2a2e36;border-radius:8px;padding:8px}
label{display:block;margin:8px 0 4px;color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>.col{flex:1 1 300px}
.info{color:var(--muted)}
.bad{color:var(--bad)}.good{color:var(--good)}
.small{font-size:12px;color:var(--muted)}
hr{border:0;border-top:1px solid #22242a;margin:16px 0}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:13px;background:#0b0c10;padding:2px 6px;border-radius:6px}
blockquote{margin:8px 0;padding-left:10px;border-left:3px solid #2d3340;color:var(--muted)}
.checkbox-container{display:flex;align-items:center;margin:8px 0}
.checkbox-container input[type="checkbox"]{margin-right:6px}

/* Responsive improvements */

@media (max-width: 768px) {
  .container{padding:15px}
  .card{padding:12px;margin:10px 0}
  .btn{padding:6px 10px;font-size:14px}
  .row{gap:8px}
  .row>.col{flex:1 1 100%}
}

@media (max-width: 480px) {
  .container{padding:10px}
  .card{padding:10px;margin:8px 0}
  .btn{padding:5px 8px;font-size:13px}
}