:root{--bg:#050810;--c:#0a0d15;--b:#161d2a;--t:#8898b4;--t2:#3a4860;--ig:#38b5f9;--ign:#f57c20;--ok:#42e898;--er:#ff4466;--gd:#d4a94a;--kon:#ff2d75;--mus:#2dd4ff}
*{margin:0;box-sizing:border-box;font-family:'Courier New',monospace}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--t)}
body{display:grid;grid-template:32px 1fr 22px/1fr;gap:0}
.hdr{background:var(--c);border-bottom:1px solid var(--b);display:flex;align-items:center;padding:0 10px;gap:8px;font-size:9px}
.dock{display:flex;gap:1px;min-height:0;overflow:hidden}
.ftr{background:#030508;border-top:1px solid var(--b);display:flex;align-items:center;padding:0 10px;gap:6px;font-size:7px;color:var(--t2)}
.pane{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;background:var(--bg);border:1px solid var(--b)}
.pane-bar{height:22px;flex-shrink:0;display:flex;align-items:center;gap:6px;padding:0 8px;font-size:8px;border-bottom:1px solid var(--b)}
.pane-bar.kon{background:rgba(255,45,117,.06);color:var(--kon)}
.pane-bar.mus{background:rgba(45,212,255,.06);color:var(--mus)}
.pane iframe{flex:1;width:100%;border:none;background:#000;min-height:0}
.dot{width:5px;height:5px;border-radius:50%;display:inline-block}
.dot.on{background:var(--ok)}.dot.off{background:var(--er)}
.btn{background:var(--b);border:1px solid var(--t2);color:var(--t);padding:1px 6px;border-radius:2px;font-size:7px;cursor:pointer;font-family:inherit;text-decoration:none}
.btn:hover{border-color:var(--ig);color:var(--ig)}
.btn.kon{border-color:rgba(255,45,117,.4);color:var(--kon)}.btn.kon:hover{background:rgba(255,45,117,.1)}
.btn.mus{border-color:rgba(45,212,255,.4);color:var(--mus)}.btn.mus:hover{background:rgba(45,212,255,.1)}
.stat-pill{padding:1px 4px;border-radius:2px;font-size:6px;font-weight:600;letter-spacing:.3px}
/* ── Mobile layout ─────────────────────────────────────────────── */
@media(max-width:700px){
  /* body becomes scrollable column; header shrinks */
  html,body{overflow:auto;height:auto}
  body{grid-template:auto 1fr auto/1fr}
  .hdr{height:auto;min-height:36px;flex-wrap:wrap;padding:5px 8px;gap:5px;overflow-x:auto}
  .hdr>a,.hdr>button,.hdr>.btn{min-height:32px;padding:4px 10px;font-size:8px}
  /* dock stacks; only the active pane is shown */
  .dock{flex-direction:column;overflow:visible;height:auto}
  .pane{min-height:80vh;display:none}
  .pane.mob-active{display:flex}
  .pane-bar{height:36px;padding:0 10px}
  .pane-bar .btn,.pane-bar a.btn{min-height:28px;padding:3px 10px;font-size:8px}
  .pane iframe{flex:1;min-height:75vh}
  /* footer wraps */
  .ftr{height:auto;flex-wrap:wrap;padding:4px 8px}
}
/* mobile tab bar — hidden on desktop */
.mob-tabs{display:none}
@media(max-width:700px){
  .mob-tabs{
    display:flex;background:var(--c);border-top:1px solid var(--b);
    padding:4px 6px;gap:4px;position:sticky;bottom:0;z-index:100
  }
  .mob-tab{
    flex:1;display:flex;flex-direction:column;align-items:center;
    gap:2px;padding:6px 4px;font-size:8px;cursor:pointer;
    border-radius:3px;color:var(--t2);border:1px solid transparent;
    line-height:1.2;user-select:none;-webkit-tap-highlight-color:transparent
  }
  .mob-tab .tab-icon{font-size:14px}
  .mob-tab.active{background:rgba(255,255,255,.04);color:var(--t)}
  .mob-tab.kon.active{color:var(--kon);border-color:rgba(255,45,117,.3);background:rgba(255,45,117,.07)}
  .mob-tab.mus.active{color:var(--mus);border-color:rgba(45,212,255,.3);background:rgba(45,212,255,.07)}
}
/* ── Landscape phone (short viewport, wide) ─────────────────────── */
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
  /* keep the whole thing on-screen without scrolling */
  html,body{overflow:hidden;height:100%}
  body{grid-template:28px 1fr 18px/1fr}
  .hdr{min-height:28px;padding:2px 8px;gap:6px;flex-wrap:nowrap;overflow-x:auto}
  .hdr>a,.hdr>button,.hdr>.btn{min-height:24px;padding:2px 8px;font-size:7px}
  /* dock is a row; panes sit side-by-side so both are visible */
  .dock{flex-direction:row;height:100%;overflow:hidden}
  /* on landscape: show all panes again (tab-switching off) */
  .pane{display:flex;min-height:0;min-width:0}
  .pane-bar{height:24px;padding:0 8px}
  .pane iframe{min-height:0}
  .ftr{height:18px;flex-wrap:nowrap;padding:0 8px;overflow:hidden}
  /* hide the tab bar — not needed when both panes are visible */
  .mob-tabs{display:none !important}
}