/* Simple professional style with automatic dark/light support */
:root{
  --bg:#f6f7fb;
  --card:#fff;
  --text:#222;
  --muted:#666;
  --accent:#5b4bff;
  --top:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0c0f;
    --card:#0f1114;
    --text:#e6e6e6;
    --muted:#aaa;
    --accent:#8b8bff;
    --top:#0b0c0f;
  }
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);}
.wrap{max-width:1000px;margin:1rem auto;padding:0 1rem;}
.topbar{background:var(--top);border-bottom:1px solid rgba(0,0,0,.06);padding:.6rem 0;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;}
.brand{font-weight:700}
.card{background:var(--card);padding:1rem;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.06);margin-bottom:1rem;}
.container{max-width:560px;margin:4rem auto;padding:1rem}
.btns{display:flex;gap:.6rem}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:8px;background:var(--accent);color:white;text-decoration:none}
.btn.outline{background:transparent;color:var(--accent);border:2px solid var(--accent)}
input, select, button{padding:.5rem;margin:.25rem 0;border-radius:6px;border:1px solid #ddd;width:100%}
button{background:var(--accent);color:white;border:none;cursor:pointer}
.muted{color:var(--muted);font-size:.9rem}
.table{width:100%;border-collapse:collapse}
.table th, .table td{padding:.5rem;border-bottom:1px solid #eee;text-align:left}
.error{background:#ffdddd;padding:.6rem;border-radius:6px;color:#900;margin-bottom:.5rem}