:root {
  color-scheme: dark;
  --bg: #10151f;
  --panel: #182230;
  --panel-2: #202c3b;
  --text: #f4f7fb;
  --muted: #a9b5c4;
  --line: #304054;
  --accent: #3ddc97;
  --danger: #ff5d5d;
}
* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, sans-serif; background: var(--bg); color: var(--text); }
button, input { font: inherit; }
button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--accent);
  color: #06130d;
  font-weight: 700;
}
button:disabled { opacity: .45; }
input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #0c1119;
  color: var(--text);
}
label { display: grid; gap: 6px; color: var(--muted); }
.hidden { display: none !important; }
.auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.panel { width: min(420px, 100%); display: grid; gap: 16px; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.panel h1 { margin: 0 0 8px; font-size: 32px; }
.error { color: var(--danger); min-height: 20px; }
.notice { margin: 0 auto 10px; max-width: 980px; padding: 0 12px; color: var(--muted); min-height: 20px; }
.shell { min-height: 100vh; padding-bottom: 24px; }
.topbar, .remotebar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: env(safe-area-inset-top) 12px 10px; background: rgba(16,21,31,.95); border-bottom: 1px solid var(--line); }
.toolbar { display: flex; gap: 10px; padding: 12px; }
.ghost { background: var(--panel-2); color: var(--text); }
.danger { background: var(--danger); color: #210606; }
.device-list { display: grid; gap: 10px; padding: 0 12px; }
.device { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.device div { display: grid; gap: 4px; min-width: 0; }
.device span, .device small { color: var(--muted); overflow-wrap: anywhere; }
.remote { min-height: 100vh; display: grid; grid-template-rows: auto auto auto auto 1fr; }
.screen-wrap { position: relative; width: 100%; max-height: 56vh; overflow: auto; background: #000; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#screen { display: block; width: 100%; height: auto; background: #000; touch-action: pan-x pan-y; object-fit: contain; transform-origin: top left; }
.screen-wrap.fullscreen-view, .screen-wrap:fullscreen { width: 100vw; height: 100vh; max-height: none; background: #000; }
.screen-wrap.fullscreen-view #screen, .screen-wrap:fullscreen #screen { max-width: none; }
.screen-overlay { position: fixed; top: calc(env(safe-area-inset-top) + 10px); right: 10px; z-index: 10; display: flex; gap: 6px; align-items: center; }
.screen-overlay button { min-width: 44px; background: rgba(32, 44, 59, .95); color: var(--text); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.screen-overlay .danger { background: rgba(255, 93, 93, .95); color: #210606; }
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; background: var(--panel); border-block: 1px solid var(--line); }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.tabs button { border-radius: 0; background: var(--panel-2); color: var(--text); }
.tabs button.active { background: var(--accent); color: #06130d; }
.tab-panel { padding: 12px; display: grid; gap: 10px; }
.keygrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pathrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.file-list { display: grid; gap: 8px; }
.file { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel); color: var(--text); text-align: left; }
.file span { overflow-wrap: anywhere; }
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.metrics div { padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 4px; }
.metrics span { color: var(--muted); }
@media (min-width: 760px) {
  .device-list, .toolbar, .tab-panel { max-width: 980px; margin: 0 auto; width: 100%; }
  .screen-wrap { max-height: 68vh; }
  .controls { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .keygrid, .metrics { grid-template-columns: repeat(3, 1fr); }
}