:root {
  --navy:#101828;
  --navy2:#1d2939;
  --blue:#2563eb;
  --bg:#f5f7fb;
  --white:#fff;
  --border:#e4e7ec;
  --text:#101828;
  --muted:#667085;
  --green:#067647;
}

* { box-sizing:border-box; }

body {
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:Inter,Arial,sans-serif;
}

button,input { font:inherit; }

.app-shell {
  display:grid;
  grid-template-columns:250px 1fr;
  min-height:100vh;
}

.sidebar {
  display:flex;
  flex-direction:column;
  padding:26px 18px;
  color:#fff;
  background:var(--navy);
}

.sidebar-brand {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:32px;
}

.sidebar-brand strong,
.sidebar-brand small { display:block; }

.sidebar-brand small {
  margin-top:3px;
  color:#98a2b3;
}

.brand-mark {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  font-weight:800;
  background:var(--blue);
  border-radius:9px;
}

.sidebar-nav {
  display:grid;
  gap:6px;
}

.sidebar-nav a,
.sidebar-nav span {
  padding:11px 13px;
  color:#98a2b3;
  text-decoration:none;
  border-radius:7px;
}

.sidebar-nav .active {
  color:#fff;
  background:var(--navy2);
}

.safe-panel {
  display:grid;
  gap:5px;
  margin-top:auto;
  padding:15px;
  font-size:13px;
  background:var(--navy2);
  border-radius:9px;
}

.safe-panel span { color:#98a2b3; }

.main-content { padding:30px; }

.topbar,
.panel-heading,
.status-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.topbar { margin-bottom:24px; }

h1,h2,p { margin-top:0; }
h1 { margin-bottom:0; font-size:30px; }
h2 { margin-bottom:8px; font-size:20px; }

.eyebrow {
  margin-bottom:6px;
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.status-banner,
.kpi-card,
.panel {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:10px;
}

.status-banner {
  padding:18px 20px;
  margin-bottom:18px;
}

.status-banner div span,
.muted,
.kpi-card small {
  color:var(--muted);
}

.status-banner div span {
  display:block;
  margin-top:4px;
}

.status-pill {
  padding:6px 10px;
  color:var(--green);
  font-size:12px;
  font-weight:800;
  background:#ecfdf3;
  border-radius:20px;
}

.status-pill.neutral {
  color:#344054;
  background:#f2f4f7;
}

.kpi-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin-bottom:15px;
}

.kpi-card {
  display:grid;
  gap:7px;
  padding:20px;
}

.kpi-card span {
  color:var(--muted);
  font-size:13px;
}

.kpi-card strong { font-size:28px; }

.dashboard-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:15px;
}

.panel { padding:22px; }

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:20px 0 14px;
}

label {
  display:grid;
  gap:7px;
  font-size:13px;
  font-weight:700;
}

input {
  width:100%;
  padding:11px 12px;
  border:1px solid #d0d5dd;
  border-radius:7px;
}

input:disabled { background:#f9fafb; }

.primary-button,
.text-button {
  padding:10px 15px;
  border:0;
  border-radius:7px;
}

.primary-button {
  color:#fff;
  font-weight:800;
  background:var(--blue);
}

.primary-button:disabled { opacity:.55; }

.text-button {
  color:var(--text);
  background:#fff;
  border:1px solid var(--border);
}

.system-list { margin:12px 0 0; }

.system-list div {
  display:flex;
  justify-content:space-between;
  padding:13px 0;
  border-bottom:1px solid var(--border);
}

.system-list dt { color:var(--muted); }
.system-list dd { margin:0; font-weight:800; }

.login-body {
  display:grid;
  min-height:100vh;
  place-items:center;
  padding:24px;
  background:var(--navy);
}

.login-shell {
  display:grid;
  grid-template-columns:1fr 1fr;
  width:min(900px,100%);
  overflow:hidden;
  background:#fff;
  border-radius:14px;
}

.login-brand {
  padding:50px;
  color:#fff;
  background:linear-gradient(145deg,#172554,#101828);
}

.login-brand p {
  margin-top:20px;
  color:#93c5fd;
  font-weight:800;
}

.login-brand h1 {
  margin-bottom:18px;
  font-size:36px;
}

.login-brand > span:last-child {
  color:#cbd5e1;
  line-height:1.6;
}

.login-card { padding:50px 42px; }

.login-card form {
  display:grid;
  gap:12px;
  margin-top:22px;
}

.alert {
  padding:11px;
  color:#b42318;
  background:#fef3f2;
}

.security-note {
  margin-top:20px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

@media(max-width:900px) {
  .app-shell,
  .login-shell {
    grid-template-columns:1fr;
  }

  .sidebar { min-height:auto; }
  .sidebar-nav,.safe-panel { display:none; }

  .kpi-grid,
  .dashboard-grid,
  .form-grid {
    grid-template-columns:1fr;
  }

  .main-content { padding:18px; }
  .login-brand,.login-card { padding:30px; }
}