/* vpn001 — camada visual (ITC panel + Impeccable: hierarquia, badges, sem slop) */

.vpn-panel-app {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.vpn-panel-app .login-body {
    background:
        radial-gradient(ellipse 80% 60% at 12% 20%, rgba(18, 170, 220, 0.35), transparent 55%),
        linear-gradient(145deg, #1a3278 0%, #2382df 52%, #12aadc 100%);
}

.vpn-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.25rem;
}

.vpn-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 750;
    border: 1px solid rgba(217, 228, 240, 0.9);
    background: var(--panel, #fff);
    color: var(--ink, #0b1f3b);
    box-shadow: 0 4px 14px rgba(11, 31, 59, 0.05);
}

.vpn-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted, #8a9bb0);
    flex-shrink: 0;
}

.vpn-pill--ok::before {
    background: #1a9d55;
    box-shadow: 0 0 0 3px rgba(26, 157, 85, 0.2);
}

.vpn-pill--warn::before {
    background: #d97706;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
}

.vpn-pill--idle::before {
    background: #94a3b8;
}

.vpn-mode-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vpn-mode-badge--tun {
    background: rgba(35, 130, 223, 0.12);
    color: var(--brand-800, #1a5fad);
}

.vpn-mode-badge--tap {
    background: rgba(18, 170, 220, 0.14);
    color: #0d6e8c;
}

.vpn-empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border: 1px dashed rgba(217, 228, 240, 0.95);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.65);
}

.vpn-empty-state h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: var(--ink, #0b1f3b);
}

.vpn-empty-state p {
    margin: 0 0 1rem;
    color: var(--muted, #5c6f86);
    max-width: 42ch;
    margin-left: auto;
    margin-right: auto;
}

.vpn-hero-note {
    margin: 0;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    border-left: 4px solid var(--brand-600, #2382df);
    background: linear-gradient(90deg, rgba(35, 130, 223, 0.08), transparent);
    color: var(--ink, #0b1f3b);
    font-size: 0.92rem;
    line-height: 1.55;
}

.vpn-hero-note code {
    font-size: 0.88em;
}

.routes-table .col-actions {
    white-space: nowrap;
    text-align: right;
}

.vpn-panel-app .table-wrap {
    margin-top: 0;
}

.vpn-panel-app .security-form.backup-config-grid {
    align-items: end;
}

.vpn-panel-app .backup-config-grid .span-full {
    grid-column: 1 / -1;
}

.vpn-danger-zone {
    border-color: rgba(180, 40, 40, 0.35);
    background: linear-gradient(180deg, #fff8f7 0%, #fff 100%);
}

.vpn-danger-zone .panel-head h2 {
    color: #8b1a12;
}

.vpn-fieldset {
    border: 1px solid rgba(217, 228, 240, 0.95);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin: 0 0 1rem;
}

.vpn-fieldset legend {
    padding: 0 6px;
    font-size: 0.85rem;
    font-weight: 750;
    color: var(--ink, #0b1f3b);
}

.vpn-reassign-target {
    margin-top: 0.75rem;
}

.content .danger-button,
.content button.danger-button,
.content a.danger-button {
    background: #b42828;
    color: #fff;
    border: 1px solid #8f1f1f;
}

.content .danger-button:hover,
.content a.danger-button:hover {
    background: #962020;
    color: #fff;
}

.routes-table__row--muted td {
    opacity: 0.55;
}

@media (max-width: 720px) {
    .vpn-status-strip {
        flex-direction: column;
        align-items: stretch;
    }
}