:root{
  --bg:#0b0f14; --panel:#141b24; --panel2:#1c2733; --text:#e8eef5;
  --muted:#8ea0b5; --accent:#ff7a18; --accent2:#2b6cff; --ok:#27c093; --err:#ff5d5d;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-user-select:none; user-select:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen{min-height:100dvh;display:flex;flex-direction:column}
.hidden{display:none !important}

/* LOGIN */
#login{align-items:center;justify-content:center;gap:16px;padding:24px}
.brand{font-size:30px;font-weight:800;letter-spacing:.5px}
.brand::first-letter{color:var(--accent)}
.hint{color:var(--muted);text-align:center;max-width:320px;margin:0}
#code{
  width:220px;text-align:center;font-size:38px;letter-spacing:12px;
  padding:14px;border-radius:14px;border:1px solid #2a3846;background:var(--panel);color:var(--text)
}
#connect{
  background:var(--accent);color:#111;border:0;border-radius:14px;
  font-size:18px;font-weight:700;padding:14px 40px
}
.err{color:var(--err);min-height:20px;font-size:14px}

/* CONTROL */
.bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel)}
.bar #devName{font-weight:700;flex:0 0 auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:10px;height:10px;border-radius:50%;background:var(--err)}
.dot.on{background:var(--ok)}
.ghost{margin-left:auto;background:transparent;border:1px solid #33465a;color:var(--text);border-radius:10px;padding:8px 14px}

#viewport{position:relative;background:#000;flex:1 1 auto;display:flex;align-items:center;justify-content:center;overflow:hidden}
#frame{max-width:100%;max-height:100%;display:block;-webkit-touch-callout:none}
#noSignal{position:absolute;color:var(--muted);font-size:15px}
#viewport.has-signal #noSignal{display:none}

/* PAD */
.pad{background:var(--panel);padding:14px;display:flex;flex-direction:column;gap:12px}
.dpad{
  display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px);
  gap:8px;justify-content:center
}
.key{
  background:var(--panel2);color:var(--text);border:1px solid #2a3846;border-radius:14px;
  font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation
}
.key:active{background:var(--accent);color:#111;transform:scale(.96)}
.dpad .up{grid-column:2;grid-row:1}
.dpad .left{grid-column:1;grid-row:2}
.dpad .ok{grid-column:2;grid-row:2;background:var(--accent2);color:#fff;border-radius:50%}
.dpad .right{grid-column:3;grid-row:2}
.dpad .down{grid-column:2;grid-row:3}
.row{display:flex;gap:8px}
.key.wide{flex:1;height:52px}
#textInput{flex:1;background:var(--panel2);border:1px solid #2a3846;color:var(--text);border-radius:12px;padding:0 14px;font-size:16px}
#sendText{padding:0 20px;height:48px}