:root {
    --ips-primary: #0d47a1;
    --ips-primary-soft: #1565c0;
    --ips-surface: #f5f7fb;
    --ips-card-radius: 0.75rem;
}

[data-bs-theme="dark"] {
    --ips-surface: #121826;
}

.ips-body {
    background: var(--ips-surface);
    min-height: 100vh;
}

.hero-ip {
    border-radius: var(--ips-card-radius);
    background: linear-gradient(145deg, #ffffff 0%, #eef3fb 100%);
}

[data-bs-theme="dark"] .hero-ip {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
}

.hero-ip .display-5 {
    letter-spacing: 0.03em;
}

.meta-table th {
    width: 38%;
    font-weight: 600;
    color: var(--bs-secondary-color);
    vertical-align: top;
    padding-top: 0.35rem;
}

.meta-table td {
    word-break: break-word;
}

.navbar.bg-primary {
    background-color: var(--ips-primary) !important;
}

.card {
    border-radius: var(--ips-card-radius);
}

/* Table header rows: theme-aware (avoids table-light on bright bg in dark mode) */
.card .ips-table-head th {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-emphasis-color) !important;
    border-color: var(--bs-border-color);
}

.font-monospace {
    font-variant-numeric: tabular-nums;
}

.btn:focus-visible,
a:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--ips-primary-soft, #1565c0);
    outline-offset: 2px;
}

.navbar .btn:focus-visible {
    outline-color: #fff;
}

@media (max-width: 576px) {
    .hero-ip .display-5 {
        font-size: 1.5rem;
    }
}

@media print {
    .navbar,
    .btn,
    #btnDarkMode,
    footer {
        display: none !important;
    }

    .ips-body {
        background: #fff !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}