.webos-panel { min-width: 0; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line, #39434f); }
.webos-header, .webos-toolbar, .webos-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.webos-header { cursor: pointer; list-style: none; margin: 0; }
.webos-header::-webkit-details-marker { display: none; }
.webos-title { font-size: 18px; font-weight: 700; }
.webos-title::before { content: '▸ '; color: var(--muted, #a0adba); }
.webos-panel[open] > .webos-header .webos-title::before { content: '▾ '; }
.webos-content { padding-top: 12px; }
.webos-panel p, .webos-panel small, #webos-connection, #webos-new { color: var(--muted, #a0adba); font-size: 12px; margin: 8px 0; }
.webos-tools, .webos-tabs, .webos-live, .webos-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.webos-panel .button { font-size: 12px; padding: 7px 9px; }
.webos-tools select { max-width: 100%; padding: 7px; background: var(--panel2, #222b34); color: inherit; border: 1px solid var(--line, #39434f); border-radius: 5px; font: inherit; font-size: 12px; }
.webos-tabs [aria-pressed="true"], #webos-follow[aria-pressed="true"] { background: #293b49; border-color: #638298; color: var(--text, #e7ebef); }
.webos-info { margin: 8px 0 12px; font-size: 12px; }
.webos-info summary { cursor: pointer; color: var(--muted, #a0adba); }
#webos-device-info { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.webos-toolbar { margin: 12px 0 8px; }
.webos-table-wrap { height: clamp(170px, 22dvh, 270px); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line, #39434f); border-radius: 6px; scrollbar-gutter: stable; }
.webos-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12px; }
.webos-table th, .webos-table td { padding: 8px; border-bottom: 1px solid var(--line, #303a45); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.webos-table th { position: sticky; top: 0; background: var(--panel, #181e24); z-index: 1; }
.webos-table th:first-child { width: 76px; }
.webos-table th:nth-child(2) { width: 115px; }
.webos-table summary { cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.webos-table summary::before { content: '▸ '; color: var(--muted, #a0adba); }
.webos-table details[open] summary::before { content: '▾ '; }
.webos-table details[open] summary { color: var(--cyan, #a2bbcc); }
.webos-table dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; margin: 10px 0 0; }
.webos-table dt { color: var(--muted, #a0adba); }
.webos-table dd { margin: 0; white-space: pre-wrap; user-select: text; }
#webos-empty { padding: 12px; }
.webos-footer { margin-top: 8px; }
.webos-pagination { font-size: 12px; }
main > .side-column { align-self: start; align-content: start; position: static; }
@media (min-width: 981px) {
  .hero:has(#webos-panel[open][data-active="true"]) .video-wrap { height: min(30dvh, 320px); aspect-ratio: auto; }
}
@media (max-width: 600px) { .webos-table th:nth-child(2) { width: 82px; } .webos-table th:first-child { width: 65px; } .webos-table dl { grid-template-columns: 1fr; } .webos-table dd { margin-bottom: 5px; } }