:root {
    --portal-bg-top: #eef3f8;
    --portal-bg-bottom: #dfe8f1;
    --portal-surface: #ffffff;
    --portal-surface-soft: #f6f9fc;
    --portal-border: #cfd9e4;
    --portal-border-strong: #b7c7d8;
    --portal-text: #16324d;
    --portal-text-soft: #567088;
    --portal-heading: #0f3556;
    --portal-primary: #005a92;
    --portal-primary-strong: #003f69;
    --portal-shadow: 0 18px 48px rgba(17, 41, 68, 0.08);
    --portal-shadow-soft: 0 10px 28px rgba(17, 41, 68, 0.05);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.58) 100%),
        linear-gradient(180deg, var(--portal-bg-top) 0%, var(--portal-bg-bottom) 100%);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--portal-text);
    font-family: "Segoe UI", "Arial", sans-serif;
    background: transparent;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(0, 90, 146, 0.08), transparent 32%),
        radial-gradient(circle at top right, rgba(0, 63, 105, 0.07), transparent 28%);
    pointer-events: none;
}

a {
    color: var(--portal-primary);
}

.portal-version-badge {
    max-width: min(360px, calc(100vw - 24px));
    padding: 6px 10px;
    border: 1px solid rgba(183, 199, 216, 0.78);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--portal-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 8px 18px rgba(17, 41, 68, 0.06);
    backdrop-filter: blur(6px);
}

.portal-version-badge--fixed {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 20;
}

.portal-version-badge--login {
    display: inline-flex;
    margin: -10px 0 8px;
}

.portal-version-badge--bottom {
    display: inline-flex;
    margin-top: 24px;
}

.modal-content {
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    box-shadow: var(--portal-shadow);
}

.modal-header {
    background: linear-gradient(180deg, #f9fbfd 0%, #eef3f8 100%);
    border-bottom: 1px solid var(--portal-border);
}

.modal-header.bg-primary {
    background: linear-gradient(180deg, #0c6aa8 0%, #005a92 100%);
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

.modal-header.bg-danger {
    background: linear-gradient(180deg, #c84646 0%, #a92c2c 100%);
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

.modal-title {
    color: var(--portal-heading);
    font-weight: 700;
}

.modal-header.bg-primary .modal-title,
.modal-header.bg-danger .modal-title {
    color: #ffffff;
}

.modal-header .btn-close {
    opacity: 0.9;
}

.modal-header .btn-close:hover {
    opacity: 1;
}

.btn-close:focus {
    box-shadow: 0 0 0 4px rgba(0, 90, 146, 0.14);
}

@media (max-width: 640px) {
    .portal-version-badge--fixed {
        position: absolute;
        top: 8px;
        left: 8px;
        font-size: 0.72rem;
    }

    .portal-version-badge--login {
        margin-top: -4px;
    }
}