@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap");:root{--color-background:#f9f9ff;--color-on-background:#141b2b;--color-surface:#ffffff;--color-surface-dim:#d3daef;--color-surface-bright:#f9f9ff;--color-surface-container-lowest:#ffffff;--color-surface-container-low:#f1f3ff;--color-surface-container:#e9edff;--color-surface-container-high:#e1e8fd;--color-surface-container-highest:#dce2f7;--color-on-surface:#141b2b;--color-on-surface-variant:#464555;--color-inverse-surface:#293040;--color-inverse-on-surface:#edf0ff;--color-outline:#777587;--color-outline-variant:#c7c4d8;--color-surface-tint:#4d44e3;--color-primary:#3525cd;--color-on-primary:#ffffff;--color-primary-container:#4f46e5;--color-on-primary-container:#dad7ff;--color-inverse-primary:#c3c0ff;--color-secondary:#4648d4;--color-on-secondary:#ffffff;--color-secondary-container:#6063ee;--color-on-secondary-container:#fffbff;--color-tertiary:#7e3000;--color-on-tertiary:#ffffff;--color-tertiary-container:#a44100;--color-on-tertiary-container:#ffd2be;--color-error:#ba1a1a;--color-on-error:#ffffff;--color-error-container:#ffdad6;--color-on-error-container:#93000a;--color-status-up:#10B981;--color-status-down:#EF4444;--color-status-warning:#F59E0B;--color-bg-subtle:#F1F5F9;--color-radiant-blue-glare:rgba(129,140,248,0.15);--rounded-sm:0.25rem;--rounded-default:0.5rem;--rounded-md:0.75rem;--rounded-lg:1rem;--rounded-xl:1.5rem;--rounded-full:9999px;--spacing-unit:4px;--container-max:1280px;--sidebar-width:260px;--shadow-sm:0px 1px 3px rgba(0,0,0,0.05);--shadow-md:0px 10px 15px rgba(79,70,229,0.08);--shadow-lg:0px 20px 25px rgba(0,0,0,0.12)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-background);color:var(--color-on-background);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}.display-lg{font-size:48px;font-weight:700;line-height:56px;letter-spacing:-.02em}.headline-lg{font-size:32px;font-weight:600;line-height:40px;letter-spacing:-.01em}.headline-md{font-size:24px;font-weight:600;line-height:32px}.body-lg{font-size:18px;font-weight:400;line-height:28px}.body-md{font-size:16px;font-weight:400;line-height:24px}.body-sm{font-weight:400}.body-sm,.label-md{font-size:14px;line-height:20px}.label-md{font-weight:600;letter-spacing:.05em;text-transform:uppercase}.code-sm{font-family:JetBrains Mono,monospace;font-size:13px;font-weight:400;line-height:18px}.container{width:100%;max-width:var(--container-max);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}.flex-center{display:flex;align-items:center;justify-content:center}.dashboard-layout{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background-color:var(--color-surface);border-right:1px solid var(--color-surface-container-highest);padding:24px;display:flex;flex-direction:column;position:fixed;height:100vh;left:0;top:0;z-index:10}.main-content{flex:1;margin-left:var(--sidebar-width);padding:40px 24px;max-width:calc(100vw - var(--sidebar-width))}.sidebar-logo{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:700;color:var(--color-primary);margin-bottom:40px;text-decoration:none}.sidebar-nav{display:flex;flex-direction:column;gap:8px;list-style:none}.sidebar-nav-item a{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--rounded-default);color:var(--color-on-surface-variant);text-decoration:none;font-weight:500;font-size:14px;transition:all .2s ease}.sidebar-nav-item a:hover{background-color:var(--color-surface-container-low);color:var(--color-primary)}.sidebar-nav-item.active a{background-color:var(--color-radiant-blue-glare);color:var(--color-primary-container);font-weight:600}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--rounded-default);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;border:1px solid transparent;text-decoration:none}.btn-primary{background-color:var(--color-primary-container);color:var(--color-on-primary)}.btn-primary:hover{background-color:#6366F1}.btn-primary:focus{outline:none;box-shadow:0 0 0 2px var(--color-background),0 0 0 4px var(--color-primary-container)}.btn-secondary{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-outline-variant)}.btn-secondary:hover{background-color:var(--color-surface-container-low)}.btn-danger{background-color:var(--color-error);color:var(--color-on-error)}.btn-danger:hover{opacity:.9}.card{background-color:var(--color-surface);border-radius:var(--rounded-default);border:1px solid var(--color-surface-container-highest);padding:24px;box-shadow:var(--shadow-sm);transition:box-shadow .3s ease,transform .3s ease}.card:hover{box-shadow:var(--shadow-md)}.card-title{font-size:18px;font-weight:600;margin-bottom:16px;color:var(--color-on-background)}.monitor-card{border-left:4px solid var(--color-surface-container-highest)}.monitor-card.up{border-left-color:var(--color-status-up)}.monitor-card.down{border-left-color:var(--color-status-down)}.monitor-card.paused{border-left-color:var(--color-outline)}.form-group{margin-bottom:20px}.form-label{display:block;font-size:14px;font-weight:600;margin-bottom:8px;color:var(--color-on-surface)}.form-input,.form-select,.form-textarea{width:100%;padding:10px 14px;border-radius:var(--rounded-sm);border:1px solid var(--color-surface-container-highest);background-color:#fafbfc;font-family:inherit;font-size:15px;color:var(--color-on-surface);transition:all .2s ease}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-primary-container);background-color:var(--color-surface);box-shadow:0 0 0 3px rgba(79,70,229,.15)}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--rounded-full);font-size:12px;font-weight:600;text-transform:uppercase}.status-badge.up{background-color:rgba(16,185,129,.1);color:var(--color-status-up)}.status-badge.down{background-color:rgba(239,68,68,.1);color:var(--color-status-down)}.status-badge.paused{background-color:rgba(107,114,128,.1);color:var(--color-outline)}.status-pip{width:8px;height:8px;border-radius:var(--rounded-full);display:inline-block;position:relative}.status-pip.up{background-color:var(--color-status-up)}.status-pip.down{background-color:var(--color-status-down)}.status-pip.paused{background-color:var(--color-outline)}.status-pip.ping:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--rounded-full);animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite;opacity:.75}.status-pip.up.ping:after{border:2px solid var(--color-status-up)}.status-pip.down.ping:after{border:2px solid var(--color-status-down)}@keyframes ping{75%,to{transform:scale(3);opacity:0}}.uptime-bar-container{display:flex;gap:3px;align-items:center}.uptime-bar{width:5px;height:24px;border-radius:2px;background-color:var(--color-surface-container-highest);transition:transform .1s ease}.uptime-bar.up{background-color:var(--color-status-up)}.uptime-bar.down{background-color:var(--color-status-down)}.uptime-bar.paused{background-color:var(--color-outline-variant)}.uptime-bar:hover{transform:scaleY(1.2)}.header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.header-title-group{display:flex;flex-direction:column;gap:4px}.header-subtitle{color:var(--color-on-surface-variant);font-size:14px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:32px}.stat-card{display:flex;align-items:center;justify-content:space-between}.stat-info{display:flex;flex-direction:column}.stat-label{font-size:13px;font-weight:600;color:var(--color-on-surface-variant);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}.stat-value{font-size:28px;font-weight:700;color:var(--color-on-background)}.stat-icon{width:44px;height:44px;background-color:var(--color-surface-container-low);color:var(--color-primary);display:flex;align-items:center;justify-content:center}.stat-icon,.table-container{border-radius:var(--rounded-default)}.table-container{overflow-x:auto;border:1px solid var(--color-surface-container-highest);background-color:var(--color-surface)}.table{width:100%;border-collapse:collapse;text-align:left}.table th{padding:16px 24px;font-size:12px;font-weight:700;color:var(--color-on-surface-variant);text-transform:uppercase;letter-spacing:.05em;background-color:#fafbfc}.table td,.table th{border-bottom:1px solid var(--color-surface-container-highest)}.table td{padding:18px 24px;font-size:14px;color:var(--color-on-surface)}.table tr:last-child td{border-bottom:none}.table tr:hover td{background-color:#fafbfc}.chart-container{height:250px;margin-top:24px;position:relative}.screenshot-comparison{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}.screenshot-preview{border:1px solid var(--color-surface-container-highest);border-radius:var(--rounded-default);padding:12px;background-color:var(--color-background);text-align:center}.screenshot-preview img{max-width:100%;max-height:400px;border-radius:var(--rounded-sm);box-shadow:var(--shadow-sm);object-fit:contain}.screenshot-title{font-size:14px;font-weight:600;margin-bottom:8px;color:var(--color-on-surface-variant)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{display:grid;gap:24px}.grid-3{grid-template-columns:repeat(3,1fr)}@media (max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr}.dashboard-layout{flex-direction:column}.sidebar{position:relative;width:100%;height:auto;border-right:none;border-bottom:1px solid var(--color-surface-container-highest)}.main-content{margin-left:0;max-width:100%;padding:24px 16px}}