/* UpKeeper visual system: shared by marketing, workspace and customer status pages. */
.notice-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.notice-update { border-left: 2px solid var(--line); padding-left: 1rem; margin-top: 1rem; }
.notice-maintenance { background: var(--warning-soft); color: var(--warning); }
.errorlist { color: var(--danger); margin: .5rem 0; font-size: .875rem; }
.legal-copy { line-height: 1.85; }
.legal-copy h2 { font-size: 1.25rem; font-weight: 700; margin: 1.75rem 0 .5rem; }
.legal-copy p { margin: .75rem 0; }
.legal-copy ul { list-style: disc; padding-left: 1.5rem; }
.legal-copy a { color: var(--brand); text-decoration: underline; }
:root {
  color-scheme: light;
  --ink: #102f3e; --muted: #536e7b; --line: #dce8e9;
  --surface: #fff; --canvas: #f3f7f7; --surface-alt: #edf4f4;
  --brand: #087f83; --brand-dark: #08636b; --brand-soft: #e1f5ee;
  --mint: #00dfa0; --cyan: #009dea; --chart: #009d9b;
  --success: #12845b; --success-soft: #e0f6eb;
  --shadow: 0 2px 8px rgb(9 41 54 / 3%);
}
html[data-theme="dark"] {
  --ink: #e7f3f5; --muted: #9cb6c2; --line: #24404d;
  --surface: #0c2736; --canvas: #071c29; --surface-alt: #102e3e;
  --brand: #43dabb; --brand-dark: #85ebd1; --brand-soft: #123e3c;
  --chart: #26d3bb; --success: #45daa1; --success-soft: #123e32;
  --warning: #f6bb53; --warning-soft: #3e321d; --danger: #ff8097;
  --danger-soft: #412532; --info: #70cfff; --info-soft: #14364a;
  --shadow: 0 2px 8px rgb(0 0 0 / 8%);
}
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #a4ecda; color: #072b38; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
input, select, textarea { accent-color: var(--brand); min-width: 0; }
input::placeholder { color: var(--muted); opacity: .8; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--surface); color: var(--ink); padding: .8rem; border-radius: 8px; }
.skip-link:focus { top: 1rem; }
.app-shell, html[data-theme="dark"] .app-shell { background: var(--canvas); }
.app-shell > div { max-width: 1320px; }
.app-sidebar { width: 248px; flex-shrink: 0; z-index: 30; background: var(--surface); }
.app-sidebar > nav { overflow-y: auto; }
.app-sidebar > div:first-child { min-height: 81px; display: flex; align-items: center; }
.app-nav { height: 81px; border-bottom: 1px solid var(--line); box-shadow: none; gap: 1rem; }
.brand-wordmark { letter-spacing: -.045em; font-weight: 750; color: var(--ink); }
.brand-wordmark span { color: var(--brand); }
.brand-logo-switch, .brand-logo { width: 38px; height: 38px; }
.workspace-label { font-size: .68rem; letter-spacing: .12em; color: var(--muted); white-space: nowrap; }
.workspace-label span { color: var(--line); margin: 0 1rem; }
.nav-link, .site-nav-group summary { color: var(--muted); font-size: .86rem; padding-top: .7rem; padding-bottom: .7rem; }
.nav-link-active { background: var(--brand-soft); color: var(--brand); box-shadow: inset 3px 0 var(--brand); }
.nav-link:hover, .site-nav-group summary:hover, .site-nav-item:hover { background: var(--surface-alt); color: var(--ink); }
.site-nav-item { color: var(--muted); }
.site-nav-item[hidden] { display: none; }
.site-nav-item.is-active { background: var(--brand-soft); color: var(--brand); }
.site-nav-dot { background: var(--muted); }
.site-nav-item.is-active .site-nav-dot { background: var(--brand); }
.site-nav-count, .site-nav-search { background: var(--surface-alt); color: var(--muted); }
.site-nav-search { border-color: var(--line); border-radius: 8px; padding: .65rem; }
.site-nav-search:focus { background: var(--surface); border-color: var(--brand); box-shadow: none; }
.sidebar-plan { border: 1px solid var(--line); background: var(--surface-alt); }
.sidebar-plan > div:last-child { color: var(--ink); text-transform: capitalize; }
.theme-toggle, html[data-theme="dark"] .theme-toggle { border: 1px solid var(--line); background: var(--surface); color: var(--muted); height: 36px; width: 36px; }
.theme-toggle:hover { color: var(--brand); background: var(--brand-soft); }
.relative.group:focus-within > .absolute { visibility: visible; opacity: 1; }
.mobile-menu { position: relative; }
.mobile-menu summary { list-style: none; cursor: pointer; padding: .5rem; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu nav { position: absolute; right: 0; top: 3rem; width: min(270px, 85vw); max-height: 65vh; overflow: auto; padding: .65rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px #0003; z-index: 50; }
.mobile-menu a { display: block; padding: .8rem; color: var(--ink); border-radius: 6px; overflow-wrap: anywhere; }
.mobile-menu a:hover { background: var(--brand-soft); }
.page-heading { color: var(--ink); font-weight: 730; letter-spacing: -.045em; line-height: 1.15; }
.eyebrow { color: var(--brand); letter-spacing: .12em; font-size: .65rem; font-weight: 750; }
.panel, .site-card, .auth-card, .panel-soft { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.site-card:hover { transform: none; border-color: var(--brand); box-shadow: var(--shadow); }
.field, .chart-select { color: var(--ink); border-color: var(--line); background: var(--surface); border-radius: 8px; }
.field:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; background: #087f83; color: white; border-radius: 8px; font-weight: 650; box-shadow: none; }
.btn-primary:hover { background: #07686c; transform: none; box-shadow: none; }
html[data-theme="dark"] .btn-primary { background: #3adbb4; color: #062b31; }
html[data-theme="dark"] .btn-primary:hover { background: #79edcf; }
.btn-secondary { background: var(--surface-alt); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.btn-secondary:hover { border-color: var(--brand); }
button:disabled { opacity: .5; cursor: not-allowed; }
.plan-badge { background: var(--brand-soft); color: var(--brand); }
.metric-label, .chart-caption, .chart-footnote, .detail-kpi span, .detail-kpi small, .detail-list dt { color: var(--muted); }
.metric-label { font-size: .65rem; letter-spacing: .07em; }
.monitor-kpi-value, .detail-kpi strong { font-variant-numeric: tabular-nums; font-weight: 650; }
.monitor-identity a, .monitor-kpi-value, .detail-kpi strong, .detail-list dd, .chart-heading h2, .detail-section-title { color: var(--ink); }
.monitor-identity div { color: var(--muted); }
.monitor-status i { opacity: 1; box-shadow: none; }
.monitor-status-pending, .status-overall-pending { color: var(--muted); background: var(--surface-alt); }
.site-row, .detail-hero { background: var(--surface); }
.monitor-history, .history-row { background: var(--surface-alt); border-color: var(--line); }
.monitor-kpi, .detail-list > div { border-color: var(--line); }
.detail-kpi { background: var(--surface); border-radius: 12px; min-height: 112px; padding: 1rem; }
.detail-kpi-primary, html[data-theme="dark"] .detail-kpi-primary { border-color: var(--brand); background: var(--brand-soft); }
.detail-kpi-primary strong, .detail-kpi-primary small, .detail-url, .monitor-detail-link { color: var(--brand); }
.detail-url:hover { color: var(--brand-dark); }
.uptime-cell.is-empty { background: var(--line); }
.uptime-cell.is-up { background: #14b88a; }
.uptime-cell.is-degraded { background: #73bfaf; }
.uptime-legend { flex-wrap: wrap; color: var(--muted); }
.uptime-legend-item.empty { color: var(--muted); }
.status-page-settings { background: var(--surface); }
.status-site-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.status-overall-up { color: var(--success); }
.status-overall-down { color: var(--danger); }
.deleted-monitors, .deleted-monitor-row { background: var(--surface); border-color: var(--line); }
.restore-monitor-button { color: var(--warning); }
.alert-rule-delete { background: var(--surface); color: var(--danger); border-color: var(--line); }
.alert-rule-checkbox:checked + span { color: var(--success); }
.alert-rule-enabled { color: var(--muted); }
.alert-info { background: var(--info-soft); color: var(--info); border-color: var(--info); }
.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.email-verification-banner { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent); border-left: 4px solid var(--warning); border-radius: 12px; background: var(--warning-soft); color: var(--ink); }
.email-verification-banner p { margin-top: .12rem; color: var(--muted); font-size: .875rem; }
.email-verification-banner form { margin-left: auto; flex: 0 0 auto; }
.email-verification-icon { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; flex: 0 0 auto; border-radius: 999px; background: var(--warning); color: #fff; font-size: .8rem; font-weight: 850; }
.email-verification-button { border: 1px solid var(--warning); border-radius: 9px; padding: .55rem .8rem; color: var(--warning); background: var(--surface); font-size: .8rem; font-weight: 750; }
.email-verification-button:hover { background: color-mix(in srgb, var(--warning-soft) 72%, var(--surface)); }
.email-verification-sent { display: inline-flex; align-items: center; min-height: 2.25rem; margin-left: auto; padding: .45rem .75rem; color: var(--success); font-size: .82rem; font-weight: 800; }
@media (max-width: 640px) { .email-verification-banner { align-items: flex-start; flex-wrap: wrap; } .email-verification-banner form, .email-verification-sent { width: 100%; margin-left: 2.5rem; } }
.auth-card { margin-top: 3vh; padding: 2.25rem; border-top: 3px solid var(--brand); }
.auth-card h1 { letter-spacing: -.045em; }
.dashboard-header { gap: 1.5rem; flex-wrap: wrap; }
.overview-grid { gap: 1rem; }
.overview-grid > div { padding: 1.3rem; }
.overview-icon { width: 42px; height: 42px; border-radius: 10px; color: var(--brand); background: var(--brand-soft); display: flex; align-items: center; justify-content: center; }
.overview-icon svg { width: 22px; height: 22px; }
.dashboard-settings > summary { cursor: pointer; padding: 1.4rem; color: var(--ink); font-weight: 650; }
.dashboard-settings[open] > summary { border-bottom: 1px solid var(--line); }
.dashboard-settings > section { border: 0; box-shadow: none; margin: 0; }
.monitor-section-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.monitor-section-title h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.025em; }
.monitor-section-title a { color: var(--brand); font-size: .8rem; }
/* Marketing layout: editorial copy with a clearly labelled monitoring illustration. */
.landing-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; padding: 4.5rem 0 5rem; }
.landing-hero h1 { font-size: clamp(2.7rem, 4.5vw, 4.4rem); line-height: 1.07; }
.landing-hero .hero-copy > p { font-size: 1.1rem; line-height: 1.8; max-width: 34rem; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.hero-actions a { padding: .85rem 1.35rem; }
.hero-note { font-size: .75rem; margin-top: 1rem; color: var(--muted); }
.product-preview { background: #092737; color: #eaf7f7; border: 1px solid #254b58; border-radius: 18px; padding: 1.6rem; box-shadow: 0 24px 60px rgb(6 38 51 / 14%); }
.preview-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .72rem; color: #a0bac4; border-bottom: 1px solid #254b58; padding-bottom: 1.1rem; }
.preview-top strong { font-size: .9rem; color: #eaf7f7; }
.preview-status { display: flex; align-items: center; gap: .5rem; color: #3be0aa; font-size: .8rem; padding: 1.5rem 0 1rem; }
.preview-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.preview-number { font-size: 3.2rem; font-weight: 600; letter-spacing: -.05em; line-height: 1.1; }
.preview-number small { font-size: .8rem; font-weight: 400; color: #a0bac4; letter-spacing: 0; }
.preview-bars { height: 38px; margin: 1.5rem 0 .5rem; background: repeating-linear-gradient(90deg,#23d9a3 0,#23d9a3 5px,transparent 5px,transparent 9px); border-radius: 3px; }
.preview-axis { display: flex; justify-content: space-between; color: #a0bac4; font-size: .65rem; }
.preview-chart { width: 100%; height: 85px; margin-top: 1.7rem; }
.preview-footer { border-top: 1px solid #254b58; margin-top: 1rem; padding-top: 1rem; display: flex; justify-content: space-between; font-size: .75rem; color: #a0bac4; }
.preview-footer strong { color: #eaf7f7; }
.landing-features { border-top: 1px solid var(--line); background: transparent; border-radius: 0; padding: 3.5rem 0; margin-bottom: 1rem; }
.landing-features > div:first-child { text-align: left; margin-bottom: 2rem; }
.landing-features .grid > div { background: var(--surface); border-color: var(--line); box-shadow: none; border-radius: 12px; }
#pricing { padding-top: 2rem; }
footer { background: var(--surface-alt); }
footer a:hover { color: var(--brand); }
/* Utilities retained by server-rendered forms and HTMX fragments. */
.text-slate-500, .text-slate-400, .text-gray-400 { color: var(--muted); }
.bg-indigo-100, .bg-blue-100 { background: var(--brand-soft); }
.text-indigo-900, .text-blue-700, .text-blue-800 { color: var(--brand-dark); }
.bg-indigo-600, .bg-blue-600 { background: #087f83; }
.border-indigo-50, .border-indigo-100, .border-blue-100, .border-slate-100 { border-color: var(--line); }
html[data-theme="dark"] .text-green-600, html[data-theme="dark"] .text-green-700, html[data-theme="dark"] .text-emerald-700 { color: var(--success); }
html[data-theme="dark"] .bg-green-100, html[data-theme="dark"] .bg-emerald-50 { background: var(--success-soft); }
html[data-theme="dark"] .text-red-600, html[data-theme="dark"] .text-red-700, html[data-theme="dark"] .text-rose-600, html[data-theme="dark"] .text-rose-700, html[data-theme="dark"] .text-rose-800 { color: var(--danger); }
html[data-theme="dark"] .bg-red-100, html[data-theme="dark"] .bg-rose-50 { background: var(--danger-soft); }
html[data-theme="dark"] .bg-amber-50 { background: var(--warning-soft); }
html[data-theme="dark"] .text-amber-800 { color: var(--warning); }
html[data-theme="dark"] .hover\:bg-gray-100:hover { background: var(--surface-alt); }
@media (max-width: 1023px) { .landing-hero { gap: 2rem; } }
@media (max-width: 767px) {
  .app-nav { min-height: 72px; height: auto; padding: .85rem 1rem; flex-wrap: wrap; }
  .nav-controls { gap: .4rem; margin-left: auto; }
  .brand-wordmark { font-size: .95em; }
  .brand-logo-switch, .brand-logo { width: 32px; height: 32px; }
  .app-shell > div { padding: 1.5rem 1rem; }
  .landing-hero { grid-template-columns: 1fr; padding: 1.5rem 0 3rem; gap: 2.5rem; }
  .landing-hero h1 { font-size: 2.8rem; }
  .product-preview { padding: 1.25rem; }
  .dashboard-header > div, .dashboard-header > div:last-child { width: 100%; }
  .dashboard-header > div:last-child { justify-content: space-between; }
  #add-site form > div { flex-direction: column; }
  .auth-card { padding: 1.5rem; }
  .detail-kpi { min-height: 100px; }
  footer .flex { flex-wrap: wrap; }
}
.public-status-body { background: var(--canvas); color: var(--ink); }
.public-status-body .status-page { max-width: 1100px; padding: 3.5rem 1.5rem; }
.public-status-header { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 2.5rem; }
.public-status-header h1 { overflow-wrap: anywhere; }
.public-status-updated { flex-shrink: 0; color: var(--muted); font-size: .75rem; line-height: 1.8; text-align: right; }
.public-status-updated a { color: var(--brand); }
.public-status-banner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 1.15rem; margin-bottom: 1.5rem; }
.public-language-switch { display: flex; justify-content: flex-end; gap: .3rem; max-width: 56rem; margin: 0 auto; padding: 1rem 1rem 0; }
.public-language-switch button { padding: .25rem .45rem; border-radius: 6px; color: var(--muted); font-size: .7rem; font-weight: 800; }
.public-language-switch button[aria-current="true"] { background: var(--brand-soft); color: var(--brand); }
.public-service-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
.public-service-card { padding: 1.6rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.public-service-card:only-child { grid-column: 1 / -1; }
.public-service-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--line); padding-bottom: 1.1rem; }
.public-service-top h2 { font-weight: 650; overflow-wrap: anywhere; min-width: 0; }
.public-service-uptime { padding: 1.5rem 0; }
.public-service-uptime .preview-number { margin-top: .5rem; font-variant-numeric: tabular-nums; }
.public-service-uptime small { margin-left: .5rem; color: var(--muted); }
.public-service-history .uptime-strip { min-width: 0; gap: 4px; }
.public-service-history .uptime-cell { height: 35px; border-radius: 3px; }
.public-service-history .uptime-legend { justify-content: flex-start; margin-bottom: .75rem; }
.public-service-latency { padding-top: 1.75rem; }
.public-chart { position: relative; height: 160px; }
.public-service-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; font-size: .75rem; color: var(--muted); }
.public-service-footer strong { color: var(--ink); margin-left: .3rem; }
.public-status-note { text-align: center; font-size: .72rem; line-height: 1.8; color: var(--muted); margin-top: 2rem; }
@media (max-width: 767px) {
  .public-status-body .status-page { padding: 2rem 1rem; }
  .public-status-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .public-status-updated { text-align: left; }
  .public-service-grid { grid-template-columns: 1fr; }
  .public-service-card { padding: 1.15rem; }
}
.notification-menu { position: relative; }
.notification-menu summary { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; list-style: none; color: var(--ink); background: var(--surface); }
.notification-menu summary::-webkit-details-marker { display: none; }
.notification-menu summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.notification-count { position: absolute; right: -5px; top: -5px; min-width: 18px; padding: 1px 4px; border-radius: 10px; background: var(--danger); color: white; font-size: 10px; text-align: center; }
.notification-count[hidden] { display: none; }
.notification-panel { position: absolute; right: 0; top: 48px; width: min(360px, calc(100vw - 24px)); z-index: 70; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 48px #0003; overflow: hidden; }
.notification-panel header { display: flex; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); }
.notification-panel header a { color: var(--brand-dark); font-size: 12px; }
.notification-list { max-height: min(400px, 55vh); overflow-y: auto; }
.notification-item { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.notification-item:hover, .notification-item:focus-visible { background: var(--surface-alt); }
.notification-item span, .notification-item small, .notification-panel footer, .notification-empty { color: var(--muted); }
.notification-item small, .notification-panel footer { font-size: 11px; }
.notification-panel footer { padding: 12px 16px; border-top: 1px solid var(--line); }
.notification-empty { display: block; padding: 20px 16px; font-size: 13px; }
@media (max-width: 767px) { .notification-panel { position: fixed; top: 110px; right: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }