*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', sans-serif;
  background: #0f1117;
  color: #e0e0e0;
  height: 100dvh;
  overflow: hidden;
}

.layout {
  display: flex;
  height: 100dvh;
}

/* ── Sidebar ── */
.sidebar {
  width: 220px;
  min-width: 180px;
  background: #1a1d27;
  border-right: 1px solid #2a2d3a;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}

.sidebar h2 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
  padding: 0 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#device-list {
  list-style: none;
  flex: 1;
  overflow-y: auto;
}

#device-list li {
  padding: 10px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  transition: background 0.15s;
}

#device-list li:hover { background: #22263a; }
#device-list li.active { background: #22263a; border-left-color: #4f8ef7; }

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot.online  { background: #22c55e; box-shadow: 0 0 6px #22c55e88; }
.dot.offline { background: #ef4444; }
.dot.unknown { background: #555; }

/* ── Main panel ── */
.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
}

#no-selection {
  margin: auto;
  color: #444;
  font-size: 1rem;
}

.hidden { display: none !important; }

#device-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
}

.device-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 600;
}

.badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
}
.badge.online   { background: #14532d; color: #22c55e; }
.badge.offline  { background: #3b0f0f; color: #ef4444; }
.badge.checking { background: #1e2130; color: #888; }

.icon-btn {
  background: #1e2130;
  border: 1px solid #2e3248;
  color: #aaa;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 0.75rem;
  cursor: pointer;
}
.icon-btn:hover { background: #2a2f4a; color: #fff; }

.command-bar {
  display: flex;
  gap: 8px;
}

select, input, button {
  background: #1e2130;
  border: 1px solid #2e3248;
  color: #e0e0e0;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.88rem;
  cursor: pointer;
}

select { flex: 1; }
#file-path { flex: 1.5; cursor: text; }

button#send-btn {
  background: #4f8ef7;
  border-color: #4f8ef7;
  color: #fff;
  font-weight: 600;
  transition: background 0.15s;
}
button#send-btn:hover { background: #3a7ae0; }
button#send-btn:disabled { background: #2a3a5a; border-color: #2a3a5a; cursor: not-allowed; }

.console-label { font-size: 0.72rem; color: #555; text-transform: uppercase; letter-spacing: 0.08em; }

#console {
  flex: 1;
  background: #0a0c12;
  border: 1px solid #1e2130;
  border-radius: 8px;
  padding: 14px;
  overflow-y: auto;
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #a8d8a8;
}

.cmd-entry { margin-bottom: 16px; border-bottom: 1px solid #1a1d27; padding-bottom: 12px; }
.cmd-entry .cmd-meta { color: #4f8ef7; margin-bottom: 4px; font-size: 0.75rem; }
.cmd-entry .cmd-status { color: #f59e0b; font-size: 0.75rem; margin-bottom: 6px; }
.cmd-entry .cmd-status.completed { color: #22c55e; }
.cmd-entry .cmd-status.error     { color: #ef4444; }
.cmd-entry pre { white-space: pre-wrap; word-break: break-word; color: #c8ffc8; }
.cmd-entry img { max-width: 100%; border-radius: 6px; margin-top: 6px; border: 1px solid #2a2d3a; }
.cmd-entry a.dl-link {
  display: inline-block;
  margin-top: 6px;
  color: #4f8ef7;
  text-decoration: underline;
  font-size: 0.82rem;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; min-width: unset; border-right: none; border-bottom: 1px solid #2a2d3a; padding: 10px 0; max-height: 38vh; }
  .panel { padding: 14px; }
  .command-bar { flex-wrap: wrap; }
  #file-path { min-width: 100%; }
}