/* styles.css */
:root {
  --bg: #e9f3ff;
  --card: #ffffff;
  --accent: #0d47a1;
  --text: #111111;
  --muted: #4a5568;
  --radius: 12px;
}
* { box-sizing: border-box; }
body.bg { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto; color: var(--text); background: var(--bg); }
.container { max-width: 1100px; margin: 20px auto; padding: 0 16px; }
.center { display:flex; align-items:center; justify-content:center; min-height: 100vh; }
.card { background: var(--card); border: 1px solid #dde7f6; border-radius: var(--radius); padding: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
h1,h2,h3 { color: var(--accent); margin-top:0 }
.form label { display:block; margin: 10px 0 6px; color: var(--muted); font-weight:600; }
.form input, .form select, .form button, .form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: var(--radius); font-size: 14px;
}
.form button { background: var(--accent); color: white; border: none; cursor: pointer; margin-top: 10px; }
.form-inline { display:grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
.form-inline label { margin-top:0 }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.table { width:100%; border-collapse: collapse; margin-top: 12px; }
.table th, .table td { border-bottom: 1px solid #e2e8f0; padding: 8px; text-align:left; }
.alert { background: #fee2e2; color:#991b1b; border:1px solid #fecaca; padding:10px; border-radius: var(--radius); margin: 10px 0; }
.info { background: #dcfce7; color:#166534; border:1px solid #bbf7d0; padding:10px; border-radius: var(--radius); margin: 10px 0; }
.row { display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.topbar { display:flex; align-items:center; justify-content:space-between; background:#dbeafe; padding:10px 16px; border-bottom:1px solid #bfdbfe; position:sticky; top:0; z-index:10; }
.topbar a { margin-left: 10px; color: var(--accent); text-decoration:none; font-weight:600; }
.btnlike{display:inline-block;padding:10px 12px;border:1px solid #cbd5e1;border-radius:12px;text-decoration:none;margin-left:8px}
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr 1fr; }
  .form-inline { grid-template-columns: 1fr 1fr 1fr; }
}