* { box-sizing: border-box; }
:root {
    --bg: #f4f6f8;
    --text: #1b2430;
    --link: #005d7a;
    --sidebar-bg: #0e2538;
    --sidebar-text: #d7e2ea;
    --card-bg: #ffffff;
    --card-shadow: 0 10px 30px rgba(12,34,56,.08);
    --border: #e6ecf0;
    --input-border: #c9d2da;
    --muted: #5b6a78;
    --button-bg: #005d7a;
    --button-secondary: #55626f;
    --tag-bg: #eef3f7;
}
body.theme-dark {
    --bg: #0c1218;
    --text: #e6edf3;
    --link: #7dd3fc;
    --sidebar-bg: #060b10;
    --sidebar-text: #c7d3dd;
    --card-bg: #141d26;
    --card-shadow: 0 12px 30px rgba(0,0,0,.35);
    --border: #283443;
    --input-border: #344253;
    --muted: #9fb0bf;
    --button-bg: #2a7ea0;
    --button-secondary: #3a4b5b;
    --tag-bg: #213140;
}
body { margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background: var(--bg); color: var(--text); transition: background .2s ease, color .2s ease; }
a { color: var(--link); text-decoration: none; }
.layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: var(--sidebar-bg); color: #fff; padding: 24px 20px; }
.sidebar h1 { margin: 0 0 16px; font-size: 20px; line-height: 1.3; }
.sidebar nav a { display: block; padding: 10px 0; color: var(--sidebar-text); }
.content { padding: 32px; }
.card { background: var(--card-bg); border-radius: 12px; padding: 24px; box-shadow: var(--card-shadow); margin-bottom: 24px; }
.card h2, .card h3, .card h4 { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.metric { background: linear-gradient(135deg, #0e2538, #1f4b67); color: #fff; border-radius: 12px; padding: 18px; }
body.theme-dark .metric { background: linear-gradient(135deg, #0b141d, #1b2a38); color: #e6edf3; }
.metric strong { display: block; font-size: 28px; margin-top: 8px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input, select, textarea, button { width: 100%; padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 8px; font: inherit; background: var(--card-bg); color: var(--text); }
textarea { min-height: 120px; resize: vertical; }
button, .button { display: inline-block; width: auto; cursor: pointer; background: var(--button-bg); color: #fff; border: 0; }
.form-grid input[type="checkbox"],
label input[type="checkbox"] { width: auto; margin-right: 8px; }
.button.secondary { background: var(--button-secondary); }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.flash { padding: 14px 18px; border-radius: 10px; margin-bottom: 18px; }
.flash.success { background: #e7f8ef; color: #10693b; }
.flash.error { background: #fdeaea; color: #8d2020; }
body.theme-dark .flash.success { background: #13251d; color: #8ee6b3; }
body.theme-dark .flash.error { background: #2a1618; color: #ffb4b4; }
.tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: var(--tag-bg); }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(135deg, #0e2538, #164764); }
body.theme-dark .login-wrap { background: linear-gradient(135deg, #05090d, #0d1822); }
.login-card { width: 100%; max-width: 460px; background: var(--card-bg); border-radius: 14px; padding: 30px; box-shadow: 0 15px 50px rgba(0,0,0,.18); }
.help { color: var(--muted); font-size: 14px; }
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.theme-toggle { margin-top: 18px; display: flex; align-items: center; gap: 8px; color: var(--sidebar-text); }
.theme-toggle button { background: transparent; border: 1px solid rgba(255,255,255,.18); color: var(--sidebar-text); }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .two-col { grid-template-columns: 1fr; } }