.terminal-grid:has(#sectionLogs:not([hidden])) { grid-template-columns:minmax(0,1fr); }
.terminal-grid:has(#sectionLogs:not([hidden])) > .market-rail,
.terminal-grid:has(#sectionLogs:not([hidden])) > .action-rail { display:none; }
.workspace:has(#sectionLogs:not([hidden])) { padding:20px 26px; }
.workspace:has(#sectionLogs:not([hidden])) > .dashboard-nav { display:flex; overflow-x:auto; position:static; box-shadow:none; gap:6px; }
.workspace:has(#sectionLogs:not([hidden])) > .dashboard-nav button { flex:0 0 auto; white-space:nowrap; padding:8px 12px; }
#sectionLogs { --monitor-border:#263647; --monitor-muted:#9eb2c5; color:#e8f0f7; gap:0; }
#sectionLogs .monitor-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:12px 0 20px; }
#sectionLogs .monitor-eyebrow { color:#76d7b5; font-size:.63rem; letter-spacing:.16em; font-weight:700; }
#sectionLogs h2 { font-size:clamp(1.4rem,2.1vw,2rem); line-height:1.3; letter-spacing:-.035em; margin:8px 0; }
#sectionLogs .monitor-heading p { color:var(--monitor-muted); margin:0; font-size:.85rem; line-height:1.6; }
#sectionLogs .monitor-live { display:grid; gap:8px; justify-items:end; }
#sectionLogs .monitor-live time { font-size:1rem; color:#c5d5e4; font-variant-numeric:tabular-nums; }
#monitorStatus { font-size:.7rem; padding:8px 12px; border:1px solid #354352; border-radius:7px; color:#b5c4d2; }
#monitorStatus.live { color:#68dfae; border-color:#216447; background:#163a2a50; }
#monitorStatus.stale { color:#e6c28b; background:#49341b30; }
.monitor-tabs { display:flex; gap:5px; overflow-x:auto; border-bottom:1px solid var(--monitor-border); margin-bottom:20px; padding-bottom:6px; }
#sectionLogs .monitor-tabs button { border:0; background:transparent; color:var(--monitor-muted); border-radius:7px; padding:11px 16px; white-space:nowrap; font-size:.8rem; font-weight:500; }
#sectionLogs .monitor-tabs button[aria-current=page] { color:#7ce6ba; background:#163d2f; box-shadow:inset 0 -2px #26c77a; }
.monitor-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:22px; }
.monitor-metric { display:flex; align-items:flex-start; gap:12px; padding:18px 14px; background:linear-gradient(130deg,#15212c,#101923); border:1px solid var(--monitor-border); border-radius:10px; min-width:0; }
.monitor-metric-icon { display:grid; place-items:center; width:35px; height:38px; flex:0 0 35px; border-radius:9px; background:#20384f; color:#7ebafa; font-size:1.35rem; }
.monitor-metric.online .monitor-metric-icon { background:#153d30; color:#31d890; }
.monitor-metric.write .monitor-metric-icon { background:#463719; color:#e9bd63; }
.monitor-metric.error .monitor-metric-icon { background:#482831; color:#ef9ba5; }
.monitor-metric.access .monitor-metric-icon { background:#2b304d; color:#b4b1ee; }
.monitor-metric strong { display:block; font-size:1.7rem; line-height:1.15; font-weight:650; font-variant-numeric:tabular-nums; }
.monitor-metric div { min-width:0; }
.monitor-metric div > span { display:block; margin:7px 0; font-size:.74rem; color:#c1d2e2; }
.monitor-metric small { color:#8da5bc; font-size:.63rem; line-height:1.5; display:block; }
.monitor-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin-bottom:10px; }
.monitor-toolbar label { display:grid; gap:7px; min-width:150px; }
.monitor-toolbar label > span { font-size:.67rem; color:var(--monitor-muted); }
.monitor-toolbar .monitor-search { flex:1; min-width:220px; }
#sectionLogs .monitor-toolbar input, #sectionLogs .monitor-toolbar select { min-height:40px; border:1px solid #304559; background:#111f2d; color:#d9e7f4; border-radius:8px; width:100%; padding:9px 12px; font-size:.78rem; }
#sectionLogs .monitor-toolbar button { min-height:40px; padding:8px 13px; border-radius:8px; }
.monitor-scope { color:#90a7bc; font-size:.68rem; line-height:1.65; margin:12px 0 20px; }
.monitor-error { background:#3b2027; border:1px solid #814451; color:#f0b4bd; padding:12px 15px; border-radius:8px; font-size:.78rem; line-height:1.6; }
.monitor-workspace { display:grid; grid-template-columns:minmax(250px,.95fr) minmax(320px,1.25fr) minmax(290px,1fr); gap:16px; align-items:start; }
.monitor-workspace:not([data-view=overview]) { grid-template-columns:minmax(0,1.8fr) minmax(290px,1fr); }
.monitor-workspace:not([data-view=overview]) .monitor-details { grid-column:2; grid-row:1; }
.monitor-panel { min-width:0; border:1px solid var(--monitor-border); border-radius:11px; background:linear-gradient(140deg,#121e29,#0c1620); overflow:hidden; }
.monitor-panel > header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:17px 16px; border-bottom:1px solid #233445; }
.monitor-panel h3 { font-size:.92rem; letter-spacing:-.015em; font-weight:600; margin:0; display:flex; align-items:center; gap:8px; }
.monitor-panel > header > span, .monitor-panel > header > b { font-size:.65rem; color:var(--monitor-muted); font-weight:500; }
.monitor-dot { width:8px; height:8px; background:#20cd80; border-radius:50%; }
.monitor-users, .monitor-feed { max-height:650px; overflow-y:auto; padding:6px 12px; }
#sectionLogs .monitor-user { display:flex; align-items:center; gap:11px; padding:16px 5px; border:0; border-bottom:1px solid #233344; border-radius:0; background:transparent; width:100%; text-align:left; color:#dce8f3; font-weight:400; }
#sectionLogs .monitor-user.selected { background:#1a3a324d; box-shadow:inset 3px 0 #29c984; }
#sectionLogs .monitor-user:hover, #sectionLogs button.monitor-event:hover { background:#1e35475c; }
.monitor-avatar { display:grid; place-items:center; width:39px; height:39px; flex:0 0 39px; border-radius:50%; background:linear-gradient(145deg,#2a506b,#193446); border:1px solid #345a74; color:#c9e6ff; font-size:.82rem; font-weight:600; }
.monitor-user-text { min-width:0; flex:1; }
.monitor-user strong { display:block; font-size:.85rem; font-weight:600; overflow-wrap:anywhere; }
.monitor-user small { font-size:.68rem; color:#9fb6cb; display:block; margin-top:6px; }
.monitor-user em { display:block; color:#75c4a5; font-size:.66rem; line-height:1.5; font-style:normal; margin-top:5px; overflow-wrap:anywhere; }
.monitor-user-status { text-align:right; max-width:90px; }
.monitor-presence { display:inline-block; color:#70d6a6; background:#0e392a; border-radius:20px; padding:4px 7px; font-size:.58rem; line-height:1.45; }
.monitor-presence.away { color:#e9c180; background:#3c301b; }
.monitor-presence.offline { color:#a7b4c2; background:#27313d; }
.monitor-event { display:grid; grid-template-columns:83px 29px minmax(0,1fr); align-items:start; gap:10px; width:100%; padding:13px 2px; color:#d5e3ef; text-align:left; background:transparent; border:0; border-bottom:1px solid #233344; border-radius:0; font-weight:400; }
.monitor-event time { color:#91aac0; font-size:.7rem; line-height:1.6; font-variant-numeric:tabular-nums; }
.monitor-event-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:#143349; color:#75c6f4; }
.monitor-event.write .monitor-event-icon { background:#40341c; color:#f3c96f; }
.monitor-event.access .monitor-event-icon { background:#193d30; color:#7bdfb1; }
.monitor-event.error .monitor-event-icon { background:#492b35; color:#e7a0ac; }
.monitor-event strong { display:block; font-size:.81rem; font-weight:550; line-height:1.55; overflow-wrap:anywhere; }
.monitor-event small { display:block; color:#9fb6cb; font-size:.75rem; line-height:1.6; margin-top:4px; overflow-wrap:anywhere; }
.monitor-empty { padding:45px 22px; text-align:center; color:#8ba4bb; font-size:.8rem; line-height:1.8; }
.monitor-details > header button { background:transparent; color:#a9bed0; border:0; font-size:1.45rem; padding:0 6px; min-height:30px; }
.monitor-details { position:sticky; top:15px; }
#monitorDetailBody { max-height:780px; overflow:auto; }
.monitor-person { display:flex; align-items:center; gap:12px; padding:20px 16px; }
.monitor-person strong { font-size:.88rem; }
.monitor-person small { display:block; color:#9fb6cb; font-size:.7rem; line-height:1.65; margin:6px 0; overflow-wrap:anywhere; }
.monitor-detail-tabs { display:flex; padding:0 10px; border-bottom:1px solid #263c4c; }
#sectionLogs .monitor-detail-tabs button { flex:1; background:transparent; border:0; border-radius:0; color:#9fb6cb; padding:11px 5px; font-size:.69rem; font-weight:500; }
#sectionLogs .monitor-detail-tabs button[aria-pressed=true] { color:#89e0b9; box-shadow:inset 0 -2px #2ccc82; background:#14392d45; }
.monitor-explanation { color:#9ab1c5; font-size:.69rem; line-height:1.75; padding:0 16px; margin:16px 0; }
.monitor-step-list { padding:0 14px; max-height:400px; overflow:auto; }
.monitor-step-list .monitor-event { grid-template-columns:78px 22px minmax(0,1fr); gap:8px; }
.monitor-step-list .monitor-event-icon { width:22px; height:22px; font-size:.8rem; border-radius:50%; }
.monitor-session-facts { margin:18px 12px; border:1px solid #263b4c; background:#14243466; padding:14px; border-radius:8px; }
.monitor-session-facts > div { display:grid; grid-template-columns:90px minmax(0,1fr); gap:10px; font-size:.68rem; line-height:1.65; margin:6px 0; }
.monitor-session-facts dt { color:#8fa7bd; }
.monitor-session-facts dd { margin:0; color:#becfe0; overflow-wrap:anywhere; }
#monitorDetailBody .online-session-details { display:block; padding:12px; }
#monitorDetailBody .session-detail-group { margin:0 0 12px; }
#monitorAuditPanel .table-scroll { max-height:720px; }
#monitorAuditPanel table { min-width:700px; font-size:.72rem; }
#monitorAuditPanel td, #monitorAuditPanel th { padding:13px; vertical-align:top; }
#monitorAuditPanel td small { display:block; color:#9fb6cb; margin-top:5px; line-height:1.5; }
#monitorAuditPanel td { max-width:280px; overflow-wrap:anywhere; white-space:normal; }
#monitorAuditPanel td button { background:#193747; border:1px solid #305570; border-radius:6px; font-size:.68rem; color:#b3d7ec; margin-top:9px; padding:6px 9px; }
.monitor-tag { display:inline-block; font-size:.61rem; padding:4px 7px; border-radius:5px; color:#afd1e8; background:#19354b; }
.monitor-tag.write { background:#40351d; color:#e7cc91; }
.monitor-tag.error { background:#492b35; color:#e7a0ac; }
.monitor-tag.access { background:#193d30; color:#7bdfb1; }
#sectionLogs :is(button,input,select):focus-visible, #monitorDetails:focus-visible { outline:2px solid #65dbaa; outline-offset:2px; }
@media(max-width:1400px) { .monitor-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } .monitor-workspace { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); } .monitor-workspace[data-view=overview] .monitor-details { grid-column:1/-1; position:static; } }
@media(max-width:950px) { .monitor-workspace, .monitor-workspace:not([data-view=overview]) { grid-template-columns:1fr; } .monitor-workspace:not([data-view=overview]) .monitor-details { grid-column:auto; grid-row:auto; } .monitor-details { position:static; } .monitor-toolbar .monitor-search { flex-basis:100%; } }
@media(max-width:560px) { .workspace:has(#sectionLogs:not([hidden])) { padding:12px 10px; } .monitor-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .monitor-metric { padding:13px 10px; gap:8px; } .monitor-metric-icon { width:26px; height:30px; flex-basis:26px; font-size:1rem; } .monitor-metric strong { font-size:1.4rem; } .monitor-toolbar label { min-width:0; flex:1 1 40%; } #sectionLogs .monitor-live { justify-items:start; } .monitor-tabs { margin-left:-4px; margin-right:-4px; } #sectionLogs .monitor-tabs button { padding:11px; } .monitor-feed, .monitor-users { max-height:480px; } .monitor-event { grid-template-columns:72px 25px minmax(0,1fr); gap:8px; } }