* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
}

html {
    min-height: 100%;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    min-height: 100vh;
    padding-bottom: 16px;
    background: #f2f3fa;
    color: #1d1f45;
    font-size: 14px;
    line-height: 21px;
}

.header-wrapper {
    width: 100%;
    height: 57.59375px;
    background: #00427a;
    color: #fff;
}

.header {
    width: 1140px;
    height: 57.59375px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    color: #fff;
}

.header-logo {
    width: 460px;
    height: 57.59375px;
    flex: 0 0 460px;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.mistertango-dashboard-logo {
    display: block;
    width: 128px;
    height: 26px;
    background-image: url('/images/mistertango-login-header-reference.png');
    background-repeat: no-repeat;
    background-size: 306px 56px;
    background-position: -84px -13px;
}

.header-nav {
    height: 57.59375px;
    display: flex;
    flex: 0 0 auto;
}

.nav-item {
    position: relative;
    height: 57.59375px;
    display: flex;
    align-items: center;
    padding: 0 19.2px;
    color: #fff;
    font-size: 14px;
    line-height: 14px;
    white-space: nowrap;
    cursor: pointer;
}

.header-nav .nav-item:nth-child(1) { width: 205.640625px; }
.header-nav .nav-item:nth-child(2) { width: 130.4921875px; }
.header-nav .nav-item:nth-child(3) { width: 104.84375px; }

.nav-item i,
.header-user i,
.btn-primary i,
.filter-btn i,
.download-btn i,
.account-icon-wrapper i,
.account-list-item i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    flex: 0 0 auto;
}

.nav-item i {
    width: 20.796875px;
    height: 20.796875px;
    margin-right: 8px;
}

.nav-item i img,
.header-user i img {
    max-width: 20.796875px;
    max-height: 20.796875px;
    width: auto;
    height: auto;
}

.nav-item.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(240, 240, 240, 0.6);
}

.header-user {
    width: 238.609375px;
    height: 57.59375px;
    flex: 0 0 238.609375px;
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 24px;
    overflow: hidden;
}

.header-user > .profile-icon {
    width: 20.796875px;
    height: 20.796875px;
}

.header-user-name {
    width: 45.21875px;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 14px;
}

.header-logo, .nav-item, .profile-link, .header-icon-link { color: inherit; text-decoration: none; }
.profile-link { height: 57.59375px; display: flex; align-items: center; min-width: 74px; position: relative; }
.profile-link.active::after, .header-icon-link.active::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 3px; background: rgba(240,240,240,.75); }
.header-icon-link { position: relative; display: block; width: 38px; height: 57.59375px; }
.header-icon-link > i { display: block; }
.header-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-icon-link > i {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-actions {
    display: flex;
    align-items: center;
}

.header-actions i {
    position: relative;
    width: 38px;
    height: 57.59375px;
    padding: 0 8px;
    cursor: pointer;
}

.notification-count {
    position: absolute;
    top: 12px;
    right: 3px;
    width: auto;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: #dc3545;
    color: #fff;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    white-space: nowrap;
}

.main-container {
    width: 1140px;
    margin: 24px auto 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
}

.sidebar {
    width: 288px;
    flex: 0 0 288px;
    margin-right: 24px;
}

.account-card {
    width: 288px;
    height: 238.390625px;
    background: #fff;
    border: 1px solid #f2f3fa;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
    overflow: hidden;
}

.account-header {
    width: 286px;
    height: 166.390625px;
    overflow: hidden;
}

.account-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 28.8px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    background: #f5f5f5;
}

.account-icon-wrapper i,
.account-icon-wrapper img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.account-title {
    width: 286px;
    height: 54.3984375px;
    margin-top: 3.2px;
    padding: 0 0 11.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f2f3fa;
    background: #fff;
    color: #1d1f45;
    font-size: 17.6px;
    line-height: 17.6px;
    font-weight: 400;
}

.account-list {
    width: 286px;
    height: 70px;
    padding: 16px 0;
    list-style: none;
    background: #fff;
}

.account-list-item {
    width: 286px;
    height: 38px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    background: #fff;
    border: 0;
    color: #f49326;
    font-size: 15.4px;
    line-height: 23.1px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
}

.account-list-item i {
    width: 20.796875px;
    height: 20.796875px;
    margin-right: 12.8px;
}

.account-list-item img {
    max-width: 20.796875px;
    max-height: 20.796875px;
    width: auto;
    height: auto;
}

