* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: #1a1a1d; color: #eaeaea; }
body { display: flex; flex-direction: column; height: 100vh; }

header { padding: 0.6rem 1rem; background: #101012; border-bottom: 1px solid #2a2a2e; display: flex; align-items: center; gap: 1rem; }
header h1 { font-size: 1rem; font-weight: 600; margin: 0; letter-spacing: 0.02em; }
.status { font-size: 0.75rem; padding: 0.15rem 0.45rem; border-radius: 4px; background: #4a1f1f; color: #f3b3b3; }
.status.connected { background: #1f4a23; color: #b6f0bb; }

main { flex: 1; display: flex; min-height: 0; }

aside#channels { width: 280px; background: #131316; border-right: 1px solid #2a2a2e; overflow-y: auto; }
aside#channels h2 { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin: 0.8rem 1rem 0.4rem; }
aside ul { list-style: none; margin: 0; padding: 0; }
aside li { padding: 0.55rem 1rem; cursor: pointer; border-left: 3px solid transparent; display: flex; justify-content: space-between; gap: 0.5rem; }
aside li:hover { background: #1c1c20; }
aside li.active { background: #21232b; border-left-color: #4f8cff; }
aside li .name { font-size: 0.9rem; }
aside li .meta { font-size: 0.7rem; color: #888; }
aside li .badge { display: inline-block; min-width: 1.5rem; text-align: center; font-size: 0.7rem; padding: 0.05rem 0.35rem; border-radius: 3px; background: #2c2c33; color: #c4c4cc; }
aside li .badge.live { background: #1f4a23; color: #b6f0bb; }

section#detail { flex: 1; display: flex; flex-direction: column; min-width: 0; }
header#detail-header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; background: #131316; border-bottom: 1px solid #2a2a2e; }
#detail-title { font-size: 0.95rem; margin: 0; }
nav#tabs { display: flex; gap: 0.25rem; }
nav#tabs button { font-family: inherit; background: transparent; color: #aaa; border: 1px solid transparent; padding: 0.3rem 0.7rem; border-radius: 4px; cursor: pointer; font-size: 0.8rem; }
nav#tabs button:hover { color: #fff; background: #21232b; }
nav#tabs button.active { background: #21232b; color: #fff; border-color: #2f3340; }

.tab { display: none; padding: 1rem; overflow: auto; flex: 1; min-height: 0; }
.tab.active { display: block; }
#tab-preview.active { display: flex; flex-direction: column; }
#preview-bar { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
#preview-url { color: #aaa; font-size: 0.78rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#preview-scripts-label { color: #aaa; font-size: 0.78rem; display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }
#preview-open { color: #7eb6ff; font-size: 0.78rem; text-decoration: none; padding: 0.25rem 0.55rem; border-radius: 4px; background: #2c3445; }
#preview-open:hover { background: #3a4763; text-decoration: underline; }
#preview-frame { flex: 1; width: 100%; min-height: 400px; background: #000; border: 1px solid #2a2a2e; border-radius: 4px; }
.hint { color: #888; font-size: 0.8rem; margin: 0 0 0.8rem; }
.hint.warn { color: #f0c97e; background: #2a2418; border: 1px solid #4a3f1f; padding: 0.5rem 0.7rem; border-radius: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { padding: 0.45rem 0.6rem; text-align: left; border-bottom: 1px solid #23232a; vertical-align: top; }
th { background: #1a1a1f; color: #aaa; font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
tr:hover td { background: #1c1c22; }
td.url a { color: #7eb6ff; text-decoration: none; word-break: break-all; }
td.url a:hover { text-decoration: underline; }
td.mono, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.78rem; }
td.actions button { background: #2c3445; color: #cfe1ff; border: 0; border-radius: 4px; padding: 0.25rem 0.55rem; font-size: 0.75rem; cursor: pointer; }
td.actions button:hover { background: #3a4763; }

.tag { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 3px; font-size: 0.7rem; background: #2c2c33; color: #d0d0d8; margin-right: 0.25rem; }
.tag.autostart { background: #1f4a23; color: #b6f0bb; }
.tag.present { background: #1f3a4a; color: #b6d6f0; }
.tag.kill { background: #4a1f1f; color: #f0b6b6; }
.tag.ok { background: #1f4a23; color: #b6f0bb; }
.tag.err { background: #4a1f1f; color: #f0b6b6; }

details { background: #18181d; border: 1px solid #23232a; border-radius: 4px; padding: 0.4rem 0.6rem; margin-top: 0.5rem; }
details summary { cursor: pointer; font-size: 0.78rem; color: #aaa; }
pre { white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.72rem; color: #b8b8c4; margin: 0.5rem 0 0; }

.empty { color: #777; font-style: italic; padding: 2rem; text-align: center; }