/* SEHL-GUARDIAN-RESPONSIVE-CORE-V1-BEGIN */
:root{
  --gv-r-safe-top:env(safe-area-inset-top,0px);
  --gv-r-safe-right:env(safe-area-inset-right,0px);
  --gv-r-safe-bottom:env(safe-area-inset-bottom,0px);
  --gv-r-safe-left:env(safe-area-inset-left,0px);
  --gv-r-touch:44px;
  --gv-r-x:clamp(10px,1.4vw,24px);
  --gv-r-y:clamp(8px,1vw,18px);
}
html,body{width:100%;max-width:100%;min-width:0;min-height:100vh;min-height:100dvh}
body{overflow-x:hidden;overscroll-behavior:none}
#loginView,#playerView{width:100%;max-width:100%;min-width:0;min-height:100vh;min-height:100dvh}
#playerView.show{height:100vh;height:100dvh;min-height:0;overflow:hidden}
.hero,.side,.card,.top,.region-bar,.wallbar,.grid,.wall,.gv-pager,.grid-hint{min-width:0;max-width:100%}
.hero{padding-left:max(clamp(22px,4vw,54px),var(--gv-r-safe-left));padding-right:max(clamp(22px,4vw,54px),var(--gv-r-safe-right));padding-top:max(clamp(26px,4vw,46px),var(--gv-r-safe-top));padding-bottom:max(clamp(26px,4vw,46px),var(--gv-r-safe-bottom))}
.side{padding-left:max(clamp(16px,3vw,40px),var(--gv-r-safe-left));padding-right:max(clamp(16px,3vw,40px),var(--gv-r-safe-right));padding-top:max(clamp(18px,3vw,40px),var(--gv-r-safe-top));padding-bottom:max(clamp(18px,3vw,40px),var(--gv-r-safe-bottom))}
.card{max-width:min(420px,100%)}
.ip input,select,input,button{min-width:0;max-width:100%}
.top{
  min-width:0;
  padding-left:max(var(--gv-r-x),var(--gv-r-safe-left))!important;
  padding-right:max(var(--gv-r-x),var(--gv-r-safe-right))!important;
  padding-top:max(var(--gv-r-y),var(--gv-r-safe-top))!important;
  gap:clamp(7px,1vw,18px)!important;
  flex-wrap:wrap;
}
#playerView .top-logo-img{width:auto!important;height:clamp(54px,6vw,82px)!important;max-width:min(330px,36vw)!important;object-fit:contain}
.top .mid{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.region-bar,.wallbar{padding-left:max(10px,var(--gv-r-safe-left))!important;padding-right:max(10px,var(--gv-r-safe-right))!important;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.region-btn,.wsplit,.wallbar button{flex:0 0 auto}
.grid{min-width:0;padding-left:max(8px,var(--gv-r-safe-left))!important;padding-right:max(8px,var(--gv-r-safe-right))!important}
.grid .tile,.wall .tile{min-width:0}
.grid-hint{padding-left:max(12px,var(--gv-r-safe-left))!important;padding-right:max(12px,var(--gv-r-safe-right))!important;padding-bottom:max(12px,var(--gv-r-safe-bottom))!important}

/* Theater / expanded camera */
#theater{
  width:100vw;height:100vh;height:100dvh;max-height:100dvh;
  padding-top:max(clamp(8px,1.2vw,18px),var(--gv-r-safe-top))!important;
  padding-right:max(clamp(8px,1.2vw,18px),var(--gv-r-safe-right))!important;
  padding-bottom:max(clamp(8px,1.2vw,18px),var(--gv-r-safe-bottom))!important;
  padding-left:max(clamp(8px,1.2vw,18px),var(--gv-r-safe-left))!important;
  overflow:hidden
}
.thead{min-width:0;flex:0 0 auto;gap:clamp(6px,1vw,14px)!important}
.thead .tn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ttools{min-width:0;max-width:100%}
.vwrap{min-width:0;min-height:0}
.vwrap video,.vwrap canvas.sharp{object-fit:contain!important}
.enh-panel{width:min(196px,calc(100% - 20px));max-height:calc(100% - 20px);overflow:auto}
.modal{padding-top:max(12px,var(--gv-r-safe-top))!important;padding-right:max(12px,var(--gv-r-safe-right))!important;padding-bottom:max(12px,var(--gv-r-safe-bottom))!important;padding-left:max(12px,var(--gv-r-safe-left))!important}
.mcard{max-width:min(460px,100%);max-height:calc(100dvh - var(--gv-r-safe-top) - var(--gv-r-safe-bottom) - 24px)!important}
.qrbox{max-width:100%}.qrbox svg{width:min(230px,68vw)!important;height:auto!important;aspect-ratio:1}

@media (pointer:coarse){
  button,.ghost,.tbtn,.region-btn,.seg button{min-height:var(--gv-r-touch)!important}
  .tbtn{min-width:var(--gv-r-touch)!important}
  .ip input,select,input{font-size:16px}
}

@media (max-width:1100px){
  .top .mid{display:none!important}
  #playerView .top-logo-img{max-width:min(290px,40vw)!important}
}

@media (max-width:900px){
  #loginView{grid-template-columns:1fr!important;min-height:100dvh}
  .hero{padding-top:max(20px,var(--gv-r-safe-top));padding-bottom:10px;text-align:center;align-items:center;gap:10px;border-right:0}
  .hero .brand{justify-content:center}.hero p.lead,.hero .feats,.hero .base{display:none!important}.hero h1{font-size:clamp(21px,5vw,30px);max-width:30ch}
  .side{padding-top:10px;align-items:flex-start}.card{max-width:480px}
  #playerView .top{min-height:0!important}
  #playerView .top-logo-img{height:clamp(50px,8vw,66px)!important;max-width:min(245px,48vw)!important}
  .top{gap:8px!important}
  .region-bar{padding-top:6px!important}
}

@media (max-width:820px){
  #playerView.show{height:100dvh!important}
  .top{flex-wrap:wrap!important}
  .top .title,.top .sub{display:none!important}
  .cw .wx-d,.cdate{display:none!important}
  .lang{margin-left:auto}
  .grid{overflow:auto!important;overscroll-behavior:contain}
  #theater .thead{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"back name status" "tools tools tools";align-items:center;margin-bottom:7px!important}
  #theater .thead>#back{grid-area:back}
  #theater .thead>.tn{grid-area:name}
  #theater .thead>.sp{display:none}
  #theater .thead>.ttools{grid-area:tools;display:flex;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  #theater .thead>.status{grid-area:status;justify-self:end}
  #theater .tbtn{flex:0 0 44px}
}

@media (max-width:640px){
  :root{--gv-r-x:8px;--gv-r-y:6px}
  .hero .brand-logo-img{height:clamp(72px,20vw,96px)!important;max-width:70vw}
  .side{padding-left:max(12px,var(--gv-r-safe-left));padding-right:max(12px,var(--gv-r-safe-right));padding-bottom:max(16px,var(--gv-r-safe-bottom))}
  .card{border-radius:15px;padding:18px}
  #playerView .top-logo-img{height:50px!important;max-width:min(190px,56vw)!important}
  .top .cw .wx{display:none!important}.top .cw .clock-wrap{border-left:0!important;padding-inline:9px!important}
  .ghost{padding-inline:10px!important}
  .region-bar,.wallbar{padding-left:max(6px,var(--gv-r-safe-left))!important;padding-right:max(6px,var(--gv-r-safe-right))!important}
  .grid{padding-left:max(6px,var(--gv-r-safe-left))!important;padding-right:max(6px,var(--gv-r-safe-right))!important;gap:6px!important}
  .grid-hint{font-size:11px!important}
  #theater{padding-left:max(6px,var(--gv-r-safe-left))!important;padding-right:max(6px,var(--gv-r-safe-right))!important}
  #theater .thead>.status span:not(.dot){display:none}
  .enh-panel{top:6px;right:6px;width:min(196px,calc(100% - 12px))}
  .mcard{padding:16px;border-radius:15px}.mrow{flex-wrap:wrap}.seg{width:100%}
}

@media (max-width:479px){
  .hero{padding-left:max(12px,var(--gv-r-safe-left));padding-right:max(12px,var(--gv-r-safe-right))}.hero h1{font-size:20px}
  .card{padding:16px}.foot{flex-wrap:wrap;gap:8px}
  #playerView .top-logo-img{height:46px!important;max-width:min(170px,58vw)!important}
  .top{gap:5px!important}.lang button{padding-inline:8px!important}.ghost{font-size:11px!important;padding-inline:8px!important}
  .tile .lbl{font-size:10px!important;padding:6px 8px!important}
  #theater .thead{grid-template-columns:auto minmax(0,1fr)}
  #theater .thead>.status{display:none}
  .qrbox svg{width:min(210px,72vw)!important}
}

@media (max-width:359px){
  #playerView .top-logo-img{height:42px!important;max-width:150px!important}
  .lang button{padding-inline:6px!important;font-size:11px!important}.ghost{padding-inline:7px!important}
  #theater .tn{font-size:13px!important}
}

@media (max-height:620px) and (orientation:landscape){
  .hero{display:none!important}.side{min-height:100dvh;padding-top:max(8px,var(--gv-r-safe-top));padding-bottom:max(8px,var(--gv-r-safe-bottom))}.card{margin:auto;max-height:calc(100dvh - var(--gv-r-safe-top) - var(--gv-r-safe-bottom) - 16px);overflow:auto}
  #playerView .top-logo-img{height:42px!important;max-width:180px!important}.top{padding-top:max(4px,var(--gv-r-safe-top))!important;padding-bottom:4px!important}.cw .wx,.cdate{display:none!important}
  #theater{padding-top:max(4px,var(--gv-r-safe-top))!important;padding-bottom:max(4px,var(--gv-r-safe-bottom))!important}.thead{margin-bottom:4px!important}.tbtn{height:40px!important;min-height:40px!important}
}

@media (min-width:2560px){
  :root{--gv-r-x:clamp(24px,1.25vw,42px);--gv-r-y:clamp(14px,.8vw,24px)}
  #playerView .top-logo-img{height:88px!important;max-width:360px!important}
  body{font-size:clamp(15px,.5vw,18px)}
}
/* SEHL-GUARDIAN-RESPONSIVE-CORE-V1-END */

/* SEHL-GUARDIAN-VIEWER-ADAPTIVE-VMS-V5-BEGIN */

/*
  SEHL Guardian Viewer — Adaptive VMS Mobile V5

  The phone layout no longer reserves a dark viewport-sized rectangle.
  A short camera page ends immediately after its last real camera.
  A long page is allowed to shrink to the remaining viewport and scroll.

  The single-region camera wall uses flex-wrap rather than a rigid CSS
  matrix. Therefore an incomplete final row expands to consume the row:
  there is no manufactured empty camera cell and no half-row hole.

  MULTI-REGION follows the same rule at pane level:
  portrait stacks panes for legibility; landscape wraps them into two
  columns and lets an incomplete final pane consume the available width.
*/

@media (max-width:767px), (max-width:900px) and (max-height:500px) and (orientation:landscape){
  :root{
    /* SEHL Guardian Viewer semantic color authority — V5.1 */
    --gv-color-shell:#f4f1eb;
    --gv-color-surface:#fff;
    --gv-color-stage:#080d14;
    --gv-color-video:#000;
    --gv-color-divider:var(--line);
    --gv-color-control-border:var(--line2);
    --gv-color-shadow-soft:rgba(24,33,44,.04);
    --gv-color-stage-border:rgba(24,33,44,.14);
    --gv-color-camera-border:rgba(255,255,255,.16);
    --gv-color-accent-border:rgba(176,137,79,.72);
    --gv-color-accent-ring:rgba(176,137,79,.20);

    /* Layout tokens remain separate from color tokens. */
    --gv-mobile-gap:4px;
    --gv-mobile-edge:max(5px,var(--gv-r-safe-left));
    --gv-mobile-edge-r:max(5px,var(--gv-r-safe-right));
    --gv-mobile-shell:var(--gv-color-shell);
    --gv-mobile-stage:var(--gv-color-stage);
  }

  html,
  body{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
    background:var(--gv-mobile-shell)!important;
  }

  #playerView.show{
    width:100%!important;
    height:100vh!important;
    height:100dvh!important;
    min-height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:var(--gv-mobile-shell)!important;
  }

  /* ---------- Compact application chrome ---------- */

  #playerView .top{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:minmax(74px,1fr) auto auto auto auto!important;
    grid-template-areas:"logo clock lang refresh logout"!important;
    align-items:center!important;
    min-height:44px!important;
    max-height:48px!important;
    padding:
      max(3px,var(--gv-r-safe-top))
      max(5px,var(--gv-r-safe-right))
      3px
      max(5px,var(--gv-r-safe-left))!important;
    column-gap:3px!important;
    row-gap:0!important;
    border-bottom:1px solid var(--gv-color-divider)!important;
    box-shadow:0 2px 8px var(--gv-color-shadow-soft)!important;
    flex-wrap:nowrap!important;
  }

  #playerView .top-logo-img{
    grid-area:logo!important;
    justify-self:start!important;
    align-self:center!important;
    width:auto!important;
    height:34px!important;
    max-width:min(105px,28vw)!important;
    object-fit:contain!important;
  }

  #playerView .top .mid{display:none!important;}

  #playerView .top .cw{
    grid-area:clock!important;
    min-width:0!important;
    justify-self:center!important;
  }

  #playerView .top .cdate{display:none!important;}

  /* Weather remains a first-class Viewer control on phone.
     Keep icon + temperature; the long description is hidden to protect
     the command row on narrow screens. */
  #playerView .top .cw{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    overflow:visible!important;
  }

  #playerView .top .cw .wx{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    min-width:0!important;
    max-width:64px!important;
    height:31px!important;
    min-height:31px!important;
    padding:0 5px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    border:1px solid var(--gv-color-control-border)!important;
    border-radius:9px!important;
    background:var(--gv-color-surface)!important;
  }

  #playerView .top .cw .wx-d{display:none!important;}

  #playerView .top .cw .wx-t{
    display:block!important;
    min-width:0!important;
    font-size:10px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  #playerView .top .cw .wx img,
  #playerView .top .cw .wx svg,
  #playerView .top .cw .wx .gicon{
    width:14px!important;
    height:14px!important;
    max-width:14px!important;
    max-height:14px!important;
    flex:0 0 14px!important;
  }

  #playerView .top .clock-wrap{
    min-width:0!important;
    min-height:31px!important;
    height:31px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 6px!important;
    border:1px solid var(--gv-color-control-border)!important;
    border-radius:9px!important;
    background:var(--gv-color-surface)!important;
  }

  #playerView .top .clock{
    font-size:clamp(10px,3vw,12px)!important;
    line-height:1!important;
    white-space:nowrap!important;
    letter-spacing:.01em!important;
  }

  #playerView .top .lang{
    grid-area:lang!important;
    justify-self:end!important;
    margin:0!important;
    display:flex!important;
  }

  #playerView .top .lang button{
    width:28px!important;
    min-width:28px!important;
    height:31px!important;
    min-height:31px!important;
    padding:0!important;
    border-radius:0!important;
    font-size:9px!important;
  }

  #playerView .top .lang button:first-child{border-radius:8px 0 0 8px!important;}
  #playerView .top .lang button:last-child{border-radius:0 8px 8px 0!important;}

  #refreshBtn{
    grid-area:refresh!important;
    justify-self:end!important;
    width:31px!important;
    min-width:31px!important;
    height:31px!important;
    min-height:31px!important;
    padding:0!important;
    margin:0!important;
    border-radius:8px!important;
  }

  #refreshBtn .gicon{width:16px!important;height:16px!important;}

  #logout{
    grid-area:logout!important;
    justify-self:end!important;
    width:auto!important;
    min-width:44px!important;
    height:31px!important;
    min-height:31px!important;
    padding:0 6px!important;
    margin:0!important;
    border-radius:8px!important;
    font-size:8.5px!important;
    white-space:nowrap!important;
  }

  /* ---------- Regions ---------- */

  #regionBar{
    flex:0 0 38px!important;
    min-height:38px!important;
    height:38px!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:4px!important;
    padding:3px var(--gv-mobile-edge-r) 3px var(--gv-mobile-edge)!important;
    border-bottom:1px solid var(--gv-color-divider)!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }

  #regionBar::-webkit-scrollbar{display:none!important;}
  #regionBar>.wl{display:none!important;}

  #regionBar .region-btn{
    flex:0 0 auto!important;
    height:31px!important;
    min-height:31px!important;
    min-width:0!important;
    padding:0 9px!important;
    border-radius:9px!important;
    font-size:9.5px!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
  }

  #regionBar .region-btn .rc{margin-left:4px!important;font-size:8px!important;}

  /* ---------- Density / page-capacity controls ---------- */

  #countBar{
    flex:0 0 44px!important;
    min-height:44px!important;
    height:44px!important;
    display:grid!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    grid-auto-flow:column!important;
    align-items:center!important;
    gap:3px!important;
    padding:3px var(--gv-mobile-edge-r) 3px var(--gv-mobile-edge)!important;
    overflow:hidden!important;
    border-bottom:1px solid var(--gv-color-divider)!important;
  }

  #countBar>.wl{display:none!important;}

  #countBar button{
    position:static!important;
    min-width:0!important;
    width:100%!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    margin:0!important;
    padding:0 1px!important;
    border-radius:8px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    font-size:9.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  #seqBtn,
  #fullBtn,
  #countBar button:last-of-type{font-size:0!important;}

  #seqBtn .wl,
  #fullBtn .wl,
  #countBar button:last-of-type .wl{display:none!important;}

  #seqBtn .gicon,
  #fullBtn .gicon,
  #countBar button:last-of-type .gicon{
    width:16px!important;
    height:16px!important;
    margin:0!important;
    flex:0 0 16px!important;
  }

  /* ---------- Multi-region selector ---------- */

  #wallBar{
    flex:0 0 35px!important;
    min-height:35px!important;
    height:35px!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    overflow:visible!important;
    padding:2px var(--gv-mobile-edge-r) 2px var(--gv-mobile-edge)!important;
    border-bottom:1px solid var(--gv-color-divider)!important;
  }

  #wallBar .wsplit{min-width:0!important;}

  #wallBar .wsplit-toggle{
    height:30px!important;
    min-height:30px!important;
    padding:0 9px!important;
    border-radius:8px!important;
    font-size:9px!important;
  }

  #wallBar .wsplit-toggle .wl{font-size:8px!important;letter-spacing:.08em!important;}

  #wallBar .wsplit-menu{
    position:fixed!important;
    left:max(6px,var(--gv-r-safe-left))!important;
    right:max(6px,var(--gv-r-safe-right))!important;
    top:auto!important;
    bottom:max(8px,var(--gv-r-safe-bottom))!important;
    width:auto!important;
    min-width:0!important;
    max-height:min(62dvh,520px)!important;
    overflow:auto!important;
    z-index:5000!important;
    border-radius:14px!important;
  }

  /* ==========================================================
     SINGLE-REGION ADAPTIVE CAMERA WALL
     ========================================================== */

  #grid[data-mobile-grid],
  #grid.fill[data-mobile-grid]{
    flex:0 1 auto!important;
    align-self:stretch!important;
    display:flex!important;
    flex-wrap:wrap!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    grid-auto-rows:auto!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:100%!important;
    margin:4px var(--gv-mobile-edge-r) 3px var(--gv-mobile-edge)!important;
    padding:4px!important;
    gap:var(--gv-mobile-gap)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    align-content:flex-start!important;
    align-items:flex-start!important;
    background:var(--gv-mobile-stage)!important;
    border:1px solid var(--gv-color-stage-border)!important;
    border-radius:9px!important;
    scrollbar-width:thin!important;
  }

  /* No cameras: preserve a small intentional stage instead of a giant wall. */
  #grid[data-mobile-visible-count="0"]{min-height:52px!important;}

  /* Every real camera owns a 16:9 frame. Flex-grow is deliberate:
     an incomplete final row expands across the width instead of leaving
     an empty pseudo-cell beside it. */
  #grid[data-mobile-grid] .tile.gv-mobile-page-camera{
    position:relative!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:none!important;
    flex-grow:1!important;
    flex-shrink:1!important;
    aspect-ratio:16/9!important;
    overflow:hidden!important;
    border-radius:6px!important;
    transform:none!important;
    border-color:var(--gv-color-camera-border)!important;
    box-shadow:none!important;
  }

  #grid[data-mobile-cols="1"] .tile.gv-mobile-page-camera{
    flex-basis:100%!important;
  }

  #grid[data-mobile-cols="2"] .tile.gv-mobile-page-camera{
    flex-basis:calc((100% - var(--gv-mobile-gap))/2)!important;
  }

  #grid[data-mobile-cols="3"] .tile.gv-mobile-page-camera{
    flex-basis:calc((100% - (2 * var(--gv-mobile-gap)))/3)!important;
  }

  #grid[data-mobile-cols="4"] .tile.gv-mobile-page-camera{
    flex-basis:calc((100% - (3 * var(--gv-mobile-gap)))/4)!important;
  }

  #grid[data-mobile-grid] .tile video,
  #grid[data-mobile-grid] .tile canvas{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    background:var(--gv-color-video)!important;
  }

  #grid[data-mobile-grid] .tile .lbl{
    padding:3px 5px!important;
    font-size:clamp(8px,2.35vw,10px)!important;
    line-height:1!important;
    gap:3px!important;
  }

  #grid[data-mobile-grid="9"] .tile .lbl,
  #grid[data-mobile-grid="16"] .tile .lbl,
  #grid[data-mobile-grid="all"] .tile .lbl{
    font-size:8px!important;
    padding:2px 4px!important;
  }

  #grid[data-mobile-grid="9"] .tile .rt,
  #grid[data-mobile-grid="16"] .tile .rt,
  #grid[data-mobile-grid="all"] .tile .rt{display:none!important;}

  #grid[data-mobile-grid] .tile .d{width:5px!important;height:5px!important;}

  #grid[data-mobile-grid] .tile .mv{
    transform:scale(.68)!important;
    transform-origin:top left!important;
    opacity:.16!important;
  }

  #grid[data-mobile-grid="9"] .tile .mv,
  #grid[data-mobile-grid="16"] .tile .mv,
  #grid[data-mobile-grid="all"] .tile .mv{display:none!important;}

  #grid[data-mobile-grid="1"] .tile .mv,
  #grid[data-mobile-grid="4"] .tile:focus-within .mv,
  #grid[data-mobile-grid="6"] .tile:focus-within .mv{opacity:.85!important;}

  /* Older desktop placeholders are not allowed to surface on phone. */
  #grid[data-mobile-grid] .gv-grid-empty{display:none!important;}

  /* ---------- Pager follows the last real row ---------- */

  #gridPager{
    flex:0 0 auto!important;
    min-height:0!important;
    max-height:36px!important;
    padding:1px 5px max(2px,var(--gv-r-safe-bottom))!important;
    background:var(--gv-mobile-shell)!important;
  }

  #gridPager:empty,
  #gridPager[data-mobile-pages="1"],
  #gridPager[data-mobile-mode="all"]{display:none!important;}

  #gridPager .pg-btn{
    width:31px!important;
    min-width:31px!important;
    height:31px!important;
    min-height:31px!important;
    border-radius:8px!important;
  }

  #gridPager .pg-info{font-size:9.5px!important;}
  #gridHint{display:none!important;}

  #playerView[data-mobile-grid="all"]{
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
  }

  /* ==========================================================
     MULTI-REGION — SCREEN DIVISION + ADAPTIVE PANES
     ========================================================== */

  #wall[data-mobile-pane-count]{
    flex:0 1 auto!important;
    align-self:stretch!important;
    display:flex!important;
    flex-wrap:wrap!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:100%!important;
    margin:4px var(--gv-mobile-edge-r) 3px var(--gv-mobile-edge)!important;
    padding:3px!important;
    gap:4px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    align-content:flex-start!important;
    align-items:flex-start!important;
  }

  /* Portrait: each surveillance region receives the full phone width.
     This prevents four microscopic quadrants on a narrow display. */
  #wall[data-mobile-pane-count] > .pane{
    flex:1 1 100%!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    border-radius:7px!important;
    overflow:hidden!important;
  }

  #wall[data-mobile-pane-count] > .pane.gv-pane-active{
    border-color:var(--gv-color-accent-border)!important;
    box-shadow:0 0 0 1px var(--gv-color-accent-ring)!important;
  }

  #wall .pane-head{
    min-height:28px!important;
    padding:2px 4px!important;
    gap:4px!important;
  }

  #wall .pane-head select{
    height:26px!important;
    min-height:26px!important;
    padding:0 5px!important;
    font-size:8.5px!important;
  }

  #wall .pane-grid{
    display:flex!important;
    flex-wrap:wrap!important;
    min-height:0!important;
    height:auto!important;
    padding:2px!important;
    gap:3px!important;
    align-content:flex-start!important;
    align-items:flex-start!important;
    overflow:visible!important;
  }

  #wall .pane-grid .tile:not(.gv-grid-empty){
    flex:1 1 100%!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    aspect-ratio:16/9!important;
    overflow:hidden!important;
  }

  #wall .pane-grid .gv-grid-empty{display:none!important;}
}

