*{box-sizing:border-box}body{font-family:system-ui,Arial,sans-serif;margin:0;background:#f4f6f9;color:#222}
.top{background:#1f3a5f;color:#fff;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:10px 20px;gap:10px}
.top nav a{color:#dbe7f7;margin-left:14px;text-decoration:none}.top nav a:hover{color:#fff;text-decoration:underline}
main{max-width:1050px;margin:20px auto;padding:0 16px}
h1{font-size:1.5rem}h2{font-size:1.15rem;margin-top:28px}
.card{background:#fff;border-radius:8px;padding:16px;margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.stat{font-size:1.6rem;font-weight:700;color:#1f3a5f}.muted{color:#777;font-size:.9rem}
table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:8px 10px;border-bottom:1px solid #e5e8ee;text-align:left;font-size:.93rem}
th{background:#eef2f7}td.n,th.n{text-align:right}
form.row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
label{display:flex;flex-direction:column;font-size:.85rem;gap:3px}
input,select{padding:7px;border:1px solid #c5ccd6;border-radius:5px;font-size:.95rem}
button,.btn{background:#1f3a5f;color:#fff;border:0;padding:8px 14px;border-radius:5px;cursor:pointer;text-decoration:none;font-size:.92rem;display:inline-block}
button.red{background:#b3261e}.flash{background:#e7f5e9;border:1px solid #a5d6a7;padding:10px;border-radius:6px;margin-bottom:14px}
.err{background:#fdecea;border:1px solid #f5b5af;padding:10px;border-radius:6px;margin-bottom:14px}
.badge{padding:2px 8px;border-radius:10px;font-size:.8rem;background:#e0e6ee}.ok{background:#d9f2dd}.bad{background:#fbd9d5}
.login{max-width:360px;margin:80px auto}
@media print{.top,.noprint{display:none}body{background:#fff}.card{box-shadow:none}}
.layout{display:flex;min-height:100vh}
.side{width:235px;background:#fff;border-right:1px solid #e3e7ee;flex-shrink:0}
.brand{font-weight:700;color:#e8512f;font-size:1.1rem;padding:20px 18px;border-bottom:1px solid #eef0f4}
.side nav a{display:flex;gap:10px;align-items:center;padding:11px 18px;color:#555;text-decoration:none;font-size:.95rem}
.side nav a:hover{background:#f4f6f9}.side nav a.act{background:#fdeee9;color:#e8512f;font-weight:600;border-right:3px solid #e8512f}
.content{flex:1;min-width:0}.topbar{background:#fff;border-bottom:1px solid #e3e7ee;padding:10px 18px;display:flex;gap:12px;align-items:center}
.burger{display:none;background:none;color:#333;font-size:1.3rem;padding:0 6px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px}
.kpi{border-radius:8px;padding:18px;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.kpi small{opacity:.9;display:block}.kpi b{font-size:1.5rem;display:block;margin-top:6px}
.kpi.red{background:#f1553a}.kpi.green{background:#39ce8a}.kpi.blue{background:#4a6fd8}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px}
.chartbox{background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08);overflow:hidden}
.chartbox h3{margin:0;background:#f1553a;color:#fff;font-size:.95rem;padding:10px 14px}
.chartbox div{padding:14px;position:relative;height:320px}
.pay{display:inline-block;border:2px solid #444;border-radius:12px;padding:14px 30px;font-size:1.4rem;font-weight:700;color:#444;text-decoration:none;box-shadow:0 4px 0 #bbb}
.bar{background:#e5e8ee;border-radius:6px;height:14px;overflow:hidden}.bar i{display:block;height:100%;background:#4a6fd8}
@media(max-width:800px){.side{position:fixed;left:-250px;top:0;bottom:0;z-index:20;transition:left .2s}.side.open{left:0}.burger{display:block}}
@media print{.side,.topbar{display:none}}