:root{
  --bg: #0a0f1a;
  --panel: #0f172a;
  --ink: #e5e7eb;
  --muted: rgba(229,231,235,.70);
  --accent: #22c55e;
}

body{background:radial-gradient(900px 450px at 80% 0%, rgba(34,197,94,.18), transparent 60%), var(--bg); color:var(--ink);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.app-top{position:sticky; top:0; z-index:20; background:rgba(15,23,42,.86); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.08);}
.logo-link{display:inline-flex; align-items:center; gap:.6rem; color:var(--ink); text-decoration:none; font-weight:900;}
.logo-img{height:30px; width:auto; display:block;}

.app{display:grid; grid-template-columns: 290px minmax(0, 1fr); min-height: calc(100vh - 56px);}
.app-nav{background:rgba(15,23,42,.55); border-right:1px solid rgba(255,255,255,.08);}
.app-main{min-width:0;}

.app.is-nav-collapsed{grid-template-columns: 0 minmax(0,1fr);}
.app.is-nav-collapsed .app-nav{display:none;}

.timeline{display:grid; grid-template-columns: 18px minmax(0,1fr); gap:1rem;}
.timeline__rail{width:2px; background:rgba(34,197,94,.25); border-radius:999px; margin:0 auto;}
.timeline__body{background:rgba(15,23,42,.6); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:1.25rem;}

@media (max-width: 992px){
  .app{grid-template-columns: 1fr;}
  .app-nav{display:none;}
}

#footer{background:rgba(15,23,42,.86); border-top:1px solid rgba(255,255,255,.08);}
#footer .container{max-width:1100px; margin:0 auto; padding:1.2rem;}