html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: #dfe8f6;
    color: #17324d;
}

.main-ribbon-page {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.9), rgba(255,255,255,0) 22%),
        linear-gradient(180deg, #e9f1fb 0%, #dbe5f4 100%);
}

.main-ribbon-shell {
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    --pb-shell-bg: #dfe8f6;
    --pb-topbar-from: #e6f0fd;
    --pb-topbar-to: #c6d8f1;
    --pb-topbar-border: #9bb7db;
    --pb-tabs-bg: #a9c5eb;
    --pb-tabs-border: #87abd9;
    --pb-tab-active-from: #f7fbff;
    --pb-tab-active-to: #dce9fb;
    --pb-panel-from: #d5e4f7;
    --pb-panel-to: #c5d8ef;
    --pb-panel-border: #9db7d8;
    --pb-group-border: #9db9db;
    --pb-group-label: #315173;
    --pb-status-from: #dce9fa;
    --pb-status-to: #c7daf1;
    --pb-status-border: #92b1d7;
    background: var(--pb-shell-bg);
}

.ribbon-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
    padding: 0.3rem 0.65rem;
    background: linear-gradient(180deg, var(--pb-topbar-from) 0%, var(--pb-topbar-to) 100%);
    border-bottom: 1px solid var(--pb-topbar-border);
}

.ribbon-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.ribbon-brand strong,
.ribbon-brand span {
    display: block;
}

.ribbon-brand span {
    font-size: 0.68rem;
    color: #46627f;
}

.ribbon-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #ffffff 0%, #dce8f6 100%);
    border: 1px solid #8fb1d9;
    color: #285ea7;
    font-style: italic;
    font-weight: 700;
    font-size: 0.88rem;
    box-shadow: inset 0 2px 6px rgba(255,255,255,0.95);
}

.ribbon-top-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.ribbon-user-chip,
.ribbon-logout {
    padding: 0.22rem 0.45rem;
    border-radius: 3px;
    background: rgba(255,255,255,0.85);
    border: 1px solid #adc4e1;
    text-decoration: none;
    color: #17324d;
    font-size: 0.76rem;
}

.ribbon-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
    padding: 0.12rem 0.25rem 0;
    background: var(--pb-tabs-bg);
    border-bottom: 1px solid var(--pb-tabs-border);
}

.ribbon-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.33rem 0.6rem;
    color: #12355b;
    text-decoration: none;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    font-size: 0.77rem;
    line-height: 1.1;
}

.ribbon-tab-active {
    background: var(--pb-tab-active-from);
    color: #0b2f61;
    border: 1px solid var(--pb-topbar-border);
    border-top: 3px solid #f28b0f;
    border-bottom-color: transparent;
    font-weight: 700;
    box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.04);
}

.ribbon-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.22rem;
    background: linear-gradient(180deg, var(--pb-panel-from) 0%, var(--pb-panel-to) 100%);
    border-bottom: 1px solid var(--pb-panel-border);
    overflow-x: auto;
}

.ribbon-group {
    min-height: 86px;
    min-width: 170px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--pb-group-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.18) 100%);
}

.ribbon-group-items {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.12rem;
    padding: 0.2rem 0.22rem 0.15rem;
    align-items: flex-start;
}

.ribbon-group-label {
    text-align: center;
    padding: 0.16rem 0.25rem;
    font-size: 0.66rem;
    color: var(--pb-group-label);
    background: rgba(255,255,255,0.35);
    border-top: 1px solid #b6cae3;
    line-height: 1.15;
}

.ribbon-action {
    width: 74px;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    text-decoration: none;
    color: #17324d;
    border: 1px solid transparent;
    border-radius: 0.22rem;
    padding: 0.12rem 0.14rem 0.18rem;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.ribbon-action:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.55);
    border-color: #90b1d8;
}

.ribbon-action-selected {
    background: rgba(255,255,255,0.78);
    border-color: #6f8eb8;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.85);
}

