:root{
  --bg:#f3f4f6;
  --panel:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --brand:#2563eb;
  --line:rgba(17,24,39,.12);
  --sidebar:#0b1220;
}

body.theme-b0011{background:var(--bg); color:var(--ink);} 

.layout{
  display:grid;
  grid-template-areas:
    "side header"
    "side main"
    "side aside"
    "side footer";
  grid-template-columns: 280px minmax(0,1fr);
  gap:1rem;
  padding:1rem;
}

.side{grid-area:side; background:var(--sidebar); color:#e5e7eb; border-radius:18px; padding:1rem; position:sticky; top:1rem; height:calc(100vh - 2rem); overflow:auto;}
.header{grid-area:header; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:1rem;}
.main{grid-area:main; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:1rem; min-width:0;}
.aside{grid-area:aside; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:1rem;}

#logo img{height:40px; width:auto; display:block;}

.side a{color:#e5e7eb; text-decoration:none; display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; border-radius:12px;}
.side a:hover{background:rgba(255,255,255,.08);} 
.side a.is-active{background:rgba(37,99,235,.25);} 

.tagline{color:var(--muted);} 

#footer{margin-top:0; padding:1.75rem 0; border-top:1px solid var(--line);} 

.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;}

@media (max-width: 980px){
  .layout{
    grid-template-areas:
      "header"
      "main"
      "aside"
      "footer";
    grid-template-columns:1fr;
  }
  .side{position:relative; height:auto;}
}