:root {
    --themeBaseBackground: #f7f4ee;
    --themeBasePrimary: #fffaf3;
    --themeBaseSurface: rgba(255, 252, 246, 0.82);
    --themeBaseSurface2: #f5efe4;
    --themeBaseLight: #fffdf9;
    --themeBaseDark: #efe6d8;
    --themeBaseText: #151515;
    --themeBaseAltText: #6e6a63;
    --themeBaseBorder: rgba(200, 169, 107, 0.32);
    --themeBaseMuted: #8e877c;
    --brandPrimary: #c8a96b;
    --brandDark: #a78646;
    --brandLight: #e7d3a6;
    --brandSecondary: #151515;
    --hero: #181614;
    --font-ui: "Manrope", sans-serif;
}

html,
body {
    min-height: 100%;
    background:
        radial-gradient(circle at top left, rgba(200, 169, 107, 0.16), transparent 34%),
        linear-gradient(180deg, #f7f4ee 0%, #f2eee7 100%);
    color: var(--themeBaseText);
    font-family: "Manrope", sans-serif;
}

body {
    margin: 0;
}

.portal-shell {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.portal-shell::before,
.portal-shell::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(8px);
    opacity: 0.8;
    pointer-events: none;
}

.portal-shell::before {
    width: 28rem;
    height: 28rem;
    right: -8rem;
    top: -9rem;
    background: radial-gradient(circle, rgba(200, 169, 107, 0.22), transparent 62%);
}

.portal-shell::after {
    width: 18rem;
    height: 18rem;
    left: -5rem;
    bottom: -3rem;
    background: radial-gradient(circle, rgba(21, 21, 21, 0.07), transparent 60%);
}

.portal-title {
    font-family: "Cormorant Garamond", serif;
    letter-spacing: 0.04em;
    font-style: normal;
    text-transform: none;
}

.portal-page {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
}

.portal-surface {
    background: rgba(255, 252, 246, 0.82);
    border: 1px solid rgba(200, 169, 107, 0.32);
    box-shadow: 0 30px 80px rgba(21, 21, 21, 0.10);
    backdrop-filter: blur(18px);
}

.portal-kicker {
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.portal-step {
    display: none;
}

.portal-step.is-active {
    display: block;
    animation: step-in 240ms ease;
}

.portal-field textarea,
.portal-field input[type="date"],
.portal-field input[type="text"],
.portal-field input[type="password"] {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--themeBaseText);
    font: 500 15px/1.6 "Manrope", sans-serif;
}

.portal-field textarea {
    min-height: 10rem;
    resize: vertical;
    padding: 0;
}

.portal-field input:focus,
.portal-field textarea:focus {
    outline: none;
}

.portal-field .inputArea {
    align-items: start;
    background: rgba(255, 255, 255, 0.72);
}

.portal-field .inputArea.portal-textarea-shell {
    display: block;
    min-height: 12rem;
}

.portal-checks {
    display: grid;
    gap: var(--paddingMD);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.portal-check {
    display: flex;
    align-items: center;
    gap: var(--paddingSM);
    min-height: var(--inputField);
    padding: var(--paddingMD);
    border: var(--borderThickness) solid var(--themeBaseBorder);
    border-radius: var(--radiusMD);
    background: rgba(255, 255, 255, 0.66);
    font: 500 14px/1.4 "Manrope", sans-serif;
}

.portal-check input {
    accent-color: var(--brandPrimary);
}

.portal-step-note {
    color: var(--themeBaseAltText);
    font-size: 14px;
    line-height: 1.8;
}

.portal-auth-media {
    position: relative;
    min-height: 80vh;
    overflow: hidden;
    border-radius: var(--radiusXL);
    background:
        linear-gradient(160deg, rgba(15, 15, 15, 0.82), rgba(51, 39, 19, 0.62)),
        radial-gradient(circle at top, rgba(200, 169, 107, 0.34), transparent 30%),
        #1a1714;
    color: #fffdf8;
    padding: clamp(2rem, 4vw, 4rem);
}

.portal-auth-media::after {
    content: "";
    position: absolute;
    inset: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: calc(var(--radiusXL) - 0.5rem);
    pointer-events: none;
}

.portal-auth-grid {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: space-between;
    min-height: 100%;
    gap: 2rem;
}

.portal-auth-metrics {
    display: grid;
    gap: var(--paddingMD);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-auth-metrics .rm-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fffdf8;
    box-shadow: none;
}

.portal-shell .rm-navbar,
.portal-shell .rm-footer {
    background: rgba(255, 252, 246, 0.76);
    border: 1px solid rgba(200, 169, 107, 0.24);
    box-shadow: 0 20px 40px rgba(21, 21, 21, 0.08);
    backdrop-filter: blur(18px);
}

.portal-main {
    flex: 1;
    padding: 1rem 0 3rem;
}

.portal-grid {
    display: grid;
    gap: var(--paddingLG);
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
    align-items: start;
}

.portal-sidebar {
    position: sticky;
    top: 1.5rem;
    display: grid;
    gap: var(--paddingLG);
}

.portal-summary-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 250, 243, 0.82));
}

.portal-tabs-shell {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.portal-tabs-shell .rm-tabs {
    min-width: max-content;
    background: transparent;
}

.portal-step-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--paddingMD);
    flex-wrap: wrap;
}

.portal-success-card {
    max-width: 780px;
    margin: 0 auto;
}

.portal-success-card .rm-table__body {
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 1024px) {
    .portal-grid,
    .rm-layout-auth {
        grid-template-columns: 1fr;
    }

    .portal-sidebar {
        position: static;
    }

    .portal-auth-media {
        min-height: 28rem;
    }
}

@media (max-width: 640px) {
    .portal-page {
        width: min(100% - 1rem, 1180px);
    }

    .portal-auth-metrics {
        grid-template-columns: 1fr;
    }
}

@keyframes step-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
