/* ═══════════════════════════════════════════════════════════════
   pages/security.css — Security page specific styles
   ═══════════════════════════════════════════════════════════════ */

/* Anonimisering voorbeeld card */
.anon-example {
    background: linear-gradient(135deg, rgba(14,50,101,0.25) 0%, rgba(10,22,40,0.4) 100%);
    border: 1px solid var(--border-blue);
    border-radius: 16px;
    padding: 32px 28px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 2;
}

.anon-example-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--blue-light);
    margin-bottom: 16px;
}

.anon-example-row {
    display: flex;
    gap: 12px;
}

.anon-example-label {
    color: var(--muted);
    min-width: 100px;
}

.anon-example-value {
    color: var(--white);
}

.anon-example-redacted {
    color: rgba(244, 67, 54, 0.7);
    letter-spacing: 0.1em;
}

.anon-example-partial {
    color: rgba(16, 199, 122, 0.8);
}

@media (max-width: 768px) {
    .anon-example {
        padding: 24px 20px;
        font-size: 0.82rem;
    }

    .anon-example-row {
        flex-direction: column;
        gap: 2px;
    }

    .anon-example-label {
        min-width: unset;
    }
}