:root {
    color-scheme: light dark;
    --bg: #f3f6f8;
    --bg-strong: #e8eef3;
    --surface: #ffffff;
    --surface-alt: #f7f9fb;
    --surface-strong: #111a23;
    --text: #16212c;
    --muted: #60707f;
    --border: #d6e0e8;
    --border-strong: #b9c7d3;
    --accent: #b6362f;
    --accent-strong: #912822;
    --accent-soft: #fff0ee;
    --secondary: #17466d;
    --secondary-strong: #0d3150;
    --secondary-soft: #eaf3fb;
    --teal: #0f766e;
    --teal-strong: #0b5f59;
    --amber: #a96d00;
    --danger: #a32020;
    --success: #1c7148;
    --warning: #936200;
    --shadow: 0 18px 46px rgba(19, 33, 46, 0.1);
    --shadow-soft: 0 10px 24px rgba(19, 33, 46, 0.08);
    --focus-ring: 0 0 0 4px rgba(15, 118, 110, 0.18);
    --body-bg:
        linear-gradient(135deg, rgba(23, 70, 109, 0.06) 0 1px, transparent 1px 34px),
        linear-gradient(180deg, #f8fafc 0%, var(--bg) 44%, #eef3f6 100%);
    --card-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 1)),
        var(--surface);
    --menu-bg: #ffffff;
    --field-bg: #ffffff;
    --footer-bg: linear-gradient(180deg, #ffffff, #f4f7f9);
    --flash-success-bg: #f1fbf5;
    --flash-error-bg: #fff6f6;
    --flash-warning-bg: #fffaf0;
    --flash-info-bg: #f2f7fb;
    --status-success-text: #165c38;
    --status-success-bg: #dbf4e4;
    --status-success-border: #8dd9aa;
    --status-danger-text: #8f1f1f;
    --status-danger-bg: #fde8e8;
    --status-danger-border: #f0a5a5;
    --status-warning-text: #8b5a00;
    --status-warning-bg: #fff2ce;
    --status-warning-border: #f2d177;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg: #0d1117;
        --bg-strong: #070a0d;
        --surface: #171d24;
        --surface-alt: #202832;
        --surface-strong: #f1f5f9;
        --text: #edf2f7;
        --muted: #a9b5c1;
        --border: #34414e;
        --border-strong: #506170;
        --accent: #df584f;
        --accent-strong: #f07368;
        --accent-soft: #351c1e;
        --secondary: #76b3e3;
        --secondary-strong: #9acbf0;
        --secondary-soft: #173049;
        --teal: #36c4b7;
        --teal-strong: #2ea99e;
        --amber: #e3ad52;
        --danger: #f06a6a;
        --success: #63d995;
        --warning: #e6b85c;
        --shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
        --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.28);
        --focus-ring: 0 0 0 4px rgba(54, 196, 183, 0.22);
        --body-bg:
            linear-gradient(135deg, rgba(118, 179, 227, 0.08) 0 1px, transparent 1px 34px),
            linear-gradient(180deg, #151a20 0%, var(--bg) 44%, #070a0d 100%);
        --card-bg:
            linear-gradient(180deg, rgba(25, 31, 39, 0.96), rgba(18, 23, 29, 0.98)),
            var(--surface);
        --menu-bg: #171d24;
        --field-bg: #10161d;
        --footer-bg: linear-gradient(180deg, #151a20, #0d1117);
        --flash-success-bg: #10291d;
        --flash-error-bg: #311819;
        --flash-warning-bg: #30230d;
        --flash-info-bg: #102233;
        --status-success-text: #9cf0ba;
        --status-success-bg: #0f2a1d;
        --status-success-border: #2f8d57;
        --status-danger-text: #ffb5b5;
        --status-danger-bg: #331718;
        --status-danger-border: #a44747;
        --status-warning-text: #f5d78a;
        --status-warning-bg: #31230c;
        --status-warning-border: #9a711e;
    }
}

html {
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--body-bg);
    font-family: "Segoe UI", Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--secondary);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--secondary-strong);
}

.shell,
.container {
    width: min(1320px, calc(100% - 32px));
}

.topbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(90deg, rgba(8, 33, 57, 0.98) 0%, rgba(11, 56, 91, 0.98) 46%, rgba(132, 33, 44, 0.96) 100%);
    box-shadow: 0 10px 30px rgba(10, 24, 38, 0.16);
}

.topbar-inner {
    min-height: 72px;
}

