/* ============================================================
   StatusRooster — Unified Stylesheet
   Day 9: CSS extraction & design token system
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ============================================================ */
:root {
    /* Brand */
    --brand:          #6366f1;
    --brand-hover:    #4f46e5;
    --brand-light:    rgba(99, 102, 241, 0.08);

    /* Neutrals */
    --bg:             #ffffff;
    --surface:        #fff;
    --border:         #e9ecef;
    --border-input:   #e0e0e0;
    --divider:        #f0f0f0;

    /* Text */
    --text:           #111;
    --text-secondary: #555;
    --text-muted:     #888;
    --text-faint:     #999;
    --text-label:     #333;

    /* Status */
    --success-bg:     #dcfce7;
    --success-border: #bbf7d0;
    --success-text:   #166534;
    --success:        #22c55e;
    --danger-bg:      #fef2f2;
    --danger-border:  #fecaca;
    --danger-text:    #991b1b;
    --danger:         #ef4444;
    --warning-bg:     #fff3cd;
    --warning-border: #ffc107;
    --warning-text:   #856404;

    /* Dark (nav, banners) */
    --dark:           #0a0a0a;
    --dark-gradient:  linear-gradient(135deg, #0a0a0a, #1a1a1a);

    /* Shadows */
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
    --shadow-md:      0 2px 12px rgba(0,0,0,0.08);
    --shadow-lg:      0 10px 40px rgba(0,0,0,0.15);
    --shadow-card:    0 1px 4px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.03);
    --shadow-hover:   0 3px 12px rgba(0,0,0,0.08);

    /* Spacing */
    --space-xs:       0.25rem;
    --space-sm:       0.5rem;
    --space-md:       1rem;
    --space-lg:       1.5rem;
    --space-xl:       2rem;
    --space-2xl:      3rem;
    --space-3xl:      4rem;

    /* Radii */
    --radius-sm:      4px;
    --radius-md:      8px;
    --radius-lg:      10px;
    --radius-xl:      12px;
    --radius-pill:    20px;

    /* Typography */
    --font-family:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:      'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
    --text-xs:        0.65rem;
    --text-sm:        0.75rem;
    --text-base:      0.9rem;
    --text-md:        0.95rem;
    --text-lg:        1rem;
    --text-xl:        1.25rem;
    --text-2xl:       1.5rem;
    --text-3xl:       1.75rem;
    --text-4xl:       2.25rem;
    --text-5xl:       2.75rem;

    /* Widths */
    --max-width:      1100px;
    --max-width-sm:   420px;
    --max-width-md:   520px;
    --max-width-lg:   720px;

    /* Layout */
    --sidebar-width:  200px;

    /* Aliases — for convenience & backward compat */
    --muted:          #6b7280;
    --bg-secondary:   #f8f9fa;
    --border-light:   #f3f4f6;
    --warning:        #f59e0b;
}


/* Page icon (brand logo in sidebar) */
.page-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: -4px;
    margin-right: 0.15em;
    object-fit: contain;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    overflow-x: clip;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    min-height: 100dvh; /* iOS Safari: respect dynamic toolbar */
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    width: 100%;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: #f4f4f4;
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}


/* ============================================================
   3. NAV
   ============================================================ */
.nav {
    background: var(--dark);
    padding: 0.9rem var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-brand {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.01em;
}
.nav-brand:hover { text-decoration: none; }

.nav-links { display: flex; gap: var(--space-lg); align-items: center; }
.nav-links a { color: rgba(255,255,255,0.65); font-size: var(--text-base); }
.nav-links a:hover { color: #fff; text-decoration: none; }
.nav-github { display: inline-flex; align-items: center; opacity: 0.65; transition: opacity 0.15s; }
.nav-github:hover { opacity: 1; }
.nav-github svg { vertical-align: middle; }

/* Mobile hamburger */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--space-xs);
    line-height: 1;
}

@media (max-width: 640px) {
    .nav-toggle { display: block; }
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        background: var(--dark);
        padding: var(--space-md) var(--space-xl) var(--space-lg);
        gap: var(--space-md);
        z-index: 200;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    .nav-links.open { display: flex; }
    .nav { position: relative; }
}


/* ============================================================
   4. CONTAINER & LAYOUT
   ============================================================ */
.container {
    max-width: min(var(--max-width), 100%);
    margin: 0 auto;
    padding: var(--space-lg);
    flex: 1;
}

/* ── App Layout (sidebar + content) ─────────────────── */
.app-layout {
    flex-direction: row;
    min-height: 100vh;
}
.app-layout .footer { display: none; }

.app-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--dark);
    display: flex;
    flex-direction: column;
    padding: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    border-right: 1px solid rgba(255,255,255,0.04);
}
.app-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.15rem 1.25rem 1rem;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    letter-spacing: -0.01em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 0.35rem;
}
.app-sidebar-brand:hover { text-decoration: none; }

.app-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem 0.65rem;
    flex: 1;
}
.app-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-md);
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
}
.app-sidebar-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
    text-decoration: none;
}
.app-sidebar-link.active {
    color: #fff;
    background: rgba(99, 102, 241, 0.22);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--brand);
}
.app-sidebar-link.active svg { stroke: var(--brand); }
.app-sidebar-link svg {
    flex-shrink: 0;
    opacity: 0.65;
}
.app-sidebar-link:hover svg { opacity: 1; }
.nav-short { display: none; }
.nav-full { display: inline; }

.app-sidebar-footer {
    padding: 0.75rem 0.65rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
}
.app-sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.35rem;
    overflow: hidden;
}
.app-sidebar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}
.app-sidebar-username {
    color: rgba(255,255,255,0.7);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-sidebar-upgrade {
    width: 100%;
    padding: 0.45rem 0.75rem;
    background: var(--success);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}
.app-sidebar-upgrade:hover { background: #16a34a; }
.app-sidebar-link-sm {
    font-size: 0.75rem;
    padding: 0.4rem 0.7rem;
}

.app-content {
    flex: 1;
    min-width: 0;
    padding: var(--space-lg) var(--space-xl);
    background: var(--bg);
    overflow-x: hidden;
    overflow-y: auto;
    height: 100vh;
}

/* Mobile: collapse sidebar to top bar */
@media (max-width: 768px) {
    .app-layout { flex-direction: column; }
    .app-sidebar {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 0.5rem 1rem;
    }
    .app-sidebar-nav {
        flex-direction: row;
        gap: 0;
        padding: 0;
        flex: 1;
    }
    .app-sidebar-link { font-size: 0.75rem; padding: 0.4rem 0.5rem; }
    .app-sidebar-link svg { display: none; }
    .nav-short { display: inline; }
    .nav-full { display: none; }
    .app-sidebar-footer {
        flex-direction: row;
        border-top: none;
        padding: 0;
        gap: 0.5rem;
        align-items: center;
    }
    .app-sidebar-user { display: none; }
    .app-sidebar-upgrade { width: auto; padding: 0.35rem 0.65rem; }
    .app-content { padding: var(--space-md); height: auto; overflow-y: visible; }
}


/* ============================================================
   5. FOOTER
   ============================================================ */
.footer {
    background: var(--dark);
    color: #666;
    text-align: center;
    padding: 1.5rem;
    font-size: 0.8rem;
    margin-top: auto;
}
.footer a { color: #ccc; }


/* ============================================================
   6. FLASH MESSAGES
   ============================================================ */
.flash {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.4;
    border-left: 3px solid transparent;
}
.flash-success {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success);
    border-top: 1px solid var(--success-border);
    border-right: 1px solid var(--success-border);
    border-bottom: 1px solid var(--success-border);
}
.flash-error {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: var(--danger);
    border-top: 1px solid var(--danger-border);
    border-right: 1px solid var(--danger-border);
    border-bottom: 1px solid var(--danger-border);
}


/* ============================================================
   7. BUTTONS
   ============================================================ */
.btn {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    transition: background 0.15s, box-shadow 0.15s, opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-secondary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-primary {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
}
.btn-primary:hover {
    background: var(--brand-hover);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}
.btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: #d0d5dd;
    color: var(--text);
}

/* Full-width submit buttons (auth, modal) */
.btn-block {
    width: 100%;
    padding: 0.8rem;
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    font-weight: 600;
    text-align: center;
}

/* Icon button (edit/delete on cards) */
.btn-icon {
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    border: 1px solid var(--border-input);
    background: var(--surface);
    cursor: pointer;
    color: #666;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s, border-color 0.15s;
}
.btn-icon:hover { background: var(--bg-secondary); text-decoration: none; border-color: #d0d5dd; }
.btn-icon-danger:hover {
    background: #fff5f5;
    border-color: #fecaca;
    color: var(--brand);
}


/* ============================================================
   8. FORMS (unified — used in auth, modal, edit, settings)
   ============================================================ */
.form-group {
    margin-bottom: 1.25rem;
}
.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    font-size: var(--text-base);
    color: var(--text-label);
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 2px solid var(--border-input);
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    font-family: var(--font-family);
    transition: border-color 0.2s;
    background: var(--surface);
    color: var(--text);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--brand);
}
.hint {
    font-size: var(--text-sm);
    color: var(--text-faint);
    margin-top: 0.3rem;
}
.hint strong { font-weight: 600; }

.form-row {
    display: flex;
    gap: var(--space-md);
}
.form-row .form-group { flex: 1; }

/* Optional label hints */
.label-optional {
    color: var(--text-faint);
    font-weight: normal;
}

/* Section dividers in forms */
.form-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: var(--space-lg) 0;
}
.form-section-title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-md);
    color: var(--text-label);
    font-weight: 700;
}


/* ============================================================
   9. CARDS (unified surface component)
   ============================================================ */
.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}
.card h2 {
    font-size: 1.15rem;
    margin-bottom: var(--space-md);
    color: var(--text-label);
}

/* Auth card (centered, larger padding) */
.auth-container {
    max-width: var(--max-width-sm);
    margin: var(--space-2xl) auto;
}
.auth-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
}
.auth-card h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-sm);
    text-align: center;
}
.auth-card .subtitle {
    text-align: center;
    color: #666;
    margin-bottom: var(--space-xl);
    font-size: var(--text-md);
}

/* Auth error message */
.auth-error {
    background: #fff5f5;
    color: var(--brand);
    padding: 0.75rem var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    font-size: var(--text-base);
    border: 1px solid #fecaca;
}
.auth-success {
    background: #f0fdf4;
    color: #15803d;
    padding: 0.75rem var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    font-size: var(--text-base);
    border: 1px solid #bbf7d0;
}

/* Auth submit = btn-block primary */
.auth-submit {
    width: 100%;
    padding: 0.8rem;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.auth-submit:hover { background: var(--brand-hover); }

.auth-footer {
    text-align: center;
    margin-top: var(--space-lg);
    font-size: var(--text-base);
    color: #666;
}

/* OAuth buttons */
.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    border: 1px solid var(--border-input);
}
.oauth-btn svg {
    flex-shrink: 0;
}
.oauth-google {
    background: #fff;
    color: #3c4043;
}
.oauth-google:hover {
    background: #f7f8f8;
    border-color: #dadce0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.oauth-github {
    background: #24292f;
    color: #fff;
    border-color: #24292f;
}
.oauth-github:hover {
    background: #32383f;
    border-color: #32383f;
}
.oauth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    color: #999;
    font-size: 0.85rem;
}
.oauth-divider::before,
.oauth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-input);
}

/* Password wrapper */
.password-wrapper { position: relative; }
.password-wrapper input { padding-right: 3rem; }
.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-faint);
    padding: var(--space-xs);
    line-height: 1;
}
.password-toggle:hover,
.password-toggle:focus-visible { color: var(--text-label); outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* Password strength meter (signup) */
.strength-meter { margin-top: var(--space-sm); }
.strength-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--border-input);
    overflow: hidden;
    margin-bottom: 0.3rem;
}
.strength-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 0.3s, background 0.3s;
}
.strength-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-faint);
}
.match-indicator {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    font-weight: 500;
    display: none;
}

/* Edit card (medium width) */
.edit-container {
    max-width: var(--max-width-md);
    margin: var(--space-xl) auto;
}
.edit-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
}
.edit-card h1 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-xl);
}

/* Form actions (save/cancel row) */
.form-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}
.form-actions .btn {
    flex: 1;
    text-align: center;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    font-weight: 600;
}
.btn-save {
    background: var(--brand);
    color: #fff;
    border: none;
    cursor: pointer;
}
.btn-save:hover { background: var(--brand-hover); }
.btn-cancel {
    background: var(--divider);
    color: var(--text-label);
    border: none;
}
.btn-cancel:hover { background: var(--border-input); }


/* ============================================================
   10. MODAL
   ============================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 100;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.modal-overlay.active { display: flex; }

.modal {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    position: relative;
}
.modal h2 {
    margin-bottom: var(--space-lg);
    font-size: var(--text-xl);
}
.modal-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    border: none;
    background: none;
    font-size: var(--text-xl);
    cursor: pointer;
    color: var(--text-faint);
    padding: var(--space-xs);
}
.modal-close:hover { color: var(--text-label); }

.modal-submit {
    width: 100%;
    padding: 0.75rem;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.modal-submit:hover { background: var(--brand-hover); }

/* Monitor type selector buttons */
.type-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-label);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.type-btn:hover { border-color: var(--brand); color: var(--brand); }
.type-btn-active {
    border-color: var(--brand);
    background: #eef2ff;
    color: var(--brand);
    font-weight: 600;
}

/* Heartbeat snippet blocks */
.hb-snippet {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.hb-snippet-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0.4rem 0.75rem 0;
}
.hb-snippet-code {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem 0.5rem 0.75rem;
}
.hb-snippet-code code {
    flex: 1;
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    word-break: break-all;
    line-height: 1.5;
    background: none;
    padding: 0;
}
.hb-snippet-code .btn-copy {
    flex-shrink: 0;
    border: none;
    padding: 0.25rem;
}


/* ============================================================
   11. DASHBOARD
   ============================================================ */
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}
.dash-header h1 { font-size: var(--text-2xl); }
.btn-new {
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.55rem 1.25rem;
    border-radius: var(--radius-md);
    letter-spacing: 0.3px;
}
.monitor-count {
    color: #666;
    font-size: var(--text-base);
    font-weight: normal;
}
.plan-manage-link {
    background: none; border: none; cursor: pointer;
    font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
    text-decoration: underline; vertical-align: middle; padding: 0;
}
.plan-manage-link:hover { color: var(--text); }

/* ── Metrics Strip ──────────────────────────────────── */
.metrics-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}
.metric-pill {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.metric-pill:hover { border-color: var(--brand); background: #f8f7ff; }
.metric-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.metric-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.metric-up .metric-value { color: var(--success); }
.metric-up:hover { border-color: var(--success); background: var(--success-bg); }
.metric-down .metric-value { color: var(--danger); }
.metric-down:hover { border-color: var(--danger); background: var(--danger-bg, #fef2f2); }
.metric-paused .metric-value { color: #6b7280; }
.metric-paused:hover { border-color: #9ca3af; background: #f9fafb; }
.metric-pending .metric-value { color: #9ca3af; }
.metric-pending:hover { border-color: #d1d5db; background: #f9fafb; }
.metric-alert {
    border-color: var(--danger);
    background: var(--danger-bg, #fef2f2);
}
.metric-alert .metric-value { color: var(--danger); }
.metric-alert .metric-label { color: var(--danger); }
.metric-alert:hover { background: #fee2e2; }
.metric-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 0.25rem;
}

/* ── Monitors Heading (UptimeRobot-style) ───────────── */
.monitors-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}
.monitors-heading h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.monitors-count {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
}
.heading-dot { color: var(--brand); }

/* ── Toolbar ────────────────────────────────────────── */
.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}
.toolbar-left, .toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
/* Uptime range toggle */
.uptime-range-toggle {
    display: flex;
    gap: 0.3rem;
}
.range-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
    font-family: inherit;
}
.range-btn:hover,
.range-btn:focus-visible {
    border-color: var(--brand);
    color: var(--brand);
    outline: none;
}
.range-btn.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.toolbar-search {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    background: var(--surface);
    color: var(--text);
    width: 200px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.toolbar-search:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

/* ── Dashboard search bar (full-width) ──────────────── */
.d-search-wrap {
    margin-bottom: 0.75rem;
}
.d-search-inner {
    position: relative;
}
.d-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.d-search-input {
    width: 100%;
    padding-left: 2.35rem !important;
    box-sizing: border-box;
}

/* ── Toolbar ─────────────────────────────────────────── */
.d-toolbar-left {
    flex: 1;
    gap: 0.5rem;
}
.btn-sm { font-size: 0.8rem; padding: 0.35rem 0.75rem; border-radius: var(--radius-md); }

/* ── Dropdowns ──────────────────────────────────────── */
.toolbar-dropdown { position: relative; }
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 50;
    min-width: 160px;
    padding: 0.35rem 0;
}
.dropdown-menu.open { display: block; }
.dropdown-menu-right { left: auto; right: 0; }
.dropdown-item {
    display: block; width: 100%; padding: 0.4rem 0.85rem;
    background: none; border: none; text-align: left;
    font-size: 0.85rem; color: var(--text); cursor: pointer;
}
.dropdown-item:hover,
.dropdown-item:focus-visible { background: var(--divider); outline: none; }
.dropdown-item.active { color: var(--brand); font-weight: 600; }
.dropdown-check {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.85rem; font-size: 0.85rem;
    cursor: pointer; white-space: nowrap;
}
.dropdown-check:hover { background: var(--divider); }
.dropdown-check input { accent-color: var(--brand); }
.pro-locked { color: var(--text-faint); cursor: not-allowed; opacity: 0.6; }

/* Active filter badge */
.active-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem 0.25rem 0.65rem;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--brand);
    white-space: nowrap;
}
.clear-filter-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: rgba(99, 102, 241, 0.12);
    border-radius: 50%;
    font-size: 0.6rem;
    color: var(--brand);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background 0.15s;
}
.clear-filter-x:hover { background: rgba(99, 102, 241, 0.25); }

/* ── Bulk Action Bar ────────────────────────────────── */
.bulk-actions-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.bulk-dropdown { min-width: 180px; }
.bulk-section-label {
    padding: 0.4rem 0.85rem 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-faint);
}
.bulk-item {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}
.bulk-icon { font-size: 0.85rem; width: 18px; text-align: center; }
.bulk-item-danger { color: var(--danger) !important; }
.bulk-item-danger:hover { background: rgba(239, 68, 68, 0.08) !important; }

/* ── Data Table ─────────────────────────────────────── */
/* (Legacy table styles removed — using monitor-list cards now) */

/* ── Monitor List (UptimeRobot-style) ───────────────── */
.monitor-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* .monitor-card is defined below in "Column-based dashboard layout" */
.monitor-card:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.monitor-card:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.monitor-card:first-child:last-child { border-radius: var(--radius-lg); }
.monitor-card:hover { background: rgba(99, 102, 241, 0.03); }
.monitor-card-add {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.monitor-card-add:hover { opacity: 1; }

.row-cb-wrap {
    flex: 0 0 20px;
    display: flex;
    align-items: center;
}
.row-cb-wrap input[type="checkbox"] { accent-color: var(--brand); }

/* Status dot */
.monitor-dot {
    flex: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}
.dot-up { background: var(--success); box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); animation: pulse-dot-up 2.5s ease-in-out infinite; }
.dot-down { background: var(--danger); box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); animation: pulse-dot-down 1.2s ease-in-out infinite; }
.dot-warn { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); animation: pulse-dot-warn 1.8s ease-in-out infinite; }
.dot-pending { background: #d1d5db; }
.dot-paused { font-size: 0.7rem; color: var(--text-faint); }
@keyframes pulse-dot-up {
    0%, 100% { box-shadow: 0 0 4px rgba(34, 197, 94, 0.3); transform: scale(1); }
    50% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.6); transform: scale(1.1); }
}
@keyframes pulse-dot-down {
    0%, 100% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); transform: scale(1); }
    50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.8); transform: scale(1.25); }
}
@keyframes pulse-dot-warn {
    0%, 100% { box-shadow: 0 0 4px rgba(245, 158, 11, 0.3); transform: scale(1); }
    50% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.65); transform: scale(1.15); }
}

