:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #07111f;
  color: #e7eef9;
  --surface: #0c192a;
  --surface-2: #122238;
  --border: #263a55;
  --muted: #91a3bd;
  --accent: #29a8ff;
  --accent-2: #167ccc;
  --ok: #37c98b;
  --warning: #f2bc57;
  --danger: #f06464;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 10% 0, #112c4b 0, #07111f 42%); }
button, input, select, textarea { font: inherit; }
button, input, select, textarea {
  color: inherit;
  background: #0b1727;
  border: 1px solid var(--border);
  border-radius: 7px;
}
button { padding: .58rem .85rem; cursor: pointer; font-weight: 650; }
button:hover:not(:disabled) { border-color: var(--accent); background: #102945; }
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .48; cursor: not-allowed; }
input, select, textarea { padding: .58rem .7rem; }
textarea { width: 100%; resize: vertical; }
label { display: flex; flex-direction: column; gap: .35rem; color: var(--muted); font-size: .9rem; }
.check { flex-direction: row; align-items: center; gap: .5rem; color: #d8e4f5; }
.check input { accent-color: var(--accent); }
.primary { background: var(--accent-2); border-color: #36adff; }
.danger { color: #ffdede; border-color: #8f4249; background: #421e26; }
.compact { padding: .3rem .55rem; font-size: .8rem; }
.muted { color: var(--muted); }
.error { color: #ff9292; min-height: 1.3em; }
.grow { flex: 1 1 22rem; }
.separator { flex: 1 1 auto; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--border);
  background: rgba(7, 17, 31, .94); backdrop-filter: blur(12px);
}
.topbar > div { display: flex; gap: .75rem; align-items: center; }
.connection-state { font-size: .9rem; }
.status-dot { width: .65rem; height: .65rem; border-radius: 50%; background: #718097; box-shadow: 0 0 0 3px #71809725; }
.status-dot.connecting { background: var(--warning); box-shadow: 0 0 0 3px #f2bc5730; }
.status-dot.connected { background: var(--ok); box-shadow: 0 0 0 3px #37c98b30; }
.status-dot.error { background: var(--danger); box-shadow: 0 0 0 3px #f0646430; }

main { padding: 1.2rem; }
.login-card {
  width: min(29rem, calc(100vw - 2rem)); margin: 7vh auto;
  padding: 1.6rem; border: 1px solid var(--border); border-radius: 14px;
  background: linear-gradient(145deg, #10223a, var(--surface)); box-shadow: 0 24px 70px #0008;
}
.login-card h1 { margin: .25rem 0 .6rem; font-size: 1.8rem; }
.login-card form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.eyebrow { margin: 0; color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

#workspace { max-width: 1500px; margin: 0 auto; }
.tabs { display: flex; gap: .35rem; overflow-x: auto; border-bottom: 1px solid var(--border); }
.tab { border: 0; border-radius: 7px 7px 0 0; color: var(--muted); background: transparent; }
.tab.active { color: white; background: var(--surface-2); box-shadow: inset 0 -2px var(--accent); }
.consent { display: flex; gap: .8rem; align-items: baseline; margin: .9rem 0; padding: .75rem 1rem; border: 1px solid #71572b; border-radius: 8px; background: #392b13; }
.consent.granted { border-color: #267453; background: #123728; }
.consent.denied { border-color: #8f4249; background: #421e26; }
.panel { display: none; min-height: 35rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 10px 10px; }
.panel.active { display: block; }
.panel.narrow { max-width: 62rem; }
.toolbar { display: flex; align-items: end; gap: .65rem; margin-bottom: .9rem; }
.toolbar.wrap { flex-wrap: wrap; }
.toolbar label { min-width: 7rem; }
.status-line { min-height: 1.3em; }

.screen-stage { position: relative; min-height: 26rem; display: grid; place-items: center; overflow: auto; background: #02060b; border: 1px solid var(--border); border-radius: 8px; }
#screen-canvas { display: block; max-width: 100%; max-height: calc(100vh - 16rem); outline: none; image-rendering: auto; }
#screen-canvas.control-active { cursor: none; box-shadow: 0 0 0 2px var(--accent); }
.remote-cursor { position: absolute; width: 16px; height: 21px; pointer-events: none; transform: translate(-1px, -1px); filter: drop-shadow(0 1px 1px #000); }
.remote-cursor::before { content: ""; display: block; width: 0; height: 0; border-top: 15px solid white; border-right: 10px solid transparent; transform: rotate(-12deg); }
#screen-placeholder { position: absolute; color: var(--muted); pointer-events: none; }

.root-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.root-list button { font-size: .85rem; }
.drop-zone { margin: .8rem 0; padding: 1rem; text-align: center; border: 1px dashed #537297; border-radius: 8px; color: var(--muted); }
.drop-zone.drag { border-color: var(--accent); color: white; background: #123454; }
.file-table { width: 100%; border-collapse: collapse; }
.file-table th, .file-table td { padding: .58rem; border-bottom: 1px solid #1d3048; text-align: left; }
.file-table th { color: var(--muted); font-size: .78rem; text-transform: uppercase; }
.file-name { color: #9bd5ff; background: transparent; border: 0; padding: 0; text-align: left; }
.transfer-list { display: grid; gap: .45rem; margin-top: .8rem; }
.transfer { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .7rem; border-radius: 7px; background: var(--surface-2); font-size: .85rem; }

.terminal-tabs { display: flex; gap: .35rem; overflow-x: auto; min-height: 2.35rem; }
.terminal-tab { display: flex; align-items: center; gap: .55rem; border-radius: 6px 6px 0 0; }
.terminal-tab.active { border-color: var(--accent); background: #173654; }
.terminal-tab .close { padding: 0; border: 0; color: #ffb0b0; background: transparent; }
.terminal-host { height: 30rem; padding: .4rem; background: #000; border: 1px solid var(--border); }
.terminal-pane { width: 100%; height: 100%; }
.terminal-pane[hidden] { display: none; }
.terminal-pane .xterm { height: 100%; }
.empty-terminal { color: #78899f; padding: 1rem; }
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(12rem, 1fr)); gap: .8rem; margin-top: 1rem; }
.toast { position: fixed; right: 1rem; bottom: 1rem; max-width: 30rem; padding: .75rem 1rem; background: #173654; border: 1px solid #3e779f; border-radius: 8px; box-shadow: 0 12px 35px #0009; z-index: 50; }

@media (max-width: 720px) {
  main { padding: .6rem; }
  .topbar { align-items: flex-start; gap: .5rem; }
  .topbar > div:first-child { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .consent { flex-direction: column; }
  .panel { padding: .65rem; }
  .action-grid { grid-template-columns: 1fr; }
  .file-table th:nth-child(3), .file-table td:nth-child(3), .file-table th:nth-child(4), .file-table td:nth-child(4) { display: none; }
}