/* ============================================================
   Enginerds AI Intelligence — Design System
   Production-grade analytics aesthetic. Loaded on /ai/* pages.
   ============================================================ */

:root {
    /* Brand */
    --ai-orange: #F8A347;
    --ai-orange-bright: #FFB35C;
    --ai-orange-dim: #c97f2e;
    --ai-orange-glow: rgba(248, 163, 71, 0.35);

    /* Dark surfaces */
    --ai-dark-0: #050810;
    --ai-dark-1: #0a0f1c;
    --ai-dark-2: #111827;
    --ai-dark-3: #1f2937;

    /* Accent palette */
    --ai-cyan: #22d3ee;
    --ai-purple: #a78bfa;
    --ai-emerald: #10b981;
    --ai-pink: #f472b6;

    /* Severity */
    --ai-sev-breaking: #ef4444;
    --ai-sev-breaking-glow: rgba(239, 68, 68, 0.45);
    --ai-sev-high: #f97316;
    --ai-sev-high-glow: rgba(249, 115, 22, 0.35);
    --ai-sev-medium: #eab308;
    --ai-sev-medium-glow: rgba(234, 179, 8, 0.3);
    --ai-sev-low: #6b7280;
    --ai-sev-low-glow: rgba(107, 114, 128, 0.2);

    /* Live indicator */
    --ai-live: #10b981;

    /* Type */
    --ai-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Monaco, Consolas, monospace;
    --ai-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Surfaces */
    --ai-card-bg: #ffffff;
    --ai-card-border: rgba(17, 24, 39, 0.08);
    --ai-card-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 4px 16px rgba(17, 24, 39, 0.05);
    --ai-card-shadow-hover: 0 4px 8px rgba(17, 24, 39, 0.06), 0 12px 32px rgba(17, 24, 39, 0.1);
}

/* ===== Page wrapper =====
   --ai-nav-clearance: pushes content below the site's position:fixed top navbar
   (NavMenu.razor adds ~80px height; we use 90px to leave a comfortable gap).
   Apply via padding-top on every full-bleed page or hero whose top edge would
   otherwise vanish under the navbar. */

:root { --ai-nav-clearance: 90px; }

.ai-page {
    color: #0f172a;
    /* No padding here — the hero (or first .container) is what carries the
       nav clearance via its own padding-top so the dark hero background can
       extend all the way to the navbar edge. */
}
.ai-page a { color: var(--ai-orange); }
.ai-page a:hover { color: var(--ai-orange-dim); }
.ai-page code { color: #be5300; background: rgba(248, 163, 71, 0.08); padding: 0 .3em; border-radius: 3px; }

/* When a public AI page leads with a plain container instead of a dark hero
   (event/provider/model detail), the container needs nav clearance directly.
   !important defends against Bootstrap utility classes (pt-4, p-3, etc.) that
   use !important themselves — without this, those utilities silently win. */
.ai-page > .container:first-of-type { padding-top: var(--ai-nav-clearance) !important; }

/* Admin page wrapper — light bg, clears the navbar, applies to every /admin/ai/* page.
   padding-top !important for the same Bootstrap-utility-override reason as above. */
.ai-admin-page {
    background: #fafafa;
    min-height: 100vh;
    padding: var(--ai-nav-clearance) 1rem 1rem !important;
}

/* ===== Hero ===== */

.ai-hero {
    position: relative;
    background: var(--ai-dark-0);
    color: #fff;
    overflow: hidden;
    border-radius: 0 0 24px 24px;
    /* Top padding includes the nav clearance so the hero background extends
       up under the fixed navbar without obscuring the eyebrow / breadcrumb. */
    padding: calc(var(--ai-nav-clearance) + 1rem) 1.5rem 4rem;
    margin-bottom: 3rem;
}

.ai-hero::before {
    /* dot-grid pattern */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
    background-size: 22px 22px;
    pointer-events: none;
}

.ai-hero::after {
    /* glow blobs */
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 600px 400px at 85% 15%, rgba(248, 163, 71, 0.22), transparent 60%),
        radial-gradient(ellipse 700px 500px at 15% 95%, rgba(34, 211, 238, 0.18), transparent 60%),
        radial-gradient(ellipse 500px 400px at 50% 50%, rgba(167, 139, 250, 0.1), transparent 70%);
    pointer-events: none;
}