/* Name + meta line */
.monitor-info {
    flex: 1 1 auto;
    min-width: 0;
}
.monitor-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Column-based dashboard layout ──────────────────── */
.d-col-header {
    display: grid;
    grid-template-columns: 24px 24px minmax(0, 1.2fr) 84px 72px minmax(0, 1.4fr) 64px 64px 90px 36px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-faint);
    border-bottom: 1px solid var(--border);
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
}
.d-col-sortable { cursor: pointer; transition: color 0.15s; }
.d-col-sortable:hover { color: var(--text); }
.d-col-sortable.sort-active { color: var(--brand); }
.sort-arrow { font-size: 0.6rem; margin-left: 2px; }

.monitor-card {
    display: grid;
    grid-template-columns: 24px 24px minmax(0, 1.2fr) 84px 72px minmax(0, 1.4fr) 64px 64px 90px 36px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: none;
    cursor: pointer;
    transition: background 0.15s;
}

/* Column cells */
.monitor-name-col {
    min-width: 0;
    overflow: hidden;
}
.monitor-name-col .monitor-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.monitor-group-col {
    min-width: 0;
    overflow: hidden;
}
.monitor-group-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.monitor-group-none {
    color: var(--text-faint);
}
.monitor-type-col {
    min-width: 0;
}
.monitor-type-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.monitor-type-label.type-http { color: #7c3aed; }
.monitor-type-label.type-heartbeat { color: #16a34a; }
.monitor-type-label.type-json_api { color: #2563eb; }
.monitor-type-label.type-ssl { color: #b45309; }

.monitor-url-col {
    min-width: 0;
    overflow: hidden;
}
.monitor-url-col .monitor-url-text {
    font-size: 0.78rem;
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}
.monitor-url-col .monitor-url-text::after { content: none; }

.monitor-uptime-col {
    text-align: right;
}
.uptime-value {
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font-mono);
}

.monitor-response-col {
    text-align: right;
}
.response-value {
    font-size: 0.82rem;
    font-family: var(--font-mono);
    color: var(--text);
}
.response-unit {
    font-size: 0.65rem;
    color: var(--text-faint);
    margin-left: 1px;
}

.monitor-checked-col {
    text-align: right;
}
.checked-value {
    font-size: 0.72rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    white-space: nowrap;
}
.checked-never { color: var(--text-faint); font-style: italic; font-size: 0.75rem; }

/* Toolbar tweaks for new layout */
.toolbar-select-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-faint);
}
.toolbar-select-wrap input[type="checkbox"] { accent-color: var(--brand); }
.toolbar-select-count { font-family: var(--font-mono); font-size: 0.75rem; }

/* Add monitor card */
.monitor-card-add .add-monitor-plus {
    color: var(--brand);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}
.monitor-card-add .add-monitor-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}
.monitor-card-add:hover .add-monitor-label { color: var(--brand); }

/* ── Three-dot row menu ─────────────────────────────── */
.row-menu-wrap {
    position: relative;
    display: inline-block;
}
.row-menu-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    letter-spacing: 1px;
    line-height: 1;
    transition: all 0.15s;
}
.row-menu-btn:hover {
    background: rgba(99, 102, 241, 0.08);
    color: var(--text);
    border-color: var(--border);
}
.row-menu-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.row-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    padding: 0.35rem 0;
}
.row-menu.open { display: block; }
.row-menu-section-label {
    padding: 0.5rem 0.85rem 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-faint);
}
.row-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s;
}
.row-menu-item svg {
    flex-shrink: 0;
    opacity: 0.6;
}
.row-menu-item:hover {
    background: rgba(99, 102, 241, 0.06);
}
.row-menu-item:hover svg { opacity: 1; }
.row-menu-danger { color: var(--danger); }
.row-menu-danger svg { stroke: var(--danger); opacity: 0.8; }
.row-menu-danger:hover { background: rgba(239, 68, 68, 0.08); }
.row-menu-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.3rem 0;
}

/* ── Banner duration span ───────────────────────────── */
.banner-duration {
    font-weight: 400;
    font-size: 0.9em;
    opacity: 0.8;
}

/* ── URL Cell ───────────────────────────────────────── */
.url-cell {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

/* ── Status Pills ───────────────────────────────────── */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.status-up {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(22, 163, 74, 0.08));
    color: var(--success-text);
    border: 1px solid rgba(34, 197, 94, 0.2);
}
.status-down {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(220, 38, 38, 0.08));
    color: var(--danger-text, #991b1b);
    border: 1px solid rgba(239, 68, 68, 0.2);
    animation: pill-pulse-danger 2s infinite;
}
.status-paused {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}
.status-pending {
    background: #f9fafb;
    color: #9ca3af;
    border: 1px solid #f3f4f6;
}
@keyframes pill-pulse-danger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

/* ── Interval Badge ─────────────────────────────────── */
.interval-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
}
.interval-pro { background: var(--brand); color: #fff; }
.interval-free { background: #e5e7eb; color: #6b7280; }

/* ── Color Helpers ──────────────────────────────────── */
.text-green { color: var(--success); font-weight: 600; }
.text-yellow { color: #d97706; font-weight: 600; }
.text-red { color: var(--danger); font-weight: 600; }

/* Status dots (still used on detail page) */
.status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot-lg {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot-up { background: var(--success); }
.dot-down { background: var(--danger); }
.dot-pending { background: #ccc; }

/* Inline badge (keyword, SSL) — still used in detail */
.inline-badge {
    display: inline-block;
    font-size: var(--text-xs);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    margin-left: 0.4rem;
    vertical-align: middle;
}
.inline-badge-info { background: #eef; color: #336; }
.inline-badge-success { background: var(--success-bg); color: var(--success-text); }
.inline-badge-warning { background: var(--warning-bg); color: var(--warning-text); }

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
    color: var(--text-muted);
}
.empty-state .emoji {
    font-size: 3rem;
    margin-bottom: var(--space-md);
}
.empty-state h2 {
    color: var(--text-label);
    margin-bottom: var(--space-sm);
}

/* Plan badge */
.plan-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: var(--space-sm);
}
.plan-free { background: #e9ecef; color: #666; }
.plan-pro { background: var(--brand); color: #fff; }

/* Upgrade banner */
.upgrade-banner {
    background: var(--dark-gradient);
    color: #fff;
    padding: 1.25rem var(--space-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}
.upgrade-banner p { margin: 0; font-size: var(--text-base); }
.upgrade-banner strong { color: var(--brand); }
.upgrade-btn {
    background: var(--brand);
    color: #fff;
    padding: var(--space-sm) 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.upgrade-btn:hover { background: var(--brand-hover); text-decoration: none; }

/* ── Dashboard Two-Column Layout ────────────────────── */
.dash-single {
    max-width: 1200px;
    text-align: left;
}

/* ── Status Strip (top hero bar) ──────────────────────── */
.status-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    margin-bottom: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color 0.2s, background 0.2s;
}
.strip-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.strip-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.strip-dot-up {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}
.strip-dot-down {
    background: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    animation: pulse-dot 2s infinite;
}
.strip-dot-warn {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.08); }
}
.strip-status-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.strip-headline {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}
.strip-headline-up { color: var(--success); }
.strip-headline-down { color: var(--danger); }
.strip-headline-warn { color: #b45309; }
.strip-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}
.strip-counts {
    display: flex;
    gap: 0.5rem;
}
.strip-count-pill {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    min-width: 62px;
}
.strip-count-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.strip-count-dot.dot-up { background: var(--success); }
.strip-count-dot.dot-down { background: var(--danger); }
.strip-count-dot.dot-warn { background: #f59e0b; }
.strip-count-dot.dot-paused { background: #9ca3af; }
.strip-count-dot.dot-pending { background: #d1d5db; }
.strip-count-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.strip-count-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* Highlight non-zero down pill */
.strip-count-down:has(.strip-count-value:not(:empty)) {
    /* handled via template */
}

/* ── Dashboard Redesign — Phase 6 CSS ──────────────── */

/* 6.1 — Status strip alert variant (red tint when monitors down) */
.d-status-strip-alert {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), rgba(239, 68, 68, 0.08));
    border-color: rgba(239, 68, 68, 0.2);
}
.d-status-strip-alert .strip-count-pill.strip-count-down {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
}
.d-status-strip-warn {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.04), rgba(245, 158, 11, 0.06));
    border-color: rgba(245, 158, 11, 0.2);
}

/* 6.2 — Aggregate stat pills */
.d-agg-stats {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.d-agg-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.d-agg-stat-value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
.d-agg-stat-label {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.7rem;
}
.d-agg-stat-icon {
    display: inline-flex;
    opacity: 0.5;
}

/* 6.3 — Filter pills container */
.d-filter-pills {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;
}

/* 6.4 — Individual filter pill */
.d-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    user-select: none;
}
.d-filter-pill:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: rgba(99, 102, 241, 0.04);
}
.d-filter-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.d-filter-pill.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    font-weight: 600;
}
.d-filter-pill .pill-count {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    font-weight: 600;
    opacity: 0.7;
}
.d-filter-pill.active .pill-count {
    opacity: 0.9;
}
/* Status dot inside filter pill */
.d-filter-pill .pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 6.5 — Reworked monitor card: two-tier layout */
.monitor-card.d-two-tier {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: none;
    cursor: pointer;
    transition: background 0.12s, border-left-color 0.12s, padding-left 0.12s, box-shadow 0.12s;
    position: relative;
    text-align: left;
    border-left: 3px solid transparent;
}
.monitor-card.d-two-tier:hover {
    background: rgba(99, 102, 241, 0.025);
    border-left-color: var(--brand);
    box-shadow: inset 0 0 0 0 transparent;
}
.monitor-card.d-two-tier:focus-within {
    background: rgba(99, 102, 241, 0.03);
    border-left-color: var(--brand);
    outline: none;
}
.monitor-card.d-two-tier:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.monitor-card.d-two-tier:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.monitor-card.d-two-tier:first-child:last-child { border-radius: var(--radius-lg); }

/* Status-based left accent on hover */
.monitor-card.d-two-tier.status-is-down:hover { border-left-color: var(--danger); }
.monitor-card.d-two-tier.status-is-warn:hover { border-left-color: var(--warning); }
.monitor-card.d-two-tier.status-is-paused:hover { border-left-color: #9ca3af; }

/* 6.6 — Primary row: dot + checkbox + name + mini uptime bars + uptime % + menu */
.d-row-primary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 28px;
}
.d-row-primary .monitor-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d-row-primary .uptime-value {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font-mono);
    min-width: 58px;
    text-align: right;
}

/* 6.7 — Secondary row: type + URL + response/SSL/heartbeat + last checked */
.d-row-secondary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-left: 44px; /* align with name (checkbox 24px + dot 20px) */
    font-size: 0.75rem;
    color: var(--text-muted);
    min-height: 20px;
}
.d-row-secondary .monitor-type-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.d-row-secondary .monitor-url-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-faint);
}
.d-row-secondary .d-secondary-stat {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.d-row-secondary .d-secondary-sep {
    color: var(--border);
    font-size: 0.6rem;
}
/* 10F — Interval badge on dashboard rows */
.d-interval-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    white-space: nowrap;
}
.d-interval-badge--free {
    color: var(--brand);
    cursor: default;
}
.d-inc-count-link {
    font-size: 0.72rem;
    color: var(--danger);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.d-inc-count-link:hover { opacity: 0.7; text-decoration: underline; }
/* 10F — Pro upsell footer below monitor list */
.d-pro-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f5f3ff;
    border: 1px solid #e0e7ff;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    color: #4f46e5;
}
.d-pro-footer-text { flex: 1; line-height: 1.45; }
.d-pro-footer-text strong { color: #3730a3; }
.d-pro-footer-cta {
    flex-shrink: 0;
    padding: 0.35rem 0.85rem;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
.d-pro-footer-cta:hover { background: #4f46e5; }

/* 6.8 — Inline mini uptime bars container (30 bars) */
.d-uptime-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 1px;
    height: 18px;
    flex-shrink: 0;
}

/* 6.9 — Individual uptime bar segment */
.d-uptime-bar {
    width: 3px;
    border-radius: 1px;
    min-height: 4px;
    transition: transform 0.15s;
}
.d-uptime-bar:hover {
    transform: scaleY(1.3);
}
.d-uptime-bar.bar-up {
    background: var(--success);
    height: 16px;
}
.d-uptime-bar.bar-warn {
    background: var(--warning);
    height: 12px;
}
.d-uptime-bar.bar-down {
    background: var(--danger);
    height: 16px;
}
.d-uptime-bar.bar-partial {
    height: 16px;
}
.d-uptime-bar.bar-nodata {
    background: #e5e7eb;
    height: 6px;
}

/* 6.10 — Mobile responsive for two-tier row */
@media (max-width: 768px) {
    .d-agg-stats {
        flex-wrap: wrap;
        gap: 0.3rem;
    }
    .d-filter-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }
    .d-filter-pill {
        font-size: 0.72rem;
        padding: 0.25rem 0.55rem;
    }
    .monitor-card.d-two-tier {
        padding: 0.6rem 0.75rem;
    }
    .d-row-primary .d-uptime-bars {
        display: none;
    }
    .d-row-secondary {
        padding-left: 44px;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .d-row-secondary .monitor-url-text {
        width: 100%;
        flex-basis: 100%;
    }
}

@media (max-width: 480px) {
    .d-row-secondary {
        padding-left: 36px;
    }
    .d-agg-stat {
        font-size: 0.68rem;
        padding: 0.2rem 0.5rem;
    }
}

/* ── Applied Filters Bar ───────────────────────────── */
.d-applied-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    flex-wrap: wrap;
}
.d-applied-filters .active-filter-badge {
    animation: fadeIn 0.15s ease;
}
.d-clear-all-btn {
    background: none;
    border: none;
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.d-clear-all-btn:hover {
    background: rgba(99, 102, 241, 0.08);
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

/* ── Row inline stats ──────────────────────────────── */
.monitor-row-stats {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
}
.row-stat {
    text-align: center;
    min-width: 50px;
}
.row-stat-value {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.row-stat-unit {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-muted);
}
.row-stat-label {
    font-size: 0.55rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}
.dash-main { min-width: 0; }

/* ── (sidebar removed — replaced by status strip) ──── */

/* ── (donut removed — replaced by status strip) ──── */

/* ── (old sidebar stats removed) ──── */

/* ── (old sidebar usage/stats removed) ──── */

/* ── Incidents Panel ────────────────────────────────── */
.incidents-panel {
    margin-top: var(--space-lg);
    border: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(99, 102, 241, 0.04);
}
.incidents-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), rgba(167, 139, 250, 0.02));
}
.incidents-header h3 {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0;
}
.incidents-filters {
    display: flex;
    gap: 0.25rem;
}
.incident-filter {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.incident-filter:hover { border-color: var(--brand); color: var(--brand); }
.incident-filter.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.incidents-list {
    max-height: 320px;
    overflow-y: auto;
    position: relative;
}
.incident-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    padding-left: 1.25rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
    position: relative;
}
.incident-row:last-child { border-bottom: none; }
.incident-row:hover { background: rgba(99, 102, 241, 0.03); }

/* Vertical timeline connector */
.incident-row::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.incident-row:first-child::before { top: 50%; }
.incident-row:last-child::before { bottom: 50%; }
.incident-row:only-child::before { display: none; }

.incident-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 3px var(--surface);
}
.incident-open { background: var(--danger); animation: pulse-dot 2s infinite; }
.incident-resolved { background: var(--success); }

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

.incident-details { flex: 1; min-width: 0; }
.incident-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}
.incident-monitor {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
}
.incident-status-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}
.incident-badge-open {
    background: var(--danger-bg, #fef2f2);
    color: var(--danger);
}
.incident-badge-resolved {
    background: var(--success-bg);
    color: var(--success-text);
}

.incident-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.incident-code {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    background: var(--divider);
    padding: 0.05rem 0.3rem;
    border-radius: var(--radius-sm);
    color: var(--text-faint);
}
.incident-duration { color: var(--text-faint); }
.incident-ongoing { color: var(--danger); font-weight: 600; }

.incidents-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.incidents-empty-icon {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--success);
}

