/* Phase 38: unobtrusive status for database-backed GLB/GLTF assets. */
.viewer-model-status{
  margin-left:auto;
  padding-left:8px;
  color:#8fb99f;
  font-size:.9em;
  overflow:hidden;
  text-overflow:ellipsis;
}
.viewer-model-status.has-error{color:#d4a27c}
@media(max-width:620px){
  .viewer-model-status{display:none}
}
.lot-zone-nav{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;
  margin:0 0 14px;
  background:#1b2521;
  border:1px solid #1b2521;
}

/* 3D recovery overlay; hidden only after a successful rendered frame. */
.viewer-loading.has-error{
  padding:1.5rem;
  text-align:center;
  background:rgba(5,16,13,.96);
}
.viewer-loading.has-error strong{max-width:36rem;font-size:1rem;line-height:1.7}
.viewer-loading.has-error small{font-size:.875rem;line-height:1.6}
.viewer-loading.has-error button{
  min-height:44px;
  margin-top:1rem;
  padding:.65rem 1.2rem;
  border:1px solid #d6bd88;
  border-radius:8px;
  background:#173529;
  color:#f3e8ce;
  font:inherit;
  font-size:1rem;
  cursor:pointer;
}
.viewer-loading.has-error button:focus-visible{outline:3px solid #80d0de;outline-offset:4px}
#farmCanvas{touch-action:none}
.zone-tab{
  min-height:42px;
  border:0;
  background:#09100e;
  color:#71827a;
  font-size:9px;
  cursor:pointer;
}
.zone-tab.is-active{
  background:#111b16;
  color:#d9c394;
  box-shadow:inset 0 -2px 0 rgba(217,195,148,.78);
}
.zone-tab{transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.lot-zone-label{
  position:absolute;
  z-index:7;
  padding:4px 7px;
  border:1px solid rgba(186,162,116,.24);
  border-radius:999px;
  background:rgba(3,12,10,.68);
  color:#bca875;
  font-size:6px;
  letter-spacing:.12em;
  pointer-events:none;
}
.zone-label--melon{top:10%;right:12%}
.zone-label--catfish{bottom:18%;left:9%}
.zone-label--hydro{bottom:9%;right:28%}
.zone-label--chicken{bottom:12%;left:35%}

.lot-info-grid{display:grid;grid-template-columns:1fr;gap:8px;margin:13px 0}
.lot-panel{padding:15px;border:1px solid rgba(255,255,255,.06);border-radius:11px;background:rgba(255,255,255,.018)}
.lot-panel>span{color:#82938b;font-size:7px;letter-spacing:.12em}
.lot-panel h3{margin:7px 0 0;color:#eceae4;font-size:16px;font-weight:400}
.lot-panel p{margin:7px 0 0;color:#687a73;font-size:8px;line-height:1.6}
.lot-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.lot-stats b{color:#e6e4de;font-size:18px;font-weight:400}
.lot-stats small{display:block;color:#687a73;font-size:6px;font-weight:400}

.device-panel-one-lot,.logic-section-one-lot{padding:10px 0 14px}
.lab-section-heading{display:flex;gap:10px;align-items:center;margin:0 11px 10px}
.lab-section-heading h2{margin:1px 0 0;color:#deddd7;font-size:15px;font-weight:400}
.zone-device-list,.zone-rule-list{display:grid;grid-template-columns:1fr;gap:8px;padding:0 11px}
.zone-device-card,.zone-rule-card{
  padding:12px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:rgba(255,255,255,.017)
}
.zone-device-card strong,.zone-rule-card strong{display:block;color:#e4e7e3;font-size:10px;font-weight:400}
.zone-device-card span,.zone-rule-card span{display:block;margin-top:4px;color:#718078;font-size:7px;line-height:1.5}
.zone-device-card em{display:inline-block;margin-top:7px;color:#baa274;font-size:7px;font-style:normal}
.zone-empty{padding:15px;border:1px dashed rgba(255,255,255,.08);color:#65746d;font-size:8px}

.lot-error{padding:24px;border:1px solid #5c3b31;background:#160d0b;color:#c79f91}
.lot-error strong{display:block;color:#f0ddd4}
.lot-error p{margin:8px 0 0;font-size:10px}

@media(min-width:720px){
  .lot-info-grid{grid-template-columns:1.4fr 1fr}
  .zone-device-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .lot-zone-nav{grid-template-columns:repeat(2,1fr)}
  .zone-tab:first-child{grid-column:1/-1}
}


.zone-device-role{
  display:inline-block !important;
  width:max-content;
  margin:0 0 7px !important;
  padding:3px 6px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.zone-device-card.role-sensor .zone-device-role{color:#8fc6da}
.zone-device-card.role-actuator .zone-device-role{color:#d8b66e}
.zone-device-card.role-controller .zone-device-role{color:#8fc081}

.zone-rule-card small{
  display:block;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.045);
  color:#89988f;
  font-size:7px;
  line-height:1.5;
  overflow-wrap:anywhere;
}


/* =========================================================
   DESKTOP / LARGE SCREEN SCALE-UP
   Keep mobile layout compact, but enlarge desktop UI.
   ========================================================= */
@media (min-width: 1024px){

  .iot-lab-one-lot .lab-container{
    width:min(94vw,1440px);
    max-width:none;
  }

  .iot-lab-one-lot .lab-intro{
    padding:32px 0 28px;
  }

  .iot-lab-one-lot .lab-kicker{
    font-size:12px;
    letter-spacing:.14em;
  }

  .iot-lab-one-lot .lab-overline{
    font-size:11px;
  }

  .iot-lab-one-lot .lab-intro h1{
    font-size:clamp(38px,3.5vw,58px);
    line-height:1.08;
  }

  .iot-lab-one-lot .lab-lead{
    max-width:880px;
    font-size:16px;
    line-height:1.7;
  }

  .iot-lab-one-lot .lab-tech-tags{
    gap:9px;
  }

  .iot-lab-one-lot .lab-tech-tags span{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    padding:0 12px;
    font-size:11px;
  }

  .lot-zone-nav{
    margin-bottom:18px;
  }

  .zone-tab{
    min-height:52px;
    font-size:12px;
    letter-spacing:.02em;
  }

  .viewer-card{
    border-radius:16px;
  }

  .viewer-card__topbar{
    min-height:72px;
    padding:14px 20px;
  }

  .viewer-card__topbar .section-number{
    font-size:12px;
  }

  .viewer-card__topbar .section-eyebrow{
    font-size:10px;
  }

  .viewer-card__topbar h2{
    font-size:22px;
  }

  .viewer-live{
    min-height:34px;
    padding:0 12px;
    font-size:10px;
  }

  .viewer-browser{
    min-height:44px;
    grid-template-columns:auto minmax(0,1fr) 42px;
    padding:0 12px;
  }

  .viewer-browser__buttons span{
    width:7px;
    height:7px;
  }

  .viewer-browser__address{
    height:30px;
    padding:0 12px;
    font-size:10px;
  }

  .viewer-reset{
    width:38px;
    height:38px;
    font-size:18px;
  }

  .iot-lab-one-lot .viewer-stage{
    height:clamp(600px,68vh,820px);
    min-height:600px;
  }

  .lot-zone-label{
    padding:7px 10px;
    font-size:9px;
  }

  .viewer-status{
    bottom:14px;
    padding:7px 12px;
    font-size:9px;
  }

  .viewer-gestures{
    min-height:70px;
  }

  .gesture-item{
    min-height:70px;
    gap:10px;
    padding:10px 12px;
  }

  .gesture-icon{
    font-size:24px;
  }

  .gesture-item strong{
    font-size:11px;
  }

  .gesture-item small{
    margin-top:2px;
    font-size:9px;
  }

  .lot-info-grid{
    gap:14px;
    margin:18px 0;
  }

  .lot-panel{
    padding:20px;
    border-radius:14px;
  }

  .lot-panel>span{
    font-size:10px;
  }

  .lot-panel h3{
    margin-top:9px;
    font-size:22px;
  }

  .lot-panel p{
    margin-top:10px;
    font-size:12px;
  }

  .lot-stats{
    gap:16px;
    margin-top:14px;
  }

  .lot-stats b{
    font-size:28px;
  }

  .lot-stats small{
    margin-top:3px;
    font-size:9px;
  }

  .device-panel-one-lot,
  .logic-section-one-lot{
    padding:16px 0 24px;
  }

  .lab-section-heading{
    gap:14px;
    margin:0 16px 14px;
  }

  .lab-section-heading .section-number{
    font-size:12px;
  }

  .lab-section-heading .section-eyebrow{
    font-size:10px;
  }

  .lab-section-heading h2{
    font-size:20px;
  }

  .zone-device-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    padding:0 16px;
  }

  .zone-rule-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    padding:0 16px;
  }

  .zone-device-card,
  .zone-rule-card{
    min-height:130px;
    padding:18px;
    border-radius:14px;
  }

  .zone-device-role{
    margin-bottom:10px !important;
    padding:4px 8px;
    font-size:9px;
  }

  .zone-device-card strong,
  .zone-rule-card strong{
    font-size:14px;
    line-height:1.45;
  }

  .zone-device-card span,
  .zone-rule-card span{
    margin-top:6px;
    font-size:10px;
  }

  .zone-device-card em{
    margin-top:10px;
    font-size:12px;
  }

  .zone-rule-card small{
    margin-top:10px;
    padding-top:10px;
    font-size:9px;
  }

  .zone-empty{
    padding:20px;
    font-size:11px;
  }
}

@media (min-width: 1440px){

  .iot-lab-one-lot .lab-container{
    width:min(92vw,1540px);
  }

  .iot-lab-one-lot .viewer-stage{
    height:clamp(680px,72vh,900px);
    min-height:680px;
  }

  .zone-device-list{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .viewer-card__topbar h2{
    font-size:24px;
  }
}


/* =========================================================
   SIMULATION
   ========================================================= */
.simulation-launch{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:18px 0;
  padding:18px;
  border:1px solid rgba(186,162,116,.18);
  border-radius:14px;
  background:
    radial-gradient(circle at 90% 10%,rgba(143,179,106,.10),transparent 38%),
    rgba(255,255,255,.018);
}
.simulation-launch__copy>span,
.simulation-panel__head span,
.simulation-result>span{
  color:#9caf87;
  font-size:8px;
  letter-spacing:.14em;
}
.simulation-launch__copy h2{
  margin:5px 0 0;
  color:#eceae4;
  font-size:18px;
  font-weight:400;
}
.simulation-launch__copy p{
  max-width:720px;
  margin:8px 0 0;
  color:#718078;
  font-size:9px;
  line-height:1.7;
}
.simulation-launch__button{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:10px 14px;
  border:1px solid rgba(186,162,116,.30);
  border-radius:12px;
  background:#111a15;
  color:#e9e6dd;
  text-align:left;
  cursor:pointer;
}
.simulation-launch__icon{
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;
  background:#8faa6d;
  color:#09100b;
  font-size:13px;
}
.simulation-launch__button strong{display:block;font-size:11px;font-weight:500}
.simulation-launch__button small{display:block;margin-top:3px;color:#7a897f;font-size:8px}

.simulation-panel{
  margin:18px 0;
  overflow:hidden;
  border:1px solid rgba(186,162,116,.24);
  border-radius:14px;
  background:#08100d;
}
.simulation-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.simulation-panel__head h2{
  margin:4px 0 0;color:#eceae4;font-size:16px;font-weight:400;
}
.simulation-panel__head button{
  width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.04);color:#a8b2ac;font-size:20px;cursor:pointer;
}
.simulation-panel__body{display:grid;grid-template-columns:1fr;gap:12px;padding:14px}
.simulation-inputs{display:grid;grid-template-columns:1fr;gap:10px}
.sim-control{
  padding:12px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:rgba(255,255,255,.018)
}
.sim-control__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sim-control__head strong{color:#e4e7e3;font-size:10px;font-weight:400}
.sim-control__head output{color:#d7b765;font-size:10px}
.sim-control input[type="range"]{width:100%;margin-top:10px}
.sim-control select{
  width:100%;min-height:38px;margin-top:10px;padding:0 10px;
  border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#0b1511;color:#dce2dc
}
.simulation-actions{display:flex;gap:8px;margin-top:12px}
.sim-btn{
  min-height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.08);
  border-radius:9px;background:#0d1512;color:#a8b2ac;font-size:9px;cursor:pointer
}
.sim-btn--primary{background:#8faa6d;color:#071008;border-color:#8faa6d;font-weight:600}
.simulation-result{
  min-height:120px;padding:14px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:#060b08
}
#simulationResult{margin-top:10px;color:#aeb8b1;font-size:9px;line-height:1.75}
.sim-result-line{display:block;margin:4px 0}
.sim-result-line.is-rule{color:#d7b765}
.sim-result-line.is-action{color:#91be75}

@media(min-width:1024px){
  .simulation-launch{flex-direction:row;align-items:center;justify-content:space-between;padding:24px}
  .simulation-launch__copy h2{font-size:24px}
  .simulation-launch__copy p{font-size:12px}
  .simulation-launch__button{min-width:280px;min-height:70px;padding:14px 18px}
  .simulation-launch__button strong{font-size:14px}
  .simulation-launch__button small{font-size:10px}
  .simulation-panel__body{grid-template-columns:1.35fr .9fr;gap:16px;padding:18px}
  .simulation-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sim-control__head strong,.sim-control__head output{font-size:12px}
  #simulationResult{font-size:11px}
}


/* =========================================================
   SIMULATION RUNTIME / AUTO-MANUAL / EVENT LOG
   ========================================================= */
.simulation-mode{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  margin-top:12px;
}
.sim-mode-btn{
  min-height:38px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:#0a120f;
  color:#74857c;
  font-size:9px;
  cursor:pointer;
}
.sim-mode-btn.is-active{
  border-color:rgba(186,162,116,.35);
  background:#151b14;
  color:#d8bf84;
}
.manual-actuators{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:12px;
}
.manual-actuator-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:9px;
  background:rgba(255,255,255,.015);
}
.manual-actuator-card strong{
  color:#dfe4df;
  font-size:9px;
  font-weight:400;
}
.manual-toggle{
  min-width:64px;
  min-height:34px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:#0a120f;
  color:#718078;
  font-size:8px;
  cursor:pointer;
}
.manual-toggle.is-on{
  border-color:rgba(143,179,106,.40);
  background:#182518;
  color:#9ed17f;
}

.simulation-log-wrap{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
}
.simulation-log-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.simulation-log-head strong{
  color:#82938b;
  font-size:8px;
  font-weight:400;
  letter-spacing:.12em;
}
.simulation-log-head button{
  border:0;
  background:transparent;
  color:#64746c;
  font-size:7px;
  cursor:pointer;
}
.simulation-log{
  max-height:180px;
  margin-top:8px;
  overflow:auto;
}
.sim-log-line{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:8px;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.035);
  color:#8e9b94;
  font-size:7px;
  line-height:1.45;
}
.sim-log-line time{color:#5f7168}
.sim-log-line.is-action span{color:#9bc680}
.sim-log-line.is-rule span{color:#d2b46f}

.zone-device-card.is-runtime-on{
  border-color:rgba(143,179,106,.38);
  box-shadow:inset 0 0 0 1px rgba(143,179,106,.07);
}
.zone-device-card.is-runtime-on em{color:#9ed17f}

@media(min-width:1024px){
  .sim-mode-btn{min-height:44px;font-size:11px}
  .manual-actuators{grid-template-columns:repeat(2,minmax(0,1fr))}
  .manual-actuator-card strong{font-size:11px}
  .manual-toggle{font-size:10px}
  .sim-log-line{grid-template-columns:70px minmax(0,1fr);font-size:9px}
}


/* =========================================================
   PHASE 6 — PPT MASTER REBUILD
   ========================================================= */
.iot-lab-one-lot .viewer-stage{
  background:
    radial-gradient(circle at 50% 18%,rgba(58,85,73,.92),rgba(7,22,18,.99) 70%),
    #071611;
}

/* Static overlay zone labels were removed because they did not follow camera. */
.iot-lab-one-lot .lot-zone-label{
  display:none !important;
}

@media(min-width:1024px){
  .iot-lab-one-lot .viewer-stage{
    min-height:650px;
    height:clamp(650px,70vh,880px);
  }
}


/* =========================================================
   PHASE 7 — SIMULATION ↔ 3D LINK
   ========================================================= */
.viewer-live--sim{
  border-color:rgba(143,179,106,.30);
}
.viewer-live--sim i{
  box-shadow:0 0 0 4px rgba(143,179,106,.08);
}

.simulation-launch{
  position:relative;
}
.simulation-launch::after{
  content:'3D LIVE';
  position:absolute;
  top:12px;
  right:12px;
  padding:4px 7px;
  border:1px solid rgba(143,179,106,.22);
  border-radius:999px;
  color:#91b97c;
  font-size:7px;
  letter-spacing:.10em;
}

.zone-device-card.is-runtime-on{
  background:
    radial-gradient(circle at 88% 14%,rgba(122,189,94,.12),transparent 38%),
    rgba(255,255,255,.018);
}

@media(min-width:1024px){
  .simulation-launch::after{
    top:18px;
    right:18px;
    font-size:9px;
  }
}


/* =========================================================
   PHASE 8 — HIGH-VISIBILITY 3D EFFECTS
   ========================================================= */
.viewer-live--sim{
  background:rgba(113,177,84,.10);
  border-color:rgba(143,211,108,.48);
  box-shadow:0 0 22px rgba(92,166,68,.10);
}

.viewer-live--sim i{
  width:9px;
  height:9px;
  background:#8fe06c;
  box-shadow:
    0 0 0 5px rgba(143,224,108,.10),
    0 0 15px rgba(143,224,108,.58);
}

.sim-result-line.is-action{
  padding:6px 8px;
  border-left:2px solid rgba(124,205,91,.65);
  background:rgba(124,205,91,.055);
}

.simulation-result{
  box-shadow:inset 0 0 22px rgba(60,136,99,.04);
}


/* Phase 10 — Chicken exhaust fan wall-mount update.
   No desktop/mobile layout changes in this phase. */
.viewer-status{
  max-width:min(92%,620px);
}

/* =========================================================
   PHASE 26 — DESKTOP GUI STABILIZATION
   Fixes the old iot-lab.css two-column grid leaking into the
   One-Lot page. Keep the existing DOM; only normalize layout.
   ========================================================= */

@media (min-width:1024px){
  .iot-lab-one-lot .lab-page{
    padding:104px 0 72px;
  }

  /* One-Lot page must own its desktop layout. The legacy IoT Lab CSS
     declares named grid areas for a different DOM and caused sections
     to auto-place into the narrow right column. */
  .iot-lab-one-lot .lab-container{
    display:grid !important;
    width:min(94vw,1480px) !important;
    max-width:1480px !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:none !important;
    gap:18px !important;
    align-items:stretch !important;
  }

  .iot-lab-one-lot .lab-container > *{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    grid-area:auto !important;
    min-width:0;
  }

  .iot-lab-one-lot .lab-intro,
  .iot-lab-one-lot .viewer-card,
  .iot-lab-one-lot .lot-info-grid,
  .iot-lab-one-lot .simulation-launch,
  .iot-lab-one-lot .simulation-panel,
  .iot-lab-one-lot .device-panel-one-lot,
  .iot-lab-one-lot .logic-section-one-lot{
    margin:0 !important;
  }

  .iot-lab-one-lot .lab-intro{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:28px;
    padding:24px 28px;
  }

  .iot-lab-one-lot .lab-intro__copy{
    max-width:900px;
  }

  .iot-lab-one-lot .lab-intro h1{
    font-size:clamp(34px,3vw,48px);
  }

  .iot-lab-one-lot .lab-lead{
    max-width:900px;
    font-size:14px;
  }

  .iot-lab-one-lot .lab-tech-tags{
    justify-content:flex-end;
    align-self:center;
    margin-top:0;
  }

  /* Six real tabs now exist. Keep them on one clean desktop row. */
  .iot-lab-one-lot .lot-zone-nav{
    grid-template-columns:repeat(6,minmax(0,1fr));
    margin:0;
    overflow:hidden;
    border-radius:12px;
  }

  .iot-lab-one-lot .zone-tab{
    min-height:48px;
    font-size:11px;
  }

  /* Viewer is no longer sticky or trapped in the legacy left column. */
  .iot-lab-one-lot .viewer-card{
    position:relative !important;
    top:auto !important;
    width:100%;
    border-radius:16px;
  }

  .iot-lab-one-lot .viewer-stage{
    height:clamp(560px,64vh,720px) !important;
    min-height:560px !important;
    max-height:720px;
  }

  .iot-lab-one-lot .viewer-card__topbar{
    min-height:68px;
    padding:12px 18px;
  }

  .iot-lab-one-lot .viewer-browser{
    min-height:42px;
  }

  .iot-lab-one-lot .viewer-gestures{
    min-height:62px;
  }

  /* Summary belongs below the viewer, not in a detached right rail. */
  .iot-lab-one-lot .lot-info-grid{
    grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
    gap:14px;
  }

  .iot-lab-one-lot .lot-panel{
    min-height:118px;
    padding:20px 22px;
  }

  .iot-lab-one-lot .lot-panel h3{
    font-size:20px;
  }

  .iot-lab-one-lot .lot-panel p{
    max-width:900px;
    font-size:11px;
    line-height:1.7;
  }

  /* Simulation spans the content width. Its own body may use two columns. */
  .iot-lab-one-lot .simulation-launch{
    padding:22px 24px;
  }

  .iot-lab-one-lot .simulation-panel{
    width:100%;
  }

  .iot-lab-one-lot .simulation-panel__body{
    grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);
    gap:18px;
    padding:20px;
  }

  .iot-lab-one-lot .simulation-inputs{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .iot-lab-one-lot .manual-actuators{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .iot-lab-one-lot .simulation-result{
    min-height:100%;
  }

  /* Lower sections fill the desktop instead of becoming a thin sidebar. */
  .iot-lab-one-lot .device-panel-one-lot,
  .iot-lab-one-lot .logic-section-one-lot{
    padding:20px 0 24px;
    border:1px solid rgba(155,182,169,.13);
    border-radius:16px;
    background:linear-gradient(180deg,rgba(10,29,27,.62),rgba(5,18,18,.62));
  }

  .iot-lab-one-lot .zone-device-list{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    padding:0 18px;
  }

  .iot-lab-one-lot .zone-rule-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    padding:0 18px;
  }

  .iot-lab-one-lot .zone-device-card,
  .iot-lab-one-lot .zone-rule-card{
    min-height:118px;
    padding:16px;
  }
}

@media (min-width:1024px) and (max-width:1199px){
  .iot-lab-one-lot .lab-container{
    width:calc(100% - 40px) !important;
  }

  .iot-lab-one-lot .zone-device-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .iot-lab-one-lot .zone-rule-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .iot-lab-one-lot .simulation-inputs,
  .iot-lab-one-lot .manual-actuators{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:1440px){
  .iot-lab-one-lot .lab-container{
    width:min(92vw,1540px) !important;
    max-width:1540px !important;
  }

  .iot-lab-one-lot .viewer-stage{
    height:clamp(600px,66vh,760px) !important;
    min-height:600px !important;
    max-height:760px;
  }
}

@media (min-width:621px) and (max-width:1023px){
  .iot-lab-one-lot .lot-zone-nav{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}


/* =========================================================
   PHASE 37 — DATABASE-DRIVEN VISUAL CLASSIFICATION
   ========================================================= */
.viewer-classifier{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:46px;
  padding:7px 10px;
  overflow-x:auto;
  border-top:1px solid rgba(255,255,255,.035);
  border-bottom:1px solid rgba(255,255,255,.055);
  background:#09110e;
  scrollbar-width:thin;
}
.viewer-classifier__label{
  flex:0 0 auto;
  margin-right:3px;
  color:#708078;
  font-size:8px;
  letter-spacing:.08em;
  white-space:nowrap;
}
.viewer-classifier__button{
  flex:0 0 auto;
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#83918a;
  font:inherit;
  font-size:8px;
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.viewer-classifier__button:hover,
.viewer-classifier__button:focus-visible{
  border-color:rgba(217,195,148,.38);
  color:#d7d4ca;
}
.viewer-classifier__button:focus-visible{outline:2px solid #80d0de;outline-offset:2px}
.viewer-classifier__button.is-active{
  border-color:rgba(217,195,148,.55);
  background:rgba(217,195,148,.12);
  color:#eadcb9;
  box-shadow:inset 0 0 0 1px rgba(217,195,148,.08);
}
.viewer-classifier__button.role-sensor.is-active{color:#a9e2f3;border-color:rgba(143,198,218,.55);background:rgba(143,198,218,.10)}
.viewer-classifier__button.role-actuator.is-active{color:#efd393;border-color:rgba(216,182,110,.55);background:rgba(216,182,110,.10)}
.viewer-classifier__button.role-controller.is-active{color:#b3dca5;border-color:rgba(143,192,129,.55);background:rgba(143,192,129,.10)}

@media(min-width:1024px){
  .viewer-classifier{min-height:54px;padding:8px 14px;gap:8px}
  .viewer-classifier__label{font-size:10px}
  .viewer-classifier__button{min-height:34px;padding:0 12px;font-size:10px}
}

/* =========================================================
   PHASE 53 — CLEAN PROFESSIONAL UI
   Keep the original page structure, remove visual noise, and
   improve Thai typography / spacing without touching 3D logic.
   ========================================================= */
.iot-lab-one-lot{
  --clean-bg:#07110f;
  --clean-panel:#0a1714;
  --clean-panel-soft:#0c1b17;
  --clean-line:rgba(172,195,184,.12);
  --clean-line-strong:rgba(172,195,184,.20);
  --clean-text:#eef3f0;
  --clean-muted:#8ea19a;
  --clean-accent:#b7d98d;
  --clean-accent-strong:#d6e8bc;
  font-family:var(--font-ui,"Noto Sans Thai","Leelawadee UI","Segoe UI",Tahoma,sans-serif);
  color:var(--clean-text);
  font-feature-settings:"kern" 1,"liga" 1;
  text-rendering:optimizeLegibility;
}

.iot-lab-one-lot button,
.iot-lab-one-lot input,
.iot-lab-one-lot select,
.iot-lab-one-lot textarea{
  font:inherit;
}

@media (min-width:1024px){
  .iot-lab-one-lot .lab-page{
    padding:34px 0 68px !important;
  }
  .iot-lab-one-lot .lab-container{
    width:min(92vw,1460px) !important;
    max-width:1460px !important;
    gap:14px !important;
  }
}

/* Hero: one purpose, one sentence. */
.iot-lab-one-lot .lab-intro--clean{
  display:block !important;
  margin:0 !important;
  padding:26px 28px !important;
  border:1px solid var(--clean-line);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(10,30,25,.82),rgba(6,18,16,.76));
  box-shadow:none;
}
.iot-lab-one-lot .lab-intro--clean .lab-intro__copy{
  max-width:920px;
}
.iot-lab-one-lot .lab-intro--clean .lab-kicker{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(183,217,141,.18);
  border-radius:999px;
  background:rgba(183,217,141,.055);
  color:var(--clean-accent);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
}
.iot-lab-one-lot .lab-intro--clean h1{
  margin:13px 0 0;
  color:var(--clean-text);
  font-size:clamp(30px,2.6vw,42px) !important;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.018em;
}
.iot-lab-one-lot .lab-intro--clean .lab-lead{
  max-width:760px;
  margin:8px 0 0;
  color:var(--clean-muted);
  font-size:14px !important;
  font-weight:400;
  line-height:1.75;
}

/* Zone navigation: clean segmented control. */
.iot-lab-one-lot .lot-zone-nav{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
  margin:0 !important;
  padding:6px;
  border:1px solid var(--clean-line);
  border-radius:14px;
  background:rgba(8,22,19,.72);
}
.iot-lab-one-lot .zone-tab{
  min-height:44px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#9bad9f;
  font-size:12px;
  font-weight:500;
  letter-spacing:0;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.iot-lab-one-lot .zone-tab:hover{
  background:rgba(255,255,255,.028);
  color:#d7e0db;
}
.iot-lab-one-lot .zone-tab.is-active{
  border-color:rgba(183,217,141,.22);
  background:rgba(183,217,141,.10);
  color:var(--clean-accent-strong);
  box-shadow:none;
}

/* Viewer: fewer ornamental layers. */
.iot-lab-one-lot .viewer-card{
  margin:0 !important;
  overflow:hidden;
  border:1px solid var(--clean-line);
  border-radius:16px !important;
  background:var(--clean-panel);
  box-shadow:none;
}
.iot-lab-one-lot .viewer-card__topbar--clean{
  min-height:58px !important;
  padding:12px 16px !important;
  border-bottom:1px solid var(--clean-line);
  background:rgba(255,255,255,.012);
}
.iot-lab-one-lot .viewer-card__topbar--clean h2{
  margin:0;
  color:var(--clean-text);
  font-size:17px !important;
  font-weight:600;
  line-height:1.35;
}
.iot-lab-one-lot .viewer-live--sim{
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(124,188,103,.18);
  border-radius:999px;
  background:rgba(124,188,103,.065);
  color:#a9cb8d;
  box-shadow:none;
  font-size:10px;
}
.iot-lab-one-lot .viewer-live--sim i{
  width:6px;
  height:6px;
  background:#8fcf65;
  box-shadow:none;
}

.iot-lab-one-lot .viewer-browser--clean{
  display:flex;
  min-height:44px !important;
  padding:6px 10px !important;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  border-bottom:1px solid var(--clean-line);
  background:#081512;
}
.iot-lab-one-lot .viewer-browser--clean .viewer-model-status{
  margin-right:auto;
  color:#7f948b;
  font-size:10px;
}
.iot-lab-one-lot .viewer-reset--text{
  display:inline-flex;
  width:auto !important;
  min-width:auto;
  height:32px !important;
  padding:0 10px;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--clean-line-strong) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.025) !important;
  color:#b6c2bc !important;
  font-size:11px !important;
}
.iot-lab-one-lot .viewer-reset--text strong{font-size:11px;font-weight:500}

.iot-lab-one-lot .viewer-tools--clean{
  border-bottom:1px solid var(--clean-line);
  background:#081512;
}
.iot-lab-one-lot .viewer-tools--clean>summary{
  display:flex;
  min-height:40px;
  padding:0 12px;
  align-items:center;
  color:#82958c;
  font-size:10px;
  font-weight:500;
  cursor:pointer;
  list-style:none;
}
.iot-lab-one-lot .viewer-tools--clean>summary::-webkit-details-marker{display:none}
.iot-lab-one-lot .viewer-tools--clean>summary::before{
  content:'＋';
  width:18px;
  color:#99ae9d;
}
.iot-lab-one-lot .viewer-tools--clean[open]>summary::before{content:'−'}
.iot-lab-one-lot .viewer-tools--clean .viewer-classifier{
  min-height:auto;
  padding:8px 12px 11px;
  border:0;
  border-top:1px solid rgba(255,255,255,.035);
  background:transparent;
}
.iot-lab-one-lot .viewer-classifier__button{
  min-height:30px;
  padding:0 10px;
  border-color:rgba(255,255,255,.075);
  border-radius:8px;
  background:rgba(255,255,255,.018);
  color:#83968c;
  font-size:9px;
}
.iot-lab-one-lot .viewer-classifier__button.is-active{
  border-color:rgba(183,217,141,.24);
  background:rgba(183,217,141,.08);
  color:#cfe4b1;
  box-shadow:none;
}
.iot-lab-one-lot .viewer-stage{
  background:radial-gradient(circle at 50% 20%,rgba(48,75,63,.82),rgba(6,20,16,.98) 72%) !important;
}
.iot-lab-one-lot .viewer-status{
  bottom:12px;
  max-width:min(88%,560px);
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:rgba(4,14,12,.72);
  color:#91a49b;
  font-size:9px;
  backdrop-filter:blur(8px);
}

/* Selected zone summary: one clean information card. */
.iot-lab-one-lot .lot-info-grid--clean{
  grid-template-columns:1fr !important;
  gap:0 !important;
  margin:0 !important;
}
.iot-lab-one-lot .lot-panel--zone{
  min-height:0 !important;
  padding:16px 18px !important;
  border:1px solid var(--clean-line);
  border-radius:14px;
  background:rgba(9,25,21,.58);
}
.iot-lab-one-lot .lot-panel--zone>span{
  color:#799087;
  font-size:9px;
  font-weight:500;
  letter-spacing:.05em;
}
.iot-lab-one-lot .lot-panel--zone h3{
  margin:4px 0 0;
  color:var(--clean-text);
  font-size:18px !important;
  font-weight:600;
}
.iot-lab-one-lot .lot-panel--zone p{
  margin:5px 0 0;
  color:#82958c;
  font-size:11px !important;
  line-height:1.65;
}

/* Simulation: compact and businesslike. */
.iot-lab-one-lot .simulation-launch{
  margin:0 !important;
  padding:18px 20px !important;
  border:1px solid var(--clean-line);
  border-radius:14px;
  background:rgba(9,25,21,.58);
  box-shadow:none;
}
.iot-lab-one-lot .simulation-launch::after{display:none !important}
.iot-lab-one-lot .simulation-launch__copy>span,
.iot-lab-one-lot .simulation-panel__head span,
.iot-lab-one-lot .simulation-result>span{
  color:#789087;
  font-size:9px;
  font-weight:500;
  letter-spacing:.06em;
}
.iot-lab-one-lot .simulation-launch__copy h2{
  margin:4px 0 0;
  color:var(--clean-text);
  font-size:19px !important;
  font-weight:600;
}
.iot-lab-one-lot .simulation-launch__copy p{
  margin:5px 0 0;
  color:#82958c;
  font-size:11px !important;
  line-height:1.65;
}
.iot-lab-one-lot .simulation-launch__button{
  min-width:220px !important;
  min-height:54px !important;
  padding:9px 12px !important;
  border:1px solid rgba(183,217,141,.20);
  border-radius:10px;
  background:rgba(183,217,141,.085);
  color:#dcecc8;
  box-shadow:none;
}
.iot-lab-one-lot .simulation-launch__icon{
  width:30px;
  height:30px;
  background:#95b66f;
  color:#08120d;
  font-size:11px;
}
.iot-lab-one-lot .simulation-launch__button strong{font-size:12px;font-weight:600}
.iot-lab-one-lot .simulation-launch__button small{margin-top:2px;color:#89a07e;font-size:9px}

.iot-lab-one-lot .simulation-panel{
  margin:0 !important;
  border:1px solid var(--clean-line);
  border-radius:14px;
  background:#081310;
  box-shadow:none;
}
.iot-lab-one-lot .simulation-panel__head{
  padding:13px 16px;
  border-bottom:1px solid var(--clean-line);
}
.iot-lab-one-lot .simulation-panel__head h2{
  margin:3px 0 0;
  color:var(--clean-text);
  font-size:16px;
  font-weight:600;
}
.iot-lab-one-lot .simulation-panel__body{padding:16px}
.iot-lab-one-lot .simulation-result,
.iot-lab-one-lot .sim-control,
.iot-lab-one-lot .manual-actuator-card{
  border-color:var(--clean-line);
  background:rgba(255,255,255,.012);
}

/* Lower content: quieter surfaces and stronger headings. */
.iot-lab-one-lot .device-panel-one-lot,
.iot-lab-one-lot .logic-section-one-lot{
  margin:0 !important;
  padding:16px 0 18px !important;
  border:1px solid var(--clean-line) !important;
  border-radius:14px !important;
  background:rgba(9,25,21,.48) !important;
}
.iot-lab-one-lot .lab-section-heading--clean{
  margin:0 16px 12px;
}
.iot-lab-one-lot .lab-section-heading--clean h2{
  margin:0;
  color:var(--clean-text);
  font-size:16px !important;
  font-weight:600;
}
.iot-lab-one-lot .zone-device-card,
.iot-lab-one-lot .zone-rule-card{
  min-height:auto !important;
  padding:14px !important;
  border-color:rgba(172,195,184,.09);
  border-radius:10px;
  background:rgba(255,255,255,.012);
  box-shadow:none;
}
.iot-lab-one-lot .zone-device-card strong,
.iot-lab-one-lot .zone-rule-card strong{
  color:#dce5df;
  font-size:11px;
  font-weight:600;
}
.iot-lab-one-lot .zone-device-card span,
.iot-lab-one-lot .zone-rule-card span{
  color:#7f9188;
  font-size:9px;
  line-height:1.55;
}

@media (min-width:1024px){
  .iot-lab-one-lot .viewer-stage{
    height:clamp(540px,62vh,700px) !important;
    min-height:540px !important;
    max-height:700px !important;
  }
  .iot-lab-one-lot .zone-device-list{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .iot-lab-one-lot .zone-rule-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .iot-lab-one-lot .lab-intro--clean{padding:20px 18px !important}
  .iot-lab-one-lot .lab-intro--clean h1{font-size:28px !important}
  .iot-lab-one-lot .lab-intro--clean .lab-lead{font-size:13px !important}
  .iot-lab-one-lot .lot-zone-nav{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .iot-lab-one-lot .zone-tab:first-child{grid-column:1/-1}
  .iot-lab-one-lot .viewer-card__topbar--clean{align-items:flex-start;gap:8px}
  .iot-lab-one-lot .viewer-card__topbar--clean h2{font-size:15px !important}
  .iot-lab-one-lot .viewer-browser--clean{padding:6px 8px !important}
  .iot-lab-one-lot .viewer-stage{min-height:390px !important;height:52vh !important}
  .iot-lab-one-lot .viewer-status{font-size:8px}
  .iot-lab-one-lot .simulation-launch{align-items:flex-start;flex-direction:column}
  .iot-lab-one-lot .simulation-launch__button{width:100%;min-width:0 !important}
}

/* =========================================================
   PHASE 54 — PORTRAIT TOP SPACING
   Keep the lab content close to the navigation on phones and
   portrait/tablet widths. Desktop spacing is intentionally unchanged.
   ========================================================= */
@media (max-width:1023px){
  .iot-lab-one-lot .lab-page{
    padding:6px 0 48px !important;
  }
}

@media (max-width:620px){
  .iot-lab-one-lot .lab-page{
    padding-top:4px !important;
  }
}