.ai-hero > .container { position: relative; z-index: 2; }

.ai-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ai-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.35rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    margin-bottom: 1.5rem;
}

.ai-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ai-live);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    animation: ai-pulse 2s ease-out infinite;
}

@keyframes ai-pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ai-hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
    color: #fff;
}

.ai-hero h1 .ai-gradient-text {
    background: linear-gradient(135deg, var(--ai-orange-bright) 0%, var(--ai-pink) 50%, var(--ai-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ai-hero p.lead {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    color: rgba(255, 255, 255, 0.78);
    max-width: 720px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.ai-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.ai-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--ai-orange);
    color: #1a1a1a !important;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--ai-orange);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ai-btn-primary:hover {
    background: var(--ai-orange-bright);
    color: #1a1a1a !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px var(--ai-orange-glow);
}

.ai-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    color: #fff !important;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ai-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff !important;
}

/* ===== Stats row (in hero) ===== */

.ai-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    margin-top: 3rem;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-stat {
    padding: 0.5rem 1.25rem;
    text-align: left;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    animation: ai-fade-up 0.6s ease-out backwards;
}
.ai-stat:last-child { border-right: none; }
.ai-stat:nth-child(2) { animation-delay: 0.05s; }
.ai-stat:nth-child(3) { animation-delay: 0.1s; }
.ai-stat:nth-child(4) { animation-delay: 0.15s; }
.ai-stat:nth-child(5) { animation-delay: 0.2s; }

.ai-stat-value {
    font-family: var(--ai-mono);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.ai-stat-value.is-accent { color: var(--ai-orange-bright); }
.ai-stat-value.is-breaking { color: var(--ai-sev-breaking); }
.ai-stat-value.is-emerald { color: var(--ai-emerald); }

.ai-stat-label {
    font-family: var(--ai-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 0.35rem;
}

@keyframes ai-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Section heading ===== */

.ai-section-eyebrow {
    font-family: var(--ai-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ai-orange-dim);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.ai-section-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

/* ===== Bento grid ===== */

.ai-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
}

.ai-bento-cell {
    background: var(--ai-card-bg);
    border: 1px solid var(--ai-card-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--ai-card-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}
.ai-bento-cell.is-hover:hover {
    box-shadow: var(--ai-card-shadow-hover);
    transform: translateY(-2px);
    border-color: rgba(248, 163, 71, 0.3);
}
.ai-bento-cell.is-dark {
    background: var(--ai-dark-1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.08);
}
.ai-bento-cell.is-dark .ai-section-title { color: #fff; }
.ai-bento-cell.is-dark a { color: var(--ai-orange-bright); }

@media (min-width: 992px) {
    .ai-bento-cell.span-12 { grid-column: span 12; }
    .ai-bento-cell.span-8  { grid-column: span 8; }
    .ai-bento-cell.span-6  { grid-column: span 6; }
    .ai-bento-cell.span-4  { grid-column: span 4; }
    .ai-bento-cell.span-3  { grid-column: span 3; }
}
@media (max-width: 991.98px) {
    .ai-bento-cell { grid-column: span 12; }
}

/* ===== Timeline event list ===== */

.ai-timeline {
    position: relative;
    padding-left: 1.5rem;
}

.ai-timeline::before {
    /* the spine */
    content: "";
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(248, 163, 71, 0.5) 0%,
        rgba(17, 24, 39, 0.08) 100%);
    border-radius: 1px;
}

.ai-event-card {
    position: relative;
    background: var(--ai-card-bg);
    border: 1px solid var(--ai-card-border);
    border-left: 3px solid var(--sev-color, var(--ai-sev-low));
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--ai-card-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ai-event-card::before {
    /* timeline dot */
    content: "";
    position: absolute;
    left: -25px;
    top: 18px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--sev-color, var(--ai-sev-low));
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ai-card-border);
}

.ai-event-card.is-breaking::before {
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ai-sev-breaking),
                0 0 12px var(--ai-sev-breaking-glow),
                0 0 24px var(--ai-sev-breaking-glow);
    animation: ai-breaking-pulse 2.5s ease-in-out infinite;
}

@keyframes ai-breaking-pulse {
    0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ai-sev-breaking), 0 0 8px var(--ai-sev-breaking-glow), 0 0 16px var(--ai-sev-breaking-glow); }
    50% { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ai-sev-breaking), 0 0 16px var(--ai-sev-breaking-glow), 0 0 32px var(--ai-sev-breaking-glow); }
}