@media (max-width: 1024px) {
    .status-strip {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
    .strip-counts {
        width: 100%;
        justify-content: flex-start;
    }
    .d-col-header {
        grid-template-columns: 24px 24px minmax(0, 1fr) 84px 72px 64px 64px 90px 36px;
    }
    .monitor-card {
        grid-template-columns: 24px 24px minmax(0, 1fr) 84px 72px 64px 64px 90px 36px;
    }
    .monitor-url-col { display: none; }
}

@media (max-width: 768px) {
    .table-toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-left, .toolbar-right { flex-wrap: wrap; }
    .toolbar-search { width: 100%; }
    .dash-header { flex-direction: column; gap: var(--space-md); align-items: flex-start; }
    .d-col-header { display: none; }
    .monitor-card {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.65rem 0.75rem;
    }
    .monitor-url-col { display: none; }
    .monitor-type-col { display: none; }
    .monitor-group-col { display: none; }
    .strip-counts { flex-wrap: wrap; gap: 0.35rem; }
}


/* ============================================================
   12. MONITOR DETAIL PAGE (md- prefix)
   ============================================================ */

/* Header */
.md-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-xl);
    gap: var(--space-lg);
}
.md-header-left { flex: 1; min-width: 0; }
.md-back {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: var(--space-sm);
    transition: color 0.15s, gap 0.15s;
}
.md-back:hover { color: var(--brand); gap: 0.45rem; }
.md-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.md-name {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.md-subtitle {
    margin-top: 0.35rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.md-url {
    color: var(--brand);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    transition: opacity 0.15s;
}
.md-url:hover { text-decoration: underline; }

.md-monitor-id {
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
}
.md-monitor-id-label {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.md-monitor-id-value {
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--bg-subtle, #f3f4f6);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.72rem;
    user-select: all;
}
.md-monitor-id-copy {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.md-monitor-id-copy:hover { color: var(--brand); }

.md-url-static {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    cursor: default;
}
.md-header-actions {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
    align-items: flex-start;
    padding-top: 1.5rem;
}

/* ── Check Now button + result chip ── */
.md-check-now-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}
.btn-check-now {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--brand);
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}
.btn-check-now:hover:not(:disabled) { background: #4f46e5; transform: translateY(-1px); }
.btn-check-now:active:not(:disabled) { transform: translateY(0); }
.btn-check-now:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }
.btn-check-now-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.btn-check-now-spin {
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* Result chip */
.md-check-now-result {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    white-space: nowrap;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.md-check-now-result--visible {
    opacity: 1;
    transform: translateY(0);
}
.md-check-now-result--up   { background: rgba(34,197,94,0.12); color: #16a34a; }
.md-check-now-result--down { background: rgba(239,68,68,0.10); color: #dc2626; }
.md-check-now-result--warn { background: rgba(245,158,11,0.12); color: #b45309; }
/* Ping URL bar */
.md-ping-bar {
    padding: 0.85rem 1.25rem !important;
    margin-bottom: 0.75rem !important;
}
.md-ping-bar-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.md-ping-bar-label {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}
.md-ping-url {
    flex: 1;
    padding: 0.45rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    word-break: break-all;
    font-family: var(--font-mono);
    color: var(--text-label);
    min-width: 0;
}
.md-ping-copy {
    flex-shrink: 0;
}
.btn-sm {
    font-size: var(--text-sm);
    padding: 0.4rem 0.85rem;
}

/* Top stat cards */
.md-top-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
.md-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: box-shadow 0.15s;
}
.md-card:hover {
    box-shadow: var(--shadow-sm);
}
.md-card-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-faint);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.md-card-label-right {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}
.md-card-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text);
}
.md-status-up { color: var(--success); }
.md-status-down { color: var(--danger); }
.md-status-warn { color: #b45309; }
.md-status-pending { color: var(--text-muted); }
.md-status-paused { color: var(--text-muted); }
.md-card-sub {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 0.35rem;
}
.md-upsell {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}
.md-upsell:hover { text-decoration: underline; }

/* Unified uptime section */
.md-uptime-section .md-section-header {
    margin-bottom: var(--space-lg);
}
.md-uptime-hero {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.md-uptime-pct {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1;
}
.md-uptime-detail {
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.md-uptime-bars-wrap {
    margin-top: 0;
    position: relative;
}
.md-uptime-bars {
    display: flex;
    gap: 2px;
    height: 32px;
    align-items: stretch;
}

/* Multi-period uptime row (legacy — kept for bar shared styles) */
.text-success { color: var(--success); }
.text-warning { color: #f59e0b; }
.text-danger { color: var(--danger); }
.md-bar {
    flex: 1;
    border-radius: 2px;
    min-width: 3px;
    cursor: default;
    transition: opacity 0.1s, transform 0.1s;
}
.md-bar:hover {
    opacity: 0.85;
    transform: scaleY(1.06);
    transform-origin: bottom;
}
.md-bar.bar-up { background: var(--success); }
.md-bar.bar-down { background: var(--danger); }
.md-bar.bar-degraded { background: #f59e0b; }
.md-bar.bar-nodata { background: var(--divider); }

/* ── Uptime bar tooltip ── */
.md-bar-tooltip {
    position: fixed;
    z-index: 150;
    background: #111827;
    color: #f9fafb;
    border-radius: 8px;
    padding: 8px 12px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    min-width: 120px;
}
.md-bar-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
}
.md-bar-tip-label {
    font-size: 0.72rem;
    color: #9ca3af;
    margin-bottom: 3px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.md-bar-tip-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.md-bar-tip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.md-bar-tip-pct {
    font-weight: 600;
    font-size: 0.82rem;
    color: #f9fafb;
}

/* Section wrapper */
.md-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    transition: box-shadow 0.15s;
}
.md-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}
.md-section-header h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Chart controls */
.md-chart-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.md-threshold-badge {
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: var(--divider);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
}
.md-threshold-cta {
    font-size: var(--text-xs);
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}
.md-threshold-cta:hover { text-decoration: underline; }
.md-range-toggle {
    display: flex;
    gap: 4px;
}
.md-range-toggle .range-btn {
    font-size: var(--text-xs);
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s;
}
.md-range-toggle .range-btn:hover,
.range-btn:focus-visible {
    border-color: var(--brand);
    color: var(--brand);
    outline: none;
}
.md-range-toggle .range-btn.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.md-chart-wrap {
    height: 160px;
    margin-bottom: var(--space-md);
}

/* Response stats row */
.md-response-stats {
    display: flex;
    gap: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--divider);
}
.md-resp-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.md-resp-icon {
    font-size: 1.1rem;
    font-weight: 700;
}
.md-resp-value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
}
.md-resp-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Response by Region */
.md-region-section { padding: var(--space-md); }
.md-region-summary {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 500;
}
.md-region-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: var(--space-sm);
}
.md-region-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.md-region-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.md-region-name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text);
    min-width: 80px;
}
.md-region-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
}
.md-region-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.md-region-ms {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    min-width: 60px;
    text-align: right;
}
.md-region-locked {
    opacity: 0.5;
}
.md-region-pro-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand);
    background: rgba(99, 102, 241, 0.12);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    min-width: 60px;
    text-align: center;
}
.md-region-avg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.625rem;
    margin-top: 0.375rem;
    border-top: 1px solid var(--divider);
}
.md-region-avg-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.md-region-avg-value {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
}

/* Config grid (SSL, keyword, webhook, maintenance) */
.md-config-section { padding: var(--space-md); }
.md-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
}
.md-config-card {
    padding: var(--space-md);
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
}
.md-config-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.md-config-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--divider);
}
.md-config-row:last-child { border-bottom: none; }
.md-config-row code {
    font-size: var(--text-xs);
    background: var(--divider);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
}
.md-config-mono {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    word-break: break-all;
}

/* Alert channels */
.md-alert-channels {
    display: flex;
    gap: var(--space-md);
}
.md-alert-ch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    flex: 1;
}
.md-ch-active {
    border-color: var(--success-border);
    background: var(--success-bg);
}
.md-ch-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; color: var(--text-muted, #6b7280); }
.md-ch-name {
    font-weight: 600;
    color: var(--text);
}
.md-ch-status {
    color: var(--text-muted);
    font-size: var(--text-xs);
    margin-left: auto;
}

/* Incidents table */
.md-incidents-section {
    border: 1.5px solid var(--border);
}
.md-incidents-section .md-section-header h2 {
    font-size: 1.15rem;
    font-weight: 700;
}
.md-inc-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: var(--divider);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    font-weight: 500;
}
.md-inc-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.md-inc-footer {
    text-align: center;
    padding: 0.75rem 0 0.25rem;
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
}
.md-inc-view-all {
    color: var(--brand);
    font-style: normal;
    text-decoration: none;
    font-weight: 500;
}
.md-inc-view-all:hover { text-decoration: underline; }
.md-inc-row-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: grid;
    grid-template-columns: 100px 1fr 200px 100px 20px;
    gap: var(--space-md);
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--divider);
    align-items: center;
    transition: background 0.1s;
    border-radius: var(--radius-sm);
}
.md-inc-row-link:last-child { border-bottom: none; }
.md-inc-row-link:hover { background: var(--bg-hover, #f9fafb); }
.md-inc-chevron {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    opacity: 0.5;
}
.md-incidents-table { font-size: var(--text-sm); }
.md-inc-header {
    display: grid;
    grid-template-columns: 100px 1fr 200px 100px 20px;
    gap: var(--space-md);
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
}
.md-inc-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2px;
}
.md-inc-resolved {
    background: var(--success-bg);
    color: var(--success-text);
}
.md-inc-ongoing {
    background: var(--danger-bg);
    color: var(--danger-text);
}
.md-inc-cause {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.md-http-badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    min-width: 32px;
    text-align: center;
    /* default: error/red */
    background: #fee2e2;
    color: #b91c1c;
}
/* Range-aware colour modifiers — shared by monitor_detail + incidents */
.md-http-badge--2xx { background: #dcfce7; color: #15803d; }
.md-http-badge--3xx { background: #dbeafe; color: #1d4ed8; }
.md-http-badge--4xx { background: #fef9c3; color: #854d0e; }
.md-http-badge--5xx { background: #fee2e2; color: #b91c1c; }
.md-http-badge--err { background: #f3f4f6; color: #6b7280; } /* timeout / conn fail */
.md-http-timeout { background: #f3f4f6; color: #6b7280; }
.md-http-text {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}
.md-inc-time {
    color: var(--text-muted);
    font-size: var(--text-xs);
}
.md-inc-duration {
    font-weight: 600;
    color: var(--text-secondary);
}
.md-empty {
    color: var(--text-muted);
    padding: var(--space-md) 0;
    font-size: var(--text-sm);
}

/* Badges section */
.md-badges { display: flex; flex-direction: column; gap: var(--space-md); }
.md-badge-preview { display: flex; gap: var(--space-sm); }
.md-badge-snippets { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Status page link */
.md-status-page-link a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}
.md-status-page-link a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 900px) {
    .md-top-cards { grid-template-columns: 1fr 1fr; }
    .md-inc-header,
    .md-inc-row-link { grid-template-columns: 90px 1fr 140px 80px 20px; }
    .md-uptime-hero { flex-direction: column; gap: 0.25rem; }
}
@media (max-width: 640px) {
    .md-header { flex-direction: column; }
    .md-header-actions { padding-top: 0; }
    .md-top-cards { grid-template-columns: 1fr; }
    .md-response-stats { flex-direction: column; gap: var(--space-sm); }
    .md-alert-channels { flex-direction: column; }
    .md-config-grid { grid-template-columns: 1fr; }
    .md-inc-header,
    .md-inc-row-link { grid-template-columns: 80px 1fr 80px 20px; }
    .md-uptime-section .md-section-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}


/* ============================================================
   13. SETTINGS PAGE
   ============================================================ */
.settings-header { margin-bottom: var(--space-xl); }
.settings-header h1 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-xs);
}
.settings-header p {
    color: var(--text-muted);
    font-size: var(--text-base);
}

.settings-section {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}
.settings-section h2 {
    font-size: 1.15rem;
    margin-bottom: var(--space-xs);
}
.settings-section .section-desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}

/* Flash messages */
.settings-flash {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--space-lg);
}
.settings-flash-success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success-text);
}
.settings-flash-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger-text);
}

/* Subscription plan card */
.sub-plan-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    background: #fafafa;
}
.sub-plan-pro {
    border-color: var(--brand);
    background: rgba(99, 102, 241, 0.03);
}
.sub-plan-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.sub-plan-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sub-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sub-badge-pro {
    background: var(--brand);
    color: #fff;
}
.sub-badge-free {
    background: #e5e7eb;
    color: var(--text-secondary);
}
.sub-plan-email {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}
.sub-plan-status {
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 0.25rem;
}
.sub-status-active { color: var(--success-text); }
.sub-status-cancelling { color: var(--warning-text); }
.sub-plan-renew {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.sub-plan-features {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.sub-plan-features span {
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0.2rem 0.65rem;
    white-space: nowrap;
}
.sub-upgrade-pitch {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}
.sub-guarantee {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    color: var(--success-text);
    line-height: 1.5;
}
.sub-guarantee svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--success-text);
}
.sub-guarantee a {
    color: var(--success-text);
    font-weight: 600;
    text-decoration: underline;
}

/* New key alert box */
.new-key-box {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) 1.25rem;
    margin-bottom: var(--space-lg);
}
.new-key-box p {
    font-size: 0.85rem;
    color: var(--success-text);
    margin-bottom: var(--space-sm);
}
.new-key-box .key-value {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    background: var(--surface);
    border: 1px solid var(--success-border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) 0.75rem;
    word-break: break-all;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}
.copy-btn {
    background: var(--success-text);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.75rem;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.copy-btn:hover { background: #0d3d16; }

/* Generate key form */
.generate-form {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: var(--space-lg);
}
.generate-form .form-group { flex: 1; }
.generate-form label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}
.generate-form input {
    width: 100%;
    padding: var(--space-sm) 0.75rem;
    border: 1px solid #ddd;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
}
.generate-form input:focus {
    outline: none;
    border-color: var(--brand);
}

/* API keys table */
.keys-table {
    width: 100%;
    border-collapse: collapse;
}
.keys-table th {
    text-align: left;
    font-size: var(--text-sm);
    text-transform: uppercase;
    color: var(--text-muted);
    padding: var(--space-sm) 0.75rem;
    border-bottom: 1px solid #eee;
    letter-spacing: 0.3px;
}
.keys-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--divider);
    font-size: var(--text-base);
    vertical-align: middle;
}
.keys-table tr:last-child td { border-bottom: none; }
.key-prefix {
    font-family: var(--font-mono);
    background: #f4f4f4;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.8rem;
}
.key-label { font-weight: 600; }
.key-revoked {
    color: #ef4444;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
}
.key-active {
    color: #22c55e;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
}
.key-date { color: var(--text-muted); font-size: 0.8rem; }
.revoke-btn {
    background: none;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.6rem;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.revoke-btn:hover { background: #ef4444; color: #fff; }
.no-keys {
    text-align: center;
    padding: var(--space-xl);
    color: var(--text-muted);
}

/* Account info */
.account-info {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-sm) var(--space-md);
    font-size: var(--text-base);
}
.account-info dt { color: var(--text-muted); font-weight: 600; }
.account-info dd { color: var(--text-label); }

/* Docs callout */
.docs-callout {
    background: #f0f0ff;
    border: 1px solid #d0d0ff;
    border-radius: var(--radius-md);
    padding: var(--space-md) 1.25rem;
    font-size: var(--text-base);
}
.docs-callout a { font-weight: 600; }

/* Settings two-column layout */
.settings-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0 var(--space-xl);
    align-items: start;
}
.settings-nav {
    position: sticky;
    top: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.settings-nav-link {
    display: block;
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.settings-nav-link:hover {
    background: var(--hover-bg, #f5f5f5);
    color: var(--text);
}
.settings-nav-link.active {
    background: rgba(99, 102, 241, 0.08);
    color: var(--brand);
    font-weight: 600;
}
.settings-nav-danger {
    color: #ef4444;
}
.settings-nav-danger:hover {
    background: rgba(239, 68, 68, 0.06);
    color: #dc2626;
}
.settings-nav-danger.active {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}
.settings-content {
    min-width: 0;
}

/* Profile read-only field */
.settings-readonly {
    padding: 0.5rem 0.75rem;
    background: #f9f9f9;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.settings-provider-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    background: #eee;
    padding: 0.1rem 0.5rem;
    border-radius: 12px;
}
.settings-coming-soon {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--brand);
    background: rgba(99, 102, 241, 0.1);
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
}

/* Danger zone */
.settings-danger-zone {
    border: 1px solid #fecaca;
    background: #fef2f2;
}
.settings-danger-zone h2 {
    color: #dc2626;
}
.danger-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    background: var(--surface);
}
.danger-card-info {
    flex: 1;
}
.danger-card-info p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    line-height: 1.5;
}
.btn-danger {
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.btn-danger:hover { background: #dc2626; }
.btn-text-danger {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.4rem 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.btn-text-danger:hover { color: #dc2626; }
.danger-confirm {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    background: var(--surface);
}
.danger-confirm p {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}
.danger-confirm code {
    background: #fee2e2;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.82rem;
}
.danger-confirm .btn-danger {
    margin-top: 0.5rem;
}

/* Sidebar user link */
.app-sidebar-user-link {
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.app-sidebar-user-link:hover {
    background: rgba(255,255,255,0.08);
}


/* ============================================================
   14. PRICING PAGE
   ============================================================ */
.pricing-page { padding: var(--space-2xl) 0 var(--space-xl); }
.pricing-hero {
    text-align: center;
    margin-bottom: var(--space-2xl);
}
.pricing-hero h1 {
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--text);
    margin-bottom: var(--space-sm);
}
.pricing-hero .tagline {
    color: #666;
    font-size: 1.1rem;
    max-width: 480px;
    margin: 0 auto 0.75rem;
}
.pricing-hero .sub {
    color: var(--text-faint);
    font-size: var(--text-base);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    max-width: var(--max-width-lg);
    margin: 0 auto var(--space-2xl);
}
.price-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2.5rem var(--space-xl);
    text-align: left;
}
.price-card.featured {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand);
    position: relative;
}
.price-card.featured::before {
    content: "Most Popular";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
}
.price-card h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.2rem;
}
.price-card .subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.price-amount {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--text);
    margin: var(--space-sm) 0 0.75rem;
}
.price-amount span {
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--text-muted);
}
.section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #aaa;
    margin: var(--space-md) 0 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--divider);
}
.section-label:first-of-type { border-top: none; margin-top: var(--space-sm); }
.price-features {
    list-style: none;
    margin: 0;
    font-size: 0.88rem;
    color: #444;
}
.price-features li {
    padding: 0.3rem 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.price-features .check { color: var(--success); font-weight: 700; flex-shrink: 0; }
.price-features .cross { color: #ccc; flex-shrink: 0; }
.price-features .upgrade-hint { color: #aaa; }
.pro-tag {
    display: inline-block;
    background: var(--divider);
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    text-transform: uppercase;
    margin-left: 0.2rem;
}

/* Price CTA buttons */
.price-cta {
    display: block;
    text-align: center;
    padding: 0.85rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--text-md);
    text-decoration: none;
    margin-top: var(--space-lg);
    border: none;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s;
}
.price-cta:hover { text-decoration: none; }
.price-cta-free {
    background: var(--bg);
    color: var(--text);
    border: 1px solid #dee2e6;
}
.price-cta-free:hover { background: #e9ecef; }
.price-cta-pro { background: var(--brand); color: #fff; }
.price-cta-pro:hover { background: var(--brand-hover); }
.current-plan {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
    cursor: default;
}

/* FAQ */
.faq-section {
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
}
.faq-section h2 {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: var(--space-lg);
}
.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem var(--space-lg);
    margin-bottom: 0.75rem;
}
.faq-item h4 {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.4rem;
}
.faq-item p {
    font-size: 0.88rem;
    color: #666;
    margin: 0;
    line-height: 1.6;
}


/* ============================================================
   15. API DOCS PAGE
   ============================================================ */
.api-docs { max-width: 1140px; }
.api-docs-header { margin-bottom: 2rem; }
.api-docs-header h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-sm);
}
.api-docs-header .subtitle {
    color: var(--text-muted);
    font-size: var(--text-md);
    margin-bottom: var(--space-md);
}

/* Sidebar + main layout */
.api-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: start;
}

