:root{--color-bg: #0f1117;--color-surface: #1a1d27;--color-surface-hover: #22263a;--color-border: #2a2e3f;--color-text: #e4e6ef;--color-text-muted: #8b8fa3;--color-primary: #6366f1;--color-primary-hover: #818cf8;--color-success: #22c55e;--color-warning: #f59e0b;--color-danger: #ef4444;--color-info: #3b82f6;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--sidebar-width: 240px;--radius: 8px;--radius-sm: 4px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;--font-mono: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh}a{color:var(--color-primary);text-decoration:none}a:hover{color:var(--color-primary-hover)}ul{list-style:none}.layout{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:10}.sidebar-brand{padding:var(--space-lg);border-bottom:1px solid var(--color-border)}.sidebar-title{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}.sidebar-subtitle{font-size:.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em}.sidebar-nav{flex:1;padding:var(--space-md) 0}.nav-link{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);color:var(--color-text-muted);transition:background .15s,color .15s;font-size:.9rem}.nav-link:hover{background:var(--color-surface-hover);color:var(--color-text)}.nav-link--active{color:var(--color-primary);background:#6366f11a;border-right:3px solid var(--color-primary)}.nav-icon{width:1.2em;text-align:center;font-size:.8em}.sidebar-footer{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-border)}.content{flex:1;margin-left:var(--sidebar-width);padding:var(--space-xl);max-width:1200px}.page-title{font-size:1.5rem;font-weight:600;margin-bottom:var(--space-lg)}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg)}.page-header .page-title{margin-bottom:0}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-size:.875rem;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{background:var(--color-surface-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.btn--primary:hover{background:var(--color-primary-hover)}.btn--danger{background:transparent;border-color:var(--color-danger);color:var(--color-danger)}.btn--danger:hover{background:#ef44441a}.btn--ghost{background:transparent;border-color:transparent;color:var(--color-text-muted)}.btn--ghost:hover{color:var(--color-text)}.btn--small{padding:var(--space-xs) var(--space-sm);font-size:.8rem}.btn--full{width:100%}.form-group{display:flex;flex-direction:column;gap:var(--space-xs)}.form-group label{font-size:.8rem;font-weight:500;color:var(--color-text-muted)}.form-row{display:flex;gap:var(--space-md);align-items:flex-end;margin-bottom:var(--space-md)}.input{padding:var(--space-sm) var(--space-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:.9rem;font-family:inherit;outline:none;transition:border-color .15s}.input:focus{border-color:var(--color-primary)}.input:disabled{opacity:.5}.alert{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);margin-bottom:var(--space-md);font-size:.875rem}.alert--error{background:#ef44441a;border:1px solid var(--color-danger);color:var(--color-danger)}.alert--success{background:#22c55e1a;border:1px solid var(--color-success);color:var(--color-success)}.dashboard-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin-bottom:var(--space-xl)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-xs)}.card--success{border-color:var(--color-success)}.card--info{border-color:var(--color-info)}.card--danger{border-color:var(--color-danger)}.card-value{font-size:2rem;font-weight:700;line-height:1}.card--success .card-value{color:var(--color-success)}.card--info .card-value{color:var(--color-info)}.card--danger .card-value{color:var(--color-danger)}.card-label{font-size:.8rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.cards-skeleton{color:var(--color-text-muted);font-size:.875rem;padding:var(--space-md)}.table-container{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-table th{text-align:left;padding:var(--space-sm) var(--space-md);color:var(--color-text-muted);font-weight:500;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--color-border)}.data-table td{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border)}.data-table tr:hover td{background:var(--color-surface-hover)}.data-table tr:focus{outline:2px solid var(--color-primary);outline-offset:-2px}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:var(--space-xs);vertical-align:middle}.status--online{background:var(--color-success)}.status--offline{background:var(--color-text-muted)}.status--warning{background:var(--color-warning)}.status--unknown{background:var(--color-border)}.dashboard-grid{display:grid;grid-template-columns:1fr 320px;gap:var(--space-xl)}.dashboard-main h3,.dashboard-sidebar h3{font-size:1rem;font-weight:600;margin-bottom:var(--space-md)}.event-list{display:flex;flex-direction:column;gap:var(--space-sm)}.event-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font-size:.8rem}.event--critical{border-left:3px solid var(--color-danger)}.event--high{border-left:3px solid var(--color-warning)}.event--medium{border-left:3px solid var(--color-info)}.event-type{font-weight:600;margin-bottom:var(--space-xs)}.event-meta{display:flex;justify-content:space-between;color:var(--color-text-muted);font-size:.75rem}.event-severity{text-transform:uppercase;letter-spacing:.05em}.event-context{color:var(--color-text-muted);margin-top:var(--space-xs)}.session-timeline{max-width:600px}.timeline-filters{display:flex;gap:var(--space-md);align-items:center;margin-bottom:var(--space-lg)}.timeline-filters label{font-size:.8rem;color:var(--color-text-muted);white-space:nowrap}.timeline{position:relative;padding-left:var(--space-xl)}.timeline:before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--color-border)}.timeline-item{position:relative;padding-bottom:var(--space-lg)}.timeline-marker{position:absolute;left:calc(-1 * var(--space-xl) + 4px);top:4px;width:10px;height:10px;border-radius:50%;background:var(--color-border);border:2px solid var(--color-bg)}.timeline-item--active .timeline-marker{background:var(--color-success)}.timeline-item--ended .timeline-marker{background:var(--color-text-muted)}.timeline-content{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md)}.timeline-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xs)}.timeline-type{font-weight:600;font-size:.875rem}.timeline-status{font-size:.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.timeline-meta{display:flex;justify-content:space-between;font-size:.8rem;color:var(--color-text-muted)}.timeline-duration{font-family:var(--font-mono)}.timeline-id{font-size:.75rem;color:var(--color-text-muted);font-family:var(--font-mono);margin-top:var(--space-xs)}.time-window-editor{margin-top:var(--space-lg)}.tw-grid{display:grid;grid-template-columns:48px repeat(24,1fr);gap:1px;background:var(--color-border);border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;-webkit-user-select:none;user-select:none}.tw-corner{background:var(--color-surface)}.tw-hour-label{background:var(--color-surface);text-align:center;font-size:.6rem;color:var(--color-text-muted);padding:var(--space-xs) 0}.tw-row{display:contents}.tw-day-label{background:var(--color-surface);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:500;color:var(--color-text-muted);padding:var(--space-xs)}.tw-cell{background:var(--color-bg);min-height:28px;cursor:crosshair;transition:background .1s}.tw-cell:hover{background:var(--color-surface-hover)}.tw-cell--filled{background:var(--color-primary)}.tw-cell--filled:hover{background:var(--color-primary-hover)}.tw-cell--dragging{background:#6366f180}.tw-saving{color:var(--color-text-muted);font-size:.8rem;margin-top:var(--space-sm)}.tw-list{margin-top:var(--space-lg)}.tw-list h4{font-size:.9rem;font-weight:600;margin-bottom:var(--space-sm)}.tw-list-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:var(--space-xs);font-size:.8rem}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--space-md)}.login-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-2xl);width:100%;max-width:380px}.login-title{font-size:1.5rem;font-weight:700;text-align:center}.login-subtitle{text-align:center;color:var(--color-text-muted);font-size:.875rem;margin-bottom:var(--space-xl)}.login-form{display:flex;flex-direction:column;gap:var(--space-md)}.inline-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-lg);margin-bottom:var(--space-lg)}.settings-section{margin-bottom:var(--space-2xl)}.settings-description{color:var(--color-text-muted);font-size:.875rem;margin-bottom:var(--space-lg)}.empty-state{color:var(--color-text-muted);font-size:.875rem;padding:var(--space-lg);text-align:center}.runtime-select{padding:var(--space-sm) var(--space-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:.9rem;font-family:inherit;outline:none;transition:border-color .15s;cursor:pointer;min-width:220px}.runtime-select:focus{border-color:var(--color-primary)}.runtime-select:disabled{opacity:.5;cursor:not-allowed}.runtime-badge{display:inline-block;padding:1px var(--space-xs);border-radius:var(--radius-sm);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;vertical-align:middle;margin-left:var(--space-xs)}.runtime-badge--available{background:#22c55e26;color:var(--color-success);border:1px solid rgba(34,197,94,.35)}.runtime-badge--stub{background:#8b8fa326;color:var(--color-text-muted);border:1px solid rgba(139,143,163,.35)}.runtime-badge--deprecated{background:#f59e0b26;color:var(--color-warning);border:1px solid rgba(245,158,11,.35)}.runtime-hint{font-size:.75rem;color:var(--color-text-muted);margin-top:var(--space-xs)}.runtime-tooltip-wrap{position:relative;display:inline-block}@media (max-width: 768px){.sidebar{width:60px;overflow:hidden}.sidebar-brand,.sidebar-footer{padding:var(--space-sm);text-align:center}.sidebar-title{font-size:0}.sidebar-title:first-letter{font-size:1.25rem}.sidebar-subtitle{display:none}.nav-link{justify-content:center;padding:var(--space-sm);font-size:0}.nav-icon{font-size:1rem}.content{margin-left:60px;padding:var(--space-md)}.dashboard-grid{grid-template-columns:1fr}.dashboard-cards{grid-template-columns:repeat(2,1fr)}.form-row{flex-direction:column}}
