*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:#06101a;color:#edf6ff}body{min-height:100vh;overflow-x:hidden}.bg{position:fixed;inset:0;background:radial-gradient(circle at 78% 20%,rgba(13,92,160,.18),transparent 32%),radial-gradient(circle at 18% 70%,rgba(11,155,111,.08),transparent 30%),linear-gradient(180deg,#081522,#06111a 60%,#040b12);z-index:-2}.shell{max-width:1600px;margin:auto;padding:20px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.brand{display:flex;align-items:center;gap:14px}.fox{font-size:50px}.brandname{font-size:29px;font-weight:900;color:#1da1ff}.brandname span{color:#fff}.subtitle{letter-spacing:7px;font-size:11px;color:#b7cbe0}.header-right{display:flex;gap:28px;align-items:center}.health{color:#c9daea}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}.online{color:#28df7f}.offline{color:#ff5b5b}.checking{color:#f6c85f}.dot.online{background:#28df7f;box-shadow:0 0 12px #28df7f}.dot.offline{background:#ff5b5b;box-shadow:0 0 12px #ff5b5b}.dot.checking{background:#f6c85f}.clock{text-align:right;border-left:1px solid #314456;padding-left:24px}.clock strong{display:block;font-size:34px}.clock span{color:#c0d2e3}.status-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.status-card,.panel,.footerbar{background:linear-gradient(180deg,rgba(11,27,41,.95),rgba(7,19,30,.95));border:1px solid #18364d;border-radius:15px;box-shadow:0 16px 45px rgba(0,0,0,.18)}.status-card{display:flex;align-items:center;gap:12px;padding:15px;min-height:96px}.status-card .icon{font-size:30px}.status-card small,.status-card b,.status-card span{display:block}.status-card b{font-size:19px;margin:4px 0}.status-card .detail{font-size:11px;color:#91abc0}.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}.tile{position:relative;height:160px;border-radius:16px;border:1px solid #24475f;color:#fff;background:#0b1a28;box-shadow:0 18px 40px rgba(0,0,0,.2);text-decoration:none;text-align:left;overflow:hidden;padding:0;cursor:pointer}.tile:hover{border-color:#2e9df2;transform:translateY(-1px)}.tile-content{position:absolute;inset:0;display:flex;align-items:flex-end;gap:14px;padding:18px}.bigicon{font-size:40px}.tile h2{font-size:22px;margin:0}.tile p{margin:4px 0 0;color:#c0d6e8}.arrow{font-size:38px}.mini-status{margin-left:auto;font-size:20px;color:#f6c85f}.mini-status.online{color:#28df7f}.mini-status.offline{color:#ff5b5b}.cam{background:linear-gradient(135deg,#112f42,#0a1721)}.unifi{background:linear-gradient(135deg,#072d69,#0b1722)}.pihole{background:linear-gradient(135deg,#10321c,#0b1722)}.hosting{background:linear-gradient(135deg,#0d3256,#0b1722)}.radio{background:linear-gradient(135deg,#4a1230,#0b1722)}.status{background:linear-gradient(135deg,#0d4337,#0b1722)}.remote{background:linear-gradient(135deg,#153f8a,#0b1722)}.bottom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}.panel{padding:16px;min-height:170px}.panel h3{font-size:14px;color:#55b5ff;margin:0 0 15px}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric-grid div{padding:10px;border-radius:11px;background:#0a1723;border:1px solid #18364d}.metric-grid span,.metric-grid b{display:block}.metric-grid span{font-size:11px;color:#91abc0}.metric-grid b{font-size:18px;margin-top:4px}.meter{display:grid;grid-template-columns:42px 1fr 42px;gap:8px;align-items:center;margin:15px 0;font-size:12px}.meter div{height:11px;background:#142838;border-radius:20px;overflow:hidden}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#20c98b,#3699ff);border-radius:20px}.meter b{text-align:right}.action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.action-grid button{border:1px solid #28445a;background:#0a1723;color:#e8f4ff;border-radius:11px;min-height:58px;font-size:22px}.action-grid span{display:block;font-size:10px;color:#a9c0d2;margin-top:3px}.footerbar{display:flex;justify-content:space-between;gap:15px;padding:10px 14px;margin-top:12px;font-size:12px;color:#9fb6c8}.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(15px);background:#102437;border:1px solid #31536d;color:#fff;padding:12px 18px;border-radius:12px;opacity:0;transition:.2s;z-index:99}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@media(max-width:1200px){.status-row{grid-template-columns:repeat(3,1fr)}.tiles{grid-template-columns:repeat(2,1fr)}.bottom-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.shell{padding:10px}.health{display:none}.status-row,.tiles,.bottom-grid{grid-template-columns:1fr}.tile{height:140px}.footerbar{flex-direction:column}.brandname{font-size:21px}.subtitle{letter-spacing:4px}.clock strong{font-size:27px}}
.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}.hero-card,.servers-panel{background:linear-gradient(180deg,rgba(11,27,41,.96),rgba(7,19,30,.96));border:1px solid #18364d;border-radius:16px;box-shadow:0 16px 45px rgba(0,0,0,.18)}.hero-card{padding:17px;text-decoration:none;color:#fff;min-height:170px}.card-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#bcd3e6;margin-bottom:14px}.badge{font-size:9px;letter-spacing:1px;padding:5px 7px;border:1px solid #2a5672;border-radius:20px;color:#6dc4ff;background:#0a1926}.big-number{font-size:34px;font-weight:800;margin-bottom:3px}.sub{font-size:12px;color:#8fa9bd}.mini-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:17px}.mini-metrics span{font-size:10px;color:#829caf}.mini-metrics b{display:block;color:#e9f6ff;font-size:14px;margin-bottom:2px}.spark{height:10px;background:#132838;border-radius:10px;margin-top:25px;overflow:hidden}.spark i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1bd490,#3699ff);transition:.3s}.servers-panel{padding:16px;margin-top:12px}.servers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.server-card{padding:14px;border-radius:12px;background:#091723;border:1px solid #18364d}.server-card b,.server-card span{display:block}.server-card b{font-size:14px}.server-card span{font-size:11px;color:#90a9bc;margin-top:5px}.server-card .server-state{margin-top:10px;font-size:12px}.server-card .server-state.online{color:#28df7f}.server-card .server-state.offline{color:#ff5b5b}.footerbar button{border:1px solid #28445a;background:#0a1723;color:#e8f4ff;border-radius:8px;padding:6px 10px}@media(max-width:1200px){.hero-grid{grid-template-columns:repeat(2,1fr)}.servers-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.hero-grid,.servers-grid{grid-template-columns:1fr}}

/* V5 refinements */
.tiles{grid-template-columns:repeat(4,1fr)}
.tile{min-height:150px}
@media(min-width:1201px){
  .tiles .tile:last-child{grid-column:span 2}
}
@media(max-width:1200px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tiles .tile:last-child{grid-column:auto}
}
@media(max-width:720px){
  .tiles{grid-template-columns:1fr}
}

/* =========================
   V6 - Oukitel RT1 layout
   ========================= */
html,body{height:100%;overflow:hidden}
body{overscroll-behavior:none}
.shell{
  max-width:none;
  width:100%;
  height:100vh;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.topbar{
  margin:0;
  min-height:64px;
  flex:0 0 64px;
}
.brand .fox{font-size:40px}
.brandname{font-size:23px}
.subtitle{font-size:9px;letter-spacing:4px}
.clock strong{font-size:29px}
.clock span{font-size:11px}
.status-row{
  flex:0 0 76px;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
}
.status-card{
  min-height:76px;
  padding:10px;
  border-radius:12px;
}
.status-card .icon{font-size:24px}
.status-card small{font-size:11px}
.status-card b{font-size:16px;margin:2px 0}
.status-card .detail{font-size:9px}

.hero-grid{
  flex:0 0 132px;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:0;
}
.hero-card{
  min-height:132px;
  padding:12px;
  border-radius:13px;
}
.card-head{font-size:11px;margin-bottom:8px}
.big-number{font-size:26px}
.sub{font-size:10px}
.mini-metrics{margin-top:10px;gap:4px}
.mini-metrics span{font-size:9px}
.mini-metrics b{font-size:12px}
.meter{margin:10px 0;font-size:10px;grid-template-columns:34px 1fr 36px}

.tiles{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(92px,1fr);
  gap:8px;
  margin:0;
}
.tile{
  height:auto;
  min-height:92px;
  border-radius:13px;
}
.tile-content{
  padding:12px;
  gap:10px;
  align-items:center;
}
.bigicon{font-size:31px}
.tile h2{font-size:17px}
.tile p{font-size:10px;margin-top:2px}
.arrow{font-size:28px}
.mini-status{font-size:16px}

/* Remote should not dominate the layout */
.tiles .remote{
  grid-column:auto !important;
}

.compact-servers{
  flex:0 0 96px;
  padding:10px 12px;
  margin:0;
  border-radius:13px;
}
.compact-servers .card-head{
  margin-bottom:8px;
}
.servers-grid{
  grid-template-columns:repeat(6,1fr);
  gap:6px;
}
.server-card{
  padding:8px 9px;
  border-radius:9px;
}
.server-card b{font-size:11px}
.server-card span{font-size:8px;margin-top:2px}
.server-card .server-state{font-size:9px;margin-top:5px}

.quick-strip{
  flex:0 0 42px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
}
.quick-strip button,
.quick-strip a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid #28445a;
  background:#0a1723;
  color:#e8f4ff;
  border-radius:10px;
  min-height:42px;
  text-decoration:none;
  font-size:16px;
}
.quick-strip span{font-size:10px;color:#b8cedd}

.footerbar{
  flex:0 0 28px;
  margin:0;
  padding:5px 9px;
  border-radius:9px;
  font-size:9px;
  align-items:center;
}
.footerbar button{display:none}

/* landscape tablet tuning */
@media (orientation:landscape) and (min-width:900px){
  .shell{overflow:hidden}
}

/* fall back gracefully on narrower widths */
@media(max-width:1100px){
  html,body{overflow:auto}
  .shell{height:auto;min-height:100vh}
  .status-row{grid-template-columns:repeat(3,1fr);flex:auto}
  .hero-grid{grid-template-columns:repeat(2,1fr);flex:auto}
  .tiles{grid-template-columns:repeat(2,1fr);flex:auto}
  .servers-grid{grid-template-columns:repeat(3,1fr)}
  .quick-strip{grid-template-columns:repeat(3,1fr);flex:auto}
  .footerbar{flex:auto}
}

/* V6.1 readability + kiosk */
.kiosk-controls{
  margin-left:auto;
  display:flex;
  gap:6px;
  align-items:center;
}
.kiosk-controls button{
  border:1px solid #2c5875;
  background:#0b1c2b;
  color:#eef8ff;
  border-radius:10px;
  padding:9px 12px;
  font-size:11px;
  font-weight:700;
}
.kiosk-controls .hidden{display:none}

.server-card{
  background:linear-gradient(180deg,#0b1b29,#08131d);
  border-color:#24445a;
}
.server-card b{
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.server-card span{
  font-size:9px;
  color:#a8bdcd;
}
.server-card .server-state{
  font-weight:700;
  letter-spacing:.2px;
}

.quick-strip button,
.quick-strip a{
  min-height:46px;
  font-size:18px;
}
.quick-strip span{
  font-size:11px;
  font-weight:700;
}

@media (orientation:landscape) and (min-width:1100px){
  .shell{padding:8px 10px;gap:6px}
  .topbar{min-height:58px;flex-basis:58px}
  .status-row{flex-basis:72px}
  .hero-grid{flex-basis:124px}
  .compact-servers{flex-basis:90px}
  .quick-strip{flex-basis:44px}
  .footerbar{flex-basis:24px}
}

@media (display-mode:fullscreen),(display-mode:standalone){
  .kiosk-controls{display:none}
}

/* =========================
   V6.2 - FIX HEADER / TOP
   ========================= */

/* Stop forcing everything into one viewport */
html,body{
  height:auto !important;
  min-height:100%;
  overflow:auto !important;
}

body{
  overscroll-behavior-y:contain;
}

.shell{
  width:100%;
  max-width:1600px;
  height:auto !important;
  min-height:100vh;
  margin:0 auto;
  padding:10px 12px 18px;
  display:block !important;
}

/* Always keep the complete FoxNetwork top visible */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  min-height:78px !important;
  height:auto !important;
  margin:0 0 10px !important;
  padding:8px 10px;
  border:1px solid #18364d;
  border-radius:14px;
  background:rgba(6,17,27,.96);
  backdrop-filter:blur(12px);
  box-shadow:0 8px 25px rgba(0,0,0,.28);
}

.brand{
  min-width:max-content;
}

.brand .fox{
  font-size:46px !important;
}

.brandname{
  font-size:27px !important;
}

.subtitle{
  font-size:10px !important;
  letter-spacing:5px !important;
}

.header-right{
  display:flex !important;
}

.clock strong{
  font-size:31px !important;
}

.status-row,
.hero-grid,
.tiles,
.compact-servers,
.quick-strip,
.footerbar{
  flex:none !important;
  margin-top:10px !important;
}

.status-row{
  grid-template-columns:repeat(6,1fr) !important;
}

.status-card{
  min-height:88px !important;
}

.hero-grid{
  grid-template-columns:repeat(4,1fr) !important;
}

.hero-card{
  min-height:150px !important;
}

.tiles{
  grid-template-columns:repeat(4,1fr) !important;
  grid-auto-rows:130px !important;
}

.tile{
  min-height:130px !important;
}

.compact-servers{
  min-height:120px !important;
}

.servers-grid{
  grid-template-columns:repeat(6,1fr) !important;
}

.quick-strip{
  min-height:50px !important;
}

.footerbar{
  min-height:34px !important;
}

/* Keep header sane on the RT1 if Android/Chrome reports smaller CSS width */
@media(max-width:1100px){
  .topbar{
    position:sticky !important;
    top:0 !important;
  }

  .status-row{
    grid-template-columns:repeat(3,1fr) !important;
  }

  .hero-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }

  .tiles{
    grid-template-columns:repeat(2,1fr) !important;
    grid-auto-rows:135px !important;
  }

  .servers-grid{
    grid-template-columns:repeat(3,1fr) !important;
  }

  .quick-strip{
    grid-template-columns:repeat(3,1fr) !important;
  }
}

/* PWA/fullscreen: preserve top area instead of hiding/compressing it */
@media (display-mode:fullscreen),(display-mode:standalone){
  .shell{
    padding-top:max(8px,env(safe-area-inset-top));
  }

  .topbar{
    top:env(safe-area-inset-top);
  }
}

/* V6.3 Spotify */
.hero-grid{grid-template-columns:repeat(5,1fr) !important}
.spotify-card{min-width:0}
.spotify-now{display:flex;gap:10px;align-items:center}
.spotify-cover{
  width:64px;height:64px;border-radius:10px;object-fit:cover;
  background:#102233;border:1px solid #23465e;flex:0 0 64px
}
.spotify-cover[src=""]{visibility:hidden}
.spotify-meta{min-width:0;flex:1}
.spotify-title{
  font-size:18px!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:3px
}
.spotify-progress{
  height:5px;background:#143047;border-radius:6px;overflow:hidden;margin-top:12px
}
.spotify-progress i{
  display:block;height:100%;width:0;background:#1ed760;border-radius:6px
}
.spotify-time{
  display:flex;justify-content:space-between;color:#7f9caf;font-size:8px;margin-top:4px
}
#spotifyBadge.online{color:#1ed760;border-color:#1ed760}
#spotifyBadge.paused{color:#f6c85f;border-color:#f6c85f}
@media(max-width:1400px){
  .hero-grid{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:1100px){
  .hero-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:720px){
  .hero-grid{grid-template-columns:1fr!important}
}

/* V6.5 Spotify controls */
.spotify-controls{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
  margin-top:8px;
}
.spotify-controls button{
  border:1px solid #28506a;
  background:#091923;
  color:#fff;
  border-radius:9px;
  min-height:34px;
  font-size:15px;
  cursor:pointer;
}
.spotify-controls button:active{
  transform:scale(.96);
}

/* V7 MAX tools */
.tools-panel{
  margin-top:10px;
  background:linear-gradient(180deg,rgba(11,27,41,.96),rgba(7,19,30,.96));
  border:1px solid #18364d;
  border-radius:16px;
  padding:14px;
  box-shadow:0 16px 45px rgba(0,0,0,.18);
}
.tools-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.tool-card{
  background:#091722;
  border:1px solid #1c3a50;
  border-radius:12px;
  padding:12px;
}
.tool-card h4{
  margin:0 0 10px;
  font-size:13px;
  color:#6cc1ff;
}
.tool-line{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:6px;
}
.tool-card input,.tool-card select{
  width:100%;
  background:#06121c;
  color:#eaf6ff;
  border:1px solid #28465a;
  border-radius:8px;
  padding:8px;
  font-size:11px;
}
.tool-buttons{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  margin-top:8px;
}
.tool-buttons.stack{
  grid-template-columns:1fr;
}
.tool-buttons button{
  border:1px solid #2b5069;
  background:#0b1b28;
  color:#edf7ff;
  border-radius:8px;
  padding:8px;
  font-size:11px;
}
.tool-card pre{
  white-space:pre-wrap;
  word-break:break-word;
  background:#06121c;
  border:1px solid #173246;
  border-radius:8px;
  padding:8px;
  min-height:54px;
  margin:8px 0 0;
  font-size:9px;
  color:#a9c4d7;
}
@media(max-width:1100px){
  .tools-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .tools-grid{grid-template-columns:1fr}
}