/* Left nav */
.api-sidebar {
    position: sticky;
    top: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md) 0;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
}
.api-nav-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-faint);
    padding: 0.6rem 1.1rem 0.3rem;
    margin: 0;
}
.api-nav-label:first-child { padding-top: 0.3rem; }
.api-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.api-nav-item:hover {
    background: var(--bg);
    color: var(--text);
}
.api-nav-item.active {
    color: var(--brand);
    border-left-color: var(--brand);
    background: var(--brand-light);
    font-weight: 600;
}
.api-nav-item .nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 3px;
}
.nav-icon--http       { background: #eef2ff; }
.nav-icon--json       { background: #eff6ff; }
.nav-icon--heartbeat  { background: #f0fdf4; }
.nav-icon--ssl        { background: #fffbeb; }

/* Table section-header rows */
.param-table-section-header td {
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 8px 12px;
    color: var(--text-secondary);
}
.param-table-section-header--core     td { background: #f3f4f6; }
.param-table-section-header--shared   td { background: #eef2ff; }
.param-table-section-header--http     td { background: #e8e9ff; }
.param-table-section-header--json     td { background: #eff6ff; }
.param-table-section-header--hb       td { background: #f0fdf4; }
.param-table-section-header--ssl      td { background: #fffbeb; }

/* Muted helper text */
.api-helper-text {
    margin-top: 0.75rem;
    color: var(--text-muted);
    font-size: 0.88rem;
}
.api-helper-text--mt-lg { margin-top: 1rem; }
.api-section-intro {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin: -0.5rem 0 1.5rem 0;
}

/* Inline method badges with spacing */
.method-badge + .method-badge { margin-left: 4px; }
.method-head { background: #f3f4f6; color: var(--text-secondary); }

.api-nav-divider {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 1rem;
}

/* Main content area */
.api-main { min-width: 0; }

/* Group headers — match left nav labels */
.api-group-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--brand);
    margin: 2rem 0 0.75rem;
    padding: 0;
    border: none;
}
.api-group-header:first-child { margin-top: 0; }

/* Badge preview strip */
.badge-preview {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

/* Type section header badge */
.api-type-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.api-type-header h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
}
.api-type-badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.3px;
}
.api-type-badge--http { background: #eef2ff; color: var(--brand); }
.api-type-badge--json { background: #eff6ff; color: #2563eb; }
.api-type-badge--heartbeat { background: #f0fdf4; color: #16a34a; }
.api-type-badge--ssl { background: #fffbeb; color: #d97706; }
.api-type-desc {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

/* Status pills in type headers */
.api-status-pills {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}
.api-status-pill {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 10px;
    letter-spacing: 0.2px;
}
.api-status-pill--up { background: var(--success-bg); color: var(--success-text); }
.api-status-pill--down { background: var(--danger-bg); color: var(--danger-text); }
.api-status-pill--pending { background: #f3f4f6; color: #6b7280; }
.api-status-pill--warn { background: #fffbeb; color: #d97706; }

/* Section dividers */
.api-type-section {
    scroll-margin-top: 1.5rem;
    margin-bottom: var(--space-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
}
.api-type-section:last-child { margin-bottom: 0; }

/* Responsive: collapse sidebar below 900px */
@media (max-width: 900px) {
    .api-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .api-sidebar {
        position: static;
        max-height: none;
        margin-bottom: 1.5rem;
        border-radius: var(--radius-md);
    }
}

.api-section {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}
.api-section:last-child { margin-bottom: 0; }

/* Inside a type section, api-section is just a transparent wrapper */
.api-type-section .api-section {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: var(--space-md);
}
.api-type-section .api-section:last-child { margin-bottom: 0; }

.api-section h2 {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid #eee;
}
.api-section p {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

/* Endpoints */
.endpoint {
    border: 1px solid #eee;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    overflow: hidden;
}
.endpoint-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem var(--space-md);
    background: #fafafa;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    user-select: none;
}
.endpoint-header:hover { background: #f4f4f4; }
.endpoint-header .chevron {
    margin-left: auto;
    font-size: 0.7rem;
    color: #aaa;
    transition: transform 0.2s;
}
.endpoint.open .endpoint-header .chevron { transform: rotate(90deg); }
.method-badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem var(--space-sm);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.method-get { background: var(--success-bg); color: var(--success-text); }
.method-post { background: #cce5ff; color: #004085; }
.method-put { background: #fff3cd; color: #856404; }
.method-patch { background: #e8d5f5; color: #6a0dad; }
.method-delete { background: var(--danger-bg); color: var(--danger-text); }
.endpoint-path {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-label);
}
.endpoint-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.endpoint-body { padding: var(--space-md); display: none; }
.endpoint.open .endpoint-body { display: block; }

/* Endpoint group sub-heading (e.g. Badges within Endpoints) */
.endpoint-group-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 2rem 0 0.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* API docs inline note callout */
.api-note {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin: 12px 0;
}

/* Field reference */
.field-ref { margin: 0.75rem 0; }
.field-ref summary {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.4rem 0;
    user-select: none;
}
.field-ref summary:hover { color: var(--text-label); }
.field-ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin-top: var(--space-xs);
}
.field-ref-table th {
    text-align: left;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-faint);
    padding: 0.35rem var(--space-sm);
    border-bottom: 1px solid #eee;
}
.field-ref-table td {
    padding: 0.3rem var(--space-sm);
    border-bottom: 1px solid var(--divider);
    vertical-align: top;
    line-height: 1.4;
}
.field-ref-table code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-label);
    background: none;
    padding: 0;
}
.field-type {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}
.field-note {
    color: var(--text-faint);
    font-size: var(--text-sm);
    font-style: italic;
}

/* Code blocks */
.code-block {
    background: var(--dark);
    color: #e0e0e0;
    border-radius: var(--radius-md);
    padding: var(--space-md) 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-x: auto;
    margin: 0.75rem 0;
    white-space: pre;
}

/* Language tabs */
.code-tabbed {
    margin: 0.75rem 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid #222;
}
.code-tab-bar {
    display: flex;
    background: #141414;
    border-bottom: 1px solid #222;
    gap: 0;
}
.code-tab-bar button {
    background: none;
    border: none;
    color: #777;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.code-tab-bar button:hover { color: #bbb; }
.code-tab-bar button.active {
    color: #e0e0e0;
    border-bottom-color: var(--brand);
}
.code-panel {
    display: none;
    background: var(--dark);
    padding: var(--space-md) 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.5;
    color: #e0e0e0;
    overflow-x: auto;
    white-space: pre;
}
.code-panel.active { display: block; }

/* Copy button */
.code-block, .code-tabbed, .response-shape { position: relative; }
.code-copy-btn {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #888;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    z-index: 2;
    line-height: 1.4;
}
.code-copy-btn:hover { background: rgba(255,255,255,0.15); color: #ccc; }
.code-copy-btn.copied { color: var(--success); border-color: var(--success); background: rgba(34,197,94,0.1); }
/* Response shape copy — light theme positioning */
.response-shape .code-copy-btn {
    background: rgba(0,0,0,0.04);
    border-color: var(--border);
    color: #aaa;
}
.response-shape .code-copy-btn:hover { background: rgba(0,0,0,0.08); color: #666; }
.response-shape .code-copy-btn.copied { color: var(--success); border-color: var(--success); background: rgba(34,197,94,0.06); }
/* Tabbed blocks — put copy btn inside the tab bar */
.code-tabbed .code-copy-btn {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
}

/* Endpoint path copy button */
.endpoint-header { position: relative; }
.endpoint-copy-btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    color: #bbb;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
    opacity: 0;
    margin-left: 0.25rem;
    vertical-align: middle;
    line-height: 1.4;
}
.endpoint-header:hover .endpoint-copy-btn { opacity: 1; border-color: var(--border); color: #999; }
.endpoint-copy-btn:hover { background: rgba(0,0,0,0.06); color: #666; }
.endpoint-copy-btn.copied { opacity: 1; color: var(--success); border-color: var(--success); background: rgba(34,197,94,0.06); }

.code-comment { color: #6c757d; }
.code-string { color: #98c379; }
.code-key { color: #e5c07b; }
.code-url { color: #61afef; }

.response-shape {
    background: var(--bg);
    border: 1px solid #eee;
    border-radius: var(--radius-md);
    padding: 0.75rem var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0.75rem 0;
}

/* Param table */
.param-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 0.75rem 0;
}
.param-table th {
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.4rem var(--space-sm);
    border-bottom: 1px solid #eee;
}
.param-table td {
    padding: 0.4rem var(--space-sm);
    border-bottom: 1px solid var(--divider);
    vertical-align: top;
}
.param-name {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-label);
}
.param-required {
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 600;
}
.param-optional {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.key-callout {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) 1.25rem;
    font-size: var(--text-base);
    margin-bottom: var(--space-lg);
}
.key-callout a { font-weight: 600; }

/* API docs top CTA bar */
.api-cta-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    background: var(--brand-light);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: var(--radius-md);
}
.api-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--brand);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.15s;
}
.api-cta-btn:hover { background: var(--brand-hover); }
.api-cta-link {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
    padding: 0.4rem 0;
    border-bottom: 1px dashed rgba(99, 102, 241, 0.3);
    transition: border-color 0.15s;
}
.api-cta-link:hover { border-bottom-color: var(--brand); }


/* ============================================================
   16. LANDING PAGE
   ============================================================ */

/* Hero */
.hero {
    text-align: center;
    padding: 4rem 0 2rem;
}
.hero h1 {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.25rem;
    color: var(--text);
    letter-spacing: -0.02em;
}
.hero h1 span { color: var(--brand); }
.hero p.subtitle {
    font-size: 1.2rem;
    color: #666;
    max-width: 480px;
    margin: 0 auto 0.75rem;
}
.hero-cta-row {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: 1rem;
}
.btn-lg {
    padding: 0.9rem 2.25rem;
    font-size: 1.05rem;
    border-radius: var(--radius-md);
}
.hero-sub {
    font-size: 0.85rem;
    color: var(--text-faint);
}

/* URL checker pulled into its own section */
.checker-section {
    max-width: 560px;
    margin: 0 auto 3rem;
    padding: 0 var(--space-md);
}

/* ============================================================
   API REQUEST BUILDER (apg- prefix)
   Interactive code builder on the API docs page.
   ============================================================ */
.apg {
    background: #fafbfc;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    border: 1px solid var(--border);
}
.apg-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}
.apg-subtitle {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0 0 1rem;
}
.apg-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    width: fit-content;
}
.apg-tab {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border: none;
    background: var(--bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.apg-tab:not(:last-child) { border-right: 1px solid var(--border); }
.apg-tab.active { background: var(--brand); color: #fff; }
.apg-tab:hover:not(.active) { background: #f0f1f3; }

/* Form grid */
.apg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.apg-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.apg-field.apg-full { grid-column: 1 / -1; }
.apg-field label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.apg-req { color: var(--danger); }
.apg-field input[type="text"],
.apg-field input[type="number"],
.apg-field select,
.apg-field textarea {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.15s;
}
.apg-field input:focus,
.apg-field select:focus,
.apg-field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.apg-field textarea { resize: vertical; min-height: 52px; }

/* Toggle switch */
.apg-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.4rem 0;
    user-select: none;
}
.apg-toggle input[type="checkbox"] {
    width: 36px;
    height: 20px;
    appearance: none;
    -webkit-appearance: none;
    background: #d1d5db;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.apg-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.apg-toggle input[type="checkbox"]:checked { background: var(--brand); }
.apg-toggle input[type="checkbox"]:checked::after { transform: translateX(16px); }

/* Collapsible groups */
.apg-group { margin-top: 0.75rem; }
.apg-group summary {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
    padding: 0.5rem 0;
    user-select: none;
}
.apg-group summary:hover { text-decoration: underline; }
.apg-group[open] summary { margin-bottom: 0.5rem; }

/* Assertion builder */
.apg-assertion-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 0.5rem;
    align-items: end;
    margin-bottom: 0.5rem;
}
.apg-assertion-row input,
.apg-assertion-row select {
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
}
.apg-assertion-row input:focus,
.apg-assertion-row select:focus {
    outline: none;
    border-color: var(--brand);
}
.apg-add-btn {
    font-size: 0.8125rem;
    color: var(--brand);
    background: none;
    border: 1px dashed var(--brand);
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    margin-top: 0.25rem;
}
.apg-add-btn:hover { background: rgba(99, 102, 241, 0.05); }
.apg-remove-btn {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.375rem 0.5rem;
    line-height: 1;
    border-radius: 4px;
}
.apg-remove-btn:hover { background: rgba(239, 68, 68, 0.08); }

/* Code output */
.apg-output {
    margin-top: 1.25rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}
.apg-output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.apg-code-tabs {
    display: flex;
    gap: 0;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    border: 1px solid #383850;
    border-bottom: none;
}
.apg-code-tab {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    background: #2a2a3c;
    color: #888;
    cursor: pointer;
    transition: color 0.15s;
}
.apg-code-tab:not(:last-child) { border-right: 1px solid #383850; }
.apg-code-tab.active { background: #1e1e2e; color: #cdd6f4; }
.apg-code-tab:hover:not(.active) { color: #bbb; }
.apg-copy {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.apg-copy:hover { border-color: var(--brand); color: var(--brand); }
.apg-copy.copied { background: var(--success); border-color: var(--success); color: #fff; }
.apg-code {
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 1rem;
    border-radius: 0 6px 6px 6px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    border: 1px solid #383850;
    margin: 0;
    min-height: 80px;
}

/* Keyword expression builder */
.apg-kw {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    background: var(--bg);
}
.apg-kw-group {
    padding: 0.5rem;
    border: 1px solid #e8e8ec;
    border-radius: 6px;
    background: #fafbfc;
}
.apg-kw-or {
    text-align: center;
    margin: 0.5rem 0;
    position: relative;
    line-height: 1;
}
.apg-kw-or::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
}
.apg-kw-or span {
    position: relative;
    background: var(--bg);
    padding: 0 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.apg-kw-term {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}
.apg-kw-match {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8125rem;
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
    flex-shrink: 0;
}
.apg-kw-input {
    flex: 1;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8125rem;
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
    min-width: 0;
}
.apg-kw-match:focus, .apg-kw-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.apg-kw-and {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0 0.125rem 0.25rem;
}
.apg-kw-add-term {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0;
    margin-top: 0.25rem;
}
.apg-kw-add-term:hover { color: var(--brand); }
.apg-kw-add-group { margin-top: 0.5rem; }
.apg-kw-preview {
    margin-top: 0.5rem;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    padding: 0.375rem 0.5rem;
    background: #f0f1f3;
    border-radius: 4px;
    min-height: 1.5em;
    word-break: break-word;
}
.apg-kw-preview:empty::before {
    content: 'No conditions set';
    color: var(--text-muted);
    font-style: italic;
}

@media (max-width: 640px) {
    .apg-grid { grid-template-columns: 1fr; }
    .apg-tabs { width: 100%; }
    .apg-tab { flex: 1; text-align: center; font-size: 0.75rem; padding: 0.5rem 0.5rem; }
    .apg-assertion-row { grid-template-columns: 1fr; }
    .apg-output-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .apg-kw-term { flex-wrap: wrap; }
    .apg-kw-match { width: 100%; }
}


/* ============================================================
   LANDING PAGE — NEW DESIGN (l- prefix)
   Clean, modern, developer-first. Inspired by UptimeRobot.
   ============================================================ */

/* Hero */
.l-hero {
    text-align: center;
    padding: 2rem 0 0.5rem;
    max-width: 720px;
    margin: 0 auto;
}
.l-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #6ee7b7;
    border-radius: 999px;
    color: #047857;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}
.l-hero-badge svg { color: #059669; }
.l-hero h1 {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.12;
    color: var(--text);
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}

/* Value-prop strip — prominent dead-simple pricing */
.l-value-strip {
    max-width: 920px;
    margin: 1.5rem auto 0;
    padding: 1.75rem 1.5rem;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #ddd6fe;
    border-radius: 16px;
}
.l-value-strip-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
}
.l-value-strip-headline h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3730a3;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.l-value-strip-headline p {
    font-size: 0.95rem;
    color: #4c1d95;
    margin: 0;
    line-height: 1.5;
}
.l-value-strip-headline strong { color: #3730a3; }
.l-value-strip-cards {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.l-value-strip-card {
    background: #fff;
    border: 1px solid #e0e7ff;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    text-align: center;
    min-width: 145px;
}
.l-value-strip-card-pro {
    border-color: var(--brand);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.18);
}
.l-value-strip-plan {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand);
    margin-bottom: 0.25rem;
}
.l-value-strip-price {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.l-value-strip-price span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 0.15rem;
}
.l-value-strip-detail {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    line-height: 1.35;
}
.l-value-strip-detail strong { color: var(--text); }
.l-value-strip-vs {
    font-size: 0.78rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .l-value-strip { padding: 1.25rem 1rem; margin: 1rem 0.75rem 0; }
    .l-value-strip-inner { grid-template-columns: 1fr; gap: 1rem; text-align: center; }
    .l-value-strip-headline h2 { font-size: 1.2rem; }
    .l-value-strip-headline p { font-size: 0.85rem; }
    .l-value-strip-cards { justify-content: center; }
    .l-value-strip-card { min-width: 120px; padding: 0.75rem 0.85rem; }
    .l-value-strip-price { font-size: 1.5rem; }
}
@media (max-width: 480px) {
    .l-hero-badge { font-size: 0.7rem; padding: 0.3rem 0.7rem; }
    .l-value-strip-cards { flex-direction: column; gap: 0.5rem; }
    .l-value-strip-vs { display: none; }
    .l-value-strip-card { width: 100%; }
}
.l-hero-sub {
    font-size: 1.05rem;
    line-height: 1.55;
    color: #555;
    max-width: 540px;
    margin: 0 auto 1rem;
}

/* Hero auto-discover */
.l-hero-discover {
    max-width: 500px;
    margin: 1.5rem auto 0;
}
.l-hero-discover-input {
    display: flex;
    gap: 0.5rem;
}
.l-hero-domain {
    flex: 1;
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    outline: none;
}
.l-hero-domain:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.l-hero-scan-btn {
    padding: 0.85rem 1.5rem;
    font-size: 1.05rem;
    white-space: nowrap;
}
.l-hero-results {
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-top: 0.5rem;
}
.l-hero-results-title {
    font-size: 0.95rem;
    color: var(--text);
    margin: 0 0 0.75rem;
}
.l-hero-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
    max-height: 360px;
    overflow-y: auto;
}
.l-hero-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--bg);
}
.l-hero-result-name {
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 0.5rem;
}
.l-hero-result-more {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0.3rem 0;
}
.l-hero-cta-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.l-hero-cta {
    flex: 1;
    text-align: center;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    min-width: 0;
}
.l-btn-pro {
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.l-btn-pro:hover { opacity: 0.9; }
.l-hero-reset {
    display: block;
    margin: 0.75rem auto 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.l-hero-reset:hover { color: var(--brand); }

/* Manual URL add input */
.l-hero-add-manual, .discover-add-manual {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.l-hero-manual-input, .discover-manual-input {
    flex: 1;
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    background: var(--bg);
}
.l-hero-manual-input:focus, .discover-manual-input:focus {
    border-color: var(--brand);
    border-style: solid;
}
.l-hero-manual-btn, .discover-manual-btn {
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--brand);
    font-weight: 600;
    flex-shrink: 0;
}
.l-hero-manual-btn:hover, .discover-manual-btn:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.l-hero-manual-hint {
    font-size: 0.75rem;
    color: var(--text-faint);
    white-space: nowrap;
}
.l-hero-manual-link {
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
    text-align: center;
}
.l-hero-manual-link a {
    color: var(--text-muted);
    text-decoration: none;
}
.l-hero-manual-link a:hover { color: var(--brand); }
.l-hero-manual-add {
    display: flex;
    gap: 0.5rem;
    max-width: 480px;
    margin: 0 auto;
}

/* Hero feature checklist */
.l-hero-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem 1.4rem;
    max-width: 520px;
    margin: 0 auto 1rem;
}
.l-hero-features span {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.l-hero-features span::before {
    content: "\2713";
    color: var(--success);
    font-weight: 800;
    margin-right: 0.35rem;
}
.l-hero-kicker {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0 auto 1.75rem;
}
.l-hero-kicker strong {
    color: var(--danger);
}

/* Hero buttons */
.l-hero-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.l-btn-primary {
    display: inline-block;
    padding: 0.8rem 2rem;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.l-btn-primary:hover { background: var(--brand-hover); text-decoration: none; }
.l-btn-ghost {
    display: inline-block;
    padding: 0.8rem 2rem;
    background: transparent;
    color: var(--text);
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    border: 1.5px solid #d0d0d0;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.l-btn-ghost:hover { border-color: #999; text-decoration: none; }

.l-hero-meta {
    font-size: 0.82rem;
    color: #999;
    letter-spacing: 0.01em;
}

/* Hero terminal code block */
.l-hero-code {
    max-width: 620px;
    margin: 2.5rem auto 0;
}
.l-code {
    background: #0f0f0f;
    border-radius: 10px;
    overflow: hidden;
    text-align: left;
}
.l-code-bar {
    display: flex;
    gap: 6px;
    padding: 12px 16px 0;
}
.l-code-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
}
.l-code-bar span:first-child { background: #ff5f57; }
.l-code-bar span:nth-child(2) { background: #febc2e; }
.l-code-bar span:nth-child(3) { background: #28c840; }
.l-code pre {
    padding: 16px 20px 20px;
    margin: 0;
    color: #e0e0e0;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}
.l-code .c-muted { color: #666; }
.l-code-sm { margin-top: 1rem; }
.l-code-sm pre {
    padding: 14px 18px;
    font-size: 0.8rem;
}

/* Value props bar */
.l-props {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 3rem 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 2rem 0 0;
}
.l-prop {
    text-align: center;
}
.l-prop strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}
.l-prop span {
    font-size: 0.78rem;
    color: #999;
}

/* URL Checker section */
.l-checker-wrap {
    max-width: 560px;
    margin: 3rem auto;
    text-align: center;
}
.l-checker-wrap h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
}
.l-checker-wrap .url-checker {
    margin-bottom: 0;
}

/* URL Checker widget — base styles */
.url-checker { width: 100%; }
.checker-form {
    display: flex;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.checker-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-family: var(--font-sans);
    color: var(--text);
    background: transparent;
}
.checker-input::placeholder { color: #bbb; }
.checker-btn {
    padding: 0.75rem 1.5rem;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 0.15s;
    white-space: nowrap;
}
.checker-btn:hover { background: var(--brand-hover, #4f52d9); }
.checker-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Result card */
.check-result {
    display: none;
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    text-align: left;
}
.check-result.visible { display: block; }
.result-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.result-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
    flex-shrink: 0;
}
.result-status-dot.up   { background: var(--success); }
.result-status-dot.down { background: var(--danger); }
.result-url {
    font-size: 0.85rem;
    color: var(--muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.result-verdict {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    background: #f3f4f6;
    color: var(--text);
    flex-shrink: 0;
}
.result-verdict.up   { background: #dcfce7; color: #16a34a; }
.result-verdict.down { background: #fee2e2; color: #dc2626; }
.result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--border);
}
.result-stats > div {
    padding: 0.75rem 1.25rem;
    border-right: 1px solid var(--border);
}
.result-stats > div:last-child { border-right: none; }
.result-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 0.2rem;
    font-weight: 600;
}
.result-stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}
.result-stat-value.good { color: var(--success); }
.result-stat-value.warn { color: var(--warning); }
.result-stat-value.bad  { color: var(--danger); }
.result-cta {
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fafafa;
}
.result-cta p { margin: 0; font-size: 0.85rem; color: var(--muted); }
.result-cta a {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand);
    text-decoration: none;
    white-space: nowrap;
}
.result-cta a:hover { text-decoration: underline; }

/* Features */
.l-features {
    padding: 1.25rem 0 1.5rem;
}
.l-features > h2 {
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
    margin: 0;
    letter-spacing: -0.01em;
}
.l-feature {
    padding: 3rem 0;
    border-bottom: 1px solid #eee;
}
.l-feature:last-of-type {
    border-bottom: none;
}
.l-feature-content {
    max-width: 620px;
}
.l-feature h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: var(--space-sm);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.l-feature p {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
}
.l-feature p a {
    font-weight: 600;
}
.l-badge-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    align-items: center;
}
.l-badge-row img { height: 20px; }

/* Feature bullet list */
.l-feature-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
}
.l-feature-list li {
    padding: 0.3rem 0;
    font-size: 0.95rem;
    color: #444;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    line-height: 1.5;
}
.l-feature-list li::before {
    content: "✓";
    color: var(--success);
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Hero trust line + stat strip (11I.5) ── */
.l-hero-trust {
    font-size: 0.82rem;
    color: #9ca3af;
    margin: 0.25rem 0 0;
    letter-spacing: 0.01em;
}
.l-hero-try {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
    text-align: center;
}
.l-hero-try a {
    color: var(--brand);
    text-decoration: none;
}
.l-hero-try a:hover { text-decoration: underline; }

/* Social proof */
.l-social-proof {
    text-align: center;
    padding: 1rem 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.l-social-proof strong { color: var(--text); }

/* API callout (slim) */
.l-api-callout {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}
.l-api-callout-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    color: var(--text);
    text-align: center;
}
.l-api-callout-inner a {
    color: var(--brand);
    text-decoration: none;
    margin-left: 0.5rem;
}
.l-api-callout-inner a:hover { text-decoration: underline; }

/* Price upsell + annual */
.l-price-upsell {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
    text-align: center;
}
.l-price-annual {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
    text-align: center;
}

/* Footer CTA discover input */
.l-bottom-discover {
    display: flex;
    gap: 0.5rem;
    max-width: 420px;
    margin: 0 auto;
}
.l-bottom-discover input {
    flex: 1;
}
.l-hero-stat-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto 2rem;
}
.l-stat-strip-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
}
.l-ssb {
    display: inline-block;
    width: 8px;
    border-radius: 2px;
}
.l-ssb-up    { height: 24px; background: var(--success); }
.l-ssb-warn  { height: 16px; background: var(--warning); }
.l-ssb-down  { height: 24px; background: var(--danger); }
.l-stat-strip-label {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 500;
}

/* ── How it works (11I.2) ── */
.l-howto {
    padding: 4rem 0 3rem;
    text-align: center;
    border-top: 1px solid var(--border);
}
.l-howto h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}
.l-howto-sub {
    color: var(--muted);
    font-size: 1rem;
    margin-bottom: 3rem;
}
.l-howto-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 860px;
    margin: 0 auto;
}
.l-howto-step {
    flex: 1;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
}
.l-howto-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.l-howto-icon {
    color: var(--brand);
}
.l-howto-step h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.l-howto-step p {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}
.l-howto-connector {
    width: 48px;
    height: 2px;
    background: var(--border);
    margin-top: 18px;
    flex-shrink: 0;
    position: relative;
}
.l-howto-connector::after {
    content: "";
    position: absolute;
    right: -5px;
    top: -4px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--border);
}

/* ── Social proof rail (11I.6) ── */
.l-social-proof {
    padding: 2.5rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 0 0 3rem;
}
.l-sp-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}
.l-sp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 2.5rem;
}
.l-sp-num {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.l-sp-label {
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 0.2rem;
    text-align: center;
}
.l-sp-divider {
    width: 1px;
    height: 48px;
    background: var(--border);
}

/* ── Screenshot showcase (11I.3) ── */
.l-screenshots {
    padding: 3rem 0 4rem;
    text-align: center;
}
.l-screenshots h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}
.l-screenshots-sub {
    color: var(--muted);
    font-size: 1rem;
    margin-bottom: 2rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.l-ss-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.l-ss-tab {
    padding: 0.45rem 1.1rem;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
}
.l-ss-tab:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.l-ss-tab.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.l-ss-frame {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.l-ss-panel {
    display: none;
}
.l-ss-panel.active {
    display: block;
}
.l-ss-panel img {
    width: 100%;
    height: auto;
    display: block;
}
.l-ss-caption {
    padding: 0.85rem 1.5rem;
    font-size: 0.85rem;
    color: var(--muted);
    background: #fafafa;
    border-top: 1px solid var(--border);
    margin: 0;
    text-align: left;
}

/* ── Transparency section (11I.4) ── */
/* Monitor types grid */
.l-types {
    padding: 3rem 0;
    border-top: 1px solid var(--border);
    text-align: center;
}
.l-types h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}
.l-types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.l-type-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
    text-align: left;
}
.l-type-card h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem;
}
.l-type-card p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 768px) {
    .l-types-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .l-types-grid { grid-template-columns: 1fr; }
}

/* ── Feature grid + cards (used by l-features) ── */
.l-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}
.l-feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
}
.l-feature-card h3 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.3rem;
}
.l-feature-card p {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

/* ── New l-pricing section ── */
.l-pricing {
    padding: 4rem 0 2rem;
    border-top: 1px solid var(--border);
    text-align: center;
}
.l-pricing h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}
.l-pricing-sub {
    color: var(--muted);
    font-size: 1rem;
    margin-bottom: 2.5rem;
}
.l-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 680px;
    margin: 0 auto;
}
.l-price-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2rem;
    text-align: left;
    position: relative;
}
.l-price-card-pro {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
}
.l-price-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.75rem;
    border-radius: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.l-price-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 0.75rem;
}
.l-price {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
    line-height: 1;
}
.l-price span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0;
}
.l-price-card ul {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.l-price-card ul li {
    font-size: 0.875rem;
    color: var(--muted);
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.5;
}
.l-price-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: 700;
    font-size: 0.8rem;
}
.l-price-cta {
    display: block;
    text-align: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    color: var(--text);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.15s;
}
.l-price-cta:hover { border-color: #999; text-decoration: none; }
.l-price-cta-pro {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.l-price-cta-pro:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

/* ── Open Source banner ── */
.l-opensource {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}
.l-opensource-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.l-opensource-link:hover {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    text-decoration: none;
}
.l-opensource-link > svg:first-child { flex-shrink: 0; }
.l-opensource-link > svg:last-child { flex-shrink: 0; color: var(--muted); margin-left: auto; }
.l-opensource-link strong { display: block; font-size: 0.95rem; font-weight: 600; margin-bottom: 0.15rem; }
.l-opensource-link span { display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 640px) {
    .l-opensource-link { padding: 1rem; gap: 0.75rem; }
    .l-opensource-link > svg:last-child { display: none; }
}

/* ── Bottom CTA (new l- prefixed) ── */
.l-bottom-cta {
    text-align: center;
    padding: 4rem 0 5rem;
    border-top: 1px solid var(--border);
}
.l-bottom-cta h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 0.5rem;
    letter-spacing: -0.03em;
}
.l-bottom-cta p {
    color: var(--muted);
    margin-bottom: 1.75rem;
    font-size: 1rem;
}

/* ── Responsive: landing sections (11I.7) ── */
@media (max-width: 768px) {
    .l-hero h1 { font-size: 2rem; }
    .l-hero-features { gap: 0.15rem 1rem; }
    .l-hero-features span { font-size: 0.8rem; }
    .l-howto-steps {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .l-howto-connector {
        width: 2px;
        height: 32px;
        margin: 0;
    }
    .l-howto-connector::after {
        right: -4px;
        top: auto;
        bottom: -5px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid var(--border);
        border-bottom: none;
    }
    .l-sp-stats { gap: 1rem; }
    .l-sp-divider { display: none; }
    .l-sp-stat { padding: 0.5rem 1rem; }
    .l-trans-grid { grid-template-columns: 1fr; }
    .l-pricing-grid { grid-template-columns: 1fr; }
    .l-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .l-ss-tabs { flex-wrap: wrap; }
    .l-ss-frame { border-radius: 10px; }
    .l-sp-num { font-size: 1.4rem; }
    .l-stat-strip-bars { flex-wrap: wrap; max-width: 260px; }
}

/* Feature cards grid — kept for backwards compat */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
    padding: var(--space-xl) 0 var(--space-2xl);
}
.feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
}
.feature-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    color: var(--text);
}
.feature-card p {
    font-size: var(--text-base);
    color: #666;
    line-height: 1.5;
}
.feature-card-wide {
    grid-column: 1 / -1;
}
@media (min-width: 640px) {
    .feature-card-wide {
        grid-column: span 1;
    }
}
@media (min-width: 900px) {
    .features {
        grid-template-columns: repeat(2, 1fr);
    }
    .feature-card-wide {
        grid-column: span 1;
    }
}

/* Landing pricing section */
.pricing-section {
    text-align: center;
    padding: 3rem 0;
}
.pricing-section h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: var(--space-sm);
    letter-spacing: -0.01em;
}
.pricing-section > p {
    color: #666;
    margin-bottom: var(--space-xl);
}
/* Landing uses slightly different grid sizing */
.pricing-section .pricing-grid {
    max-width: 640px;
}
.pricing-section .price-card {
    border-radius: var(--radius-lg);
}
.pricing-section .price-amount {
    font-size: 2rem;
}
.pricing-section .price-features li::before {
    content: "✓  ";
    color: var(--success);
    font-weight: 700;
}
.pricing-section .price-features li {
    display: list-item;
}
.pricing-section .price-cta {
    padding: 0.7rem;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    margin-top: var(--space-md);
}

/* Transparency */
.transparency {
    padding: var(--space-2xl) 0;
    border-top: 1px solid var(--border);
}
.transparency h2 {
    text-align: center;
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-bottom: var(--space-sm);
    color: var(--text);
}
.transparency > p {
    text-align: center;
    color: #666;
    margin-bottom: var(--space-xl);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    max-width: var(--max-width-lg);
    margin: 0 auto;
}
.stack-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md) 1.25rem;
}
.stack-item-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-faint);
    margin-bottom: var(--space-xs);
}
.stack-item-value {
    font-weight: 700;
    font-size: var(--text-md);
    color: var(--text);
}
.transparency-footer {
    text-align: center;
    margin-top: var(--space-lg);
    font-size: 0.85rem;
    color: var(--text-muted);
}
.transparency-footer a { font-weight: 600; }

/* Bottom CTA (shared landing + pricing) */
.bottom-cta {
    text-align: center;
    padding: 3rem var(--space-xl);
    background: var(--dark-gradient);
    border-radius: 14px;
    max-width: var(--max-width-lg);
    margin: 2rem auto 0;
}
.bottom-cta h2 {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: var(--space-sm);
}
.bottom-cta p {
    color: rgba(255,255,255,0.65);
    margin-bottom: var(--space-lg);
    font-size: 1rem;
}
.bottom-cta a {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    padding: 0.8rem var(--space-xl);
    border-radius: var(--radius-md);
    font-weight: 700;
    text-decoration: none;
    font-size: var(--text-lg);
    transition: background 0.2s;
}
.bottom-cta a:hover { background: var(--brand-hover); text-decoration: none; }

/* Landing bottom CTA (non-gradient, simpler) */
.landing-bottom-cta {
    text-align: center;
    padding: var(--space-2xl) 0 var(--space-3xl);
}
.landing-bottom-cta h2 {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-bottom: var(--space-sm);
    color: var(--text);
}
.landing-bottom-cta p {
    color: #666;
    margin-bottom: var(--space-lg);
}
.landing-bottom-cta a {
    display: inline-block;
    padding: 0.9rem 2.5rem;
    background: var(--brand);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.2s;
}
.landing-bottom-cta a:hover { background: var(--brand-hover); text-decoration: none; }

/* ============================================================
   KEYWORD EXPRESSION BUILDER
   ============================================================ */
.kw-builder {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    overflow: hidden;
}
.kw-rows {
    padding: 0;
}
.kw-empty {
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-faint);
}
.kw-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--divider);
    background: #fff;
    transition: background 0.12s;
}
.kw-row:hover { background: #fafbfc; }
.kw-row:last-child { border-bottom: none; }
/* Override .mf-field-group input/select { width:100% } for keyword row children */
.mf-field-group .kw-row select.kw-select,
.kw-row select.kw-select {
    flex-shrink: 0;
    width: auto !important;
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-weight: 500;
    min-width: 110px;
    max-width: 140px;
    outline: none;
    transition: border-color 0.15s;
}
.kw-select:focus,
.kw-row select.kw-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.1);
}
/* Override .mf-field-group input { width:100% } for keyword row input */
.mf-field-group .kw-row input.kw-input,
.kw-row input.kw-input {
    flex: 1 1 0%;
    width: auto !important;
    min-width: 0;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.kw-input:focus,
.kw-row input.kw-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
}
.kw-input::placeholder {
    color: #ccc;
}
.kw-remove {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: #ccc;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.kw-remove:hover {
    color: var(--danger);
    background: var(--danger-bg);
}

/* Operator toggle between rows */
.kw-operator-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem 0.25rem 2.25rem;
    background: #fafbfc;
    border-bottom: 1px solid var(--divider);
}
.kw-op-btn {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kw-op-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.kw-op-btn.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.kw-op-hint {
    font-size: 0.68rem;
    color: var(--text-faint);
    margin-left: 0.35rem;
    font-style: italic;
}

/* Add button */
.kw-add-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid var(--divider);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.kw-add-btn:hover {
    color: var(--brand);
    background: rgba(99,102,241,0.04);
}
.kw-add-btn-standalone {
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    justify-content: center;
    padding: 0.65rem 1rem;
}


/* ============================================================
   17. RESPONSIVE LANDING
   ============================================================ */
@media (max-width: 640px) {
    .pricing-hero h1 { font-size: 1.6rem; }
    .pricing-grid { gap: var(--space-md); }
}

@media (max-width: 600px) {
    .hero h1 { font-size: 2.25rem; }
    .hero p.subtitle { font-size: 1.05rem; }
    .feature-block h2 { font-size: 1.3rem; }
    .checker-form { flex-direction: column; border-radius: var(--radius-lg); }
    .checker-input {
        border-right: 2px solid var(--border);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .checker-btn { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
    .result-stats { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   18. UTILITIES
   ============================================================ */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-brand { color: var(--brand); }
.font-bold { font-weight: 700; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-md); }
.mt-2 { margin-top: var(--space-xl); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-md); }
.mb-2 { margin-bottom: var(--space-xl); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.inline-block { display: inline-block; }
.no-margin { margin: 0; }

/* ===================== API Docs — Tools Grid ===================== */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.tool-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tool-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-sm);
}

.tool-card strong {
    font-size: 1rem;
    color: var(--brand);
}

.tool-card span {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.4;
}

/* ===================== Badge Embed Section ===================== */
.badge-intro {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0 0 var(--space-md);
}

.badge-preview {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.badge-preview img {
    height: 20px;
}

.badge-snippet-group {
    margin-bottom: var(--space-md);
}

.badge-snippet-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--space-xs);
}

.badge-snippet {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    overflow-x: auto;
}

.badge-snippet code {
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
    font-size: 0.82rem;
    color: var(--text);
    white-space: nowrap;
    flex: 1;
    user-select: all;
}

.btn-copy {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    color: var(--muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color 0.15s, border-color 0.15s;
}

.btn-copy:hover,
.btn-copy:focus-visible {
    color: var(--brand);
    border-color: var(--brand);
    outline: none;
}

.badge-extra {
    margin-top: var(--space-md);
}

.badge-extra summary {
    font-size: 0.85rem;
    color: var(--muted);
    cursor: pointer;
    margin-bottom: var(--space-md);
}

.badge-extra summary:hover {
    color: var(--text);
}

/* ============================================================
   INCIDENTS LIST PAGE — Reuses dashboard column layout
   ============================================================ */

/* 9-col grid: dot(24) | status(80) | monitor(1.4fr) | group(84) | type(72) | root-cause(1fr) | started(90) | duration(80) | chevron(28) */
.inc-grid {
    grid-template-columns: 24px 80px minmax(0, 1.4fr) 84px 72px minmax(0, 1fr) 90px 80px 28px !important;
}

/* Badges */
.inc-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.inc-badge-ongoing { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.inc-badge-resolved { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

/* Root cause pill */
.inc-cause-col {
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.inc-cause-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inc-root-cause {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    background: #f3f4f6;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    color: var(--muted);
    white-space: nowrap;
}

/* Chevron */
.inc-chevron-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Row link resets */
a.inc-row-link { text-decoration: none; color: var(--text); }
a.inc-row-link:hover { text-decoration: none; }

/* Monitor pre-filter badge */
.inc-monitor-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #c4b5fd;
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.75rem;
    font-size: var(--text-xs);
    font-weight: 500;
    margin-left: 0.75rem;
}
.inc-monitor-filter-clear {
    color: #7c3aed;
    text-decoration: none;
    font-weight: 700;
    margin-left: 0.15rem;
    opacity: 0.7;
}
.inc-monitor-filter-clear:hover { opacity: 1; }

/* Empty state */
.inc-empty {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.inc-empty-icon { font-size: 2rem; margin-bottom: 0.5rem; display: block; color: var(--success); }
.inc-empty-text { color: var(--muted); font-size: 0.9rem; }


/* ═══════════════════════════════════════════════════════════════
   INCIDENT DETAIL PAGE
   ═══════════════════════════════════════════════════════════════ */

.inc-detail-page { max-width: 750px; }

.inc-breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.inc-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s;
}
.inc-back-link:hover { color: var(--text); text-decoration: none; }
.inc-view-monitor-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    transition: opacity 0.15s;
}
.inc-view-monitor-link:hover { opacity: 0.75; text-decoration: none; }

/* Hero card */
.inc-detail-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--muted);
}
.inc-hero-ongoing { border-left-color: var(--danger); }
.inc-hero-resolved { border-left-color: var(--success); }

.inc-hero-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.inc-hero-root-cause { font-size: 0.85rem; color: var(--muted); font-family: var(--font-mono); }
.inc-hero-monitor { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.25rem 0; }
.inc-hero-url { font-size: 0.85rem; color: var(--muted); }

/* Details grid */
.inc-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.inc-detail-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
}
.inc-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.inc-kv-grid { display: flex; flex-direction: column; gap: 0.65rem; }
.inc-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.inc-kv-label { font-size: 0.82rem; color: var(--muted); flex-shrink: 0; }
.inc-kv-value { font-size: 0.85rem; font-weight: 500; text-align: right; word-break: break-all; }
.inc-kv-mono { font-family: var(--font-mono); font-size: 0.8rem; }

