/* public/css/styles.css */
:root { --bg: #0d0f13; --fg: #e7edf4; --muted: #9fb0c3; --brand: #2e7cfb; --ok: #1bbd66; --bad: #e55353; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg); color: var(--fg);
}
header, footer { padding: 1rem 1.25rem; background: #12151b; border-bottom: 1px solid #1f2630; }
header a { color: var(--fg); text-decoration: none; margin-right: 1rem; }
.container { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.card { background: #131820; border: 1px solid #1e2530; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
input, button, select, textarea {
  background: #0f131a; color: var(--fg); border: 1px solid #1f2630; border-radius: 6px; padding: 0.6rem 0.8rem; width: 100%;
}
button, .btn {
  cursor: pointer; width: auto; background: var(--brand); border: none; color: #fff; font-weight: 600;
}
.btn-outline { background: transparent; border: 1px solid var(--brand); color: var(--fg); }
.alert { padding: 0.8rem; border-radius: 6px; margin-bottom: 1rem; }
.alert-ok { background: rgba(27,189,102,0.1); border: 1px solid var(--ok); }
.alert-bad { background: rgba(229,83,83,0.1); border: 1px solid var(--bad); }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
label { display: block; margin-bottom: 0.4rem; color: var(--muted); }
nav .right { float: right; }
small.muted { color: var(--muted); }