:root{
  --red:#E31837;
  --dark-red:#8F1224;
  --green:#4B7F2B;
  --dark-green:#2F5D1D;
  --cream:#FFF7ED;
  --amber:#FEF3C7;
  --orange:#F97316;
  --ink:#1F2937;
  --muted:#6B7280;
  --line:#E5E7EB;
  --white:#FFFFFF;
  --soft-red:#FDE2E7;
  --soft-green:#EAF5E1;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#fff7ed 0,#ffffff 30%,#f8fafc 100%);}
.topbar{display:grid;grid-template-columns:230px 1fr 150px;gap:20px;align-items:center;padding:18px 28px;background:linear-gradient(135deg,var(--dark-red),var(--red));color:white;box-shadow:0 10px 30px rgba(143,18,36,.25);}
.topbar img{max-height:78px;max-width:100%;background:white;border-radius:12px;padding:8px}
.brand-right{text-align:right}
.title-block{text-align:center}
.title-block h1{margin:0;font-size:30px;letter-spacing:.2px}
.title-block p{margin:8px 0 0;font-weight:600;opacity:.95}
.userbar{display:flex;gap:14px;align-items:center;justify-content:flex-end;padding:10px 28px;background:white;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.userbar a{color:var(--dark-red);font-weight:700;text-decoration:none}
.pill{border-radius:999px;padding:7px 12px;font-weight:800}
.pill.admin{background:var(--soft-green);color:var(--dark-green)}
.pill.viewer{background:var(--amber);color:#92400E}
.container{max-width:1440px;margin:24px auto;padding:0 22px 50px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.kpi{background:white;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 12px 30px rgba(31,41,55,.08);position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--red),var(--green),var(--orange))}
.kpi .label{color:var(--muted);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.kpi .value{font-size:32px;font-weight:900;margin-top:8px;color:var(--dark-red)}
.kpi .note{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.35}
.panel{background:white;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 12px 30px rgba(31,41,55,.08);margin-bottom:18px}
.panel-title{font-size:18px;font-weight:900;color:var(--dark-red);margin-bottom:14px;border-left:6px solid var(--green);padding-left:10px}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.wide-panel{grid-column:1 / span 2}
.highlight-list{display:grid;gap:10px;margin-top:14px}
.highlight-list div{background:var(--cream);border:1px solid #FED7AA;border-radius:14px;padding:12px;line-height:1.45}
.map-explain{display:grid;gap:12px}
.map-explain div{border-radius:14px;background:var(--soft-green);padding:12px;border:1px solid #BBF7D0}
.map-explain span{font-weight:900;color:var(--dark-green)}
.map-explain p{margin:5px 0 0;line-height:1.35}
.bar-row{display:grid;grid-template-columns:210px 1fr 80px;align-items:center;gap:12px;margin:9px 0}
.bar-label{font-size:13px;font-weight:700;color:var(--ink)}
.track{height:24px;background:#F3F4F6;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--green));min-width:2px}
.value{text-align:right;font-weight:900;color:var(--dark-red)}
.table-wrap{overflow:auto;border-radius:14px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;min-width:980px;background:white}
th{background:var(--dark-red);color:white;text-align:left;padding:12px;font-size:13px;position:sticky;top:0}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:13px}
tr:nth-child(even) td{background:#FFFBEB}
input,select,textarea{width:100%;border:1px solid #D1D5DB;border-radius:10px;padding:8px;font:inherit;background:white}
textarea{min-height:70px}
button{background:linear-gradient(135deg,var(--red),var(--dark-red));color:white;border:0;border-radius:12px;padding:10px 14px;font-weight:900;cursor:pointer;box-shadow:0 8px 18px rgba(227,24,55,.25)}
button:hover{transform:translateY(-1px)}
.saved{margin-left:12px;color:var(--dark-green);font-weight:800}
.status-Strong,.status-Target-Met{background:var(--soft-green);color:var(--dark-green);font-weight:900;border-radius:999px;padding:6px 10px;display:inline-block}
.status-Needs-Attention,.status-Open,.status-Needs-More-Data{background:var(--soft-red);color:var(--dark-red);font-weight:900;border-radius:999px;padding:6px 10px;display:inline-block}
.status-Improving,.status-In-Progress,.status-Video-Sample-Not-Available{background:var(--amber);color:#92400E;font-weight:900;border-radius:999px;padding:6px 10px;display:inline-block}
.settings-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.settings-grid label{font-weight:800;font-size:13px;color:var(--muted)}
.settings-grid .wide{grid-column:1 / span 4}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:var(--cream);border:1px solid #FED7AA;border-radius:999px;padding:8px 12px;font-weight:700}
.login-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,#fee2e2,transparent 34%),linear-gradient(135deg,#FFF7ED,#FFFFFF);}
.login-card{width:min(520px,92vw);background:white;border-radius:28px;padding:30px;box-shadow:0 28px 60px rgba(31,41,55,.18);border:1px solid var(--line)}
.logo-row{display:flex;justify-content:space-between;align-items:center;gap:20px}
.logo-row img{max-height:90px;max-width:45%;object-fit:contain}
.login-card h1{color:var(--dark-red);font-size:28px;margin:22px 0 8px}
.subtext,.hint{color:var(--muted);line-height:1.45}
.login-card form{display:grid;gap:10px;margin-top:18px}
.login-card label{font-weight:900;color:var(--ink)}
.login-card input{padding:12px}
.login-card button{margin-top:10px;padding:13px}
.error{background:var(--soft-red);color:var(--dark-red);padding:10px 12px;border-radius:12px;font-weight:800}
@media(max-width:960px){
  .topbar{grid-template-columns:1fr;text-align:center}
  .brand-right{text-align:center}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .two-col,.chart-grid{grid-template-columns:1fr}
  .wide-panel{grid-column:auto}
  .settings-grid{grid-template-columns:1fr}
  .settings-grid .wide{grid-column:auto}
}
@media(max-width:620px){.kpi-grid{grid-template-columns:1fr}.bar-row{grid-template-columns:1fr}.value{text-align:left}}

button.btn-add {
  background: linear-gradient(135deg, var(--green), var(--dark-green));
  box-shadow: 0 8px 18px rgba(75, 127, 43, .25);
  font-size: 13px;
  padding: 8px 12px;
}
button.btn-add:hover {
  transform: translateY(-1px);
}
button.btn-secondary {
  background: linear-gradient(135deg, var(--muted), #4B5563);
  box-shadow: 0 8px 18px rgba(107, 114, 128, .25);
}
button.btn-danger {
  background: linear-gradient(135deg, #DC2626, #991B1B);
  box-shadow: 0 8px 18px rgba(220, 38, 38, .25);
}
.delete-chip {
  transition: color 0.15s ease;
}
.delete-chip:hover {
  color: var(--red) !important;
}
.status-New-Class {
  background: var(--soft-green);
  color: var(--dark-green);
  font-weight: 900;
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-block;
}

button.btn-toggle {
  background: linear-gradient(135deg, var(--orange), #EA580C);
  box-shadow: 0 4px 10px rgba(249, 115, 22, .2);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
}
button.btn-toggle:hover {
  transform: translateY(-1px);
}
.graph-toolbar {
  display: flex;
  gap: 8px;
}
button.btn-tab {
  background: var(--white);
  color: var(--muted);
  border: 1px solid var(--line);
  box-shadow: none;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
button.btn-tab:hover {
  background: #F9FAFB;
  color: var(--ink);
  transform: none;
}
button.btn-tab.active {
  background: linear-gradient(135deg, var(--red), var(--dark-red));
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(227, 24, 55, .2);
}