/* Simulation-first layout: controls and scene align, training follows the scene. */
main{max-width:1920px;padding:20px clamp(12px,2vw,36px)}
.intro{gap:24px;margin-bottom:20px}.intro h1{font-size:clamp(28px,3vw,44px);margin:8px 0}.intro p{margin:8px 0}.pipeline{padding:16px}
.lab{display:grid;grid-template-columns:clamp(280px,26vw,350px) minmax(0,1fr);gap:16px;align-items:start}
.input-sidebar{display:block;grid-column:1;grid-row:1;min-width:0}
.input-card{margin:0;padding:16px}.input-card h2{margin:8px 0 12px}.input-card label{margin:12px 0}.input-card .input-lock{min-height:32px!important}
.lab>.viewport-card{grid-column:2;grid-row:1;margin:0;min-width:0;display:flex;flex-direction:column;align-self:stretch;min-height:540px}
.input-control-row{position:relative;margin:0 0 10px;padding-top:4px}.input-card .input-control-row label{margin:0}.input-control-row output{float:none;margin-left:8px}.input-control-row input[type=range]{display:block;margin:15px 0 0;min-height:22px}.input-control-row .input-lock{position:absolute;right:0;top:0;float:none!important;margin:0!important}.input-card .input-aimbot{margin:10px 0;padding-top:8px}.input-card .fine{line-height:1.45;margin:8px 0}
.viewport-card iframe{flex:1;min-height:0;height:auto}.viewbar{flex-wrap:wrap;padding:10px;gap:8px}.viewbar .buttons{gap:5px}.viewbar button{min-height:36px}.viewfoot{flex-wrap:wrap;padding:8px 12px}
.lab>.training-card{grid-column:2;grid-row:2;margin:0;display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr);gap:8px 20px}
.training-card .heading,.training-card h2,.training-card #status,.training-card>.fine{grid-column:1/-1;margin:0}.training-card label{margin:0}.training-card .split{grid-column:2;grid-row:3/6;align-self:center;gap:18px}.training-card progress{margin:0}.training-card #cancel{grid-column:1}.training-card #status{min-height:0}
.lab>.results{grid-column:2;grid-row:3;min-width:0}.results .metrics{margin:0 0 16px}
@media(max-width:1000px){.lab{grid-template-columns:270px minmax(0,1fr);gap:12px}.intro{grid-template-columns:1fr}.pipeline{display:none}.viewbar .legend{width:100%}.training-card .split{gap:8px}}
@media(max-width:740px){
 .lab{grid-template-columns:minmax(0,1fr);gap:12px}
 .lab>.viewport-card{grid-column:1;grid-row:1;height:clamp(310px,52svh,480px);min-height:0}
 .input-sidebar{grid-column:1;grid-row:2}.lab>.training-card{grid-column:1;grid-row:3}.lab>.results{grid-column:1;grid-row:4}
 .intro{margin-bottom:12px}.intro p{font-size:12px;line-height:1.5}.intro h1{font-size:28px}.viewbar .buttons{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.viewbar .buttons button{font-size:10px;padding:7px 4px;min-height:38px}.legend{font-size:9px}.viewfoot{font-size:9px;gap:4px}
 .input-card{padding:14px}.lab>.training-card{padding:14px;grid-template-columns:1fr}.training-card .split{grid-column:1;grid-row:auto}.training-card #cancel{grid-column:1}
 .charts,.technical-grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.metrics article:last-child{grid-column:auto}.metrics article{padding:10px 8px}.metrics span{font-size:8px}.metrics strong{font-size:22px}.metrics article:last-child strong{display:block;margin:9px 0}
}
@media(max-width:740px) and (max-height:500px){.lab>.viewport-card{height:300px}}
@media(min-width:741px) and (max-width:1000px){.lab>.training-card{grid-template-columns:1fr}.training-card .split{grid-column:1;grid-row:auto}}
@media(max-width:360px){.viewbar{padding:8px}.viewbar .buttons{gap:3px}.viewbar .buttons button{padding:7px 2px;font-size:9px}.input-card{padding:12px}.input-control-row .input-lock{padding:4px 6px!important;font-size:10px!important}}
