.live-visitors { --live-line: #c9ddd5; --live-muted: #566b63; color: var(--ink, #172a24); padding: 12px 0 32px; }
.live-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.live-heading h1 { margin: 8px 0; color: #216b51; }
.live-heading p, .live-note { color: var(--live-muted); }
.live-status { min-height: 1.5em; color: #216b51; font-size: .9rem; }
.live-stale .live-status { color: #924719; }
.live-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin: 18px 0; }
.live-metrics article { border: 1px solid var(--live-line); border-radius: 12px; padding: 15px; background: linear-gradient(130deg, #fff, #edf6f1); }
.live-metrics strong { display: block; color: #216b51; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.live-metrics span { font-size: .8rem; color: var(--live-muted); }
.live-filters { display: flex; flex-wrap: wrap; gap: 16px; border: 1px solid var(--live-line); padding: 16px; border-radius: 12px; margin-bottom: 18px; background: #f6faf8; }
.live-filters fieldset { flex: 1 1 220px; border: 0; padding: 0; margin: 0; min-width: 0; }
.live-filters legend { font-weight: 700; margin-bottom: 8px; font-size: .85rem; }
.live-filters fieldset label { display: inline-flex; gap: 6px; align-items: center; margin-inline-end: 12px; margin-bottom: 8px; font-size: .85rem; cursor: pointer; }
.live-filters input[type="checkbox"] { width: 17px; height: 17px; accent-color: #216b51; margin: 0; }
.live-course { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; min-width: 150px; }
.live-course select { padding: 8px; border: 1px solid var(--live-line); border-radius: 6px; background: #fff; color: inherit; max-width: 100%; }
.live-table-wrap { overflow-x: auto; border: 1px solid var(--live-line); border-radius: 12px; background: #fff; }
.live-table { width: 100%; min-width: 710px; border-collapse: collapse; text-align: start; font-size: .85rem; }
.live-table th { background: #edf5f1; font-weight: 600; color: #325548; }
.live-table th, .live-table td { text-align: start; padding: 12px; vertical-align: top; border-bottom: 1px solid #e3ece7; }
.live-table tr:last-child td { border-bottom: 0; }
.live-table td:nth-child(2) { max-width: 300px; min-width: 200px; }
.live-table strong, .live-table small, .live-table a { display: block; }
.live-table small { margin-top: 5px; color: var(--live-muted); }
.live-table a { margin-top: 6px; overflow-wrap: anywhere; color: #216b51; font-size: .75rem; }
.live-badge { display: inline-block; border-radius: 20px; padding: 3px 8px; margin-top: 7px; font-size: .75rem; background: #edf0f2; color: #53636c; }
.live-active { background: #e0f1e9; color: #1d6746; }
.live-idle { background: #fff1d8; color: #795715; }
.live-background { background: #e8eef4; color: #40576a; }
.live-closed { background: #f0ece8; color: #6b5546; }
.live-history-toggle { display: block; margin-top: 8px; border: 0; padding: 0; background: transparent; color: #216b51; font: inherit; font-size: .75rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.live-history-row td { padding: 0 12px 14px; background: #f8fbf9; }
.live-history-panel { border: 1px solid var(--live-line); border-radius: 10px; padding: 14px; background: #fff; }
.live-history-panel h3 { margin: 0 0 10px; color: #216b51; font-size: .95rem; }
.live-history-list { display: grid; gap: 8px; margin: 0; padding-inline-start: 22px; }
.live-history-list li { padding: 9px 10px; border-inline-start: 3px solid #a9cabc; background: #f5faf7; }
.live-history-list li div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; }
.live-history-list li span { color: var(--live-muted); font-size: .75rem; }
.live-history-list li small, .live-history-list li a { margin-top: 4px; }
.live-history-note { margin: 8px 0 0; color: var(--live-muted); font-size: .8rem; }
.live-note { font-size: .8rem; line-height: 1.65; margin-top: 14px; }
.live-visitors :focus-visible { outline: 2px solid #216b51; outline-offset: 3px; }
@media (max-width: 760px) { .live-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .live-heading { align-items: flex-start; } .live-history-list li div { display: block; } }
@media (max-width: 420px) { .live-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .live-filters { padding: 12px; } }