:root{
  --navy:#1F4E78; --navy-dark:#123048; --blue-light:#EAF1F8; --green:#1a7f4b;
  --amber:#c07a12; --red:#b3261e; --border:#d8e2ec; --text:#1f2a37; --muted:#64748b;
  --card-bg:#ffffff; --page-bg:#f4f7fa;
}
*{box-sizing:border-box;}
body{margin:0; font-family:Arial, Helvetica, sans-serif; background:var(--page-bg); color:var(--text); font-size:14px;}
header.topbar{background:linear-gradient(135deg,var(--navy),var(--navy-dark)); color:#fff; padding:14px 28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
header.topbar h1{margin:0; font-size:18px;}
header.topbar .who{font-size:12px; opacity:0.85;}
.btn{background:#fff; color:var(--navy); border:none; border-radius:6px; padding:8px 14px; font-size:12.5px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block;}
.btn.secondary{background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.5);}
.btn.save{background:var(--navy); color:#fff; padding:10px 22px; font-size:13px; border-radius:6px; border:none; cursor:pointer;}
.btn.danger{background:var(--red); color:#fff;}
.btn.small{padding:5px 10px; font-size:11.5px;}
nav.tabs{display:flex; gap:2px; background:#fff; border-bottom:2px solid var(--border); padding:0 28px; flex-wrap:wrap;}
nav.tabs a{padding:13px 16px; font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none; border-bottom:3px solid transparent; display:inline-block;}
nav.tabs a.active{color:var(--navy); border-bottom-color:var(--navy);}
.wrap{max-width:1300px; margin:0 auto; padding:22px 28px 60px;}
.card{background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:18px 20px; margin-bottom:18px;}
.card h2{margin:0 0 14px; font-size:15px; color:var(--navy); padding-bottom:8px; border-bottom:1px solid var(--border);}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:11.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.02em;}
.field input, .field select, .field textarea{padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-family:inherit; background:#fff;}
.form-actions{display:flex; gap:10px; margin-top:16px; align-items:center;}
.msg{font-size:12.5px; padding:8px 12px; border-radius:6px; margin-bottom:14px;}
.msg.ok{color:var(--green); background:#e5f5ec;}
.msg.err{color:var(--red); background:#fbe9e8;}
table{width:100%; border-collapse:collapse; font-size:12.5px;}
th,td{padding:7px 9px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap;}
th{background:var(--blue-light); color:var(--navy); font-size:11px; text-transform:uppercase; position:sticky; top:0;}
tbody tr:hover{background:#f8fafc;}
.table-scroll{max-height:560px; overflow:auto; border:1px solid var(--border); border-radius:6px;}
.filters{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; align-items:flex-end;}
.filters .field{min-width:150px;}
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:8px;}
.kpi{background:var(--blue-light); border-left:4px solid var(--navy); border-radius:8px; padding:12px 14px;}
.kpi .label{font-size:10.5px; color:var(--muted); text-transform:uppercase;}
.kpi .value{font-size:18px; font-weight:700; color:var(--navy); margin-top:3px;}
.badge{display:inline-block; padding:2px 8px; border-radius:10px; font-size:10.5px; font-weight:700;}
.badge.green{background:#e5f5ec; color:var(--green);}
.badge.amber{background:#fbf0dd; color:var(--amber);}
.badge.red{background:#fbe9e8; color:var(--red);}
.badge.grey{background:#eef1f4; color:var(--muted);}
.hint{font-size:11.5px; color:var(--muted); margin-top:-6px; margin-bottom:10px;}
.pill-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.pill{padding:7px 14px; border-radius:20px; border:1px solid var(--border); background:#fff; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--muted); text-decoration:none; display:inline-block;}
.pill.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.login-wrap{max-width:380px; margin:80px auto; }
footer.note{font-size:11px; color:var(--muted); text-align:center; padding:16px; }
a.link{color:var(--navy);}
@media(max-width:900px){ .grid{grid-template-columns:1fr;} .kpi-grid{grid-template-columns:repeat(2,1fr);} }