.brand img {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.brand-eyebrow {
    font-size: 11px;
    font-weight: 700;
}

.brand-title {
    font-size: 17px;
    letter-spacing: 0;
}

.topbar-nav a,
.topbar-nav-dropdown summary,
.topbar-outline-link {
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 650;
}

.topbar-nav a:hover,
.topbar-nav-dropdown summary:hover,
.topbar-nav-dropdown[open] summary {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.12);
}

.topbar-nav-menu {
    border-color: rgba(185, 199, 211, 0.9);
    border-radius: 8px;
    box-shadow: 0 22px 52px rgba(12, 25, 39, 0.22);
}

.topbar-nav-menu a {
    font-weight: 600;
}

.container {
    flex: 1 0 auto;
    padding: 32px 0 56px;
}

.card {
    border: 1px solid rgba(198, 211, 222, 0.9);
    border-radius: 8px;
    background: var(--card-bg);
    box-shadow: var(--shadow-soft);
}

input,
select,
textarea {
    min-height: 42px;
    border-color: var(--border);
    border-radius: 8px;
    background: var(--field-bg);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(18, 31, 45, 0.03);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--border-strong);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--teal);
    box-shadow: var(--focus-ring);
    outline: none;
}

button,
.button-link,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px 11px;
    border: 1px solid rgba(120, 27, 22, 0.22);
    border-radius: 8px;
    background: linear-gradient(180deg, #c7443b 0%, var(--accent) 100%);
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 10px 18px rgba(145, 40, 34, 0.18);
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

button:hover,
.button-link:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    border-color: rgba(120, 27, 22, 0.34);
    background: linear-gradient(180deg, #b93a32 0%, var(--accent-strong) 100%);
    color: #fff;
    box-shadow: 0 14px 26px rgba(145, 40, 34, 0.22);
    transform: translateY(-1px);
}

button:active,
.button-link:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
    box-shadow: 0 7px 14px rgba(19, 33, 46, 0.15);
    transform: translateY(0);
}

button:focus-visible,
.button-link:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), 0 10px 18px rgba(19, 33, 46, 0.12);
}

button:disabled,
.button-link[aria-disabled="true"],
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
}

.secondary-button,
.button-link.secondary-button {
    border-color: rgba(13, 49, 80, 0.2);
    background: linear-gradient(180deg, #245a83 0%, var(--secondary) 100%);
    box-shadow: 0 10px 18px rgba(13, 49, 80, 0.16);
}

.secondary-button:hover,
.button-link.secondary-button:hover {
    border-color: rgba(13, 49, 80, 0.34);
    background: linear-gradient(180deg, #1d4f76 0%, var(--secondary-strong) 100%);
    box-shadow: 0 14px 26px rgba(13, 49, 80, 0.21);
}

.danger-button,
.button-link.danger-button {
    border-color: rgba(127, 26, 26, 0.24);
    background: linear-gradient(180deg, #b92c2c 0%, var(--danger) 100%);
    box-shadow: 0 10px 18px rgba(127, 26, 26, 0.18);
}

.danger-button:hover,
.button-link.danger-button:hover {
    background: linear-gradient(180deg, #a52525 0%, #801818 100%);
}

.text-link,
.topbar-outline-link {
    box-shadow: none;
}

.topbar-outline-link,
.topbar-actions .button-link.secondary-button {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.topbar-outline-link:hover,
.topbar-actions .button-link.secondary-button:hover {
    border-color: rgba(255, 255, 255, 0.44);
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

.inline-form {
    margin: 0;
}

.page-title {
    letter-spacing: 0;
}

.muted {
    color: var(--muted);
}

.flash-message {
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.status-pill {
    letter-spacing: 0;
}

.portal-footer {
    flex: 0 0 auto;
    min-height: 76px;
    border-top: 1px solid var(--border);
    background: var(--footer-bg);
}

.portal-footer-inner {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.portal-footer-copy {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.portal-social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.portal-social-links a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--secondary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.portal-social-links a:hover {
    border-color: var(--border-strong);
    color: var(--secondary-strong);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 760px) {
    .shell,
    .container {
        width: min(100% - 24px, 1320px);
    }

    .container {
        padding-top: 24px;
    }

    button,
    .button-link,
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        width: 100%;
    }

    .topbar-actions button,
    .topbar-actions .button-link {
        width: auto;
    }

    .portal-footer-inner {
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        padding: 14px 0;
    }

    .portal-social-links {
        justify-content: flex-start;
    }
}