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

[hidden] { display: none; }

:root {
	--bg:        #1a1a1e;
	--surface:   #25252b;
	--surface2:  #2e2e36;
	--border:    #3a3a44;
	--text:      #e0e0e8;
	--text-dim:  #888898;
	--accent:    #5b8af0;
	--accent2:   #3a5cc0;
	--ok:        #4caf80;
	--warn:      #e0a030;
	--err:       #e05050;
	--radius:    6px;
	--font-mono: 'Cascadia Code', 'Fira Mono', monospace;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, sans-serif;
	font-size: 14px;
	display: flex;
	flex-direction: column;
	height: 100dvh;
	overflow: hidden;
}

/* -- Top bar --------------------------------------------------------------- */

#topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}

#topbar h1 { font-size: 15px; font-weight: 600; }

#status-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--err);
	transition: background 0.3s;
}
#status-dot.ok { background: var(--ok); }

#status-text { font-size: 12px; color: var(--text-dim); margin-right: auto; }

/* -- Buttons + inputs ------------------------------------------------------ */

button {
	padding: 5px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface2);
	color: var(--text);
	font-size: 13px;
	cursor: pointer;
}
button:hover { background: var(--border); }
button.primary { background: var(--accent2); border-color: var(--accent); }
button.primary:hover { background: var(--accent); }
button.compact { font-size: 11px; padding: 2px 8px; }

input[type=text], input[type=number] {
	padding: 5px 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface2);
	color: var(--text);
	font-size: 13px;
}

/* -- Main layout ----------------------------------------------------------- */

#main {
	display: grid;
	grid-template-columns: 200px 260px 1fr;
	flex: 1;
	overflow: hidden;
}

/* -- Shared panel ---------------------------------------------------------- */

.panel {
	background: var(--surface);
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.panel:last-child { border-right: none; background: var(--bg); }

.panel > h2 {
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-dim);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* -- Node panel ------------------------------------------------------------ */

#node-list { overflow-y: auto; flex: 1; }

.node-item {
	padding: 9px 14px;
	cursor: pointer;
	border-left: 3px solid transparent;
	transition: background 0.1s;
}
.node-item:hover { background: var(--surface2); }
.node-item.selected {
	background: var(--surface2);
	border-left-color: var(--accent);
}
.node-item .n-name { font-size: 13px; font-weight: 500; }
.node-item .n-addr {
	font-size: 11px;
	color: var(--text-dim);
	font-family: var(--font-mono);
	margin-top: 2px;
}

#manual-connect {
	display: flex;
	gap: 4px;
	padding: 8px 10px;
	border-top: 1px solid var(--border);
	flex-shrink: 0;
}
#manual-connect input[type=text]   { flex: 1; min-width: 0; }
#manual-connect input[type=number] { width: 60px; }
#manual-connect button { padding: 5px 8px; }

/* -- Device panel ---------------------------------------------------------- */

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

.device-group { padding: 8px 0 4px; }

.device-group-header {
	padding: 4px 14px;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.device-item {
	padding: 8px 14px;
	cursor: pointer;
	border-left: 3px solid transparent;
	transition: background 0.1s;
}
.device-item:hover { background: var(--surface2); }
.device-item.selected {
	background: var(--surface2);
	border-left-color: var(--accent);
}

.device-item .d-path {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--accent);
}
.device-item .d-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.device-item .d-caps {
	font-size: 10px;
	color: var(--text-dim);
	margin-top: 2px;
	font-family: var(--font-mono);
}

.capture-badge {
	display: inline-block;
	font-size: 9px;
	padding: 1px 5px;
	border-radius: 3px;
	background: var(--accent2);
	color: #fff;
	margin-left: 6px;
	vertical-align: middle;
}

/* -- Controls panel -------------------------------------------------------- */

#controls-scroll { overflow-y: auto; flex: 1; padding: 12px 16px; }

.continuous-label {
	font-weight: 400;
	font-size: 11px;
	display: flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.ctrl-group { margin-bottom: 16px; }

.ctrl-group-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-dim);
	padding: 4px 0 8px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 8px;
}

.ctrl-row {
	display: grid;
	grid-template-columns: 200px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--border);
}
.ctrl-row:last-child { border-bottom: none; }
.ctrl-row.disabled { opacity: 0.45; pointer-events: none; }
.ctrl-row.readonly { opacity: 0.65; }
.ctrl-row.readonly .ctrl-input { pointer-events: none; }

.ctrl-label { font-size: 13px; }
.ctrl-value-display {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-dim);
	text-align: right;
	min-width: 60px;
}

.ctrl-input { width: 100%; }
.ctrl-input button { width: 100%; }

input[type=range] { width: 100%; accent-color: var(--accent); }

select {
	padding: 4px 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface2);
	color: var(--text);
	font-size: 13px;
	width: 100%;
}

input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }

/* -- Toasts ---------------------------------------------------------------- */

#toast-container {
	position: fixed; bottom: 16px; right: 16px;
	display: flex; flex-direction: column; gap: 6px;
	pointer-events: none; z-index: 100;
}
.toast {
	padding: 8px 14px;
	border-radius: var(--radius);
	font-size: 13px;
	background: var(--surface2);
	border: 1px solid var(--border);
	opacity: 1;
	transition: opacity 0.4s;
}
.toast.err { border-color: var(--err); color: var(--err); }
.toast.ok  { border-color: var(--ok);  color: var(--ok);  }
.toast.fading { opacity: 0; }

/* -- Empty states ---------------------------------------------------------- */

.empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--text-dim);
	font-size: 13px;
}