.ribbon-action-disabled {
    opacity: 0.65;
}

.ribbon-action-title {
    font-size: 0.64rem;
    line-height: 1.12;
}

.ribbon-action-icon {
    width: 24px;
    height: 24px;
    border-radius: 0.45rem;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(180deg, #ffffff 0%, #d5e4f5 100%);
    border: 1px solid #89abd4;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.9);
}

.ribbon-action-icon::before {
    content: "";
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='2' width='12' height='12' rx='2' fill='%232e71c4'/%3E%3C/svg%3E");
}

.ribbon-action-icon-has-image::before {
    display: none;
}

.ribbon-action-image {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

.ribbon-icon-close::before,
.ribbon-icon-logout::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4L4 12' stroke='%23d95c4c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ribbon-icon-collection::before,
.ribbon-icon-income::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M8 3l5 5-5 5' stroke='%23356fd1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.ribbon-icon-withdraw::before,
.ribbon-icon-expense::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8H3M8 3L3 8l5 5' stroke='%237f67d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.ribbon-icon-settings::before,
.ribbon-icon-refresh::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.2l.8 1.1 1.4.2.6 1.2 1.2.6-.2 1.4 1.1.8-1.1.8.2 1.4-1.2.6-.6 1.2-1.4-.2-.8 1.1-.8-1.1-1.4.2-.6-1.2-1.2-.6.2-1.4-1.1-.8 1.1-.8-.2-1.4 1.2-.6.6-1.2 1.4.2z' fill='%234c84aa'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='white'/%3E%3C/svg%3E");
}

.ribbon-icon-theme-caramel::before,
.ribbon-icon-theme-lilian::before,
.ribbon-icon-theme-money::before,
.ribbon-icon-theme-imaginary::before,
.ribbon-icon-theme-blue::before,
.ribbon-icon-theme-black::before,
.ribbon-icon-theme-asphalt::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.4c2.6 0 4.8 2.1 4.8 4.8S10.6 12 8 12 3.2 9.8 3.2 7.2 5.4 2.4 8 2.4z' fill='%236b7ec6'/%3E%3Cpath d='M8 2.4v9.6' stroke='white' stroke-width='1.2'/%3E%3Cpath d='M4 7.2h8' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
}

.ribbon-icon-database::before,
.ribbon-icon-stack::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cellipse cx='8' cy='4' rx='5' ry='2.2' fill='%234f7f5f'/%3E%3Cpath d='M3 4v6c0 1.2 2.2 2.2 5 2.2s5-1 5-2.2V4' fill='none' stroke='%234f7f5f' stroke-width='1.6'/%3E%3C/svg%3E");
}

.ribbon-icon-command::before,
.ribbon-icon-permission::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='3' width='10' height='10' rx='2' fill='%234c84aa'/%3E%3Cpath d='M5.2 8h5.6M8 5.2v5.6' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ribbon-icon-clear-garbage::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 4h6l-.5 8H5.5z' fill='%23d95c4c'/%3E%3Cpath d='M4 4h8M6.2 4V2.8h3.6V4' stroke='%23d95c4c' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ribbon-icon-deposit-tools::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.5' y='3' width='7' height='10' rx='1.2' fill='%236b7ec6'/%3E%3Cpath d='M10 5l3-3M10.8 4.2l1.8 1.8' stroke='%23cb9d24' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ribbon-icon-user::before,
.ribbon-icon-user-add::before,
.ribbon-icon-employee::before,
.ribbon-icon-team::before,
.ribbon-icon-family::before,
.ribbon-icon-badge::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5.2' r='2.6' fill='%233e90b8'/%3E%3Cpath d='M3.2 13c.6-2.3 2.4-3.6 4.8-3.6s4.2 1.3 4.8 3.6' fill='none' stroke='%233e90b8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ribbon-icon-cash::before,
.ribbon-icon-balance::before,
.ribbon-icon-payroll::before,
.ribbon-icon-deposit::before,
.ribbon-icon-loan::before,
.ribbon-icon-share::before,
.ribbon-icon-mortgage::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='4' width='12' height='8' rx='1.5' fill='%23cb9d24'/%3E%3Ccircle cx='8' cy='8' r='1.7' fill='white'/%3E%3C/svg%3E");
}

