.container{min-height:100vh;display:flex;flex-direction:column}.header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-xl);border-bottom:1px solid var(--color-border);background:var(--color-bg-elevated);box-shadow:var(--shadow-sm);z-index:100}.header-left{display:flex;align-items:center;gap:var(--spacing-md)}.site-icon{width:24px;height:24px;object-fit:contain}.header h1{margin:0;font-size:var(--text-lg);font-weight:var(--font-normal);line-height:1;color:var(--color-text-secondary)}.header h1 .brand{color:var(--color-text);font-weight:var(--font-semibold)}.brand-link{text-decoration:none;color:inherit}.nav{display:flex;align-items:center;gap:var(--spacing-md)}.nav-link{color:var(--color-text-muted);font-size:var(--text-sm);text-decoration:none;line-height:1;transition:color var(--transition-fast)}.nav-link:hover,.nav-link.active{color:var(--color-text)}.header-actions{display:flex;align-items:center;gap:var(--spacing-sm)}.header-actions .edit-btn{text-align:center}.header .login-link{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--color-border);background:transparent;color:var(--color-text-secondary);font-size:var(--text-sm);text-decoration:none;line-height:1.5;flex-shrink:0}.header .login-link:hover{border-color:var(--color-border-hover);color:var(--color-text)}.main{flex:1;padding:var(--spacing-xl)}.main.centered{max-width:900px;margin:0 auto;width:100%}.main.narrow{max-width:600px;margin:0 auto;width:100%}@media(max-width:600px){.header{flex-wrap:wrap;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md)}.header h1{font-size:var(--text-base)}.nav{order:3;width:100%;justify-content:center;gap:var(--spacing-md);padding-top:var(--spacing-sm);border-top:1px solid var(--color-border);margin-top:var(--spacing-xs)}.main{padding:var(--spacing-md)}}.btn{display:inline-block;padding:var(--spacing-sm) var(--spacing-lg);border:1px solid var(--color-border);background:transparent;color:var(--color-text-secondary);font-size:var(--text-sm);font-family:inherit;line-height:1.5;text-decoration:none;cursor:pointer;transition:all var(--transition-fast)}.btn:hover{border-color:var(--color-text);color:var(--color-text)}.btn.primary{border-color:var(--color-accent);color:var(--color-accent)}.btn.primary:hover{background:var(--color-accent);color:var(--color-text)}.btn.danger:hover{border-color:var(--color-error);color:var(--color-error)}.btn.sm{padding:var(--spacing-xs) var(--spacing-md)}.error-message{padding:var(--spacing-md);margin-bottom:var(--spacing-lg);border:1px solid var(--color-error);color:var(--color-error);font-size:var(--text-sm)}.success-message{padding:var(--spacing-md);margin-bottom:var(--spacing-lg);border:1px solid var(--color-success);color:var(--color-success);font-size:var(--text-sm)}.warning-message{padding:var(--spacing-xs) var(--spacing-sm);color:var(--color-warning);font-size:var(--text-xs)}.warning-banner{padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-md);background:var(--color-warning-bg);border-left:3px solid var(--color-warning);color:var(--color-warning);font-size:var(--text-sm)}.empty{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-muted)}.empty p{margin:0 0 var(--spacing-md)}.action-form{display:contents}.form{display:flex;flex-direction:column;gap:var(--spacing-md)}.form-group{position:relative}.form-group input[type=text],.form-group input[type=url],.form-group input[type=email],.form-group input[type=password],.form-group input[type=number],.form-group textarea{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text);font-size:var(--text-sm);transition:border-color var(--transition-fast);-moz-appearance:textfield}.form-group textarea{resize:vertical;min-height:80px;font-family:monospace}.form-group input[type=number]::-webkit-outer-spin-button,.form-group input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--color-accent)}.form-group label{position:absolute;left:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);font-size:var(--text-sm);pointer-events:none;transition:all var(--transition-fast);background:var(--color-bg);padding:0 var(--spacing-xs)}.form-group:has(textarea) label{top:var(--spacing-md);transform:translateY(0)}.form-group input:focus+label,.form-group input:not(:placeholder-shown)+label,.form-group input[type=number]+label,.form-group textarea:focus+label,.form-group textarea:not(:placeholder-shown)+label{top:0;transform:translateY(-50%);font-size:var(--text-xs);color:var(--color-text-secondary)}.form-group input:focus+label,.form-group textarea:focus+label{color:var(--color-accent)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.checkbox-group{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.checkbox-group label{position:static;transform:none;pointer-events:auto}.checkbox-label{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--color-border);cursor:pointer;color:var(--color-text-muted);font-size:var(--text-sm);transition:all var(--transition-fast);width:fit-content}.checkbox-label:hover{border-color:var(--color-text-muted);color:var(--color-text-secondary)}.checkbox-label:has(input:checked){border-color:var(--color-accent);color:var(--color-accent)}.checkbox-label input[type=checkbox]{display:none}.form-actions{display:flex;justify-content:flex-end;gap:var(--spacing-md);margin-top:var(--spacing-md)}.services-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.services-list.has-groups{margin-top:var(--spacing-xl)}.service-group{margin-bottom:var(--spacing-xl)}.group-title{margin:0 0 var(--spacing-md);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text-secondary);text-transform:lowercase;border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-sm)}.service-card{position:relative;display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);border:1px solid var(--color-border);background:var(--color-bg-elevated);cursor:pointer;text-align:left;width:100%;transition:border-color var(--transition-fast),background-color var(--transition-fast)}.service-card:hover{border-color:var(--color-border-hover);background:var(--color-bg-hover)}.service-status{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:12px;height:12px;border-radius:50%;background:var(--color-text-muted);animation:pulse 2s ease-in-out infinite}.service-status.success{background:var(--color-success)}.service-status.error{background:var(--color-error)}.service-status.pending{background:var(--color-warning)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.service-info{flex:1}.service-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs)}.service-header h3{margin:0;font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text)}.visibility-badge{font-size:var(--text-xs);padding:2px 6px;border-radius:2px;text-transform:lowercase}.visibility-badge.private{background:var(--color-bg-hover);color:var(--color-text-muted);border:1px solid var(--color-border)}.service-info .description{margin:var(--spacing-sm) 0 0;color:var(--color-text-secondary);font-size:var(--text-sm)}.service-info .description-link{display:block;text-decoration:none;font-family:monospace}.service-info .description-link:hover{color:var(--color-accent);text-decoration:underline}.service-info .url{display:block;margin:0 0 var(--spacing-sm);color:var(--color-text-muted);font-size:var(--text-sm);font-family:monospace;text-decoration:none}.service-info .url:hover{color:var(--color-accent);text-decoration:underline}.meta{display:flex;gap:var(--spacing-md);font-size:var(--text-xs);color:var(--color-text-muted)}.meta .response-time{color:var(--color-text-secondary)}.meta .status-code{font-weight:var(--font-medium)}.meta .status-code.success{color:var(--color-success)}.meta .status-code.error{color:var(--color-error)}.meta .pending-text{color:var(--color-warning)}.service-actions{display:flex;gap:var(--spacing-sm);flex-shrink:0}@media(max-width:600px){.service-card{padding:var(--spacing-md)}.service-header h3{font-size:var(--text-base)}.service-info .url{font-size:var(--text-xs);word-break:break-all}.meta{flex-wrap:wrap;gap:var(--spacing-xs) var(--spacing-sm)}.meta .last-check{width:100%}.service-actions{flex-direction:column}}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-slide-in{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-lg);animation:modal-fade-in .15s ease-out}.modal{background:var(--color-bg);border:1px solid var(--color-border);width:100%;max-width:700px;max-height:90vh;overflow-y:auto;animation:modal-slide-in .15s ease-out}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border);background:var(--color-bg-elevated)}.modal-title{display:flex;align-items:center;gap:var(--spacing-md)}.modal-title h2{margin:0;font-size:var(--text-lg);font-weight:var(--font-semibold)}.modal-status{font-size:var(--text-xs);padding:2px 8px;border-radius:2px;text-transform:lowercase}.modal-status.success{background:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success-border)}.modal-status.error{background:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error-border)}.modal-close{background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted);font-size:var(--text-lg);width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast)}.modal-close:hover{border-color:var(--color-text);color:var(--color-text)}.modal-body{padding:var(--spacing-lg)}.loading{text-align:center;padding:var(--spacing-xl);color:var(--color-text-muted)}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.stat{background:var(--color-bg-elevated);border:1px solid var(--color-border);padding:var(--spacing-md);text-align:center}.stat-value{display:block;font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-text)}.stat-value.success,.stat-value.is-success{color:var(--color-success)}.stat-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:lowercase}.graph-section{margin-bottom:var(--spacing-lg)}.graph-section h3{margin:0 0 var(--spacing-sm);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary);text-transform:lowercase}.graph-wrapper{display:grid;grid-template-columns:60px 1fr;grid-template-rows:1fr 24px;gap:4px;background:var(--color-bg-elevated);border:1px solid var(--color-border);padding:var(--spacing-md);overflow:hidden}.y-axis{position:relative;grid-row:1;grid-column:1}.y-axis span{position:absolute;right:var(--spacing-xs);transform:translateY(-50%);font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap}.graph-container{position:relative;grid-row:1;grid-column:2;background:var(--color-bg);border:1px solid var(--color-border)}.graph{width:100%;height:180px;display:block}.grid-line{stroke:var(--color-border);stroke-width:.15}.data-point{cursor:pointer;transition:r .1s ease}.data-point:hover{r:2.5}.x-axis{position:relative;grid-row:2;grid-column:2}.x-axis span{position:absolute;transform:translate(-50%);font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap}.x-axis span:first-child{transform:translate(0)}.x-axis span:last-child{transform:translate(-100%)}.graph-tooltip{position:absolute;transform:translate(-50%,-100%);margin-top:-10px;background:var(--color-bg-elevated);border:1px solid var(--color-border);padding:var(--spacing-sm);z-index:10;pointer-events:none;min-width:150px;box-shadow:var(--shadow-md)}.graph-tooltip.below{transform:translate(-50%);margin-top:10px}.graph-tooltip.align-left{transform:translate(-90%,-100%)}.graph-tooltip.align-left.below{transform:translate(-90%)}.graph-tooltip.align-right{transform:translate(-10%,-100%)}.graph-tooltip.align-right.below{transform:translate(-10%)}.tooltip-time{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--spacing-xs);border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-xs)}.tooltip-response,.tooltip-status{display:flex;justify-content:space-between;font-size:var(--text-xs);margin-bottom:2px}.tooltip-label{color:var(--color-text-muted)}.tooltip-value{color:var(--color-text);font-weight:var(--font-medium)}.tooltip-value.success{color:var(--color-success)}.tooltip-value.error{color:var(--color-error)}.tooltip-error{font-size:var(--text-xs);color:var(--color-error);margin-top:var(--spacing-xs);padding-top:var(--spacing-xs);border-top:1px solid var(--color-border)}.checks-section{margin-bottom:var(--spacing-lg)}.checks-section h3{margin:0 0 var(--spacing-sm);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary);text-transform:lowercase}.checks-list{background:var(--color-bg-elevated);border:1px solid var(--color-border);max-height:200px;overflow-y:auto}.check-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);border-bottom:1px solid var(--color-border);font-size:var(--text-xs)}.check-item:last-child{border-bottom:none}.check-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.check-item.success .check-status-dot{background:var(--color-success)}.check-item.error .check-status-dot{background:var(--color-error)}.check-time{color:var(--color-text-muted);min-width:50px}.check-response{color:var(--color-text-secondary);min-width:60px}.check-code{font-weight:var(--font-medium);min-width:30px}.check-item.success .check-code{color:var(--color-success)}.check-item.error .check-code{color:var(--color-error)}.check-error{color:var(--color-error);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-section h3{margin:0 0 var(--spacing-sm);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary);text-transform:lowercase}.info-list{margin:0;background:var(--color-bg-elevated);border:1px solid var(--color-border);padding:var(--spacing-md)}.info-list dt{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:lowercase}.info-list dd{margin:0 0 var(--spacing-sm);font-size:var(--text-sm);color:var(--color-text);font-family:monospace}.info-list dd:last-child{margin-bottom:0}.info-list dd a{color:var(--color-accent);text-decoration:none}.info-list dd a:hover{text-decoration:underline}.info-list .expected-body{margin:0;padding:var(--spacing-sm);background:var(--color-bg);border:1px solid var(--color-border);font-size:var(--text-xs);white-space:pre-wrap;word-break:break-word;max-height:150px;overflow-y:auto}:root{--color-bg: #0d0d0d;--color-bg-elevated: #161616;--color-bg-hover: #1f1f1f;--color-border: #2a2a2a;--color-border-hover: #3a3a3a;--color-text: #e8e8e8;--color-text-secondary: #999999;--color-text-muted: #666666;--color-accent: #b71c1c;--color-accent-hover: #8b0000;--color-accent-muted: #1a0a0a;--color-accent-text: #e8e8e8;--color-success: #4caf50;--color-success-bg: #1a2e1a;--color-success-border: #2e7d32;--color-warning: #ff9800;--color-warning-bg: #2e2510;--color-warning-border: #e65100;--color-error: #f44336;--color-error-bg: #2a1515;--color-error-border: #c62828;--color-info: #2196f3;--color-info-bg: #102a3e;--color-info-border: #1565c0;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--transition-fast: .15s ease;--transition-base: .2s ease;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 2px 6px rgba(0, 0, 0, .4);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .5)}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.5;background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--color-accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-accent-hover)}button{font-family:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}input,textarea,select{font-family:inherit}::selection{background-color:var(--color-accent-muted);color:var(--color-text)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}