/* Responsive V9: additive, no changes to Flask/backend */
*,*::before,*::after{box-sizing:border-box}
html{max-width:100%;scroll-padding-top:108px}
body{max-width:100%;overflow-x:clip}
img,video,svg,canvas{max-width:100%}
img,video{height:auto}
main,.shell,.section,.hero,.contact,.project-grid,.project-card,.visual,.terminal,.contact-form,.admin-two,.admin-section{min-width:0}
pre,code{overflow-wrap:anywhere}
input,textarea,select{max-width:100%;min-width:0}
.project-content,.manage-item,.inbox-item{overflow-wrap:anywhere}
:where(a,button,input,textarea,select):focus-visible{outline:2px solid #6bdbff;outline-offset:3px}
/* fluid paddings and layouts */
.shell{width:100%;max-width:1150px;padding-inline:clamp(16px,4vw,30px)}
.hero{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(22px,4vw,54px)}
.hero h1{overflow-wrap:anywhere;font-size:clamp(2.6rem,6vw,5.5rem)}
.hero h2,.section h2,.contact h2{overflow-wrap:anywhere}
.section-top>*,.contact>*,.hero>*{min-width:0}
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.contact{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,70px)}
.glow{max-width:70vw}
/* laptop / tablets */
@media(max-width:960px){
 .navigation{gap:14px}.navlinks{gap:clamp(9px,1.6vw,22px)}
 .hero{padding:60px 0;min-height:auto}
 .hero h1{letter-spacing:-2px}
 .contact{gap:25px}
 .section{padding:70px 0}
 .project-image{height:clamp(180px,24vw,240px)}
}
@media(max-width:760px){
 html{scroll-padding-top:120px}
 .topbar{top:0;width:100%}
 .navigation{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:8px;padding-block:10px}
 .brand{font-size:clamp(18px,4.5vw,22px);align-self:center}
 .navlinks{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow-x:auto;overflow-y:hidden;max-width:100%;padding:2px 0 7px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
 .navlinks a{flex:0 0 auto;white-space:nowrap;font-size:13px;min-height:38px;display:inline-flex;align-items:center;padding:6px 10px;border-radius:8px}
 .navlinks .nav-admin{padding:6px 12px}
 .hero{grid-template-columns:minmax(0,1fr);gap:30px;padding:46px 0 60px}
 .hero h1{font-size:clamp(38px,9vw,62px);letter-spacing:-1.5px}
 .hero-desc{font-size:16px}
 .visual{width:100%;max-width:590px;margin-inline:auto}
 .terminal{transform:none!important}
 .terminal pre{font-size:clamp(10px,2.4vw,13px);padding:18px 14px;white-space:pre-wrap;overflow-wrap:anywhere}
 .actions{margin:25px 0;gap:10px}
 .actions .button{max-width:100%;justify-content:center}
 .mini-meta{margin-top:28px;letter-spacing:.6px}
 .mini-meta b{margin-inline:6px}
 .section{padding:50px 0;scroll-margin-top:125px}
 .section-top{display:block;margin-bottom:26px}
 .section-top>p{max-width:unset}
 .project-grid,.contact,.admin-two{grid-template-columns:minmax(0,1fr)}
 .project-image{height:clamp(175px,48vw,290px)}
 .contact{gap:25px}
 .dashboard-head{flex-direction:column;align-items:flex-start;padding-top:38px}
 .manage-item{flex-wrap:wrap}
 .manage-actions{margin-left:0;flex-wrap:wrap}
 .inline-form{flex-direction:column;align-items:stretch}
 .admin-section form,.contact-form{max-width:100%}
 body.qv-home .project-card,body.qv-home .chip{transform:none!important}
 /* Clock and terminal controls occupy independent lines on narrow devices */
 #qv-hud{right:10px!important;bottom:10px!important;max-width:calc(100vw - 20px);flex-wrap:wrap;justify-content:center}
 #dev-clock-v7{left:10px!important;bottom:62px!important;max-width:calc(100vw - 20px)}
 #qv-terminal{padding:12px}
 .qv-t-window{max-width:100%;max-height:90dvh}
}
@media(max-width:480px){
 .shell{padding-inline:16px}
 .navigation{padding-block:9px}
 .hero{padding:34px 0 46px}
 .hero h1{font-size:clamp(34px,10.5vw,48px)}
 .hero h2{font-size:clamp(18px,5vw,23px)}
 .status{margin-bottom:20px;letter-spacing:.5px;font-size:10px;max-width:100%;white-space:normal}
 .actions{display:grid;grid-template-columns:1fr}
 .actions .button{width:100%;min-height:46px}
 .chips{gap:9px}.chip{padding:11px 13px;font-size:13px}
 .project-content{padding:17px}
 .project-content h3{font-size:21px}
 .project-bottom{flex-wrap:wrap}
 .contact-form,.admin-section form,.small form{padding:16px}
 .contact h2{font-size:clamp(30px,8vw,44px)}
 .section{padding:43px 0}
 .section h2{font-size:clamp(28px,8vw,38px)}
 .mini-meta{font-size:10px}
 #qv-hud{font-size:10px!important;gap:5px;padding:6px 8px!important}
 #dev-clock-v7{bottom:64px!important}
 .qv-boot-card{max-width:100%}
 .qv-boot-code{min-height:120px;padding:14px;white-space:pre-wrap;overflow-wrap:anywhere}
}
@media(max-width:360px){
 .shell{padding-inline:12px}
 .navlinks a{font-size:12px;padding-inline:8px}
 #qv-hud{right:6px!important;bottom:6px!important}
 #dev-clock-v7{left:6px!important;bottom:64px!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{scroll-behavior:auto!important}}