.ribbon-icon-report::before,
.ribbon-icon-list::before,
.ribbon-icon-archive::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5h5l3 3V13H4z' fill='%234c7a96'/%3E%3Cpath d='M8.5 2.5v3h3' fill='none' stroke='white' stroke-width='1.2'/%3E%3Cpath d='M6 9h4M6 11h4' stroke='white' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ribbon-icon-warning::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.2l6 11H2z' fill='%23c47a2f'/%3E%3Cpath d='M8 5.3v3.6M8 11.6h.01' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ribbon-icon-calendar::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='3' width='12' height='11' rx='1.5' fill='%234c7a96'/%3E%3Cpath d='M2 6h12' stroke='white' stroke-width='1.4'/%3E%3Cpath d='M5 2v3M11 2v3' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ribbon-icon-bank::before,
.ribbon-icon-card::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6l6-3 6 3v1H2zM3 8h2v4H3zm4 0h2v4H7zm4 0h2v4h-2zM2 13h12' stroke='%234f8b80' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.ribbon-icon-company::before,
.ribbon-icon-branch::before,
.ribbon-icon-project::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='2.5' width='10' height='11' rx='1.2' fill='%236b7ec6'/%3E%3Cpath d='M6 5.3h1.3M8.7 5.3H10M6 8h1.3M8.7 8H10M6 10.7h1.3M8.7 10.7H10' stroke='white' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ribbon-icon-transaction::before,
.ribbon-icon-plan::before,
.ribbon-icon-condition::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 11l3-3 2 2 4-5' fill='none' stroke='%236b7ec6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='3' cy='11' r='1' fill='%236b7ec6'/%3E%3Ccircle cx='6' cy='8' r='1' fill='%236b7ec6'/%3E%3Ccircle cx='8' cy='10' r='1' fill='%236b7ec6'/%3E%3Ccircle cx='12' cy='5' r='1' fill='%236b7ec6'/%3E%3C/svg%3E");
}

.ribbon-icon-key::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='5.3' cy='8' r='2.3' fill='none' stroke='%236b7ec6' stroke-width='1.7'/%3E%3Cpath d='M7.6 8H14M11 8v2M13 8v1.5' stroke='%236b7ec6' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ribbon-icon-info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%236b7ec6'/%3E%3Cpath d='M8 7v3M8 5.1h.01' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ribbon-icon-calculator::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='2.2' width='10' height='11.6' rx='1.2' fill='%234c84aa'/%3E%3Crect x='5' y='4.2' width='6' height='2' fill='white'/%3E%3Cg fill='white'%3E%3Crect x='5' y='7.5' width='1.6' height='1.6'/%3E%3Crect x='7.2' y='7.5' width='1.6' height='1.6'/%3E%3Crect x='9.4' y='7.5' width='1.6' height='1.6'/%3E%3Crect x='5' y='9.8' width='1.6' height='1.6'/%3E%3Crect x='7.2' y='9.8' width='1.6' height='1.6'/%3E%3Crect x='9.4' y='9.8' width='1.6' height='1.6'/%3E%3C/g%3E%3C/svg%3E");
}

.ribbon-workspace {
    flex: 1;
    position: relative;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.ribbon-workspace-page {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.ribbon-statusbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
    padding: 0.18rem 0.4rem;
    font-size: 0.8rem;
    line-height: 1.2;
    color: #244564;
    background: linear-gradient(180deg, var(--pb-status-from) 0%, var(--pb-status-to) 100%);
    border-top: 1px solid var(--pb-status-border);
}

.ribbon-status-item {
    white-space: nowrap;
}

.login-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0.7rem;
    background: linear-gradient(180deg, rgba(240, 245, 252, 0.15) 0%, rgba(210, 220, 236, 0.32) 100%);
}

