@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

/* ═══════════════════════════════════════════════════════════
   VARIABLES (THEME)
   ═══════════════════════════════════════════════════════════ */
:root {
    /* Colors */
    --bg-base: #0D1117;
    --bg-surface: #161B22;
    /* Also used as --surface */
    --bg-elevated: #1C2129;
    /* Also used as --surface2 */
    --bg-overlay: #21262D;

    --border: rgba(255, 255, 255, 0.10);
    --border-muted: rgba(255, 255, 255, 0.06);
    /* Also --border2 */

    --text-primary: #E6EDF3;
    /* --text */
    --text-secondary: #8B949E;
    /* --muted */
    --text-muted: #6E7681;
    /* --dim */

    /* Accents */
    --accent-red: #E8534A;
    --accent-red-hover: #F06A62;
    --accent-red-dim: rgba(232, 83, 74, 0.12);

    --accent-teal: #56D4B0;
    --accent-teal-dim: rgba(86, 212, 176, 0.10);

    --accent-blue: #4A9ECC;
    --accent-blue-dim: rgba(74, 158, 204, 0.12);

    --accent-amber: #D4A856;
    --accent-amber-dim: rgba(212, 168, 86, 0.12);

    --accent-lavender: #B48ADB;
    --accent-lavender-dim: rgba(180, 138, 219, 0.12);

    /* Severities / Semantic Colors */
    --sev-critical: #F44336;
    --sev-high: #FF9800;
    --sev-medium: #FFC107;

    /* Aliases for compatibility */
    --bg: var(--bg-base);
    --surface: var(--bg-surface);
    --surface2: var(--bg-elevated);
    --border2: var(--border-muted);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
    --dim: var(--text-muted);
    --red: var(--accent-red);
    --teal: var(--accent-teal);
    --blue: var(--accent-blue);
    --amber: var(--accent-amber);
    --lavender: var(--accent-lavender);
    --crit: var(--sev-critical);
    --high: var(--sev-high);
    --med: var(--sev-medium);

    /* Layout & Spacing */
    --radius: 18px;
    --shadow: 0 18px 70px rgba(0, 0, 0, 0.45);
    --sidebar-w: 260px;
    --topbar-h: 56px;
    --cta-h: 44px;
}

/* ═══════════════════════════════════════════════════════════
   RESET & BASE 
   ═══════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--text);
}

h1 {
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
    font-size: clamp(28px, 5.4vw, 42px);
    letter-spacing: -0.6px;
    line-height: 1.15;
    margin-bottom: 16px;
}

h1 em {
    font-style: italic;
    color: var(--teal);
}

p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

code,
pre,
.mono {
    font-family: 'IBM Plex Mono', monospace;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT COMPONENTS
   ═══════════════════════════════════════════════════════════ */

/* Full Page Wrapper with consistent padding */
.page {
    position: relative;
    z-index: 1;
    min-height: 100%;
    /* Standardized padding for all content pages */
    padding: calc(24px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
}

/* The 'Sheet' look for documents */
.sheet {
    width: min(980px, 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

/* ═══════════════════════════════════════════════════════════
   COMMON UI ELEMENTS
   ═══════════════════════════════════════════════════════════ */

/* Top Line (Breadcrumb/Badge area) */
.topline {
    padding: 24px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* Micro Label (e.g. SECURAAI · PROJECT FERAL) */
.micro {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dim);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Status Dot */
.dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--teal);
    box-shadow: 0 0 18px rgba(86, 212, 176, 0.35);
}

/* Pill Badge */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(74, 158, 204, 0.22);
    background: rgba(74, 158, 204, 0.08);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.8px;
    color: var(--muted);
    white-space: nowrap;
}

/* Hero Section */
.hero {
    padding: 0 24px 24px;
}

.desc {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
    max-width: 820px;
    margin-top: 0;
}

/* Divider Line */
.divider {
    height: 1px;
    background: var(--border2);
    margin: 16px 0;
    width: 100%;
}

/* Main Content Area */
.content {
    padding: 24px;
}

/* Section Wrapper */
.section {
    margin-bottom: 32px;
}

/* Section Header */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.section-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;

    /* Glassmorphism Base */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.section-icon.blue {
    border-color: rgba(74, 158, 204, 0.3);
    box-shadow: 0 0 15px rgba(74, 158, 204, 0.15), inset 0 0 10px rgba(74, 158, 204, 0.05);
    color: var(--accent-blue);
}

.section-icon.lavender {
    border-color: rgba(180, 138, 219, 0.3);
    box-shadow: 0 0 15px rgba(180, 138, 219, 0.15), inset 0 0 10px rgba(180, 138, 219, 0.05);
    color: var(--accent-lavender);
}

.section-icon.teal {
    border-color: rgba(86, 212, 176, 0.3);
    box-shadow: 0 0 15px rgba(86, 212, 176, 0.15), inset 0 0 10px rgba(86, 212, 176, 0.05);
    color: var(--accent-teal);
}

.section-icon.red {
    border-color: rgba(232, 83, 74, 0.3);
    box-shadow: 0 0 15px rgba(232, 83, 74, 0.15), inset 0 0 10px rgba(232, 83, 74, 0.05);
    color: var(--accent-red);
}

.section-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text);
    font-weight: 600;
}

