:root{
  --a0061-bg:#f7f8fb;
  --a0061-surface:#ffffff;
  --a0061-border:#e6e9f2;
  --a0061-accent:#206bc4;
  --a0061-accent-2:#2fb344;
  --a0061-text:#1f2937;
  --a0061-muted:#64748b;
}

body.theme-a0061{
  background:var(--a0061-bg);
  color:var(--a0061-text);
}

.a0061-shell{
  display:grid;
  grid-template-columns: 280px 1fr 320px;
  grid-template-areas:
    "rail main side";
  gap:16px;
  align-items:start;
}

.a0061-rail{ grid-area:rail; position:sticky; top:16px; }
.a0061-main{ grid-area:main; }
.a0061-side{ grid-area:side; position:sticky; top:16px; }

.a0061-card{
  background:var(--a0061-surface);
  border:1px solid var(--a0061-border);
  border-radius:14px;
  padding:16px;
}

.a0061-topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(150%) blur(8px);
  background:color-mix(in srgb, var(--a0061-bg) 75%, transparent);
  border-bottom:1px solid var(--a0061-border);
}

.a0061-topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
}

#logo a{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}

.a0061-logo-img{ height:34px; width:auto; display:block; }

.a0061-tagline{
  color:var(--a0061-muted);
  font-size:.95rem;
}

.a0061-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  color:inherit;
}
.a0061-nav a:hover{ background: #eef2ff; }
.a0061-nav a.is-active{ background:#e7f0ff; color:var(--a0061-accent); font-weight:600; }

.a0061-badge{ font-size:.75rem; color:var(--a0061-muted); }

@media (max-width: 1100px){
  .a0061-shell{ grid-template-columns: 1fr; grid-template-areas: "main"; }
  .a0061-rail, .a0061-side{ position:static; }
  .a0061-rail{ display:none; }
  body[data-rail-open="1"] .a0061-rail{
    display:block;
    position:fixed;
    top:64px;
    left:12px;
    right:12px;
    z-index:60;
  }
}