.login-card {
    width: min(700px, 100%);
    border: 1px solid #c0d1e7;
    background: rgba(240, 246, 255, 0.95);
    box-shadow: 0 10px 28px rgba(34, 62, 96, 0.14);
}

.login-card-desktop {
    width: min(540px, 100%);
}

.login-card-header {
    padding: 0.55rem 0.9rem 0.25rem;
    text-align: center;
}

.login-card-header-desktop {
    padding: 0.55rem 0.9rem 0.15rem;
}

.login-card-header h1 {
    margin: 0;
    color: #2a5aa1;
    font-size: 1.12rem;
    line-height: 1.2;
}

.login-card-header p {
    margin: 0.15rem 0 0;
    color: #486581;
    font-size: 0.78rem;
}

.login-card-body {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 0.9rem;
    padding: 0.55rem 0.8rem 0.75rem;
    align-items: center;
}

.login-card-body-desktop {
    grid-template-columns: 180px 1fr;
    gap: 0.55rem;
    padding: 0.4rem 0.6rem 0.6rem;
    align-items: start;
}

.login-company {
    display: grid;
    gap: 0.45rem;
    justify-items: center;
}

.login-company-desktop {
    padding-top: 0.35rem;
}

.login-company img,
.login-logo-fallback {
    width: min(220px, 100%);
    height: 145px;
    object-fit: contain;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2b8b8e 0%, #1f6c78 100%);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}

.login-company-desktop img,
.login-company-desktop .login-logo-fallback {
    width: min(165px, 100%);
    height: 100px;
}

.login-company-desktop p {
    margin: 0;
    font-size: 0.72rem;
    color: #49647d;
    text-align: center;
}

.login-form {
    display: grid;
    gap: 0.45rem;
}

.login-form-desktop {
    gap: 0.32rem;
}

.login-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.login-form label {
    display: grid;
    gap: 0.18rem;
}

.login-remember {
    display: flex !important;
    align-items: center;
    gap: 0.45rem;
}

.login-remember input {
    width: 14px;
    height: 14px;
    margin: 0;
}

.login-remember span {
    font-size: 0.74rem;
}

.login-form span {
    font-size: 0.76rem;
}

.login-form input,
.login-form select {
    padding: 0.35rem 0.45rem;
    border: 1px solid #aec2de;
    background: #fff;
    font-size: 0.82rem;
    line-height: 1.2;
}

.login-actions {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.1rem;
}

.login-btn {
    min-width: 74px;
    text-align: center;
    padding: 0.34rem 0.55rem;
    border: 1px solid #8aaad0;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.74rem;
}

.login-btn-primary {
    background: linear-gradient(180deg, #f6fbff 0%, #8ebcf0 100%);
    color: #153554;
}

.login-btn-secondary {
    background: linear-gradient(180deg, #ffffff 0%, #dce8f8 100%);
    color: #274766;
}

.login-error {
    padding: 0.4rem 0.55rem;
    background: #fff1f2;
    border: 1px solid #f2b0b9;
    color: #9a2430;
    font-size: 0.76rem;
}

.login-success {
    padding: 0.4rem 0.55rem;
    background: #ecfdf3;
    border: 1px solid #8cd9a7;
    color: #18633b;
    font-size: 0.76rem;
}

.login-dev-otp {
    padding: 0.35rem 0.5rem;
    background: #fff8db;
    border: 1px solid #e7cb74;
    color: #6a5200;
    font-size: 0.76rem;
}

.login-support-link {
    margin-top: 0.1rem;
    text-align: right;
}

.login-support-link-left {
    text-align: left;
}

.login-support-link a {
    color: #2a5aa1;
    text-decoration: none;
    font-size: 0.75rem;
}

.login-card-forgot {
    width: min(560px, 100%);
}

.login-card-body-single {
    grid-template-columns: 1fr;
}

.workspace-auth {
    position: relative;
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.workspace-home {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(255,255,255,0.18);
}

.workspace-page-header {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0.6rem;
    background: linear-gradient(180deg, rgba(246,250,255,0.95) 0%, rgba(215,227,244,0.92) 100%);
    border-bottom: 1px solid #abc0de;
    color: #23486f;
    font-size: 0.78rem;
    font-weight: 700;
}

.workspace-page-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.workspace-page-body-home {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 100%),
        linear-gradient(180deg, rgba(239,245,252,0.72) 0%, rgba(223,233,246,0.4) 100%);
}

.forgot-mobile-field {
    display: grid;
    gap: 0.18rem;
}

.forgot-mobile-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 0.45rem;
}

.forgot-mobile-row input {
    min-width: 0;
    width: 100%;
}

.forgot-mobile-row.forgot-mobile-row-email {
    grid-template-columns: minmax(280px, 340px);
}

.main-ribbon-shell-locked .ribbon-panel,
.main-ribbon-shell-locked .ribbon-statusbar,
.main-ribbon-shell-locked .ribbon-topbar,
.main-ribbon-shell-locked .ribbon-tabs {
    filter: saturate(0.9);
}

.main-ribbon-shell.theme-caramel {
    --pb-shell-bg: #e8ddcf;
    --pb-topbar-from: #f5ead8;
    --pb-topbar-to: #d7b690;
    --pb-topbar-border: #b88f60;
    --pb-tabs-bg: #d7b690;
    --pb-tabs-border: #b88f60;
    --pb-tab-active-from: #fff8f0;
    --pb-tab-active-to: #ecd0ad;
    --pb-panel-from: #efddc7;
    --pb-panel-to: #d8bd98;
    --pb-panel-border: #b88f60;
    --pb-group-border: #be9666;
    --pb-group-label: #67492f;
    --pb-status-from: #eedfcb;
    --pb-status-to: #d8bb95;
    --pb-status-border: #b88f60;
}

.main-ribbon-shell.theme-lilian {
    --pb-shell-bg: #ebe4f4;
    --pb-topbar-from: #f4eefc;
    --pb-topbar-to: #cfbfeb;
    --pb-topbar-border: #9c88c5;
    --pb-tabs-bg: #c9bbe7;
    --pb-tabs-border: #9c88c5;
    --pb-tab-active-from: #fcf9ff;
    --pb-tab-active-to: #e2d8f6;
    --pb-panel-from: #ece4f8;
    --pb-panel-to: #d7c9ee;
    --pb-panel-border: #a391c9;
    --pb-group-border: #ac99d0;
    --pb-group-label: #5d4d7f;
    --pb-status-from: #ede6f8;
    --pb-status-to: #d6c8ee;
    --pb-status-border: #9c88c5;
}

.main-ribbon-shell.theme-money {
    --pb-shell-bg: #e3ecdb;
    --pb-topbar-from: #f0f8e8;
    --pb-topbar-to: #bfd19f;
    --pb-topbar-border: #7f9b5f;
    --pb-tabs-bg: #bfd19f;
    --pb-tabs-border: #7f9b5f;
    --pb-tab-active-from: #fbfff7;
    --pb-tab-active-to: #d9e8c4;
    --pb-panel-from: #e8f1dc;
    --pb-panel-to: #cadcb0;
    --pb-panel-border: #8aa467;
    --pb-group-border: #91ab6d;
    --pb-group-label: #435833;
    --pb-status-from: #e8f1dc;
    --pb-status-to: #c9dcae;
    --pb-status-border: #7f9b5f;
}

.main-ribbon-shell.theme-imaginary {
    --pb-shell-bg: #e3e8f3;
    --pb-topbar-from: #eef4ff;
    --pb-topbar-to: #bfcfe9;
    --pb-topbar-border: #738bb0;
    --pb-tabs-bg: #bccce6;
    --pb-tabs-border: #738bb0;
    --pb-tab-active-from: #f9fbff;
    --pb-tab-active-to: #d6e0f3;
    --pb-panel-from: #e6edf9;
    --pb-panel-to: #c7d6ef;
    --pb-panel-border: #7e95ba;
    --pb-group-border: #879dc0;
    --pb-group-label: #3f5676;
    --pb-status-from: #e4ecf8;
    --pb-status-to: #c7d5ee;
    --pb-status-border: #738bb0;
}

.main-ribbon-shell.theme-blue {
    --pb-shell-bg: #dfe8f6;
    --pb-topbar-from: #e6f0fd;
    --pb-topbar-to: #c6d8f1;
    --pb-topbar-border: #8caad3;
    --pb-tabs-bg: #a9c5eb;
    --pb-tabs-border: #87abd9;
    --pb-tab-active-from: #f7fbff;
    --pb-tab-active-to: #dce9fb;
    --pb-panel-from: #d5e4f7;
    --pb-panel-to: #c5d8ef;
    --pb-panel-border: #9db7d8;
    --pb-group-border: #9db9db;
    --pb-group-label: #315173;
    --pb-status-from: #dce9fa;
    --pb-status-to: #c7daf1;
    --pb-status-border: #92b1d7;
}

.main-ribbon-shell.theme-black {
    --pb-shell-bg: #d3d7df;
    --pb-topbar-from: #5d6672;
    --pb-topbar-to: #313844;
    --pb-topbar-border: #222831;
    --pb-tabs-bg: #56606d;
    --pb-tabs-border: #222831;
    --pb-tab-active-from: #f0f2f5;
    --pb-tab-active-to: #cfd5dd;
    --pb-panel-from: #7e8793;
    --pb-panel-to: #5a6370;
    --pb-panel-border: #313844;
    --pb-group-border: #495260;
    --pb-group-label: #edf2f8;
    --pb-status-from: #6c7480;
    --pb-status-to: #495260;
    --pb-status-border: #222831;
}

.main-ribbon-shell.theme-black .ribbon-brand strong,
.main-ribbon-shell.theme-black .ribbon-brand span,
.main-ribbon-shell.theme-black .ribbon-tab,
.main-ribbon-shell.theme-black .ribbon-statusbar,
.main-ribbon-shell.theme-black .ribbon-user-chip,
.main-ribbon-shell.theme-black .ribbon-logout,
.main-ribbon-shell.theme-black .ribbon-group-label {
    color: #f4f7fb;
}

.main-ribbon-shell.theme-black .ribbon-tab-active {
    color: #0b2f61;
}

.main-ribbon-shell.theme-black .ribbon-user-chip,
.main-ribbon-shell.theme-black .ribbon-logout {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
}

.main-ribbon-shell.theme-asphalt {
    --pb-shell-bg: #dadde2;
    --pb-topbar-from: #eff1f4;
    --pb-topbar-to: #c6cbd3;
    --pb-topbar-border: #848d9a;
    --pb-tabs-bg: #c4cad1;
    --pb-tabs-border: #848d9a;
    --pb-tab-active-from: #fbfcfd;
    --pb-tab-active-to: #dde2e8;
    --pb-panel-from: #e6e8eb;
    --pb-panel-to: #cfd4da;
    --pb-panel-border: #97a0ac;
    --pb-group-border: #9ba4ae;
    --pb-group-label: #4f5965;
    --pb-status-from: #e4e7eb;
    --pb-status-to: #cdd2d8;
    --pb-status-border: #848d9a;
}

.text-danger {
    color: #b42318;
    font-size: 0.85rem;
}

@media (max-width: 960px) {
    .login-card-body {
        grid-template-columns: 1fr;
    }

    .login-card {
        width: min(420px, 100%);
    }

    .login-row {
        grid-template-columns: 1fr;
    }
}