:root{
  --nav:#12304A; --teal:#0D7C78; --info:#2D6EA3; --amber:#C98A19;
  --risk:#B74242; --ok:#2F7D57; --bg:#F5F7FA; --ink:#1F2933; --border:#D8E0E8;
  --sidebar-w:250px;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;margin:0}
a{color:var(--info);text-decoration:none} a:hover{text-decoration:underline}

/* Demo banner */
.demo-banner{background:#3a2a08;color:#ffdf9e;font-size:.78rem;letter-spacing:.02em;
  text-align:center;padding:.3rem .5rem;font-weight:600;border-bottom:2px solid var(--amber)}

/* Shell */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--nav);color:#dbe6f0;flex-shrink:0;
  position:fixed;top:0;bottom:0;left:0;overflow-y:auto;padding-bottom:2rem;z-index:40}
.sidebar .brand{padding:1rem 1.1rem;font-weight:700;color:#fff;font-size:1.05rem;
  border-bottom:1px solid rgba(255,255,255,.08);line-height:1.2}
.sidebar .brand small{display:block;font-weight:400;color:#9fb6cc;font-size:.7rem;margin-top:.2rem}
.sidebar .nav-section{padding:.5rem 1.1rem .2rem;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.08em;color:#7f9ab3}
.sidebar a.nav-link{color:#cddced;padding:.5rem 1.1rem;display:flex;align-items:center;gap:.6rem;font-size:.9rem;border-left:3px solid transparent}
.sidebar a.nav-link:hover{background:rgba(255,255,255,.06);text-decoration:none;color:#fff}
.sidebar a.nav-link.active{background:rgba(13,124,120,.22);border-left-color:var(--teal);color:#fff;font-weight:600}
.sidebar a.nav-link i{width:18px;text-align:center}

.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--border);padding:.6rem 1.2rem;
  display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:30}
.topbar .page-title{font-weight:700;font-size:1.05rem;margin:0;color:var(--nav)}
.content{padding:1.2rem;flex:1}
.footer{padding:.8rem 1.2rem;color:#6b7a89;font-size:.78rem;border-top:1px solid var(--border);background:#fff}

/* Cards / KPIs */
.card{border:1px solid var(--border);border-radius:.6rem;background:#fff}
.card-header{background:#fff;border-bottom:1px solid var(--border);font-weight:600}
.kpi{border:1px solid var(--border);border-radius:.6rem;background:#fff;padding:1rem;height:100%}
.kpi .kpi-val{font-size:1.7rem;font-weight:700;color:var(--nav);line-height:1}
.kpi .kpi-lbl{color:#6b7a89;font-size:.82rem;margin-top:.25rem}
.kpi .kpi-ico{float:right;font-size:1.4rem;opacity:.35}
.kpi.kpi-teal{border-left:4px solid var(--teal)} .kpi.kpi-amber{border-left:4px solid var(--amber)}
.kpi.kpi-risk{border-left:4px solid var(--risk)} .kpi.kpi-info{border-left:4px solid var(--info)}
.kpi.kpi-ok{border-left:4px solid var(--ok)}

.btn-teal{background:var(--teal);border-color:var(--teal);color:#fff}
.btn-teal:hover{background:#0a635f;border-color:#0a635f;color:#fff}
.text-nav{color:var(--nav)!important}

/* Timeline */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline:before{content:"";position:absolute;left:9px;top:4px;bottom:4px;width:2px;background:var(--border)}
.timeline li{position:relative;padding:0 0 1rem 2rem}
.timeline li .dot{position:absolute;left:2px;top:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--teal)}
.timeline li .t-time{font-size:.78rem;color:#6b7a89}
.timeline li .t-body{font-weight:600}

.status-badge{font-size:.8rem}
.demo-tag{font-size:.62rem;background:#eef2f6;color:#6b7a89;border:1px solid var(--border);
  border-radius:.3rem;padding:.05rem .3rem;letter-spacing:.03em}

/* Login */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:linear-gradient(135deg,#12304A 0%,#0D7C78 140%)}
.auth-card{width:100%;max-width:440px}
.tryas-card{cursor:pointer;transition:.12s;border:1px solid var(--border)}
.tryas-card:hover{border-color:var(--teal);box-shadow:0 2px 10px rgba(13,124,120,.15)}

/* Mobile: sidebar collapses to offcanvas */
@media (max-width: 900px){
  .sidebar{transform:translateX(-100%);transition:.2s}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35}
  .sidebar-backdrop.show{display:block}
}