:root { color-scheme: light; --bg:#f7f8fa; --surface:#fff; --text:#20242a; --muted:#68707d; --line:#dfe4ea; --accent:#1769aa; --green:#218838; --red:#c03434; }
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, sans-serif; color:var(--text); background:var(--bg); }
header { background:#ffffff; border-bottom:1px solid var(--line); padding:18px 32px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
header a { color:var(--text); text-decoration:none; }
main { padding:32px; max-width:1180px; margin:0 auto; }
h1 { margin:0 0 24px; font-size:32px; }
h2 { margin:0 0 18px; font-size:26px; }
h3 { margin:26px 0 10px; font-size:20px; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.menu { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:18px 0 28px; }
.menu a, .button { display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--surface); color:var(--text); padding:14px 16px; border-radius:6px; text-decoration:none; }
.menu a:hover, .button:hover { border-color:#b9c2cc; text-decoration:none; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 18px; }
table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); }
th, td { padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:#edf1f5; font-weight:bold; }
tr.clickable { cursor:pointer; }
tr.clickable:hover { background:#f1f4f7; }
input[type=text], input[type=password], select { width:100%; max-width:460px; padding:10px; border:1px solid #c8d0d8; border-radius:4px; font-size:16px; background:white; }
label { display:block; margin:12px 0 5px; font-weight:bold; }
form { margin:0 0 18px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; }
button, input[type=submit] { border:0; background:var(--green); color:white; border-radius:4px; padding:10px 16px; font-size:16px; cursor:pointer; }
button.secondary, input.secondary { background:var(--accent); }
button.danger, input.danger { background:var(--red); }
button.ghost { background:#596574; }
.back { display:inline-block; margin-bottom:18px; color:var(--muted); }
.muted { color:var(--muted); }
.status { font-size:14px; color:var(--muted); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:18px; }
.login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login .panel { width:min(430px,100%); }
.error { background:#fff1f1; color:#8a1d1d; border:1px solid #efb8b8; padding:10px 12px; border-radius:4px; }
@media (max-width: 780px) { header { padding:14px 18px; align-items:flex-start; } main { padding:22px 16px; } .split { grid-template-columns:1fr; } table { font-size:14px; } th, td { padding:9px; } }