:root{
  --green-900:#123B1F; --green-800:#1B5E20; --green-700:#2E7D32; --green-600:#3E8E41;
  --green-100:#E7F1E5;
  --gold-600:#C98500; --gold-500:#D4A017; --gold-100:#FBEFD3;
  --cream:#FAF7F0; --surface:#FFFFFF;
  --ink-primary:#1F2A1C; --ink-secondary:#52514e; --ink-muted:#898781;
  --border:rgba(18,59,31,0.12); --gridline:#e1e0d9;
  --good:#0ca30c; --warning:#c98500; --serious:#ec835a; --critical:#d03b3b;
  --seq-5:#256abf;
  --radius:12px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--cream);color:var(--ink-primary);}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--green-900),var(--green-700));padding:20px;}
.login-card{background:var(--surface);border-radius:16px;padding:40px 36px;width:100%;max-width:380px;box-shadow:0 30px 70px rgba(0,0,0,0.3);}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.login-logo svg{width:34px;height:34px;}
.login-logo .word{font-size:19px;font-weight:800;color:var(--green-800);}
.login-logo .tag{display:block;font-size:9px;font-weight:700;letter-spacing:2px;color:var(--gold-600);text-transform:uppercase;}
.login-card h1{font-size:20px;margin:22px 0 4px;}
.login-card p.sub{margin:0 0 26px;font-size:13.5px;color:var(--ink-secondary);}

/* ---------- shared form bits ---------- */
.field{display:grid;gap:6px;margin-bottom:16px;}
.field label{font-size:12.5px;font-weight:700;color:var(--ink-secondary);}
.field input, .field select, .field textarea{padding:11px 13px;border-radius:9px;border:1.5px solid var(--border);font-size:14px;background:var(--cream);color:var(--ink-primary);width:100%;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--green-600);outline-offset:1px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 20px;border-radius:9px;font-weight:700;font-size:13.5px;border:none;transition:.15s;}
.btn-primary{background:var(--green-800);color:#fff;}
.btn-primary:hover{background:var(--green-700);}
.btn-block{width:100%;}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--ink-secondary);}
.btn-ghost:hover{background:var(--green-100);}
.btn-danger{background:#fdeceb;color:var(--critical);}
.btn-danger:hover{background:#fbdad8;}
.alert{padding:12px 14px;border-radius:9px;font-size:13px;margin-bottom:16px;line-height:1.5;}
.alert-error{background:#fdeceb;color:#8a2323;}
.alert-success{background:#e7f7e7;color:#1a5c1a;}
.alert-info{background:var(--gold-100);color:#6b4c00;}

/* ---------- APP SHELL ---------- */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;}
.sidebar{background:var(--green-900);color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;}
.sb-logo{display:flex;align-items:center;gap:10px;padding:6px 8px 26px;}
.sb-logo svg{width:30px;height:30px;}
.sb-logo .word{font-size:16px;font-weight:800;}
.sb-logo .tag{display:block;font-size:8.5px;letter-spacing:2px;color:var(--gold-500);text-transform:uppercase;}
.sb-nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.sb-link{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;font-size:14px;font-weight:600;color:rgba(255,255,255,0.68);}
.sb-link svg{width:18px;height:18px;flex:0 0 auto;}
.sb-link:hover{background:rgba(255,255,255,0.06);color:#fff;}
.sb-link.active{background:var(--green-700);color:#fff;}
.sb-foot{border-top:1px solid rgba(255,255,255,0.12);padding-top:14px;}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px;font-size:13px;}
.sb-user .av{width:30px;height:30px;border-radius:50%;background:var(--gold-500);color:var(--green-900);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;}
.sb-user small{display:block;color:rgba(255,255,255,0.55);font-size:11px;}
.sb-logout{width:100%;margin-top:10px;background:rgba(255,255,255,0.08);color:#fff;border:none;padding:9px;border-radius:8px;font-size:12.5px;font-weight:700;cursor:pointer;}
.sb-logout:hover{background:rgba(255,255,255,0.15);}

.main{padding:28px 34px 60px;overflow-y:auto;}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
.topbar h2{font-size:22px;margin:0;color:var(--green-900);}
.topbar p{margin:4px 0 0;font-size:13.5px;color:var(--ink-secondary);}

.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}
.kpi .top{display:flex;justify-content:space-between;align-items:flex-start;}
.kpi .icon{width:38px;height:38px;border-radius:10px;background:var(--green-100);display:flex;align-items:center;justify-content:center;}
.kpi .icon svg{width:19px;height:19px;color:var(--green-800);}
.kpi .val{font-size:26px;font-weight:800;margin-top:14px;color:var(--ink-primary);}
.kpi .lbl{font-size:12.5px;color:var(--ink-secondary);margin-top:2px;}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:22px;}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.panel-head h3{margin:0;font-size:15.5px;color:var(--green-900);}
.panel-head span.muted{font-size:12.5px;color:var(--ink-muted);}

.chart{display:flex;align-items:flex-end;gap:14px;height:170px;padding-top:10px;position:relative;}
.chart::before{content:"";position:absolute;left:0;right:0;bottom:26px;border-top:1px solid var(--gridline);}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;}
.bar{width:60%;background:var(--seq-5);border-radius:4px 4px 0 0;position:relative;min-height:2px;}
.bar-col .bv{position:absolute;top:-20px;font-size:11px;font-weight:700;color:var(--ink-secondary);}
.bar-col .bl{position:absolute;bottom:-24px;font-size:11.5px;color:var(--ink-muted);}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:0.5px;color:var(--ink-muted);padding:0 12px 10px;border-bottom:1px solid var(--gridline);font-weight:700;}
td{padding:13px 12px;border-bottom:1px solid var(--gridline);color:var(--ink-primary);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;}
.badge.good{background:#e7f7e7;color:var(--good);} .badge.good::before{background:var(--good);}
.badge.warning{background:var(--gold-100);color:var(--warning);} .badge.warning::before{background:var(--warning);}
.badge.serious{background:#fdece4;color:var(--serious);} .badge.serious::before{background:var(--serious);}
.badge.critical{background:#fdeceb;color:var(--critical);} .badge.critical::before{background:var(--critical);}

.toolbar{display:flex;gap:10px;align-items:center;}
.search{padding:9px 13px;border-radius:8px;border:1.5px solid var(--border);font-size:13px;background:var(--cream);min-width:200px;}
.icon-btn{background:transparent;border:none;padding:6px;border-radius:6px;color:var(--ink-secondary);}
.icon-btn:hover{background:var(--green-100);color:var(--green-800);}
.icon-btn svg{width:16px;height:16px;}
.row-actions{display:flex;gap:4px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.empty{text-align:center;padding:40px 20px;color:var(--ink-muted);font-size:13.5px;}
.news-item{border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.news-item .txt strong{display:block;font-size:14px;margin-bottom:3px;}
.news-item .txt span{font-size:12.5px;color:var(--ink-muted);}
.content-editor label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-secondary);margin:16px 0 6px;}
.content-editor label:first-child{margin-top:0;}

@media (max-width:1000px){
  .app{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .kpi-row{grid-template-columns:repeat(2,1fr);}
}