:root {
  --navy: #1F4E78; --blue: #2E75B6; --light-blue: #EAF1FB; --hdr-blue: #D9E1F2;
  --yellow: #FFF2CC; --warn: #FCE4D6; --green: #008000; --text: #222; --muted: #595959;
  --border: #d9d9d9; --bg: #f4f6f8; --card: #ffffff;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; color: var(--text); background: var(--bg); }
.app { display:flex; min-height:100vh; }
.sidebar { width:230px; background:var(--navy); color:white; display:flex; flex-direction:column; padding:16px 0; flex-shrink:0; }
.brand { font-size:18px; font-weight:bold; padding:0 16px 16px; border-bottom:1px solid rgba(255,255,255,.2); margin-bottom:8px; }
.navlink { background:none; border:none; color:white; text-align:left; padding:10px 16px; cursor:pointer; font-size:14px; opacity:.85; }
.navlink:hover { background:rgba(255,255,255,.1); opacity:1; }
.navlink.active { background:var(--blue); opacity:1; font-weight:bold; }
.sidebar-footer { margin-top:auto; padding:12px 16px; display:flex; flex-direction:column; gap:8px; border-top:1px solid rgba(255,255,255,.2); }
.btn-secondary, .btn-danger, button.btn { padding:8px 10px; border-radius:4px; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08); color:white; cursor:pointer; font-size:12px; text-align:center; }
.btn-danger { border-color:#e57373; color:#ffcdd2; }
.privacy-note { font-size:10px; opacity:.7; line-height:1.4; }
.content { flex:1; padding:24px 32px; overflow-x:auto; }
.tab h1 { color:var(--navy); font-size:22px; margin-top:0; }
.tab h2 { background:var(--blue); color:white; padding:8px 12px; border-radius:4px; font-size:14px; margin:24px 0 12px; }
.subtext { color:var(--muted); font-size:13px; margin-top:-8px; margin-bottom:16px; }
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:8px; }
.kpi { background:var(--light-blue); border:2px solid var(--blue); border-radius:6px; padding:12px; text-align:center; }
.kpi .label { font-size:10px; font-weight:bold; color:var(--muted); text-transform:uppercase; }
.kpi .value { font-size:22px; font-weight:bold; color:var(--navy); margin-top:4px; }
.kpi .flag-sub { font-size:11px; font-weight:bold; margin-top:4px; }
.kpi.kpi-ok { border-color:#2e9e5b; background:#eafaf0; }
.kpi.kpi-ok .flag-sub { color:#1e7a43; }
.kpi.kpi-warn { border-color:#c00; background:#fdeaea; }
.kpi.kpi-warn .flag-sub { color:#a30000; }
table { border-collapse:collapse; width:100%; margin-bottom:16px; background:var(--card); }
th, td { border:1px solid var(--border); padding:6px 8px; font-size:13px; text-align:right; }
th { background:var(--hdr-blue); font-weight:bold; text-align:center; }
td:first-child, td.left, th:first-child { text-align:left; }
input[type=number], input[type=text], select { width:100%; padding:4px 6px; border:1px solid var(--border); border-radius:3px; font-size:13px; color:#0000FF; }
input:focus, select:focus { outline:2px solid var(--blue); }
.flag-trim { color:#c00; font-weight:bold; }
.flag-ok { color:var(--green); font-weight:bold; }
.note-box { background:#fffbea; border:1px solid #e0c56a; border-radius:4px; padding:10px 12px; font-size:13px; margin-bottom:16px; }
.warn-box { background:var(--warn); border:1px solid #d98a5a; border-radius:4px; padding:10px 12px; font-size:13px; margin-bottom:16px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:6px; padding:16px; margin-bottom:16px; }
.row-actions { display:flex; gap:8px; margin-bottom:12px; }
.btn { background:var(--blue); color:white; border:none; padding:8px 14px; border-radius:4px; cursor:pointer; font-size:13px; }
.btn:hover { background:var(--navy); }
.btn-remove { background:#c00; color:white; border:none; padding:4px 8px; border-radius:3px; cursor:pointer; font-size:11px; }
.save-confirm { color:#1e7a43; font-weight:bold; font-size:13px; margin-top:8px; min-height:18px; }
canvas { max-height:360px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } .app { flex-direction:column; } .sidebar { width:100%; flex-direction:row; overflow-x:auto; } .sidebar-footer{flex-direction:row;} }