:root{
  --bg: #0b1220;
  --panel: #0f172a;
  --ink: #e5e7eb;
  --muted: rgba(229,231,235,.72);
  --accent: #a78bfa;
}

body{background:radial-gradient(800px 400px at 20% 0%, rgba(167,139,250,.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;}

.grid-shell{min-height:100vh; display:grid; grid-template-areas: "header header" "aside main"; grid-template-columns: 260px minmax(0,1fr); grid-template-rows: auto 1fr;}
.grid-shell__header{grid-area:header; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(15,23,42,.75); backdrop-filter: blur(10px);}
.grid-shell__aside{grid-area:aside; padding:1rem; border-right:1px solid rgba(255,255,255,.08);}
.grid-shell__main{grid-area:main; padding:1rem;}

#logo a{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;}
.logo-text{letter-spacing:.02em;}
.tagline{color:var(--muted); font-size:.9rem; margin-top:.25rem;}

.ui.inverted.segment{background:var(--panel); border-color: rgba(255,255,255,.10) !important;}
.ui.segment{background:rgba(15,23,42,.55); border-color: rgba(255,255,255,.10) !important; color: var(--ink);}
.ui.header{color:var(--ink) !important;}

@media (max-width: 980px){
  .grid-shell{grid-template-areas: "header" "main"; grid-template-columns: 1fr;}
  .grid-shell__aside{display:none;}
}

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