:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  background: #0b0d11;
  color: #edf1f7;
  --panel: #12161d;
  --panel-2: #171c24;
  --line: #282f3a;
  --muted: #7f8998;
  --accent: #3478f6;
  --green: #35c982;
  --red: #ef6572;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { display: grid; grid-template-rows: 68px minmax(0, 1fr); overflow: hidden; background: #090b0f; }
button, input, select { font: inherit; }
button { color: inherit; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); background: #101319; }
.product { display: flex; align-items: center; gap: 11px; }
.logo-mark { width: 40px; height: 40px; display: block; object-fit: contain; border-radius: 10px; }
.product strong, .product small { display: block; }
.product strong { font-size: 17px; letter-spacing: -.2px; }
.product small { margin-top: 1px; color: var(--muted); font-size: 11px; }
.topbar-status { display: flex; align-items: center; gap: 8px; }
.top-action { padding: 7px 11px; border: 1px solid #344154; color: #dce8fb; background: #202a37; font-size: 10px; font-weight: 650; }
.top-action.admin-action { border-color: #365f9d; background: #244e87; }
.status-pill { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; background: #1b2029; }
.status-pill.online { border-color: #236944; background: #123625; color: #72e4aa; }
.status-pill.offline { border-color: #62323a; background: #351d22; color: #ff9ca6; }
.status-pill.relay { border-color: #735b28; background: #342a17; color: #ffd16d; }
.status-pill.direct { border-color: #285d7b; background: #142b39; color: #76d4ff; }
.status-pill.neutral { color: #9aa4b3; }

main { min-height: 0; display: grid; grid-template-columns: 236px 344px minmax(460px, 1fr); }
.sidebar, .inventory { min-height: 0; border-right: 1px solid var(--line); background: #0f1218; }
.sidebar { padding: 14px; overflow: auto; }
.login-panel, .tree-panel, .quick-connect-panel { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.tree-panel, .quick-connect-panel { margin-top: 12px; }
.quick-connect-panel > strong { display: block; font-size: 12px; }
.quick-connect-panel .primary { margin-bottom: 3px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 12px; font-weight: 700; }
.lock { color: #75dfa9; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
label { display: grid; gap: 5px; margin-top: 10px; color: #a9b2c0; font-size: 10px; }
input { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid #343c49; border-radius: 8px; outline: none; color: #edf1f7; background: #0b0e13; }
input:focus { border-color: #4b83e6; box-shadow: 0 0 0 3px #2c64c42e; }
select { min-width: 0; padding: 8px 9px; border: 1px solid #343c49; border-radius: 8px; outline: none; color: #edf1f7; background: #0b0e13; }
button { border: 0; border-radius: 8px; padding: 8px 10px; background: #29313d; cursor: pointer; }
button:hover:not(:disabled) { filter: brightness(1.12); }
button:disabled { opacity: .43; cursor: default; }
.primary { width: 100%; margin-top: 12px; background: var(--accent); font-weight: 700; }
.hint { margin: 9px 0 0; color: #6f7988; font-size: 9px; line-height: 1.4; }
.account-summary { display: grid; gap: 8px; }
.account-summary strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.account-summary span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; }
.account-identity { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; }
.account-identity strong, .account-identity span { display: block; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #dfeaff !important; background: #244d82; font-weight: 800; }
.account-role { width: max-content; padding: 4px 7px; border: 1px solid #30486b; border-radius: 999px; color: #a9c9ff !important; background: #172a44; font-size: 8px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.account-actions { display: grid; gap: 6px; margin-top: 4px; }
.nav-command { width: 100%; margin: 0 !important; padding: 8px 9px; text-align: left; color: #cbd5e4; background: #1b222c; font-size: 9px; }
.admin-command { color: #dfeaff; background: #244e87; }
.muted-command { color: #8994a3; background: transparent; }
.icon-button { padding: 3px 7px; color: #b5bfcd; background: transparent; font-size: 16px; }
.empty-tree { padding: 12px 8px; color: #697484; font-size: 10px; line-height: 1.45; }
.group-node, .tree-filter { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 31px; padding: 6px 8px; border-radius: 7px; font-size: 11px; }
.group-node { color: #e2e7ef; background: #1b222c; }
.group-node strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-node span, .tree-filter span { color: #7d8796; }
.tree-children { margin: 5px 0 0 13px; padding-left: 7px; border-left: 1px solid #333b47; }
.tree-filter { color: #98a2b1; cursor: pointer; }
.tree-filter.active { color: #dce9ff; background: #213553; }

.inventory { display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: #11151b; }
.inventory-header { display: grid; gap: 12px; padding: 16px 16px 11px; border-bottom: 1px solid var(--line); }
.inventory-header h1 { margin: 0; font-size: 16px; }
.inventory-header span { color: var(--muted); font-size: 10px; }
.search { padding-left: 30px; background: #0c1015 radial-gradient(circle at 14px 50%, #788394 0 2px, transparent 3px); }
.filters { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.filter { flex: 1; padding: 6px; color: #909baa; background: #181d25; font-size: 10px; }
.filter span { margin-left: 3px; color: #697484; }
.filter.active { color: #e5efff; background: #244b83; }
.agent-list { min-height: 0; overflow: auto; padding: 12px; display: grid; align-content: start; gap: 11px; }
.agent-card { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); transition: border-color .15s, transform .15s; }
.agent-card:hover { border-color: #3a4656; transform: translateY(-1px); }
.preview { position: relative; height: 130px; display: grid; place-items: center; overflow: hidden; background: #080a0d; }
.preview img { width: 100%; height: 100%; object-fit: cover; }
.preview-empty { color: #56606e; font-size: 10px; }
.online-label { position: absolute; top: 8px; left: 8px; padding: 4px 7px; border-radius: 999px; color: #bbc5d3; background: #202631dd; font-size: 9px; backdrop-filter: blur(4px); }
.online-label.online { color: #8bf1ba; background: #123d2ddd; }
.agent-content { padding: 11px; }
.agent-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.agent-heading strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.agent-meta { margin-top: 5px; display: grid; gap: 3px; color: #75808f; font-size: 9px; }
.agent-policy-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.policy-badge { padding: 3px 5px; border: 1px solid #30415a; border-radius: 999px; color: #9fb6d7; background: #172131; font-size: 8px; }
.wake-button { flex: 0 0 auto !important; background: #604819; color: #ffe2a0; }
.delete-agent-button { flex: 0 0 auto !important; background: #5b242c; color: #ffb1ba; }
.agent-actions { display: flex; gap: 7px; margin-top: 10px; }
.agent-actions button { flex: 1; padding: 7px; font-size: 10px; }
.connect-button { background: #2a67c5; font-weight: 650; }
.empty-state { min-height: 220px; display: grid; place-content: center; gap: 8px; padding: 24px; text-align: center; color: #697383; }
.empty-state strong { color: #9ca7b7; font-size: 12px; }
.empty-state span { max-width: 220px; font-size: 10px; line-height: 1.5; }

.workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) 36px; background: #080a0e; }
.session-bar { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #0f1217; }
.session-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.session-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #596271; }
.session-dot.active { background: var(--green); box-shadow: 0 0 9px #35c98288; }
.session-title strong, .session-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-title strong { font-size: 13px; }
.session-title span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.session-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.video-profile-summary { max-width: 220px; overflow: hidden; color: #8590a0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.inline-control { min-width: 90px; margin: 0; display: grid; gap: 2px; color: #7f8998; font-size: 8px; }
.inline-control select { padding: 5px 7px; font-size: 10px; }
.compact-control { min-width: 110px; }
.secondary { background: #252c36; font-size: 10px; }
.danger { background: #963441; font-size: 10px; }
.toggle-button[aria-pressed="true"] { color: #dfeaff; outline: 1px solid #3e6caa; background: #244e87; }
.tool-menu-wrap { position: relative; }
.tool-menu { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: 180px; padding: 6px; border: 1px solid #354052; border-radius: 9px; background: #131923; box-shadow: 0 16px 45px #000a; }
.tool-menu[hidden] { display: none; }
.tool-menu button { width: 100%; margin: 2px 0; text-align: left; background: #1d2632; font-size: 10px; }
.screen-shell { position: relative; min-height: 0; margin: 14px; display: grid; place-items: center; overflow: hidden; border: 1px solid #242a33; border-radius: 10px; background: #020304; }
video { display: none; width: 100%; height: 100%; object-fit: contain; outline: none; background: #000; }
video.active { display: block; cursor: crosshair; }
video.active.hide-local-cursor { cursor: none; }
.placeholder { max-width: 420px; display: grid; gap: 9px; padding: 28px; text-align: center; color: #6c7685; }
.placeholder strong { color: #a1aab8; font-size: 14px; }
.placeholder span { font-size: 11px; line-height: 1.5; }
.screen-icon { margin: 0 auto; width: 48px; height: 38px; display: grid; place-items: center; border: 1px solid #35404d; border-radius: 7px; color: #536174; font-size: 22px; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-top: 1px solid #20252d; color: #778190; font-size: 9px; }
#codecInfo { color: #596473; white-space: nowrap; }

.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: #05070ac7; backdrop-filter: blur(7px); }
.modal[hidden] { display: none; }
.admin-dialog, .settings-dialog, .file-manager-dialog { width: min(1040px, 96vw); max-height: 92vh; overflow: auto; padding: 18px; border: 1px solid #343d4a; border-radius: 15px; background: #10141b; box-shadow: 0 24px 80px #000b; }
.settings-dialog { width: min(780px, 96vw); }
.file-manager-dialog { width: min(1240px, 98vw); height: min(800px, 94vh); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
.admin-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.admin-header h2 { margin: 0; font-size: 19px; }
.admin-header span { color: var(--muted); font-size: 10px; }
.admin-message { min-height: 31px; margin-bottom: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: #aab5c4; background: #0b0f14; font-size: 10px; }
.admin-message.error { color: #ff9ca6; border-color: #62323a; }
.admin-columns { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; }
.admin-card { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.admin-card h3 { margin: 0 0 10px; font-size: 13px; }
.section-kicker { margin-bottom: 4px; color: #6fa8ff; font-size: 8px; font-weight: 750; letter-spacing: .7px; text-transform: uppercase; }
.create-group-card .primary { margin-bottom: 4px; }
.form-row { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.check-line { display: flex; align-items: center; gap: 7px; }
.check-line input, .group-checks input { width: auto; }
.field-title { margin: 12px 0 7px; color: #a9b2c0; font-size: 10px; }
.group-checks { display: flex; flex-wrap: wrap; gap: 7px; }
.group-checks label { margin: 0; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: #171d25; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; }
.form-actions .primary { width: auto; margin: 0; }
.admin-list { display: grid; gap: 7px; margin-top: 11px; }
.admin-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 9px; border: 1px solid #29313c; border-radius: 8px; background: #151a22; }
.admin-list-row strong, .admin-list-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-list-row strong { font-size: 10px; }
.admin-list-row span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.users-card { margin-top: 12px; }
.users-card .admin-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.role-badge { padding: 3px 6px; border-radius: 999px; color: #a9c9ff; background: #203454; font-size: 8px; }
.settings-intro { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px; border: 1px solid #2d3a4c; border-radius: 11px; background: #131a24; }
.settings-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; color: #bcd5ff; background: #244e87; font-size: 20px; }
.settings-intro strong, .settings-intro span { display: block; }
.settings-intro strong { font-size: 12px; }
.settings-intro span { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
.settings-grid label { padding: 10px; border: 1px solid #272f3a; border-radius: 9px; background: #12171e; }
.settings-grid label small { color: #687383; font-size: 8px; line-height: 1.35; }
.settings-grid select { width: 100%; }
.settings-dialog .admin-message { margin-top: 14px; }

.session-toolbar { z-index: 12; transition: opacity .18s ease, transform .18s ease; }
.toolbar-reveal { display: none; position: absolute; z-index: 11; margin: 0; padding: 0; border-radius: 0; opacity: .18; background: #4b8dff; }
.workspace.session-live { position: relative; grid-template-rows: minmax(0, 1fr) 36px; }
.workspace.session-live .screen-shell { grid-row: 1; margin: 0; border: 0; border-radius: 0; }
.workspace.session-live footer { grid-row: 2; }
.workspace.session-live .session-toolbar { position: absolute; max-width: calc(100% - 18px); max-height: calc(100% - 50px); padding: 8px 10px; border: 1px solid #364254; border-radius: 11px; background: #10151dea; box-shadow: 0 14px 42px #0009; backdrop-filter: blur(10px); }
.workspace.session-live .toolbar-reveal { display: block; }
.workspace.session-live .session-toolbar[data-side="top"] { top: 9px; left: 50%; transform: translate(-50%, 0); }
.workspace.session-live .session-toolbar[data-side="bottom"] { bottom: 45px; left: 50%; transform: translate(-50%, 0); }
.workspace.session-live .session-toolbar[data-side="left"] { top: 50%; left: 9px; width: 235px; flex-direction: column; align-items: stretch; transform: translate(0, -50%); overflow: auto; }
.workspace.session-live .session-toolbar[data-side="right"] { top: 50%; right: 9px; width: 235px; flex-direction: column; align-items: stretch; transform: translate(0, -50%); overflow: auto; }
.workspace.session-live .session-toolbar[data-side="left"] .session-actions,
.workspace.session-live .session-toolbar[data-side="right"] .session-actions { flex-direction: column; align-items: stretch; }
.workspace.session-live .session-toolbar[data-side="left"] .video-profile-summary,
.workspace.session-live .session-toolbar[data-side="right"] .video-profile-summary { max-width: none; }
.workspace.session-live .session-toolbar[data-side="left"] .tool-menu,
.workspace.session-live .session-toolbar[data-side="right"] .tool-menu { position: fixed; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); }
.workspace.session-live .session-toolbar.toolbar-hidden { pointer-events: none; opacity: 0; }
.workspace.session-live .session-toolbar[data-side="top"].toolbar-hidden { transform: translate(-50%, -135%); }
.workspace.session-live .session-toolbar[data-side="bottom"].toolbar-hidden { transform: translate(-50%, 135%); }
.workspace.session-live .session-toolbar[data-side="left"].toolbar-hidden { transform: translate(-135%, -50%); }
.workspace.session-live .session-toolbar[data-side="right"].toolbar-hidden { transform: translate(135%, -50%); }
.workspace.session-live .toolbar-reveal[data-side="top"] { top: 0; left: 20%; width: 60%; height: 7px; }
.workspace.session-live .toolbar-reveal[data-side="bottom"] { bottom: 36px; left: 20%; width: 60%; height: 7px; }
.workspace.session-live .toolbar-reveal[data-side="left"] { top: 20%; bottom: 20%; left: 0; width: 7px; }
.workspace.session-live .toolbar-reveal[data-side="right"] { top: 20%; bottom: 20%; right: 0; width: 7px; }

.tool-popover { position: fixed; z-index: 35; top: 78px; right: 20px; width: min(430px, calc(100vw - 30px)); padding: 13px; border: 1px solid #354052; border-radius: 11px; background: #111720; box-shadow: 0 18px 60px #000c; }
.tool-popover[hidden] { display: none; }
.tool-popover header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.tool-popover textarea { width: 100%; resize: vertical; min-height: 100px; padding: 9px; border: 1px solid #343c49; border-radius: 8px; outline: none; color: #edf1f7; background: #090c11; font: inherit; font-size: 11px; }
.popover-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.popover-actions .primary { width: auto; margin: 0; }
.tool-status { min-height: 25px; margin-top: 8px; color: #8d99aa; font-size: 9px; line-height: 1.4; }
.tool-status.error { color: #ff9ca6; }

.file-manager-grid { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 10px; }
.file-pane { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid #293442; border-radius: 10px; background: #0c1016; outline: none; }
.file-pane.drag-active { border-color: #4b8dff; box-shadow: inset 0 0 0 2px #3478f655; }
.file-pane-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-bottom: 1px solid #27303b; background: #141a22; }
.file-pane-header strong, .file-pane-header span { display: block; }
.file-pane-header strong { font-size: 11px; }
.file-pane-header span { max-width: 320px; margin-top: 2px; overflow: hidden; color: #778394; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.file-pane-actions { display: flex; gap: 5px; }
.file-pane-actions button { padding: 5px 7px; }
.file-list { min-height: 0; overflow: auto; padding: 6px; }
.file-row { display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; gap: 7px; align-items: center; min-height: 34px; padding: 5px 7px; border-radius: 6px; cursor: default; font-size: 10px; }
.file-row:hover { background: #18202b; }
.file-row.selected { color: #e5efff; background: #244b83; }
.file-row .file-icon { color: #8292a7; text-align: center; }
.file-row .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .file-details { color: #718094; font-size: 8px; white-space: nowrap; }
.file-empty { display: grid; min-height: 160px; place-items: center; padding: 20px; color: #697484; text-align: center; font-size: 10px; }
.drop-hint { padding: 7px 10px; border-top: 1px dashed #2a3543; color: #617084; text-align: center; font-size: 8px; }
.file-transfer-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.file-transfer-actions button { width: 42px; margin: 0; font-size: 17px; }
.transfer-queue { min-height: 52px; margin-top: 10px; }
.transfer-list { display: flex; flex-wrap: wrap; gap: 6px; color: #778394; font-size: 9px; }
.transfer-item { min-width: 180px; padding: 6px 8px; border: 1px solid #293440; border-radius: 7px; background: #111720; }
.transfer-item strong, .transfer-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-item.error { border-color: #62323a; color: #ff9ca6; }
.transfer-item.complete { border-color: #236944; color: #72e4aa; }

.policy-package-columns { margin-top: 12px; grid-template-columns: 1fr 1fr; }
.policy-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.policy-checks label { margin: 0; display: flex; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid #29323e; border-radius: 7px; background: #151b23; }
.policy-checks input { width: auto; }

body.session-window { display: block; }
body.session-window > .topbar { display: none; }
body.session-window main { width: 100%; height: 100%; grid-template-columns: minmax(0, 1fr); }
body.session-window .sidebar, body.session-window .inventory { display: none; }
body.session-window .workspace { width: 100%; height: 100%; }
body.session-window .screen-shell { margin: 0; border: 0; border-radius: 0; }

@media (max-width: 1120px) {
  main { grid-template-columns: 205px 285px minmax(300px, 1fr); }
  .video-profile-summary { display: none; }
  .session-actions { flex-wrap: nowrap; }
  #relayTestButton { display: none; }
}

@media (max-width: 900px) {
  main { grid-template-columns: 190px 250px minmax(300px, 1fr); }
  .topbar-status #transportBadge { display: none; }
  .top-action { padding: 7px 8px; }
  .session-title { max-width: 130px; }
  #fullscreenButton { display: none; }
  .settings-grid, .admin-columns { grid-template-columns: 1fr; }
  .policy-checks { grid-template-columns: 1fr; }
  .file-manager-grid { grid-template-columns: 1fr; grid-template-rows: minmax(180px, 1fr) auto minmax(180px, 1fr); }
  .file-transfer-actions { flex-direction: row; }
}

/* Dashboard inventory shell */
body:not(.session-window) { grid-template-rows: 72px minmax(0, 1fr); background: #0b0e13; }
body:not(.session-window) .topbar { gap: 20px; padding: 0 18px; background: #11151b; }
body:not(.session-window) main { grid-template-columns: 248px minmax(0, 1fr); }
body:not(.session-window) .workspace { display: none; }
.product { flex: 0 0 auto; }
.direct-connect { min-width: 0; flex: 1; display: flex; align-items: center; gap: 7px; }
.direct-connect[hidden] { display: none; }
.direct-connect strong { flex: 0 0 auto; margin-right: 3px; color: #b8c2d0; font-size: 10px; }
.direct-connect input { width: 132px; margin: 0; padding: 8px 9px; }
.direct-connect #directDevicePassword { width: 116px; }
.direct-connect .primary { width: auto; margin: 0; padding: 8px 12px; white-space: nowrap; }
.direct-connect-status { min-width: 0; max-width: 240px; overflow: hidden; color: #8390a1; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.direct-connect-status.error { color: #ff9ca6; }
.topbar-status { flex: 0 0 auto; }
.account-shell { position: relative; }
.account-menu-button { min-width: 148px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid #2c3541; border-radius: 9px; color: #e8edf5; background: #171c24; text-align: left; }
.account-menu-button:hover, .account-menu-button[aria-expanded="true"] { border-color: #4a78b8; background: #1b2430; }
.account-menu-button #accountButtonName { max-width: 150px; overflow: hidden; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.account-chevron { color: #7f8b9a; }
.account-menu { position: absolute; z-index: 55; top: calc(100% + 9px); right: 0; width: 310px; padding: 14px; border: 1px solid #354052; border-radius: 12px; background: #121820; box-shadow: 0 18px 60px #000c; }
.account-menu[hidden] { display: none; }
.account-login { display: grid; gap: 8px; }
.account-login > strong { font-size: 13px; }
.account-login label { margin: 0; }
.account-login .primary { margin: 2px 0 0; }
.sso-login { width: 100%; padding: 9px 10px; border: 1px solid #3c526f; color: #dbe9ff; background: #20344f; font-weight: 700; }
.login-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; color: #6f7988; font-size: 9px; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; background: #2a3340; }
.local-password-field[hidden] { display: none; }
.account-summary { gap: 10px; }
.account-summary .account-identity strong { font-size: 12px; }
.sidebar { padding: 12px 10px; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.sidebar .tree-panel { min-height: 0; margin: 0; padding: 8px; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 0; background: transparent; }
.sidebar .panel-heading { padding: 2px 3px 9px; }
.group-tree { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 2px; }
.tree-filter { justify-content: initial; min-height: 34px; padding: 5px 7px 5px calc(5px + var(--tree-depth, 0) * 15px); cursor: pointer; background: transparent; }
.tree-filter:hover { background: #1a212b; }
.tree-filter.active { color: #eaf2ff; background: #244d82; }
.tree-filter strong { min-width: 0; flex: 1; overflow: hidden; font-size: 10px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.tree-filter .tree-folder { color: #75869c; font-size: 11px; }
.tree-filter.active .tree-folder { color: #bcd7ff; }
.tree-expander { width: 18px; min-width: 18px; padding: 0; border: 0; color: #8996a7; background: transparent; font-size: 14px; }
.tree-expander:disabled { opacity: 0; }
.tree-count { min-width: 22px; padding: 2px 5px; border-radius: 999px; color: #7e8998 !important; background: #1b222c; text-align: center; }
.tree-filter.active .tree-count { color: #d9e8ff !important; background: #315f9a; }
.sidebar-footnote { padding: 9px 10px; color: #687587; font-size: 8px; line-height: 1.45; }
.inventory { border-right: 0; grid-template-rows: auto minmax(0, 1fr); background: #0d1117; }
.inventory-header { gap: 12px; padding: 16px 18px 13px; background: #10151c; }
.inventory-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.inventory-title h1 { font-size: 18px; }
.inventory-view-buttons { display: flex; gap: 4px; }
.inventory-view-buttons .icon-button.active { color: #dceaff; border-color: #4277bd; background: #254b7d; }
.inventory-tools { display: grid; grid-template-columns: minmax(230px, 1fr) 175px auto; align-items: center; gap: 9px; }
.inventory-tools select, .inventory-tools .search { margin: 0; }
.inventory-tools .filters { padding: 0; border: 0; }
.agent-list.view-grid { grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); padding: 16px 18px; gap: 13px; }
.agent-list.view-grid .agent-card { align-self: start; }
.agent-list.view-list { display: grid; grid-template-columns: 1fr; padding: 10px 18px; gap: 4px; }
.agent-list.view-list .agent-card { display: block; border-radius: 7px; }
.agent-list.view-list .preview { display: none; }
.agent-list.view-list .agent-content { display: grid; grid-template-columns: minmax(170px, 1.4fr) minmax(230px, 1.5fr) minmax(180px, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; }
.agent-list.view-list .agent-heading { min-width: 0; }
.agent-list.view-list .agent-meta, .agent-list.view-list .agent-policy-badges, .agent-list.view-list .agent-actions { margin: 0; }
.agent-list.view-list .agent-actions { justify-content: flex-end; }
.agent-list.view-list .agent-actions button { flex: 0 0 auto; min-width: 66px; }
.device-menu-button { width: 26px; height: 26px; flex: 0 0 auto; padding: 0; border: 0; color: #8793a3; background: transparent; font-size: 18px; line-height: 1; }
.agent-status-dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 3px; border-radius: 50%; background: #586270; box-shadow: 0 0 0 3px #58627022; }
.agent-status-dot.online { background: #35d081; box-shadow: 0 0 0 3px #35d08122; }
.agent-heading strong { flex: 1; }
.device-menu-button:hover { color: #fff; background: #28313d; }
.device-context-menu { position: fixed; z-index: 90; width: 230px; padding: 6px; border: 1px solid #3a4554; border-radius: 10px; background: #141a22; box-shadow: 0 15px 50px #000c; }
.device-context-menu[hidden] { display: none; }
.device-context-menu button { width: 100%; display: grid; grid-template-columns: 24px 1fr; gap: 7px; margin: 0; padding: 9px 10px; border: 0; color: #d8dfe9; background: transparent; text-align: left; }
.device-context-menu button:hover:not(:disabled) { background: #243b5b; }
.device-context-menu button:disabled { color: #596473; }
.device-context-menu hr { height: 1px; margin: 5px 6px; border: 0; background: #2d3642; }
.app-toast { position: fixed; z-index: 80; right: 18px; bottom: 18px; max-width: min(460px, calc(100vw - 36px)); padding: 10px 13px; border: 1px solid #315f92; border-radius: 9px; color: #d8e8ff; background: #182a40; box-shadow: 0 12px 40px #0009; font-size: 10px; }
.app-toast[hidden] { display: none; }
.app-toast.error { color: #ffd6da; border-color: #743c45; background: #351b20; }

/* Access administration */
.admin-dialog { width: min(1240px, 97vw); height: min(850px, 95vh); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); overflow: hidden; }
.admin-tabs { display: flex; gap: 5px; margin: 0 0 12px; padding: 4px; border: 1px solid #29313c; border-radius: 9px; background: #0c1016; }
.admin-tabs button { margin: 0; padding: 8px 12px; border: 0; color: #98a4b4; background: transparent; }
.admin-tabs button.active { color: #e7effb; background: #244d82; }
.admin-pane { min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 12px; overflow: hidden; }
.admin-pane[hidden] { display: none; }
.admin-pane.single-pane { grid-template-columns: minmax(0, 760px); justify-content: center; overflow: auto; }
.admin-pane > .admin-card { min-height: 0; overflow: auto; }
.admin-card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-card-title h3 { margin: 2px 0 0; }
.admin-card-title .primary { width: auto; margin: 0; }
.admin-master-list .admin-list { align-content: start; }
.admin-list-row { padding-left: calc(9px + var(--group-depth, 0) * 14px); }
.admin-row-actions { display: flex; align-items: center; gap: 7px; }
.admin-row-actions .secondary { padding: 6px 8px; }
.user-list .admin-list-row.selected { border-color: #447dcc; background: #1b2d46; }
.permission-matrix-wrap { max-height: 390px; overflow: auto; border: 1px solid #2a3340; border-radius: 9px; }
.permission-matrix { width: 100%; border-collapse: collapse; font-size: 9px; }
.permission-matrix th { position: sticky; z-index: 1; top: 0; padding: 8px 6px; color: #8f9baa; background: #111820; font-weight: 600; white-space: nowrap; }
.permission-matrix td { padding: 7px 6px; border-top: 1px solid #242d38; text-align: center; }
.permission-matrix td:first-child, .permission-matrix th:first-child { min-width: 170px; text-align: left; }
.permission-matrix tr:hover td { background: #171e27; }
.permission-matrix input { width: auto; margin: 0; }
.permission-matrix select { width: 112px; margin: 0; padding: 5px 6px; font-size: 8px; }
.permission-group-name { padding-left: calc(8px + var(--group-depth, 0) * 13px) !important; }

/* Account and device settings */
.device-settings-dialog { width: min(900px, 95vw); }
.device-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.device-facts, .account-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 12px 0 0; }
.device-facts div, .account-facts div { min-width: 0; padding: 8px 9px; border: 1px solid #29323e; border-radius: 8px; background: #11171e; }
.device-facts dt, .account-facts dt { color: #758194; font-size: 8px; }
.device-facts dd, .account-facts dd { margin: 3px 0 0; overflow: hidden; color: #e2e8f0; font-size: 10px; text-overflow: ellipsis; }
.device-delete-action { width: 100%; margin-top: 10px; }
.account-profile-fields { margin-top: 12px; }
.notice-dialog { width: min(470px, 92vw); padding: 22px; border: 1px solid #354052; border-radius: 13px; background: #121820; box-shadow: 0 20px 70px #000c; }
.notice-dialog h2 { margin: 0 0 8px; font-size: 17px; }
.notice-dialog p { margin: 0 0 16px; color: #9ba7b6; line-height: 1.55; }

/* Full remote filesystem */
.local-file-pane, .remote-file-pane { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.file-location { min-width: 0; }
.file-breadcrumbs { max-width: 440px; display: flex; align-items: center; gap: 3px; overflow: hidden; }
.file-breadcrumbs button { min-width: 0; overflow: hidden; padding: 2px 3px; border: 0; color: #9bb7dd; background: transparent; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.file-breadcrumbs span { color: #5f6d7e; }
.local-file-actions, .remote-file-actions { display: flex; gap: 5px; padding: 6px 9px; border-bottom: 1px solid #27303b; background: #10161d; }
.local-file-actions button, .remote-file-actions button { margin: 0; padding: 5px 7px; }
.danger-outline { color: #f0a0a9 !important; border-color: #61323a !important; }

/* Session tools */
.terminal-dialog, .system-info-dialog { width: min(1050px, 96vw); height: min(720px, 92vh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; padding: 17px; border: 1px solid #354052; border-radius: 13px; background: #10151b; box-shadow: 0 22px 75px #000c; }
.system-info-dialog { grid-template-rows: auto auto minmax(0, 1fr); }
.terminal-output { min-height: 0; overflow: auto; margin: 0; padding: 13px; border: 1px solid #263340; border-radius: 8px; color: #d6f3de; background: #050807; font: 12px/1.5 Consolas, monospace; white-space: pre-wrap; }
.terminal-input-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; margin-top: 8px; }
.terminal-input-row input, .terminal-input-row button { margin: 0; }
.terminal-input-row button { width: auto; }
.system-info-grid { min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 7px; margin: 0; }
.system-info-grid div { padding: 9px 10px; border: 1px solid #29323e; border-radius: 8px; background: #111820; }
.system-info-grid dt { color: #7f8c9c; font-size: 9px; }
.system-info-grid dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 11px; }

@media (max-width: 1100px) {
  body:not(.session-window) main { grid-template-columns: 220px minmax(0, 1fr); }
  .direct-connect strong, .direct-connect-status, .topbar-status > .status-pill { display: none; }
  .inventory-tools { grid-template-columns: minmax(180px, 1fr) 150px; }
  .inventory-tools .filters { grid-column: 1 / -1; }
  .agent-list.view-list .agent-content { grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.2fr) auto; }
  .agent-list.view-list .agent-policy-badges { display: none; }
}

@media (max-width: 760px) {
  body:not(.session-window) { overflow: auto; }
  body:not(.session-window) .topbar { min-height: 118px; flex-wrap: wrap; }
  body:not(.session-window) main { min-height: 700px; grid-template-columns: 1fr; }
  .sidebar { max-height: 230px; border-bottom: 1px solid var(--line); }
  .direct-connect { order: 3; flex-basis: 100%; }
  .inventory-tools { grid-template-columns: 1fr; }
  .inventory-tools .filters { grid-column: auto; }
  .admin-pane, .device-settings-grid { grid-template-columns: 1fr; overflow: auto; }
  .agent-list.view-list .agent-content { grid-template-columns: 1fr; }
}