:root {
    --audit-ink: #14213d;
    --audit-muted: #64748b;
    --audit-surface: rgba(255, 255, 255, 0.9);
    --audit-border: rgba(20, 33, 61, 0.1);
}

body {
    min-height: 100vh;
    color: var(--audit-ink);
    background:
        radial-gradient(circle at 10% 10%, rgba(13, 110, 253, 0.12), transparent 28%),
        radial-gradient(circle at 85% 5%, rgba(32, 201, 151, 0.16), transparent 26%),
        linear-gradient(135deg, #f7fbff 0%, #eef4f8 42%, #fffaf1 100%);
}

.navbar {
    backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid var(--audit-border);
}

.brand-mark {
    display: inline-grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0d6efd, #20c997);
    border-radius: 0.5rem;
    font-weight: 800;
}

.hero-panel,
.glass-card {
    background: var(--audit-surface);
    border: 1px solid var(--audit-border);
    box-shadow: 0 22px 70px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(18px);
}

.hero-panel {
    border-radius: 1rem;
}

.audit-hero {
    color: #fff;
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 12% 10%, rgba(45, 212, 191, 0.34), transparent 30%),
        radial-gradient(circle at 90% 0%, rgba(245, 158, 11, 0.18), transparent 26%),
        linear-gradient(135deg, #0f172a 0%, #1d4ed8 58%, #0f766e 100%);
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.22);
}

.audit-hero-score {
    max-width: 17rem;
    padding: 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
}

.glass-card {
    border-radius: 0.75rem;
}

.score-ring {
    --score-color: #198754;
    display: grid;
    width: 8rem;
    height: 8rem;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, #fff 74%, transparent 75%),
        conic-gradient(var(--score-color) calc(var(--score) * 1%), #e8eef5 0);
    box-shadow: inset 0 0 0 1px var(--audit-border);
}

.score-ring.warning {
    --score-color: #fd7e14;
}

.score-ring.danger {
    --score-color: #dc3545;
}

.score-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.metric {
    border: 1px solid var(--audit-border);
    border-radius: 0.65rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.72);
}

.audit-score-card,
.severity-tile,
.module-panel {
    border: 1px solid var(--audit-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}

.audit-score-card {
    padding: 1.15rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.audit-score-card:hover,
.audit-score-card:focus {
    transform: translateY(-2px);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
}

.audit-card-dot {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
    box-shadow: 0 0 0 0.35rem rgba(13, 110, 253, 0.08);
}

.severity-tile {
    padding: 1rem;
    border-left-width: 0.35rem;
}

.module-panel {
    padding: 1.25rem;
}

.audit-tabs {
    gap: 0.5rem;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.audit-tabs .nav-link {
    white-space: nowrap;
    border-radius: 999px;
}

.audit-issue-table th {
    color: var(--audit-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.empty-state {
    padding: 1.5rem;
    color: var(--audit-muted);
    text-align: center;
    border: 1px dashed var(--audit-border);
    border-radius: 0.75rem;
    background: rgba(248, 250, 252, 0.72);
}

.severity-critical {
    background: #dc3545;
}

.severity-warning {
    background: #fd7e14;
}

.severity-notice {
    background: #0dcaf0;
    color: #06283d;
}

.severity-pass {
    background: #198754;
}

.issue-card {
    border-left: 0.35rem solid #ced4da;
}

.issue-card.critical {
    border-left-color: #dc3545;
}

.issue-card.warning {
    border-left-color: #fd7e14;
}

.issue-card.notice {
    border-left-color: #0dcaf0;
}

.issue-card.pass {
    border-left-color: #198754;
}

.code-example {
    color: #f8fafc;
    background: #111827;
    border-radius: 0.5rem;
    padding: 1rem;
    white-space: pre-wrap;
}

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