.section-sub {
    font-size: 12px;
    color: var(--dim);
    margin-top: 2px;
}

/* Card Component */
.card {
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.14);
    padding: 20px;
    margin-bottom: 16px;
}

.card p {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 10px;
}

.card p:last-child {
    margin-bottom: 0;
}

.card p strong {
    color: var(--text);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS & BACKGROUNDS
   ═══════════════════════════════════════════════════════════ */
.bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(900px 520px at 20% 8%, rgba(232, 83, 74, 0.12), transparent 58%),
        radial-gradient(900px 520px at 85% 25%, rgba(86, 212, 176, 0.10), transparent 58%),
        radial-gradient(900px 520px at 55% 90%, rgba(74, 158, 204, 0.08), transparent 58%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03), transparent 30%),
        repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 86px),
        repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 86px);
    opacity: 0.22;
    filter: saturate(1.05);
}

.bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.68) 72%);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════ */
.text-center {
    text-align: center;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

/* ═══════════════════════════════════════════════════════════
   CONTENT COMPONENTS (Buttons, Stats, Data Rows)
   ═══════════════════════════════════════════════════════════ */

/* Buttons */
.quick-actions {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 11px 14px;
    cursor: pointer;
    font-weight: 800;
    font-size: 12px;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    user-select: none;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: var(--accent-red);
    color: #fff;
    box-shadow: 0 14px 40px rgba(232, 83, 74, 0.18);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 54px rgba(232, 83, 74, 0.25);
    background: var(--accent-red-hover);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--text);
}

.btn-ghost:hover {
    transform: translateY(-1px);
    border-color: rgba(86, 212, 176, 0.35);
    /* Teal hover */
}

/* Stats Grid */
.stats {
    padding: 0 24px 6px;
    /* Matched to .hero padding */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.tile {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.14);
    padding: 14px 12px;
    text-align: center;
}

.num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 6px;
}

.label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--dim);
}

/* Data Rows (Key/Value) */
.rows {
    margin-top: 6px;
}

.row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
    color: var(--muted);
}

.row:last-child {
    border-bottom: none;
}

.k {
    color: var(--muted);
}

.v {
    color: var(--text);
    font-weight: 800;
    text-align: right;
}

.v.red {
    color: var(--accent-red);
}

.v.teal {
    color: var(--accent-teal);
}

/* Callout Card */
.callout {
    border-left: 3px solid var(--accent-amber);
    background: rgba(212, 168, 86, 0.10);
    /* Amber dim */
}

/* Pulse Animation */
.pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-teal);
    box-shadow: 0 0 0 rgba(86, 212, 176, 0.55);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(86, 212, 176, 0.45);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(86, 212, 176, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(86, 212, 176, 0);
    }
}

/* Mobile Adjustments */
@media (max-width: 900px) {
    .stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats .tile:last-child {
        grid-column: 1 / -1;
    }

    .content {
        padding: 10px 24px 20px;
    }

    /* Ensure consistent padding matches shared */
}

/* Color Utilities */
.crit {
    color: var(--sev-critical);
}

.high {
    color: var(--sev-high);
}

.med {
    color: var(--sev-medium);
}

.low {
    color: var(--accent-teal);
}

.red {
    color: var(--accent-red);
}

.teal {
    color: var(--accent-teal);
}

.blue {
    color: var(--accent-blue);
}

.amber {
    color: var(--accent-amber);
}

.lavender {
    color: var(--accent-lavender);
}

.white {
    color: var(--text-primary);
}

.muted {
    color: var(--text-secondary);
}