/* styles.css — keep it minimal, high-contrast and readable */
:root{
  --surface: #fff;
  --text: #111;
  --hair: #e5e7eb;
  --muted: #6b7280;
  --focus: #2563eb; /* blue */
  --accent: #f97316; /* orange */
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0; font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text); background: var(--surface);
}
a{ color: inherit; text-decoration: none; }
.container{ max-width: 1100px; margin: 24px auto; padding: 0 16px; }
h1,h2,h3{ margin: 12px 0; }
input, select, button, textarea{
  font: inherit; padding: 8px 10px; border: 1px solid var(--hair);
  border-radius: 8px; background: #fff;
}
label{ display:block; margin: 10px 0; }
.btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--hair); border-radius:8px; background:#fff; cursor:pointer; }
.btn.primary{ border-color: var(--focus); box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.row{ display:flex; gap:8px; flex-wrap: wrap; }
.hint{ color: var(--muted); font-size: 12px; margin-top: 4px; }
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ padding:8px 10px; border-bottom:1px solid var(--hair); text-align:left; }
.alert{ padding:10px 12px; border:1px solid var(--hair); border-radius:8px; background:#fafafa; }
hr{ border:none; border-top:1px solid var(--hair); margin:16px 0; }
kbd{ background:#f1f5f9; border:1px solid var(--hair); border-radius:4px; padding:1px 4px; }
.error{ color:#b91c1c; }
.success{ color:#166534; }
.site-header{ background: var(--focus); color:#fff; }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding:8px 16px; }
.btn.login{ border-color: var(--accent); background: var(--accent); color:#fff; }