/* Tiny portrait phones retain one compact command row. */
@media (max-width:359px) and (orientation:portrait){
  #playerView .top .cw{gap:2px!important;}
  #playerView .top .cw .wx{max-width:50px!important;padding:0 3px!important;}
  #playerView .top .cw .wx-t{font-size:9px!important;}

  #playerView .top{
    grid-template-columns:minmax(64px,1fr) auto auto auto auto!important;
    column-gap:2px!important;
  }

  #playerView .top-logo-img{height:30px!important;max-width:84px!important;}
  #playerView .top .clock-wrap{padding-inline:4px!important;}
  #countBar{gap:2px!important;padding-inline:3px!important;}
  #countBar button{height:34px!important;min-height:34px!important;font-size:9px!important;}
}

/* Landscape has enough physical width to show screen divisions side by side. */
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  #playerView .top .cw .wx{
    height:28px!important;
    min-height:28px!important;
    max-width:58px!important;
    padding:0 4px!important;
  }
  #playerView .top .cw .wx-t{font-size:9px!important;}
  #playerView .top{
    min-height:38px!important;
    max-height:40px!important;
    padding-top:max(2px,var(--gv-r-safe-top))!important;
    padding-bottom:2px!important;
  }

  #playerView .top-logo-img{height:29px!important;max-width:96px!important;}

  #playerView .top .clock-wrap,
  #playerView .top .lang button,
  #refreshBtn,
  #logout{height:28px!important;min-height:28px!important;}

  #regionBar{
    flex-basis:32px!important;
    height:32px!important;
    min-height:32px!important;
    padding-block:1px!important;
  }

  #regionBar .region-btn{height:28px!important;min-height:28px!important;}

  #countBar{
    flex-basis:36px!important;
    height:36px!important;
    min-height:36px!important;
    padding-block:1px!important;
  }

  #countBar button{height:32px!important;min-height:32px!important;}

  #wallBar{
    flex-basis:30px!important;
    height:30px!important;
    min-height:30px!important;
    padding-block:1px!important;
  }

  #wallBar .wsplit-toggle{height:27px!important;min-height:27px!important;}

  #grid[data-mobile-grid],
  #grid.fill[data-mobile-grid]{
    margin-top:3px!important;
    margin-bottom:2px!important;
    padding:3px!important;
    gap:3px!important;
  }

  #gridPager{max-height:33px!important;}

  #gridPager .pg-btn{
    width:29px!important;
    min-width:29px!important;
    height:29px!important;
    min-height:29px!important;
  }

  /* Two, three or four panes wrap into a balanced two-column wall.
     With three panes the final pane grows across the full last row. */
  #wall[data-mobile-pane-count="2"] > .pane,
  #wall[data-mobile-pane-count="3"] > .pane,
  #wall[data-mobile-pane-count="4"] > .pane{
    flex:1 1 calc((100% - 4px)/2)!important;
    width:auto!important;
  }

  #wall[data-mobile-pane-count="1"] > .pane{
    flex-basis:100%!important;
  }

  /* Inside a wide single pane we can safely expose two camera columns. */
  #wall[data-mobile-pane-count="1"] .pane-grid .tile:not(.gv-grid-empty){
    flex-basis:calc((100% - 3px)/2)!important;
  }
}

/* SEHL-GUARDIAN-VIEWER-ADAPTIVE-VMS-V5-END */

/* SEHL-GUARDIAN-VIEWER-WEATHER-TOKENS-V5.1-BEGIN
   WEATHER RESTORED · MOBILE V5 COLOR CONSUMERS TOKENIZED
   app.js intentionally unchanged. */
/* SEHL-GUARDIAN-VIEWER-WEATHER-TOKENS-V5.1-END */