/* Responsive baseline — phone, tablet, laptop, desktop */
:root{--page-max:1200px;--page-pad:clamp(14px,3vw,30px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;overflow-x:hidden}
.page-shell,.wrap,.container{width:min(100% - (var(--page-pad)*2),var(--page-max));margin-inline:auto}
.grid-responsive{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1024px){
 .grid-responsive{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
 :root{--page-pad:16px}
 .top,.toolbar,.head{gap:10px;flex-wrap:wrap}
 .grid-responsive{grid-template-columns:1fr}
 .card,.panel,.hero{border-radius:15px}
 .desktop-only{display:none!important}
}
@media (max-width:480px){
 :root{--page-pad:12px}
 body{font-size:15px}
 h1{font-size:clamp(1.15rem,6vw,1.5rem)}
 h2{font-size:clamp(1.1rem,5.5vw,1.35rem)}
 .card,.panel,.hero{padding:18px!important}
 .btn,button,input,select,textarea{min-height:46px}
 .actions{width:100%;flex-wrap:wrap}
}
@media (max-width:360px){
 :root{--page-pad:10px}
 .card,.panel,.hero{padding:15px!important}
}
@media (hover:none) and (pointer:coarse){
 .btn:hover,.module:hover,.theme-toggle:hover{transform:none!important}
 button,.btn,.theme-toggle{min-width:44px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
 transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@supports(padding:max(0px)){
 body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}