.content,
.dashboard-content {
    width: 828px;
    flex: 0 0 828px;
}

.info-box {
    width: 828px;
    height: 106.796875px;
    margin: 0 0 24px;
    background: #fff;
    border: 1px solid #f2f3fa;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
}

.info-header {
    width: calc(100% - 2px);
    height: 54.3984375px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f2f3fa;
}

.info-title {
    min-width: 0;
    height: 19.1953125px;
    margin-left: 20px;
    padding-top: 1.6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1d1f45;
    font-size: 17.6px;
    line-height: 17.6px;
    font-weight: 400;
}

.btn-primary {
    width: 147.7421875px;
    height: 41px;
    flex: 0 0 147.7421875px;
    margin-right: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #00427a;
    border: 0;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    line-height: 21px;
    white-space: nowrap;
    cursor: pointer;
}

.btn-primary i,
.btn-primary img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.info-balance {
    width: calc(100% - 2px);
    height: 50.3984375px;
    padding: 0 20px;
    display: flex;
    align-items: center;
}

.balance-label,
.balance-amount {
    width: 151.5px;
    height: 22.3984375px;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 14px;
    font-weight: 700;
}

.balance-label { color: #3d3d4e; }

.toolbar {
    width: 828px;
    height: 40.1953125px;
    margin: 0;
    padding: 0 8px 2px 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
}

.filter-btn,
.download-btn {
    height: 38.1953125px;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #565656;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
}

.filter-btn {
    width: 124.28125px;
    padding: 0 12px 0 10px;
}

.download-btn {
    position: relative;
    width: 129.5px;
    padding: 0 24px 0 10px;
}

.filter-btn i,
.download-btn i {
    width: 20.796875px;
    height: 20.796875px;
    margin-right: 8px;
}

.filter-btn img,
.download-btn img {
    max-width: 20.796875px;
    max-height: 20.796875px;
    width: auto;
    height: auto;
}

.download-sort::before,
.download-sort::after {
    content: '';
    position: absolute;
    right: 10px;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
}

.download-sort::before {
    top: 13px;
    border-bottom: 4px solid #565656;
}

.download-sort::after {
    top: 21px;
    border-top: 4px solid #565656;
}

.transactions-card {
    width: 828px;
    background: #fff;
    border: 0;
    border-right: 1px solid #f2f3fa;
    border-bottom: 1px solid #f2f3fa;
    border-left: 1px solid #f2f3fa;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
    overflow: visible;
}

.table {
    width: 828px;
    min-width: 828px;
    table-layout: fixed;
    border-collapse: collapse;
    background: #fff;
    color: #1d1f45;
    text-align: left;
    font-size: 14px;
    line-height: 21px;
}

.table th:nth-child(1), .table td:nth-child(1) { width: 108px; }
.table th:nth-child(2), .table td:nth-child(2) { width: 242.9375px; }
.table th:nth-child(3), .table td:nth-child(3) { width: 382.203125px; }
.table th:nth-child(4), .table td:nth-child(4) { width: 94.859375px; }

.table th {
    height: 52.796875px;
    padding: 12px;
    background: #fff;
    border-top: 1px solid #f2f3fa;
    border-bottom: 1px solid #f2f3fa;
    color: #3d3d4e;
    font-weight: 700;
}

.table th:first-child { padding-left: 16px; }
.table th:last-child { padding: 12px 16px 12px 1.6px; text-align: right; }

.table td {
    height: 67px;
    padding: 12px;
    border-bottom: 1px solid #f2f3fa;
    color: #1d1f45;
    font-weight: 400;
    vertical-align: middle;
}

.table td:first-child {
    padding-left: 16px;
    white-space: nowrap;
}
.table td:last-child { padding: 12px 16px 12px 1.6px; text-align: right; }
.table td:nth-child(2) { text-transform: uppercase; }

.table td:nth-child(2),
.table td:nth-child(3) {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table tbody tr {
    height: 67px;
    cursor: pointer;
}

.table tbody tr:hover { background: #f5f5f5; }
.table tr:last-child td { border-bottom: 0; }

.transactions-pagination {
    box-sizing: border-box;
    display: flex;
    width: 828px;
    min-height: 35.5px;
    align-items: center;
    justify-content: space-between;
    color: #1d1f45;
    font: 14px/21px Roboto, sans-serif;
}

.pagination-summary {
    flex: 1 1 auto;
    text-align: center;
}

.pagination {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    list-style: none;
}

.page-link {
    display: block;
    margin-left: -1px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    background: #fff;
    color: #f49326;
    font: 14px/17.5px Roboto, sans-serif;
    text-decoration: none;
}

.pagination-first .page-link {
    margin-left: 0;
    border-radius: 4px 0 0 4px;
}

.pagination-last .page-link { border-radius: 0 4px 4px 0; }
.page-item.active .page-link { border-color: #f49326; background: #f49326; color: #fff; }
.page-item.disabled .page-link { color: #3d3d4e; pointer-events: none; }
.page-item:not(.active):not(.disabled) .page-link:hover { background: #f2f3fa; }

body.theme-dark {
    background: #2a2a2a;
    color: #f0f0f0;
}

body.theme-dark .account-card,
body.theme-dark .account-header,
body.theme-dark .account-title,
body.theme-dark .account-list,
body.theme-dark .account-list-item,
body.theme-dark .info-box,
body.theme-dark .info-header,
body.theme-dark .info-balance,
body.theme-dark .transactions-card,
body.theme-dark .table,
body.theme-dark .table th,
body.theme-dark .table td,
body.theme-dark .refresh-loading-panel {
    background: #252525;
    border-color: #171717;
}

body.theme-dark .account-title,
body.theme-dark .info-title,
body.theme-dark .balance-label,
body.theme-dark .table,
body.theme-dark .table th,
body.theme-dark .table td,
body.theme-dark .transactions-pagination {
    color: #f0f0f0;
}

body.theme-dark .account-icon-wrapper { background: #363636; border-color: #363636; }
body.theme-dark .toolbar,
body.theme-dark .filter-btn,
body.theme-dark .download-btn { color: #d7d7d7; }
body.theme-dark .table th { background: #222; color: #d7d7d7; }
body.theme-dark .table tbody tr:hover { background: #212121; }
body.theme-dark .page-link { color: #f49326; background: #363636; border-color: #171717; }
body.theme-dark .page-item.active .page-link { color: #000; background: #f49326; border-color: #f49326; }
body.theme-dark .page-item.disabled .page-link { color: #f0f0f0; background: #252525; border-color: #171717; }
body.theme-dark .page-item:not(.active):not(.disabled) .page-link:hover { background: #202020; color: #fff; }
body.theme-dark .refresh-spinner { border-color: #555; border-top-color: #aaa; }

.amount-positive,
.balance-amount .amount-positive,
.table td.amount-positive { color: #28a745; }

.amount-negative,
.balance-amount .amount-negative,
.table td.amount-negative { color: #dc3545; }

.refresh-loading-panel {
    display: none;
    width: 828px;
    height: 105px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #f2f3fa;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
}

.refresh-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #d7d7d7;
    border-top-color: #717171;
    border-radius: 50%;
    animation: refresh-spin 0.7s linear infinite;
}

html.page-loading .refresh-loading-panel { display: flex; }
html.page-loading .dashboard-content { display: none; }

@keyframes refresh-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 991px) {
    .header,
    .main-container {
        width: calc(100% - 32px);
    }

    .header-logo {
        width: auto;
        flex: 1 1 auto;
    }

    .header-nav { display: none; }

    .header-user {
        width: 238.609375px;
        flex-basis: 238.609375px;
    }

    .main-container { flex-direction: column; }

    .sidebar {
        width: 100%;
        margin: 0 0 24px;
    }

    .account-card,
    .content,
    .dashboard-content,
    .info-box,
    .toolbar,
    .transactions-card,
    .refresh-loading-panel {
        width: 100%;
    }

    .account-card { height: auto; }
    .account-header, .account-title, .account-list, .account-list-item { width: 100%; }
    .info-header, .info-balance { width: calc(100% - 2px); }
}

@media (max-width: 1180px) {
    .header { width: calc(100% - 32px); }
    .header-logo { width: auto; flex: 1 1 auto; }
    .main-container { width: calc(100% - 32px); }
}

/* Secondary account pages */
.section-loading-overlay {
    display: none;
    position: fixed;
    z-index: 900;
    top: 81.59375px;
    left: 50%;
    width: 1140px;
    transform: translateX(-50%);
    grid-template-columns: 288px 828px;
    gap: 24px;
    background: transparent;
}
.section-loader-card { grid-column: 2; width: 828px; height: 105px; display: flex; justify-content: center; align-items: center; background: #fff; border: 1px solid #f2f3fa; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.075); }
html.page-loading .section-loading-overlay { display: grid; }
html.page-loading .section-shell { visibility: visible; }
html.page-loading .section-content { visibility: hidden; }
.section-shell { width: 1140px; margin: 24px auto; display: grid; grid-template-columns: 288px 828px; gap: 24px; align-items: start; }
.section-sidebar { width: 288px; }
.section-content { width: 828px; }
.section-card { width: 100%; }
.section-sidebar, .section-card { background: #fff; border: 1px solid #f2f3fa; border-radius: 3px; box-shadow: 0 2px 4px rgba(0,0,0,.075); }
.section-sidebar-heading { height: 164px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-bottom: 1px solid #eceef2; font-size: 18px; }
.section-round-icon { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: #f6f6f6; color: #ed9c32; font-size: 30px; }
.section-sidebar nav { padding: 13px 0; }
.section-menu-item { min-height: 38px; padding: 8px 14px; display: flex; align-items: center; gap: 9px; color: #50515a; text-decoration: none; font-size: 13px; }
.section-menu-item.active { color: #e89a32; }
.section-back { margin: 0 14px 16px; padding: 9px 10px; display: block; border: 1px solid #d8dce5; border-radius: 3px; color: #4b5361; text-decoration: none; text-align: center; font-size: 12px; }
.section-content { display: grid; gap: 18px; }
.section-card-title { min-height: 49px; padding: 16px; border-bottom: 1px solid #e9ebef; font-size: 17px; font-weight: 700; }
.payment-form { padding: 18px 16px; }
.form-row { min-height: 45px; display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 12px; font-size: 13px; }
.form-row em { color: #df3f4a; font-style: normal; }
.form-row input, .form-row select, .form-row textarea, .message-filter input { width: 100%; border: 1px solid #d6d9e0; border-radius: 3px; background: #fff; color: #30333b; font: inherit; }
.form-row input, .form-row select { height: 38px; padding: 0 10px; }
.form-row textarea { height: 70px; padding: 9px; resize: none; }
.static-row strong { font-size: 14px; }
.amount-field { display: flex; }
.amount-field input { border-radius: 3px 0 0 3px; text-align: right; }
.amount-field span { width: 36px; display: grid; place-items: center; border: 1px solid #d6d9e0; border-left: 0; border-radius: 0 3px 3px 0; }
.upload-button { width: 42px; height: 38px; float: right; border: 1px solid #d6d9e0; background: #f6f7fa; }
.section-actions { margin-top: 15px; text-align: right; }
.orange-button { width: 158px; height: 38px; border: 0; border-radius: 3px; background: #ed9c32; color: #fff; }
.card-toolbar { padding: 13px; display: flex; gap: 28px; }
.card-toolbar button, .notification-tools button { border: 0; background: none; color: #4b4d54; font: inherit; }
.empty-result { padding: 24px 16px; font-weight: 700; }
.edit-link { padding: 12px 16px; color: #5d5e65; }
.profile-details { padding: 8px 16px 24px; display: grid; grid-template-columns: 160px 1fr; gap: 13px 18px; font-size: 13px; }
.profile-details dt { font-weight: 700; }
.profile-details dd { margin: 0; }
.message-filter { padding: 18px 24px; display: grid; grid-template-columns: 90px repeat(3,auto) 1fr; gap: 13px; align-items: center; font-size: 13px; }
.message-filter input[type=radio] { width: auto; accent-color: #ed9c32; }
.message-filter > input { height: 36px; padding: 0 9px; }
.message-filter button { height: 36px; border: 1px solid #d6d9e0; background: #f6f7fa; }
.notification-tools, .notification-settings { padding: 13px 16px; border-bottom: 1px solid #e9ebef; }
.notification-tools { display: flex; gap: 30px; }
.notification-settings label { float: right; }
.notification-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.notification-table th, .notification-table td { padding: 13px 10px; border-bottom: 1px solid #eaecf0; text-align: left; }
.notification-table th:first-child { width: 45px; }
.notification-table th:nth-child(2) { width: 95px; }
.notification-table th:last-child { width: 45px; }
.notification-table td button { width: 32px; height: 32px; border: 1px solid #d6d9e0; background: #f6f7fa; }
.notification-bell { color: #bfc2c9; font-size: 23px; }
body.theme-dark .section-loading-overlay { background: #252525; }
body.theme-dark .section-loader-card, body.theme-dark .section-sidebar, body.theme-dark .section-card { background: #242424; border-color: #313131; }
body.theme-dark .section-sidebar-heading, body.theme-dark .section-card-title, body.theme-dark .notification-tools, body.theme-dark .notification-settings, body.theme-dark .notification-table th, body.theme-dark .notification-table td { border-color: #353535; }
body.theme-dark .section-round-icon { background: #303030; }
body.theme-dark .section-menu-item, body.theme-dark .section-back, body.theme-dark .card-toolbar button, body.theme-dark .notification-tools button { color: #ddd; }
body.theme-dark .form-row input, body.theme-dark .form-row select, body.theme-dark .form-row textarea, body.theme-dark .message-filter input { background: #353535; border-color: #4a4a4a; color: #eee; }
@media (max-width: 780px) { .section-shell { width: calc(100% - 24px); grid-template-columns: 1fr; } .section-sidebar-heading { height: 100px; } .section-loader-card { width: calc(100% - 24px); } .form-row { grid-template-columns: 1fr; padding: 8px 0; } }

/* Payments page: measured against the supplied original screenshot. */
.view-payments .header { width: 1140px; }
.view-payments .header-logo { width: 460px; flex-basis: 460px; }
.view-payments .header-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
}
.view-payments .header-icon-link > i {
    display: flex;
    align-items: center;
    justify-content: center;
}
.view-payments .section-shell {
    width: 1140px;
    margin-top: 24px;
    grid-template-columns: 288px 828px;
    gap: 24px;
}
.view-payments .section-loader-card { width: 828px; }
.view-payments .section-sidebar { width: 288px; }
.view-payments .section-sidebar-heading {
    height: 166px;
    gap: 10px;
    font-size: 17.6px;
}
.view-payments .section-round-icon {
    width: 80px;
    height: 80px;
    background: #f5f5f5;
}
.view-payments .payment-round-icon svg {
    width: 42px;
    height: 42px;
}
.view-payments .payment-round-icon {
    background-color: #f5f5f5;
    background-image: url('../images/payment-hero-source.png');
    background-repeat: no-repeat;
    background-size: 206px 145px;
    background-position: -58px -13px;
}
.view-payments .payment-round-icon svg { visibility: hidden; }
.view-payments .payment-menu { padding: 16px 0 18px; }
.view-payments .payment-menu-item {
    height: 38px;
    padding: 8px 16px;
    gap: 11px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    cursor: default;
}
.view-payments .payment-menu-item.active { color: #f49326; }
.view-payments .payment-menu-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
}
.view-payments .payment-menu-icon svg,
.view-payments .payment-round-icon svg {
    fill: none;
    stroke: #f49326;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.view-payments .payment-menu-icon svg { width: 22px; height: 22px; }
.view-payments .payment-menu-icon {
    background-image: url('../images/payment-menu-source.png');
    background-repeat: no-repeat;
    background-size: 268px 253px;
}
.view-payments .payment-menu-icon svg { visibility: hidden; }
.view-payments .payment-menu-icon-pay { background-position: -14px -20px; }
.view-payments .payment-menu-icon-authorize { background-position: -14px -59px; }
.view-payments .payment-menu-icon-receive { background-position: -14px -97px; }
.view-payments .payment-menu-icon-info { background-position: -14px -135px; }
.view-payments .payment-menu-item:nth-child(5) .payment-menu-icon-info { background-position: -14px -173px; }
.view-payments .payment-menu-icon-help { background-position: -14px -211px; }
.view-payments .payments-card { width: 828px; }
.view-payments .section-card-title {
    height: 54px;
    padding: 16px 20px;
    font-size: 17.6px;
    line-height: 21px;
    font-weight: 400;
}
.view-payments .payment-form { padding: 22px 20px 20px; }
.view-payments .form-row {
    min-height: 47px;
    grid-template-columns: 242px 1fr;
    gap: 14px;
    font-size: 14px;
    font-weight: 700;
}
.view-payments .form-row > span:first-child { font-weight: 700; }
.view-payments .account-balance-row { min-height: 43px; }
.view-payments .account-balance-row strong { font-size: 14px; }
.view-payments .form-row input,
.view-payments .form-row select {
    height: 38px;
    padding: 0 12px;
    font-weight: 400;
}
.view-payments .form-row textarea {
    height: 80px;
    padding: 9px 12px;
    font-weight: 400;
}
.view-payments .amount-field { width: 193px; }
.view-payments .amount-field input {
    width: 161px;
    text-align: right;
    color: #7d8390;
}
.view-payments .form-row input:focus,
.view-payments .form-row select:focus,
.view-payments .form-row textarea:focus {
    border-color: #ff941f;
    box-shadow: 0 0 0 3px rgba(255,148,31,.26);
    outline: 0;
}
.view-payments .amount-field span {
    width: 32px;
    background: #f4f5fa;
    font-weight: 400;
}
.view-payments .field-with-info {
    display: grid;
    grid-template-columns: minmax(0,1fr) 41px;
    gap: 8px;
    align-items: start;
}
.view-payments .info-button,
.view-payments .upload-button {
    width: 41px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #d6d9e0;
    border-radius: 3px;
    background: #f4f5fa;
    color: #313346;
}
.view-payments .info-button span {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    background-image: url('../images/payment-form-source.png');
    background-repeat: no-repeat;
    background-size: 170px 333px;
    background-position: -96px -47px;
}
.view-payments .upload-form-row { min-height: 80px; align-items: start; padding-top: 20px; }
.view-payments .upload-form-row .field-with-info { justify-self: end; grid-template-columns: 41px 41px; }
.view-payments .upload-button { float: none; }
.view-payments .upload-symbol {
    width: 22px;
    height: 22px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    background-image: url('../images/payment-form-source.png');
    background-repeat: no-repeat;
    background-size: 170px 333px;
    background-position: -45px -280px;
}
.view-payments .section-actions { margin-top: 0; text-align: right; }
.view-payments .orange-button {
    width: 160px;
    height: 38px;
    font-size: 14px;
}
@media (max-width: 1180px) {
    .view-payments .header { width: calc(100% - 32px); }
    .view-payments .header-logo { width: auto; flex: 1 1 auto; }
    .view-payments .section-shell { width: calc(100% - 32px); grid-template-columns: 288px minmax(0,1fr); }
    .view-payments .payments-card { width: 100%; }
}
@media (max-width: 780px) {
    .view-payments .section-shell { grid-template-columns: 1fr; }
    .view-payments .section-sidebar { width: 100%; }
    .view-payments .form-row { grid-template-columns: 1fr; }
}

/* One immutable two-column frame for every signed-in page and loader. */
@media (max-width: 1180px) {
    .section-shell,
    .section-loading-overlay {
        width: calc(100% - 32px);
        grid-template-columns: 288px minmax(0, 1fr);
        gap: 24px;
    }
    .section-content,
    .section-loader-card { width: 100%; }
}
@media (max-width: 780px) {
    .section-shell,
    .section-loading-overlay { grid-template-columns: 1fr; }
    .section-sidebar { width: 100%; }
    .section-loader-card { width: 100%; grid-column: 1; }
}

/* Cards page: copied from the authenticated original while preserving the fixed frame. */
.view-cards .section-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.view-cards .section-sidebar {
    height: 238.390625px;
    overflow: hidden;
}
.view-cards .cards-sidebar-heading {
    height: 166.390625px;
    gap: 10px;
    border-bottom: 1px solid #eceef2;
    font-size: 17.6px;
    line-height: 17.6px;
    font-weight: 400;
}
.view-cards .cards-round-icon {
    width: 80px;
    height: 80px;
    background: #f5f5f5;
    color: #f49326;
}
.view-cards .cards-hero-icon {
    width: 35.1953125px;
    height: 35.1953125px;
}
.view-cards .cards-menu {
    height: 70px;
    padding: 16px 0;
}
.view-cards .cards-menu-item {
    width: 286px;
    height: 38px;
    min-height: 38px;
    padding: 8px 16px;
    gap: 11.2px;
    color: #f49326;
    font-size: 15.4px;
    line-height: 15.4px;
    font-weight: 400;
}
.view-cards .cards-menu-icon,
.view-cards .cards-nav-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}
.view-cards .cards-heading-card {
    height: 94.59375px;
}
.view-cards .cards-title {
    height: 54.3984375px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    border-bottom: 0;
    color: #1d1f45;
    font-size: 17.6px;
    line-height: 17.6px;
    font-weight: 400;
}
.view-cards .cards-toolbar {
    height: 38.1953125px;
    display: flex;
    align-items: stretch;
}
.view-cards .cards-toolbar button {
    height: 38.1953125px;
    padding: 0 12px 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #565656;
    font: inherit;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    white-space: nowrap;
}
.view-cards .cards-toolbar button:first-child { width: 124.390625px; }
.view-cards .cards-toolbar button:last-child { width: 169.2421875px; }
.view-cards .cards-order-icon {
    width: 19.1953125px;
    height: 19.1953125px;
    flex: 0 0 19.1953125px;
    color: #f49326;
    transform: translateY(-1px);
}
.view-cards .cards-results-card {
    height: 63px;
}
.view-cards .cards-empty-result {
    height: 61px;
    padding: 20px;
    color: #1d1f45;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}

/* Personal, Messages and Notifications: authenticated original layout. */
.view-personal .section-content,
.view-messages .section-content,
.view-notifications .section-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.view-personal .section-sidebar,
.view-messages .section-sidebar,
.view-notifications .section-sidebar {
    height: 466.390625px;
    overflow: hidden;
}
.personal-sidebar-heading {
    height: 166.390625px;
    gap: 10px;
    border-bottom: 1px solid #eceef2;
    font-size: 17.6px;
    line-height: 17.6px;
    font-weight: 400;
}
.personal-round-icon {
    width: 80px;
    height: 80px;
    background: #f5f5f5;
    color: #f49326;
}
.personal-round-icon svg {
    width: 35.1953125px;
    height: 35.1953125px;
}
.personal-menu {
    height: 298px;
    padding: 16px 0;
}
.personal-menu-item {
    width: 286px;
    height: 38px;
    min-height: 38px;
    padding: 8px 16px;
    gap: 11.2px;
    color: #565656;
    font-size: 15.4px;
    line-height: 15.4px;
    font-weight: 400;
    cursor: default;
}
.personal-menu-item.active { color: #f49326; }
.personal-menu-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: #f49326;
}
.personal-menu-icon svg { width: 22px; height: 22px; }
.personal-card-title {
    height: 54.3984375px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    color: #1d1f45;
    font-size: 17.6px;
    line-height: 17.6px;
    font-weight: 400;
}

/* My profile */
.view-personal .personal-card { height: 335.5703125px; }
.personal-actions {
    height: 38.1953125px;
    display: flex;
    align-items: stretch;
}
.personal-actions button {
    width: 74.890625px;
    height: 38.1953125px;
    padding: 0 12px 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #565656;
    font: inherit;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}
.personal-pencil {
    width: 19.1953125px;
    height: 19.1953125px;
    color: #f49326;
    transform: translateY(-1px);
}
.personal-pencil svg { width: 19.1953125px; height: 19.1953125px; }
.personal-details {
    height: 240.9765625px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 3.1953125px;
}
.profile-detail-row {
    width: 100%;
    height: 29px;
    min-height: 29px;
    display: grid;
    grid-template-columns: 192px minmax(0, 1fr);
    color: #1d1f45;
    font-size: 14px;
    line-height: 21px;
}
.profile-detail-row:first-child { height: 32px; min-height: 32px; }
.profile-detail-label {
    padding: 4px 16px 4px 0;
    color: #3d3d4e;
    font-weight: 700;
}
.profile-detail-value {
    min-width: 0;
    padding: 4px 0;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.profile-owner-row .profile-detail-value { padding-top: 4px; }
.profile-owner-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    color: #f49326;
}
.profile-owner-icon svg { width: 21.6px; height: 21.6px; }
.profile-owner-name { color: #f49326; overflow: hidden; text-overflow: ellipsis; }

/* Messages */
.view-messages .messages-filter-card { height: 180.7890625px; }
.messages-filter-body {
    height: 124.390625px;
    padding: 0 20px;
    color: #3d3d4e;
}
.message-box-row {
    height: 70.1953125px;
    display: flex;
    align-items: center;
}
.message-box-row > strong,
.message-search-row > strong:first-child {
    width: 108px;
    flex: 0 0 108px;
    margin-right: 16px;
    text-align: right;
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
}
.message-radio-group { display: flex; align-items: center; gap: 18px; }
.message-radio-group label { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.message-radio-group input {
    width: 18.5px;
    height: 18.5px;
    margin: 0;
    appearance: none;
    border: 1px solid #d3d9df;
    border-radius: 50%;
    background: #fff;
}
.message-radio-group input:checked {
    border: 5px solid #f2a23b;
}
.message-search-row {
    height: 54.1953125px;
    display: flex;
    align-items: flex-start;
}
.message-search-row input {
    height: 38.1953125px;
    padding: 7.6px 12px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    background: #fff;
    color: #3d3d4e;
    font: 14px/21px Roboto, sans-serif;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.keyword-input { width: 154px; flex: 0 0 154px; }
.message-search-spacer { flex: 1 1 auto; min-width: 16px; }
.message-search-row .user-label {
    width: 28.8px;
    flex: 0 0 28.8px;
    margin-right: 16px;
    padding-top: 10px;
    text-align: left;
    font-size: 14px;
    line-height: 18px;
}
.user-input { width: 104.40625px; flex: 0 0 104.40625px; }
.message-search-row button {
    width: 41.59375px;
    height: 38.1953125px;
    margin-left: 8px;
    display: grid;
    place-items: center;
    border: 1px solid #d3d9df;
    border-radius: 3px;
    background: #f2f3fa;
    color: #3d3d4e;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
}
.search-symbol {
    position: relative;
    width: 15px;
    height: 15px;
    border: 2px solid #3d3d4e;
    border-radius: 50%;
}
.search-symbol::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 2px;
    right: -6px;
    bottom: -3px;
    transform: rotate(45deg);
    background: #3d3d4e;
}
.view-messages .messages-results-card { height: 63px; }
.messages-empty-result {
    height: 61px;
    padding: 20px;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}

/* Notifications */
.view-notifications .notifications-filter-card { height: 221.578125px; }
.view-notifications .notification-tools,
.notification-settings-button {
    height: 38.1953125px;
    padding: 0;
    display: flex;
    align-items: stretch;
    border: 0;
}
.view-notifications .notification-tools button,
.notification-settings-button {
    height: 38.1953125px;
    padding: 0 12px 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #565656;
    font: 14px/21px Roboto, sans-serif;
    font-weight: 400;
}
.notify-check-icon,
.notify-trash-icon,
.notify-muted-icon {
    width: 19.1953125px;
    height: 19.1953125px;
    display: inline-flex;
    color: #f49326;
}
.notify-check-icon svg,
.notify-trash-icon svg,
.notify-muted-icon svg { width: 19.1953125px; height: 19.1953125px; }
.notify-muted-icon { position: relative; }
.notify-muted-icon::after {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 21px;
    height: 1.5px;
    transform: rotate(45deg);
    background: #f49326;
}
.notification-unread-row {
    height: 90.5859375px;
    padding: 27px 54px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border-top: 0;
    color: #3d3d4e;
    font-size: 14px;
}
.notification-unread-row strong { width: 72px; line-height: 38px; white-space: nowrap; }
.notification-unread-row input { position: absolute; opacity: 0; }
.notification-unread-row label span {
    width: 20px;
    height: 20px;
    margin-top: 9px;
    display: block;
    border: 1px solid #d3d9df;
    border-radius: 4px;
    background: #fff;
}
.view-notifications .notifications-table-card { overflow: hidden; }
.view-notifications .notification-table { padding: 0; border: 0; }
.view-notifications .notification-table table {
    width: 100%;
    border-collapse: collapse;
    color: #1d1f45;
    font-size: 14px;
    line-height: 21px;
}
.view-notifications .notification-table th,
.view-notifications .notification-table td {
    height: 67px;
    padding: 8px 10px;
    border-bottom: 1px solid #f2f3fa;
    text-align: left;
    vertical-align: middle;
}
.view-notifications .notification-table th { height: 53.296875px; font-weight: 700; }
.view-notifications .notification-table th:first-child { width: 52px; }
.view-notifications .notification-table th:nth-child(2) { width: 116px; }
.view-notifications .notification-table th:last-child { width: 52px; }
.view-notifications .notification-table td { font-weight: 700; }
.notification-date { white-space: nowrap; }
.view-notifications .notification-bell { color: #d3d6dc; }
.view-notifications .notification-bell span,
.view-notifications .notification-bell svg { width: 28px; height: 28px; display: block; }
.view-notifications .notification-table td:last-child { text-align: center; }
.view-notifications .notification-table td button {
    width: 41.59375px;
    height: 38.1953125px;
    display: grid;
    place-items: center;
    border: 1px solid #d3d9df;
    border-radius: 3px;
    background: #f2f3fa;
    color: #3d3d4e;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
}
.view-notifications .notification-table td button svg { width: 16px; height: 16px; }

@media (max-width: 780px) {
    .personal-menu-item { width: 100%; }
    .message-search-row { overflow-x: auto; }
    .profile-detail-row { grid-template-columns: 160px minmax(0,1fr); }
}