/* Pogodynka.eu – Zorza3D PRO (od zera) */

.z3d{max-width:1400px;margin:0 auto;padding:12px 12px 24px;overflow-x:clip}
.z3d-top{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0 14px;flex-wrap:wrap}
.z3d-left{min-width:260px}
.z3d-title{font-size:20px;font-weight:800;letter-spacing:.2px}
.z3d-sub{opacity:.85;font-size:13px;margin-top:2px}
.z3d-status{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.z3d-pill{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);padding:8px 10px;border-radius:14px;font-weight:700}
.z3d-pill.ok{border-color:rgba(60,220,120,.45);box-shadow:0 0 0 1px rgba(60,220,120,.15) inset}
.z3d-pill.bad{border-color:rgba(255,90,90,.55);box-shadow:0 0 0 1px rgba(255,90,90,.18) inset}
.z3d-upd{opacity:.9;font-size:13px}
.z3d-upd .lbl{opacity:.75;margin-right:6px}
.z3d-actions{display:flex;gap:10px}
.btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;padding:9px 12px;border-radius:12px;font-weight:700;cursor:pointer}
.btn:hover{background:rgba(255,255,255,.1)}

.z3d-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:14px;align-items:start}
@media (max-width: 1100px){.z3d-grid{grid-template-columns:1fr}}
.card{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.10);border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.25);overflow:hidden}
.card-h{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.card-t{font-weight:800}
.card-s{opacity:.85;font-size:13px;margin-top:4px}

.stage-wrap{position:relative}
.stage-scene{height:620px;min-height:520px}
@media (max-width: 720px){.stage-scene{height:520px;min-height:460px}}
.stage-scene canvas{display:block}

.stage-ui{position:absolute;left:12px;right:12px;bottom:12px;display:grid;gap:10px}
.slider{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 12px;backdrop-filter: blur(10px)}
.slider .lbl{min-width:150px;font-weight:700;opacity:.9}
.slider input{flex:1}
.slider .val{min-width:52px;text-align:right;opacity:.85;font-weight:800}

.legend{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08)}
.legend-row{display:flex;flex-direction:column;gap:8px}
.bar{height:12px;border-radius:999px;background:linear-gradient(90deg,#1fff6a 0%, #ffe45b 45%, #ff9a3d 70%, #ff3d3d 100%);border:1px solid rgba(255,255,255,.12)}
.ticks{display:flex;justify-content:space-between;font-weight:800;opacity:.85}
.legend-note{margin-top:10px;opacity:.85;font-size:13px;line-height:1.35}

.side{display:grid;gap:14px}
.kp-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px}
.kp .kpl{opacity:.8;font-weight:700}
.kp .kpv{font-size:42px;font-weight:900;line-height:1.0;margin-top:4px}
.kp .kpt{opacity:.75;margin-top:6px;font-size:13px}
.chip{align-self:flex-start;padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-weight:900;letter-spacing:.2px;background:rgba(255,255,255,.06)}
.chip.green{border-color:rgba(60,220,120,.5)}
.chip.yellow{border-color:rgba(255,210,80,.55)}
.chip.red{border-color:rgba(255,90,90,.55)}

.sw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 14px 14px}
.sw{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px 12px;min-width:0}
.swl{opacity:.78;font-weight:700;font-size:12px}
.swv{font-weight:900;margin-top:6px;font-size:18px}

.note{padding:0 14px 14px;opacity:.9;line-height:1.35}
.src{margin:10px 0 0;padding:0 14px 14px 30px;opacity:.9}
.src li{margin:6px 0}


/* Mobile PRO */
@media (max-width: 560px){
  .z3d{padding:10px 10px 18px}
  .z3d-title{font-size:18px}
  .z3d-sub{font-size:12px}
  .z3d-actions{width:100%}
  .z3d-actions .btn{flex:1;padding:10px 10px}
  .z3d-status{width:100%}
  .stage-scene{height:440px;min-height:380px}
  .stage-ui{left:10px;right:10px;bottom:10px}
  .slider{flex-wrap:wrap;gap:8px}
  .slider .lbl{min-width:auto;flex:1 1 100%}
  .slider .val{min-width:auto}
  .legend-note{font-size:12px}
  .kp .kpv{font-size:36px}
  .sw-grid{grid-template-columns:1fr}
}
@media (max-width: 380px){
  .stage-scene{height:400px;min-height:340px}
}