.ai-event-card.is-breaking {
    border-left-color: var(--ai-sev-breaking);
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.025) 0%, #fff 30%);
}

.ai-event-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--ai-card-shadow-hover);
}

/* Compact (non-timeline) variant — used in feed page and inside dark bento */
.ai-event-card.is-compact {
    margin-bottom: 0.75rem;
}
.ai-event-card.is-compact::before { display: none; }

/* When inside dark bento cell */
.ai-bento-cell.is-dark .ai-event-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: #fff;
    box-shadow: none;
}
.ai-bento-cell.is-dark .ai-event-card a { color: #fff; }
.ai-bento-cell.is-dark .ai-event-card .ai-event-summary { color: #fff; }
.ai-bento-cell.is-dark .ai-event-card .ai-meta-row { color: rgba(255, 255, 255, 0.6); }

/* Event card internals */
.ai-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.6rem;
}

.ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--ai-mono);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    background: rgba(17, 24, 39, 0.05);
    color: #374151;
    border: 1px solid transparent;
    text-decoration: none;
}
.ai-chip:hover { background: rgba(17, 24, 39, 0.09); text-decoration: none; }

.ai-chip.is-sev {
    color: #fff;
    background: var(--sev-color, var(--ai-sev-low));
    text-transform: uppercase;
}
.ai-chip.is-type {
    background: rgba(248, 163, 71, 0.12);
    color: #b46a14;
}
.ai-chip.is-provider, .ai-chip.is-model {
    background: rgba(34, 211, 238, 0.1);
    color: #0c7c8b;
}
.ai-chip.is-ghost {
    background: transparent;
    border: 1px solid rgba(17, 24, 39, 0.15);
    color: #4b5563;
}

.ai-event-date {
    margin-left: auto;
    font-family: var(--ai-mono);
    font-size: 0.75rem;
    color: #6b7280;
}

.ai-event-summary {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}
.ai-event-summary a { color: inherit !important; text-decoration: none; }
.ai-event-summary a:hover { color: var(--ai-orange-dim) !important; }

.ai-event-evidence {
    font-style: italic;
    font-size: 0.875rem;
    color: #4b5563;
    padding: 0.4rem 0.75rem;
    border-left: 2px solid rgba(17, 24, 39, 0.15);
    margin: 0.5rem 0;
    line-height: 1.5;
}

.ai-event-delta {
    font-family: var(--ai-mono);
    font-size: 0.8rem;
    color: #4b5563;
    background: rgba(17, 24, 39, 0.03);
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    margin: 0.5rem 0;
}
.ai-event-delta strong { color: #0f172a; }
.ai-event-delta .arrow { color: var(--ai-orange); margin: 0 0.4rem; }

.ai-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(17, 24, 39, 0.08);
    font-size: 0.75rem;
    font-family: var(--ai-mono);
    color: #6b7280;
}
.ai-meta-row a { color: var(--ai-orange-dim); text-decoration: none; }
.ai-meta-row a:hover { color: var(--ai-orange); text-decoration: underline; }
.ai-meta-row .spacer { margin-left: auto; }

/* ===== Provider monogram tiles ===== */

.ai-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.85rem;
}

.ai-provider-tile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--ai-card-bg);
    border: 1px solid var(--ai-card-border);
    border-radius: 12px;
    text-decoration: none;
    color: #0f172a;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ai-provider-tile:hover {
    transform: translateY(-2px);
    border-color: var(--ai-orange);
    box-shadow: var(--ai-card-shadow-hover);
    text-decoration: none;
    color: #0f172a;
}

