:root {
  --green:#10251c; --green2:#1d4d38; --orange:#e8710a; --cream:#f4f1e9;
  --ink:#17211c; --muted:#708078; --line:#dde5df; --white:#fff;
}
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,system-ui,Arial,sans-serif; color:var(--ink); background:#f4f7f5; }
.app-shell { display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.sidebar { background:var(--green); color:#fff; padding:26px 18px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand { display:flex; gap:12px; align-items:center; }
.brand-mark { width:42px; height:42px; border-radius:12px; background:var(--orange); display:grid; place-items:center; font-weight:900; font-size:24px; }
.brand b,.brand small,.sidebar-user b,.sidebar-user small { display:block; }
.brand small { opacity:.65; margin-top:2px; }
.sidebar nav { display:grid; gap:5px; margin-top:36px; }
.sidebar nav a { color:#d7e3dc; text-decoration:none; padding:12px 14px; border-radius:9px; }
.sidebar nav a:hover { background:#ffffff12; color:#fff; }
.sidebar-user { margin-top:auto; border-top:1px solid #ffffff20; padding:18px 10px; }
.sidebar-user small { color:#9fb5a9; margin:4px 0 12px; }
.sidebar-user a { color:#f1a35d; font-size:13px; }
.topbar { height:72px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 32px; gap:16px; }
.topbar h1 { font-size:17px; margin:0; }
.sync-pill { margin-left:auto; background:#e5f4eb; color:#197342; padding:7px 11px; border-radius:999px; font-size:12px; font-weight:700; }
.menu-button { display:none; }
.page { padding:32px; max-width:1500px; margin:auto; }
.page-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:24px; }
.page-heading h2 { font-size:30px; margin:3px 0; }
.eyebrow { font-size:11px; letter-spacing:1.4px; font-weight:800; color:var(--orange); margin:0; }
.button,button[type=submit] { background:var(--orange); color:#fff; border:0; border-radius:9px; padding:11px 16px; text-decoration:none; font-weight:750; cursor:pointer; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.stats article,.panel { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 5px 24px #20382a0a; }
.stats article { padding:21px; }
.stats span { display:block; color:var(--muted); font-size:13px; margin-bottom:12px; }
.stats strong { font-size:22px; }
.panel { padding:22px; }
.panel-title { display:flex; justify-content:space-between; align-items:center; }
.panel-title a { color:var(--orange); }
table { border-collapse:collapse; width:100%; }
th,td { text-align:left; border-bottom:1px solid #edf1ee; padding:14px 10px; font-size:13px; }
th { color:var(--muted); font-size:11px; text-transform:uppercase; }
td small { display:block; color:var(--muted); }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at top right,#e7efe9 0,transparent 38%),linear-gradient(145deg,var(--green),#183b2b); }
.login-card { width:min(440px,100%); background:var(--white); padding:38px; border-radius:20px; box-shadow:0 24px 70px #08150f66; }
.login-brand { margin-bottom:30px; }
.login-card h1 { margin:0 0 8px; font-size:30px; }
.login-card>p { margin:0 0 24px; color:var(--muted); }
.login-card form { display:grid; gap:18px; }
.login-card label { display:grid; gap:7px; font-size:13px; font-weight:700; }
.login-card input { width:100%; padding:13px 14px; border:1px solid #cbd7d0; border-radius:9px; font:inherit; outline:none; }
.login-card input:focus { border-color:var(--orange); box-shadow:0 0 0 3px #e8710a20; }
.login-card button { margin-top:4px; font-size:15px; }
.alert { background:#fff0ee; color:#a92d24; border:1px solid #f0c4bf; border-radius:9px; padding:11px 13px; margin-bottom:18px; }
@media(max-width:1000px) { .stats{grid-template-columns:repeat(2,1fr)} .app-shell{grid-template-columns:220px 1fr} .page{padding:24px} }
@media(max-width:760px) { .app-shell{display:block} .sidebar{position:fixed;left:-280px;width:260px;z-index:20;transition:left .2s} .menu-open .sidebar{left:0} .menu-button{display:inline-grid;place-items:center;background:var(--green);padding:8px 10px} .topbar{padding:0 18px} .page{padding:20px 14px} .page-heading{align-items:flex-start;gap:14px} .page-heading h2{font-size:24px} .panel{overflow-x:auto} }
@media(max-width:520px) { .stats{grid-template-columns:1fr} .login-card{padding:28px 22px} .topbar h1{font-size:14px} }