:root{
  --bg:#0b0d10; --panel:#14181d; --line:#242b33; --fg:#e6ebf0; --muted:#8b97a5;
  --accent:#4c8dff; --ok:#3ddc84; --warn:#ffb020; --err:#ff5c5c;
}
*{box-sizing:border-box}
/* display:flex gibi kurallar `hidden` özniteliğini ezer; gizleme her zaman kazanmalı. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
}

/* ---------------- giriş paneli ---------------- */
.panel{
  max-width:380px; margin:12vh auto; padding:28px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
}
.panel h1{margin:0 0 4px; font-size:19px; font-weight:600; letter-spacing:-.01em}
.hint{margin:0 0 20px; color:var(--muted); font-size:13px}
.panel label{display:block; margin-bottom:14px; font-size:12px; color:var(--muted)}
.panel label.row{display:flex; align-items:center; gap:8px; color:var(--fg); font-size:13px}
.panel label.row input{width:auto; margin:0}
.panel input[type=text],.panel input[type=password],.panel input:not([type]){
  display:block; width:100%; margin-top:5px; padding:9px 11px;
  background:#0e1216; color:var(--fg);
  border:1px solid var(--line); border-radius:8px; font-size:14px;
}
.panel input:focus{outline:none; border-color:var(--accent)}
.panel button{
  width:100%; margin-top:8px; padding:11px;
  background:var(--accent); color:#fff; border:0; border-radius:8px;
  font-size:14px; font-weight:600; cursor:pointer;
}
.panel button:hover{filter:brightness(1.08)}
.error{
  margin-top:14px; padding:10px 12px; border-radius:8px; font-size:13px;
  background:rgba(255,92,92,.12); color:#ffb4b4; border:1px solid rgba(255,92,92,.3);
}

/* ---------------- sahne ---------------- */
#stage{display:flex; flex-direction:column; height:100%}
#bar{
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  padding:7px 12px; background:var(--panel); border-bottom:1px solid var(--line);
  font-size:12px;
}
.spacer{flex:1}
.dot{width:8px; height:8px; border-radius:50%; background:var(--muted); flex-shrink:0}
.dot.live{background:var(--ok); box-shadow:0 0 8px rgba(61,220,132,.6)}
.dot.wait{background:var(--warn)}
.dot.down{background:var(--err)}
#status{color:var(--muted)}
.stats{color:var(--muted); font-variant-numeric:tabular-nums; font-size:11px}
#bar button{
  padding:5px 10px; background:#1d232a; color:var(--fg);
  border:1px solid var(--line); border-radius:6px; font-size:12px; cursor:pointer;
}
#bar button:hover{background:#262e37}
#bar button.off{color:var(--muted)}

#screen{position:relative; flex:1; min-height:0; background:#000}
#video{
  display:block; width:100%; height:100%; object-fit:contain;
  background:#000; cursor:default;
}
#video.grabbing{cursor:none}

.overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(11,13,16,.82); color:var(--muted); font-size:14px; text-align:center;
  padding:24px; white-space:pre-line;
  /* Kaplama tam ekranı örter; pointer-events olmadan videonun üstündeki
     tıklamaları yutar ve uzaktan kontrol sessizce çalışmaz. */
  pointer-events:none;
}
#tips{
  flex-shrink:0; padding:6px 12px; color:var(--muted); font-size:11px;
  background:var(--panel); border-top:1px solid var(--line);
}
kbd{
  padding:1px 5px; border:1px solid var(--line); border-bottom-width:2px;
  border-radius:4px; background:#1d232a; font-size:10px; font-family:ui-monospace,monospace;
}
:fullscreen #tips,:fullscreen #bar{display:none}