/* Good Sundays — forest background fills the whole site; the dashboard sits directly on top of it, no device bezel. */
body{position:relative}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background-image:
    linear-gradient(0deg,rgba(2,15,9,.4),rgba(2,15,9,.08) 45%),
    url("forest-bg.jpg");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  transform:scale(1.025);
  animation:forest-breathe 18s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes forest-breathe{
  from{transform:scale(1.025) translate3d(-.25%,0,0)}
  to{transform:scale(1.055) translate3d(.35%,-.25%,0)}
}
@media(prefers-reduced-motion:reduce){body::before{animation:none}}

@media (min-width:640px){
  .hero{
    position:relative;
    display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vw,48px);
    padding:clamp(40px,7vw,84px) clamp(24px,5vw,64px) clamp(56px,7vw,96px);
  }

  .shell{
    position:relative;isolation:isolate;
    width:min(1180px,92vw);
    height:auto;min-height:0;
    margin:0;overflow:hidden;
    grid-template-columns:220px minmax(0,1fr);
    border-radius:20px;
    background:#f8faf6;
    box-shadow:0 24px 60px rgba(2,15,9,.4),0 4px 14px rgba(2,15,9,.25);
    transform:translateZ(0);
  }
  .sidebar{position:relative;top:auto;height:auto;min-height:0;overflow:visible;border-radius:20px 0 0 20px;padding:23px 14px 17px;background:linear-gradient(160deg,#f4f8f2,#eaf1e9)}
  main{height:auto;overflow:visible;border-radius:0 20px 20px 0}
  .topbar{position:relative;top:auto;padding:0 24px;height:60px;background:rgba(250,252,248,.9)}
  .view{padding:24px 30px 40px;max-width:none}
  .brand{font-size:26px}.brand-note{margin-bottom:20px}.sidebar nav a{padding:8px 9px;font-size:12px}.free-chip{font-size:8px}
  .signal{min-height:150px}
}
@media (min-width:640px) and (max-width:900px){
  .shell{grid-template-columns:170px minmax(0,1fr);border-radius:16px}
  .sidebar{left:auto;width:auto;z-index:auto;box-shadow:none;transition:none;border-radius:16px 0 0 16px}.sidebar.open{left:auto;box-shadow:none}.menu-btn{display:none}
  main{border-radius:0 16px 16px 0}
  .view{padding:22px 20px 100px}.dash-kpis,.dash-grid{grid-template-columns:1fr 1fr}.recommend{grid-template-columns:30px 1fr}.recommend-actions{grid-column:2}
}
@media (max-width:639px){
  .hero{position:relative;padding:32px 18px 44px}
  .shell{position:relative;background:#f8faf6;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(2,15,9,.35)}
}