/* Response headers collapsible row inside Details card */
.inc-kv-headers { align-items: flex-start; }
.inc-headers-details { width: 100%; }
.inc-headers-summary {
    font-size: 0.78rem;
    color: var(--brand);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.inc-headers-summary::-webkit-details-marker { display: none; }

/* Full-width headers block — spans whole Details card, not inside kv columns */
.inc-headers-block {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.inc-headers-block .inc-headers-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0;
    font-size: 0.78rem;
    color: var(--brand);
}
.inc-headers-block .inc-headers-summary::before {
    content: '▶';
    font-size: 0.55rem;
    transition: transform 0.15s;
    display: inline-block;
}
details[open] .inc-headers-block .inc-headers-summary::before,
.inc-headers-block details[open] .inc-headers-summary::before {
    transform: rotate(90deg);
}
.inc-headers-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    table-layout: fixed;
}
.inc-headers-table tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
.inc-hdr-key {
    color: var(--muted);
    padding: 0.25rem 0.75rem 0.25rem 0;
    vertical-align: top;
    white-space: nowrap;
    width: 36%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inc-hdr-val {
    padding: 0.25rem 0;
    vertical-align: top;
    word-break: break-word;
    overflow-wrap: break-word;
    color: var(--text);
}
.inc-monitor-link { color: var(--brand); text-decoration: none; }
.inc-monitor-link:hover { text-decoration: underline; }

/* Activity timeline */
.inc-timeline { position: relative; padding-left: 1.5rem; }
.inc-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border);
}
.inc-timeline-event {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
}
.inc-timeline-event:last-child { padding-bottom: 0; }
.inc-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    position: relative;
    z-index: 1;
    margin-left: -1.5rem;
}
.inc-dot-down { background: var(--danger); border: 2px solid #fecaca; }
.inc-dot-up { background: var(--success); border: 2px solid #bbf7d0; }
.inc-dot-pending { background: var(--muted); border: 2px solid #e5e7eb; }
.inc-dot-info { background: var(--brand); border: 2px solid #c7d2fe; }
.inc-dot-warn { background: var(--warning); border: 2px solid #fde68a; }
.inc-timeline-text { font-size: 0.88rem; line-height: 1.5; }
.inc-timeline-time { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }

/* Region corroboration details in timeline */
.inc-region-details { margin-top: 0.5rem; }
.inc-region-summary { font-size: 0.78rem; color: var(--muted); cursor: pointer; user-select: none; }
.inc-region-summary::-webkit-details-marker { display: none; }
.inc-region-summary::marker { display: none; content: ''; }
.inc-region-summary::before { content: '\25B6'; font-size: 0.55rem; margin-right: 0.4rem; transition: transform 0.15s; display: inline-block; }
details[open] > .inc-region-summary::before { transform: rotate(90deg); }
.inc-region-table { width: 100%; font-size: 0.78rem; border-collapse: collapse; margin-top: 0.4rem; }
.inc-region-table th { text-align: left; color: var(--muted); font-weight: 500; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border); }
.inc-region-table td { padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border); }
.inc-region-up { color: var(--success); font-weight: 600; font-size: 0.75rem; }
.inc-region-down { color: var(--danger); font-weight: 600; font-size: 0.75rem; }

/* Response body preview */
.inc-response-pre { background: var(--bg-offset, #f9fafb); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem; font-size: 0.78rem; font-family: 'JetBrains Mono', monospace; overflow-x: auto; max-height: 300px; white-space: pre-wrap; word-break: break-all; margin-top: 0.5rem; }


/* ═══════════════════════════════════════════════════════════════
   MONITOR GROUPS (dashboard)
   ═══════════════════════════════════════════════════════════════ */

.monitor-group { margin-bottom: 0.5rem; }
.group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    cursor: pointer;
    user-select: none;
}
.group-header:hover .group-name { color: var(--brand); }
.group-chevron {
    transition: transform 0.2s;
    color: var(--muted);
}
.group-header.collapsed .group-chevron { transform: rotate(-90deg); }
.group-name {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text);
    transition: color 0.15s;
}
.group-count {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 400;
}
.group-body { }
.group-header.collapsed + .group-body { display: none; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — INCIDENTS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    /* Hide root-cause column on medium screens */
    .inc-grid {
        grid-template-columns: 24px 80px minmax(0, 1.4fr) 84px 72px 0 90px 80px 28px !important;
    }
    .inc-grid .inc-cause-col { display: none; }
}

@media (max-width: 768px) {
    /* Collapse to mobile: dot | name+badge | chevron */
    .d-col-header.inc-grid { display: none; }
    .monitor-card.inc-grid {
        grid-template-columns: 24px 1fr auto !important;
        grid-template-rows: auto auto;
        height: auto;
        padding: 0.75rem 1rem;
        gap: 0.25rem 0.5rem;
    }
    .monitor-card.inc-grid .monitor-dot { grid-row: 1 / 3; grid-column: 1; }
    .monitor-card.inc-grid .monitor-name-col { grid-row: 1; grid-column: 2; }
    .monitor-card.inc-grid .inc-chevron-col { grid-row: 1 / 3; grid-column: 3; }
    .monitor-card.inc-grid .monitor-checked-col { grid-row: 2; grid-column: 2; }
    /* Hide cols that don't fit mobile */
    .monitor-card.inc-grid > div:nth-child(2),  /* status badge */
    .monitor-card.inc-grid .monitor-group-col,
    .monitor-card.inc-grid .monitor-type-col,
    .monitor-card.inc-grid .inc-cause-col,
    .monitor-card.inc-grid .monitor-response-col { display: none; }

    .inc-detail-grid { grid-template-columns: 1fr; }
    .inc-detail-hero { padding: 1rem 1.25rem; }
    .inc-hero-monitor { font-size: 1.1rem; }
}


/* ═══════════════════════════════════════════════════════════
   MONITOR FORM — Full-page Add / Edit forms  (mf-* prefix)
   ═══════════════════════════════════════════════════════════ */

/* Back link */
.mf-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
    margin-bottom: 0.35rem;
    transition: gap 0.15s ease;
}
.mf-back:hover { gap: 0.6rem; text-decoration: none; }

/* Page heading */
.mf-heading {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text);
    margin: 0.15rem 0 1.75rem;
    letter-spacing: -0.02em;
}
.mf-heading-dot { color: var(--brand); }

/* 1.9: Heading subtitle — monitor type label on edit page */
.mf-heading-sub {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    letter-spacing: 0;
    text-transform: none;
    margin-top: 0.25rem;
}

/* Centered single-column layout — wide enough for 2-col fields */
.mf-layout {
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 5.5rem; /* room for sticky footer */
}

/* Card-style section — generous padding, elevated card feel */
.mf-section {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-left: 3px solid transparent;
    border-radius: 14px;
    padding: 1.75rem 2rem;
    margin-bottom: 1rem;
    transition: border-left-color 0.2s ease, box-shadow 0.2s ease;
}
.mf-section:hover {
    border-left-color: var(--brand, #6366f1);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);
}

.mf-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #6b7280);
    margin-bottom: 0.75rem;
}

/* 1.1: Section header — flex row with inline SVG icon + title + optional description */
.mf-section-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}
.mf-section-header svg {
    width: 20px;
    height: 20px;
    color: var(--brand, #6366f1);
    flex-shrink: 0;
    opacity: 0.8;
}
.mf-section-header-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text, #111827);
}

