:root{--bg-canvas: #0f1117;--bg-panel: #1a1d27;--bg-panel-hover: #222636;--border-weak: #2e3345;--border-medium: #3a4060;--text-primary: #e2e8f0;--text-secondary: #8892a4;--text-disabled: #7a8499;--accent-blue: #3b82f6;--accent-blue-hover: #06b6d4;--link: #7dd3fc;--link-hover: #bae6fd;--link-visited: #c4b5fd;--status-up: #22c55e;--status-up-bg: rgba(34, 197, 94, .15);--status-down: #ef4444;--status-down-bg: rgba(239, 68, 68, .15);--status-unknown: #6b7280;--status-unknown-bg: rgba(107, 114, 128, .15);--severity-critical: #ef4444;--severity-warning: #eab308;--severity-info: #3b82f6;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--radius: 4px;--chart-plot-bg: rgba(255, 255, 255, .025);--chart-crosshair: #4b5266}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-family);font-size:14px;line-height:1.5}a{color:var(--link);text-decoration:none}a:hover{color:var(--link-hover)}a:visited{color:var(--link-visited)}@keyframes spin{to{transform:rotate(360deg)}}.spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--border-medium);border-top-color:var(--accent-blue);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}.refresh-button.is-refreshing svg{animation:spin .7s linear infinite}.app-shell{display:flex;flex-direction:column;min-height:100vh}.top-nav{display:flex;align-items:center;gap:24px;padding:0 20px;height:56px;background:var(--bg-panel);border-bottom:1px solid var(--border-weak);flex-shrink:0}.brand{font-weight:700;font-size:15px;letter-spacing:-.3px;color:var(--text-primary);display:flex;align-items:center;gap:8px}.brand span{color:var(--accent-blue)}.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--accent-blue)}.tab-bar{display:flex;gap:4px}.tab-button{background:transparent;border:none;color:var(--text-secondary);padding:8px 14px;border-radius:var(--radius);cursor:pointer;font-size:13px;font-weight:500}.tab-button:hover{background:var(--bg-panel-hover);color:var(--text-primary)}.tab-button.active{background:var(--bg-panel-hover);color:var(--text-primary);box-shadow:inset 0 -2px 0 var(--accent-blue)}.controls-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 20px;background:var(--bg-panel);border-bottom:1px solid var(--border-weak);flex-shrink:0}.controls-group{display:flex;align-items:center;gap:8px}.controls-group-right{margin-left:auto}.time-range-picker{position:relative}.time-range-trigger{white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}.time-range-popover{position:absolute;top:calc(100% + 6px);right:0;z-index:100;display:flex;gap:16px;background:var(--bg-panel);border:1px solid var(--border-medium);border-radius:var(--radius);padding:12px;box-shadow:0 8px 24px #00000059}.time-range-quick{display:flex;flex-direction:column;gap:2px;min-width:140px;border-right:1px solid var(--border-weak);padding-right:12px}.time-range-option{background:transparent;border:none;color:var(--text-primary);text-align:left;font-size:12px;padding:6px 8px;border-radius:var(--radius);cursor:pointer;white-space:nowrap}.time-range-option:hover{background:var(--bg-panel-hover)}.time-range-option.active{background:var(--bg-panel-hover);color:var(--accent-blue);font-weight:600}.time-range-absolute{display:flex;flex-direction:column;gap:8px;min-width:200px}.time-range-field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text-secondary)}.time-range-field input{background:var(--bg-canvas);color:var(--text-primary);border:1px solid var(--border-medium);border-radius:var(--radius);padding:5px 8px;font-size:12px;font-family:var(--font-family);color-scheme:dark}.grid-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.grid-header .panel-title{margin:0}.control-label{font-size:12px;font-weight:500;color:var(--text-secondary)}.control-select{background:var(--bg-canvas);color:var(--text-primary);border:1px solid var(--border-medium);border-radius:var(--radius);font-size:12px;font-family:var(--font-family);padding:5px 10px;cursor:pointer}.control-select:hover{border-color:var(--accent-blue)}.control-select:focus{outline:none;border-color:var(--accent-blue)}.refresh-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--bg-canvas);color:var(--text-primary);border:1px solid var(--border-medium);border-radius:var(--radius);cursor:pointer}.refresh-button:hover{border-color:var(--accent-blue);color:var(--accent-blue)}.page-content{flex:1;padding:20px;overflow-y:auto}.panel{background:var(--bg-panel);border:1px solid var(--border-weak);border-radius:var(--radius);padding:16px;margin-bottom:16px;position:relative}.global-loading-slot{position:relative;height:0;z-index:3}.loading-bar{position:absolute;top:0;left:0;right:0;height:2px;overflow:hidden;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);pointer-events:none;z-index:2}.loading-bar-track{position:relative;width:100%;height:100%;background:var(--border-weak)}.loading-bar-indicator{position:absolute;top:0;bottom:0;width:35%;background:linear-gradient(90deg,transparent,var(--accent-blue),var(--accent-blue-hover),transparent);animation:loading-bar-sweep 1.1s ease-in-out infinite}@keyframes loading-bar-sweep{0%{left:-35%}to{left:100%}}@media (prefers-reduced-motion: reduce){.loading-bar-indicator{animation:none;left:0;width:100%;opacity:.6}}.panel-title{font-size:13px;font-weight:600;color:var(--text-primary);margin:0 0 12px}.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.status-card{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--radius);border:1px solid var(--border-weak);background:var(--bg-canvas)}.status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.status-dot.up{background:var(--status-up)}.status-dot.down{background:var(--status-down);box-shadow:0 0 6px var(--status-down)}.status-dot.unknown{background:var(--status-unknown)}.status-name{font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}.badge.up{color:var(--status-up);background:var(--status-up-bg)}.badge.down{color:var(--status-down);background:var(--status-down-bg)}.badge.unknown{color:var(--status-unknown);background:var(--status-unknown-bg)}.badge.paused{color:var(--text-secondary);background:#94a3b826}.badge.critical{color:var(--severity-critical);background:#ef444426}.badge.warning{color:var(--severity-warning);background:#eab30826}.badge.info{color:var(--severity-info);background:#3b82f626}.summary-row{display:flex;gap:12px;margin-bottom:16px}.summary-tile{flex:1;background:var(--bg-panel);border:1px solid var(--border-weak);border-radius:var(--radius);padding:14px 16px}.summary-tile .value{font-size:26px;font-weight:600;line-height:1.2}.summary-tile .label{font-size:12px;color:var(--text-secondary);margin-top:4px}.trend-charts-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}@media (max-width: 900px){.trend-charts-row{grid-template-columns:1fr}}table.data-table{width:100%;border-collapse:collapse;font-size:13px}table.data-table th{text-align:left;color:var(--text-secondary);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--border-weak)}table.data-table td{padding:8px 10px;border-bottom:1px solid var(--border-weak);color:var(--text-primary)}table.data-table tr:hover td{background:var(--bg-panel-hover)}table.data-table.is-refreshing{opacity:.5;transition:opacity .15s ease}.sortable-th{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.sortable-th:hover{color:var(--text-primary)}.sort-indicator{font-size:10px;color:var(--accent-blue)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:flex-start;justify-content:center;padding:60px 20px;z-index:1000;overflow-y:auto}.modal-panel{background:var(--bg-panel);border:1px solid var(--border-medium);border-radius:var(--radius);width:100%;box-shadow:0 8px 32px #0006}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-weak)}.modal-title{font-size:14px;font-weight:600;color:var(--text-primary);margin:0}.modal-close{background:transparent;border:none;color:var(--text-secondary);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px}.modal-close:hover{color:var(--text-primary)}.modal-body{padding:18px}.detail-grid{display:grid;grid-template-columns:140px 1fr;row-gap:10px;column-gap:12px;font-size:13px;margin-bottom:18px}.detail-grid dt{color:var(--text-secondary)}.detail-grid dd{margin:0;color:var(--text-primary)}.notes-list{display:flex;flex-direction:column;gap:10px;margin:10px 0 14px}.note-item{background:var(--bg-canvas);border:1px solid var(--border-weak);border-radius:var(--radius);padding:8px 10px;font-size:13px}.note-item .note-meta{color:var(--text-secondary);font-size:11px;margin-bottom:4px}.note-form{display:flex;gap:8px;margin-top:8px}.note-form input,.note-form textarea{background:var(--bg-canvas);color:var(--text-primary);border:1px solid var(--border-medium);border-radius:var(--radius);padding:6px 8px;font-size:13px;font-family:var(--font-family)}.note-form input[name=author]{width:120px;flex-shrink:0}.note-form textarea{flex:1;resize:vertical;min-height:34px}.btn{background:var(--accent-blue);color:#fff;border:none;border-radius:var(--radius);padding:6px 14px;font-size:13px;font-weight:500;cursor:pointer}.btn:hover{background:var(--accent-blue-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}.link-button{background:none;border:none;color:var(--link);cursor:pointer;padding:0;font-size:inherit;font-family:inherit;text-align:left}.link-button:hover{color:var(--link-hover);text-decoration:underline}.empty-state,.error-state,.loading-state{color:var(--text-secondary);font-size:13px;padding:24px;text-align:center}.error-state{color:var(--status-down)}.request-log-panel{background:var(--bg-panel);border:1px solid var(--border-weak);border-radius:var(--radius);padding:10px 16px;margin-top:4px}.request-log-panel summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--text-secondary);-webkit-user-select:none;user-select:none}.request-log-panel summary:hover{color:var(--text-primary)}.request-log-panel[open] summary{margin-bottom:10px}.request-log-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}.request-log-entry{background:var(--bg-canvas);border:1px solid var(--border-weak);border-radius:var(--radius);padding:6px 8px}.request-log-entry.is-error{border-color:var(--status-down)}.request-log-line{display:flex;align-items:center;gap:8px;font-size:11px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.request-log-time{color:var(--text-disabled);flex-shrink:0}.request-log-method{color:var(--accent-blue);font-weight:700;flex-shrink:0}.request-log-url{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.request-log-status{color:var(--text-secondary);flex-shrink:0;font-weight:600}.request-log-status.is-ok{color:var(--status-up)}.request-log-status.is-error{color:var(--status-down)}.request-log-duration{color:var(--text-disabled);flex-shrink:0;min-width:44px;text-align:right}.timeseries-chart{position:relative}.bar-chart{display:flex;flex-direction:column;gap:4px}.bar-row{display:flex;align-items:center;gap:10px;font-size:12px}.bar-label{flex:0 0 250px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-track{flex:1;height:14px;background:var(--chart-plot-bg);border:1px solid var(--border-weak);border-radius:2px;overflow:hidden}.bar-fill{height:100%;transition:width .2s ease}.bar-value{flex:0 0 72px;text-align:right;color:var(--text-primary);font-weight:600}@media (max-width: 700px){.bar-label{flex-basis:130px}}.chart-tooltip{position:absolute;transform:translate(-50%);background:var(--bg-panel-hover);border:1px solid var(--border-medium);border-radius:var(--radius);padding:6px 10px;font-size:11px;white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px #0006;z-index:5}.chart-tooltip-time{color:var(--text-secondary);margin-bottom:4px;font-weight:600}.chart-tooltip-row{display:flex;align-items:center;gap:6px}.chart-tooltip-swatch{width:8px;height:8px;border-radius:2px;flex-shrink:0}.chart-tooltip-label{color:var(--text-secondary)}.chart-tooltip-value{color:var(--text-primary);font-weight:600;margin-left:auto;padding-left:10px}.chart-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:6px}.chart-legend-item{display:flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--text-secondary);font-size:12px;cursor:pointer;padding:2px 4px}.chart-legend-item:hover{color:var(--text-primary)}.chart-legend-item.is-hidden{opacity:.4;text-decoration:line-through}.chart-legend-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0}.request-log-response{margin:6px 0 0;font-size:11px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;color:var(--text-secondary);white-space:pre-wrap;word-break:break-all}.app-boot{min-height:100vh;background:var(--bg-canvas)}.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%,rgba(59,130,246,.1),transparent 70%),var(--bg-canvas)}.login-card{width:100%;max-width:400px;background:var(--bg-panel);border:1px solid var(--border-weak);border-radius:12px;padding:28px;box-shadow:0 12px 40px #00000073}.login-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}.login-title{margin:0;font-size:17px;font-weight:650;color:var(--text-primary);letter-spacing:-.2px}.login-sub{margin:2px 0 0;font-size:12px;color:var(--text-secondary)}.login-label{display:block;font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:6px}.login-input{width:100%;box-sizing:border-box;padding:10px 12px;background:var(--bg-canvas);border:1px solid var(--border-medium);border-radius:var(--radius);color:var(--text-primary);font-size:14px;font-family:inherit}.login-input:focus{outline:none;border-color:var(--accent-blue)}.login-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.22em;font-size:18px;text-align:center;text-transform:uppercase}.login-btn{width:100%;margin-top:14px;padding:10px;background:var(--accent-blue);color:#fff;border:0;border-radius:var(--radius);font-size:14px;font-weight:500;font-family:inherit;cursor:pointer}.login-btn:hover:not(:disabled){background:var(--accent-blue-hover)}.login-btn:disabled{opacity:.55;cursor:not-allowed}.login-btn.secondary{background:transparent;color:var(--text-secondary);border:1px solid var(--border-weak)}.login-btn.secondary:hover{background:var(--bg-panel-hover);color:var(--text-primary)}.login-error,.login-info{margin-top:14px;padding:9px 12px;border-radius:var(--radius);font-size:13px;line-height:1.45}.login-error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#fca5a5}.login-info{background:#3b82f61a;border:1px solid rgba(59,130,246,.3);color:#93c5fd}.nav-user{margin-left:auto;display:flex;align-items:center;gap:10px}.nav-user-email{font-size:12px;color:var(--text-secondary);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-signout{background:transparent;border:1px solid var(--border-weak);color:var(--text-secondary);border-radius:var(--radius);padding:4px 10px;font-size:12px;font-family:inherit;cursor:pointer}.nav-signout:hover{border-color:var(--accent-blue);color:var(--text-primary)}.login-devcode{margin-top:14px;padding:10px 12px;border-radius:var(--radius);font-size:12px;line-height:1.5;background:#eab3081a;border:1px solid rgba(234,179,8,.3);color:#fcd34d}.login-devcode code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--text-primary);background:#00000059;padding:1px 6px;border-radius:4px}.summary-tile-feature{border-left:2px solid var(--accent-blue)}.summary-tile-feature .tile-head{display:flex;align-items:center;gap:8px;margin-bottom:2px}.summary-tile-feature .tile-head .label{margin:0}