/* ═══════════════════════════════════════════════════════════════
   SENN77 cover — depth / 3D / drawer / accordion   (external, editable)
   ═══════════════════════════════════════════════════════════════ */
:root{
  --s7-accent:88,166,255;      /* #58a6ff */
  --s7-accent2:63,185,80;      /* #3fb950 */
  --s7-surface:15,22,32;
  --s7-raised:22,27,34;
}

/* keep dark no matter what */
html,body{background:#0d1117!important;color:#c9d1d9!important}

/* ── MODE CARDS : real 3D floating panels ─────────────────────── */
.grid.sm\:grid-cols-2.lg\:grid-cols-3.gap-3,
.grid.md\:grid-cols-2.gap-6{
  perspective:1100px;
  perspective-origin:50% 30%;
}

a.rounded-xl.p-4.group{
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
  background:linear-gradient(160deg,rgb(24,32,44) 0%,rgb(15,21,30) 100%)!important;
  border:1px solid rgba(var(--s7-accent),.10)!important;
  transition:transform .22s cubic-bezier(.19,1,.22,1),
             box-shadow .22s cubic-bezier(.19,1,.22,1),
             border-color .22s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 -18px 30px -22px rgba(var(--s7-accent),.20) inset,
    0 2px 6px rgba(0,0,0,.45),
    0 10px 26px rgba(0,0,0,.40),
    0 28px 56px -12px rgba(0,0,0,.55);
}
/* fine grid texture */
a.rounded-xl.p-4.group::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(rgba(var(--s7-accent),.05) 1px,transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg,rgba(var(--s7-accent),.05) 1px,transparent 1px) 0 0/34px 100%;
  mask:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 75%);
  -webkit-mask:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 75%);
  opacity:.5;
}
/* cursor spotlight */
a.rounded-xl.p-4.group::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .3s;
  background:radial-gradient(200px circle at var(--cx,50%) var(--cy,50%),
             rgba(var(--s7-accent),.16),transparent 60%);
}
a.rounded-xl.p-4.group:hover::after{opacity:1}
a.rounded-xl.p-4.group:hover{
  border-color:rgba(var(--s7-accent),.5)!important;
}
a.rounded-xl.p-4.group > *{position:relative;z-index:2;transform:translateZ(38px)}
a.rounded-xl.p-4.group .lucide{filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}

/* icon chip lifts highest (parallax) */
a.rounded-xl.p-4.group span.w-8{
  transform:translateZ(60px);
  background:linear-gradient(150deg,rgb(28,38,52),rgb(18,25,35))!important;
  box-shadow:
    0 0 0 1px rgba(var(--s7-accent),.18),
    0 0 14px rgba(var(--s7-accent),.12),
    0 6px 14px rgba(0,0,0,.5);
  transition:box-shadow .22s ease,border-color .22s ease;
}
a.rounded-xl.p-4.group:hover span.w-8{
  box-shadow:
    0 0 0 1px rgba(var(--s7-accent),.6),
    0 0 22px rgba(var(--s7-accent),.35),
    0 8px 18px rgba(0,0,0,.6);
}

/* ── STAT TILES : chiseled number blocks ──────────────────────── */
.grid.grid-cols-2.sm\:grid-cols-4{perspective:900px}
.grid.grid-cols-2.sm\:grid-cols-4 > div{
  position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform;
  background:linear-gradient(165deg,rgb(23,31,43),rgb(14,20,28))!important;
  border:1px solid rgba(var(--s7-accent),.10)!important;
  transition:transform .2s cubic-bezier(.19,1,.22,1),box-shadow .2s ease,border-color .2s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(0,0,0,.5) inset,
    0 3px 6px rgba(0,0,0,.4),
    0 12px 28px -6px rgba(0,0,0,.5);
}
.grid.grid-cols-2.sm\:grid-cols-4 > div::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 55%);
}
.grid.grid-cols-2.sm\:grid-cols-4 > div:hover{
  transform:translateY(-4px) rotateX(6deg) scale(1.02);
  border-color:rgba(var(--s7-accent),.35)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 6px 14px rgba(0,0,0,.55),
    0 22px 44px -8px rgba(0,0,0,.6),
    0 0 30px -4px rgba(var(--s7-accent),.25);
}
.grid.grid-cols-2.sm\:grid-cols-4 > div .text-3xl,
.grid.grid-cols-2.sm\:grid-cols-4 > div .text-2xl{
  transform:translateZ(30px);
  text-shadow:0 2px 10px rgba(0,0,0,.6),0 0 26px rgba(var(--s7-accent),.28);
  transition:text-shadow .2s;
}
.grid.grid-cols-2.sm\:grid-cols-4 > div:hover .text-3xl,
.grid.grid-cols-2.sm\:grid-cols-4 > div:hover .text-2xl{
  text-shadow:0 2px 10px rgba(0,0,0,.6),0 0 36px rgba(var(--s7-accent),.5);
}

/* ── SIDEBAR accordion (JS-injected topic lists) ──────────────── */
.s7-topics{
  overflow:hidden;max-height:0;transition:max-height .28s ease;
  margin:0 0 0 .25rem;border-left:1px solid rgba(var(--s7-accent),.18);
}
.s7-topics.open{max-height:2200px}
.s7-topics a{
  display:block;padding:5px 10px 5px 22px;font-size:12px;
  color:#8b98a6;text-decoration:none;line-height:1.35;
  border-left:2px solid transparent;transition:.15s;
}
.s7-topics a:hover{
  color:#c9d1d9;background:rgba(var(--s7-accent),.08);
  border-left-color:rgb(var(--s7-accent));
}
button.w-full .s7-caret{transition:transform .22s ease;display:inline-block}
button.w-full.s7-open .s7-caret{transform:rotate(90deg)}

/* ── mobile drawer ────────────────────────────────────────────── */
@media (max-width:767px){
  aside.s7-drawer-open{
    display:flex!important;position:fixed!important;left:0;top:0;bottom:0;
    z-index:60;width:19rem;height:100dvh;overflow-y:auto;
    background:#0d1117!important;box-shadow:0 0 50px rgba(0,0,0,.8);
  }
  .s7-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:55;backdrop-filter:blur(2px)}
}

@media (prefers-reduced-motion:reduce){
  a.rounded-xl.p-4.group,.grid.grid-cols-2.sm\:grid-cols-4 > div{
    transform:none!important;transition:none!important}
}