/* 1.2: Two-column field row — side-by-side fields, stacks on mobile */
.mf-field-row {
    display: flex;
    gap: 1.25rem;
}
.mf-field-row > * {
    flex: 1;
    min-width: 0;
}

/* 1.3: Single field wrapper in the grid (label + input + hint) */
.mf-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}
.mf-field-group label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}
.mf-field-group .hint {
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    margin-top: 0.15rem;
    line-height: 1.5;
}
.mf-field-group input,
.mf-field-group select,
.mf-field-group textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mf-field-group input:focus,
.mf-field-group select:focus,
.mf-field-group textarea:focus {
    outline: none;
    border-color: var(--brand, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* 1.4: Pro overlay — subtle treatment for locked Pro features */
.mf-pro-overlay {
    position: relative;
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}
.mf-pro-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(99, 102, 241, 0.03) 8px,
        rgba(99, 102, 241, 0.03) 16px
    );
}
.mf-pro-overlay-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
    padding: 0.2rem 0.55rem;
    border-radius: 5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 1;
    pointer-events: auto;
}
.mf-pro-overlay-badge a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mf-pro-overlay-badge a:hover {
    text-decoration: none;
}

/* 1.5: HTTP method button group */
.mf-method-select {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.mf-method-btn {
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    background: var(--surface, #fff);
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    transition: all 0.15s ease;
}
.mf-method-btn:hover {
    border-color: var(--brand, #6366f1);
    color: var(--brand, #6366f1);
}
.mf-method-btn.active {
    background: var(--brand, #6366f1);
    border-color: var(--brand, #6366f1);
    color: #fff;
}

/* 1.6: Toggle/switch row for boolean settings */
.mf-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-light, #f3f4f6);
    border-radius: 10px;
    margin-bottom: 0.5rem;
    background: #fafafa;
    transition: background 0.15s ease;
}
.mf-toggle-row:hover {
    background: #f5f3ff;
}
.mf-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.mf-toggle-label-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}
.mf-toggle-label-hint {
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    line-height: 1.4;
}
.mf-toggle-switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.mf-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.mf-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border, #e5e7eb);
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.mf-toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}
.mf-toggle-switch input:checked + .mf-toggle-slider {
    background: var(--brand, #6366f1);
}
.mf-toggle-switch input:checked + .mf-toggle-slider::before {
    transform: translateX(18px);
}

/* 1.7: Auth section — type selector + credential fields */
.mf-auth-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.mf-auth-type-select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--text);
    cursor: pointer;
}
.mf-auth-fields {
    display: none;
    gap: 1rem;
}
.mf-auth-fields.visible {
    display: flex;
}
.mf-auth-fields > * {
    flex: 1;
    min-width: 0;
}

/* ── Monitor type selector — segmented button group ───── */
.mf-type-select {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.mf-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.85rem 0.5rem;
    border: 2px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: var(--surface, #fff);
    color: var(--text-muted, #6b7280);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    text-align: center;
    line-height: 1.3;
}
.mf-type-btn:hover {
    border-color: var(--brand, #6366f1);
    color: var(--brand, #6366f1);
    background: #f5f3ff;
}
.mf-type-btn.active {
    border-color: var(--brand, #6366f1);
    background: #f5f3ff;
    color: var(--brand, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.mf-type-btn .mf-type-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    line-height: 1;
}
.mf-type-select select {
    /* Legacy fallback — hidden when JS renders buttons */
    display: none;
}

/* ── Primary URL input — larger, more prominent ────────── */
.mf-url-input {
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
    font-family: 'JetBrains Mono', monospace;
    border: 2px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: var(--surface, #fff);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mf-url-input:focus {
    outline: none;
    border-color: var(--brand, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.mf-url-input::placeholder {
    color: #c7c7cc;
    font-weight: 400;
}

/* Read-only type badge (edit page) */
.mf-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.mf-type-badge--http        { background: #f5f3ff; color: var(--brand); }
.mf-type-badge--heartbeat   { background: #f0fdf4; color: #16a34a; }
.mf-type-badge--json        { background: #eff6ff; color: #2563eb; }
.mf-type-badge--ssl         { background: #fefce8; color: #854d0e; }

/* ── Info box (heartbeat how-it-works, SSL info) ───────── */
.mf-info-box {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 1.15rem 1.35rem;
    margin-bottom: 1.25rem;
}
.mf-info-box-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.mf-info-box-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: #15803d;
    margin-bottom: 0.4rem;
}
.mf-info-box-list {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.82rem;
    color: #166534;
    line-height: 1.7;
}

/* ── Friendly name — just uses .form-group ─────────────── */
.mf-friendly-name {
    font-size: 0.95rem;
}

/* ── Alert conditions summary — explains what triggers alerts ── */
.mf-alert-conditions {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.mf-alert-conditions-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.mf-alert-conditions-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.mf-alert-conditions-list li {
    font-size: 0.82rem;
    color: #4b5563;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.mf-alert-conditions-list li strong {
    color: #111827;
    font-weight: 600;
}
.mf-ac-icon {
    flex-shrink: 0;
    font-size: 0.6rem;
    line-height: 1.45;
    margin-top: 2px;
}
.mf-ac-icon-down { color: #ef4444; }
.mf-ac-icon-up { color: #22c55e; }
.mf-ac-icon-warn { color: #f59e0b; }
.mf-alert-conditions-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
    line-height: 1.45;
}

/* ── Notification channels — flat list, no cards-within-cards ── */
.mf-notify-channel {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-light, #f3f4f6);
}
.mf-notify-channel:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.mf-notify-channel:first-child {
    padding-top: 0;
}
.mf-notify-channel-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.mf-notify-channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--text-muted, #6b7280);
}
.mf-notify-channel-icon-svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    color: var(--muted);
    stroke: currentColor;
}
/* SMS input validation states */
.mf-sms-hint {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--muted);
    transition: color 0.15s;
}
.mf-sms-hint--ok { color: var(--success); }
.mf-sms-hint--err { color: var(--danger); }
.mf-sms-consent {
    margin: 0.5rem 0 0;
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.5;
}
.mf-sms-consent a {
    color: var(--brand);
    text-decoration: none;
}
.mf-sms-consent a:hover {
    text-decoration: underline;
}
.mf-notify-channel-input.mf-input-ok {
    border-color: var(--success);
    outline: none;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
}
.mf-notify-channel-input.mf-input-err {
    border-color: var(--danger);
    outline: none;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}
.mf-notify-channel-name {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
}
.mf-notify-channel-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-left: auto;
    flex-shrink: 0;
}
.mf-notify-channel-on {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}
.mf-notify-channel-input {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mf-notify-channel-input:focus {
    outline: none;
    border-color: var(--brand, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.mf-notify-channel-locked {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-muted, #6b7280);
}
/* Small toggle variant for inline use */
.mf-toggle-switch-sm {
    width: 36px;
    height: 20px;
}
.mf-toggle-switch-sm .mf-toggle-slider::before {
    width: 14px;
    height: 14px;
}
.mf-toggle-switch-sm input:checked + .mf-toggle-slider::before {
    transform: translateX(16px);
}

.mf-notify-pro {
    font-size: 0.65rem;
    font-weight: 700;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-left: auto;
}

.mf-pro-upgrade {
    color: var(--brand, #6366f1);
    text-decoration: underline;
    font-weight: 500;
}
.mf-pro-upgrade:hover { text-decoration: none; }

/* ── Dynamic builder rows (custom headers, maintenance windows, assertions) ── */
.builder-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.builder-row input,
.builder-row select {
    flex: 1;
    min-width: 120px;
}
.builder-row-flex-auto {
    flex: 0 0 auto;
}
.builder-remove-btn {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 0.25rem;
    line-height: 1;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.builder-remove-btn:hover { opacity: 0.7; }

/* ── Form textarea — mono font by default ────────────── */
.mf-mono-textarea {
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

/* ── Content type select wrapper ─────────────────────── */
.mf-content-type-wrap {
    margin-bottom: 0.4rem;
}
.mf-content-type-select {
    max-width: 280px;
}

/* ── Misc utility classes ─────────────────────────────── */
.mf-toggle-ml-auto { margin-left: auto; }
.mf-field-group-mt { margin-top: 0.75rem; }
.hint-mt-sm { margin-top: 0.25rem; }
.hint-mt-md { margin-top: 0.5rem; }
.mf-input-sm { max-width: 140px; }
.mf-disabled-wrap { opacity: 0.5; }
.mf-disabled-wrap input,
.mf-disabled-wrap select { cursor: not-allowed; }
.mf-interval-value-muted { color: var(--text-muted); }
.mf-pro-badge-inline { vertical-align: middle; }
.mf-builder-add-btn { margin-top: 0.5rem; }
.builder-separator {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 0.82rem;
}
.mf-notify-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border-light, #f3f4f6);
}
.mf-notify-row:last-of-type { border-bottom: none; }
.mf-notify-check { width: 18px; height: 18px; accent-color: var(--brand, #6366f1); flex-shrink: 0; }
.mf-notify-icon { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.mf-notify-info { flex: 1; min-width: 0; }
.mf-notify-label { font-weight: 600; font-size: 0.92rem; color: var(--text); }
.mf-notify-detail { font-size: 0.82rem; color: var(--text-muted, #6b7280); margin-top: 0.1rem; }

/* ── Interval slider ───────────────────────────────────── */
.mf-interval-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #fafafa;
    border-radius: 10px;
    border: 1px solid var(--border-light, #f3f4f6);
}

.mf-interval-slider {
    flex: 1;
    accent-color: var(--brand, #6366f1);
    height: 6px;
}

.mf-interval-value {
    min-width: 3rem;
    font-weight: 700;
    font-size: 1.1rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--brand, #6366f1);
    text-align: right;
}

.mf-interval-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-muted, #6b7280);
    margin-top: 0.35rem;
    padding: 0 1rem;
}

/* ── Collapsible Advanced section ──────────────────────── */
.mf-collapse-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand, #6366f1);
    cursor: pointer;
    padding: 0.5rem 0;
    margin-bottom: 0;
}
.mf-collapse-toggle:hover {
    color: #4f46e5;
}
.mf-collapse-toggle svg {
    transition: transform 0.2s ease;
    color: var(--brand, #6366f1);
}
.mf-collapse-toggle.open svg {
    transform: rotate(90deg);
}

.mf-collapse-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 0;
}
.mf-collapse-content.open {
    max-height: 3000px;
    opacity: 1;
    margin-top: 1.25rem;
}

/* ── Pro tag (inline) ──────────────────────────────────── */
.mf-pro-tag {
    font-size: 0.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: 0.25rem;
}

/* ── Sticky submit footer ──────────────────────────────── */
.mf-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border, #e5e7eb);
    padding: 1rem 2rem;
    display: flex;
    justify-content: flex-start;
    z-index: 100;
}

/* On dashboard layout, respect the sidebar width */
@media (min-width: 769px) {
    .mf-footer {
        left: var(--sidebar-width);
    }
}

.mf-submit {
    background: var(--brand, #6366f1);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.75rem 2.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}
.mf-submit:hover {
    background: #4f46e5;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}
.mf-submit:active {
    transform: scale(0.98);
}

/* ── Form divider ──────────────────────────────────────── */
.form-divider {
    border: none;
    border-top: 1px solid var(--border, #e5e7eb);
    margin: 1.25rem 0;
}

/* ── Label optional hint ───────────────────────────────── */
.label-optional {
    color: var(--text-muted, #6b7280);
    font-weight: 400;
    font-size: 0.85em;
}

/* ── Required field indicator ──────────────────────────── */
.label-required::after {
    content: " *";
    color: var(--danger, #ef4444);
    font-weight: 600;
}

/* ── Tooltip info icon ─────────────────────────────────── */
.mf-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--border, #e2e8f0);
    color: var(--text-muted, #6b7280);
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
}
.mf-tooltip:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
    width: max-content;
    max-width: 260px;
    z-index: 100;
    line-height: 1.4;
    text-align: left;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.mf-tooltip:hover::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2937;
    z-index: 100;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
    .mf-heading {
        font-size: 1.4rem;
    }
    .mf-section {
        padding: 1.25rem 1.15rem;
        border-radius: 10px;
    }
    .mf-field-row {
        flex-direction: column;
        gap: 0;
    }
    .mf-auth-fields {
        flex-direction: column;
        gap: 0;
    }
    .mf-type-select {
        grid-template-columns: repeat(2, 1fr);
    }
    .mf-method-select {
        gap: 0.3rem;
    }
    .mf-method-btn {
        padding: 0.35rem 0.55rem;
        font-size: 0.72rem;
    }
    .mf-footer {
        left: 0;
        padding: 0.75rem 1rem;
    }
    .mf-submit {
        width: 100%;
    }
    .mf-notify-channel-header {
        gap: 0.4rem;
    }
    .mf-interval-wrap {
        padding: 0.6rem 0.75rem;
    }
    /* 4.3 — Dashboard responsiveness at <480px */
    .d-uptime-bars { display: none; }
    .md-header { flex-direction: column; }
    .md-header-actions { flex-wrap: wrap; gap: 0.5rem; }
    .inc-grid {
        grid-template-columns: 24px 60px minmax(0, 1fr) 0 0 0 70px 60px 24px !important;
    }
    .inc-grid .monitor-group-col,
    .inc-grid .monitor-type-col,
    .inc-grid .inc-cause-col { display: none; }
}

/* ============================================================
   SPRINT 1-4 POLISH STYLES
   ============================================================ */

/* 1.1 — Status code badge in monitor detail subtitle */
.md-status-code-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    line-height: 1.4;
    margin-left: 0.25rem;
}
.md-sc-2xx { background: #dcfce7; color: #166534; }
.md-sc-3xx { background: #dbeafe; color: #1e40af; }
.md-sc-4xx { background: #fff3cd; color: #92400e; }
.md-sc-5xx { background: #fef2f2; color: #991b1b; }

/* 1.2 — HTTP method badge */
.md-method-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* 1.3 — Group name in breadcrumb */
.md-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: var(--space-sm);
}
.md-breadcrumb .md-back {
    margin-bottom: 0;
}
.md-breadcrumb-sep {
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.md-breadcrumb-group {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.md-breadcrumb-group:hover {
    color: var(--brand);
}

/* 1.4 — Group badge on dashboard cards */
.d-group-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--brand-light);
    color: var(--brand);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.2px;
}

/* 1.6 — Incident severity left-border color */
.inc-severity-5xx { border-left: 3px solid var(--danger) !important; }
.inc-severity-4xx { border-left: 3px solid var(--warning) !important; }
.inc-severity-timeout { border-left: 3px solid #9ca3af !important; }

/* 1.7 — Status duration on dashboard */
.d-status-duration {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 2.2 — Region toggle button active state */
.md-region-toggle-btn.active {
    background: var(--brand-light);
    color: var(--brand);
    border-color: var(--brand);
}

/* 4.1 — Chart loading spinner overlay */
.md-chart-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.8);
    z-index: 5;
    border-radius: var(--radius-md);
}
.md-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 4.2 — Chart empty state */
.md-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* 4.3 — Mobile responsive: incident grid stacking at 768px */
@media (max-width: 768px) {
    .inc-grid {
        grid-template-columns: 24px 70px minmax(0,1fr) 0 0 minmax(0,0.8fr) 80px 70px 24px !important;
    }
    .inc-grid .monitor-group-col { display: none; }
    .inc-grid .monitor-type-col { display: none; }
    .md-header { flex-direction: column; }
    .md-header-actions { flex-wrap: wrap; }
}

/* 4.3 — Mobile responsive: small screens (375px–480px) */
@media (max-width: 480px) {
    .md-header-actions { gap: 0.35rem; }
    .md-header-actions .btn { font-size: 0.75rem; padding: 0.45rem 0.75rem; }
    .md-top-cards { gap: 0.5rem; }
    .md-region-name { min-width: 60px; }
    .md-region-ms { min-width: 45px; }
    .toolbar-right { flex-wrap: wrap; gap: 0.35rem; }
    .toolbar-dropdown { font-size: 0.78rem; padding: 0.4rem 0.6rem; }
}
@media (max-width: 375px) {
    .md-header-actions .btn { flex: 1 1 calc(50% - 0.25rem); text-align: center; }
    .md-section-header h2 { font-size: 0.85rem; }
    .d-filter-pill { font-size: 0.68rem; padding: 0.2rem 0.45rem; }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE: 480px — small phones
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* ── App layout ── */
    .app-content { padding: 0.5rem; }
    .app-sidebar { padding: 0.35rem 0.5rem; gap: 0.25rem; flex-wrap: nowrap; }
    .app-sidebar-brand-text { display: none; }
    .app-sidebar-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-shrink: 1; min-width: 0; }
    .app-sidebar-link { font-size: 0.68rem; padding: 0.35rem 0.4rem; white-space: nowrap; }
    .app-sidebar-footer { gap: 0.25rem; }
    .app-sidebar-upgrade { font-size: 0.68rem; padding: 0.3rem 0.5rem; }
    .app-sidebar-link-sm { font-size: 0.68rem; padding: 0.3rem 0.4rem; }

    /* ── Dashboard ── */
    .dash-header h1 { font-size: 1.1rem; }
    .monitor-card.d-two-tier { padding: 0.5rem 0.6rem; }
    .d-row-primary .monitor-name { font-size: 0.82rem; }
    .d-row-primary .uptime-value { font-size: 0.75rem; min-width: 48px; }
    .d-row-secondary { padding-left: 32px; font-size: 0.7rem; }
    .strip-stat { font-size: 0.7rem; }
    .strip-stat-val { font-size: 1rem; }
    .d-agg-stats { gap: 0.5rem; }
    .d-agg-stat { font-size: 0.68rem; padding: 0.4rem 0.5rem; }

    /* ── Monitor detail ── */
    .md-card { padding: 0.75rem; }
    .md-card-value { font-size: 1.25rem; }
    .md-uptime-pct { font-size: 2rem; }
    .md-section { padding: 0.75rem; }
    .md-config-grid { grid-template-columns: 1fr; }
    .md-uptime-bars { height: 26px; }
    .md-inc-header,
    .md-inc-row-link { grid-template-columns: 70px 1fr 70px 20px; }

    /* ── Monitor forms ── */
    .mf-heading { font-size: 1.2rem; margin-bottom: 1.25rem; }
    .mf-section { padding: 1rem 0.85rem; border-radius: 10px; }
    .mf-footer { padding: 0.6rem 0.75rem; }
    .mf-submit { padding: 0.6rem 1.25rem; font-size: 0.85rem; }
    .mf-field-group label { font-size: 0.82rem; }
    .mf-info-box { padding: 0.75rem; font-size: 0.8rem; }

    /* ── Settings ── */
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav { display: none; }
    .settings-section { padding: 1rem 0.75rem; }
    .settings-header h1 { font-size: 1.25rem; }
    .sub-plan-card { padding: 0.75rem 1rem; }
    .sub-plan-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .sub-plan-features span { font-size: 0.72rem; padding: 0.2rem 0.5rem; }
    .sub-guarantee { padding: 0.6rem 0.75rem; font-size: 0.78rem; }
    .danger-card { flex-direction: column; }

    /* ── Incidents ── */
    .inc-detail-hero { padding: 0.75rem 1rem; }
    .inc-hero-monitor { font-size: 1rem; }
    .inc-detail-grid { grid-template-columns: 1fr; }
    .inc-badge { font-size: 0.62rem; padding: 0.1rem 0.4rem; }
    .inc-timeline-event { padding-left: 1.5rem; }
    .inc-region-table { display: block; overflow-x: auto; }

    /* ── API docs ── */
    .api-docs-header h1 { font-size: 1.25rem; }
    .api-section { padding: 0.75rem; overflow-x: auto; }
    .api-type-section { padding: 0.75rem; overflow-x: auto; }
    .endpoint-body { overflow-x: auto; }
    .api-cta-bar { flex-wrap: wrap; padding: 0.75rem; gap: 0.5rem; }
    .param-table { font-size: 0.75rem; min-width: 480px; }
    .param-table td, .param-table th { padding: 0.3rem 0.25rem; }
    .endpoint-header { gap: 0.5rem; padding: 0.6rem 0.75rem; font-size: 0.82rem; }
    .endpoint-path { font-size: 0.78rem; }
    .method-badge { font-size: 0.65rem; padding: 0.15rem 0.4rem; }
    .response-shape { font-size: 0.72rem; padding: 0.6rem; }
    .code-panel { font-size: 0.72rem; overflow-x: auto; }
    .field-ref-table { font-size: 0.72rem; min-width: 400px; }
    .field-ref-table td, .field-ref-table th { padding: 0.25rem 0.2rem; }
    .keys-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ── API playground ── */
    .apg { padding: 1rem; }
    .apg-code { font-size: 0.72rem; padding: 0.75rem; }
    .apg-code-tab { font-size: 0.68rem; padding: 0.3rem 0.5rem; }

    /* ── Container ── */
    .container { padding: 1rem; }

    /* ── Landing page ── */
    .l-hero { padding: 1.5rem 0 0.75rem; }
    .l-hero h1 { font-size: 1.5rem; line-height: 1.2; }
    .l-hero-sub { font-size: 0.9rem; }
    .l-hero-features { gap: 0.1rem 0.75rem; }
    .l-hero-features span { font-size: 0.75rem; }
    .l-hero-kicker { font-size: 0.85rem; }
    .l-hero-actions { flex-wrap: wrap; gap: 0.5rem; }
    .l-btn-primary, .l-btn-ghost { padding: 0.65rem 1.25rem; font-size: 0.88rem; flex: 1 1 auto; text-align: center; }
    .l-pricing-grid { grid-template-columns: 1fr; }
    .l-howto-steps { gap: 1rem; }
    .l-howto-connector { display: none; }
    .l-types-grid { grid-template-columns: 1fr; }
    .l-feature-grid { grid-template-columns: 1fr; }
    .l-features { padding: 1rem 0 0.75rem; }
    .l-feature { padding: 1.5rem 0; }
    .l-feature h2 { font-size: 1.25rem; }
    .l-code pre { font-size: 0.72rem; overflow-x: auto; word-break: break-all; }
    .l-bottom-cta { padding: 2rem 1rem; }
    .l-bottom-cta h2 { font-size: 1.25rem; }
    .l-checker-wrap { margin: 1.5rem auto; }
    .l-screenshots { padding: 1.5rem 0; }
    .l-ss-tabs { gap: 0.25rem; }
    .l-ss-tab { font-size: 0.78rem; padding: 0.4rem 0.6rem; }

    /* ── Pricing page ── */
    .price-card { padding: 1.5rem 1rem; }
    .price-amount { font-size: 2.25rem; }
    .pricing-grid { grid-template-columns: 1fr !important; }
    .features { grid-template-columns: 1fr !important; }

    /* ── Status pages ── */
    .uptime-section { padding: 1rem; }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE: 375px — iPhone SE / smallest phones
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {

    /* ── App layout ── */
    .app-content { padding: 0.35rem; }
    .app-sidebar { padding: 0.25rem 0.35rem; }
    .app-sidebar-link { font-size: 0.65rem; padding: 0.3rem 0.35rem; }

    /* ── Dashboard ── */
    .dash-header h1 { font-size: 1rem; }
    .monitor-card.d-two-tier { padding: 0.4rem 0.5rem; }
    .d-row-primary .monitor-name { font-size: 0.78rem; }
    .d-row-secondary { padding-left: 28px; font-size: 0.68rem; }
    .d-agg-stat { font-size: 0.62rem; }
    .status-strip { padding: 0.5rem; }
    .strip-stat-val { font-size: 0.9rem; }

    /* ── Monitor detail ── */
    .md-card { padding: 0.6rem; }
    .md-uptime-pct { font-size: 1.75rem; }
    .md-uptime-bars { height: 22px; }
    .md-section { padding: 0.6rem; }
    .md-region-row { gap: 0.25rem; }
    .md-region-name { min-width: 50px; font-size: 0.68rem; }
    .md-region-ms { min-width: 38px; font-size: 0.72rem; }

    /* ── Monitor forms ── */
    .mf-section { padding: 0.75rem 0.65rem; }
    .mf-heading { font-size: 1.05rem; }
    .mf-submit { width: 100%; }

    /* ── Settings ── */
    .settings-section { padding: 0.75rem 0.6rem; }
    .sub-plan-card { padding: 0.6rem 0.75rem; }
    .sub-plan-features span { font-size: 0.68rem; }

    /* ── Incidents ── */
    .inc-detail-hero { padding: 0.6rem 0.75rem; }
    .inc-hero-monitor { font-size: 0.9rem; }

    /* ── API docs ── */
    .api-type-section { padding: 0.5rem; }
    .api-section { padding: 0.5rem; }
    .param-table { font-size: 0.7rem; }
    .method-badge { font-size: 0.6rem; }
    .endpoint-header { font-size: 0.78rem; padding: 0.5rem 0.6rem; }

    /* ── API playground ── */
    .apg { padding: 0.75rem; }
    .apg-tab { font-size: 0.68rem; padding: 0.4rem 0.35rem; }
    .apg-copy { font-size: 0.68rem; }
    .apg-kw-match { font-size: 0.72rem; }
    .apg-kw-input { font-size: 0.72rem; }

    /* ── Container ── */
    .container { padding: 0.75rem; }

    /* ── Landing page ── */
    .l-hero { padding: 0.75rem 0 0.5rem; }
    .l-hero h1 { font-size: 1.3rem; }
    .l-hero-sub { font-size: 0.8rem; }
    .l-hero-features span { font-size: 0.7rem; }
    .l-hero-actions { flex-direction: column; gap: 0.5rem; }
    .l-btn-primary, .l-btn-ghost { width: 100%; text-align: center; box-sizing: border-box; }
    .l-checker-wrap h2 { font-size: 1rem; }

    /* ── Pricing ── */
    .price-card { padding: 1.25rem 0.75rem; }
    .price-amount { font-size: 2rem; }
    .feature-card { padding: 1rem; }

    /* ── Status pages ── */
    .uptime-section { padding: 0.75rem; }
}

/* ============================================================
   Auto-Discovery Page
   ============================================================ */
.discover-page {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);
}
.discover-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    text-align: center;
}
.discover-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem;
}
.discover-subtitle {
    color: var(--text-muted);
    margin: 0 0 1.5rem;
    font-size: var(--text-base);
}
.discover-form {
    display: flex;
    gap: 0.5rem;
    max-width: 480px;
    margin: 0 auto;
}
.discover-input {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    outline: none;
}
.discover-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.discover-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    white-space: nowrap;
}
.discover-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 1rem 0 0;
}

/* Loading */
.discover-spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.discover-loading-text {
    color: var(--text-muted);
    font-size: var(--text-base);
}
.discover-dots::after {
    content: '';
    animation: dots 1.5s steps(3) infinite;
}
@keyframes dots {
    0% { content: ''; }
    33% { content: '.'; }
    66% { content: '..'; }
    100% { content: '...'; }
}

/* Results */
.discover-results-header {
    margin-bottom: 1rem;
}
.discover-results-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.25rem;
}
.discover-sources {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}
.discover-list-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}
.discover-select-all {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.discover-selected-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.discover-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.discover-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s;
}
.discover-row:last-child { border-bottom: none; }
.discover-row:hover { background: var(--bg-hover, #f9fafb); }
.discover-check {
    flex-shrink: 0;
    width: 16px; height: 16px;
    accent-color: var(--brand);
}
.discover-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.discover-row-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.discover-row-url {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.discover-badge {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.discover-badge-sitemap { background: #ede9fe; color: #7c3aed; }
.discover-badge-crawl { background: #dbeafe; color: #2563eb; }
.discover-badge-probe { background: #fef3c7; color: #d97706; }
.discover-badge-type { background: #f3f4f6; color: #374151; }
.discover-badge-existing { background: #dbeafe; color: #1d4ed8; }
.discover-row-existing { opacity: 0.5; }
.discover-score-dot {
    flex-shrink: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
}
.discover-score-high { background: var(--success); }
.discover-score-med { background: var(--warning); }
.discover-link-btn {
    background: none;
    border: none;
    color: var(--brand);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.discover-link-btn:hover { color: var(--brand-dark, #4f46e5); }
.discover-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}
.discover-create-btn {
    padding: 0.75rem 2rem;
    font-size: 1rem;
}
.discover-manual-link {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: none;
}
.discover-manual-link:hover { color: var(--brand); }

/* Empty state */
.discover-empty-icon { margin-bottom: 1rem; }
.discover-empty-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.5rem;
}
.discover-empty-text {
    color: var(--text-muted);
    font-size: var(--text-base);
    margin: 0 0 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.discover-empty-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}
.discover-success-banner {
    background: linear-gradient(135deg, var(--brand), #818cf8);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    cursor: pointer;
    animation: bannerSlideIn 0.4s ease-out;
}
@keyframes bannerSlideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.discover-success-inner h3 { margin: 0 0 0.25rem; font-size: 1.15rem; }
.discover-success-inner p { margin: 0; opacity: 0.9; font-size: 0.9rem; }
.discover-quick-settings {
    margin: 1rem 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.discover-qs-toggle {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text);
}
.discover-qs-body {
    padding: 0 1rem 1rem;
}
.discover-qs-field {
    margin-bottom: 0.75rem;
}
.discover-qs-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
}
.discover-qs-field input,
.discover-qs-field select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    box-sizing: border-box;
}
.discover-qs-field input:focus,
.discover-qs-field select:focus {
    border-color: var(--brand);
}
.discover-qs-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}
.discover-qs-advanced {
    margin-top: 0.5rem;
}
.discover-limit-warning {
    color: var(--warning);
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fef3c7;
    border-radius: var(--radius-md);
}

@media (max-width: 600px) {
    .discover-page { padding: var(--space-md) var(--space-sm); }
    .discover-card { padding: 1.5rem 1rem; }
    .discover-form { flex-direction: column; }
    .discover-btn { width: 100%; }
    .discover-actions { flex-direction: column; align-items: stretch; text-align: center; }
    .discover-create-btn { width: 100%; }
    .discover-row { padding: 0.6rem 0.75rem; gap: 0.5rem; }
    .discover-row-name { font-size: 0.82rem; }
    .discover-badge { font-size: 0.65rem; }
    .discover-empty-actions { flex-direction: column; }
    .discover-qs-body { padding: 0 0.75rem 0.75rem; }
    .l-hero-discover-input { flex-direction: column; }
    .l-hero-manual-add { flex-direction: column; }
    .l-hero-scan-btn { width: 100%; }
    .l-hero-cta-row { flex-direction: column; }
    .l-hero-result-row { gap: 0.3rem; }
    .l-hero-result-name { font-size: 0.8rem; }
    .l-hero-add-manual { flex-wrap: wrap; }
    .l-hero-manual-hint { width: 100%; margin-top: 0.15rem; }
    .l-bottom-discover { flex-direction: column; }
    .l-api-callout-inner { padding: 0.75rem 1rem; font-size: 0.85rem; }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION — Additional improvements
   ═══════════════════════════════════════════════════════════════ */

/* ── Touch targets: ensure 44px minimum ── */
@media (max-width: 768px) {
    .mf-toggle-switch { min-width: 44px; min-height: 24px; }
    .mf-notify-channel-header { min-height: 44px; }
    .d-filter-pill { min-height: 36px; display: inline-flex; align-items: center; }
    .toolbar-dropdown { min-height: 40px; }
    .btn { min-height: 40px; }
}

/* ── Type selector: 2x2 on small phones ── */
@media (max-width: 480px) {
    .mf-type-select { grid-template-columns: repeat(2, 1fr); }
    .mf-type-btn { padding: 0.65rem 0.4rem; font-size: 0.75rem; }
}

/* ── Dashboard: improve monitor card mobile layout ── */
@media (max-width: 640px) {
    .monitor-card.d-two-tier {
        flex-direction: column;
        align-items: stretch;
    }
    .d-row-primary {
        width: 100%;
    }
    .d-row-secondary {
        padding-left: 36px;
        width: 100%;
    }
    .d-row-secondary .d-secondary-sep { display: none; }
    .dash-header-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .dash-header-actions .btn {
        flex: 1 1 auto;
        text-align: center;
        min-width: 0;
    }
}

/* ── Dashboard: bulk actions bar ── */
@media (max-width: 480px) {
    .d-bulk-bar {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
        padding: 0.5rem;
    }
    .d-bulk-bar .btn { width: 100%; text-align: center; }
}

/* ── Incident detail: stack grids on mobile ── */
@media (max-width: 640px) {
    .inc-detail-grid {
        grid-template-columns: 1fr;
    }
    .inc-detail-stats {
        grid-template-columns: 1fr 1fr;
    }
    .inc-timeline-event {
        padding-left: 1.25rem;
    }
    .inc-timeline-ts {
        font-size: 0.72rem;
    }
}

/* ── Settings: better mobile layout ── */
@media (max-width: 640px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav { display: none; }
    .sub-plan-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .sub-plan-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .sub-plan-actions .btn,
    .sub-plan-actions button { flex: 1 1 auto; text-align: center; }
    .sub-plan-features {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
}

/* ── Pricing page: better mobile spacing ── */
@media (max-width: 640px) {
    .pricing-hero h1 { font-size: 1.5rem; line-height: 1.25; }
    .pricing-hero .tagline { font-size: 0.9rem; }
    .pricing-grid { grid-template-columns: 1fr; gap: 1rem; }
    .price-card { padding: 1.5rem 1rem; }
    .faq-section { padding: 1rem; }
    .faq-item h4 { font-size: 0.92rem; }
    .faq-item p { font-size: 0.85rem; }
    .bottom-cta { padding: 1.5rem 1rem; }
    .bottom-cta h2 { font-size: 1.25rem; }
}

/* ── Monitor detail: chart containers responsive ── */
@media (max-width: 480px) {
    .md-chart-wrap canvas {
        max-height: 200px;
    }
    .md-response-stats {
        gap: 0.35rem;
    }
    .md-response-stat {
        padding: 0.5rem;
    }
    .md-response-stat-label { font-size: 0.68rem; }
    .md-response-stat-value { font-size: 1rem; }
    .md-alert-ch { padding: 0.5rem; min-height: 44px; }
}

/* ── Landing: hero results list mobile ── */
@media (max-width: 480px) {
    .l-hero-result-row {
        flex-wrap: wrap;
    }
    .l-hero-result-url {
        width: 100%;
        font-size: 0.72rem;
        word-break: break-all;
    }
    .l-hero-cta-row .l-btn-primary,
    .l-hero-cta-row .l-btn-pro {
        width: 100%;
        text-align: center;
    }
}

/* ── Status page: uptime bars overflow ── */
@media (max-width: 480px) {
    .uptime-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .uptime-section h2 { font-size: 1rem; }
    .sp-monitor-name { font-size: 0.9rem; }
}

/* ── Admin page ── */
@media (max-width: 640px) {
    .admin-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .admin-tabs {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .admin-tab { font-size: 0.78rem; padding: 0.4rem 0.6rem; }
    .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 375px) {
    .admin-kpi-grid { grid-template-columns: 1fr; }
}

/* ── Support page ── */
@media (max-width: 480px) {
    .support-form { padding: 1rem; }
    .support-form textarea { min-height: 120px; }
}

/* ── API docs sidebar ── */
@media (max-width: 768px) {
    .api-layout { grid-template-columns: 1fr; }
    .api-sidebar { display: none; }
}

/* ── API docs: fix endpoint header & type header overflow on mobile ── */
@media (max-width: 768px) {
    /* Type section header — stack heading and badge vertically */
    .api-type-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
    .api-type-header h2 {
        font-size: 1.15rem;
        line-height: 1.25;
        word-break: break-word;
    }
    .api-type-section {
        padding: var(--space-md);
    }
    .api-type-desc { font-size: 0.88rem; }

    /* Endpoint header — wrap method/path on row 1, description on row 2 */
    .endpoint-header {
        flex-wrap: wrap;
        gap: 0.4rem 0.5rem;
        padding-right: 2rem; /* leave room for absolute chevron */
        position: relative;
        align-items: center;
    }
    .endpoint-header .method-badge {
        flex-shrink: 0;
    }
    .endpoint-path {
        flex: 1 1 auto;
        min-width: 0;
        word-break: break-all;
        font-size: 0.78rem;
    }
    .endpoint-desc {
        flex-basis: 100%;
        font-size: 0.78rem;
        color: var(--text-muted);
        margin-top: 0.15rem;
        word-break: break-word;
    }
    .endpoint-header .chevron {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0;
    }
    .endpoint.open .endpoint-header .chevron {
        transform: translateY(-50%) rotate(90deg);
    }
    .endpoint-copy-btn { display: none !important; }
}

@media (max-width: 480px) {
    .api-type-header h2 { font-size: 1.05rem; }
    .api-type-badge { font-size: 0.65rem; padding: 0.15rem 0.4rem; }
    .endpoint-path { font-size: 0.72rem; }
    .endpoint-desc { font-size: 0.72rem; }
    .endpoint-header { padding: 0.5rem 1.75rem 0.5rem 0.6rem; }
    .endpoint-header .chevron { right: 0.5rem; }
    .api-type-section { padding: 0.85rem 0.65rem; }
}

/* ── Monitor detail: section headers stack on mobile ── */
@media (max-width: 768px) {
    .md-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .md-chart-controls {
        flex-wrap: wrap;
        gap: 0.4rem 0.5rem;
        width: 100%;
    }
    .md-threshold-cta {
        flex-basis: 100%;
        font-size: 0.75rem;
        line-height: 1.3;
    }
    .md-threshold-badge {
        flex-shrink: 0;
    }
    .md-range-toggle {
        flex-wrap: wrap;
    }
    .md-inc-header-right {
        flex-wrap: wrap;
        gap: 0.4rem;
        width: 100%;
    }
    .md-inc-header-right .btn {
        flex: 1 1 auto;
        text-align: center;
        font-size: 0.78rem;
        white-space: nowrap;
    }
}

/* ── Monitor detail: incidents table → card layout on mobile ── */
@media (max-width: 640px) {
    .md-incidents-table { font-size: 0.82rem; }
    /* Hide table header — card layout has self-evident structure */
    .md-inc-header { display: none !important; }
    /* Override the broken 4-col grid with a 3-col card layout */
    .md-inc-row-link {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 0.35rem 0.6rem !important;
        padding: 0.75rem 0.6rem !important;
        align-items: center;
    }
    .md-inc-status {
        grid-row: 1;
        grid-column: 1;
    }
    .md-inc-cause {
        grid-row: 1;
        grid-column: 2;
        font-size: 0.82rem;
        flex-wrap: wrap;
        min-width: 0;
    }
    .md-inc-chevron {
        grid-row: 1 / span 2;
        grid-column: 3;
        align-self: center;
    }
    .md-inc-time {
        grid-row: 2;
        grid-column: 1 / span 2;
        justify-self: start;
        font-size: 0.72rem;
        padding-left: 0;
        white-space: nowrap;
    }
    .md-inc-duration {
        grid-row: 2;
        grid-column: 1 / span 2;
        justify-self: end;
        font-size: 0.72rem;
        text-align: right;
        white-space: nowrap;
    }
    /* When ongoing, duration cell holds the redundant "Ongoing" badge — hide it */
    .md-inc-duration .md-inc-badge { display: none; }
    /* Status badge size adjustment */
    .md-inc-status .md-inc-badge {
        font-size: 0.68rem;
        padding: 0.2rem 0.5rem;
    }
}

/* ── Mobile safe-area: ensure content can scroll past iOS Safari toolbar ── */
@media (max-width: 768px) {
    .app-content {
        padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
    }
    .container {
        padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
    }
}