:root {
  --bg: #06111d;
  --bg-2: #091827;
  --panel: rgba(12, 31, 49, 0.78);
  --panel-strong: #0d2235;
  --text: #eaf3f8;
  --muted: #86a1b3;
  --line: rgba(145, 180, 201, 0.16);
  --cyan: #4fd1c5;
  --cyan-2: #7ce7db;
  --blue: #3a7bd5;
  --green: #45d483;
  --yellow: #f0c84b;
  --red: #ff6b6b;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.30);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 0%, rgba(38, 106, 152, 0.25), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(79, 209, 197, 0.12), transparent 26%),
    linear-gradient(145deg, var(--bg), #071422 55%, #050d16);
  color: var(--text);
}
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

/* Login */
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.login-bg-orb { position: absolute; border-radius: 50%; filter: blur(10px); opacity: .65; }
.orb-1 { width: 480px; height: 480px; background: rgba(58,123,213,.18); top: -160px; left: -100px; }
.orb-2 { width: 420px; height: 420px; background: rgba(79,209,197,.12); bottom: -170px; right: -90px; }
.login-card {
  width: min(460px, 100%);
  position: relative;
  z-index: 2;
  padding: 34px;
  border: 1px solid rgba(150, 190, 210, .18);
  border-radius: 24px;
  background: rgba(8, 24, 38, .82);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.brand-lockup, .side-brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 58px; height: 58px; display: grid; place-items: center;
  border-radius: 17px; font-weight: 900; letter-spacing: -.03em; color: #05141f;
  background: linear-gradient(135deg, var(--cyan-2), #5aa8ff);
  box-shadow: 0 14px 32px rgba(79, 209, 197, .17);
}
.brand-mark.small { width: 44px; height: 44px; border-radius: 13px; font-size: 14px; }
.eyebrow { margin: 0 0 5px; color: var(--cyan); font-size: 11px; letter-spacing: .16em; font-weight: 800; }
.login-card h1 { margin: 0; font-size: 30px; }
.login-copy { color: var(--muted); line-height: 1.6; margin: 22px 0; }
label { display: block; color: #c9d8e2; font-size: 13px; margin-bottom: 16px; font-weight: 700; }
input {
  width: 100%; margin-top: 8px; border: 1px solid rgba(145,180,201,.22); border-radius: 12px;
  padding: 13px 14px; color: var(--text); background: rgba(4, 15, 24, .72); outline: none;
}
input:focus { border-color: rgba(79,209,197,.75); box-shadow: 0 0 0 3px rgba(79,209,197,.10); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 52px; }
.icon-btn { position: absolute; top: 13px; right: 8px; height: 36px; width: 36px; background: transparent; border: 0; color: var(--muted); }
.primary-btn, .secondary-btn, .text-btn, .user-chip, .nav-link { border: 0; }
.primary-btn {
  padding: 13px 18px; border-radius: 12px; background: linear-gradient(135deg, #3bcfc0, #4e8fe8); color: #03131d; font-weight: 900;
  box-shadow: 0 12px 28px rgba(55, 164, 183, .20);
}
.full { width: 100%; }
.login-error { color: #ff9696; min-height: 20px; font-size: 13px; margin: 10px 0 0; }
.demo-credentials {
  margin-top: 20px; display: grid; grid-template-columns: 1fr auto; gap: 7px 16px; padding: 15px;
  border-radius: 14px; background: rgba(79, 209, 197, .07); border: 1px solid rgba(79,209,197,.15); font-size: 12px;
}
.demo-credentials span { color: var(--muted); }
.demo-credentials strong { color: #c9fff8; }
.demo-note { margin: 12px 0 0; color: #6f8797; font-size: 11px; line-height: 1.5; }

/* App */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0,1fr); }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 240px; padding: 24px 18px; z-index: 20;
  background: rgba(5, 17, 28, .88); backdrop-filter: blur(18px); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.side-brand strong { display: block; font-size: 14px; }
.side-brand span { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.side-nav { margin-top: 38px; display: grid; gap: 8px; }
.nav-link {
  width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 13px; border-radius: 12px;
  background: transparent; color: #8da7b8; font-weight: 750; font-size: 13px; transition: .2s ease;
}
.nav-link:hover, .nav-link.active { color: #eafffd; background: rgba(79,209,197,.10); }
.nav-link.active { box-shadow: inset 3px 0 0 var(--cyan); }
.side-status {
  margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02);
}
.side-status span { display:block; color: var(--muted); font-size: 10px; }
.side-status strong { display:block; font-size: 11px; margin-top:2px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(69,212,131,.09); animation: pulse 1.8s infinite; }

.main-content { grid-column: 2; min-width: 0; padding: 0 28px 24px; }
.topbar {
  min-height: 92px; position: sticky; top: 0; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: linear-gradient(180deg, rgba(6,17,29,.96), rgba(6,17,29,.88) 72%, rgba(6,17,29,0)); backdrop-filter: blur(14px); padding-top: 12px;
}
.topbar h2 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.top-actions { display:flex; align-items:center; gap:10px; }
.clock-box { text-align: right; margin-right: 5px; }
.clock-box span { display:block; color:var(--muted); font-size:9px; text-transform: uppercase; letter-spacing:.08em; }
.clock-box strong { font-size:12px; }
.secondary-btn {
  padding: 10px 13px; border-radius: 11px; color: #c9e4ef; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-weight: 800; font-size: 12px;
}
.secondary-btn:hover { background: rgba(79,209,197,.09); }
.user-chip { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:12px; color:var(--text); background:rgba(255,255,255,.035); border:1px solid var(--line); }
.avatar { width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:rgba(79,209,197,.14);color:var(--cyan-2);font-weight:900;font-size:11px; }
.user-chip strong, .user-chip small { display:block; text-align:left; }
.user-chip strong { font-size:10px; } .user-chip small { color:var(--muted); font-size:9px; margin-top:2px; }

.page-section { display:none; animation: fadeIn .35s ease; }
.active-section { display:block; }
.glass-panel { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 16px 48px rgba(0,0,0,.13); border-radius: 18px; backdrop-filter: blur(14px); }
.hero-grid { display:grid; grid-template-columns: minmax(0,1.75fr) minmax(310px,.75fr); gap:16px; }
.executive-card, .incident-panel, .flow-mini-panel, .trends-panel, .architecture-panel { padding:20px; }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.section-heading.compact { margin-bottom: 14px; }
.section-heading h3 { margin:0; font-size:18px; letter-spacing:-.02em; }
.section-heading p:not(.eyebrow) { margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.5; }
.status-badge, .live-pill { display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:900;letter-spacing:.06em; }
.status-badge.green { color:#8ef5b9;background:rgba(69,212,131,.10);border:1px solid rgba(69,212,131,.20); }
.status-badge.yellow { color:#ffe67f;background:rgba(240,200,75,.10);border:1px solid rgba(240,200,75,.20); }
.status-badge.red { color:#ff9f9f;background:rgba(255,107,107,.10);border:1px solid rgba(255,107,107,.20); }
.live-pill { color:#91ebbf;background:rgba(69,212,131,.08);border:1px solid rgba(69,212,131,.18); }
.live-pill i { width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite; }

.overall-layout { display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center; }
.overall-score-wrap { text-align:center; }
.overall-score-wrap p { color:var(--muted);font-size:10px;line-height:1.5;margin:10px auto 0;max-width:180px; }
.donut { --value: 98.7; width:150px;height:150px;border-radius:50%;margin:auto;display:grid;place-items:center;position:relative;background:conic-gradient(var(--cyan) calc(var(--value)*1%), rgba(255,255,255,.06) 0);animation:donutGlow 2.8s ease-in-out infinite; }
.donut::before { content:"";position:absolute;inset:11px;border-radius:50%;background:#0a1d2d;border:1px solid rgba(255,255,255,.06); }
.donut-center { position:relative;z-index:2; }
.donut-center span { display:block;color:var(--muted);font-size:10px; }
.donut-center strong { display:block;font-size:27px;margin-top:4px; }
.business-kpis { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.business-mini-card { position:relative;overflow:hidden;padding:14px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid var(--line); }
.business-mini-card::after { content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--state);opacity:.85; }
.business-mini-card span { color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em; }
.business-mini-card strong { display:block;margin-top:6px;font-size:20px; }
.business-mini-card small { color:#9bb1bf;font-size:9px;display:block;margin-top:4px; }

.event-feed { display:grid;gap:9px; }
.event-item { display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:11px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04); }
.event-icon { width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:12px;background:rgba(79,209,197,.09); }
.event-item strong { display:block;font-size:10px; }.event-item p{margin:3px 0 0;color:var(--muted);font-size:9px;line-height:1.35}.event-item time{color:#607a8c;font-size:8px;white-space:nowrap}
.flow-mini-panel, .trends-panel { margin-top:16px; }
.text-btn { color:var(--cyan-2);background:transparent;font-size:11px;font-weight:800;padding:0; }

.process-flow { display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:8px 0 4px;scrollbar-width:thin; }
.flow-node { min-width:150px;flex:1;position:relative;padding:13px 12px;border-radius:13px;background:rgba(255,255,255,.025);border:1px solid var(--line); }
.flow-node::after { content:"";position:absolute;top:50%;right:-31px;width:30px;border-top:2px dashed rgba(79,209,197,.32);animation:dashMove 1.4s linear infinite; }
.flow-node:last-child::after { display:none; }
.flow-connector-space { width:31px;flex:0 0 31px; }
.flow-icon { width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:rgba(79,209,197,.10);color:var(--cyan-2);font-size:15px;margin-bottom:9px; }
.flow-node strong { font-size:10px;display:block; }.flow-node span{color:var(--muted);font-size:8px;display:block;margin-top:4px;line-height:1.4}.flow-node b{display:inline-flex;margin-top:8px;font-size:8px;color:#91f3c1;background:rgba(69,212,131,.08);border:1px solid rgba(69,212,131,.13);border-radius:999px;padding:4px 7px;}
.process-flow.detailed .flow-node { min-width:175px;padding:17px 15px; }
.process-flow.detailed .flow-node strong { font-size:12px; }
.process-flow.detailed .flow-node span { font-size:9px; }
.process-explain-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px; }
.process-info { padding:16px;border-radius:16px;background:rgba(12,31,49,.72);border:1px solid var(--line); }
.process-info h4 { margin:0;font-size:13px; }.process-info p{color:var(--muted);font-size:10px;line-height:1.6;margin:7px 0 0}.process-info .metric-link{display:inline-block;margin-top:9px;color:var(--cyan-2);font-size:9px;font-weight:800}

.trend-chart { width:100%;height:220px;display:block; }
.legend { display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:9px; }
.legend span { display:flex;align-items:center;gap:5px; }.dot{width:7px;height:7px;border-radius:50%;display:inline-block}.green-bg{background:var(--green)}.yellow-bg{background:var(--yellow)}.red-bg{background:var(--red)}
.page-headline { margin-bottom:14px;padding:0 2px; }
.indicator-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.kpi-card { overflow:hidden;position:relative;padding:17px;border-radius:17px;background:var(--panel);border:1px solid var(--line);box-shadow:0 16px 42px rgba(0,0,0,.10); }
.kpi-card::before { content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--state);opacity:.95; }
.kpi-top { display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }
.kpi-title-row { display:flex;gap:10px;align-items:flex-start; }
.kpi-number { width:30px;height:30px;border-radius:9px;background:#102e48;color:#dff9f6;display:grid;place-items:center;font-weight:900;font-size:11px;flex:0 0 30px; }
.kpi-card h4 { margin:0;font-size:13px;line-height:1.3; }.kpi-card .desc{color:var(--muted);font-size:9px;line-height:1.5;margin:5px 0 0}
.kpi-state { padding:5px 8px;border-radius:999px;background:color-mix(in srgb, var(--state) 11%, transparent);color:var(--state);border:1px solid color-mix(in srgb, var(--state) 22%, transparent);font-size:8px;font-weight:900;white-space:nowrap; }
.kpi-main { display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center;margin-top:13px; }
.kpi-value { padding:12px;border-radius:13px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.045); }
.kpi-value span { color:var(--muted);font-size:8px;display:block; }.kpi-value strong{font-size:22px;display:block;margin-top:4px}.kpi-value small{font-size:8px;color:#9cb1bf;display:block;margin-top:4px;line-height:1.35}
.sparkline { width:100%;height:76px;display:block;border-radius:10px;background:linear-gradient(180deg,rgba(79,209,197,.035),transparent); }
.kpi-meta { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px; }
.meta-box { padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.035); }
.meta-box span { display:block;color:var(--muted);font-size:7px;text-transform:uppercase;letter-spacing:.08em; }.meta-box strong{display:block;margin-top:4px;font-size:8px;line-height:1.4;color:#c8d9e3}
.semaphore { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px; }
.sem { padding:7px;border-radius:9px;text-align:center;font-size:7px;border:1px solid var(--line);opacity:.48; }
.sem.active { opacity:1;box-shadow:0 0 0 1px color-mix(in srgb, var(--state) 20%, transparent), 0 7px 20px rgba(0,0,0,.12); }.sem.green{background:rgba(69,212,131,.08);color:#86edb1}.sem.yellow{background:rgba(240,200,75,.08);color:#f4d966}.sem.red{background:rgba(255,107,107,.08);color:#ff9696}

.architecture-stack { display:grid;gap:12px; }
.arch-layer { display:grid;grid-template-columns:155px 1fr;gap:16px;padding:16px;border-radius:15px;background:rgba(255,255,255,.025);border:1px solid var(--line);position:relative;overflow:hidden; }
.arch-layer::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--layer-color)}
.arch-layer header span{display:block;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.1em}.arch-layer header strong{display:block;margin-top:5px;font-size:13px}.arch-components{display:flex;gap:8px;flex-wrap:wrap}.arch-component{padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);font-size:9px;color:#c7d7e1;position:relative}.arch-component i{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;margin-right:6px;box-shadow:0 0 0 4px rgba(69,212,131,.06)}
footer { display:flex;justify-content:space-between;color:#536d7d;font-size:9px;padding:18px 3px 0; }

@keyframes pulse { 0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.6} }
@keyframes fadeIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
@keyframes donutGlow { 0%,100%{box-shadow:0 0 0 0 rgba(79,209,197,.08)}50%{box-shadow:0 0 0 12px rgba(79,209,197,0)} }
@keyframes dashMove { from{border-color:rgba(79,209,197,.16)}50%{border-color:rgba(79,209,197,.62)}to{border-color:rgba(79,209,197,.16)} }

@media (max-width: 1120px) {
  .hero-grid{grid-template-columns:1fr}.incident-panel{min-height:auto}.indicator-grid{grid-template-columns:1fr}.business-kpis{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 820px) {
  .app-shell{display:block}.sidebar{position:sticky;top:0;width:100%;height:auto;display:block;padding:10px 12px;border-right:0;border-bottom:1px solid var(--line)}.side-brand,.side-status{display:none}.side-nav{margin:0;display:flex;overflow-x:auto}.nav-link{width:auto;white-space:nowrap;padding:9px 11px}.main-content{padding:0 14px 18px}.topbar{top:51px;min-height:82px}.clock-box,.user-chip span:not(.avatar){display:none}.overall-layout{grid-template-columns:1fr}.business-kpis{grid-template-columns:1fr 1fr 1fr}.process-explain-grid{grid-template-columns:1fr}.arch-layer{grid-template-columns:1fr}.top-actions{gap:6px}.secondary-btn{font-size:10px}.page-headline{display:block}.page-headline .legend{margin-top:10px}.kpi-main{grid-template-columns:110px 1fr}
}
@media (max-width: 560px) {
  .login-card{padding:24px}.topbar{align-items:flex-start;padding-top:12px}.topbar h2{font-size:19px}.top-actions{align-items:flex-start}.secondary-btn{max-width:110px}.business-kpis{grid-template-columns:1fr}.executive-card,.incident-panel,.flow-mini-panel,.trends-panel,.architecture-panel{padding:15px}.indicator-grid{gap:10px}.kpi-main{grid-template-columns:1fr}.kpi-meta{grid-template-columns:1fr}.section-heading{display:block}.section-heading>.status-badge,.section-heading>.live-pill,.section-heading>.text-btn,.section-heading>.legend{margin-top:10px}.semaphore{grid-template-columns:1fr}.flow-node{min-width:135px}footer{display:block}footer span{display:block;margin-top:4px}
}