.ai-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #fff;
    font-family: var(--ai-mono);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.ai-monogram.is-lg { width: 56px; height: 56px; font-size: 1.15rem; border-radius: 12px; }

.ai-provider-tile-name {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
}

.ai-provider-tile-meta {
    font-family: var(--ai-mono);
    font-size: 0.72rem;
    color: #6b7280;
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.ai-provider-tile-meta .has-events { color: var(--ai-orange-dim); font-weight: 600; }

/* ===== Status pill (provider / system) ===== */

.ai-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--ai-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
.ai-status .ai-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.ai-status.is-operational { background: rgba(16, 185, 129, 0.1); color: #047857; }
.ai-status.is-operational .ai-status-dot { background: var(--ai-emerald); box-shadow: 0 0 6px rgba(16, 185, 129, 0.6); }
.ai-status.is-degraded { background: rgba(234, 179, 8, 0.12); color: #854d0e; }
.ai-status.is-degraded .ai-status-dot { background: var(--ai-sev-medium); }
.ai-status.is-outage { background: rgba(239, 68, 68, 0.12); color: #991b1b; }
.ai-status.is-outage .ai-status-dot { background: var(--ai-sev-breaking); animation: ai-pulse 1.5s ease-out infinite; }
.ai-status.is-unknown { background: rgba(107, 114, 128, 0.12); color: #374151; }
.ai-status.is-unknown .ai-status-dot { background: var(--ai-sev-low); }

/* ===== Filter chips ===== */

.ai-filter-bar {
    position: sticky;
    top: 70px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--ai-card-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--ai-card-shadow);
}

.ai-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ai-filter-label {
    font-family: var(--ai-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7280;
    font-weight: 600;
}

.ai-filter-select {
    font-family: var(--ai-sans);
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(17, 24, 39, 0.15);
    border-radius: 6px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.ai-filter-select:hover { border-color: var(--ai-orange); }
.ai-filter-select:focus { outline: none; border-color: var(--ai-orange); box-shadow: 0 0 0 3px var(--ai-orange-glow); }

.ai-filter-reset {
    font-family: var(--ai-mono);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.5rem 0.85rem;
    border: 1px solid rgba(17, 24, 39, 0.15);
    border-radius: 6px;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ai-filter-reset:hover { border-color: var(--ai-orange); color: var(--ai-orange); }

/* ===== Specs / detail cards ===== */

.ai-spec-card {
    background: var(--ai-card-bg);
    border: 1px solid var(--ai-card-border);
    border-radius: 12px;
    padding: 1.25rem;
}

.ai-price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.85rem;
}
.ai-price-cell {
    padding: 0.75rem 1rem;
    background: rgba(17, 24, 39, 0.025);
    border-radius: 8px;
    border-left: 3px solid var(--ai-orange);
}
.ai-price-label {
    font-family: var(--ai-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-bottom: 0.25rem;
}
.ai-price-value {
    font-family: var(--ai-mono);
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.1;
}
.ai-price-unit {
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 0.15rem;
}

/* ===== Pricing fallback (provider's page is JS-rendered; we link out instead) ===== */
.ai-price-fallback {
    padding: 1rem 1.1rem;
    background: rgba(17, 24, 39, 0.025);
    border-radius: 8px;
    border-left: 3px dashed #9ca3af;
}
.ai-price-fallback-label {
    font-family: var(--ai-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-bottom: 0.4rem;
}
.ai-price-fallback-body {
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.4;
    margin: 0 0 0.65rem 0;
}
.ai-price-fallback-link {
    display: inline-block;
    font-family: var(--ai-mono);
    font-size: 0.78rem;
    color: var(--ai-orange);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.ai-price-fallback-link:hover { color: var(--ai-orange-bright); }

/* ===== Lifecycle badges ===== */
.ai-lifecycle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--ai-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    font-weight: 600;
}
.ai-lifecycle.is-active { background: rgba(16, 185, 129, 0.12); color: #047857; }
.ai-lifecycle.is-preview { background: rgba(167, 139, 250, 0.14); color: #5b21b6; }
.ai-lifecycle.is-deprecated { background: rgba(234, 179, 8, 0.14); color: #854d0e; }
.ai-lifecycle.is-retired { background: rgba(107, 114, 128, 0.14); color: #374151; }

/* ===== Tables ===== */

.ai-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.ai-table th {
    text-align: left;
    font-family: var(--ai-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    font-weight: 600;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--ai-card-border);
}
.ai-table td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid rgba(17, 24, 39, 0.04);
    vertical-align: middle;
}
.ai-table tbody tr:hover { background: rgba(248, 163, 71, 0.04); }
.ai-table .num { font-family: var(--ai-mono); text-align: right; color: #0f172a; }

/* ===== Newsletter signup ===== */

.ai-newsletter {
    background: linear-gradient(135deg, var(--ai-dark-1) 0%, var(--ai-dark-2) 100%);
    color: #fff;
    padding: 1.5rem;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.ai-newsletter::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 200px 200px at 100% 0%, rgba(248, 163, 71, 0.25), transparent 70%),
        radial-gradient(ellipse 200px 200px at 0% 100%, rgba(34, 211, 238, 0.15), transparent 70%);
    pointer-events: none;
}
.ai-newsletter > * { position: relative; z-index: 1; }
.ai-newsletter h3 { color: #fff; font-weight: 700; }
.ai-newsletter p { color: rgba(255, 255, 255, 0.7); }

.ai-newsletter-input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    font-size: 0.9rem;
    width: 100%;
    transition: border-color 0.15s ease;
}
.ai-newsletter-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.ai-newsletter-input:focus { outline: none; border-color: var(--ai-orange); box-shadow: 0 0 0 3px var(--ai-orange-glow); }

/* ===== Sparkline ===== */

.ai-sparkline {
    display: inline-block;
    vertical-align: middle;
    height: 28px;
    width: 80px;
}
.ai-sparkline path { fill: none; stroke: var(--ai-orange); stroke-width: 1.5; }
.ai-sparkline .area { fill: var(--ai-orange-glow); stroke: none; }

/* ===== Empty / loading states ===== */

.ai-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: rgba(17, 24, 39, 0.02);
    border: 1px dashed var(--ai-card-border);
    border-radius: 12px;
    color: #6b7280;
}
.ai-empty .icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}

.ai-skeleton {
    background: linear-gradient(90deg, #f3f4f6 0%, #fafafa 50%, #f3f4f6 100%);
    background-size: 200% 100%;
    animation: ai-shimmer 1.4s linear infinite;
    border-radius: 6px;
}
@keyframes ai-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== Provider detail header strip ===== */

.ai-detail-strip {
    background: var(--ai-dark-1);
    color: #fff;
    border-radius: 16px;
    padding: 1.75rem 1.75rem 1.5rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}
.ai-detail-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 400px 200px at 100% 0%, rgba(248, 163, 71, 0.18), transparent 60%);
    pointer-events: none;
}
.ai-detail-strip > * { position: relative; z-index: 1; }
.ai-detail-strip h1 { color: #fff; font-weight: 800; letter-spacing: -0.02em; }
.ai-detail-strip a { color: var(--ai-orange-bright); }
.ai-detail-strip .ai-detail-meta { color: rgba(255, 255, 255, 0.65); font-family: var(--ai-mono); font-size: 0.8rem; }

/* ===== Confidence meter ===== */

.ai-confidence {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ai-mono);
    font-size: 0.72rem;
    color: #6b7280;
}
.ai-confidence-bar {
    display: inline-block;
    width: 60px;
    height: 6px;
    background: rgba(17, 24, 39, 0.08);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.ai-confidence-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--conf-pct, 100%);
    background: linear-gradient(90deg, var(--ai-orange) 0%, var(--ai-emerald) 100%);
    border-radius: 3px;
}

/* ===== Mobile tightening ===== */

@media (max-width: 575.98px) {
    .ai-hero { padding: 2.5rem 1rem 2.5rem; }
    .ai-stats-row { grid-template-columns: repeat(2, 1fr); }
    .ai-stat { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 0.85rem; }
    .ai-event-date { margin-left: 0; width: 100%; }
}