/* =========================================================
   WEALTH BUILDER 2.0
   MAIN STYLESHEET
========================================================= */


/* =========================================================
   GLOBAL RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-dark: #081b38;
    --primary: #0b1f3a;
    --primary-light: #173b6c;

    --accent: #1db954;
    --accent-dark: #159447;

    --blue: #2563eb;
    --blue-dark: #1d4ed8;

    --danger: #dc2626;
    --danger-dark: #b91c1c;

    --warning: #f59e0b;

    --background: #f4f7fb;
    --surface: #ffffff;

    --text-dark: #0f172a;
    --text-normal: #334155;
    --text-muted: #64748b;

    --border: #e2e8f0;

    --sidebar-width: 260px;

    --shadow-small:
        0 4px 12px rgba(15, 23, 42, 0.06);

    --shadow-medium:
        0 10px 30px rgba(15, 23, 42, 0.08);

    --shadow-large:
        0 20px 50px rgba(15, 23, 42, 0.12);
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background: var(--background);
    color: var(--text-dark);
    font-family:
        Arial,
        Helvetica,
        sans-serif;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
.btn {
    cursor: pointer;
}


/* =========================================================
   SHARED LAYOUT
========================================================= */

.main-content {
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    background: var(--background);
    transition:
        margin-left 0.3s ease,
        width 0.3s ease;
}

.navbar {
    min-height: 72px;
    padding: 16px 32px;
    background: var(--primary-dark);
    color: white;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    position: sticky;
    top: 0;
    z-index: 500;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.12);
}

.logo {
    font-size: 22px;
    font-weight: 700;
}

.hero,
.dashboard-page,
.goals-page,
.contributions-page,
.watchlist-page,
.dividends-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.hero {
    text-align: center;
}

.hero h1,
.page-heading h1,
.dashboard-heading h1 {
    color: var(--primary-dark);
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.15;
}

.hero p,
.page-heading p,
.dashboard-heading p {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 16px;
}

.page-heading,
.dashboard-heading {
    margin-bottom: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    padding: 20px 16px;

    background:
        linear-gradient(
            180deg,
            #081b38 0%,
            #0b2346 100%
        );

    color: white;

    display: flex;
    flex-direction: column;

    overflow-y: auto;
    overflow-x: hidden;

    box-shadow:
        5px 0 25px rgba(8, 27, 56, 0.14);

    transition:
        width 0.3s ease,
        transform 0.3s ease;
}

.sidebar > div:first-child {
    width: 100%;
}

.sidebar-logo {
    margin-bottom: 24px;
    padding: 14px 12px;

    color: white;
    text-align: center;

    font-size: 27px;
    font-weight: 800;
    white-space: nowrap;
}

.sidebar a {
    width: 100%;
    min-height: 48px;

    margin-bottom: 5px;
    padding: 12px 15px;

    color: #dbeafe;
    border-radius: 10px;

    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 15px;
    font-weight: 500;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.sidebar a:hover {
    color: white;
    background:
        rgba(29, 185, 84, 0.18);
    transform: translateX(3px);
}

.sidebar a.active {
    color: white;
    background: var(--accent);
    box-shadow:
        0 6px 16px rgba(29, 185, 84, 0.25);
}

.sidebar-bottom {
    width: 100%;

    margin-top: auto;
    padding-top: 18px;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.sidebar-bottom a {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;

    margin: 0;
    padding: 0;

    background:
        rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
}

.sidebar-bottom a:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

.sidebar-logo-image {
    width: 150px;
    height: auto;
    display: block;
    object-fit: contain;
}

.sidebar.collapsed .sidebar-logo-image {
    width: 46px;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn {
    min-height: 42px;

    padding: 10px 18px;

    border: none;
    border-radius: 9px;

    background: #e2e8f0;
    color: var(--text-dark);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn:hover {
    background: #cbd5e1;
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-dark);
    box-shadow:
        0 7px 18px rgba(29, 185, 84, 0.23);
}

.btn-secondary {
    background: var(--primary);
    color: white;
}

.btn-secondary:hover {
    background: var(--primary-light);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: var(--danger-dark);
}


/* =========================================================
   FORMS
========================================================= */

.form-group {
    width: 100%;
    margin-bottom: 18px;
}

.form-group label {
    margin-bottom: 7px;

    display: block;

    color: var(--text-normal);
    font-size: 14px;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    padding: 12px 14px;

    background: white;
    color: var(--text-dark);

    border: 1px solid #cbd5e1;
    border-radius: 9px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--blue);
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}

textarea {
    resize: vertical;
}

.main-form {
    width: min(100%, 500px);
    margin: 30px auto;
    padding: 30px;

    background: white;
    border-radius: 16px;

    box-shadow: var(--shadow-medium);
}


/* =========================================================
   DASHBOARD
========================================================= */

.dashboard-cards {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.dashboard-card {
    min-width: 0;
    padding: 24px;

    background: white;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;

    box-shadow: var(--shadow-small);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.dashboard-card-icon {
    width: 46px;
    height: 46px;

    margin-bottom: 18px;

    background: #eff6ff;
    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--blue);
    font-size: 21px;
    font-weight: 800;
}

.dashboard-card h3 {
    margin-bottom: 9px;

    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}

.dashboard-card h2 {
    color: var(--text-dark);
    font-size: 24px;
    overflow-wrap: anywhere;
}

.value-positive {
    color: #16a34a !important;
    font-weight: 700;
}

.value-negative {
    color: var(--danger) !important;
    font-weight: 700;
}

.dashboard-charts {
    margin-top: 28px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.dashboard-chart-card {
    padding: 24px;

    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;

    box-shadow: var(--shadow-small);
}

.dashboard-chart-card:first-child,
.dashboard-chart-card:last-child {
    grid-column: span 2;
}

.chart-heading {
    margin-bottom: 20px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.chart-heading h2 {
    color: var(--primary-dark);
    font-size: 20px;
}

.chart-heading p {
    margin-top: 5px;

    color: var(--text-muted);
    font-size: 14px;
}

.chart-heading > span {
    font-size: 25px;
}

.chart-container {
    position: relative;
    width: 100%;
    height: 340px;
}

.chart-container-small {
    max-width: 520px;
    height: 340px;
    margin: auto;
}


/* =========================================================
   OLD CARD SUPPORT
========================================================= */

.cards {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.card {
    min-width: 0;
    padding: 25px;

    background: white;
    border: 1px solid var(--border);
    border-radius: 15px;

    box-shadow: var(--shadow-small);
}

.card h2 {
    color: var(--text-dark);
}


/* =========================================================
   TABLES
========================================================= */

.table-card,
.watchlist-table-card {
    width: 100%;

    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;

    box-shadow: var(--shadow-small);

    overflow: hidden;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    min-width: 700px;

    border-collapse: collapse;
    background: white;
}

.data-table thead {
    background: var(--primary-dark);
    color: white;
}

.data-table th {
    padding: 15px 18px;

    text-align: left;
    white-space: nowrap;

    font-size: 13px;
    font-weight: 700;
}

.data-table td {
    padding: 16px 18px;

    color: var(--text-normal);
    border-bottom: 1px solid #edf2f7;

    font-size: 14px;
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background: #f8fafc;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table td .btn {
    margin: 3px;
    padding: 8px 12px;
    min-height: 36px;
}


/* =========================================================
   GOALS
========================================================= */

.create-goal-card {
    max-width: 850px;
    margin: 0 0 30px;
}

.goal-card {
    width: 100%;
    padding: 26px;

    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;

    box-shadow: var(--shadow-small);
}

.goal-card-heading,
.goal-header {
    margin-bottom: 22px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.goal-card-heading h2 {
    color: var(--primary-dark);
    font-size: 22px;
}

.goal-card-heading p {
    margin-top: 5px;

    color: var(--text-muted);
    font-size: 14px;
}

.goal-heading-icon {
    width: 44px;
    height: 44px;

    background: #dcfce7;
    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
}

.create-goal-form {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        auto;
    align-items: end;
    gap: 16px;
}

.create-goal-form .form-group {
    margin-bottom: 0;
}

.create-goal-form .btn {
    margin-bottom: 0;
}

.goals-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
}

.goal-title {
    color: var(--primary-dark);
    font-size: 22px;
    font-weight: 800;
}

.goal-header small {
    margin-top: 6px;

    display: block;

    color: var(--text-muted);
}

.goal-percentage {
    color: #16a34a;
    font-size: 23px;
    font-weight: 800;
}

.goal-statistics {
    margin-top: 15px;
}

.goal-stat {
    padding: 12px 0;

    border-bottom: 1px solid #edf2f7;

    display: flex;
    justify-content: space-between;
    gap: 15px;

    color: var(--text-normal);
}

.progress-details {
    margin-top: 22px;
    margin-bottom: 8px;

    display: flex;
    justify-content: space-between;

    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.progress-box {
    width: 100%;
    height: 13px;

    background: #e5e7eb;
    border-radius: 20px;

    overflow: hidden;
}

.progress-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #22c55e,
            #16a34a
        );

    border-radius: inherit;

    transition: width 0.5s ease;
}

.goal-saving-form {
    margin-top: 22px;

    display: flex;
    align-items: end;
    gap: 12px;
}

.goal-saving-form .form-group {
    flex: 1;
    margin-bottom: 0;
}

.goal-completed-message {
    margin-top: 20px;
    padding: 13px 15px;

    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 10px;

    text-align: center;
    font-weight: 800;
}

.goal-actions {
    margin-top: 22px;

    display: flex;
    justify-content: flex-end;
    gap: 10px;
}


/* =========================================================
   WATCHLIST
========================================================= */

.watchlist-grid {
    display: grid;
    grid-template-columns:
        minmax(280px, 380px)
        minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}

.watchlist-form-card,
.watchlist-table-card {
    padding: 25px;

    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;

    box-shadow: var(--shadow-small);
}

.watchlist-form-card h2,
.watchlist-table-card h2 {
    margin-bottom: 22px;

    color: var(--primary-dark);
    font-size: 21px;
}

.watchlist-table-card {
    overflow: hidden;
}

.watchlist-table-card > h2 {
    padding: 0;
}


/* =========================================================
   DIVIDEND SUMMARY
========================================================= */

.summary-card {
    max-width: 450px;
    padding: 25px;

    background:
        linear-gradient(
            135deg,
            #0b1f3a,
            #173b6c
        );

    color: white;
    border-radius: 16px;

    box-shadow: var(--shadow-medium);
}

.summary-card h3 {
    margin-bottom: 8px;

    color: #cbd5e1;
    font-size: 15px;
}

.summary-card h1 {
    color: #4ade80;
    font-size: 31px;
}


/* =========================================================
   EMPTY STATES
========================================================= */

.empty-state,
.empty-state-card {
    width: 100%;
    padding: 50px 25px;

    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;

    text-align: center;

    box-shadow: var(--shadow-small);
}

.empty-state-icon {
    width: 68px;
    height: 68px;

    margin: 0 auto 18px;

    background: #f1f5f9;
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 31px;
}

.empty-state h2,
.empty-state-card h2 {
    margin-bottom: 8px;

    color: var(--primary-dark);
}

.empty-state p,
.empty-state-card p {
    max-width: 480px;
    margin: 0 auto 22px;

    color: var(--text-muted);
}


/* =========================================================
   FLASH MESSAGES
========================================================= */

.flash-messages {
    margin-bottom: 25px;
}

.alert {
    width: 100%;
    margin-bottom: 12px;
    padding: 14px 16px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;
}

.alert.success,
.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert.danger,
.danger,
.alert.error,
.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert.warning,
.warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert.info,
.info {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}


/* =========================================================
   AUTOCOMPLETE
========================================================= */

#suggestions {
    width: 100%;
    max-height: 220px;

    margin-top: 5px;

    position: absolute;
    z-index: 2000;

    background: white;
    border: 1px solid var(--border);
    border-radius: 9px;

    text-align: left;
    overflow-y: auto;

    box-shadow: var(--shadow-medium);
}

#suggestions div {
    padding: 11px 13px;
    border-bottom: 1px solid #edf2f7;
    cursor: pointer;
}

#suggestions div:hover {
    background: #f1f5f9;
}


/* =========================================================
   AUTHENTICATION PAGES
========================================================= */

.auth-body {
    min-height: 100vh;
    margin: 0;
    padding: 30px 20px;

    background:
        linear-gradient(
            135deg,
            #020617,
            #0f172a,
            #1e293b
        );

    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: min(100%, 450px);
    padding: 45px;

    background: #111827;
    border-radius: 25px;

    text-align: center;

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.55);
}

.auth-logo {
    width: 82px;
    height: 82px;

    margin: 0 auto 22px;

    background: var(--blue);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 36px;
}

.auth-card h1 {
    margin-bottom: 6px;
    color: white;
}

.subtitle {
    margin-bottom: 30px;
    color: #94a3b8;
}

.auth-card form {
    width: 100%;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.auth-card label {
    margin-top: 18px;
    margin-bottom: 8px;

    display: block;

    color: white;
    text-align: left;
}

.auth-card input {
    width: 100%;
    padding: 14px;

    background: #1e293b;
    color: white;

    border: 1px solid #334155;
    border-radius: 12px;
}

.auth-card input:focus {
    border-color: #3b82f6;
    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.15);
}

.password-box {
    position: relative;
}

.password-box span {
    position: absolute;
    top: 50%;
    right: 16px;

    transform: translateY(-50%);

    cursor: pointer;
}

.auth-btn {
    width: 100%;
    margin-top: 28px;
    padding: 14px;

    background: var(--blue);
    color: white;

    border: none;
    border-radius: 12px;

    font-size: 16px;
    font-weight: 700;
}

.auth-btn:hover {
    background: var(--blue-dark);
}

.small-link {
    margin-top: 22px;
    color: #94a3b8;
}

.small-link a {
    color: #60a5fa;
}


/* =========================================================
   MOBILE SIDEBAR OVERLAY
========================================================= */

.sidebar-overlay {
    display: none;

    position: fixed;
    inset: 0;
    z-index: 900;

    background: rgba(15, 23, 42, 0.55);
}

.sidebar-overlay.active {
    display: block;
}


/* =========================================================
   RESPONSIVE DESIGN
========================================================= */

@media (max-width: 1100px) {

    .dashboard-charts {
        grid-template-columns: 1fr;
    }

    .dashboard-chart-card:first-child,
    .dashboard-chart-card:last-child {
        grid-column: auto;
    }

    .watchlist-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 850px) {

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .main-content {
        width: 100%;
        margin-left: 0;
    }

    .navbar {
        padding: 15px 20px;
    }

    .hero,
    .dashboard-page,
    .goals-page,
    .contributions-page,
    .watchlist-page,
    .dividends-page {
        padding: 25px 18px;
    }

    .page-heading,
    .dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .create-goal-form {
        grid-template-columns: 1fr;
    }

    .goal-saving-form {
        align-items: stretch;
        flex-direction: column;
    }

    .goal-actions {
        justify-content: stretch;
    }

    .goal-actions .btn {
        width: 100%;
    }

}


@media (max-width: 600px) {

    .navbar {
        min-height: 64px;
        font-size: 13px;
    }

    .logo {
        font-size: 18px;
    }

    .dashboard-cards {
        grid-template-columns: 1fr;
    }

    .goals-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-card {
        padding: 20px;
    }

    .dashboard-chart-card {
        padding: 18px;
    }

    .chart-container,
    .chart-container-small {
        height: 280px;
    }

    .goal-card {
        padding: 20px;
    }

    .goal-header {
        flex-direction: column;
    }

    .summary-card {
        max-width: 100%;
    }

    .auth-card {
        padding: 32px 22px;
    }

    .btn {
        width: 100%;
    }

    .page-heading .btn {
        width: 100%;
    }

}

/* Collapsed desktop sidebar */

.sidebar.collapsed {
    width: 80px;
}

.sidebar.collapsed .sidebar-logo {
    font-size: 18px;
}

.sidebar.collapsed .sidebar-text {
    display: none;
}

.sidebar.collapsed a {
    justify-content: center;
}

.main-content.sidebar-collapsed {
    margin-left: 80px;
    width: calc(100% - 80px);
}

/* Navbar */

.navbar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.menu-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
}

.menu-btn:hover {
    color: #1db954;
}

.page-content {
    padding: 30px;
}

.investments-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.investment-table th,
.investment-table td {
    white-space: nowrap;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-small {
    min-height: 36px;
    width: auto;
    margin: 0;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 8px;
}

@media (max-width: 850px) {

    .investments-page {
        padding: 25px 18px;
    }

}

.contribution-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.contribution-summary-card {
    padding: 24px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-small);
}

.contribution-summary-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}

.contribution-summary-card strong {
    display: block;
    color: var(--primary-dark);
    font-size: 26px;
}

.withdrawal-form-card {
    margin-bottom: 30px;
    padding: 25px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-small);
}

.withdrawal-form-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.withdrawal-form-heading h2 {
    color: var(--primary-dark);
    font-size: 21px;
}

.withdrawal-form-heading p {
    margin-top: 5px;
    color: var(--text-muted);
}

.withdrawal-form-heading > span {
    font-size: 28px;
}

.withdrawal-form-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        auto;
    align-items: end;
    gap: 16px;
}

.withdrawal-form-grid .form-group {
    margin-bottom: 0;
}

.withdrawal-submit-btn {
    width: auto;
    min-width: 120px;
    margin: 0;
}

.withdrawal-submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.withdrawal-warning {
    margin-top: 15px;
    padding: 12px 14px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 9px;
    font-size: 14px;
}

.history-section {
    margin-top: 30px;
}

.history-section-heading {
    margin-bottom: 15px;
}

.history-section-heading h2 {
    color: var(--primary-dark);
    font-size: 22px;
}

@media (max-width: 900px) {

    .contribution-summary-grid {
        grid-template-columns: 1fr;
    }

    .withdrawal-form-grid {
        grid-template-columns: 1fr;
    }

    .withdrawal-submit-btn {
        width: 100%;
    }

}


/* =========================================================
   DYNAMIC ADD INVESTMENT / BOND FORM
========================================================= */

.investment-dynamic-form {
    width: min(100%, 720px);
    padding: 36px;
    text-align: left;
}

.investment-dynamic-form .form-heading {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.investment-form-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.investment-dynamic-form .form-heading h1 {
    color: var(--primary-dark);
    font-size: clamp(28px, 4vw, 38px);
}

.investment-dynamic-form .form-heading p {
    margin-top: 8px;
    color: var(--text-muted);
}

.selected-investment-type {
    margin-top: 14px;
    padding: 8px 13px;
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
}

.selected-investment-type strong {
    color: var(--accent-dark);
}

.bond-fields[hidden],
#regularInvestmentFields[hidden] {
    display: none !important;
}

.bond-fields {
    margin-top: 6px;
    padding: 24px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 15px;
}

.bond-selection-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.fetch-bond-rate-btn {
    width: 100%;
    min-height: 48px;
    margin-bottom: 18px;
    justify-content: space-between;
    padding: 12px 18px;
}

.fetch-bond-rate-btn:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.bond-rate-result {
    margin-bottom: 18px;
    padding: 20px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 13px;
}

.bond-rate-result[hidden],
.bond-rate-message[hidden] {
    display: none !important;
}

.bond-rate-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bond-rate-heading > span {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    background: white;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.bond-rate-heading small {
    display: block;
    color: #166534;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bond-rate-heading strong {
    display: block;
    margin-top: 2px;
    color: #15803d;
    font-size: 28px;
    line-height: 1.1;
}

.bond-rate-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bond-rate-details > div {
    min-width: 0;
    padding: 13px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(187, 247, 208, 0.9);
    border-radius: 10px;
}

.bond-rate-details span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.bond-rate-details strong {
    display: block;
    color: var(--text-dark);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.bond-rate-message {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
}

.bond-rate-message.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.bond-rate-message.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.bond-amount-group {
    margin-top: 4px;
}

.currency-input {
    position: relative;
}

.currency-input > span {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-weight: 800;
}

.currency-input input {
    padding-left: 35px;
}

.bond-information-note {
    margin-top: 4px;
    padding: 13px 14px;
    background: #eff6ff;
    color: #1e3a8a;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    text-align: left;
}

.bond-information-note span {
    flex: 0 0 auto;
}

.bond-information-note p {
    margin: 0;
    color: inherit;
    font-size: inherit;
}

.investment-submit-area {
    margin-top: 28px;
}

.investment-submit-area .btn {
    width: 100%;
    min-height: 50px;
    font-size: 15px;
}

@media (max-width: 700px) {

    .investment-dynamic-form {
        padding: 24px 18px;
    }

    .bond-fields {
        padding: 18px;
    }

    .bond-selection-grid,
    .bond-rate-details {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   PROFESSIONAL TOP NAVBAR + GROUPED SIDEBAR
========================================================= */

:root {
    --sidebar-width: 264px;
    --topbar-height: 72px;
}

/* Top navbar */

.navbar {
    min-height: var(--topbar-height);
    padding: 0 26px;
    background: linear-gradient(90deg, #071a36, #08254b);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}

.navbar-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.navbar-brand-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.navbar-brand-text {
    color: white;
    font-size: 19px;
    font-weight: 800;
    white-space: nowrap;
}

.menu-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 0;
    background: transparent;
    color: white;
    border: none;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.menu-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #4ade80;
}

.navbar-user {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-user-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    background: white;
    color: var(--primary-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
}

.navbar-user-details {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.navbar-user-details span,
.navbar-user-details strong {
    white-space: nowrap;
}

.navbar-user-details strong {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.navbar-user-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    color: white;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.navbar-user-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

.navbar-user-menu {
    width: 210px;
    padding: 8px;
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 1500;
    background: white;
    border: 1px solid var(--border);
    border-radius: 13px;
    box-shadow: var(--shadow-large);
    display: none;
}

.navbar-user-menu.active {
    display: block;
}

.navbar-user-menu a {
    min-height: 42px;
    padding: 10px 12px;
    color: var(--text-normal);
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
}

.navbar-user-menu a:hover {
    background: #f1f5f9;
    color: var(--primary-dark);
}

.page-heading-bar {
    padding: 18px 30px;
    background: white;
    border-bottom: 1px solid var(--border);
}

.page-heading-bar h1 {
    color: var(--primary-dark);
    font-size: 22px;
    font-weight: 800;
}

/* Sidebar */

.sidebar {
    padding: 0;
    background: #ffffff;
    color: var(--text-dark);
    border-right: 1px solid var(--border);
    box-shadow: 5px 0 20px rgba(15, 23, 42, 0.05);
}

.sidebar-main {
    width: 100%;
    padding: 18px 10px 12px;
}

.sidebar-brand {
    min-height: 54px;
    margin-bottom: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-brand-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    background: #eff6ff;
    color: var(--primary-dark);
    border: 1px solid #dbeafe;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.sidebar-brand-text {
    color: var(--primary-dark);
    font-size: 17px;
    font-weight: 900;
    white-space: nowrap;
}

.sidebar-menu {
    width: 100%;
}

.sidebar a,
.sidebar-group-toggle {
    width: 100%;
    min-height: 44px;
    margin: 2px 0;
    padding: 10px 12px;
    background: transparent;
    color: #334155;
    border: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.sidebar a:hover,
.sidebar-group-toggle:hover {
    background: #f1f5f9;
    color: var(--primary-dark);
    transform: none;
}

.sidebar a.active,
.sidebar-group.open > .sidebar-group-toggle {
    background: #eaf2ff;
    color: #0b4a8f;
    box-shadow: none;
}

.sidebar-link.active {
    background: var(--primary-dark) !important;
    color: white !important;
}

.sidebar-icon {
    width: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.sidebar-group {
    width: 100%;
}

.sidebar-group-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.sidebar-group-toggle {
    justify-content: space-between;
    cursor: pointer;
}

.sidebar-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.sidebar-group.open .sidebar-chevron {
    transform: rotate(180deg);
}

.sidebar-submenu {
    max-height: 0;
    margin-left: 22px;
    padding-left: 14px;
    border-left: 1px solid #cbd5e1;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.sidebar-group.open .sidebar-submenu {
    max-height: 320px;
}

.sidebar-submenu a {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
}

.sidebar-submenu a.active {
    background: transparent;
    color: var(--accent-dark);
    font-weight: 800;
}

.sidebar-submenu-dot {
    color: var(--accent);
    font-size: 8px;
}

.sidebar-security-card {
    margin: auto 12px 18px;
    padding: 14px;
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.sidebar-security-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    background: #16a34a;
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-security-content strong {
    display: block;
    font-size: 13px;
}

.sidebar-security-content p {
    margin-top: 3px;
    color: #4b7a5c;
    font-size: 11px;
}

/* Collapsed sidebar */

.sidebar.collapsed {
    width: 80px;
}

.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .sidebar-text,
.sidebar.collapsed .sidebar-chevron,
.sidebar.collapsed .sidebar-security-card {
    display: none;
}

.sidebar.collapsed .sidebar-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.sidebar.collapsed a,
.sidebar.collapsed .sidebar-group-toggle {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.sidebar.collapsed .sidebar-group-left {
    justify-content: center;
}

.sidebar.collapsed .sidebar-submenu {
    display: none;
}

.main-content.sidebar-collapsed {
    margin-left: 80px;
    width: calc(100% - 80px);
}

/* Mobile */

@media (max-width: 850px) {

    .navbar {
        padding: 0 16px;
    }

    .navbar-brand-text {
        font-size: 16px;
    }

    .navbar-user-details {
        display: none;
    }

    .page-heading-bar {
        padding: 15px 18px;
    }

    .page-heading-bar h1 {
        font-size: 19px;
    }

    .sidebar {
        width: 280px;
    }

    .sidebar.collapsed {
        width: 280px;
    }

    .sidebar.collapsed .sidebar-brand-text,
    .sidebar.collapsed .sidebar-text,
    .sidebar.collapsed .sidebar-chevron,
    .sidebar.collapsed .sidebar-security-card {
        display: initial;
    }

    .sidebar.collapsed .sidebar-brand,
    .sidebar.collapsed a,
    .sidebar.collapsed .sidebar-group-toggle,
    .sidebar.collapsed .sidebar-group-left {
        justify-content: initial;
    }

    .sidebar.collapsed .sidebar-submenu {
        display: block;
    }

}

@media (max-width: 520px) {

    .navbar-brand-text {
        display: none;
    }

    .navbar {
        gap: 8px;
    }

    .navbar-user-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .navbar-user-menu {
        width: 190px;
    }

}


/* =========================================================
   COUPONS & BONDS PAGE
========================================================= */

.bonds-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 6px 6px 36px;
}

.bonds-page-heading {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.bonds-page-heading h1 {
    color: var(--primary-dark);
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.15;
}

.bonds-page-heading p {
    max-width: 720px;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 15px;
}

.bond-summary-grid {
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.bond-summary-card {
    min-width: 0;
    padding: 22px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: var(--shadow-small);
}

.bond-summary-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.bond-summary-card:nth-child(2) .bond-summary-icon {
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.bond-summary-card:nth-child(3) .bond-summary-icon {
    background: #fff7ed;
    border-color: #fed7aa;
}

.bond-summary-card small {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.bond-summary-card strong {
    display: block;
    color: var(--primary-dark);
    font-size: 24px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.bond-tabs {
    margin-bottom: 18px;
    padding: 5px;
    background: #eaf0f8;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    display: inline-flex;
    gap: 5px;
}

.bond-tab-button {
    min-height: 42px;
    padding: 9px 16px;
    background: transparent;
    color: var(--text-normal);
    border: none;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
}

.bond-tab-button span {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    background: rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.bond-tab-button:hover {
    background: rgba(255, 255, 255, 0.7);
}

.bond-tab-button.active {
    background: var(--primary-dark);
    color: white;
    box-shadow: 0 6px 14px rgba(8, 27, 56, 0.18);
}

.bond-tab-button.active span {
    background: rgba(255, 255, 255, 0.16);
}

.bond-tab-panel {
    display: none;
}

.bond-tab-panel.active {
    display: block;
}

.bond-table-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 17px;
    overflow: hidden;
    box-shadow: var(--shadow-small);
}

.bond-table-heading {
    padding: 22px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.bond-table-heading h2 {
    color: var(--primary-dark);
    font-size: 21px;
}

.bond-table-heading p {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 14px;
}

.bond-schedule-table {
    min-width: 1050px;
}

.bond-schedule-table thead {
    background: #f8fafc;
    color: var(--text-normal);
}

.bond-schedule-table th {
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bond-name-cell {
    min-width: 250px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bond-type-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    background: #eff6ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.bond-name-cell strong,
.bond-name-cell small {
    display: block;
}

.bond-name-cell strong {
    color: var(--primary-dark);
    font-size: 14px;
}

.bond-name-cell small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
}

.bond-rate-badge,
.bond-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.bond-rate-badge {
    padding: 7px 10px;
    background: #ecfdf5;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.bond-status-badge {
    padding: 7px 11px;
    background: #e2e8f0;
    color: #475569;
}

.bond-status-badge.active {
    background: #dbeafe;
    color: #1d4ed8;
}

.bond-status-badge.matured {
    background: #f1f5f9;
    color: #64748b;
}

.coupon-date {
    color: #15803d;
    font-weight: 800;
}

.bond-holdings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.bond-holding-card {
    min-width: 0;
    padding: 22px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 17px;
    box-shadow: var(--shadow-small);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.bond-holding-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.bond-holding-card-header {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.bond-card-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.bond-card-title > span {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    background: #eff6ff;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.bond-card-title h3 {
    color: var(--primary-dark);
    font-size: 16px;
    overflow-wrap: anywhere;
}

.bond-card-title small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
}

.bond-holding-amount {
    margin-bottom: 18px;
    padding: 16px;
    background: linear-gradient(135deg, #081b38, #12345f);
    color: white;
    border-radius: 13px;
}

.bond-holding-amount small {
    display: block;
    margin-bottom: 5px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
}

.bond-holding-amount strong {
    display: block;
    color: #4ade80;
    font-size: 25px;
    overflow-wrap: anywhere;
}

.bond-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bond-details-grid > div {
    min-width: 0;
    padding: 13px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.bond-details-grid span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.bond-details-grid strong {
    display: block;
    color: var(--text-dark);
    font-size: 14px;
    overflow-wrap: anywhere;
}

@media (max-width: 950px) {

    .bond-summary-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 700px) {

    .bonds-page {
        padding: 0 0 24px;
    }

    .bonds-page-heading {
        flex-direction: column;
    }

    .bonds-page-heading .btn {
        width: 100%;
    }

    .bond-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .bond-tab-button {
        flex: 0 0 auto;
    }

    .bond-details-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   DARK MODE
========================================================= */

.theme-toggle {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 0;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --primary-dark: #e6edf7;
    --primary: #d9e5f5;
    --primary-light: #b9cbe3;

    --accent: #22c55e;
    --accent-dark: #16a34a;

    --blue: #60a5fa;
    --blue-dark: #3b82f6;

    --danger: #ef4444;
    --danger-dark: #dc2626;

    --warning: #f59e0b;

    --background: #0b1220;
    --surface: #111827;

    --text-dark: #f8fafc;
    --text-normal: #d5deea;
    --text-muted: #94a3b8;

    --border: #243244;

    --shadow-small:
        0 4px 14px rgba(0, 0, 0, 0.22);

    --shadow-medium:
        0 12px 30px rgba(0, 0, 0, 0.28);

    --shadow-large:
        0 22px 55px rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .page-content {
    background: var(--background);
    color: var(--text-dark);
}

html[data-theme="dark"] .page-heading-bar {
    background: #101827;
    border-bottom-color: var(--border);
}

html[data-theme="dark"] .page-heading-bar h1,
html[data-theme="dark"] .page-heading h1,
html[data-theme="dark"] .dashboard-heading h1,
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .bonds-page-heading h1,
html[data-theme="dark"] .bond-rates-heading h1,
html[data-theme="dark"] .chart-heading h2,
html[data-theme="dark"] .goal-card-heading h2,
html[data-theme="dark"] .goal-title,
html[data-theme="dark"] .watchlist-form-card h2,
html[data-theme="dark"] .watchlist-table-card h2,
html[data-theme="dark"] .bond-table-heading h2,
html[data-theme="dark"] .bond-rate-form-heading h2,
html[data-theme="dark"] .bond-rate-list-heading h2,
html[data-theme="dark"] .empty-state h2,
html[data-theme="dark"] .empty-state-card h2 {
    color: var(--text-dark);
}

html[data-theme="dark"] .sidebar {
    background: #0f172a;
    color: var(--text-dark);
    border-right-color: var(--border);
    box-shadow: 5px 0 22px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .sidebar-brand-icon {
    background: #182235;
    color: #dbeafe;
    border-color: #2c3b50;
}

html[data-theme="dark"] .sidebar-brand-text {
    color: var(--text-dark);
}

html[data-theme="dark"] .sidebar a,
html[data-theme="dark"] .sidebar-group-toggle {
    color: #cbd5e1;
}

html[data-theme="dark"] .sidebar a:hover,
html[data-theme="dark"] .sidebar-group-toggle:hover {
    background: #182235;
    color: white;
}

html[data-theme="dark"] .sidebar a.active,
html[data-theme="dark"] .sidebar-group.open > .sidebar-group-toggle {
    background: #18304f;
    color: #93c5fd;
}

html[data-theme="dark"] .sidebar-link.active {
    background: #12345f !important;
    color: white !important;
}

html[data-theme="dark"] .sidebar-submenu {
    border-left-color: #334155;
}

html[data-theme="dark"] .sidebar-security-card {
    background: #10261a;
    color: #bbf7d0;
    border-color: #245c36;
}

html[data-theme="dark"] .sidebar-security-content p {
    color: #86b696;
}

html[data-theme="dark"] .navbar-user-menu {
    background: #111827;
    border-color: var(--border);
}

html[data-theme="dark"] .navbar-user-menu a {
    color: var(--text-normal);
}

html[data-theme="dark"] .navbar-user-menu a:hover {
    background: #1b2637;
    color: white;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: #111827;
    color: var(--text-dark);
    border-color: #334155;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #718096;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16);
}

html[data-theme="dark"] .main-form,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .dashboard-chart-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .watchlist-table-card,
html[data-theme="dark"] .watchlist-form-card,
html[data-theme="dark"] .goal-card,
html[data-theme="dark"] .contribution-summary-card,
html[data-theme="dark"] .withdrawal-form-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .empty-state-card,
html[data-theme="dark"] .bond-summary-card,
html[data-theme="dark"] .bond-table-card,
html[data-theme="dark"] .bond-holding-card,
html[data-theme="dark"] .bond-rate-form-card,
html[data-theme="dark"] .bond-rate-list-card {
    background: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] .dashboard-card h2,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .contribution-summary-card strong,
html[data-theme="dark"] .bond-summary-card strong,
html[data-theme="dark"] .bond-name-cell strong,
html[data-theme="dark"] .bond-card-title h3,
html[data-theme="dark"] .bond-details-grid strong,
html[data-theme="dark"] .bond-rate-details strong {
    color: var(--text-dark);
}

html[data-theme="dark"] .data-table {
    background: var(--surface);
}

html[data-theme="dark"] .data-table thead {
    background: #0d1b2f;
    color: white;
}

html[data-theme="dark"] .bond-schedule-table thead {
    background: #172033;
    color: #dbeafe;
}

html[data-theme="dark"] .data-table td {
    color: var(--text-normal);
    border-bottom-color: #263244;
}

html[data-theme="dark"] .data-table tbody tr:hover {
    background: #172033;
}

html[data-theme="dark"] .bond-fields,
html[data-theme="dark"] .bond-details-grid > div,
html[data-theme="dark"] .empty-state-icon,
html[data-theme="dark"] .dashboard-card-icon,
html[data-theme="dark"] .bond-summary-icon,
html[data-theme="dark"] .bond-type-icon,
html[data-theme="dark"] .bond-card-title > span {
    background: #172033;
    border-color: #2a394d;
}

html[data-theme="dark"] .bond-rate-result {
    background: #10261a;
    border-color: #245c36;
}

html[data-theme="dark"] .bond-rate-details > div {
    background: rgba(17, 24, 39, 0.72);
    border-color: #2b5a3b;
}

html[data-theme="dark"] .bond-information-note {
    background: #10233f;
    color: #bfdbfe;
    border-color: #264d7d;
}

html[data-theme="dark"] .selected-investment-type {
    background: #10261a;
    color: #bbf7d0;
    border-color: #245c36;
}

html[data-theme="dark"] .bond-tabs {
    background: #172033;
    border-color: #2a394d;
}

html[data-theme="dark"] .bond-tab-button {
    color: #cbd5e1;
}

html[data-theme="dark"] .bond-tab-button:hover {
    background: #223047;
}

html[data-theme="dark"] .bond-tab-button.active {
    background: #12345f;
    color: white;
}

html[data-theme="dark"] .progress-box {
    background: #273449;
}

html[data-theme="dark"] #suggestions {
    background: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] #suggestions div {
    border-bottom-color: #263244;
}

html[data-theme="dark"] #suggestions div:hover {
    background: #172033;
}

html[data-theme="dark"] .btn {
    background: #263244;
    color: white;
}

html[data-theme="dark"] .btn:hover {
    background: #334155;
}

html[data-theme="dark"] .btn-primary {
    background: var(--accent);
    color: white;
}

html[data-theme="dark"] .btn-primary:hover {
    background: var(--accent-dark);
}

html[data-theme="dark"] .btn-secondary {
    background: #1d4f86;
    color: white;
}

html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .bond-holding-amount {
    background: linear-gradient(135deg, #071425, #12345f);
}

html[data-theme="dark"] .alert.success,
html[data-theme="dark"] .success {
    background: #10261a;
    color: #bbf7d0;
    border-color: #245c36;
}

html[data-theme="dark"] .alert.danger,
html[data-theme="dark"] .danger,
html[data-theme="dark"] .alert.error,
html[data-theme="dark"] .error {
    background: #351518;
    color: #fecaca;
    border-color: #7f1d1d;
}

html[data-theme="dark"] .alert.warning,
html[data-theme="dark"] .warning {
    background: #35260c;
    color: #fde68a;
    border-color: #854d0e;
}

html[data-theme="dark"] .alert.info,
html[data-theme="dark"] .info {
    background: #10233f;
    color: #bfdbfe;
    border-color: #264d7d;
}

@media (max-width: 520px) {
    .theme-toggle {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}

/* =========================================================
   MODERN PORTFOLIO LAYOUT OVERRIDES
========================================================= */

:root {
    --sidebar-width: 228px;
    --topbar-height: 62px;
    --portfolio-surface: #0d1b2f;
    --portfolio-surface-soft: #12223a;
    --portfolio-border: rgba(148, 163, 184, 0.16);
}

.sidebar {
    width: var(--sidebar-width);
    padding: 0;
    background: #071426;
    color: #dbe4f0;
    border-right: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: none;
}

.sidebar-main {
    width: 100%;
    min-height: 0;
    padding: 14px 10px 16px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-brand {
    min-height: 48px;
    margin-bottom: 14px;
    padding: 6px 10px;
    gap: 10px;
}

.sidebar-brand-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9px;
    font-size: 17px;
}

.sidebar-brand-text {
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sidebar a,
.sidebar-group-toggle {
    min-height: 42px;
    margin: 0;
    padding: 9px 11px;
    color: #c7d2e1;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
}

.sidebar a:hover,
.sidebar-group-toggle:hover {
    background: rgba(37, 99, 235, 0.11);
    color: #ffffff;
}

.sidebar-link.active,
.sidebar-group-toggle.active,
.sidebar-group.open > .sidebar-group-toggle {
    background: #17375e !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 #22c55e;
}

.sidebar-icon {
    width: 20px;
    flex: 0 0 20px;
    color: #cbd5e1;
    font-size: 16px;
}

.sidebar-chevron {
    color: #94a3b8;
    transform: rotate(0deg);
}

.sidebar-group.open .sidebar-chevron {
    transform: rotate(90deg);
}

.sidebar-submenu {
    margin-left: 20px;
    padding-left: 12px;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
}

.sidebar-group.open .sidebar-submenu {
    max-height: 330px;
}

.sidebar-submenu a {
    min-height: 37px;
    padding: 8px 10px;
    color: #b8c4d4;
    font-size: 13px;
}

.sidebar-submenu a:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}

.sidebar-submenu a.active {
    background: rgba(37, 99, 235, 0.16);
    color: #ffffff;
    box-shadow: inset 2px 0 0 #22c55e;
}

.sidebar-footer {
    margin-top: auto;
    padding: 14px 10px 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.sidebar-logout {
    width: 100%;
    min-height: 48px;
    margin: 0 !important;
    padding: 11px 13px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: #e5edf7 !important;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px !important;
    justify-content: flex-start !important;
}

.sidebar-logout:hover {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #ffffff !important;
    border-color: rgba(239, 68, 68, 0.28);
}

.sidebar-logout-icon {
    width: 20px;
    flex: 0 0 20px;
    font-size: 18px;
}

.main-content {
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
}

.navbar {
    min-height: var(--topbar-height);
    padding: 0 24px;
    background: #071426;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: none;
}

.navbar-left {
    gap: 10px;
}

.menu-btn {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    font-size: 23px;
}

.navbar-user {
    gap: 9px;
}

.theme-toggle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    border-radius: 10px;
}

.navbar-user-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

.page-heading-bar {
    display: none;
}

.page-content {
    padding: 28px 30px 36px;
}

.investments-page {
    max-width: 1500px;
    padding: 0;
}

.investments-page .page-heading {
    margin-bottom: 24px;
}

.investments-page .page-heading h1 {
    font-size: clamp(30px, 4vw, 42px);
}

.portfolio-summary-bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 22px;
    padding: 18px 20px;
    background: var(--portfolio-surface);
    border: 1px solid var(--portfolio-border);
    border-radius: 16px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.16);
}

.portfolio-summary-item {
    min-width: 0;
    padding: 7px 22px;
    border-right: 1px solid var(--portfolio-border);
}

.portfolio-summary-item:first-child {
    padding-left: 6px;
}

.portfolio-summary-item:last-child {
    padding-right: 6px;
    border-right: none;
}

.portfolio-summary-item small {
    display: block;
    margin-bottom: 7px;
    color: #c7d2e1;
    font-size: 13px;
    font-weight: 600;
}

.portfolio-summary-item strong {
    display: block;
    color: #ffffff;
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.portfolio-summary-item .value-positive {
    color: #22c55e !important;
}

.portfolio-summary-item .value-negative {
    color: #ef4444 !important;
}

.investments-page .table-card {
    background: var(--portfolio-surface);
    border: 1px solid var(--portfolio-border);
    border-radius: 16px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.14);
}

.investments-page .data-table {
    background: transparent;
}

.investments-page .data-table thead {
    background: rgba(7, 20, 38, 0.58);
}

.investments-page .data-table th {
    padding: 16px 14px;
    color: #e5edf7;
    border-bottom: 1px solid var(--portfolio-border);
    font-size: 13px;
}

.investments-page .data-table td {
    padding: 22px 14px;
    color: #e2e8f0;
    border-bottom: 1px solid var(--portfolio-border);
}

.investments-page .data-table tbody tr:hover {
    background: rgba(37, 99, 235, 0.045);
}

.investment-name {
    color: #ffffff !important;
}

.investment-meta {
    color: #a7b4c5 !important;
}

.investment-type-pill {
    padding: 6px 10px !important;
    border-radius: 6px !important;
    background: rgba(37, 99, 235, 0.85) !important;
    color: #ffffff !important;
    font-size: 12px !important;
}

.investment-type-pill.type-etf {
    background: rgba(22, 163, 74, 0.88) !important;
}

.investment-type-pill.type-equity-fund {
    background: rgba(124, 58, 237, 0.86) !important;
}

.investments-page .table-actions {
    flex-wrap: nowrap;
    gap: 8px;
}

.investments-page .btn-small {
    min-width: 58px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 7px;
}

.investment-table-footer {
    padding: 15px 18px;
    color: #aeb9c8;
    border-top: 1px solid var(--portfolio-border);
    text-align: center;
    font-size: 13px;
}

[data-theme="light"] .sidebar,
[data-theme="light"] .navbar {
    background: #ffffff;
}

[data-theme="light"] .sidebar {
    color: #334155;
    border-right-color: #e2e8f0;
}

[data-theme="light"] .sidebar-brand-text,
[data-theme="light"] .sidebar a:hover,
[data-theme="light"] .sidebar-group-toggle:hover {
    color: #0f172a;
}

[data-theme="light"] .sidebar a,
[data-theme="light"] .sidebar-group-toggle {
    color: #475569;
}

[data-theme="light"] .sidebar-link.active,
[data-theme="light"] .sidebar-group-toggle.active,
[data-theme="light"] .sidebar-group.open > .sidebar-group-toggle {
    background: #e8f1ff !important;
    color: #0b4a8f !important;
}

[data-theme="light"] .navbar {
    color: #0f172a;
    border-bottom-color: #e2e8f0;
}

[data-theme="light"] .menu-btn {
    color: #0f172a;
}

[data-theme="light"] .portfolio-summary-bar,
[data-theme="light"] .investments-page .table-card {
    background: #ffffff;
    border-color: #e2e8f0;
}

[data-theme="light"] .portfolio-summary-item {
    border-right-color: #e2e8f0;
}

[data-theme="light"] .portfolio-summary-item small,
[data-theme="light"] .investment-meta,
[data-theme="light"] .investment-table-footer {
    color: #64748b !important;
}

[data-theme="light"] .portfolio-summary-item strong,
[data-theme="light"] .investment-name {
    color: #0f172a !important;
}

[data-theme="light"] .investments-page .data-table thead {
    background: #f8fafc;
}

[data-theme="light"] .investments-page .data-table th,
[data-theme="light"] .investments-page .data-table td {
    color: #334155;
    border-bottom-color: #e2e8f0;
}

[data-theme="light"] .investments-page .data-table tbody tr:hover {
    background: #f8fafc;
}

.sidebar.collapsed {
    width: 76px;
}

.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .sidebar-text,
.sidebar.collapsed .sidebar-chevron {
    display: none;
}

.sidebar.collapsed .sidebar-brand,
.sidebar.collapsed .sidebar-link,
.sidebar.collapsed .sidebar-group-toggle,
.sidebar.collapsed .sidebar-group-left,
.sidebar.collapsed .sidebar-logout {
    justify-content: center !important;
}

.sidebar.collapsed .sidebar-submenu {
    display: none;
}

.sidebar.collapsed .sidebar-footer {
    padding-left: 10px;
    padding-right: 10px;
}

.main-content.sidebar-collapsed {
    width: calc(100% - 76px);
    margin-left: 76px;
}

@media (max-width: 1100px) {
    .portfolio-summary-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .portfolio-summary-item {
        border-right: none;
        border-bottom: 1px solid var(--portfolio-border);
    }

    .portfolio-summary-item:nth-last-child(-n + 2) {
        border-bottom: none;
    }
}

@media (max-width: 850px) {
    .sidebar,
    .sidebar.collapsed {
        width: 280px;
    }

    .sidebar.collapsed .sidebar-brand-text,
    .sidebar.collapsed .sidebar-text,
    .sidebar.collapsed .sidebar-chevron {
        display: initial;
    }

    .sidebar.collapsed .sidebar-brand,
    .sidebar.collapsed .sidebar-link,
    .sidebar.collapsed .sidebar-group-toggle,
    .sidebar.collapsed .sidebar-group-left,
    .sidebar.collapsed .sidebar-logout {
        justify-content: initial !important;
    }

    .sidebar.collapsed .sidebar-submenu {
        display: block;
    }

    .page-content {
        padding: 22px 18px 30px;
    }

    .portfolio-summary-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio-summary-item {
        padding: 14px;
    }
}

@media (max-width: 560px) {
    .portfolio-summary-bar {
        grid-template-columns: 1fr;
        padding: 8px 16px;
    }

    .portfolio-summary-item,
    .portfolio-summary-item:first-child,
    .portfolio-summary-item:last-child {
        padding: 14px 4px;
        border-right: none;
        border-bottom: 1px solid var(--portfolio-border);
    }

    .portfolio-summary-item:last-child {
        border-bottom: none;
    }
}

/* =========================================================
   INVESTMENT PORTFOLIO LIGHT MODE FIX
========================================================= */

[data-theme="light"] .investments-page .page-heading h1 {
    color: #0f172a !important;
}

[data-theme="light"] .investments-page .page-heading p {
    color: #64748b !important;
}

[data-theme="light"] .portfolio-summary-bar {
    background: #ffffff !important;
    border-color: #dbe3ee !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .portfolio-summary-item {
    border-right-color: #e2e8f0 !important;
}

[data-theme="light"] .portfolio-summary-item small {
    color: #64748b !important;
}

[data-theme="light"] .portfolio-summary-item strong {
    color: #0f172a !important;
}

[data-theme="light"] .portfolio-summary-item strong.value-positive {
    color: #16a34a !important;
}

[data-theme="light"] .portfolio-summary-item strong.value-negative {
    color: #dc2626 !important;
}

[data-theme="light"] .investments-page .table-card {
    background: #ffffff !important;
    border-color: #dbe3ee !important;
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.09);
}

[data-theme="light"] .investments-page .data-table {
    background: #ffffff !important;
}

[data-theme="light"] .investments-page .data-table thead {
    background: #f8fafc !important;
}

[data-theme="light"] .investments-page .data-table th {
    color: #334155 !important;
    border-bottom-color: #dbe3ee !important;
}

[data-theme="light"] .investments-page .data-table td {
    color: #334155 !important;
    border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .investments-page .data-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

[data-theme="light"] .investments-page .data-table tbody tr:hover {
    background: #eef4fb !important;
}

[data-theme="light"] .investment-name {
    color: #0f172a !important;
}

[data-theme="light"] .investment-meta {
    color: #64748b !important;
}

[data-theme="light"] .investment-table-footer {
    color: #64748b !important;
    background: #f8fafc;
    border-top-color: #dbe3ee !important;
}

/* =========================================================
   LIGHT MODE LOGOUT + ACCOUNT DROPDOWN FIX
========================================================= */

[data-theme="light"] .sidebar-footer {
    background: #ffffff;
    border-top-color: #e2e8f0;
}

[data-theme="light"] .sidebar-logout {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #dbe3ee !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .sidebar-logout:hover {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border-color: #fecaca !important;
}

[data-theme="light"] .sidebar-logout-icon {
    color: #475569;
}

[data-theme="light"] .sidebar-logout:hover .sidebar-logout-icon {
    color: #b91c1c;
}

[data-theme="light"] .navbar-user-menu {
    background: #ffffff !important;
    border: 1px solid #dbe3ee !important;
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.16) !important;
}

[data-theme="light"] .navbar-user-menu a {
    color: #334155 !important;
    background: transparent !important;
}

[data-theme="light"] .navbar-user-menu a:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

[data-theme="light"] .navbar-user-menu a:last-child {
    color: #dc2626 !important;
}

[data-theme="light"] .navbar-user-menu a:last-child:hover {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

[data-theme="light"] .navbar-user-toggle {
    color: #334155 !important;
}

[data-theme="light"] .navbar-user-toggle:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

[data-theme="light"] .navbar-user-avatar {
    background: #eaf2ff !important;
    color: #0b4a8f !important;
    border: 1px solid #cfe0f6;
}

[data-theme="light"] .navbar-user-details,
[data-theme="light"] .navbar-user-details span,
[data-theme="light"] .navbar-user-details strong {
    color: #0f172a !important;
}

/* =========================================================
   SIDEBAR BRAND LOGO
========================================================= */

.sidebar-brand {
    min-height: 56px;
    padding: 6px 8px;
    justify-content: flex-start;
}

.sidebar-brand-logo {
    display: block;
    width: 184px;
    max-width: 100%;
    height: 46px;
    object-fit: contain;
    object-position: left center;
}

.sidebar.collapsed .sidebar-brand {
    justify-content: center !important;
    padding-left: 0;
    padding-right: 0;
}

.sidebar.collapsed .sidebar-brand-logo {
    width: 46px;
    height: 46px;
    object-fit: cover;
    object-position: left center;
}

[data-theme="light"] .sidebar-brand-logo {
    filter: none;
}

@media (max-width: 850px) {
    .sidebar.collapsed .sidebar-brand-logo {
        width: 184px;
        height: 46px;
        object-fit: contain;
        object-position: left center;
    }
}

/* =========================================================
   SALES HISTORY PAGE
========================================================= */

.sales-history-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.sales-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 24px;
    padding: 18px 20px;
    background: #0d1b2f;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.16);
}

.sales-summary-card {
    min-width: 0;
    padding: 7px 20px;
    border-right: 1px solid rgba(148, 163, 184, 0.16);
}

.sales-summary-card:last-child {
    border-right: none;
}

.sales-summary-card small {
    display: block;
    margin-bottom: 7px;
    color: #c7d2e1;
    font-size: 13px;
    font-weight: 600;
}

.sales-summary-card strong {
    display: block;
    color: #ffffff;
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.2;
}

.sales-table-card {
    background: #0d1b2f;
    border-color: rgba(148, 163, 184, 0.16);
}

.sales-history-table {
    min-width: 1180px;
    background: transparent;
}

.sales-history-table thead {
    background: rgba(7, 20, 38, 0.58);
}

.sales-history-table th {
    color: #e5edf7;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.sales-history-table td {
    color: #e2e8f0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.sales-history-table tbody tr:hover {
    background: rgba(37, 99, 235, 0.05);
}

.sales-time {
    display: block;
    margin-top: 3px;
    color: #94a3b8;
    font-size: 11px;
}

.sales-ticker {
    color: #ffffff;
}

.sales-empty-state {
    max-width: none;
}

[data-theme="light"] .sales-summary-grid,
[data-theme="light"] .sales-table-card {
    background: #ffffff;
    border-color: #dbe3ee;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .sales-summary-card {
    border-right-color: #e2e8f0;
}

[data-theme="light"] .sales-summary-card small {
    color: #64748b;
}

[data-theme="light"] .sales-summary-card strong {
    color: #0f172a;
}

[data-theme="light"] .sales-history-table {
    background: #ffffff;
}

[data-theme="light"] .sales-history-table thead {
    background: #f8fafc;
}

[data-theme="light"] .sales-history-table th,
[data-theme="light"] .sales-history-table td {
    color: #334155;
    border-bottom-color: #e2e8f0;
}

[data-theme="light"] .sales-history-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

[data-theme="light"] .sales-history-table tbody tr:hover {
    background: #eef4fb;
}

[data-theme="light"] .sales-ticker {
    color: #0f172a;
}

[data-theme="light"] .sales-time {
    color: #64748b;
}

@media (max-width: 1100px) {
    .sales-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sales-summary-card {
        border-right: none;
        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    }
}

@media (max-width: 700px) {
    .sales-summary-grid {
        grid-template-columns: 1fr;
        padding: 8px 16px;
    }

    .sales-summary-card {
        padding: 14px 4px;
        border-right: none;
        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    }

    .sales-summary-card:last-child {
        border-bottom: none;
    }
}
\n\n/* =========================================================\n   ADMIN AREA\n========================================================= */\n\n.sidebar-section-label {\n    margin: 20px 12px 8px;\n    color: #93c5fd;\n    font-size: 11px;\n    font-weight: 800;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n}\n\n.admin-page {\n    width: 100%;\n    max-width: 1500px;\n    margin: 0 auto;\n}\n\n.admin-summary-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));\n    gap: 18px;\n    margin-bottom: 28px;\n}\n\n.admin-summary-card,\n.admin-panel {\n    background: var(--surface);\n    border: 1px solid var(--border);\n    border-radius: 16px;\n    box-shadow: var(--shadow-small);\n}\n\n.admin-summary-card {\n    padding: 22px;\n}\n\n.admin-summary-card span {\n    display: block;\n    margin-bottom: 8px;\n    color: var(--text-muted);\n    font-size: 13px;\n    font-weight: 700;\n}\n\n.admin-summary-card strong {\n    color: var(--text-dark);\n    font-size: 28px;\n}\n\n.admin-panel {\n    margin-bottom: 24px;\n    padding: 24px;\n}\n\n.admin-panel-heading {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.admin-panel-heading h2 {\n    color: var(--text-dark);\n    font-size: 20px;\n}\n\n.admin-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.admin-search-form {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 12px;\n    margin-bottom: 20px;\n}\n\n.admin-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 5px 9px;\n    border-radius: 999px;\n    font-size: 12px;\n    font-weight: 800;\n}\n\n.admin-badge.active,\n.admin-badge.verified {\n    background: #dcfce7;\n    color: #166534;\n}\n\n.admin-badge.suspended,\n.admin-badge.unverified {\n    background: #fee2e2;\n    color: #991b1b;\n}\n\n.admin-badge.admin {\n    background: #dbeafe;\n    color: #1e40af;\n}\n\n.admin-form-grid {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 16px;\n}\n\n.admin-form-grid .form-group {\n    margin-bottom: 0;\n}\n\n.admin-form-wide {\n    grid-column: 1 / -1;\n}\n\n.admin-checkbox {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.admin-checkbox input {\n    width: auto;\n}\n\n.admin-forbidden {\n    max-width: 650px;\n    margin: 80px auto;\n    padding: 40px;\n    text-align: center;\n    background: var(--surface);\n    border: 1px solid var(--border);\n    border-radius: 18px;\n    box-shadow: var(--shadow-medium);\n}\n\n[data-theme="dark"] .admin-summary-card,\n[data-theme="dark"] .admin-panel,\n[data-theme="dark"] .admin-forbidden {\n    background: #111c2f;\n    border-color: #26354d;\n}\n\n[data-theme="dark"] .admin-summary-card strong,\n[data-theme="dark"] .admin-panel-heading h2 {\n    color: #f8fafc;\n}\n\n@media (max-width: 900px) {\n    .admin-form-grid {\n        grid-template-columns: 1fr 1fr;\n    }\n}\n\n@media (max-width: 650px) {\n    .admin-form-grid,\n    .admin-search-form {\n        grid-template-columns: 1fr;\n    }\n\n    .admin-panel-heading {\n        align-items: flex-start;\n        flex-direction: column;\n    }\n}\n
/* =========================================================
   ADMIN BOND REVIEW - STAGE 2
========================================================= */
.admin-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) auto auto;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
}

.admin-missing-cell {
    background: #fff7ed;
    color: #c2410c !important;
    font-weight: 700;
}

.admin-badge.incomplete,
.admin-badge.draft {
    background: #fef3c7;
    color: #92400e;
}

.admin-badge.published {
    background: #dcfce7;
    color: #166534;
}

@media (max-width: 1000px) {
    .admin-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .admin-filter-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   ADMIN BOND FETCH NOTIFICATIONS
========================================================= */

.admin-notification-summary {
    border-left: 4px solid var(--warning);
}

.admin-notification-summary strong {
    color: #b45309;
}

.admin-notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 11px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-panel-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 14px;
}


/* =========================================================
   ADMIN POLISHED LAYOUT
========================================================= */

.admin-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    gap: 24px;
}

.admin-hero,
.admin-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-small);
}

.admin-hero {
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.admin-hero h2,
.admin-panel-heading h2 {
    color: var(--text-dark);
    font-size: 24px;
    line-height: 1.2;
}

.admin-hero p,
.admin-panel-heading p {
    margin-top: 6px;
    color: var(--text-muted);
}

.admin-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.admin-metric-card {
    min-width: 0;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-small);
    display: flex;
    align-items: center;
    gap: 16px;
}

.admin-metric-card.warning {
    border-color: #fde68a;
}

.admin-metric-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 13px;
    background: #eaf8ef;
    color: var(--accent-dark);
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 900;
}

.admin-metric-card.warning .admin-metric-icon {
    background: #fef3c7;
    color: #b45309;
}

.admin-metric-card small {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.admin-metric-card strong {
    display: block;
    margin-top: 3px;
    color: var(--text-dark);
    font-size: 28px;
    line-height: 1;
}

.admin-panel {
    padding: 26px;
}

.admin-panel-heading {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.admin-two-column {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
}

.admin-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-action-grid a {
    min-height: 100px;
    padding: 18px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    font-size: 24px;
    transition: transform .2s ease, border-color .2s ease;
}

.admin-action-grid a:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}

.admin-action-grid a span {
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 800;
}

.activity-list {
    display: grid;
    gap: 5px;
}

.activity-item {
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 12px;
}

.activity-item:last-child {
    border-bottom: 0;
}

.activity-dot {
    width: 9px;
    height: 9px;
    margin-top: 6px;
    flex: 0 0 9px;
    background: var(--accent);
    border-radius: 50%;
}

.activity-item strong,
.activity-item small {
    display: block;
}

.activity-item strong {
    color: var(--text-dark);
    font-size: 14px;
}

.activity-item small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.admin-table td strong {
    color: var(--text-dark);
}

.table-subtext {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
}

.count-pill,
.type-pill,
.symbol-badge,
.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.count-pill {
    background: #e0f2fe;
    color: #075985;
}

.symbol-badge {
    background: #dbeafe;
    color: #1d4ed8;
    letter-spacing: .04em;
}

.type-pill {
    background: #eef2ff;
    color: #4338ca;
}

.status-pill.complete {
    background: #dcfce7;
    color: #166534;
}

.status-pill.incomplete {
    background: #fef3c7;
    color: #92400e;
}

.source-link {
    color: var(--blue);
    font-weight: 700;
}

.table-empty {
    padding: 24px;
    color: var(--text-muted);
    text-align: center;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.admin-form-grid.compact {
    align-items: end;
}

.admin-form-grid .form-group {
    margin-bottom: 0;
}

.admin-form-wide {
    grid-column: 1 / -1;
}

.admin-form-submit {
    display: flex;
    align-items: end;
}

.admin-form-submit .btn {
    width: 100%;
}

.admin-filter-bar {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 14px;
}

.admin-filter-bar.instrument-filter {
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, .8fr) auto;
}

.admin-filter-bar .form-group {
    margin-bottom: 0;
}

.admin-filter-actions {
    display: flex;
    gap: 8px;
}

.narrow-panel {
    width: min(100%, 760px);
    margin: 0 auto;
}

.single-column {
    grid-template-columns: 1fr;
}

[data-theme="dark"] .admin-hero,
[data-theme="dark"] .admin-panel,
[data-theme="dark"] .admin-metric-card {
    background: #111827;
    border-color: #263449;
}

[data-theme="dark"] .admin-filter-bar,
[data-theme="dark"] .admin-action-grid a {
    background: #0d1728;
    border-color: #263449;
}

[data-theme="dark"] .admin-hero h2,
[data-theme="dark"] .admin-panel-heading h2,
[data-theme="dark"] .admin-metric-card strong,
[data-theme="dark"] .admin-action-grid a span,
[data-theme="dark"] .admin-table td strong,
[data-theme="dark"] .activity-item strong {
    color: #f8fafc;
}

@media (max-width: 1050px) {
    .admin-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-two-column {
        grid-template-columns: 1fr;
    }

    .admin-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-filter-bar,
    .admin-filter-bar.instrument-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .admin-hero,
    .admin-panel-heading {
        flex-direction: column;
    }

    .admin-metric-grid,
    .admin-form-grid,
    .admin-filter-bar,
    .admin-filter-bar.instrument-filter,
    .admin-action-grid {
        grid-template-columns: 1fr;
    }

    .admin-filter-actions {
        width: 100%;
    }

    .admin-filter-actions .btn {
        flex: 1;
    }
}


/* =========================================================
   STAGE 3A MARKET CATALOGUE
========================================================= */

.market-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.market-sync-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.market-sync-summary > div {
    padding: 16px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 13px;
}

.market-sync-summary span,
.market-sync-summary strong {
    display: block;
}

.market-sync-summary span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.market-sync-summary strong {
    margin-top: 5px;
    color: var(--text-dark);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.admin-filter-bar.market-filter {
    grid-template-columns: minmax(0, 1.5fr) minmax(180px, .7fr)
        minmax(180px, .7fr) auto;
}

[data-theme="dark"] .market-sync-summary > div {
    background: #0d1728;
    border-color: #263449;
}

[data-theme="dark"] .market-sync-summary strong {
    color: #f8fafc;
}

@media (max-width: 1050px) {
    .market-metric-grid,
    .market-sync-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-filter-bar.market-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .market-metric-grid,
    .market-sync-summary,
    .admin-filter-bar.market-filter {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   STAGE 3B MARKET PRICE FOUNDATION
========================================================= */

.market-feed-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.market-provider-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-filter-bar.market-feed-filter {
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, .7fr) auto;
}

@media (max-width: 1050px) {
    .market-feed-metrics,
    .market-provider-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-filter-bar.market-feed-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .market-feed-metrics,
    .market-provider-summary,
    .admin-filter-bar.market-feed-filter {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   WB SIDEBAR LOGO
   Uses the same transparent logo in light and dark mode.
========================================================= */

.sidebar-brand {
    min-height: 72px;
    margin-bottom: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sidebar-logo-image {
    width: 92px;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background: transparent;
    filter: none;
}

/* Keep the WB mark centred when the desktop sidebar collapses. */
.sidebar.collapsed .sidebar-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.sidebar.collapsed .sidebar-logo-image {
    width: 48px;
}

/* The green/teal WB mark remains unchanged in both themes. */
[data-theme="light"] .sidebar-logo-image,
[data-theme="dark"] .sidebar-logo-image {
    filter: none;
    opacity: 1;
}

/* Mobile sidebar keeps the full-size WB mark. */
@media (max-width: 850px) {
    .sidebar.collapsed .sidebar-logo-image {
        width: 92px;
    }
}


/* =========================================================
   PUBLIC LANDING PAGE
========================================================= */

.landing-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at 82% 38%,
            rgba(0, 216, 118, 0.11),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #020c1d 0%,
            #03162d 52%,
            #021023 100%
        );
    color: #ffffff;
    overflow-x: hidden;
}

.landing-navbar {
    min-height: 82px;
    padding: 0 clamp(24px, 5vw, 80px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr);
    align-items: center;
    gap: 35px;
}

.landing-brand {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: #ffffff;
    font-size: 21px;
    font-weight: 800;
}

.landing-brand-logo {
    width: 62px;
    height: 40px;
    object-fit: contain;
}

.landing-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
}

.landing-nav-links a,
.landing-login-link {
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.landing-nav-links a:hover,
.landing-login-link:hover {
    color: #21e77b;
}

.landing-nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
}

.landing-primary-button {
    min-height: 50px;
    padding: 13px 24px;
    background:
        linear-gradient(
            135deg,
            #04b958,
            #17d968
        );
    color: #ffffff;
    border: 1px solid rgba(83, 255, 163, 0.35);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-size: 14px;
    font-weight: 800;
    box-shadow:
        0 10px 30px rgba(0, 211, 103, 0.22);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.landing-primary-button:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow:
        0 15px 36px rgba(0, 211, 103, 0.30);
}

.landing-hero {
    width: min(100%, 1500px);
    min-height: calc(100vh - 260px);
    margin: 0 auto;
    padding: clamp(65px, 8vw, 120px) clamp(24px, 5vw, 80px) 65px;
    display: grid;
    grid-template-columns: minmax(400px, 0.88fr) minmax(520px, 1.12fr);
    align-items: center;
    gap: 60px;
}

.landing-hero-content {
    position: relative;
    z-index: 3;
}

.landing-kicker {
    width: max-content;
    max-width: 100%;
    margin-bottom: 28px;
    padding: 9px 16px;
    border: 1px solid rgba(27, 219, 113, 0.36);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
}

.landing-kicker span {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: #19df72;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(25, 223, 114, 0.8);
}

.landing-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(54px, 6.1vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 850;
}

.landing-hero h1 strong {
    color: #09c85c;
    font-weight: inherit;
}

.landing-hero-description {
    max-width: 510px;
    margin-top: 27px;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(18px, 1.55vw, 22px);
    line-height: 1.6;
}

.landing-benefits {
    margin-top: 28px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.landing-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
}

.landing-benefits i {
    width: 21px;
    height: 21px;
    background: #0fc461;
    color: #ffffff;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: 12px;
    font-style: normal;
}

.landing-hero-actions {
    margin-top: 38px;
}

.landing-hero-button {
    min-width: 270px;
    min-height: 62px;
    justify-content: space-between;
    padding: 16px 27px;
    font-size: 17px;
}

.landing-hero-button span {
    font-size: 26px;
    line-height: 1;
}

.landing-no-card {
    margin-top: 19px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.63);
    font-size: 13px;
}

.landing-no-card span {
    color: #9fb0c8;
    font-size: 18px;
}

.landing-visual {
    min-height: 570px;
    position: relative;
    z-index: 1;
}

.landing-visual::before {
    content: "";
    width: 520px;
    height: 520px;
    position: absolute;
    top: 30px;
    right: 20px;
    background:
        radial-gradient(
            circle,
            rgba(15, 235, 121, 0.13),
            transparent 65%
        );
    filter: blur(10px);
    pointer-events: none;
}

.landing-growth-chart {
    width: 100%;
    height: 100%;
    min-height: 540px;
    position: absolute;
    inset: 15px 0 auto;
    overflow: visible;
}

.landing-chart-bars line {
    stroke: #0cf27a;
    stroke-width: 1.4;
    stroke-opacity: 0.35;
    stroke-dasharray: 2 5;
}

.landing-chart-area {
    fill: url(#growthArea);
}

.landing-chart-line {
    fill: none;
    stroke: #19f28a;
    stroke-width: 3.5;
    stroke-linecap: round;
}

.landing-chart-point {
    fill: #ffffff;
    stroke: #19f28a;
    stroke-width: 5;
    filter: drop-shadow(0 0 12px #19f28a);
}

.landing-floating-card {
    min-width: 215px;
    padding: 17px 19px;
    position: absolute;
    z-index: 4;
    background:
        linear-gradient(
            145deg,
            rgba(7, 28, 52, 0.92),
            rgba(6, 20, 40, 0.88)
        );
    border: 1px solid rgba(100, 196, 255, 0.20);
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.23);
    backdrop-filter: blur(12px);
}

.landing-floating-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    color: #16df73;
    border: 1px solid rgba(22, 223, 115, 0.30);
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 25px;
    font-weight: 900;
}

.landing-floating-card small,
.landing-floating-card strong,
.landing-floating-card p {
    display: block;
}

.landing-floating-card small {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 700;
}

.landing-floating-card strong {
    margin-top: 2px;
    color: #15e876;
    font-size: 16px;
}

.landing-floating-card p {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
}

.landing-investment-card {
    top: 70px;
    left: 41%;
}

.landing-savings-card {
    top: 235px;
    left: 14%;
}

.landing-goals-card {
    right: 8%;
    bottom: 50px;
}

.landing-trust-section {
    width: min(100%, 1300px);
    margin: 0 auto;
    padding: 0 45px 55px;
}

.landing-trust-title {
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.48);
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.34em;
}

.landing-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-trust-grid article {
    min-width: 0;
    padding: 14px 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.landing-trust-grid article:last-child {
    border-right: 0;
}

.landing-trust-grid article > span {
    color: #aebbd0;
    font-size: 30px;
    line-height: 1;
}

.landing-trust-grid strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
}

.landing-trust-grid p {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .landing-navbar {
        grid-template-columns: 1fr auto;
    }

    .landing-nav-links {
        display: none;
    }

    .landing-hero {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .landing-hero-content {
        max-width: 720px;
    }

    .landing-visual {
        min-height: 530px;
    }

    .landing-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-trust-grid article:nth-child(2) {
        border-right: 0;
    }
}

@media (max-width: 720px) {
    .landing-navbar {
        min-height: 72px;
        padding: 0 18px;
        gap: 15px;
    }

    .landing-brand span {
        display: none;
    }

    .landing-brand-logo {
        width: 56px;
    }

    .landing-nav-actions {
        gap: 14px;
    }

    .landing-nav-register {
        min-height: 43px;
        padding: 10px 14px;
        font-size: 12px;
    }

    .landing-hero {
        padding: 55px 20px 30px;
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-hero h1 {
        font-size: clamp(48px, 15vw, 70px);
    }

    .landing-benefits {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .landing-hero-button {
        width: 100%;
        min-width: 0;
    }

    .landing-visual {
        min-height: 500px;
        margin-top: 15px;
    }

    .landing-growth-chart {
        min-height: 470px;
        transform: scale(1.05);
        transform-origin: center;
    }

    .landing-floating-card {
        min-width: 190px;
        padding: 14px;
    }

    .landing-investment-card {
        top: 30px;
        left: 6%;
    }

    .landing-savings-card {
        top: 205px;
        left: 2%;
    }

    .landing-goals-card {
        right: 2%;
        bottom: 40px;
    }

    .landing-trust-section {
        padding: 0 20px 40px;
    }

    .landing-trust-grid {
        grid-template-columns: 1fr;
    }

    .landing-trust-grid article,
    .landing-trust-grid article:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    .landing-trust-grid article:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 480px) {
    
    .landing-kicker {
        font-size: 11px;
    }

    .landing-hero-description {
        font-size: 17px;
    }

    .landing-visual {
        min-height: 450px;
    }

    .landing-growth-chart {
        min-height: 420px;
    }

    .landing-floating-card {
        min-width: 170px;
        max-width: 190px;
    }

    .landing-floating-card p {
        display: none;
    }
}

/* =========================================================
   LANDING PAGE INFORMATION SECTIONS
========================================================= */

.landing-info-section {
    padding:
        100px
        clamp(24px, 6vw, 90px);
    background: #031226;
    color: white;
    scroll-margin-top: 90px;
}

.landing-info-section:nth-of-type(even) {
    background: #041a32;
}

.landing-info-container {
    width: min(100%, 1200px);
    margin: 0 auto;
}

.landing-section-label {
    display: inline-block;
    margin-bottom: 14px;
    color: #18df74;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.landing-info-section h2 {
    max-width: 720px;
    color: white;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.1;
}

.landing-info-intro {
    max-width: 760px;
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 18px;
    line-height: 1.8;
}

.landing-steps-grid {
    margin-top: 50px;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.landing-steps-grid article {
    padding: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(8, 35, 65, 0.95),
            rgba(4, 24, 46, 0.95)
        );
    border:
        1px solid
        rgba(54, 213, 128, 0.17);
    border-radius: 18px;
}

.landing-step-number {
    display: block;
    margin-bottom: 25px;
    color: #17dd72;
    font-size: 14px;
    font-weight: 900;
}

.landing-steps-grid h3 {
    color: white;
    font-size: 21px;
}

.landing-steps-grid p {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.7;
}

.landing-security-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    align-items: center;
    gap: 70px;
}

.landing-security-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.landing-security-grid article {
    padding: 24px;
    background: rgba(255, 255, 255, 0.045);
    border:
        1px solid
        rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.landing-security-grid article > span {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    background: #0dc65f;
    color: white;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
}

.landing-security-grid h3 {
    color: white;
    font-size: 16px;
}

.landing-security-grid p {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 13px;
    line-height: 1.6;
}

.landing-about-section {
    text-align: center;
}

.landing-about-section h2,
.landing-about-section .landing-info-intro {
    margin-left: auto;
    margin-right: auto;
}

.landing-vision-card {
    max-width: 760px;
    margin: 48px auto 0;
    padding: 38px;
    background:
        linear-gradient(
            135deg,
            rgba(16, 195, 92, 0.13),
            rgba(8, 44, 79, 0.75)
        );
    border:
        1px solid
        rgba(27, 222, 116, 0.24);
    border-radius: 20px;
}

.landing-vision-card > span {
    color: #18df74;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.landing-vision-card h3 {
    margin-top: 12px;
    color: white;
    font-size: 26px;
}

.landing-vision-card p {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.8;
}

.landing-final-cta {
    padding:
        70px
        clamp(24px, 6vw, 90px);
    background:
        linear-gradient(
            120deg,
            #061a34,
            #073057
        );
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.landing-final-cta h2 {
    color: white;
    font-size: 30px;
}

.landing-final-cta p {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.64);
}

.landing-footer {
    min-height: 100px;
    padding:
        25px
        clamp(24px, 6vw, 90px);
    background: #020b18;
    color: rgba(255, 255, 255, 0.64);
    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.landing-footer > div {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-weight: 800;
}

.landing-footer-logo {
    width: 52px;
    height: 36px;
    object-fit: contain;
}

@media (max-width: 900px) {

    .landing-steps-grid,
    .landing-security-layout {
        grid-template-columns: 1fr;
    }

    .landing-security-layout {
        gap: 40px;
    }

}

@media (max-width: 650px) {

    .landing-info-section {
        padding:
            75px
            20px;
    }

    .landing-security-grid {
        grid-template-columns: 1fr;
    }

    .landing-final-cta {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

    .landing-final-cta .landing-primary-button {
        width: 100%;
    }

    .landing-footer {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================================
   CLEAN AUTHENTICATION PAGES
========================================================= */

.auth-page-clean {
    min-height: 100vh;
    padding: 55px 20px;
    background:
        radial-gradient(
            circle at 50% 12%,
            rgba(24, 223, 116, 0.08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #020b1c,
            #061934
        );
    display: block;
}

.auth-clean-container {
    width: min(100%, 540px);
    margin: 0 auto;
}

.auth-clean-logo-link {
    width: max-content;
    margin: 0 auto 22px;
    padding: 0;
    display: block;
}

.auth-clean-logo {
    width: 92px;
    height: auto;
    display: block;
    object-fit: contain;
}

.auth-clean-content {
    width: 100%;
}

.auth-clean-heading {
    margin-bottom: 34px;
    text-align: center;
}

.auth-clean-heading h1 {
    color: #ffffff;
    font-size: clamp(34px, 5vw, 44px);
    line-height: 1.1;
}

.auth-clean-heading p {
    max-width: 440px;
    margin: 12px auto 0;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.6;
}

.auth-flash-messages {
    margin-bottom: 22px;
}

.auth-clean-form {
    width: 100%;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.auth-field {
    margin-bottom: 20px;
}

.auth-field label {
    margin-bottom: 8px;
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.auth-input-wrapper {
    position: relative;
}

.auth-input-wrapper input {
    width: 100%;
    min-height: 55px;
    padding: 14px 52px 14px 46px;
    background: rgba(20, 39, 68, 0.82);
    color: #ffffff;
    border: 1px solid #344763;
    border-radius: 11px;
}

.auth-input-wrapper input::placeholder {
    color: #7f8da3;
}

.auth-input-wrapper input:focus {
    border-color: #18d971;
    box-shadow:
        0 0 0 3px rgba(24, 217, 113, 0.12);
}

.auth-input-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    transform: translateY(-50%);
    color: #a8b7cc;
    pointer-events: none;
}

.auth-password-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    background: transparent;
    color: #8998ad;
    border: none;
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.auth-password-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.auth-password-requirements {
    margin: -8px 0 20px;
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 7px 14px;
}

.auth-password-requirements span {
    color: #77869c;
    font-size: 12px;
}

.auth-password-requirements span.valid {
    color: #20dd79;
}

.auth-password-message {
    min-height: 19px;
    margin-top: 6px;
    display: block;
    font-size: 12px;
}

.success-text {
    color: #20dd79;
}

.error-text {
    color: #f87171;
}

.auth-clean-submit {
    width: 100%;
    min-height: 56px;
    margin-top: 10px;
    padding: 14px;
    background:
        linear-gradient(
            135deg,
            #1358ef,
            #3694ff
        );
    color: #ffffff;
    border: none;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 800;
    box-shadow:
        0 12px 30px rgba(37, 99, 235, 0.24);
}

.auth-clean-submit:hover {
    transform: translateY(-1px);
    box-shadow:
        0 16px 34px rgba(37, 99, 235, 0.31);
}

.auth-clean-switch {
    margin-top: 28px;
    color: #94a3b8;
    text-align: center;
    font-size: 14px;
}

.auth-clean-switch a {
    color: #21df79;
    font-weight: 800;
}

@media (max-width: 560px) {
    .auth-page-clean {
        padding: 36px 18px;
    }

    .auth-password-requirements {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CLEAN LOGIN PAGE
========================================================= */

.auth-login-container {
    max-width: 500px;
    padding-top: 35px;
}

.auth-login-options {
    margin: 4px 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.auth-login-options a {
    color: #22df79;
    font-size: 13px;
    font-weight: 700;
}

.auth-remember-option {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    color: #cbd5e1 !important;
    font-size: 13px !important;
    cursor: pointer;
}

.auth-remember-option input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #2563eb;
}

.auth-flash-messages .alert {
    margin-bottom: 15px;
    padding: 13px 15px;
    border-radius: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

.auth-flash-messages .alert.danger,
.auth-flash-messages .alert.error {
    background: rgba(220, 38, 38, 0.14);
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, 0.35);
}

.auth-flash-messages .alert.success {
    background: rgba(22, 163, 74, 0.14);
    color: #86efac;
    border: 1px solid rgba(74, 222, 128, 0.35);
}

.auth-flash-messages .alert.warning {
    background: rgba(245, 158, 11, 0.14);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.35);
}

@media (max-width: 480px) {
    .auth-login-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }
}

/* =========================================================
   EMAIL VERIFICATION PAGE
========================================================= */

.auth-verification-container {
    max-width: 500px;
    padding-top: 35px;
}

.auth-page-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 20px;
    background:
        linear-gradient(
            135deg,
            rgba(24, 223, 116, 0.17),
            rgba(37, 99, 235, 0.18)
        );
    color: #22df79;
    border:
        1px solid
        rgba(34, 223, 121, 0.26);
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 28px;
}

.auth-code-wrapper input {
    text-align: center;
    letter-spacing: 0.35em;
    font-size: 21px;
    font-weight: 800;
}

.auth-verification-note {
    margin-top: 18px;
    color: #7f8da3;
    text-align: center;
    font-size: 12px;
}

/* =========================================================
   PROFILE PAGE
========================================================= */

.profile-page {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}

.profile-page-header {
    margin-bottom: 28px;
}

.profile-page-header h2 {
    color: var(--text-primary, #ffffff);
    font-size: 30px;
    line-height: 1.2;
}

.profile-page-header p {
    margin-top: 8px;
    color: var(--text-secondary, #94a3b8);
    font-size: 14px;
}

.profile-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(300px, 0.8fr);
    align-items: start;
    gap: 22px;
}

.profile-main-card,
.profile-summary-card,
.profile-overview-card {
    background: var(--card-bg, #111c2e);
    border: 1px solid var(--border-color, #29384e);
    border-radius: 16px;
    overflow: hidden;
}

.profile-card-heading {
    min-height: 88px;
    padding: 22px 25px;
    border-bottom: 1px solid var(--border-color, #29384e);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.profile-card-heading h3 {
    color: var(--text-primary, #ffffff);
    font-size: 18px;
}

.profile-card-heading p {
    margin-top: 5px;
    color: var(--text-secondary, #94a3b8);
    font-size: 12px;
}

.profile-edit-button {
    min-height: 40px;
    padding: 9px 15px;
    background: rgba(30, 210, 116, 0.08);
    color: #26d981;
    border: 1px solid rgba(38, 217, 129, 0.4);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.profile-edit-button:hover,
.profile-edit-button.editing {
    background: rgba(30, 210, 116, 0.16);
}

.profile-card-body {
    padding: 28px;
}

.profile-identity {
    margin-bottom: 30px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border-color, #29384e);
    display: flex;
    align-items: center;
    gap: 22px;
}

.profile-large-avatar {
    width: 105px;
    height: 105px;
    flex: 0 0 105px;
    background:
        linear-gradient(
            135deg,
            #d8fff0,
            #9ee7d0
        );
    color: #16845c;
    border: 5px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 35px;
    font-weight: 900;
    letter-spacing: 1px;
}

.profile-identity-details h3 {
    color: var(--text-primary, #ffffff);
    font-size: 24px;
}

.profile-identity-details p {
    margin-top: 5px;
    color: var(--text-secondary, #94a3b8);
}

.profile-status-badge {
    width: max-content;
    margin-top: 12px;
    padding: 6px 10px;
    background: rgba(34, 197, 94, 0.13);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.26);
    border-radius: 7px;
    display: block;
    font-size: 11px;
    font-weight: 800;
}

.profile-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 21px;
}

.profile-form-group label {
    margin-bottom: 8px;
    display: block;
    color: var(--text-primary, #ffffff);
    font-size: 13px;
    font-weight: 700;
}

.profile-form-group input {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    background: var(--input-bg, #17253a);
    color: var(--text-primary, #ffffff);
    border: 1px solid var(--border-color, #33455e);
    border-radius: 9px;
    font: inherit;
}

.profile-form-group input:focus {
    border-color: #20d87c;
    outline: none;
    box-shadow:
        0 0 0 3px rgba(32, 216, 124, 0.12);
}

.profile-form-group input:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.profile-form-group small {
    margin-top: 7px;
    color: var(--text-secondary, #7f8ca0);
    display: block;
    font-size: 11px;
}

.profile-form-actions {
    margin-top: 24px;
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.profile-form-actions.active {
    display: flex;
}

.profile-cancel-button,
.profile-save-button {
    min-height: 43px;
    padding: 10px 18px;
    border-radius: 9px;
    font-weight: 800;
    cursor: pointer;
}

.profile-cancel-button {
    background: transparent;
    color: var(--text-secondary, #cbd5e1);
    border: 1px solid var(--border-color, #40516a);
}

.profile-save-button {
    background:
        linear-gradient(
            135deg,
            #0fbf68,
            #26dc83
        );
    color: #ffffff;
    border: none;
}

.profile-detail-list {
    padding: 10px 25px 20px;
}

.profile-detail-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--border-color, #28374c);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.profile-detail-item:last-child {
    border-bottom: none;
}

.profile-detail-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    background: rgba(55, 113, 220, 0.11);
    color: #73a8ff;
    border-radius: 10px;
    display: grid;
    place-items: center;
}

.profile-detail-item small {
    color: var(--text-secondary, #8fa0b8);
    display: block;
    font-size: 11px;
}

.profile-detail-item strong {
    margin-top: 5px;
    color: var(--text-primary, #ffffff);
    display: block;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.profile-active-text,
.profile-positive-text {
    color: #34d47d !important;
}

.profile-muted-text {
    color: var(--text-secondary, #8290a4);
}

.profile-overview-card {
    margin-top: 22px;
}

.profile-overview-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.profile-overview-item {
    min-height: 170px;
    padding: 28px 20px;
    border-right: 1px solid var(--border-color, #29384e);
    text-align: center;
}

.profile-overview-item:last-child {
    border-right: none;
}

.profile-overview-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: rgba(34, 197, 94, 0.13);
    color: #3ade82;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 21px;
    font-weight: 900;
}

.profile-overview-item h4 {
    color: var(--text-primary, #ffffff);
    font-size: 13px;
}

.profile-overview-item p {
    margin-top: 9px;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 1050px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-overview-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .profile-overview-item:nth-child(2) {
        border-right: none;
    }

    .profile-overview-item:nth-child(-n + 2) {
        border-bottom:
            1px solid
            var(--border-color, #29384e);
    }
}

@media (max-width: 650px) {
    .profile-card-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-card-body {
        padding: 22px 18px;
    }

    .profile-identity {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .profile-status-badge {
        margin-left: auto;
        margin-right: auto;
    }

    .profile-form-grid,
    .profile-overview-grid {
        grid-template-columns: 1fr;
    }

    .profile-overview-item {
        border-right: none;
        border-bottom:
            1px solid
            var(--border-color, #29384e);
    }

    .profile-overview-item:last-child {
        border-bottom: none;
    }

    .profile-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .profile-cancel-button,
    .profile-save-button {
        width: 100%;
    }
}

/* =========================================================
   PROFILE AND SETTINGS — THEME COLOURS
========================================================= */

:root,
html[data-theme="light"] {
    --account-page-bg: #f4f7fb;
    --account-card-bg: #ffffff;
    --account-card-secondary: #f8fafc;
    --account-input-bg: #ffffff;

    --account-text-primary: #162033;
    --account-text-secondary: #64748b;
    --account-text-muted: #8492a6;

    --account-border: #dce4ee;
    --account-border-strong: #cbd5e1;

    --account-shadow:
        0 8px 28px rgba(15, 23, 42, 0.07);

    --account-icon-bg: #edf4ff;
    --account-icon-color: #2563eb;

    --account-green-bg: rgba(22, 163, 74, 0.10);
    --account-green-border: rgba(22, 163, 74, 0.25);
    --account-green-text: #15803d;

    --account-blue-bg: rgba(37, 99, 235, 0.10);
    --account-blue-border: rgba(37, 99, 235, 0.20);
}


html[data-theme="dark"] {
    --account-page-bg: #081426;
    --account-card-bg: #111f33;
    --account-card-secondary: #14243a;
    --account-input-bg: #172840;

    --account-text-primary: #ffffff;
    --account-text-secondary: #9baac0;
    --account-text-muted: #7f8ea4;

    --account-border: #293b55;
    --account-border-strong: #3a4d68;

    --account-shadow:
        0 10px 30px rgba(0, 0, 0, 0.18);

    --account-icon-bg: rgba(37, 99, 235, 0.13);
    --account-icon-color: #70a4ff;

    --account-green-bg: rgba(34, 197, 94, 0.12);
    --account-green-border: rgba(74, 222, 128, 0.25);
    --account-green-text: #4ade80;

    --account-blue-bg: rgba(37, 99, 235, 0.12);
    --account-blue-border: rgba(96, 165, 250, 0.20);
}


/* =========================================================
   PROFILE PAGE — LIGHT AND DARK MODE FIX
========================================================= */

.profile-page {
    color: var(--account-text-primary);
}

.profile-page-header h2 {
    color: var(--account-text-primary);
}

.profile-page-header p {
    color: var(--account-text-secondary);
}

.profile-main-card,
.profile-summary-card,
.profile-overview-card {
    background: var(--account-card-bg);
    border-color: var(--account-border);
    box-shadow: var(--account-shadow);
}

.profile-card-heading {
    background: var(--account-card-bg);
    border-color: var(--account-border);
}

.profile-card-heading h3 {
    color: var(--account-text-primary);
}

.profile-card-heading p {
    color: var(--account-text-secondary);
}

.profile-card-body {
    background: var(--account-card-bg);
}

.profile-identity {
    border-color: var(--account-border);
}

.profile-identity-details h3 {
    color: var(--account-text-primary);
}

.profile-identity-details p {
    color: var(--account-text-secondary);
}

.profile-status-badge {
    background: var(--account-green-bg);
    color: var(--account-green-text);
    border-color: var(--account-green-border);
}

.profile-form-group label {
    color: var(--account-text-primary);
}

.profile-form-group input {
    background: var(--account-input-bg);
    color: var(--account-text-primary);
    border-color: var(--account-border-strong);
}

.profile-form-group input::placeholder {
    color: var(--account-text-muted);
}

.profile-form-group input:disabled {
    background: var(--account-card-secondary);
    color: var(--account-text-secondary);
    opacity: 1;
}

.profile-form-group input:focus {
    border-color: #18b968;
    box-shadow:
        0 0 0 3px rgba(24, 185, 104, 0.12);
}

.profile-form-group small {
    color: var(--account-text-muted);
}

.profile-cancel-button {
    background: var(--account-card-bg);
    color: var(--account-text-secondary);
    border-color: var(--account-border-strong);
}

.profile-cancel-button:hover {
    background: var(--account-card-secondary);
    color: var(--account-text-primary);
}

.profile-detail-list {
    background: var(--account-card-bg);
}

.profile-detail-item {
    border-color: var(--account-border);
}

.profile-detail-icon {
    background: var(--account-icon-bg);
    color: var(--account-icon-color);
}

.profile-detail-item small {
    color: var(--account-text-secondary);
}

.profile-detail-item strong {
    color: var(--account-text-primary);
}

.profile-active-text,
.profile-positive-text {
    color: var(--account-green-text) !important;
}

.profile-muted-text {
    color: var(--account-text-muted);
}

.profile-overview-grid {
    background: var(--account-card-bg);
}

.profile-overview-item {
    border-color: var(--account-border);
}

.profile-overview-item h4 {
    color: var(--account-text-primary);
}

.profile-overview-item p {
    color: var(--account-text-secondary);
}

.profile-overview-icon {
    background: var(--account-green-bg);
    color: var(--account-green-text);
}


/* =========================================================
   LIGHT MODE PROFILE AVATAR
========================================================= */

html[data-theme="light"] .profile-large-avatar {
    background:
        linear-gradient(
            135deg,
            #dcfff2,
            #a7f3d0
        );

    color: #087a50;

    border-color: #ffffff;

    box-shadow:
        0 8px 24px rgba(16, 185, 129, 0.14);
}


/* =========================================================
   DARK MODE PROFILE AVATAR
========================================================= */

html[data-theme="dark"] .profile-large-avatar {
    background:
        linear-gradient(
            135deg,
            #c9fbea,
            #8ce4c7
        );

    color: #087a50;

    border-color: rgba(255, 255, 255, 0.08);
}


/* =========================================================
   PAGE CONTENT BACKGROUND
========================================================= */

html[data-theme="light"] .page-content {
    background: var(--account-page-bg);
}

html[data-theme="dark"] .page-content {
    background: var(--account-page-bg);
}


/* =========================================================
   PAGE HEADING BAR
========================================================= */

html[data-theme="light"] .page-heading-bar {
    background: var(--account-page-bg);
}

html[data-theme="light"] .page-heading-bar h1 {
    color: #162033;
}

html[data-theme="dark"] .page-heading-bar {
    background: var(--account-page-bg);
}

html[data-theme="dark"] .page-heading-bar h1 {
    color: #ffffff;
}


/* =========================================================
   SETTINGS PAGE — SHARED THEME STYLES
========================================================= */

.settings-page {
    color: var(--account-text-primary);
}

.settings-page-header h2 {
    color: var(--account-text-primary);
}

.settings-page-header p {
    color: var(--account-text-secondary);
}

.settings-sidebar,
.settings-content-card,
.settings-section-card {
    background: var(--account-card-bg);
    border: 1px solid var(--account-border);
    box-shadow: var(--account-shadow);
}

.settings-navigation {
    background: var(--account-card-bg);
}

.settings-navigation button {
    color: var(--account-text-secondary);
    background: transparent;
}

.settings-navigation button:hover {
    color: var(--account-text-primary);
    background: var(--account-card-secondary);
}

.settings-navigation button.active {
    color: var(--account-icon-color);
    background: var(--account-blue-bg);
    border-color: var(--account-blue-border);
}

.settings-navigation button.danger {
    color: #dc2626;
}

.settings-navigation button.danger:hover,
.settings-navigation button.danger.active {
    background: rgba(220, 38, 38, 0.09);
    color: #dc2626;
}

.settings-section-header {
    border-color: var(--account-border);
}

.settings-section-header h3,
.settings-section-card h3 {
    color: var(--account-text-primary);
}

.settings-section-header p,
.settings-section-card p {
    color: var(--account-text-secondary);
}

.settings-form-group label {
    color: var(--account-text-primary);
}

.settings-form-group input,
.settings-form-group select,
.settings-form-group textarea {
    background: var(--account-input-bg);
    color: var(--account-text-primary);
    border-color: var(--account-border-strong);
}

.settings-form-group input::placeholder,
.settings-form-group textarea::placeholder {
    color: var(--account-text-muted);
}

.settings-form-group input:focus,
.settings-form-group select:focus,
.settings-form-group textarea:focus {
    border-color: #18b968;
    box-shadow:
        0 0 0 3px rgba(24, 185, 104, 0.12);
}

.settings-option-row {
    border-color: var(--account-border);
}

.settings-option-row h4 {
    color: var(--account-text-primary);
}

.settings-option-row p {
    color: var(--account-text-secondary);
}


/* =========================================================
   LIGHT MODE SHADOW AND CARD REFINEMENT
========================================================= */

html[data-theme="light"] .profile-main-card,
html[data-theme="light"] .profile-summary-card,
html[data-theme="light"] .profile-overview-card,
html[data-theme="light"] .settings-sidebar,
html[data-theme="light"] .settings-content-card,
html[data-theme="light"] .settings-section-card {
    box-shadow:
        0 4px 18px rgba(15, 23, 42, 0.05);

    border-color: #dfe7f1;
}


/* =========================================================
   DARK MODE CARD REFINEMENT
========================================================= */

html[data-theme="dark"] .profile-main-card,
html[data-theme="dark"] .profile-summary-card,
html[data-theme="dark"] .profile-overview-card,
html[data-theme="dark"] .settings-sidebar,
html[data-theme="dark"] .settings-content-card,
html[data-theme="dark"] .settings-section-card {
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.16);
}


/* =========================================================
   RESPONSIVE PROFILE BORDERS
========================================================= */

@media (max-width: 1050px) {

    .profile-overview-item:nth-child(2) {
        border-right: none;
    }

    .profile-overview-item:nth-child(-n + 2) {
        border-bottom:
            1px solid
            var(--account-border);
    }

}

@media (max-width: 650px) {

    .profile-overview-item {
        border-right: none;
        border-bottom:
            1px solid
            var(--account-border);
    }

}

/* =========================================================
   SETTINGS PAGE
========================================================= */

.settings-page {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}

.settings-page-header {
    margin-bottom: 28px;
}

.settings-page-header h2 {
    color: var(--account-text-primary);
    font-size: 30px;
    line-height: 1.2;
}

.settings-page-header p {
    margin-top: 8px;
    color: var(--account-text-secondary);
    font-size: 14px;
}

.settings-layout {
    display: grid;
    grid-template-columns:
        230px
        minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}

.settings-sidebar {
    border-radius: 15px;
    overflow: hidden;
}

.settings-navigation {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-nav-button {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.settings-nav-button span {
    width: 24px;
    display: inline-grid;
    place-items: center;
}

.settings-nav-button.active {
    font-weight: 800;
}

.settings-content {
    min-width: 0;
}

.settings-content-card {
    display: none;
    border-radius: 15px;
    overflow: hidden;
}

.settings-content-card.active {
    display: block;
}

.settings-section-header {
    min-height: 88px;
    padding: 22px 25px;
    border-bottom: 1px solid var(--account-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.settings-section-header h3 {
    font-size: 19px;
}

.settings-section-header p {
    margin-top: 6px;
    font-size: 12px;
}

.settings-form {
    padding: 26px;
}

.settings-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.settings-form-group {
    margin-bottom: 20px;
}

.settings-form-group label {
    margin-bottom: 8px;
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.settings-form-group input,
.settings-form-group select,
.settings-form-group textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--account-border-strong);
    border-radius: 9px;
    font: inherit;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.settings-form-group input:disabled {
    background: var(--account-card-secondary);
    color: var(--account-text-secondary);
    cursor: not-allowed;
    opacity: 1;
}

.settings-form-group small {
    margin-top: 7px;
    color: var(--account-text-muted);
    display: block;
    font-size: 11px;
}

.settings-save-button {
    min-height: 46px;
    padding: 11px 20px;
    background:
        linear-gradient(
            135deg,
            #0fbf68,
            #26dc83
        );
    color: #ffffff;
    border: none;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        0 10px 24px rgba(15, 191, 104, 0.18);
}

.settings-save-button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 28px rgba(15, 191, 104, 0.24);
}

.settings-password-rules {
    margin: -4px 0 18px;
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}

.settings-password-rules span {
    color: var(--account-text-muted);
    font-size: 12px;
}

.settings-password-rules span.valid {
    color: var(--account-green-text);
}

.settings-password-message {
    min-height: 18px;
    margin: -4px 0 18px;
    display: block;
    font-size: 12px;
}

.settings-option-list {
    padding: 4px 25px 20px;
}

.settings-option-row {
    min-height: 92px;
    padding: 22px 0;
    border-bottom: 1px solid var(--account-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.settings-option-row:last-child {
    border-bottom: none;
}

.settings-option-row h4 {
    font-size: 14px;
}

.settings-option-row p {
    margin-top: 5px;
    font-size: 12px;
}

.settings-theme-button {
    min-width: 115px;
    min-height: 40px;
    padding: 9px 14px;
    background: var(--account-card-secondary);
    color: var(--account-text-secondary);
    border: 1px solid var(--account-border-strong);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.settings-theme-button:hover {
    color: var(--account-text-primary);
    border-color: #21c979;
}

.settings-theme-button.active {
    background: var(--account-green-bg);
    color: var(--account-green-text);
    border-color: var(--account-green-border);
}

.settings-account-list {
    padding: 10px 25px 20px;
}

.settings-account-list > div {
    min-height: 65px;
    padding: 17px 0;
    border-bottom: 1px solid var(--account-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.settings-account-list > div:last-child {
    border-bottom: none;
}

.settings-account-list span {
    color: var(--account-text-secondary);
    font-size: 13px;
}

.settings-account-list strong {
    color: var(--account-text-primary);
    font-size: 13px;
    text-align: right;
}

.settings-danger-card {
    border-color: rgba(220, 38, 38, 0.30);
}

.settings-danger-card .settings-section-header {
    background: rgba(220, 38, 38, 0.04);
    border-bottom-color: rgba(220, 38, 38, 0.20);
}

.settings-danger-card .settings-section-header h3 {
    color: #dc2626;
}

.settings-danger-content {
    padding: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.settings-danger-content h4 {
    color: var(--account-text-primary);
    font-size: 15px;
}

.settings-danger-content p {
    max-width: 680px;
    margin-top: 7px;
    color: var(--account-text-secondary);
    font-size: 12px;
    line-height: 1.7;
}

.settings-delete-button {
    min-width: 140px;
    min-height: 43px;
    padding: 10px 16px;
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.28);
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
}

.settings-delete-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}


/* =========================================================
   LIGHT MODE SETTINGS
========================================================= */

html[data-theme="light"] .settings-sidebar,
html[data-theme="light"] .settings-content-card {
    background: #ffffff;
}

html[data-theme="light"] .settings-nav-button {
    color: #64748b;
}

html[data-theme="light"] .settings-nav-button:hover {
    background: #f1f5f9;
    color: #162033;
}

html[data-theme="light"] .settings-nav-button.active {
    background: #eaf2ff;
    color: #2563eb;
    border-color: #cfe0ff;
}

html[data-theme="light"] .settings-nav-button.danger {
    color: #dc2626;
}

html[data-theme="light"] .settings-form-group input,
html[data-theme="light"] .settings-form-group select,
html[data-theme="light"] .settings-form-group textarea {
    background: #ffffff;
    color: #162033;
}

html[data-theme="light"] .settings-theme-button {
    background: #f8fafc;
}


/* =========================================================
   DARK MODE SETTINGS
========================================================= */

html[data-theme="dark"] .settings-sidebar,
html[data-theme="dark"] .settings-content-card {
    background: var(--account-card-bg);
}

html[data-theme="dark"] .settings-nav-button {
    color: var(--account-text-secondary);
}

html[data-theme="dark"] .settings-nav-button:hover {
    background: var(--account-card-secondary);
    color: var(--account-text-primary);
}

html[data-theme="dark"] .settings-nav-button.active {
    background: rgba(37, 99, 235, 0.16);
    color: #78aaff;
    border-color: rgba(96, 165, 250, 0.20);
}


/* =========================================================
   SETTINGS RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-navigation {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .settings-nav-button {
        justify-content: center;
    }

}

@media (max-width: 650px) {

    .settings-navigation {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .settings-form {
        padding: 22px 18px;
    }

    .settings-section-header {
        padding: 20px 18px;
    }

    .settings-form-grid,
    .settings-password-rules {
        grid-template-columns: 1fr;
    }

    .settings-option-row,
    .settings-danger-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-theme-button,
    .settings-delete-button {
        width: 100%;
    }

    .settings-account-list > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .settings-account-list strong {
        text-align: left;
    }

}

@media (max-width: 430px) {

    .settings-navigation {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   PROFILE IMAGE
========================================================= */

.profile-photo-section {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.profile-uploaded-image {
    width: 105px;
    height: 105px;
    border: 5px solid var(--account-card-bg);
    border-radius: 50%;
    display: block;
    object-fit: cover;
    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.14);
}

.profile-photo-button,
.profile-remove-photo {
    padding: 7px 11px;
    background: transparent;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.profile-photo-button {
    color: var(--account-icon-color);
    border:
        1px solid
        var(--account-blue-border);
}

.profile-remove-photo {
    color: #dc2626;
    border:
        1px solid
        rgba(220, 38, 38, 0.25);
}

.profile-information-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.profile-information-item {
    padding: 17px;
    background: var(--account-card-secondary);
    border:
        1px solid
        var(--account-border);
    border-radius: 10px;
}

.profile-information-item small {
    color: var(--account-text-secondary);
    display: block;
    font-size: 11px;
}

.profile-information-item strong {
    margin-top: 7px;
    color: var(--account-text-primary);
    display: block;
    font-size: 14px;
    overflow-wrap: anywhere;
}


/* =========================================================
   DELETE ACCOUNT MODAL
========================================================= */

body.modal-open {
    overflow: hidden;
}

.account-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.account-delete-modal.active {
    display: flex;
}

.account-delete-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 20, 0.72);
    backdrop-filter: blur(4px);
}

.account-delete-dialog {
    width: min(100%, 500px);
    padding: 30px;
    position: relative;
    z-index: 1;
    background: var(--account-card-bg);
    color: var(--account-text-primary);
    border:
        1px solid
        rgba(220, 38, 38, 0.30);
    border-radius: 16px;
    box-shadow:
        0 30px 70px
        rgba(0, 0, 0, 0.35);
}

.account-delete-close {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    color: var(--account-text-secondary);
    border: none;
    border-radius: 8px;
    font-size: 25px;
    cursor: pointer;
}

.account-delete-warning-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    background: rgba(220, 38, 38, 0.11);
    color: #dc2626;
    border:
        1px solid
        rgba(220, 38, 38, 0.25);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 900;
}

.account-delete-dialog h3 {
    color: var(--account-text-primary);
    font-size: 23px;
}

.account-delete-dialog > p {
    margin: 10px 0 24px;
    color: var(--account-text-secondary);
    line-height: 1.7;
}

.account-delete-actions {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.account-delete-cancel,
.account-delete-confirm {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
}

.account-delete-cancel {
    background: var(--account-card-secondary);
    color: var(--account-text-primary);
    border:
        1px solid
        var(--account-border);
}

.account-delete-confirm {
    background: #dc2626;
    color: #ffffff;
    border: none;
}

.account-delete-confirm:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}


@media (max-width: 650px) {

    .profile-information-grid {
        grid-template-columns: 1fr;
    }

    .account-delete-dialog {
        padding: 25px 20px;
    }

    .account-delete-actions {
        flex-direction: column-reverse;
    }

    .account-delete-cancel,
    .account-delete-confirm {
        width: 100%;
    }

}

.navbar-user-avatar {
    overflow: hidden;
}

.navbar-user-avatar-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

/* =========================================================
   AUTOMATIC FLASH MESSAGE DISMISS
========================================================= */

.flash-messages .alert {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        margin 0.4s ease,
        padding 0.4s ease,
        max-height 0.4s ease;
    max-height: 120px;
    overflow: hidden;
}

.flash-messages .alert.flash-hide {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}

/* =========================================================
   CUSTOM LOGOUT MODAL
========================================================= */

.logout-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.logout-modal.active {
    display: flex;
}

.logout-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 20, 0.72);
    backdrop-filter: blur(4px);
}

.logout-modal-dialog {
    width: min(100%, 430px);
    padding: 32px 30px;
    position: relative;
    z-index: 1;
    background: var(--account-card-bg, #ffffff);
    color: var(--account-text-primary, #162033);
    border: 1px solid var(--account-border, #dce4ee);
    border-radius: 16px;
    text-align: center;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.35);
}

.logout-modal-close {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    color: var(--account-text-secondary, #64748b);
    border: none;
    border-radius: 8px;
    font-size: 25px;
    cursor: pointer;
}

.logout-modal-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;
    background: rgba(220, 38, 38, 0.10);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 25px;
    font-weight: 900;
}

.logout-modal-dialog h3 {
    color: var(--account-text-primary, #162033);
    font-size: 22px;
    line-height: 1.35;
}

.logout-modal-dialog p {
    max-width: 340px;
    margin: 12px auto 26px;
    color: var(--account-text-secondary, #64748b);
    font-size: 13px;
    line-height: 1.7;
}

.logout-modal-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.logout-confirm-button,
.logout-cancel-button {
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.logout-confirm-button {
    background: #c8101e;
    color: #ffffff;
    border: none;
}

.logout-confirm-button:hover {
    background: #a90e19;
}

.logout-cancel-button {
    background: #111111;
    color: #ffffff;
    border: none;
}

.logout-cancel-button:hover {
    background: #292929;
}

.navbar-menu-button {
    width: 100%;
    padding: 11px 16px;
    background: transparent;
    color: inherit;
    border: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.navbar-menu-button:hover {
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-logout {
    width: 100%;
    border: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

html[data-theme="light"] .logout-modal-dialog {
    background: #ffffff;
    color: #162033;
}

html[data-theme="dark"] .logout-modal-dialog {
    background: #111f33;
    color: #ffffff;
}

html[data-theme="dark"] .logout-cancel-button {
    background: #020817;
}

@media (max-width: 480px) {

    .logout-modal-dialog {
        padding: 30px 20px 22px;
    }

    .logout-modal-actions {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   RECORD DELETE / WITHDRAW CONFIRMATION MODALS
========================================================= */

.record-action-modal {
    position: fixed;
    inset: 0;
    z-index: 4500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.record-action-modal.active {
    display: flex;
}

.record-action-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 20, 0.72);
    backdrop-filter: blur(4px);
}

.record-action-dialog {
    width: min(100%, 480px);
    padding: 32px;
    position: relative;
    z-index: 1;
    background: var(--account-card-bg, #ffffff);
    color: var(--account-text-primary, #162033);
    border: 1px solid var(--account-border, #dce4ee);
    border-radius: 16px;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.35);
}

.record-action-close {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    color: var(--account-text-secondary, #64748b);
    border: none;
    border-radius: 8px;
    font-size: 25px;
    cursor: pointer;
}

.record-action-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 900;
}

.record-action-icon.danger {
    background: rgba(220, 38, 38, 0.10);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.record-action-dialog h3 {
    color: var(--account-text-primary, #162033);
    font-size: 23px;
}

.record-action-dialog > p {
    margin-top: 10px;
    color: var(--account-text-secondary, #64748b);
    line-height: 1.7;
}

.record-action-summary {
    margin-top: 22px;
    background: var(--account-card-secondary, #f8fafc);
    border: 1px solid var(--account-border, #dce4ee);
    border-radius: 12px;
    overflow: hidden;
}

.record-action-summary > div {
    min-height: 58px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--account-border, #dce4ee);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.record-action-summary > div:last-child {
    border-bottom: none;
}

.record-action-summary span {
    color: var(--account-text-secondary, #64748b);
    font-size: 12px;
}

.record-action-summary strong {
    color: var(--account-text-primary, #162033);
    font-size: 13px;
    text-align: right;
}

.record-action-warning {
    color: #dc2626 !important;
    font-size: 12px;
    font-weight: 800;
}

.record-action-buttons {
    margin-top: 26px;
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.record-action-confirm,
.record-action-cancel {
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.record-action-confirm.danger {
    background: #c8101e;
    color: #ffffff;
    border: none;
}

.record-action-confirm.danger:hover {
    background: #a90e19;
}

.record-action-cancel {
    background: #111111;
    color: #ffffff;
    border: none;
}

html[data-theme="dark"] .record-action-dialog {
    background: #111f33;
    color: #ffffff;
}

html[data-theme="dark"] .record-action-summary {
    background: #14243a;
}

html[data-theme="dark"] .record-action-cancel {
    background: #020817;
}

@media (max-width: 520px) {

    .record-action-dialog {
        padding: 28px 20px 22px;
    }

    .record-action-buttons {
        grid-template-columns: 1fr;
    }

    .record-action-summary > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .record-action-summary strong {
        text-align: left;
    }

}

/* =========================================================
   UPDATED TOP NAVIGATION
========================================================= */

.navbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.navbar-app-name {
    color: var(--text-primary, #111827);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.navbar-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-user-details {
    min-width: 0;
}

.navbar-user-details strong {
    display: block;
    max-width: 190px;
    color: var(--text-primary, #111827);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-user-separator {
    width: 1px;
    height: 30px;
    margin: 0 3px;
    background: var(--border-color, #e2e8f0);
}

.navbar-user-toggle {
    display: grid;
    place-items: center;
}

.navbar-chevron-icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   NOTIFICATION BUTTON
========================================================= */

.notification-area {
    position: relative;
}

.notification-button {
    width: 40px;
    height: 40px;
    position: relative;
    padding: 0;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--text-secondary, #475569);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.notification-button:hover,
.notification-button[aria-expanded="true"] {
    background: var(--hover-bg, #f1f5f9);
    color: var(--text-primary, #0f172a);
    border-color: var(--border-color, #e2e8f0);
}

.notification-bell-icon {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-badge {
    min-width: 17px;
    height: 17px;
    position: absolute;
    top: 1px;
    right: 0;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #22c55e;
    color: #ffffff;
    border: 2px solid var(--navbar-bg, #ffffff);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
}


/* =========================================================
   NOTIFICATION DROPDOWN
========================================================= */

.notification-dropdown {
    width: min(360px, calc(100vw - 30px));
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 3500;
    display: none;
    background: var(--card-bg, #ffffff);
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 15px;
    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.notification-dropdown.active {
    display: block;
    animation: notificationDropdownOpen 0.18s ease;
}

@keyframes notificationDropdownOpen {

    from {
        opacity: 0;
        transform: translateY(-7px);
    }

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

}

.notification-dropdown-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.notification-dropdown-header h3 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 15px;
    font-weight: 850;
}

.notification-dropdown-header p {
    margin: 4px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
}

.notification-dropdown-body {
    padding: 32px 24px;
    text-align: center;
}

.notification-empty-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border-radius: 50%;
}

.notification-empty-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-dropdown-body h4 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 14px;
    font-weight: 800;
}

.notification-dropdown-body p {
    max-width: 270px;
    margin: 8px auto 0;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .navbar-app-name,
html[data-theme="dark"] .navbar-user-details strong {
    color: #f8fafc;
}

html[data-theme="dark"] .navbar-user-separator {
    background: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"] .notification-button {
    color: #cbd5e1;
}

html[data-theme="dark"] .notification-button:hover,
html[data-theme="dark"]
.notification-button[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .notification-badge {
    border-color: #08172a;
}

html[data-theme="dark"] .notification-dropdown {
    background: #0d1c31;
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .notification-dropdown-header {
    border-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .notification-dropdown-header h3,
html[data-theme="dark"] .notification-dropdown-body h4 {
    color: #f8fafc;
}

html[data-theme="dark"] .notification-dropdown-header p,
html[data-theme="dark"] .notification-dropdown-body p {
    color: #94a3b8;
}


/* =========================================================
   RESPONSIVE TOP NAVIGATION
========================================================= */

@media (max-width: 850px) {

    .navbar {
        padding-left: 14px;
        padding-right: 14px;
    }

    .navbar-left {
        gap: 10px;
    }

    .navbar-app-name {
        font-size: 15px;
    }

    .navbar-user-details {
        display: none;
    }

    .navbar-user-separator {
        display: none;
    }

    .navbar-user {
        gap: 5px;
    }

    .notification-button,
    .theme-toggle {
        width: 36px;
        height: 36px;
    }

    .navbar-user-avatar {
        width: 36px;
        height: 36px;
    }

}

@media (max-width: 520px) {

    .navbar {
        min-height: 64px;
    }

    .navbar-app-name {
        max-width: 145px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .notification-dropdown {
        position: fixed;
        top: 72px;
        left: 15px;
        right: 15px;
        width: auto;
    }

}

@media (max-width: 390px) {

    .navbar-app-name {
        max-width: 105px;
        font-size: 13px;
    }

    .navbar-user-toggle {
        display: none;
    }

}

/* =========================================================
   DIVIDEND HISTORY PAGE
========================================================= */

.dividend-history-page {
    width: 100%;
}

.dividend-page-header {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.dividend-page-header h1 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 27px;
    font-weight: 850;
    line-height: 1.25;
}

.dividend-page-header p {
    margin: 7px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
    line-height: 1.6;
}

.dividend-add-button {
    min-height: 44px;
    padding: 11px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-shrink: 0;
    background: #22c55e;
    color: #ffffff;
    border: 1px solid #22c55e;
    border-radius: 9px;
    box-shadow:
        0 8px 18px rgba(34, 197, 94, 0.18);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.dividend-add-button:hover {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow:
        0 10px 22px rgba(34, 197, 94, 0.24);
}

.dividend-add-icon {
    font-size: 19px;
    font-weight: 500;
    line-height: 1;
}


/* =========================================================
   DIVIDEND SUMMARY
========================================================= */

.dividend-summary-card {
    min-height: 175px;
    margin-bottom: 18px;
    padding: 28px 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #07182c 0%,
            #0b223b 56%,
            #0c2c43 100%
        );
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 15px;
    box-shadow:
        0 18px 38px rgba(15, 23, 42, 0.15);
}

.dividend-summary-card::before {
    content: "";
    width: 280px;
    height: 280px;
    position: absolute;
    top: -155px;
    right: -70px;
    background: rgba(34, 197, 94, 0.08);
    border-radius: 50%;
}

.dividend-summary-card::after {
    content: "";
    width: 180px;
    height: 180px;
    position: absolute;
    right: 130px;
    bottom: -135px;
    background: rgba(34, 197, 94, 0.05);
    border-radius: 50%;
}

.dividend-summary-content {
    position: relative;
    z-index: 1;
}

.dividend-summary-label {
    display: block;
    margin-bottom: 10px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dividend-summary-amount {
    display: block;
    color: #22c55e;
    font-size: clamp(30px, 4vw, 43px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.dividend-summary-content p {
    max-width: 550px;
    margin: 13px 0 0;
    color: #a8b5c6;
    font-size: 12px;
    line-height: 1.65;
}

.dividend-summary-icon {
    width: 70px;
    height: 70px;
    position: relative;
    z-index: 1;
    flex: 0 0 70px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 18px;
}

.dividend-summary-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   DIVIDEND INFORMATION NOTE
========================================================= */

.dividend-information-note {
    margin-bottom: 24px;
    padding: 15px 17px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: rgba(34, 197, 94, 0.07);
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 11px;
}

.dividend-note-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    color: #16a34a;
}

.dividend-note-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dividend-information-note strong {
    display: block;
    color: var(--text-primary, #0f172a);
    font-size: 12px;
    font-weight: 800;
}

.dividend-information-note p {
    margin: 4px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   DIVIDEND TABLE
========================================================= */

.dividend-table-card {
    overflow: hidden;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.05);
}

.dividend-table-heading {
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.dividend-table-heading h2 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 15px;
    font-weight: 850;
}

.dividend-table-heading p {
    margin: 4px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
}

.dividend-record-count {
    padding: 7px 11px;
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.16);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.dividend-history-table {
    min-width: 720px;
}

.dividend-history-table th {
    padding-top: 14px;
    padding-bottom: 14px;
    color: var(--text-secondary, #64748b);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dividend-history-table td {
    padding-top: 17px;
    padding-bottom: 17px;
    vertical-align: middle;
}

.dividend-row-number {
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    font-weight: 700;
}

.dividend-ticker-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.dividend-ticker-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 900;
}

.dividend-ticker-cell strong {
    display: block;
    color: var(--text-primary, #0f172a);
    font-size: 12px;
    font-weight: 850;
}

.dividend-ticker-cell small {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary, #64748b);
    font-size: 10px;
}

.dividend-date-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    white-space: nowrap;
}

.dividend-date-cell svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dividend-payment-amount {
    color: #16a34a;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.dividend-table-footer {
    padding: 13px 20px;
    color: var(--text-secondary, #64748b);
    border-top: 1px solid var(--border-color, #e2e8f0);
    font-size: 10px;
}


/* =========================================================
   DIVIDEND EMPTY STATE
========================================================= */

.dividend-empty-state {
    min-height: 340px;
    padding: 45px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    text-align: center;
    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.05);
}

.dividend-empty-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border-radius: 20px;
}

.dividend-empty-icon svg {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dividend-empty-state h2 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 20px;
    font-weight: 850;
}

.dividend-empty-state p {
    max-width: 410px;
    margin: 10px auto 23px;
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   DIVIDEND DARK MODE
========================================================= */

html[data-theme="dark"] .dividend-page-header h1,
html[data-theme="dark"] .dividend-information-note strong,
html[data-theme="dark"] .dividend-table-heading h2,
html[data-theme="dark"] .dividend-ticker-cell strong,
html[data-theme="dark"] .dividend-empty-state h2 {
    color: #f8fafc;
}

html[data-theme="dark"] .dividend-page-header p,
html[data-theme="dark"] .dividend-information-note p,
html[data-theme="dark"] .dividend-table-heading p,
html[data-theme="dark"] .dividend-row-number,
html[data-theme="dark"] .dividend-ticker-cell small,
html[data-theme="dark"] .dividend-date-cell,
html[data-theme="dark"] .dividend-table-footer,
html[data-theme="dark"] .dividend-empty-state p {
    color: #94a3b8;
}

html[data-theme="dark"] .dividend-information-note {
    background: rgba(34, 197, 94, 0.07);
    border-color: rgba(34, 197, 94, 0.17);
}

html[data-theme="dark"] .dividend-table-card,
html[data-theme="dark"] .dividend-empty-state {
    background: #0d1c31;
    border-color: rgba(148, 163, 184, 0.17);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] .dividend-table-heading,
html[data-theme="dark"] .dividend-table-footer {
    border-color: rgba(148, 163, 184, 0.15);
}

html[data-theme="dark"] .dividend-history-table th {
    color: #94a3b8;
}


/* =========================================================
   DIVIDEND RESPONSIVE DESIGN
========================================================= */

@media (max-width: 700px) {

    .dividend-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .dividend-add-button {
        width: 100%;
    }

    .dividend-summary-card {
        min-height: auto;
        padding: 24px 21px;
    }

    .dividend-summary-icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .dividend-summary-icon svg {
        width: 28px;
        height: 28px;
    }

    .dividend-table-heading {
        align-items: flex-start;
    }

}

@media (max-width: 480px) {

    .dividend-page-header h1 {
        font-size: 23px;
    }

    .dividend-summary-card {
        align-items: flex-start;
    }

    .dividend-summary-icon {
        display: none;
    }

    .dividend-summary-amount {
        font-size: 31px;
    }

    .dividend-information-note {
        padding: 14px;
    }

    .dividend-table-heading {
        padding: 17px;
    }

    .dividend-record-count {
        padding: 6px 9px;
    }

}

/* =========================================================
   ADD DIVIDEND PAGE
========================================================= */

.add-dividend-page {
    width: 100%;
}

.add-dividend-header {
    margin-bottom: 24px;
}

.add-dividend-back-link {
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.add-dividend-back-link:hover {
    color: #22c55e;
    transform: translateX(-2px);
}

.add-dividend-back-link svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.add-dividend-header h1 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 27px;
    font-weight: 850;
    line-height: 1.25;
}

.add-dividend-header p {
    margin: 7px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
    line-height: 1.6;
}

.add-dividend-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(260px, 0.55fr);
    gap: 24px;
    align-items: start;
}

.add-dividend-card,
.add-dividend-side-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 15px;
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.06);
}

.add-dividend-card {
    padding: 26px;
}

.add-dividend-card-heading {
    margin-bottom: 25px;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.add-dividend-card-heading h2 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 17px;
    font-weight: 850;
}

.add-dividend-card-heading p {
    margin: 5px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    line-height: 1.6;
}

.add-dividend-card-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.17);
    border-radius: 13px;
}

.add-dividend-card-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.add-dividend-form {
    display: grid;
    gap: 21px;
}

.add-dividend-form-group {
    display: grid;
    gap: 8px;
}

.add-dividend-form-group label {
    color: var(--text-primary, #0f172a);
    font-size: 12px;
    font-weight: 800;
}

.add-dividend-form-group input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    background: var(--input-bg, #ffffff);
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, #dbe3ec);
    border-radius: 10px;
    outline: none;
    font: inherit;
    font-size: 13px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.add-dividend-form-group input:focus {
    border-color: #22c55e;
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.12);
}

.add-dividend-form-group input::placeholder {
    color: #94a3b8;
}

.add-dividend-form-group small {
    color: var(--text-secondary, #64748b);
    font-size: 10px;
    line-height: 1.55;
}

.add-dividend-money-input {
    position: relative;
}

.add-dividend-money-input > span {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    color: var(--text-secondary, #64748b);
    font-size: 14px;
    font-weight: 800;
    transform: translateY(-50%);
    pointer-events: none;
}

.add-dividend-money-input input {
    padding-left: 34px;
}

.add-dividend-information-box {
    padding: 15px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(34, 197, 94, 0.07);
    border: 1px solid rgba(34, 197, 94, 0.17);
    border-radius: 11px;
}

.add-dividend-information-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    color: #16a34a;
}

.add-dividend-information-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.add-dividend-information-box strong {
    display: block;
    color: var(--text-primary, #0f172a);
    font-size: 12px;
    font-weight: 850;
}

.add-dividend-information-box p {
    margin: 4px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 10px;
    line-height: 1.65;
}

.add-dividend-actions {
    padding-top: 4px;
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.add-dividend-save-button,
.add-dividend-cancel-button {
    min-height: 48px;
    padding: 12px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.add-dividend-save-button {
    background: #22c55e;
    color: #ffffff;
    border: 1px solid #22c55e;
}

.add-dividend-save-button:hover {
    background: #16a34a;
    border-color: #16a34a;
    transform: translateY(-1px);
}

.add-dividend-cancel-button {
    background: transparent;
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, #dbe3ec);
}

.add-dividend-cancel-button:hover {
    background: var(--hover-bg, #f8fafc);
}

.add-dividend-side-card {
    padding: 24px;
}

.add-dividend-side-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border-radius: 14px;
}

.add-dividend-side-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.add-dividend-side-card h3 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 16px;
    font-weight: 850;
}

.add-dividend-side-card > p {
    margin: 9px 0 22px;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    line-height: 1.7;
}

.add-dividend-side-list {
    display: grid;
    gap: 16px;
}

.add-dividend-side-list > div {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.add-dividend-side-list span {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900;
}

.add-dividend-side-list p {
    margin: 2px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 10px;
    line-height: 1.6;
}


/* =========================================================
   ADD DIVIDEND DARK MODE
========================================================= */

html[data-theme="dark"] .add-dividend-header h1,
html[data-theme="dark"] .add-dividend-card-heading h2,
html[data-theme="dark"] .add-dividend-form-group label,
html[data-theme="dark"] .add-dividend-information-box strong,
html[data-theme="dark"] .add-dividend-side-card h3 {
    color: #f8fafc;
}

html[data-theme="dark"] .add-dividend-header p,
html[data-theme="dark"] .add-dividend-back-link,
html[data-theme="dark"] .add-dividend-card-heading p,
html[data-theme="dark"] .add-dividend-form-group small,
html[data-theme="dark"] .add-dividend-information-box p,
html[data-theme="dark"] .add-dividend-side-card > p,
html[data-theme="dark"] .add-dividend-side-list p {
    color: #94a3b8;
}

html[data-theme="dark"] .add-dividend-card,
html[data-theme="dark"] .add-dividend-side-card {
    background: #0d1c31;
    border-color: rgba(148, 163, 184, 0.17);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] .add-dividend-card-heading {
    border-color: rgba(148, 163, 184, 0.15);
}

html[data-theme="dark"] .add-dividend-form-group input {
    background: #102139;
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"] .add-dividend-cancel-button {
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"] .add-dividend-cancel-button:hover {
    background: rgba(255, 255, 255, 0.05);
}


/* =========================================================
   ADD DIVIDEND RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .add-dividend-layout {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .add-dividend-card,
    .add-dividend-side-card {
        padding: 20px;
    }

    .add-dividend-card-heading {
        align-items: flex-start;
    }

    .add-dividend-actions {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 420px) {

    .add-dividend-header h1 {
        font-size: 23px;
    }

    .add-dividend-card-icon {
        display: none;
    }

}

/* =========================================================
   SELL INVESTMENT PAGE
========================================================= */

.sell-investment-page {
    width: 100%;
}

.sell-investment-header {
    margin-bottom: 24px;
}

.sell-investment-back {
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.sell-investment-back:hover {
    color: #22c55e;
}

.sell-investment-back svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sell-investment-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.sell-investment-title-row h1 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 30px;
    font-weight: 900;
}

.sell-investment-title-row p {
    margin: 7px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
    line-height: 1.6;
}

.sell-investment-ticker-card {
    min-width: 225px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 13px;
}

.sell-investment-ticker-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    background: #ea580c;
    color: #ffffff;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 900;
}

.sell-investment-ticker-card strong {
    display: block;
    color: var(--text-primary, #0f172a);
    font-size: 15px;
    font-weight: 900;
}

.sell-investment-ticker-card span {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary, #64748b);
    font-size: 10px;
}

.sell-investment-summary-grid {
    margin-bottom: 22px;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.sell-summary-card {
    min-height: 120px;
    padding: 21px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.05);
}

.sell-summary-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border-radius: 12px;
}

.sell-summary-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sell-summary-card span {
    display: block;
    color: var(--text-secondary, #64748b);
    font-size: 10px;
    font-weight: 700;
}

.sell-summary-card strong {
    display: block;
    margin-top: 7px;
    color: var(--text-primary, #0f172a);
    font-size: 17px;
    font-weight: 900;
    white-space: nowrap;
}

.sell-investment-form {
    display: grid;
    gap: 20px;
}

.sell-investment-form-card,
.sell-preview-card {
    padding: 25px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.05);
}

.sell-card-heading {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.sell-card-heading h2 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 17px;
    font-weight: 900;
}

.sell-card-heading p {
    margin: 5px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
}

.sell-form-group {
    margin-bottom: 20px;
}

.sell-form-group:last-child {
    margin-bottom: 0;
}

.sell-label-row {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.sell-label-row label {
    color: var(--text-primary, #0f172a);
    font-size: 12px;
    font-weight: 850;
}

.sell-label-row > span {
    color: var(--text-secondary, #64748b);
    font-size: 10px;
}

.use-current-price-button {
    padding: 6px 10px;
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.16);
    border-radius: 7px;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}

.sell-input-wrap {
    position: relative;
}

.sell-input-wrap input {
    width: 100%;
    min-height: 51px;
    padding: 12px 15px 12px 52px;
    background: var(--input-bg, #ffffff);
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, #dbe3ec);
    border-radius: 10px;
    outline: none;
    font: inherit;
    font-size: 13px;
}

.sell-input-wrap input:focus {
    border-color: #22c55e;
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.11);
}

.sell-input-icon,
.sell-input-currency {
    width: 40px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    color: var(--text-secondary, #64748b);
    border-right: 1px solid var(--border-color, #dbe3ec);
    pointer-events: none;
}

.sell-input-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sell-input-currency {
    font-size: 15px;
    font-weight: 900;
}

.sell-preview-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.sell-preview-item {
    padding: 10px 24px;
    border-right: 1px solid var(--border-color, #e2e8f0);
}

.sell-preview-item:first-child {
    padding-left: 0;
}

.sell-preview-item:last-child {
    padding-right: 0;
    border-right: none;
}

.sell-preview-item span {
    display: block;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    font-weight: 700;
}

.sell-preview-item strong {
    display: block;
    margin-top: 10px;
    color: var(--text-primary, #0f172a);
    font-size: 22px;
    font-weight: 900;
}

.sell-preview-item small {
    display: block;
    margin-top: 7px;
    color: var(--text-secondary, #64748b);
    font-size: 10px;
}

.sell-investment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 13px;
}

.sell-cancel-button,
.sell-submit-button {
    min-width: 175px;
    min-height: 48px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.sell-cancel-button {
    background: transparent;
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, #dbe3ec);
}

.sell-submit-button {
    background: #22c55e;
    color: #ffffff;
    border: 1px solid #22c55e;
}

.sell-submit-button:hover {
    background: #16a34a;
}


/* =========================================================
   SELL INVESTMENT DARK MODE
========================================================= */

html[data-theme="dark"] .sell-investment-title-row h1,
html[data-theme="dark"] .sell-investment-ticker-card strong,
html[data-theme="dark"] .sell-summary-card strong,
html[data-theme="dark"] .sell-card-heading h2,
html[data-theme="dark"] .sell-label-row label,
html[data-theme="dark"] .sell-preview-item strong,
html[data-theme="dark"] .sell-cancel-button {
    color: #f8fafc;
}

html[data-theme="dark"] .sell-investment-title-row p,
html[data-theme="dark"] .sell-investment-ticker-card span,
html[data-theme="dark"] .sell-summary-card span,
html[data-theme="dark"] .sell-card-heading p,
html[data-theme="dark"] .sell-label-row > span,
html[data-theme="dark"] .sell-preview-item span,
html[data-theme="dark"] .sell-preview-item small {
    color: #94a3b8;
}

html[data-theme="dark"] .sell-investment-ticker-card,
html[data-theme="dark"] .sell-summary-card,
html[data-theme="dark"] .sell-investment-form-card,
html[data-theme="dark"] .sell-preview-card {
    background: #0d1c31;
    border-color: rgba(148, 163, 184, 0.17);
}

html[data-theme="dark"] .sell-input-wrap input {
    background: #102139;
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"] .sell-card-heading,
html[data-theme="dark"] .sell-preview-item,
html[data-theme="dark"] .sell-input-icon,
html[data-theme="dark"] .sell-input-currency {
    border-color: rgba(148, 163, 184, 0.16);
}


/* =========================================================
   SELL INVESTMENT RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .sell-investment-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 760px) {

    .sell-investment-title-row {
        align-items: stretch;
        flex-direction: column;
    }

    .sell-investment-ticker-card {
        width: 100%;
    }

    .sell-preview-grid {
        grid-template-columns: 1fr;
    }

    .sell-preview-item,
    .sell-preview-item:first-child,
    .sell-preview-item:last-child {
        padding: 17px 0;
        border-right: none;
        border-bottom: 1px solid var(--border-color, #e2e8f0);
    }

    .sell-preview-item:last-child {
        border-bottom: none;
    }

}

@media (max-width: 560px) {

    .sell-investment-summary-grid {
        grid-template-columns: 1fr;
    }

    .sell-investment-form-card,
    .sell-preview-card {
        padding: 20px;
    }

    .sell-label-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .sell-investment-actions {
        flex-direction: column-reverse;
    }

    .sell-cancel-button,
    .sell-submit-button {
        width: 100%;
    }

}

@media (max-width: 420px) {

    .sell-investment-title-row h1 {
        font-size: 25px;
    }

}

/* =========================================================
   MODERN SELL INVESTMENT PAGE
========================================================= */

.modern-sell-page {
    width: 100%;
}

.modern-sell-heading {
    margin-bottom: 22px;
}

.modern-sell-back {
    margin-bottom: 18px;
    display: inline-flex;
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.modern-sell-back:hover {
    color: #22c55e;
}

.modern-sell-heading h1 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 30px;
    font-weight: 900;
}

.modern-sell-heading p {
    margin: 7px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
    line-height: 1.6;
}


/* Main overview */

.modern-sell-overview {
    margin-bottom: 20px;
    padding: 28px 30px;
    display: grid;
    grid-template-columns:
        minmax(240px, 1.3fr)
        repeat(3, minmax(150px, 1fr));
    gap: 22px;
    align-items: center;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 15px;
    box-shadow:
        0 10px 26px rgba(15, 23, 42, 0.05);
}

.modern-sell-stock-main {
    display: flex;
    align-items: center;
    gap: 15px;
}

.modern-sell-stock-logo {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    display: grid;
    place-items: center;
    background: #ea580c;
    color: #ffffff;
    border: 3px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    box-shadow:
        0 8px 20px rgba(234, 88, 12, 0.22);
    font-size: 19px;
    font-weight: 900;
}

.modern-sell-stock-main h2 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 25px;
    font-weight: 900;
}

.modern-sell-stock-main p {
    margin: 6px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
}

.modern-sell-stat span {
    display: block;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    font-weight: 650;
}

.modern-sell-stat strong {
    display: block;
    margin-top: 10px;
    color: var(--text-primary, #0f172a);
    font-size: 22px;
    font-weight: 900;
    white-space: nowrap;
}


/* Preview row */

.modern-sell-preview-row {
    grid-column: 1 / -1;
    padding-top: 25px;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        1px
        minmax(0, 1fr);
    gap: 30px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.modern-sell-preview-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.modern-sell-preview-icon {
    width: 53px;
    height: 53px;
    flex: 0 0 53px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.11);
    color: #22c55e;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 900;
}

.modern-sell-preview-icon.profit-icon {
    background: rgba(147, 51, 234, 0.13);
    color: #a855f7;
}

.modern-sell-preview-item span {
    display: block;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
}

.modern-sell-preview-item strong {
    display: block;
    margin-top: 7px;
    color: var(--text-primary, #0f172a);
    font-size: 23px;
    font-weight: 900;
}

.modern-sell-preview-item small {
    display: inline-block;
    margin-top: 5px;
    padding: 4px 8px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
}

.modern-sell-preview-divider {
    width: 1px;
    background: var(--border-color, #e2e8f0);
}


/* Form */

.modern-sell-form {
    padding: 27px;
    display: grid;
    gap: 23px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 15px;
    box-shadow:
        0 10px 26px rgba(15, 23, 42, 0.05);
}

.modern-sell-form-group {
    display: grid;
    gap: 9px;
}

.modern-sell-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.modern-sell-label-row label {
    color: var(--text-primary, #0f172a);
    font-size: 12px;
    font-weight: 850;
}

.modern-sell-label-row > span {
    color: var(--text-secondary, #64748b);
    font-size: 10px;
}

.modern-use-price-button {
    padding: 7px 11px;
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.16);
    border-radius: 7px;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}

.modern-sell-input-wrap {
    position: relative;
}

.modern-sell-input-wrap input {
    width: 100%;
    min-height: 52px;
    padding: 13px 15px 13px 55px;
    background: var(--input-bg, #ffffff);
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, #dbe3ec);
    border-radius: 10px;
    outline: none;
    font: inherit;
    font-size: 13px;
}

.modern-sell-input-wrap input:focus {
    border-color: #22c55e;
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.11);
}

.modern-sell-input-icon {
    width: 43px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    color: var(--text-secondary, #64748b);
    border-right: 1px solid var(--border-color, #dbe3ec);
    font-size: 15px;
    font-weight: 900;
    pointer-events: none;
}

.modern-current-price-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.modern-current-price-note span {
    color: var(--text-secondary, #64748b);
    font-size: 10px;
}

.modern-current-price-note strong {
    color: #16a34a;
    font-size: 10px;
}

.modern-sell-submit {
    width: min(100%, 310px);
    min-height: 50px;
    margin: 2px auto 0;
    padding: 12px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );
    color: #ffffff;
    border: none;
    border-radius: 9px;
    box-shadow:
        0 10px 22px rgba(34, 197, 94, 0.22);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.modern-sell-submit:hover {
    transform: translateY(-1px);
}

.modern-sell-security-note {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #64748b);
    font-size: 10px;
}


/* Dark mode */

html[data-theme="dark"] .modern-sell-heading h1,
html[data-theme="dark"] .modern-sell-stock-main h2,
html[data-theme="dark"] .modern-sell-stat strong,
html[data-theme="dark"] .modern-sell-preview-item strong,
html[data-theme="dark"] .modern-sell-label-row label {
    color: #f8fafc;
}

html[data-theme="dark"] .modern-sell-heading p,
html[data-theme="dark"] .modern-sell-back,
html[data-theme="dark"] .modern-sell-stock-main p,
html[data-theme="dark"] .modern-sell-stat span,
html[data-theme="dark"] .modern-sell-preview-item span,
html[data-theme="dark"] .modern-current-price-note span,
html[data-theme="dark"] .modern-sell-security-note {
    color: #94a3b8;
}

html[data-theme="dark"] .modern-sell-overview,
html[data-theme="dark"] .modern-sell-form {
    background: #0d1c31;
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .modern-sell-preview-row,
html[data-theme="dark"] .modern-sell-preview-divider {
    border-color: rgba(148, 163, 184, 0.16);
    background-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .modern-sell-input-wrap input {
    background: #102139;
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"] .modern-sell-input-icon {
    border-color: rgba(148, 163, 184, 0.18);
}


/* Responsive */

@media (max-width: 1050px) {

    .modern-sell-overview {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .modern-sell-stock-main {
        grid-column: 1 / -1;
    }

}

@media (max-width: 700px) {

    .modern-sell-overview {
        grid-template-columns: 1fr;
    }

    .modern-sell-stock-main {
        grid-column: auto;
    }

    .modern-sell-preview-row {
        grid-template-columns: 1fr;
    }

    .modern-sell-preview-divider {
        width: 100%;
        height: 1px;
    }

    .modern-current-price-note {
        align-items: flex-start;
        flex-direction: column;
    }

}

@media (max-width: 480px) {

    .modern-sell-heading h1 {
        font-size: 25px;
    }

    .modern-sell-overview,
    .modern-sell-form {
        padding: 21px;
    }

    .modern-sell-stock-logo {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .modern-sell-label-row {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================================
   COMPLETED GOALS PAGE
========================================================= */

.completed-goals-page {
    width: 100%;
}

.completed-goals-header {
    margin-bottom: 24px;
}

.completed-goals-header h1 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 30px;
    font-weight: 900;
    line-height: 1.25;
}

.completed-goals-header p {
    margin: 8px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   COMPLETED GOALS SUMMARY
========================================================= */

.completed-goals-summary {
    margin-bottom: 24px;
    padding: 24px 28px;
    display: grid;
    grid-template-columns:
        auto
        minmax(140px, 1fr)
        1px
        minmax(180px, 1.3fr)
        1px
        minmax(180px, 1.3fr);
    align-items: center;
    gap: 28px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 15px;
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.06);
}

.completed-summary-icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 50%;
}

.completed-summary-icon span {
    font-size: 30px;
}

.completed-summary-item span {
    display: block;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    font-weight: 700;
}

.completed-summary-item strong {
    display: block;
    margin-top: 9px;
    color: var(--text-primary, #0f172a);
    font-size: clamp(20px, 2.3vw, 27px);
    font-weight: 900;
    line-height: 1.15;
    white-space: nowrap;
}

.completed-summary-divider {
    width: 1px;
    height: 62px;
    background: var(--border-color, #e2e8f0);
}


/* =========================================================
   COMPLETED GOALS TABLE CARD
========================================================= */

.completed-goals-card {
    overflow: hidden;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 15px;
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.06);
}

.completed-goals-card-heading {
    padding: 21px 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.completed-goals-card-heading h2 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 17px;
    font-weight: 900;
}

.completed-goals-card-heading p {
    margin: 5px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
}

.completed-goals-count {
    padding: 7px 12px;
    background: rgba(34, 197, 94, 0.10);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.17);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.completed-goals-table {
    min-width: 860px;
}

.completed-goals-table th {
    padding-top: 14px;
    padding-bottom: 14px;
    color: var(--text-secondary, #64748b);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.completed-goals-table td {
    padding-top: 17px;
    padding-bottom: 17px;
    vertical-align: middle;
}

.completed-goal-title-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.completed-goal-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.17);
    border-radius: 50%;
    font-size: 19px;
}

.completed-goal-title-cell strong {
    display: block;
    color: var(--text-primary, #0f172a);
    font-size: 12px;
    font-weight: 900;
}

.completed-goal-title-cell small {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary, #64748b);
    font-size: 10px;
}

.completed-goal-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    white-space: nowrap;
}

.completed-goal-date svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.completed-goal-status {
    padding: 7px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.11);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.completed-goals-footer {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--text-secondary, #64748b);
    border-top: 1px solid var(--border-color, #e2e8f0);
    font-size: 10px;
}

.completed-goals-back-button {
    min-height: 39px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, #dbe3ec);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
}

.completed-goals-back-button:hover {
    background: var(--hover-bg, #f8fafc);
}


/* =========================================================
   COMPLETED GOALS EMPTY STATE
========================================================= */

.completed-goals-empty {
    min-height: 400px;
    padding: 48px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 15px;
    text-align: center;
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.06);
}

.completed-goals-empty-icon {
    width: 78px;
    height: 78px;
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 50%;
    font-size: 34px;
}

.completed-goals-empty h2 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 21px;
    font-weight: 900;
}

.completed-goals-empty p {
    max-width: 420px;
    margin: 10px auto 23px;
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    line-height: 1.7;
}

.completed-goals-primary-button {
    min-height: 45px;
    padding: 11px 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #22c55e;
    color: #ffffff;
    border: 1px solid #22c55e;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.completed-goals-primary-button:hover {
    background: #16a34a;
    border-color: #16a34a;
}

.completed-goals-secondary-link {
    margin-top: 14px;
    color: var(--text-secondary, #64748b);
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
}


/* =========================================================
   COMPLETED GOALS DARK MODE
========================================================= */

html[data-theme="dark"] .completed-goals-header h1,
html[data-theme="dark"] .completed-summary-item strong,
html[data-theme="dark"] .completed-goals-card-heading h2,
html[data-theme="dark"] .completed-goal-title-cell strong,
html[data-theme="dark"] .completed-goals-back-button,
html[data-theme="dark"] .completed-goals-empty h2 {
    color: #f8fafc;
}

html[data-theme="dark"] .completed-goals-header p,
html[data-theme="dark"] .completed-summary-item span,
html[data-theme="dark"] .completed-goals-card-heading p,
html[data-theme="dark"] .completed-goal-title-cell small,
html[data-theme="dark"] .completed-goal-date,
html[data-theme="dark"] .completed-goals-footer,
html[data-theme="dark"] .completed-goals-empty p,
html[data-theme="dark"] .completed-goals-secondary-link {
    color: #94a3b8;
}

html[data-theme="dark"] .completed-goals-summary,
html[data-theme="dark"] .completed-goals-card,
html[data-theme="dark"] .completed-goals-empty {
    background: #0d1c31;
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.20);
}

html[data-theme="dark"] .completed-summary-divider,
html[data-theme="dark"] .completed-goals-card-heading,
html[data-theme="dark"] .completed-goals-footer {
    border-color: rgba(148, 163, 184, 0.16);
    background-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .completed-goals-card-heading,
html[data-theme="dark"] .completed-goals-footer {
    background-color: transparent;
}

html[data-theme="dark"] .completed-goals-back-button {
    border-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"] .completed-goals-back-button:hover {
    background: rgba(255, 255, 255, 0.05);
}


/* =========================================================
   COMPLETED GOALS RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .completed-goals-summary {
        grid-template-columns:
            auto
            minmax(130px, 1fr)
            1px
            minmax(160px, 1fr);
    }

    .completed-goals-summary
    .completed-summary-divider:nth-of-type(2),
    .completed-goals-summary
    .completed-summary-item:last-child {
        display: none;
    }

}

@media (max-width: 650px) {

    .completed-goals-summary {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .completed-summary-icon {
        width: 58px;
        height: 58px;
    }

    .completed-summary-divider {
        width: 100%;
        height: 1px;
    }

    .completed-goals-summary
    .completed-summary-divider:nth-of-type(2),
    .completed-goals-summary
    .completed-summary-item:last-child {
        display: block;
    }

    .completed-goals-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .completed-goals-back-button {
        width: 100%;
    }

}

@media (max-width: 480px) {

    .completed-goals-header h1 {
        font-size: 25px;
    }

    .completed-goals-summary {
        padding: 21px;
    }

    .completed-goals-card-heading {
        align-items: flex-start;
        padding: 18px;
    }

}

/* =========================================================
   COMPLETED GOALS PAGE
========================================================= */

.completed-goals-page {
    width: 100%;
}

.completed-goals-heading {
    margin-bottom: 24px;
}

.completed-goals-heading h1 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 31px;
    font-weight: 900;
}

.completed-goals-heading p {
    margin: 8px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
}


/* Summary cards */

.completed-goals-summary-grid {
    margin-bottom: 24px;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.completed-goals-summary-card {
    min-height: 140px;
    padding: 23px;
    display: flex;
    align-items: center;
    gap: 17px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 15px;
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.06);
}

.completed-summary-card-icon {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.11);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 50%;
    font-size: 24px;
    font-weight: 900;
}

.completed-goals-summary-card span {
    display: block;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    font-weight: 700;
}

.completed-goals-summary-card strong {
    display: block;
    margin-top: 8px;
    color: var(--text-primary, #0f172a);
    font-size: 23px;
    font-weight: 900;
}

.completed-goals-summary-card small {
    display: block;
    margin-top: 6px;
    color: var(--text-secondary, #64748b);
    font-size: 10px;
}


/* Main list */

.completed-goals-list-card {
    padding: 24px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 15px;
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.06);
}

.completed-goals-list-heading {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.completed-goals-list-heading h2 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 18px;
    font-weight: 900;
}

.completed-goals-list-heading p {
    margin: 5px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
}

.completed-goals-total-badge {
    padding: 7px 12px;
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
}

.completed-goals-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.completed-goal-card {
    padding: 22px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
}

.completed-goal-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.completed-goal-main-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 50%;
    font-size: 27px;
}

.completed-goal-achieved-badge {
    padding: 7px 10px;
    background: rgba(34, 197, 94, 0.11);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 7px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.completed-goal-card h3 {
    margin: 20px 0 0;
    color: var(--text-primary, #0f172a);
    font-size: 18px;
    font-weight: 900;
}

.completed-goal-description {
    min-height: 36px;
    margin: 7px 0 18px;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    line-height: 1.6;
}

.completed-goal-details {
    padding: 16px 0;
    display: grid;
    gap: 13px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.completed-goal-details > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.completed-goal-details span {
    color: var(--text-secondary, #64748b);
    font-size: 10px;
}

.completed-goal-details strong {
    color: var(--text-primary, #0f172a);
    font-size: 11px;
    font-weight: 850;
    text-align: right;
}

.completed-goal-progress-heading {
    margin-top: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.completed-goal-progress-heading span,
.completed-goal-progress-heading strong {
    color: var(--text-secondary, #64748b);
    font-size: 10px;
    font-weight: 800;
}

.completed-goal-progress-heading strong {
    color: #22c55e;
}

.completed-goal-progress {
    height: 8px;
    margin-top: 9px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.18);
    border-radius: 999px;
}

.completed-goal-progress-fill {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            #22c55e,
            #4ade80
        );
    border-radius: inherit;
}

.completed-goals-list-footer {
    margin-top: 24px;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--text-secondary, #64748b);
    border-top: 1px solid var(--border-color, #e2e8f0);
    font-size: 10px;
}

.completed-goals-dashboard-link {
    min-height: 40px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, #dbe3ec);
    border-radius: 8px;
    font-weight: 850;
    text-decoration: none;
}


/* Empty state */

.completed-goals-empty-state {
    min-height: 380px;
    padding: 45px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 15px;
    text-align: center;
}

.completed-goals-empty-icon {
    width: 76px;
    height: 76px;
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    font-size: 34px;
}

.completed-goals-empty-state h2 {
    margin: 0;
    color: var(--text-primary, #0f172a);
}

.completed-goals-empty-state p {
    margin: 10px 0 22px;
    color: var(--text-secondary, #64748b);
}


/* Dark mode */

html[data-theme="dark"] .completed-goals-heading h1,
html[data-theme="dark"] .completed-goals-summary-card strong,
html[data-theme="dark"] .completed-goals-list-heading h2,
html[data-theme="dark"] .completed-goal-card h3,
html[data-theme="dark"] .completed-goal-details strong,
html[data-theme="dark"] .completed-goals-dashboard-link,
html[data-theme="dark"] .completed-goals-empty-state h2 {
    color: #f8fafc;
}

html[data-theme="dark"] .completed-goals-heading p,
html[data-theme="dark"] .completed-goals-summary-card span,
html[data-theme="dark"] .completed-goals-summary-card small,
html[data-theme="dark"] .completed-goals-list-heading p,
html[data-theme="dark"] .completed-goal-description,
html[data-theme="dark"] .completed-goal-details span,
html[data-theme="dark"] .completed-goals-list-footer,
html[data-theme="dark"] .completed-goals-empty-state p {
    color: #94a3b8;
}

html[data-theme="dark"] .completed-goals-summary-card,
html[data-theme="dark"] .completed-goals-list-card,
html[data-theme="dark"] .completed-goal-card,
html[data-theme="dark"] .completed-goals-empty-state {
    background: #0d1c31;
    border-color: rgba(148, 163, 184, 0.17);
}

html[data-theme="dark"] .completed-goal-details,
html[data-theme="dark"] .completed-goals-list-footer {
    border-color: rgba(148, 163, 184, 0.16);
}


/* Responsive */

@media (max-width: 1050px) {

    .completed-goals-summary-grid,
    .completed-goals-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 700px) {

    .completed-goals-summary-grid,
    .completed-goals-grid {
        grid-template-columns: 1fr;
    }

    .completed-goals-list-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .completed-goals-dashboard-link {
        width: 100%;
    }

}

@media (max-width: 480px) {

    .completed-goals-heading h1 {
        font-size: 25px;
    }

    .completed-goals-list-card {
        padding: 18px;
    }

    .completed-goals-list-heading {
        align-items: flex-start;
    }

}

/* =========================================================
   EDIT INVESTMENT PAGE
========================================================= */

.edit-investment-page {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.edit-investment-heading {
    margin-bottom: 26px;
}

.edit-investment-back {
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    color: #16a34a;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.edit-investment-back:hover {
    color: #22c55e;
}

.edit-investment-heading h1 {
    margin: 0;
    color: var(--text-primary, #0f172a);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.2;
}

.edit-investment-heading p {
    margin: 9px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
    line-height: 1.65;
}


/* Main form card */

.edit-investment-card {
    padding: 32px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.06);
}

.edit-investment-field {
    margin-bottom: 24px;
}

.edit-investment-field label {
    margin-bottom: 9px;
    display: block;
    color: var(--text-primary, #0f172a);
    font-size: 12px;
    font-weight: 850;
}

.edit-investment-field small {
    margin-top: 7px;
    display: block;
    color: var(--text-secondary, #64748b);
    font-size: 10px;
}

.edit-investment-input-wrap {
    position: relative;
}

.edit-investment-input-wrap input {
    width: 100%;
    min-height: 55px;
    padding: 14px 16px 14px 59px;
    background: var(--input-bg, #ffffff);
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, #dbe3ec);
    border-radius: 10px;
    outline: none;
    font-size: 13px;
    font-weight: 700;
}

.edit-investment-input-wrap input:focus {
    border-color: #22c55e;
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.11);
}

.edit-investment-input-wrap input[readonly] {
    cursor: not-allowed;
    opacity: 0.78;
}

.edit-investment-input-icon {
    width: 46px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    color: var(--text-secondary, #64748b);
    border-right: 1px solid var(--border-color, #dbe3ec);
    font-size: 13px;
    font-weight: 900;
    pointer-events: none;
}

.edit-investment-divider {
    height: 1px;
    margin: 7px 0 27px;
    background: var(--border-color, #e2e8f0);
}


/* Actions */

.edit-investment-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.edit-investment-cancel,
.edit-investment-submit {
    min-width: 170px;
    min-height: 48px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.edit-investment-cancel {
    background: transparent;
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, #dbe3ec);
}

.edit-investment-cancel:hover {
    background: var(--hover-bg, #f8fafc);
}

.edit-investment-submit {
    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );
    color: #ffffff;
    border: none;
    box-shadow:
        0 10px 24px rgba(34, 197, 94, 0.22);
    cursor: pointer;
}

.edit-investment-submit:hover {
    transform: translateY(-1px);
    box-shadow:
        0 13px 28px rgba(34, 197, 94, 0.27);
}

.edit-investment-security-note {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary, #64748b);
    font-size: 10px;
}


/* Dark mode */

html[data-theme="dark"] .edit-investment-heading h1,
html[data-theme="dark"] .edit-investment-field label,
html[data-theme="dark"] .edit-investment-cancel {
    color: #f8fafc;
}

html[data-theme="dark"] .edit-investment-heading p,
html[data-theme="dark"] .edit-investment-field small,
html[data-theme="dark"] .edit-investment-security-note {
    color: #94a3b8;
}

html[data-theme="dark"] .edit-investment-card {
    background: #0d1c31;
    border-color: rgba(148, 163, 184, 0.17);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.20);
}

html[data-theme="dark"] .edit-investment-input-wrap input {
    background: #102139;
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"] .edit-investment-input-icon {
    border-color: rgba(148, 163, 184, 0.17);
}

html[data-theme="dark"] .edit-investment-divider {
    background: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .edit-investment-cancel {
    border-color: rgba(148, 163, 184, 0.2);
}

html[data-theme="dark"] .edit-investment-cancel:hover {
    background: #102139;
}


/* Responsive */

@media (max-width: 650px) {

    .edit-investment-card {
        padding: 23px;
    }

    .edit-investment-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .edit-investment-cancel,
    .edit-investment-submit {
        width: 100%;
    }

}

@media (max-width: 480px) {

    .edit-investment-heading h1 {
        font-size: 26px;
    }

    .edit-investment-card {
        padding: 20px;
    }

}

/* Real notification dropdown additions */

.notification-list {
    max-height: 390px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    color: var(--text-primary, #0f172a);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    transition: background 0.2s ease;
}

.notification-item:hover {
    background: var(--hover-bg, #f8fafc);
}

.notification-item.unread {
    background: rgba(34, 197, 94, 0.08);
}

.notification-item-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.13);
    color: #16a34a;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 900;
}

.notification-item-content {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 4px;
}

.notification-item-content strong {
    font-size: 13px;
    line-height: 1.35;
}

.notification-item-content > span {
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    line-height: 1.45;
}

.notification-item-content small {
    color: var(--text-muted, #94a3b8);
    font-size: 10px;
}

.notification-unread-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-top: 5px;
    background: #22c55e;
    border-radius: 50%;
}

.notification-mark-all-form {
    margin: 0;
    padding: 10px 14px;
    background: var(--card-bg, #ffffff);
}

.notification-mark-all-button {
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 9px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.notification-mark-all-button:hover {
    background: rgba(34, 197, 94, 0.09);
}

.notification-empty-state {
    padding: 25px 18px;
    text-align: center;
}

[data-theme="dark"] .notification-item.unread {
    background: rgba(34, 197, 94, 0.12);
}


/* Dropdown stacking fix across every application page */
.navbar {
    position: sticky !important;
    z-index: 5000 !important;
    overflow: visible !important;
}

.notification-area {
    position: relative;
    z-index: 5100;
}

.notification-dropdown {
    z-index: 5200 !important;
}

.page-heading-bar,
.page-content {
    position: relative;
    z-index: 1;
}


/* Reusable confirmation modal */
.action-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.action-confirm-modal.active {
    display: flex;
}

.action-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(2px);
}

.action-confirm-dialog {
    width: min(100%, 400px);
    position: relative;
    z-index: 1;
    padding: 34px 30px 28px;
    background: var(--card-bg, #ffffff);
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 25px 75px rgba(2, 6, 23, 0.35);
    text-align: center;
}

.action-confirm-close {
    width: 34px;
    height: 34px;
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    color: var(--text-secondary, #64748b);
    border: none;
    border-radius: 8px;
    font-size: 22px;
    cursor: pointer;
}

.action-confirm-close:hover {
    background: var(--hover-bg, #f1f5f9);
}

.action-confirm-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 900;
}

.action-confirm-dialog h3 {
    color: var(--text-primary, #0f172a);
    font-size: 21px;
}

.action-confirm-dialog p {
    margin-top: 10px;
    color: var(--text-secondary, #64748b);
    font-size: 14px;
    line-height: 1.55;
}

.action-confirm-actions {
    margin-top: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.action-confirm-continue,
.action-confirm-cancel {
    min-height: 48px;
    padding: 11px 16px;
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.action-confirm-continue {
    background: #b91c1c;
    color: #ffffff;
}

.action-confirm-cancel {
    background: #020617;
    color: #ffffff;
}

[data-theme="dark"] .action-confirm-dialog {
    background: #0f1f35;
    color: #f8fafc;
    border-color: #29405e;
}

[data-theme="dark"] .action-confirm-icon {
    background: rgba(239, 68, 68, 0.16);
    color: #fca5a5;
}

@media (max-width: 520px) {
    .action-confirm-actions {
        grid-template-columns: 1fr;
    }
}

/* Notifications page styles */

.notification-view-all {
    padding: 10px 14px 0;
    text-align: center;
}

.notification-view-all a {
    display: block;
    padding: 9px 12px;
    color: #16a34a;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
}

.notification-view-all a:hover {
    background: rgba(34, 197, 94, 0.09);
}

.notifications-page {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.notifications-hero {
    margin-bottom: 22px;
    padding: 25px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    box-shadow: var(--shadow-small);
}

.notifications-eyebrow {
    color: #16a34a;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.notifications-hero h2 {
    margin-top: 5px;
    color: var(--text-dark, #0f172a);
    font-size: 27px;
}

.notifications-hero p {
    margin-top: 6px;
    color: var(--text-muted, #64748b);
}

.notifications-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.notifications-summary-grid {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.notifications-summary-card {
    padding: 20px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    box-shadow: var(--shadow-small);
}

.notifications-summary-card small {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted, #64748b);
    font-weight: 700;
}

.notifications-summary-card strong {
    color: var(--text-dark, #0f172a);
    font-size: 26px;
}

.notifications-summary-card.unread {
    border-color: rgba(34, 197, 94, 0.45);
}

.notifications-filters {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.notifications-filters a {
    padding: 9px 15px;
    background: var(--surface, #ffffff);
    color: var(--text-normal, #334155);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.notifications-filters a.active {
    background: var(--primary-dark, #081b38);
    color: #ffffff;
    border-color: var(--primary-dark, #081b38);
}

.notifications-panel {
    overflow: hidden;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    box-shadow: var(--shadow-small);
}

.notifications-row {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--border, #e2e8f0);
}

.notifications-row:last-child {
    border-bottom: none;
}

.notifications-row.unread {
    background: rgba(34, 197, 94, 0.07);
}

.notifications-row-main {
    min-width: 0;
    flex: 1;
    padding: 18px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.notifications-row-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, 0.14);
    color: #16a34a;
    border-radius: 50%;
    font-weight: 900;
}

.notifications-row-content {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.notifications-row-heading {
    display: flex;
    align-items: center;
    gap: 9px;
}

.notifications-row-heading strong {
    color: var(--text-dark, #0f172a);
    font-size: 15px;
}

.notifications-status {
    padding: 3px 7px;
    background: #22c55e;
    color: #ffffff;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.notifications-row-message {
    color: var(--text-normal, #334155);
    font-size: 13px;
    line-height: 1.5;
}

.notifications-row-content small {
    color: var(--text-muted, #64748b);
    font-size: 11px;
}

.notifications-row-actions {
    padding: 14px 18px 14px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.notifications-empty {
    padding: 55px 25px;
    text-align: center;
}

.notifications-empty-icon {
    margin-bottom: 12px;
    font-size: 34px;
}

.notifications-empty h3 {
    color: var(--text-dark, #0f172a);
}

.notifications-empty p {
    margin-top: 5px;
    color: var(--text-muted, #64748b);
}

[data-theme="dark"] .notifications-row.unread {
    background: rgba(34, 197, 94, 0.11);
}

@media (max-width: 760px) {
    .notifications-hero {
        flex-direction: column;
    }

    .notifications-hero-actions,
    .notifications-hero-actions form,
    .notifications-hero-actions .btn {
        width: 100%;
    }

    .notifications-summary-grid {
        grid-template-columns: 1fr;
    }

    .notifications-row {
        align-items: stretch;
        flex-direction: column;
    }

    .notifications-row-actions {
        padding: 0 18px 18px;
    }
}


/* =========================================================
   PREMIUM DASHBOARD REDESIGN
========================================================= */

.premium-dashboard,
.dashboard-index-page {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
    padding: 30px 34px 44px;
}

.premium-dashboard-heading,
.dashboard-index-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.dashboard-kicker {
    display: block;
    margin-bottom: 7px;
    color: #22c55e;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.premium-dashboard-heading h1,
.dashboard-index-heading h1 {
    color: var(--text-dark);
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.1;
}

.premium-dashboard-heading p,
.dashboard-index-heading p {
    max-width: 690px;
    margin-top: 8px;
    color: var(--text-muted);
}

.dashboard-heading-actions,
.market-feed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wealth-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(290px, .7fr);
    gap: 18px;
    margin-bottom: 18px;
}

.wealth-total-card,
.dashboard-spotlight-card,
.premium-stat-card,
.premium-panel,
.dashboard-index-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-small);
}

.wealth-total-card {
    padding: 26px 28px;
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, .18), transparent 34%),
        linear-gradient(135deg, #081b38, #0d2b52);
    color: white;
}

.wealth-total-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.wealth-total-top span:first-child,
.dashboard-spotlight-label {
    display: block;
    color: #a9bad0;
    font-size: 13px;
    font-weight: 700;
}

.wealth-total-top strong {
    display: block;
    margin-top: 8px;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1;
}

.wealth-total-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .08);
    color: #4ade80;
    font-size: 28px;
}

.wealth-total-bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.wealth-total-bottom small {
    display: block;
    margin-bottom: 5px;
    color: #9eb0c7;
}

.wealth-total-bottom strong {
    color: white;
    font-size: 17px;
}

.dashboard-spotlight-card {
    padding: 26px;
    background: var(--surface);
}

.dashboard-spotlight-card > strong {
    display: block;
    margin: 12px 0;
    font-size: clamp(28px, 4vw, 40px);
}

.dashboard-spotlight-card p {
    color: var(--text-muted);
    font-size: 14px;
}

.dashboard-spotlight-card a {
    display: inline-block;
    margin-top: 22px;
    color: #22c55e;
    font-weight: 800;
}

.positive {
    color: #16a34a !important;
}

.negative {
    color: #dc2626 !important;
}

.neutral {
    color: var(--text-dark) !important;
}

.premium-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.premium-stat-card {
    position: relative;
    min-width: 0;
    padding: 19px 20px;
    background: var(--surface);
}

.premium-stat-card small {
    display: block;
    padding-right: 42px;
    color: var(--text-muted);
    font-weight: 700;
}

.premium-stat-card strong {
    display: block;
    margin-top: 9px;
    color: var(--text-dark);
    font-size: clamp(18px, 2vw, 24px);
    overflow-wrap: anywhere;
}

.premium-stat-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(34, 197, 94, .11);
    color: #16a34a;
    font-weight: 900;
}

.dashboard-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .65fr);
    gap: 18px;
    margin-bottom: 18px;
}

.premium-panel {
    min-width: 0;
    padding: 22px;
    background: var(--surface);
}

.premium-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.premium-panel-heading span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.premium-panel-heading h2 {
    margin-top: 4px;
    color: var(--text-dark);
    font-size: 20px;
}

.premium-panel-heading a {
    color: #16a34a;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.premium-chart-container {
    position: relative;
    height: 330px;
}

.premium-donut-container {
    position: relative;
    height: 270px;
}

.allocation-total {
    margin-top: 14px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.allocation-total small,
.allocation-total strong {
    display: block;
}

.allocation-total small {
    color: var(--text-muted);
}

.allocation-total strong {
    margin-top: 4px;
    color: var(--text-dark);
}

.dashboard-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.dashboard-bottom-grid {
    align-items: start;
}

.dashboard-list,
.holding-list,
.dashboard-goals-list {
    display: grid;
    gap: 4px;
}

.dashboard-list-item,
.dashboard-index-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 14px 6px;
    border-bottom: 1px solid var(--border);
}

.dashboard-list-item:last-child,
.dashboard-index-row:last-child {
    border-bottom: 0;
}

.dashboard-list-item:hover,
.dashboard-index-row:hover {
    background: rgba(37, 99, 235, .04);
}

.dashboard-list-item.unread,
.dashboard-index-row.unread {
    background: rgba(34, 197, 94, .055);
}

.dashboard-list-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 900;
}

.dashboard-list-copy {
    min-width: 0;
}

.dashboard-list-copy strong,
.dashboard-list-copy small {
    display: block;
}

.dashboard-list-copy strong {
    color: var(--text-dark);
}

.dashboard-list-copy small {
    margin-top: 3px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list-meta {
    min-width: 128px;
    text-align: right;
}

.dashboard-list-meta strong,
.dashboard-list-meta small,
.dashboard-list-meta em {
    display: block;
}

.dashboard-list-meta small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.dashboard-list-meta em {
    color: #16a34a;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.holding-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
}

.holding-row:last-child {
    border-bottom: 0;
}

.holding-row > div:last-child {
    text-align: right;
}

.holding-row strong,
.holding-row small {
    display: block;
}

.holding-row strong {
    color: var(--text-dark);
}

.holding-row small {
    margin-top: 3px;
    color: var(--text-muted);
}

.dashboard-goal-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
}

.dashboard-goal-item:last-child {
    border-bottom: 0;
}

.dashboard-goal-item strong,
.dashboard-goal-item small {
    display: block;
}

.dashboard-goal-item strong {
    color: var(--text-dark);
}

.dashboard-goal-item small {
    margin-top: 4px;
    color: var(--text-muted);
}

.dashboard-goal-item > span {
    color: #16a34a;
    font-weight: 900;
}

.dashboard-goal-track {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.dashboard-goal-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.dashboard-empty {
    display: grid;
    place-items: center;
    min-height: 190px;
    padding: 28px;
    color: var(--text-muted);
    text-align: center;
}

.dashboard-empty > span {
    font-size: 30px;
}

.dashboard-empty strong {
    margin-top: 8px;
    color: var(--text-dark);
}

.dashboard-empty p {
    margin-top: 4px;
}

.dashboard-empty.compact {
    min-height: 110px;
}

.dashboard-empty a {
    margin-top: 9px;
    color: #16a34a;
    font-weight: 800;
}

.dashboard-index-heading {
    align-items: center;
}

.dashboard-index-count {
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .11);
    color: #16a34a;
    font-size: 13px;
    font-weight: 900;
}

.dashboard-index-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, .35fr) auto auto;
    gap: 12px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.dashboard-index-filters input,
.dashboard-index-filters select {
    margin: 0;
}

.dashboard-index-card {
    padding: 8px 20px;
    background: var(--surface);
}

.dashboard-index-row {
    padding: 16px 4px;
}

.dashboard-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.dashboard-filter-tabs a {
    padding: 9px 15px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.dashboard-filter-tabs a.active {
    border-color: #16a34a;
    background: #16a34a;
    color: white;
}

.dashboard-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 20px;
}

.dashboard-pagination a {
    color: #16a34a;
    font-weight: 800;
}

.dashboard-pagination span {
    color: var(--text-muted);
    font-size: 13px;
}

[data-theme="dark"] .wealth-total-card {
    border-color: #28405f;
}

[data-theme="dark"] .dashboard-spotlight-card,
[data-theme="dark"] .premium-stat-card,
[data-theme="dark"] .premium-panel,
[data-theme="dark"] .dashboard-index-card,
[data-theme="dark"] .dashboard-index-filters,
[data-theme="dark"] .dashboard-filter-tabs a {
    background: #0f1c2f;
    border-color: #26364d;
}

[data-theme="dark"] .premium-dashboard-heading h1,
[data-theme="dark"] .dashboard-index-heading h1,
[data-theme="dark"] .dashboard-spotlight-card strong,
[data-theme="dark"] .premium-stat-card strong,
[data-theme="dark"] .premium-panel-heading h2,
[data-theme="dark"] .dashboard-list-copy strong,
[data-theme="dark"] .holding-row strong,
[data-theme="dark"] .dashboard-goal-item strong,
[data-theme="dark"] .dashboard-empty strong {
    color: #f8fafc;
}

[data-theme="dark"] .dashboard-list-item,
[data-theme="dark"] .dashboard-index-row,
[data-theme="dark"] .holding-row,
[data-theme="dark"] .dashboard-goal-item,
[data-theme="dark"] .allocation-total {
    border-color: #26364d;
}

[data-theme="dark"] .dashboard-goal-track {
    background: #26364d;
}

@media (max-width: 1180px) {
    .premium-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wealth-hero-grid,
    .dashboard-analytics-grid {
        grid-template-columns: 1fr;
    }

    .allocation-panel {
        min-height: 390px;
    }
}

@media (max-width: 850px) {
    .premium-dashboard,
    .dashboard-index-page {
        padding: 24px 18px 36px;
    }

    .premium-dashboard-heading,
    .dashboard-index-heading {
        display: block;
    }

    .dashboard-heading-actions {
        margin-top: 18px;
    }

    .wealth-total-bottom,
    .dashboard-details-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-index-filters {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .premium-stat-grid {
        grid-template-columns: 1fr;
    }

    .wealth-total-card,
    .dashboard-spotlight-card,
    .premium-panel {
        padding: 18px;
    }

    .wealth-total-bottom {
        gap: 12px;
    }

    .dashboard-list-item,
    .dashboard-index-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dashboard-list-meta {
        grid-column: 2;
        min-width: 0;
        text-align: left;
    }

    .dashboard-list-copy small {
        white-space: normal;
    }
}


/* =========================================================
   DASHBOARD REFERENCE — FINAL CORRECTIONS
========================================================= */

.dashboard-ref-header {
    grid-template-columns: minmax(350px, .85fr) minmax(680px, 1.55fr);
    align-items: center;
}

.dashboard-ref-header h1 {
    max-width: 560px;
    font-size: clamp(34px, 3.2vw, 52px);
}

.dashboard-summary-strip {
    min-height: 112px;
    align-items: center;
}

.summary-strip-card {
    min-width: 0;
}

.summary-strip-card > div {
    min-width: 0;
}

.dashboard-summary-strip strong {
    display: block;
    overflow-wrap: anywhere;
}

.overview-hero-card {
    grid-template-columns: minmax(370px, .9fr) minmax(0, 1.8fr);
}

.overview-chart-box {
    min-height: 250px;
}

.dashboard-main-grid-3 {
    grid-template-columns: minmax(420px, 1.45fr) minmax(350px, 1fr) minmax(320px, .9fr);
}

.dashboard-panel {
    min-width: 0;
}

.recent-item,
.update-item {
    min-width: 0;
}

.recent-main,
.update-content {
    min-width: 0;
}

.recent-main small,
.update-content small {
    overflow-wrap: anywhere;
}

[data-theme="dark"] .dashboard-summary-strip,
[data-theme="dark"] .overview-hero-card,
[data-theme="dark"] .dashboard-mini-card,
[data-theme="dark"] .dashboard-panel {
    background:
        linear-gradient(
            135deg,
            rgba(8, 27, 56, 0.98),
            rgba(13, 43, 82, 0.96)
        ) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] .dashboard-summary-strip strong,
[data-theme="dark"] .overview-title-line h2,
[data-theme="dark"] .overview-left h3,
[data-theme="dark"] .dashboard-mini-card strong,
[data-theme="dark"] .panel-head h3,
[data-theme="dark"] .recent-main strong,
[data-theme="dark"] .update-content strong,
[data-theme="dark"] .goal-card-top strong {
    color: #ffffff !important;
}

[data-theme="dark"] .dashboard-summary-strip small,
[data-theme="dark"] .overview-label,
[data-theme="dark"] .overview-profit-text,
[data-theme="dark"] .dashboard-mini-card small,
[data-theme="dark"] .dashboard-mini-card p,
[data-theme="dark"] .recent-main small,
[data-theme="dark"] .recent-side small,
[data-theme="dark"] .update-content small,
[data-theme="dark"] .update-date,
[data-theme="dark"] .goal-card-top small,
[data-theme="dark"] .goal-card-bottom small,
[data-theme="dark"] .performance-footnote {
    color: #9bb0c9 !important;
}

[data-theme="dark"] .recent-item,
[data-theme="dark"] .update-item,
[data-theme="dark"] .goal-card-mini,
[data-theme="dark"] .create-goal-btn,
[data-theme="dark"] .dashboard-empty-small,
[data-theme="dark"] .performance-chip-tabs span,
[data-theme="dark"] .overview-chart-top span {
    background: rgba(255, 255, 255, 0.045) !important;
    color: #dbeafe;
}

[data-theme="dark"] .recent-item:hover,
[data-theme="dark"] .update-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="light"] .dashboard-summary-strip,
[data-theme="light"] .overview-hero-card,
[data-theme="light"] .dashboard-mini-card,
[data-theme="light"] .dashboard-panel {
    background: #ffffff !important;
    border-color: var(--border) !important;
}

[data-theme="light"] .dashboard-summary-strip strong,
[data-theme="light"] .overview-title-line h2,
[data-theme="light"] .overview-left h3,
[data-theme="light"] .dashboard-mini-card strong,
[data-theme="light"] .panel-head h3,
[data-theme="light"] .recent-main strong,
[data-theme="light"] .update-content strong,
[data-theme="light"] .goal-card-top strong {
    color: var(--text-dark) !important;
}

@media (max-width: 1400px) {
    .dashboard-ref-header,
    .overview-hero-card {
        grid-template-columns: 1fr;
    }

    .dashboard-main-grid-3 {
        grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
    }

    .dashboard-main-grid-3 > .dashboard-col:last-child {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .dashboard-main-grid-3,
    .dashboard-main-grid-3 > .dashboard-col:last-child {
        grid-template-columns: 1fr;
    }

    .dashboard-main-grid-3 > .dashboard-col:last-child {
        grid-column: auto;
    }
}



/* =========================================================
   DASHBOARD REFERENCE LAYOUT
========================================================= */

.dashboard-ref {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 28px 28px 40px;
}

.dashboard-ref-header {
    display: grid;
    grid-template-columns: minmax(350px, .85fr) minmax(680px, 1.55fr);
    gap: 22px;
    align-items: center;
    margin-bottom: 22px;
}

.dashboard-ref-header h1 {
    max-width: 560px;
    color: var(--text-dark);
    font-size: clamp(34px, 3.2vw, 52px);
    line-height: 1.08;
    margin-bottom: 8px;
}

.dashboard-ref-header p {
    color: var(--text-muted);
    font-size: 18px;
}

.dashboard-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    min-height: 112px;
    padding: 14px;
    align-items: center;
    border-radius: 18px;
    box-shadow: var(--shadow-medium);
}

.summary-strip-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px 12px;
    border-right: 1px solid rgba(148, 163, 184, .18);
}

.summary-strip-card:last-child {
    border-right: 0;
}

.summary-strip-card > div {
    min-width: 0;
}

.summary-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(37, 99, 235, .08);
    font-size: 19px;
}

.dashboard-summary-strip small,
.dashboard-summary-strip strong {
    display: block;
}

.dashboard-summary-strip small {
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.dashboard-summary-strip strong {
    color: var(--text-dark);
    font-size: 18px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.overview-hero-card {
    display: grid;
    grid-template-columns: minmax(370px, .9fr) minmax(0, 1.8fr);
    gap: 20px;
    padding: 22px;
    margin-bottom: 18px;
    border-radius: 20px;
    box-shadow: var(--shadow-medium);
}

.overview-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.overview-title-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.overview-title-line h2 {
    color: var(--text-dark);
    font-size: 20px;
}

.overview-status {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(29, 185, 84, .14);
    color: #16a34a;
    font-size: 13px;
    font-weight: 800;
}

.overview-label {
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 14px;
}

.overview-left h3 {
    margin-bottom: 12px;
    color: var(--text-dark);
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.05;
}

.overview-profit-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    font-size: 18px;
    font-weight: 700;
}

.overview-profit-text {
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 500;
}

.overview-btn {
    width: fit-content;
    padding: 14px 22px;
    border-radius: 12px;
}

.overview-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.overview-chart-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.overview-chart-top span {
    padding: 10px 14px;
    border-radius: 12px;
    background: #f8fafc;
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 700;
}

.overview-chart-box {
    position: relative;
    min-height: 250px;
    height: 250px;
}

.dashboard-mini-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.dashboard-mini-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border-radius: 16px;
    box-shadow: var(--shadow-small);
}

.mini-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(37, 99, 235, .08);
    font-size: 18px;
}

.dashboard-mini-card small,
.dashboard-mini-card strong,
.dashboard-mini-card p {
    display: block;
}

.dashboard-mini-card small {
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 13px;
}

.dashboard-mini-card strong {
    margin-bottom: 4px;
    color: var(--text-dark);
    font-size: 19px;
    overflow-wrap: anywhere;
}

.dashboard-mini-card p {
    color: var(--text-muted);
    font-size: 13px;
}

.dashboard-main-grid-3 {
    display: grid;
    grid-template-columns: minmax(420px, 1.45fr) minmax(350px, 1fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: start;
}

.dashboard-col {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.dashboard-panel {
    min-width: 0;
    padding: 20px;
    border-radius: 18px;
    box-shadow: var(--shadow-small);
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.panel-head h3 {
    color: var(--text-dark);
    font-size: 18px;
}

.panel-link,
.panel-link-mini {
    color: #16a34a;
    font-weight: 700;
    font-size: 14px;
}

.performance-chip-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.performance-chip-tabs span {
    padding: 8px 12px;
    border-radius: 10px;
    background: #f8fafc;
    color: var(--text-normal);
    font-size: 13px;
    font-weight: 700;
}

.performance-chip-tabs span.active {
    background: var(--text-dark);
    color: #fff;
}

.dashboard-chart-large {
    position: relative;
    height: 330px;
}

.performance-footnote {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.allocation-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: center;
}

.allocation-chart-wrap {
    position: relative;
    height: 220px;
}

.allocation-legend-custom {
    display: grid;
    gap: 10px;
}

.allocation-legend-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-normal);
    font-size: 14px;
}

.allocation-legend-row strong {
    color: var(--text-dark);
}

.recent-list,
.updates-list,
.goals-box {
    display: grid;
    gap: 12px;
}

.recent-item,
.update-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    min-width: 0;
    padding: 12px;
    border-radius: 14px;
    background: #f8fafc;
    transition: .2s ease;
}

.recent-item:hover,
.update-item:hover {
    background: #eef2f7;
}

.recent-icon,
.update-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(29, 185, 84, .12);
    color: #16a34a;
    font-weight: 800;
}

.recent-main,
.update-content {
    min-width: 0;
}

.recent-main strong,
.update-content strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-dark);
    font-size: 15px;
}

.recent-main small,
.update-content small {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.recent-side {
    text-align: right;
}

.recent-side strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
}

.recent-side small,
.update-date {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.goal-card-mini {
    padding: 14px;
    border-radius: 14px;
    background: #f8fafc;
}

.goal-card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.goal-card-top strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-dark);
}

.goal-card-top small {
    color: var(--text-muted);
    font-size: 13px;
}

.goal-card-top span {
    color: var(--text-dark);
    font-weight: 800;
}

.goal-progress-bar {
    width: 100%;
    height: 8px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.goal-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.goal-card-bottom small {
    color: var(--text-muted);
    font-size: 13px;
}

.create-goal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 12px;
    background: #f8fafc;
    color: #16a34a;
    font-weight: 800;
}

.dashboard-empty-small {
    padding: 18px;
    border-radius: 14px;
    background: #f8fafc;
    color: var(--text-muted);
    text-align: center;
    font-size: 14px;
}

/* Explicit light mode */
html[data-theme="light"] .dashboard-summary-strip,
html[data-theme="light"] .overview-hero-card,
html[data-theme="light"] .dashboard-mini-card,
html[data-theme="light"] .dashboard-panel {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
}

html[data-theme="light"] .dashboard-summary-strip strong,
html[data-theme="light"] .overview-title-line h2,
html[data-theme="light"] .overview-left h3,
html[data-theme="light"] .dashboard-mini-card strong,
html[data-theme="light"] .panel-head h3,
html[data-theme="light"] .recent-main strong,
html[data-theme="light"] .update-content strong,
html[data-theme="light"] .goal-card-top strong,
html[data-theme="light"] .goal-card-top span,
html[data-theme="light"] .allocation-legend-row strong {
    color: #0f172a !important;
}

html[data-theme="light"] .dashboard-summary-strip small,
html[data-theme="light"] .overview-label,
html[data-theme="light"] .overview-profit-text,
html[data-theme="light"] .dashboard-mini-card small,
html[data-theme="light"] .dashboard-mini-card p,
html[data-theme="light"] .performance-footnote,
html[data-theme="light"] .allocation-legend-row,
html[data-theme="light"] .goal-card-top small,
html[data-theme="light"] .goal-card-bottom small,
html[data-theme="light"] .recent-main small,
html[data-theme="light"] .recent-side small,
html[data-theme="light"] .update-content small,
html[data-theme="light"] .update-date {
    color: #64748b !important;
}

/* Explicit dark mode */
html[data-theme="dark"] .dashboard-ref-header h1 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .dashboard-summary-strip,
html[data-theme="dark"] .overview-hero-card,
html[data-theme="dark"] .dashboard-mini-card,
html[data-theme="dark"] .dashboard-panel {
    background:
        linear-gradient(
            135deg,
            rgba(8, 27, 56, .98),
            rgba(13, 43, 82, .96)
        ) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
}

html[data-theme="dark"] .dashboard-summary-strip strong,
html[data-theme="dark"] .overview-title-line h2,
html[data-theme="dark"] .overview-left h3,
html[data-theme="dark"] .dashboard-mini-card strong,
html[data-theme="dark"] .panel-head h3,
html[data-theme="dark"] .recent-main strong,
html[data-theme="dark"] .update-content strong,
html[data-theme="dark"] .goal-card-top strong,
html[data-theme="dark"] .goal-card-top span,
html[data-theme="dark"] .allocation-legend-row strong {
    color: #ffffff !important;
}

html[data-theme="dark"] .dashboard-summary-strip small,
html[data-theme="dark"] .overview-label,
html[data-theme="dark"] .overview-profit-text,
html[data-theme="dark"] .dashboard-mini-card small,
html[data-theme="dark"] .dashboard-mini-card p,
html[data-theme="dark"] .performance-footnote,
html[data-theme="dark"] .allocation-legend-row,
html[data-theme="dark"] .goal-card-top small,
html[data-theme="dark"] .goal-card-bottom small,
html[data-theme="dark"] .recent-main small,
html[data-theme="dark"] .recent-side small,
html[data-theme="dark"] .update-content small,
html[data-theme="dark"] .update-date {
    color: #9bb0c9 !important;
}

html[data-theme="dark"] .recent-item,
html[data-theme="dark"] .update-item,
html[data-theme="dark"] .goal-card-mini,
html[data-theme="dark"] .create-goal-btn,
html[data-theme="dark"] .dashboard-empty-small,
html[data-theme="dark"] .performance-chip-tabs span,
html[data-theme="dark"] .overview-chart-top span {
    background: rgba(255, 255, 255, .045) !important;
    color: #dbeafe;
}

html[data-theme="dark"] .performance-chip-tabs span.active {
    background: #ffffff !important;
    color: #081b38 !important;
}

html[data-theme="dark"] .goal-progress-bar {
    background: rgba(255, 255, 255, .1);
}

@media (max-width: 1500px) {
    .dashboard-mini-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1400px) {
    .dashboard-ref-header,
    .overview-hero-card {
        grid-template-columns: 1fr;
    }

    .dashboard-main-grid-3 {
        grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
    }

    .dashboard-main-grid-3 > .dashboard-col:last-child {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .dashboard-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-main-grid-3,
    .dashboard-main-grid-3 > .dashboard-col:last-child {
        grid-template-columns: 1fr;
    }

    .dashboard-main-grid-3 > .dashboard-col:last-child {
        grid-column: auto;
    }

    .allocation-box {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-ref {
        padding: 20px 16px 32px;
    }

    .dashboard-summary-strip,
    .dashboard-mini-grid {
        grid-template-columns: 1fr;
    }

    .recent-item,
    .update-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .recent-side,
    .update-date {
        grid-column: 2;
        text-align: left;
    }

    .panel-head {
        flex-direction: column;
        align-items: flex-start;
    }
}



/* =========================================================
   EXACT SELECTED DASHBOARD LAYOUT
========================================================= */

.page-heading-bar:has(+ .page-content .exact-dashboard) {
    display: none;
}

.page-content:has(.exact-dashboard) {
    padding: 0;
}

.exact-dashboard {
    width: 100%;
    max-width: 1510px;
    margin: 0 auto;
    padding: 22px 28px 36px;
}

.exact-dashboard-top {
    display: grid;
    grid-template-columns: minmax(390px, .85fr) minmax(700px, 1.55fr);
    align-items: center;
    gap: 28px;
    margin-bottom: 16px;
}

.exact-dashboard-greeting h1 {
    color: var(--text-dark);
    font-size: clamp(34px, 3vw, 48px);
    line-height: 1.06;
}

.exact-dashboard-greeting p {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 16px;
}

.exact-top-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 88px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.exact-top-stat {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 11px;
    padding: 8px 14px;
    border-right: 1px solid var(--border);
}

.exact-top-stat:last-child {
    border-right: 0;
}

.exact-top-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    background: rgba(37, 99, 235, .08);
    font-size: 17px;
    font-weight: 900;
}

.exact-top-stat > div {
    min-width: 0;
}

.exact-top-stat small,
.exact-top-stat strong {
    display: block;
}

.exact-top-stat small {
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 11px;
}

.exact-top-stat strong {
    color: var(--text-dark);
    font-size: 17px;
    overflow-wrap: anywhere;
}

.exact-overview-card {
    display: grid;
    grid-template-columns: minmax(360px, .8fr) minmax(0, 1.8fr);
    gap: 18px;
    min-height: 218px;
    margin-bottom: 16px;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.exact-overview-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.exact-overview-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.exact-overview-title h2 {
    color: var(--text-dark);
    font-size: 18px;
}

.exact-overview-title span {
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .13);
    color: #16a34a;
    font-size: 12px;
    font-weight: 800;
}

.exact-overview-copy > small {
    color: var(--text-muted);
    font-size: 13px;
}

.exact-overview-copy h3 {
    margin: 7px 0 10px;
    color: var(--text-dark);
    font-size: clamp(36px, 4vw, 48px);
    line-height: 1;
}

.exact-overview-profit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 19px;
}

.exact-overview-profit span {
    color: var(--text-muted);
    font-size: 13px;
}

.exact-overview-copy .btn {
    width: fit-content;
}

.exact-overview-chart-area {
    position: relative;
    min-width: 0;
    padding-top: 24px;
}

.exact-period-select {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f8fafc;
    color: var(--text-dark);
    font-size: 12px;
    font-weight: 700;
}

.exact-hero-chart {
    position: relative;
    height: 185px;
}

.exact-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 16px;
}

.exact-kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    min-height: 94px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.exact-kpi-card > span {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    border-radius: 10px;
    background: rgba(37, 99, 235, .08);
}

.exact-kpi-card > div {
    min-width: 0;
}

.exact-kpi-card small,
.exact-kpi-card strong,
.exact-kpi-card p {
    display: block;
}

.exact-kpi-card small {
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 11px;
}

.exact-kpi-card strong {
    margin-bottom: 4px;
    color: var(--text-dark);
    font-size: 17px;
    overflow-wrap: anywhere;
}

.exact-kpi-card p {
    color: var(--text-muted);
    font-size: 11px;
}

.exact-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(470px, 1.45fr) minmax(340px, 1fr) minmax(315px, .9fr);
    align-items: start;
    gap: 16px;
}

.exact-middle-column,
.exact-right-column {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.exact-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.exact-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.exact-panel-head h2 {
    color: var(--text-dark);
    font-size: 17px;
}

.exact-panel-head a,
.exact-view-link {
    color: #16a34a;
    font-size: 12px;
    font-weight: 800;
}

.exact-period-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.exact-period-tabs span {
    padding: 7px 10px;
    border-radius: 9px;
    background: #f8fafc;
    color: var(--text-normal);
    font-size: 11px;
    font-weight: 700;
}

.exact-period-tabs span.active {
    background: var(--text-dark);
    color: #ffffff;
}

.exact-performance-chart {
    position: relative;
    height: 300px;
}

.exact-chart-note {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 11px;
}

.exact-allocation-content {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(110px, .75fr);
    align-items: center;
    gap: 12px;
}

.exact-allocation-chart {
    position: relative;
    height: 190px;
}

.exact-allocation-legend {
    display: grid;
    gap: 9px;
}

.exact-allocation-legend > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    color: var(--text-normal);
    font-size: 12px;
}

.exact-allocation-legend span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.exact-allocation-legend strong {
    color: var(--text-dark);
}

.allocation-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.allocation-dot-1 { background: #22c55e; }
.allocation-dot-2 { background: #3b82f6; }
.allocation-dot-3 { background: #8b5cf6; }
.allocation-dot-4 { background: #f59e0b; }
.allocation-dot-5 { background: #06b6d4; }
.allocation-dot-6 { background: #ef4444; }

.exact-list {
    display: grid;
    gap: 8px;
}

.exact-list-item,
.exact-update-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border-radius: 12px;
    background: #f8fafc;
}

.exact-list-icon,
.exact-update-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
    font-weight: 900;
}

.exact-list-copy {
    min-width: 0;
}

.exact-list-copy strong,
.exact-list-copy small {
    display: block;
}

.exact-list-copy strong {
    margin-bottom: 3px;
    color: var(--text-dark);
    font-size: 13px;
}

.exact-list-copy small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.exact-list-side {
    min-width: 95px;
    text-align: right;
}

.exact-list-side strong,
.exact-list-side small {
    display: block;
}

.exact-list-side strong {
    margin-bottom: 3px;
    font-size: 12px;
}

.exact-list-side small,
.exact-update-date {
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
}

.exact-goal-card,
.exact-goal-empty {
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
}

.exact-goal-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.exact-goal-top strong,
.exact-goal-top small {
    display: block;
}

.exact-goal-top strong {
    color: var(--text-dark);
    font-size: 13px;
}

.exact-goal-top small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10px;
}

.exact-goal-top b {
    color: var(--text-dark);
    font-size: 13px;
}

.exact-goal-track {
    height: 7px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.exact-goal-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.exact-goal-bottom {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.exact-goal-bottom small {
    color: var(--text-muted);
    font-size: 10px;
}

.exact-create-goal {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-top: 9px;
    border-radius: 11px;
    background: #f8fafc;
    color: #16a34a;
    font-size: 12px;
    font-weight: 800;
}

.exact-empty {
    padding: 16px;
    border-radius: 12px;
    background: #f8fafc;
    color: var(--text-muted);
    text-align: center;
    font-size: 11px;
}

.exact-updates-panel .exact-update-item {
    padding: 11px;
}

html[data-theme="dark"] .exact-dashboard-greeting h1,
html[data-theme="dark"] .exact-top-stat strong,
html[data-theme="dark"] .exact-overview-title h2,
html[data-theme="dark"] .exact-overview-copy h3,
html[data-theme="dark"] .exact-kpi-card strong,
html[data-theme="dark"] .exact-panel-head h2,
html[data-theme="dark"] .exact-allocation-legend strong,
html[data-theme="dark"] .exact-list-copy strong,
html[data-theme="dark"] .exact-goal-top strong,
html[data-theme="dark"] .exact-goal-top b {
    color: #ffffff;
}

html[data-theme="dark"] .exact-top-summary,
html[data-theme="dark"] .exact-overview-card,
html[data-theme="dark"] .exact-kpi-card,
html[data-theme="dark"] .exact-panel {
    background: #0d2b52;
    border-color: #23456d;
}

html[data-theme="dark"] .exact-list-item,
html[data-theme="dark"] .exact-update-item,
html[data-theme="dark"] .exact-goal-card,
html[data-theme="dark"] .exact-goal-empty,
html[data-theme="dark"] .exact-create-goal,
html[data-theme="dark"] .exact-empty,
html[data-theme="dark"] .exact-period-tabs span,
html[data-theme="dark"] .exact-period-select {
    background: rgba(255, 255, 255, .045);
}

html[data-theme="dark"] .exact-top-stat small,
html[data-theme="dark"] .exact-overview-copy > small,
html[data-theme="dark"] .exact-overview-profit span,
html[data-theme="dark"] .exact-kpi-card small,
html[data-theme="dark"] .exact-kpi-card p,
html[data-theme="dark"] .exact-chart-note,
html[data-theme="dark"] .exact-allocation-legend,
html[data-theme="dark"] .exact-list-copy small,
html[data-theme="dark"] .exact-list-side small,
html[data-theme="dark"] .exact-update-date,
html[data-theme="dark"] .exact-goal-top small,
html[data-theme="dark"] .exact-goal-bottom small {
    color: #a9bdd4;
}

html[data-theme="dark"] .exact-period-tabs span {
    color: #dbeafe;
}

html[data-theme="dark"] .exact-period-tabs span.active {
    background: #ffffff;
    color: #081b38;
}

@media (max-width: 1350px) {
    .exact-dashboard-top,
    .exact-overview-card {
        grid-template-columns: 1fr;
    }

    .exact-dashboard-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(330px, 1fr);
    }

    .exact-right-column {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .exact-top-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exact-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .exact-dashboard-grid,
    .exact-right-column {
        grid-template-columns: 1fr;
    }

    .exact-right-column {
        grid-column: auto;
    }
}

@media (max-width: 720px) {
    .exact-dashboard {
        padding: 18px 14px 30px;
    }

    .exact-top-summary,
    .exact-kpi-grid {
        grid-template-columns: 1fr;
    }

    .exact-top-stat {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .exact-top-stat:last-child {
        border-bottom: 0;
    }

    .exact-allocation-content {
        grid-template-columns: 1fr;
    }

    .exact-list-item,
    .exact-update-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .exact-list-side,
    .exact-update-date {
        grid-column: 2;
        text-align: left;
    }
}



/* =========================================================
   EXACT DASHBOARD — COLOUR AND INTERACTION CORRECTIONS
========================================================= */

:root {
    --exact-dashboard-surface: #ffffff;
    --exact-dashboard-border: #e2e8f0;
}

html[data-theme="dark"] {
    --exact-dashboard-surface: #0d213b;
    --exact-dashboard-border: #203a5b;
}

.exact-dashboard-greeting h1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 1px;
    max-width: 540px;
    font-size: clamp(31px, 2.55vw, 43px);
}

.exact-user-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.exact-wave {
    flex: 0 0 auto;
    font-size: .9em;
}

.exact-top-summary,
.exact-overview-card,
.exact-kpi-card,
.exact-panel {
    background: var(--exact-dashboard-surface) !important;
    border-color: var(--exact-dashboard-border) !important;
}

html[data-theme="dark"] .exact-top-summary,
html[data-theme="dark"] .exact-overview-card,
html[data-theme="dark"] .exact-kpi-card,
html[data-theme="dark"] .exact-panel {
    background:
        linear-gradient(
            135deg,
            #0b1f38 0%,
            #0d2747 100%
        ) !important;
}

.exact-period-select {
    padding: 0;
    overflow: hidden;
}

.exact-period-select select {
    width: auto;
    min-width: 94px;
    padding: 8px 30px 8px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    outline: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
}

.exact-period-tabs button {
    min-height: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    background: #f8fafc;
    color: var(--text-normal);
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.exact-period-tabs button:hover {
    transform: translateY(-1px);
    background: #e9eef5;
}

.exact-period-tabs button.active {
    background: var(--text-dark);
    color: #ffffff;
}

html[data-theme="dark"] .exact-period-tabs button {
    background: rgba(255, 255, 255, .055);
    color: #dbeafe;
}

html[data-theme="dark"] .exact-period-tabs button:hover {
    background: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .exact-period-tabs button.active {
    background: #ffffff;
    color: #081b38;
}

html[data-theme="dark"] .exact-period-select select {
    color: #ffffff;
}

html[data-theme="dark"] .exact-period-select select option {
    background: #0d213b;
    color: #ffffff;
}

@media (max-width: 700px) {
    .exact-dashboard-greeting h1 {
        font-size: clamp(28px, 9vw, 38px);
    }
}



/* =========================================================
   DASHBOARD CARDS MATCH CONTRIBUTION PAGE
   Final override — keep this at the very bottom
========================================================= */

html[data-theme="dark"] .exact-top-summary,
html[data-theme="dark"] .exact-overview-card,
html[data-theme="dark"] .exact-kpi-card,
html[data-theme="dark"] .exact-panel {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-small) !important;
}

html[data-theme="dark"] .exact-list-item,
html[data-theme="dark"] .exact-update-item,
html[data-theme="dark"] .exact-goal-card,
html[data-theme="dark"] .exact-goal-empty,
html[data-theme="dark"] .exact-create-goal,
html[data-theme="dark"] .exact-empty {
    background: #182235 !important;
    border: 1px solid #243244;
}

html[data-theme="dark"] .exact-period-tabs button,
html[data-theme="dark"] .exact-period-select {
    background: #182235 !important;
    border: 1px solid #243244;
}

html[data-theme="dark"] .exact-period-tabs button:hover {
    background: #1d2a3d !important;
}

html[data-theme="dark"] .exact-period-tabs button.active {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #f8fafc;
}

html[data-theme="dark"] .exact-top-stat {
    border-right-color: var(--border);
}

html[data-theme="dark"] .exact-top-icon,
html[data-theme="dark"] .exact-kpi-card > span,
html[data-theme="dark"] .exact-list-icon,
html[data-theme="dark"] .exact-update-icon {
    background: #182235;
    border: 1px solid #243244;
}

html[data-theme="dark"] .exact-goal-track {
    background: #243244;
}

/* Light mode remains identical to the existing app cards */
html[data-theme="light"] .exact-top-summary,
html[data-theme="light"] .exact-overview-card,
html[data-theme="light"] .exact-kpi-card,
html[data-theme="light"] .exact-panel {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-small) !important;
}



/* =========================================================
   INVESTMENTS STAGE 2 LAYOUT FIX
   Keeps all six summary cards on one row on wide screens
   and makes the investment table easier to view.
========================================================= */

.portfolio-summary-bar {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: stretch;
}

.portfolio-summary-item {
    padding: 8px 16px !important;
}

.portfolio-summary-item:first-child {
    padding-left: 6px !important;
}

.portfolio-summary-item:last-child {
    padding-right: 6px !important;
}

.investment-summary-note {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.3;
}

html[data-theme="dark"] .investment-summary-note {
    color: #aeb9c8;
}

/* Make the ten-column table more compact on desktop. */
.investments-page .investment-table {
    width: 100%;
    min-width: 1180px;
    table-layout: auto;
}

.investments-page .investment-table th {
    padding: 14px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.investments-page .investment-table td {
    padding: 17px 10px;
    font-size: 13px;
    white-space: nowrap;
}

.investments-page .investment-name-wrap {
    max-width: 210px;
}

.investments-page .investment-name,
.investments-page .investment-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.investments-page .table-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
}

.investments-page .table-actions form {
    display: inline-flex;
    margin: 0;
}

.investments-page .btn-small {
    min-width: 48px;
    min-height: 34px;
    padding: 7px 9px;
    font-size: 12px;
}

@media (max-width: 1350px) {
    .portfolio-summary-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .portfolio-summary-item {
        border-right: none;
        border-bottom: 1px solid var(--portfolio-border);
    }

    .portfolio-summary-item:nth-child(3n + 1),
    .portfolio-summary-item:nth-child(3n + 2) {
        border-right: 1px solid var(--portfolio-border);
    }

    .portfolio-summary-item:nth-last-child(-n + 3) {
        border-bottom: none;
    }
}

@media (max-width: 850px) {
    .portfolio-summary-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .portfolio-summary-item:nth-child(3n + 1),
    .portfolio-summary-item:nth-child(3n + 2) {
        border-right: none;
    }

    .portfolio-summary-item:nth-child(odd) {
        border-right: 1px solid var(--portfolio-border);
    }

    .portfolio-summary-item:nth-last-child(-n + 3) {
        border-bottom: 1px solid var(--portfolio-border);
    }

    .portfolio-summary-item:nth-last-child(-n + 2) {
        border-bottom: none;
    }
}

@media (max-width: 560px) {
    .portfolio-summary-bar {
        grid-template-columns: 1fr !important;
    }

    .portfolio-summary-item,
    .portfolio-summary-item:nth-child(odd),
    .portfolio-summary-item:nth-child(3n + 1),
    .portfolio-summary-item:nth-child(3n + 2) {
        border-right: none;
        border-bottom: 1px solid var(--portfolio-border);
    }

    .portfolio-summary-item:last-child {
        border-bottom: none;
    }
}



/* =========================================================
   ETF NAME / INVESTMENT COLUMN FIX
========================================================= */

.investments-page .investment-table {
    min-width: 1260px;
    table-layout: fixed;
}

.investment-col-type {
    width: 74px;
}

.investment-col-name {
    width: 240px;
}

.investment-col-units {
    width: 76px;
}

.investment-col-price {
    width: 112px;
}

.investment-col-money {
    width: 118px;
}

.investment-col-return {
    width: 82px;
}

.investment-col-actions {
    width: 250px;
}

.investments-page .investment-name-wrap {
    display: grid;
    gap: 3px;
    width: 100%;
    max-width: 220px;
    min-width: 0;
}

.investments-page .investment-name {
    display: block;
    min-width: 0;
    color: var(--text-dark);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.investments-page .investment-meta {
    display: block;
    min-width: 0;
    max-width: 100%;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.investments-page .investment-category {
    font-size: 10px;
}

html[data-theme="dark"] .investments-page .investment-name {
    color: #ffffff;
}

html[data-theme="dark"] .investments-page .investment-meta {
    color: #aeb9c8;
}

/* Keep numeric columns separated from long ETF names. */
.investments-page .investment-table th,
.investments-page .investment-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.investments-page .investment-table td:nth-child(n + 3):nth-child(-n + 9),
.investments-page .investment-table th:nth-child(n + 3):nth-child(-n + 9) {
    text-align: left;
}

.investments-page .investment-table td:last-child,
.investments-page .investment-table th:last-child {
    overflow: visible;
}



/* =========================================================
   REPORTS PAGE
========================================================= */

.reports-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.reports-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.reports-heading h1 {
    color: var(--text-dark);
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.15;
}

.reports-heading p {
    max-width: 720px;
    margin-top: 8px;
    color: var(--text-muted);
}

.reports-heading-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reports-period-form select {
    min-width: 170px;
}

.reports-meta-bar,
.reports-metric-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

.reports-meta-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-small);
}

.reports-meta-bar small,
.reports-meta-bar strong {
    display: block;
}

.reports-meta-bar small {
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 12px;
}

.reports-meta-bar strong {
    color: var(--text-dark);
    font-size: 15px;
}

.reports-metric-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.reports-metric-card {
    min-width: 0;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow-small);
}

.reports-metric-card small,
.reports-metric-card strong,
.reports-metric-card span {
    display: block;
}

.reports-metric-card small {
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.reports-metric-card strong {
    margin-bottom: 6px;
    color: var(--text-dark);
    font-size: 19px;
    overflow-wrap: anywhere;
}

.reports-metric-card span {
    color: var(--text-muted);
    font-size: 11px;
}

.reports-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.reports-card {
    min-width: 0;
    margin-bottom: 20px;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 17px;
    box-shadow: var(--shadow-small);
}

.reports-two-column .reports-card {
    margin-bottom: 0;
}

.reports-card-heading {
    margin-bottom: 18px;
}

.reports-card-heading h2 {
    color: var(--text-dark);
    font-size: 19px;
}

.reports-card-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 13px;
}

.reports-summary-list {
    display: grid;
    gap: 2px;
}

.reports-summary-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.reports-summary-list > div:last-child {
    border-bottom: 0;
}

.reports-summary-list span {
    color: var(--text-muted);
}

.reports-summary-list strong {
    color: var(--text-dark);
}

.reports-return-equation {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr) auto) minmax(0, 1.2fr);
    align-items: center;
    gap: 10px;
}

.reports-return-equation > div {
    min-width: 0;
    padding: 14px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.reports-return-equation span,
.reports-return-equation strong {
    display: block;
}

.reports-return-equation span {
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 11px;
}

.reports-return-equation strong {
    color: var(--text-dark);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.reports-return-equation > b {
    color: var(--text-muted);
}

.reports-return-total {
    border-color: rgba(29, 185, 84, .4) !important;
    background: rgba(29, 185, 84, .08) !important;
}

.reports-table {
    min-width: 900px;
}

.reports-table td strong {
    color: var(--text-dark);
}

.reports-history-list {
    display: grid;
    gap: 10px;
}

.reports-history-item {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(105px, .7fr));
    align-items: center;
    gap: 14px;
    padding: 13px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.reports-dividend-item {
    grid-template-columns: minmax(0, 1fr) auto;
}

.reports-history-item strong,
.reports-history-item small {
    display: block;
}

.reports-history-item strong {
    color: var(--text-dark);
}

.reports-history-item small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
}

.reports-empty-state {
    padding: 28px 18px;
    background: var(--background);
    border: 1px dashed var(--border);
    border-radius: 13px;
    color: var(--text-muted);
    text-align: center;
}

.reports-information-note {
    padding: 15px 17px;
    background: rgba(37, 99, 235, .08);
    color: var(--text-normal);
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 12px;
    font-size: 13px;
}

html[data-theme="dark"] .reports-meta-bar,
html[data-theme="dark"] .reports-metric-card,
html[data-theme="dark"] .reports-card {
    background: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] .reports-meta-bar strong,
html[data-theme="dark"] .reports-metric-card strong,
html[data-theme="dark"] .reports-card-heading h2,
html[data-theme="dark"] .reports-summary-list strong,
html[data-theme="dark"] .reports-return-equation strong,
html[data-theme="dark"] .reports-history-item strong,
html[data-theme="dark"] .reports-table td strong {
    color: #f8fafc;
}

@media (max-width: 1350px) {
    .reports-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .reports-return-equation {
        grid-template-columns: 1fr;
    }

    .reports-return-equation > b {
        text-align: center;
    }
}

@media (max-width: 900px) {
    .reports-page {
        padding: 25px 18px;
    }

    .reports-heading,
    .reports-heading-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .reports-meta-bar,
    .reports-two-column {
        grid-template-columns: 1fr;
    }

    .reports-history-item {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .reports-metric-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    .sidebar,
    .navbar,
    .page-heading-bar,
    .reports-heading-actions,
    .sidebar-overlay {
        display: none !important;
    }

    .main-content,
    .main-content.sidebar-collapsed {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .page-content,
    .reports-page {
        padding: 0 !important;
    }

    .reports-page {
        max-width: none;
    }

    .reports-card,
    .reports-metric-card,
    .reports-meta-bar {
        break-inside: avoid;
        box-shadow: none !important;
    }
}



/* =========================================================
   WATCHLIST PAGE
========================================================= */

.watchlist-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.watchlist-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.watchlist-heading h1 {
    color: var(--text-dark);
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.15;
}

.watchlist-heading p {
    max-width: 700px;
    margin-top: 8px;
    color: var(--text-muted);
}

.watchlist-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.watchlist-summary-card,
.watchlist-form-card,
.watchlist-table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-small);
}

.watchlist-summary-card {
    min-width: 0;
    padding: 19px;
    border-radius: 15px;
}

.watchlist-summary-card small,
.watchlist-summary-card strong,
.watchlist-summary-card span {
    display: block;
}

.watchlist-summary-card small {
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.watchlist-summary-card strong {
    margin-bottom: 5px;
    color: var(--text-dark);
    font-size: 25px;
}

.watchlist-summary-card span {
    color: var(--text-muted);
    font-size: 11px;
}

.watchlist-layout {
    display: grid;
    grid-template-columns: minmax(285px, 360px) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.watchlist-form-card,
.watchlist-table-card {
    min-width: 0;
    padding: 22px;
    border-radius: 17px;
}

.watchlist-form-card {
    position: sticky;
    top: 90px;
}

.watchlist-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.watchlist-card-heading h2 {
    color: var(--text-dark);
    font-size: 19px;
}

.watchlist-card-heading p {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.watchlist-count-badge {
    min-width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0 9px;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.watchlist-price-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.watchlist-money-input {
    position: relative;
}

.watchlist-money-input > span {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-weight: 700;
    pointer-events: none;
}

.watchlist-money-input input {
    padding-left: 31px;
}

.watchlist-submit-button {
    width: 100%;
}

.watchlist-table {
    min-width: 1120px;
}

.watchlist-table th,
.watchlist-table td {
    vertical-align: middle;
}

.watchlist-investment-name {
    display: grid;
    gap: 4px;
}

.watchlist-investment-name strong {
    color: var(--text-dark);
    font-size: 14px;
}

.watchlist-investment-name small,
.watchlist-distance small {
    color: var(--text-muted);
    font-size: 10px;
}

.watchlist-distance {
    display: grid;
    gap: 3px;
}

.watchlist-muted-value {
    color: var(--text-muted);
    font-size: 12px;
}

.watchlist-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.watchlist-status.target-reached {
    background: rgba(22, 163, 74, .12);
    color: #16a34a;
}

.watchlist-status.watching {
    background: rgba(37, 99, 235, .11);
    color: #2563eb;
}

.watchlist-status.incomplete {
    background: rgba(245, 158, 11, .13);
    color: #b45309;
}

.watchlist-notes {
    display: block;
    max-width: 190px;
    color: var(--text-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watchlist-table .table-actions {
    flex-wrap: nowrap;
}

.watchlist-table .table-actions form {
    display: inline-flex;
    margin: 0;
}

.watchlist-empty-state {
    min-height: 390px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
}

.watchlist-empty-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 50%;
    font-size: 34px;
}

.watchlist-empty-state h2 {
    color: var(--text-dark);
    font-size: 22px;
}

.watchlist-empty-state p {
    max-width: 430px;
    color: var(--text-muted);
    line-height: 1.5;
}

html[data-theme="dark"] .watchlist-summary-card,
html[data-theme="dark"] .watchlist-form-card,
html[data-theme="dark"] .watchlist-table-card {
    background: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] .watchlist-summary-card strong,
html[data-theme="dark"] .watchlist-card-heading h2,
html[data-theme="dark"] .watchlist-investment-name strong,
html[data-theme="dark"] .watchlist-empty-state h2 {
    color: #f8fafc;
}

html[data-theme="dark"] .watchlist-notes {
    color: #d6deea;
}

html[data-theme="dark"] .watchlist-status.watching {
    color: #93c5fd;
}

html[data-theme="dark"] .watchlist-status.incomplete {
    color: #fcd34d;
}

@media (max-width: 1250px) {
    .watchlist-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .watchlist-layout {
        grid-template-columns: 1fr;
    }

    .watchlist-form-card {
        position: static;
    }
}

@media (max-width: 700px) {
    .watchlist-page {
        padding: 25px 18px;
    }

    .watchlist-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .watchlist-summary-grid,
    .watchlist-price-fields {
        grid-template-columns: 1fr;
    }

    .watchlist-form-card,
    .watchlist-table-card {
        padding: 18px;
    }
}



/* =========================================================
   WATCHLIST TICKER AUTOCOMPLETE
========================================================= */

.watchlist-ticker-search {
    position: relative;
}

.watchlist-ticker-suggestions {
    position: absolute;
    z-index: 80;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    max-height: 310px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 13px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
}

.watchlist-suggestion-item {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px 13px;
    background: transparent;
    color: var(--text-normal);
    border: 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    cursor: pointer;
}

.watchlist-suggestion-item:last-child {
    border-bottom: 0;
}

.watchlist-suggestion-item:hover,
.watchlist-suggestion-item:focus {
    background: rgba(37, 99, 235, .08);
    outline: none;
}

.watchlist-suggestion-main {
    display: grid;
    gap: 3px;
}

.watchlist-suggestion-main strong {
    color: var(--text-dark);
    font-size: 13px;
    letter-spacing: .02em;
}

.watchlist-suggestion-main small {
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
}

.watchlist-suggestion-name {
    min-width: 0;
    color: var(--text-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watchlist-suggestion-empty {
    padding: 14px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

html[data-theme="dark"] .watchlist-ticker-suggestions {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .watchlist-suggestion-main strong {
    color: #f8fafc;
}

html[data-theme="dark"] .watchlist-suggestion-item:hover,
html[data-theme="dark"] .watchlist-suggestion-item:focus {
    background: rgba(59, 130, 246, .14);
}

@media (max-width: 700px) {
    .watchlist-suggestion-item {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}



/* =========================================================
   WATCHLIST LIVE PRICE AUTO-FILL
========================================================= */

#watchlistCurrentPrice[readonly] {
    background: var(--background);
    cursor: not-allowed;
}

.watchlist-live-price-note {
    display: block;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.watchlist-live-price-note.price-available {
    color: #16a34a;
}

.watchlist-live-price-note.price-unavailable {
    color: #dc2626;
}

html[data-theme="dark"] #watchlistCurrentPrice[readonly] {
    background: rgba(15, 23, 42, .55);
}

html[data-theme="dark"] .watchlist-live-price-note.price-available {
    color: #86efac;
}

html[data-theme="dark"] .watchlist-live-price-note.price-unavailable {
    color: #fca5a5;
}



/* WATCHLIST TARGET DIRECTION UPDATE */
.watchlist-distance .value-normal {
    color: var(--text-normal);
}

html[data-theme="dark"] .watchlist-distance .value-normal {
    color: #d6deea;
}



/* =========================================================
   NOTIFICATION CENTRE — STAGE 6
========================================================= */

.notifications-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.notifications-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.notifications-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.notifications-heading h1 {
    color: var(--text-dark);
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.15;
}

.notifications-heading p {
    max-width: 710px;
    margin-top: 8px;
    color: var(--text-muted);
    line-height: 1.55;
}

.notifications-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.notifications-heading-actions form {
    margin: 0;
}

.notifications-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.notifications-summary-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 19px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow-small);
}

.notifications-summary-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 800;
}

.notifications-summary-card.unread .notifications-summary-icon {
    background: rgba(245, 158, 11, .13);
    color: #d97706;
}

.notifications-summary-card.email-card .notifications-summary-icon {
    background: rgba(22, 163, 74, .11);
    color: #16a34a;
}

.notifications-summary-card small,
.notifications-summary-card strong,
.notifications-summary-card span {
    display: block;
}

.notifications-summary-card small {
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.notifications-summary-card strong {
    color: var(--text-dark);
    font-size: 23px;
}

.notifications-summary-card span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10px;
}

.notifications-layout {
    display: grid;
    grid-template-columns: minmax(235px, 285px) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.notifications-sidebar-card,
.notifications-panel {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 17px;
    box-shadow: var(--shadow-small);
}

.notifications-sidebar-card {
    position: sticky;
    top: 90px;
    padding: 20px;
}

.notifications-card-heading {
    margin-bottom: 16px;
}

.notifications-card-heading h2,
.notifications-panel-heading h2 {
    color: var(--text-dark);
    font-size: 18px;
}

.notifications-card-heading p,
.notifications-panel-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.notifications-status-filters,
.notifications-category-filters {
    display: grid;
    gap: 5px;
}

.notifications-status-filters a,
.notifications-category-filters a {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 11px;
    color: var(--text-normal);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.notifications-category-filters a {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.notifications-status-filters a:hover,
.notifications-category-filters a:hover,
.notifications-status-filters a.active,
.notifications-category-filters a.active {
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
}

.notifications-status-filters strong,
.notifications-category-filters strong {
    color: var(--text-muted);
    font-size: 10px;
}

.notifications-category-title {
    margin: 21px 0 9px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.category-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #64748b;
}

.category-dot.watchlist {
    background: #2563eb;
}

.category-dot.dividend {
    background: #16a34a;
}

.category-dot.goal {
    background: #7c3aed;
}

.category-dot.bond {
    background: #d97706;
}

.category-dot.system {
    background: #64748b;
}

.notifications-email-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 22px;
    padding: 14px;
    background: rgba(37, 99, 235, .06);
    border: 1px solid rgba(37, 99, 235, .13);
    border-radius: 13px;
}

.notifications-email-setting strong,
.notifications-email-setting small {
    display: block;
}

.notifications-email-setting strong {
    color: var(--text-dark);
    font-size: 12px;
}

.notifications-email-setting small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.4;
}

.notification-switch {
    position: relative;
    width: 43px;
    height: 24px;
    flex: 0 0 43px;
}

.notification-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.notification-switch span {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    cursor: pointer;
    transition: .2s ease;
}

.notification-switch span::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 3px;
    left: 3px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(15, 23, 42, .25);
    transition: .2s ease;
}

.notification-switch input:checked + span {
    background: #2563eb;
}

.notification-switch input:checked + span::after {
    transform: translateX(19px);
}

.notifications-panel {
    overflow: hidden;
}

.notifications-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}

.notifications-panel-heading form {
    margin: 0;
}

.notifications-list {
    display: grid;
}

.notifications-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 18px 21px;
    border-bottom: 1px solid var(--border);
    transition: background .18s ease;
}

.notifications-row:last-child {
    border-bottom: 0;
}

.notifications-row:hover {
    background: rgba(148, 163, 184, .06);
}

.notifications-row.unread {
    background: rgba(37, 99, 235, .045);
    box-shadow: inset 3px 0 0 #2563eb;
}

.notifications-row-main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    color: inherit;
    text-decoration: none;
}

.notifications-row-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    background: rgba(100, 116, 139, .11);
    color: #64748b;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 800;
}

.notifications-row-icon.watchlist {
    background: rgba(37, 99, 235, .11);
    color: #2563eb;
}

.notifications-row-icon.dividend {
    background: rgba(22, 163, 74, .11);
    color: #16a34a;
}

.notifications-row-icon.goal {
    background: rgba(124, 58, 237, .11);
    color: #7c3aed;
}

.notifications-row-icon.bond {
    background: rgba(217, 119, 6, .12);
    color: #d97706;
}

.notifications-row-content {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.notifications-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.notifications-category-badge,
.notifications-new-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}

.notifications-category-badge {
    background: rgba(100, 116, 139, .11);
    color: #64748b;
}

.notifications-category-badge.watchlist {
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
}

.notifications-category-badge.dividend {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.notifications-category-badge.goal {
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
}

.notifications-category-badge.bond {
    background: rgba(217, 119, 6, .11);
    color: #d97706;
}

.notifications-new-badge {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.notifications-row-heading strong {
    color: var(--text-dark);
    font-size: 14px;
}

.notifications-row-message {
    max-width: 780px;
    color: var(--text-normal);
    font-size: 12px;
    line-height: 1.55;
}

.notifications-row-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: var(--text-muted);
    font-size: 9px;
}

.notifications-email-status {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    padding: 3px 7px;
    background: rgba(100, 116, 139, .10);
    border-radius: 999px;
    font-weight: 800;
}

.notifications-email-status.sent {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.notifications-email-status.not-sent {
    color: var(--text-muted);
}

.notifications-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.notifications-row-actions form {
    margin: 0;
}

.notifications-empty {
    min-height: 430px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 40px 22px;
    text-align: center;
}

.notifications-empty-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 50%;
    font-size: 31px;
}

.notifications-empty h3 {
    color: var(--text-dark);
    font-size: 21px;
}

.notifications-empty p {
    max-width: 430px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}

html[data-theme="dark"] .notifications-summary-card,
html[data-theme="dark"] .notifications-sidebar-card,
html[data-theme="dark"] .notifications-panel {
    background: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] .notifications-heading h1,
html[data-theme="dark"] .notifications-summary-card strong,
html[data-theme="dark"] .notifications-card-heading h2,
html[data-theme="dark"] .notifications-panel-heading h2,
html[data-theme="dark"] .notifications-email-setting strong,
html[data-theme="dark"] .notifications-row-heading strong,
html[data-theme="dark"] .notifications-empty h3 {
    color: #f8fafc;
}

html[data-theme="dark"] .notifications-row-message {
    color: #d6deea;
}

html[data-theme="dark"] .notifications-row:hover {
    background: rgba(148, 163, 184, .05);
}

html[data-theme="dark"] .notifications-row.unread {
    background: rgba(37, 99, 235, .09);
}

@media (max-width: 1200px) {
    .notifications-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .notifications-layout {
        grid-template-columns: 1fr;
    }

    .notifications-sidebar-card {
        position: static;
    }

    .notifications-status-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .notifications-category-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .notifications-page {
        padding: 25px 18px;
    }

    .notifications-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .notifications-heading-actions {
        justify-content: flex-start;
    }

    .notifications-summary-grid,
    .notifications-status-filters,
    .notifications-category-filters {
        grid-template-columns: 1fr;
    }

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

    .notifications-row-actions {
        justify-content: flex-start;
        padding-left: 55px;
    }
}

@media (max-width: 480px) {
    .notifications-summary-card {
        padding: 16px;
    }

    .notifications-panel-heading {
        flex-direction: column;
    }

    .notifications-row {
        padding: 16px;
    }

    .notifications-row-actions {
        padding-left: 0;
    }
}



/* =========================================================
   SETTINGS — STAGE 7 IMPROVEMENTS
========================================================= */

.settings-inline-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 13px;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.settings-inline-link:hover {
    background: rgba(37, 99, 235, .15);
}

.settings-notification-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 22px;
}

.settings-notification-summary article {
    min-width: 0;
    padding: 17px;
    background: rgba(37, 99, 235, .045);
    border: 1px solid rgba(37, 99, 235, .11);
    border-radius: 13px;
}

.settings-notification-summary small,
.settings-notification-summary strong,
.settings-notification-summary span {
    display: block;
}

.settings-notification-summary small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
}

.settings-notification-summary strong {
    margin: 5px 0;
    color: var(--text-dark);
    font-size: 23px;
}

.settings-notification-summary span {
    color: var(--text-muted);
    font-size: 9px;
}

.settings-notification-form {
    display: grid;
    gap: 18px;
}

.settings-notification-option {
    margin: 0;
    padding: 17px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 13px;
}

.settings-notification-option h4 {
    color: var(--text-dark);
    font-size: 14px;
}

.settings-notification-option p {
    max-width: 650px;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.55;
}

.settings-toggle {
    position: relative;
    width: 48px;
    height: 27px;
    flex: 0 0 48px;
}

.settings-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-toggle span {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    cursor: pointer;
    transition: .2s ease;
}

.settings-toggle span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 21px;
    height: 21px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
    transition: .2s ease;
}

.settings-toggle input:checked + span {
    background: #2563eb;
}

.settings-toggle input:checked + span::after {
    transform: translateX(21px);
}

.settings-notification-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: rgba(22, 163, 74, .065);
    border: 1px solid rgba(22, 163, 74, .15);
    border-radius: 12px;
}

.settings-notification-info-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    background: #16a34a;
    color: #ffffff;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
}

.settings-notification-info strong {
    color: var(--text-dark);
    font-size: 12px;
}

.settings-notification-info p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.settings-security-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 23px;
}

.settings-security-summary article {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    background: rgba(22, 163, 74, .055);
    border: 1px solid rgba(22, 163, 74, .13);
    border-radius: 12px;
}

.settings-security-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    background: rgba(22, 163, 74, .13);
    color: #16a34a;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
}

.settings-security-summary strong,
.settings-security-summary small {
    display: block;
}

.settings-security-summary strong {
    color: var(--text-dark);
    font-size: 11px;
}

.settings-security-summary small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

html[data-theme="dark"] .settings-notification-summary strong,
html[data-theme="dark"] .settings-notification-option h4,
html[data-theme="dark"] .settings-notification-info strong,
html[data-theme="dark"] .settings-security-summary strong {
    color: #f8fafc;
}

html[data-theme="dark"] .settings-notification-option {
    background: rgba(255, 255, 255, .025);
}

@media (max-width: 950px) {
    .settings-notification-summary,
    .settings-security-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .settings-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-inline-link {
        width: 100%;
    }

    .settings-notification-option {
        align-items: flex-start;
        gap: 17px;
    }
}



/* =========================================================
   ACCOUNT OVERVIEW — STAGE 8
========================================================= */

.account-overview-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.account-overview-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.account-overview-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.account-overview-heading h1 {
    color: var(--text-dark);
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.15;
}

.account-overview-heading p {
    margin-top: 8px;
    color: var(--text-muted);
}

.account-profile-card,
.account-stat-card,
.account-activity-card,
.account-quick-actions-card,
.account-summary-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-small);
}

.account-profile-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
    align-items: center;
    gap: 28px;
    padding: 25px;
    border-radius: 18px;
    margin-bottom: 20px;
}

.account-profile-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 20px;
}

.account-profile-avatar {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #ffffff;
    border-radius: 50%;
    font-size: 38px;
    font-weight: 800;
}

.account-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-profile-details {
    min-width: 0;
}

.account-profile-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.account-profile-name-row h2 {
    color: var(--text-dark);
    font-size: 23px;
}

.account-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    background: rgba(22, 163, 74, .11);
    color: #16a34a;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.account-profile-username {
    display: block;
    margin-top: 5px;
    color: #2563eb;
    font-size: 12px;
}

.account-profile-contact {
    display: grid;
    gap: 7px;
    margin-top: 15px;
}

.account-profile-contact span {
    color: var(--text-muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.account-verification {
    padding-left: 26px;
    border-left: 1px solid var(--border);
}

.account-verification small,
.account-verification strong {
    display: block;
}

.account-verification small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
}

.account-verification strong {
    margin-top: 8px;
    color: #16a34a;
    font-size: 18px;
}

.account-verification p {
    margin: 8px 0 13px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.account-verification a {
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.account-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.account-stat-card {
    min-width: 0;
    padding: 18px;
    border-radius: 15px;
}

.account-stat-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 800;
}

.account-stat-icon.investment {
    background: rgba(37, 99, 235, .11);
    color: #2563eb;
}

.account-stat-icon.contribution {
    background: rgba(22, 163, 74, .11);
    color: #16a34a;
}

.account-stat-icon.goal {
    background: rgba(124, 58, 237, .11);
    color: #7c3aed;
}

.account-stat-icon.watchlist {
    background: rgba(217, 119, 6, .12);
    color: #d97706;
}

.account-stat-icon.notification {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.account-stat-card strong,
.account-stat-card small,
.account-stat-card a {
    display: block;
}

.account-stat-card > strong {
    color: var(--text-dark);
    font-size: 20px;
    overflow-wrap: anywhere;
}

.account-stat-card small {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 10px;
}

.account-stat-card a {
    margin-top: 12px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.account-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    align-items: start;
    gap: 20px;
    margin-bottom: 20px;
}

.account-activity-card,
.account-quick-actions-card,
.account-summary-card {
    min-width: 0;
    border-radius: 17px;
    overflow: hidden;
}

.account-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 21px;
    border-bottom: 1px solid var(--border);
}

.account-card-heading h2 {
    color: var(--text-dark);
    font-size: 17px;
}

.account-card-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
}

.account-card-heading a {
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.account-activity-list {
    display: grid;
}

.account-activity-row {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: inherit;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}

.account-activity-row:last-child {
    border-bottom: 0;
}

.account-activity-row:hover {
    background: rgba(148, 163, 184, .06);
}

.account-activity-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
}

.account-activity-content,
.account-activity-side {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.account-activity-content strong {
    color: var(--text-dark);
    font-size: 12px;
}

.account-activity-content small,
.account-activity-side small {
    color: var(--text-muted);
    font-size: 9px;
}

.account-activity-side {
    text-align: right;
}

.account-activity-side strong {
    color: var(--text-dark);
    font-size: 11px;
}

.account-activity-empty {
    min-height: 360px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 9px;
    padding: 30px;
    text-align: center;
}

.account-activity-empty > span {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 50%;
    font-size: 24px;
}

.account-activity-empty h3 {
    color: var(--text-dark);
    font-size: 17px;
}

.account-activity-empty p {
    color: var(--text-muted);
    font-size: 10px;
}

.account-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}

.account-quick-actions a {
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 14px;
    color: inherit;
    border: 1px solid var(--border);
    border-radius: 13px;
    text-decoration: none;
}

.account-quick-actions a:hover {
    border-color: rgba(37, 99, 235, .35);
    transform: translateY(-1px);
}

.quick-action-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
}

.quick-action-icon.watchlist {
    background: rgba(217, 119, 6, .11);
    color: #d97706;
}

.quick-action-icon.reports,
.quick-action-icon.contribution {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.quick-action-icon.notifications {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.quick-action-icon.help {
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
}

.account-quick-actions strong {
    color: var(--text-dark);
    font-size: 11px;
}

.account-quick-actions small {
    min-height: 29px;
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.45;
}

.account-quick-actions b {
    color: #2563eb;
    font-size: 9px;
}

.account-summary-card {
    padding-bottom: 4px;
}

.account-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 17px 21px 21px;
}

.account-summary-grid > div {
    min-width: 0;
    padding: 4px 17px;
    border-right: 1px solid var(--border);
}

.account-summary-grid > div:first-child {
    padding-left: 0;
}

.account-summary-grid > div:last-child {
    padding-right: 0;
    border-right: 0;
}

.account-summary-grid small,
.account-summary-grid strong {
    display: block;
}

.account-summary-grid small {
    color: var(--text-muted);
    font-size: 9px;
}

.account-summary-grid strong {
    margin-top: 6px;
    color: var(--text-dark);
    font-size: 11px;
    overflow-wrap: anywhere;
}

html[data-theme="dark"] .account-profile-card,
html[data-theme="dark"] .account-stat-card,
html[data-theme="dark"] .account-activity-card,
html[data-theme="dark"] .account-quick-actions-card,
html[data-theme="dark"] .account-summary-card {
    background: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] .account-overview-heading h1,
html[data-theme="dark"] .account-profile-name-row h2,
html[data-theme="dark"] .account-stat-card > strong,
html[data-theme="dark"] .account-card-heading h2,
html[data-theme="dark"] .account-activity-content strong,
html[data-theme="dark"] .account-activity-side strong,
html[data-theme="dark"] .account-activity-empty h3,
html[data-theme="dark"] .account-quick-actions strong,
html[data-theme="dark"] .account-summary-grid strong {
    color: #f8fafc;
}

@media (max-width: 1250px) {
    .account-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .account-content-grid {
        grid-template-columns: 1fr;
    }

    .account-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .account-summary-grid > div {
        padding: 0;
        border-right: 0;
    }
}

@media (max-width: 850px) {
    .account-profile-card {
        grid-template-columns: 1fr;
    }

    .account-verification {
        padding: 20px 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .account-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .account-overview-page {
        padding: 25px 18px;
    }

    .account-overview-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .account-profile-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-stat-grid,
    .account-quick-actions,
    .account-summary-grid {
        grid-template-columns: 1fr;
    }

    .account-activity-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .account-activity-side {
        grid-column: 2;
        text-align: left;
    }
}



/* =========================================================
   ACTIVITY HISTORY — STAGE 9
========================================================= */

.activity-history-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.activity-history-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.activity-history-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.activity-history-heading h1 {
    color: var(--text-dark);
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.15;
}

.activity-history-heading p {
    max-width: 760px;
    margin-top: 8px;
    color: var(--text-muted);
    line-height: 1.55;
}

.activity-history-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.activity-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.activity-summary-card,
.activity-filter-card,
.activity-history-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-small);
}

.activity-summary-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 15px;
}

.activity-summary-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 800;
}

.activity-summary-icon.all {
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
}

.activity-summary-icon.positive {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.activity-summary-icon.negative {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.activity-summary-icon.neutral {
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
}

.activity-summary-card small,
.activity-summary-card strong,
.activity-summary-card span {
    display: block;
}

.activity-summary-card small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
}

.activity-summary-card strong {
    margin: 4px 0;
    color: var(--text-dark);
    font-size: 20px;
    overflow-wrap: anywhere;
}

.activity-summary-card span {
    color: var(--text-muted);
    font-size: 9px;
}

.activity-filter-card {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.6fr)
        minmax(155px, .8fr)
        minmax(145px, .7fr)
        minmax(145px, .7fr)
        auto;
    align-items: end;
    gap: 13px;
    padding: 18px;
    margin-bottom: 20px;
    border-radius: 15px;
}

.activity-filter-field {
    min-width: 0;
}

.activity-filter-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
}

.activity-filter-field input,
.activity-filter-field select {
    width: 100%;
    min-height: 43px;
}

.activity-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.activity-history-card {
    min-width: 0;
    overflow: hidden;
    border-radius: 17px;
}

.activity-history-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}

.activity-history-card-heading h2 {
    color: var(--text-dark);
    font-size: 18px;
}

.activity-history-card-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
}

.activity-record-count {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.activity-history-list {
    display: grid;
}

.activity-history-row {
    min-width: 0;
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        minmax(120px, auto)
        auto;
    align-items: center;
    gap: 14px;
    padding: 16px 21px;
    color: inherit;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .18s ease;
}

.activity-history-row:last-child {
    border-bottom: 0;
}

.activity-history-row:hover {
    background: rgba(148, 163, 184, .06);
}

.activity-row-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    background: rgba(100, 116, 139, .10);
    color: #64748b;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
}

.activity-row-icon.type-contribution,
.activity-row-icon.type-dividend {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.activity-row-icon.type-withdrawal,
.activity-row-icon.type-sale {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.activity-row-icon.type-investment {
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
}

.activity-row-icon.type-goal {
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
}

.activity-row-icon.type-watchlist {
    background: rgba(217, 119, 6, .11);
    color: #d97706;
}

.activity-row-icon.type-notification {
    background: rgba(14, 165, 233, .10);
    color: #0284c7;
}

.activity-row-content {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.activity-row-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.activity-row-top strong {
    color: var(--text-dark);
    font-size: 13px;
}

.activity-type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    background: rgba(100, 116, 139, .10);
    color: #64748b;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}

.activity-row-description {
    color: var(--text-normal);
    font-size: 11px;
    line-height: 1.45;
}

.activity-row-content > small {
    color: var(--text-muted);
    font-size: 9px;
}

.activity-row-amount {
    display: grid;
    gap: 4px;
    text-align: right;
}

.activity-row-amount strong {
    color: var(--text-dark);
    font-size: 12px;
}

.activity-row-amount strong.positive {
    color: #16a34a;
}

.activity-row-amount strong.negative {
    color: #dc2626;
}

.activity-row-amount small {
    color: var(--text-muted);
    font-size: 8px;
}

.activity-row-arrow {
    color: var(--text-muted);
    font-size: 16px;
}

.activity-history-empty {
    min-height: 430px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 11px;
    padding: 40px 22px;
    text-align: center;
}

.activity-history-empty > span {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 50%;
    font-size: 28px;
}

.activity-history-empty h3 {
    color: var(--text-dark);
    font-size: 20px;
}

.activity-history-empty p {
    color: var(--text-muted);
    font-size: 11px;
}

.activity-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    margin-top: 20px;
}

.activity-pagination a,
.activity-pagination span {
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
}

.activity-pagination a {
    background: var(--surface);
    color: #2563eb;
    border: 1px solid var(--border);
    text-decoration: none;
}

.activity-pagination > span:not(.disabled) {
    color: var(--text-muted);
}

.activity-pagination .disabled {
    color: #94a3b8;
    background: rgba(148, 163, 184, .08);
}

html[data-theme="dark"] .activity-summary-card,
html[data-theme="dark"] .activity-filter-card,
html[data-theme="dark"] .activity-history-card {
    background: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] .activity-history-heading h1,
html[data-theme="dark"] .activity-summary-card strong,
html[data-theme="dark"] .activity-history-card-heading h2,
html[data-theme="dark"] .activity-row-top strong,
html[data-theme="dark"] .activity-row-amount strong,
html[data-theme="dark"] .activity-history-empty h3 {
    color: #f8fafc;
}

html[data-theme="dark"] .activity-row-description {
    color: #d6deea;
}

@media (max-width: 1250px) {
    .activity-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-filter-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .activity-history-page {
        padding: 25px 18px;
    }

    .activity-history-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .activity-summary-grid,
    .activity-filter-card {
        grid-template-columns: 1fr;
    }

    .activity-filter-actions {
        grid-column: auto;
        flex-wrap: wrap;
    }

    .activity-history-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .activity-row-amount {
        grid-column: 2;
        text-align: left;
    }

    .activity-row-arrow {
        display: none;
    }
}

@media print {
    .sidebar,
    .navbar,
    .page-heading-bar,
    .activity-history-actions,
    .activity-filter-card,
    .activity-pagination {
        display: none !important;
    }

    .main-content {
        width: 100% !important;
        margin: 0 !important;
    }

    .activity-history-page {
        max-width: none;
        padding: 0;
    }

    .activity-summary-card,
    .activity-history-card {
        box-shadow: none;
    }

    .activity-history-row {
        break-inside: avoid;
    }
}



/* =========================================================
   HELP & SUPPORT — STAGE 10
========================================================= */

.help-support-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.help-support-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 430px);
    align-items: end;
    gap: 35px;
    padding: 28px;
    margin-bottom: 20px;
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .10),
            rgba(124, 58, 237, .07)
        ),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: 19px;
    box-shadow: var(--shadow-small);
}

.help-support-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.help-support-hero h1 {
    color: var(--text-dark);
    font-size: clamp(31px, 4vw, 45px);
    line-height: 1.15;
}

.help-support-hero p {
    max-width: 720px;
    margin-top: 9px;
    color: var(--text-muted);
    line-height: 1.55;
}

.help-support-search label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
}

.help-support-search input {
    width: 100%;
    min-height: 48px;
    padding-left: 16px;
    background: var(--surface);
}

.help-topic-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 20px;
}

.help-topic-card {
    min-width: 0;
    display: grid;
    gap: 7px;
    padding: 17px;
    background: var(--surface);
    color: inherit;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-small);
    text-decoration: none;
    transition: .18s ease;
}

.help-topic-card:hover {
    border-color: rgba(37, 99, 235, .35);
    transform: translateY(-2px);
}

.help-topic-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    margin-bottom: 3px;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 800;
}

.help-topic-card strong {
    color: var(--text-dark);
    font-size: 11px;
}

.help-topic-card small {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.45;
}

.help-support-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    align-items: start;
    gap: 20px;
}

.help-faq-column {
    min-width: 0;
    display: grid;
    gap: 16px;
}

.help-section-card,
.help-contact-card {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 17px;
    box-shadow: var(--shadow-small);
}

.help-section-card {
    padding: 20px;
    scroll-margin-top: 95px;
}

.help-section-heading,
.help-contact-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
}

.help-section-heading > span,
.help-contact-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 800;
}

.help-section-heading h2,
.help-contact-heading h2 {
    color: var(--text-dark);
    font-size: 17px;
}

.help-section-heading p,
.help-contact-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
}

.help-section-card details {
    border-top: 1px solid var(--border);
}

.help-section-card details:last-child {
    border-bottom: 1px solid var(--border);
}

.help-section-card summary {
    position: relative;
    padding: 14px 29px 14px 2px;
    color: var(--text-dark);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.help-section-card summary::-webkit-details-marker {
    display: none;
}

.help-section-card summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 12px;
    color: #2563eb;
    font-size: 18px;
}

.help-section-card details[open] summary::after {
    content: "−";
}

.help-section-card details p {
    padding: 0 30px 15px 2px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.65;
}

.help-contact-card {
    position: sticky;
    top: 90px;
    padding: 21px;
    scroll-margin-top: 95px;
}

.help-submit-button {
    width: 100%;
}

.help-contact-user {
    padding: 12px;
    margin-bottom: 15px;
    background: rgba(37, 99, 235, .06);
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 11px;
}

.help-contact-user small,
.help-contact-user strong {
    display: block;
}

.help-contact-user small {
    color: var(--text-muted);
    font-size: 9px;
}

.help-contact-user strong {
    margin-top: 4px;
    color: var(--text-dark);
    font-size: 10px;
    overflow-wrap: anywhere;
}

.help-recent-requests {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.help-recent-requests h3 {
    margin-bottom: 10px;
    color: var(--text-dark);
    font-size: 12px;
}

.help-recent-requests article {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

.help-recent-requests article:last-child {
    border-bottom: 0;
}

.help-recent-requests strong,
.help-recent-requests small {
    display: block;
}

.help-recent-requests strong {
    color: var(--text-dark);
    font-size: 10px;
}

.help-recent-requests small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 8px;
}

.help-request-status {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    padding: 4px 8px;
    background: rgba(217, 119, 6, .11);
    color: #d97706;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}

.help-request-status.closed,
.help-request-status.resolved {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.help-no-results {
    min-height: 330px;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 17px;
    text-align: center;
}

.help-no-results:not([hidden]) {
    display: grid;
}

.help-no-results > span {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 50%;
    font-size: 25px;
    font-weight: 800;
}

.help-no-results h3 {
    color: var(--text-dark);
    font-size: 18px;
}

.help-no-results p {
    color: var(--text-muted);
    font-size: 10px;
}

html[data-theme="dark"] .help-support-hero,
html[data-theme="dark"] .help-topic-card,
html[data-theme="dark"] .help-section-card,
html[data-theme="dark"] .help-contact-card,
html[data-theme="dark"] .help-no-results {
    background-color: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] .help-support-hero h1,
html[data-theme="dark"] .help-topic-card strong,
html[data-theme="dark"] .help-section-heading h2,
html[data-theme="dark"] .help-contact-heading h2,
html[data-theme="dark"] .help-section-card summary,
html[data-theme="dark"] .help-contact-user strong,
html[data-theme="dark"] .help-recent-requests h3,
html[data-theme="dark"] .help-recent-requests strong,
html[data-theme="dark"] .help-no-results h3 {
    color: #f8fafc;
}

@media (max-width: 1250px) {
    .help-topic-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .help-support-hero,
    .help-support-layout {
        grid-template-columns: 1fr;
    }

    .help-contact-card {
        position: static;
    }
}

@media (max-width: 650px) {
    .help-support-page {
        padding: 25px 18px;
    }

    .help-support-hero {
        padding: 21px;
    }

    .help-topic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    .help-topic-grid {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   ADMIN SUPPORT REQUESTS — STAGE 11
========================================================= */

.admin-support-page,
.admin-support-detail-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.admin-support-heading,
.admin-support-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 23px;
}

.admin-support-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.admin-support-heading h1,
.admin-support-detail-heading h1 {
    color: var(--text-dark);
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.15;
}

.admin-support-heading p,
.admin-support-detail-heading p {
    max-width: 760px;
    margin-top: 8px;
    color: var(--text-muted);
    line-height: 1.55;
}

.admin-support-total {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.admin-support-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 18px;
}

.admin-support-stats a {
    min-width: 0;
    padding: 16px;
    background: var(--surface);
    color: inherit;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-small);
    text-decoration: none;
}

.admin-support-stats a.active {
    border-color: rgba(37, 99, 235, .55);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .08);
}

.admin-support-stats small,
.admin-support-stats strong {
    display: block;
}

.admin-support-stats small {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
}

.admin-support-stats strong {
    margin-top: 6px;
    color: var(--text-dark);
    font-size: 22px;
}

.admin-support-filters {
    display: grid;
    grid-template-columns:
        minmax(240px, 1.6fr)
        minmax(165px, .8fr)
        minmax(155px, .75fr)
        auto;
    align-items: end;
    gap: 13px;
    padding: 18px;
    margin-bottom: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow-small);
}

.admin-support-filters label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
}

.admin-support-filters input,
.admin-support-filters select {
    width: 100%;
    min-height: 43px;
}

.admin-support-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-support-list-card,
.admin-support-message-card,
.admin-support-history-card,
.admin-support-control-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 17px;
    box-shadow: var(--shadow-small);
    overflow: hidden;
}

.admin-support-list-heading,
.admin-support-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 21px;
    border-bottom: 1px solid var(--border);
}

.admin-support-list-heading h2,
.admin-support-card-heading h2 {
    color: var(--text-dark);
    font-size: 17px;
}

.admin-support-list-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 9px;
}

.admin-support-list-heading > span,
.admin-support-card-heading > span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
}

.admin-support-list {
    display: grid;
}

.admin-support-row {
    min-width: 0;
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 16px 21px;
    color: inherit;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}

.admin-support-row:last-child {
    border-bottom: 0;
}

.admin-support-row:hover {
    background: rgba(148, 163, 184, .06);
}

.admin-support-row-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 12px;
    font-size: 15px;
}

.admin-support-row-content {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.admin-support-row-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-support-row-top strong {
    color: var(--text-dark);
    font-size: 12px;
}

.admin-support-category {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    background: rgba(124, 58, 237, .09);
    color: #7c3aed;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}

.admin-support-user {
    color: var(--text-normal);
    font-size: 10px;
    overflow-wrap: anywhere;
}

.admin-support-row-content small {
    color: var(--text-muted);
    font-size: 8px;
}

.admin-support-status {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    background: rgba(100, 116, 139, .10);
    color: #64748b;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-support-status.open {
    background: rgba(217, 119, 6, .11);
    color: #d97706;
}

.admin-support-status.in_progress {
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
}

.admin-support-status.resolved {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.admin-support-status.closed {
    background: rgba(100, 116, 139, .11);
    color: #64748b;
}

.admin-support-status.large {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 9px;
}

.admin-support-arrow {
    color: var(--text-muted);
}

.admin-support-empty {
    min-height: 390px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 30px;
    text-align: center;
}

.admin-support-empty > span {
    width: 65px;
    height: 65px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 50%;
    font-size: 24px;
}

.admin-support-empty h3 {
    color: var(--text-dark);
    font-size: 18px;
}

.admin-support-empty p {
    color: var(--text-muted);
    font-size: 10px;
}

.admin-support-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
}

.admin-support-pagination a,
.admin-support-pagination span {
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
}

.admin-support-pagination a {
    background: var(--surface);
    color: #2563eb;
    border: 1px solid var(--border);
    text-decoration: none;
}

.admin-support-pagination span {
    color: var(--text-muted);
}

.admin-support-pagination .disabled {
    opacity: .55;
}

.admin-support-back {
    display: inline-block;
    margin-bottom: 13px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.admin-support-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    align-items: start;
    gap: 20px;
}

.admin-support-detail-main {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.admin-support-message {
    min-height: 190px;
    padding: 22px;
    color: var(--text-normal);
    font-size: 12px;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.admin-support-history-list {
    display: grid;
}

.admin-support-history-list article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 16px 21px;
    border-bottom: 1px solid var(--border);
}

.admin-support-history-list article:last-child {
    border-bottom: 0;
}

.admin-support-history-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
}

.admin-support-history-list strong {
    color: var(--text-dark);
    font-size: 11px;
}

.admin-support-history-list p {
    margin: 6px 0;
    color: var(--text-normal);
    font-size: 10px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.admin-support-history-list small {
    color: var(--text-muted);
    font-size: 8px;
}

.admin-support-history-empty {
    padding: 28px 21px;
    color: var(--text-muted);
    font-size: 10px;
    text-align: center;
}

.admin-support-control-card {
    position: sticky;
    top: 90px;
}

.admin-support-control-card form {
    padding: 20px;
}

.admin-support-control-card .form-group small {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 8px;
    line-height: 1.5;
}

.admin-support-update-button {
    width: 100%;
}

.admin-support-user-card {
    padding: 19px 20px;
    border-top: 1px solid var(--border);
}

.admin-support-user-card h3 {
    margin-bottom: 13px;
    color: var(--text-dark);
    font-size: 12px;
}

.admin-support-user-card > div {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.admin-support-user-card > div:last-child {
    border-bottom: 0;
}

.admin-support-user-card small,
.admin-support-user-card strong {
    display: block;
}

.admin-support-user-card small {
    color: var(--text-muted);
    font-size: 8px;
}

.admin-support-user-card strong {
    margin-top: 4px;
    color: var(--text-dark);
    font-size: 10px;
    overflow-wrap: anywhere;
}

html[data-theme="dark"] .admin-support-heading h1,
html[data-theme="dark"] .admin-support-detail-heading h1,
html[data-theme="dark"] .admin-support-stats strong,
html[data-theme="dark"] .admin-support-list-heading h2,
html[data-theme="dark"] .admin-support-card-heading h2,
html[data-theme="dark"] .admin-support-row-top strong,
html[data-theme="dark"] .admin-support-empty h3,
html[data-theme="dark"] .admin-support-history-list strong,
html[data-theme="dark"] .admin-support-user-card h3,
html[data-theme="dark"] .admin-support-user-card strong {
    color: #f8fafc;
}

@media (max-width: 1200px) {
    .admin-support-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-support-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-support-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 950px) {
    .admin-support-detail-layout {
        grid-template-columns: 1fr;
    }

    .admin-support-control-card {
        position: static;
    }
}

@media (max-width: 680px) {
    .admin-support-page,
    .admin-support-detail-page {
        padding: 25px 18px;
    }

    .admin-support-heading,
    .admin-support-detail-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-support-stats,
    .admin-support-filters {
        grid-template-columns: 1fr;
    }

    .admin-support-filter-actions {
        grid-column: auto;
        flex-wrap: wrap;
    }

    .admin-support-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .admin-support-status {
        grid-column: 2;
        justify-self: start;
    }

    .admin-support-arrow {
        display: none;
    }
}



/* =========================================================
   DASHBOARD FINAL UPGRADE — STAGE 12
========================================================= */

.dashboard-final-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.dashboard-final-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 23px;
}

.dashboard-final-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dashboard-final-heading h1 {
    color: var(--text-dark);
    font-size: clamp(31px, 4vw, 44px);
    line-height: 1.15;
}

.dashboard-final-heading h1 span {
    color: #2563eb;
}

.dashboard-final-heading p {
    max-width: 720px;
    margin-top: 8px;
    color: var(--text-muted);
    line-height: 1.55;
}

.dashboard-heading-actions,
.dashboard-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.dashboard-hero-card {
    display: grid;
    grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
    min-height: 340px;
    margin-bottom: 20px;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .10),
            rgba(124, 58, 237, .06)
        ),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-small);
}

.dashboard-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 31px;
    border-right: 1px solid var(--border);
}

.dashboard-hero-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
}

.dashboard-hero-copy h2 {
    margin-top: 7px;
    color: var(--text-dark);
    font-size: clamp(33px, 5vw, 49px);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.dashboard-hero-return {
    display: grid;
    gap: 6px;
    margin: 17px 0 22px;
}

.dashboard-hero-return strong {
    font-size: 14px;
}

.dashboard-hero-return strong span {
    font-size: 11px;
}

.dashboard-hero-return small {
    max-width: 410px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.55;
}

.dashboard-hero-chart-area {
    min-width: 0;
    padding: 23px;
}

.dashboard-chart-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
}

.dashboard-chart-toolbar strong,
.dashboard-chart-toolbar small {
    display: block;
}

.dashboard-chart-toolbar strong {
    color: var(--text-dark);
    font-size: 13px;
}

.dashboard-chart-toolbar small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 9px;
}

.dashboard-chart-toolbar select {
    width: auto;
    min-width: 110px;
    min-height: 37px;
}

.dashboard-hero-chart {
    height: 255px;
}

.dashboard-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.dashboard-summary-card,
.dashboard-alert-strip,
.dashboard-panel,
.dashboard-quick-actions {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-small);
}

.dashboard-summary-card {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
}

.dashboard-summary-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
}

.dashboard-summary-icon.investment,
.dashboard-summary-icon.market {
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
}

.dashboard-summary-icon.contribution,
.dashboard-summary-icon.dividend {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.dashboard-summary-icon.profit {
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
}

.dashboard-summary-icon.unrealized {
    background: rgba(217, 119, 6, .11);
    color: #d97706;
}

.dashboard-summary-card small,
.dashboard-summary-card strong,
.dashboard-summary-card span {
    display: block;
}

.dashboard-summary-card small {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
}

.dashboard-summary-card strong {
    margin: 5px 0;
    color: var(--text-dark);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.dashboard-summary-card span {
    color: var(--text-muted);
    font-size: 8px;
    line-height: 1.4;
}

.dashboard-alert-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 18px;
    border-radius: 14px;
}

.dashboard-alert-strip > a {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    color: inherit;
    border-right: 1px solid var(--border);
    text-decoration: none;
}

.dashboard-alert-strip > a:last-child {
    border-right: 0;
}

.dashboard-alert-strip > a:hover {
    background: rgba(148, 163, 184, .06);
}

.dashboard-alert-icon {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
}

.dashboard-alert-icon.watchlist {
    background: rgba(217, 119, 6, .11);
    color: #d97706;
}

.dashboard-alert-icon.notification {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.dashboard-alert-icon.goals {
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
}

.dashboard-alert-icon.support {
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
}

.dashboard-alert-strip small,
.dashboard-alert-strip strong {
    display: block;
}

.dashboard-alert-strip small {
    color: var(--text-muted);
    font-size: 9px;
}

.dashboard-alert-strip strong {
    margin-top: 3px;
    color: var(--text-dark);
    font-size: 18px;
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.dashboard-panel {
    min-width: 0;
    overflow: hidden;
    border-radius: 17px;
}

.dashboard-performance-panel {
    grid-column: span 8;
}

.dashboard-allocation-panel {
    grid-column: span 4;
}

.dashboard-holdings-panel,
.dashboard-goals-panel,
.dashboard-activity-panel,
.dashboard-updates-panel {
    grid-column: span 6;
}

.dashboard-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.dashboard-panel-heading h2 {
    color: var(--text-dark);
    font-size: 16px;
}

.dashboard-panel-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 9px;
}

.dashboard-panel-heading a {
    color: #2563eb;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-period-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.dashboard-period-tabs button {
    min-width: 34px;
    min-height: 29px;
    padding: 5px 7px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 800;
    cursor: pointer;
}

.dashboard-period-tabs button.active {
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-color: rgba(37, 99, 235, .18);
}

.dashboard-performance-chart {
    height: 315px;
    padding: 18px 20px 8px;
}

.dashboard-performance-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 20px 17px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    font-size: 9px;
    font-weight: 700;
}

.dashboard-allocation-content {
    display: grid;
    grid-template-columns: minmax(135px, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 14px;
    padding: 20px;
}

.dashboard-allocation-chart {
    height: 185px;
}

.dashboard-allocation-legend {
    min-width: 0;
    display: grid;
    gap: 11px;
}

.dashboard-allocation-legend > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 11px;
}

.dashboard-allocation-legend span {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-normal);
    font-size: 9px;
}

.dashboard-allocation-legend strong {
    color: var(--text-dark);
    font-size: 9px;
}

.dashboard-allocation-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    display: inline-block;
    background: #22c55e;
    border-radius: 50%;
}

.dashboard-allocation-dot.allocation-2 {
    background: #3b82f6;
}

.dashboard-allocation-dot.allocation-3 {
    background: #8b5cf6;
}

.dashboard-allocation-dot.allocation-4 {
    background: #f59e0b;
}

.dashboard-allocation-dot.allocation-5 {
    background: #06b6d4;
}

.dashboard-allocation-dot.allocation-6 {
    background: #ef4444;
}

.dashboard-holdings-list,
.dashboard-activity-list,
.dashboard-update-list {
    display: grid;
}

.dashboard-holding-row,
.dashboard-activity-row,
.dashboard-update-row {
    min-width: 0;
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: inherit;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}

.dashboard-holding-row:last-child,
.dashboard-activity-row:last-child,
.dashboard-update-row:last-child {
    border-bottom: 0;
}

.dashboard-holding-row:hover,
.dashboard-activity-row:hover,
.dashboard-update-row:hover {
    background: rgba(148, 163, 184, .06);
}

.dashboard-holding-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.dashboard-holding-rank {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 800;
}

.dashboard-holding-copy,
.dashboard-holding-value,
.dashboard-activity-copy,
.dashboard-activity-side,
.dashboard-update-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.dashboard-holding-copy strong,
.dashboard-activity-copy strong,
.dashboard-update-copy strong {
    color: var(--text-dark);
    font-size: 11px;
}

.dashboard-holding-copy small,
.dashboard-activity-copy small,
.dashboard-activity-side small,
.dashboard-update-copy small {
    color: var(--text-muted);
    font-size: 8px;
}

.dashboard-holding-value {
    text-align: right;
}

.dashboard-holding-value strong {
    color: var(--text-dark);
    font-size: 10px;
}

.dashboard-holding-value small {
    font-size: 8px;
}

.dashboard-goals-list {
    display: grid;
    gap: 13px;
    padding: 18px 20px;
}

.dashboard-goal-card {
    padding: 14px;
    background: rgba(37, 99, 235, .045);
    border: 1px solid rgba(37, 99, 235, .10);
    border-radius: 12px;
}

.dashboard-goal-top,
.dashboard-goal-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-goal-top strong,
.dashboard-goal-top small {
    display: block;
}

.dashboard-goal-top strong {
    color: var(--text-dark);
    font-size: 11px;
}

.dashboard-goal-top small,
.dashboard-goal-date {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 8px;
}

.dashboard-goal-top b {
    color: #2563eb;
    font-size: 11px;
}

.dashboard-goal-track {
    height: 7px;
    margin: 12px 0 8px;
    overflow: hidden;
    background: rgba(148, 163, 184, .18);
    border-radius: 999px;
}

.dashboard-goal-track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    border-radius: inherit;
}

.dashboard-panel-footer-link {
    display: block;
    padding: 13px 20px;
    color: #2563eb;
    border-top: 1px solid var(--border);
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}

.dashboard-activity-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.dashboard-activity-icon,
.dashboard-update-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 800;
}

.dashboard-activity-side {
    text-align: right;
}

.dashboard-activity-side strong {
    color: var(--text-dark);
    font-size: 10px;
}

.dashboard-update-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.dashboard-update-icon.success {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.dashboard-update-icon.warning {
    background: rgba(217, 119, 6, .11);
    color: #d97706;
}

.dashboard-update-date {
    color: var(--text-muted);
    font-size: 8px;
}

.dashboard-simple-empty {
    min-height: 150px;
    display: grid;
    place-items: center;
    padding: 25px;
    color: var(--text-muted);
    font-size: 10px;
    text-align: center;
}

.dashboard-quick-actions {
    overflow: hidden;
    border-radius: 17px;
}

.dashboard-quick-action-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}

.dashboard-quick-action-grid a {
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 15px;
    color: inherit;
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
}

.dashboard-quick-action-grid a:hover {
    border-color: rgba(37, 99, 235, .35);
    transform: translateY(-1px);
}

.dashboard-quick-action-grid span {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    margin-bottom: 3px;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
}

.dashboard-quick-action-grid strong {
    color: var(--text-dark);
    font-size: 10px;
}

.dashboard-quick-action-grid small {
    color: var(--text-muted);
    font-size: 8px;
    line-height: 1.45;
}

html[data-theme="dark"] .dashboard-hero-card,
html[data-theme="dark"] .dashboard-summary-card,
html[data-theme="dark"] .dashboard-alert-strip,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .dashboard-quick-actions {
    background-color: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] .dashboard-final-heading h1,
html[data-theme="dark"] .dashboard-hero-copy h2,
html[data-theme="dark"] .dashboard-chart-toolbar strong,
html[data-theme="dark"] .dashboard-summary-card strong,
html[data-theme="dark"] .dashboard-alert-strip strong,
html[data-theme="dark"] .dashboard-panel-heading h2,
html[data-theme="dark"] .dashboard-allocation-legend strong,
html[data-theme="dark"] .dashboard-holding-copy strong,
html[data-theme="dark"] .dashboard-holding-value strong,
html[data-theme="dark"] .dashboard-goal-top strong,
html[data-theme="dark"] .dashboard-activity-copy strong,
html[data-theme="dark"] .dashboard-activity-side strong,
html[data-theme="dark"] .dashboard-update-copy strong,
html[data-theme="dark"] .dashboard-quick-action-grid strong {
    color: #f8fafc;
}

@media (max-width: 1300px) {
    .dashboard-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-quick-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .dashboard-hero-card {
        grid-template-columns: 1fr;
    }

    .dashboard-hero-copy {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .dashboard-performance-panel,
    .dashboard-allocation-panel,
    .dashboard-holdings-panel,
    .dashboard-goals-panel,
    .dashboard-activity-panel,
    .dashboard-updates-panel {
        grid-column: span 12;
    }

    .dashboard-alert-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-alert-strip > a:nth-child(2) {
        border-right: 0;
    }

    .dashboard-alert-strip > a:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
    }
}

@media (max-width: 680px) {
    .dashboard-final-page {
        padding: 25px 18px;
    }

    .dashboard-final-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-summary-grid,
    .dashboard-alert-strip,
    .dashboard-quick-action-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-alert-strip > a {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .dashboard-alert-strip > a:last-child {
        border-bottom: 0;
    }

    .dashboard-allocation-content {
        grid-template-columns: 1fr;
    }

    .dashboard-allocation-chart {
        height: 220px;
    }

    .dashboard-activity-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dashboard-activity-side {
        grid-column: 2;
        text-align: left;
    }

    .dashboard-update-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dashboard-update-date {
        grid-column: 2;
    }

    .dashboard-period-tabs {
        width: 100%;
    }
}



/* =========================================================
   DASHBOARD READABILITY FIX
   Increase small text sizes across the dashboard
========================================================= */

.dashboard-final-page {
    font-size: 16px;
}

.dashboard-final-heading p {
    font-size: 16px;
}

.dashboard-hero-label {
    font-size: 14px;
}

.dashboard-hero-return strong {
    font-size: 18px;
}

.dashboard-hero-return strong span {
    font-size: 14px;
}

.dashboard-hero-return small {
    font-size: 13px;
}

.dashboard-chart-toolbar strong {
    font-size: 16px;
}

.dashboard-chart-toolbar small {
    font-size: 12px;
}

.dashboard-summary-card small {
    font-size: 12px;
}

.dashboard-summary-card strong {
    font-size: 18px;
}

.dashboard-summary-card span {
    font-size: 11px;
}

.dashboard-alert-strip small {
    font-size: 12px;
}

.dashboard-alert-strip strong {
    font-size: 22px;
}

.dashboard-panel-heading h2 {
    font-size: 20px;
}

.dashboard-panel-heading p {
    font-size: 12px;
}

.dashboard-panel-heading a {
    font-size: 12px;
}

.dashboard-period-tabs button {
    font-size: 11px;
}

.dashboard-performance-footer {
    font-size: 12px;
}

.dashboard-allocation-legend span,
.dashboard-allocation-legend strong {
    font-size: 12px;
}

.dashboard-holding-copy strong,
.dashboard-activity-copy strong,
.dashboard-update-copy strong {
    font-size: 14px;
}

.dashboard-holding-copy small,
.dashboard-activity-copy small,
.dashboard-activity-side small,
.dashboard-update-copy small {
    font-size: 11px;
}

.dashboard-holding-value strong,
.dashboard-activity-side strong {
    font-size: 13px;
}

.dashboard-holding-value small,
.dashboard-update-date {
    font-size: 10px;
}

.dashboard-goal-top strong {
    font-size: 14px;
}

.dashboard-goal-top small,
.dashboard-goal-date {
    font-size: 11px;
}

.dashboard-goal-top b {
    font-size: 14px;
}

.dashboard-simple-empty {
    font-size: 13px;
}

.dashboard-quick-action-grid strong {
    font-size: 13px;
}

.dashboard-quick-action-grid small {
    font-size: 11px;
}

.dashboard-quick-action-grid a {
    min-height: 130px;
}

@media (max-width: 680px) {
    .dashboard-final-heading p {
        font-size: 15px;
    }

    .dashboard-summary-card strong {
        font-size: 17px;
    }

    .dashboard-panel-heading h2 {
        font-size: 18px;
    }
}



/* =========================================================
   GLOBAL READABILITY + COMPACT DASHBOARD FIX
========================================================= */

/* Make text readable across the whole application */
body {
    font-size: 16px;
    line-height: 1.55;
}

.page-content,
.main-content,
.content-area,
.dashboard-final-page,
.settings-page,
.account-overview-page,
.activity-history-page,
.help-support-page,
.admin-support-page,
.admin-support-detail-page,
.watchlist-page,
.reports-page,
.performance-page {
    font-size: 16px;
}

/* General text */
p,
small,
label,
input,
select,
textarea,
button,
a,
table,
th,
td {
    font-size: 14px;
}

small {
    font-size: 12px;
}

label {
    font-size: 13px;
}

input,
select,
textarea,
button {
    min-height: 42px;
}

input,
select,
textarea {
    padding: 10px 12px;
}

/* Headings */
h1 {
    font-size: clamp(30px, 4vw, 44px);
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 15px;
}

/* Sidebar */
.sidebar-link,
.sidebar-group-toggle,
.sidebar-submenu a,
.sidebar-logout {
    font-size: 14px;
}

.sidebar-text {
    font-size: 14px;
}

.sidebar-section-label {
    font-size: 11px;
}

/* Navbar */
.navbar,
.topbar,
.header-bar {
    font-size: 14px;
}

/* Buttons */
.btn,
.settings-save-button,
.settings-theme-button,
.settings-delete-button,
.account-delete-confirm,
.account-delete-cancel {
    font-size: 13px;
}

/* Cards and summaries */
.dashboard-panel-heading p,
.account-card-heading p,
.activity-history-card-heading p,
.admin-support-list-heading p,
.help-section-heading p,
.help-contact-heading p,
.settings-section-header p {
    font-size: 13px;
}

.dashboard-panel-heading a,
.account-card-heading a,
.activity-record-count,
.admin-support-total,
.admin-support-list-heading > span,
.admin-support-card-heading > span {
    font-size: 12px;
}

/* Lists and table-like rows */
.dashboard-activity-copy small,
.dashboard-update-copy small,
.dashboard-holding-copy small,
.account-activity-content small,
.account-activity-side small,
.activity-row-description,
.activity-row-content > small,
.admin-support-row-content small,
.help-topic-card small,
.settings-notification-summary span,
.settings-security-summary small {
    font-size: 12px;
}

.dashboard-activity-copy strong,
.dashboard-update-copy strong,
.dashboard-holding-copy strong,
.account-activity-content strong,
.activity-row-top strong,
.admin-support-row-top strong,
.help-topic-card strong,
.settings-security-summary strong {
    font-size: 14px;
}

/* Forms and helper text */
.form-group small,
.settings-form-group small,
.help-contact-user small,
.settings-notification-info p,
.account-summary-grid small {
    font-size: 12px;
}

/* Compact dashboard hero */
.dashboard-hero-card {
    min-height: 270px;
}

.dashboard-hero-copy {
    padding: 24px;
}

.dashboard-hero-chart-area {
    padding: 18px;
}

.dashboard-hero-chart {
    height: 205px;
}

.dashboard-hero-copy h2 {
    font-size: clamp(34px, 4vw, 44px);
}

.dashboard-hero-return {
    margin: 12px 0 16px;
}

/* Compact dashboard summary cards */
.dashboard-summary-grid {
    gap: 12px;
}

.dashboard-summary-card {
    padding: 14px;
    min-height: 120px;
}

.dashboard-summary-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

.dashboard-summary-card small {
    font-size: 12px;
}

.dashboard-summary-card strong {
    font-size: 17px;
}

.dashboard-summary-card span {
    font-size: 11px;
}

/* Compact alert strip */
.dashboard-alert-strip > a {
    padding: 13px 16px;
}

.dashboard-alert-strip small {
    font-size: 12px;
}

.dashboard-alert-strip strong {
    font-size: 20px;
}

/* Compact dashboard panels */
.dashboard-performance-chart {
    height: 270px;
}

.dashboard-allocation-chart {
    height: 165px;
}

.dashboard-panel-heading {
    padding: 16px 18px;
}

.dashboard-holding-row,
.dashboard-activity-row,
.dashboard-update-row {
    padding: 12px 18px;
}

.dashboard-goals-list {
    padding: 16px 18px;
}

.dashboard-quick-action-grid a {
    min-height: 112px;
    padding: 13px;
}

/* Keep mobile readable */
@media (max-width: 680px) {
    body {
        font-size: 15px;
    }

    p,
    small,
    label,
    input,
    select,
    textarea,
    button,
    a,
    table,
    th,
    td {
        font-size: 13px;
    }

    .sidebar-link,
    .sidebar-group-toggle,
    .sidebar-submenu a,
    .sidebar-logout,
    .sidebar-text {
        font-size: 13px;
    }

    .dashboard-hero-card {
        min-height: auto;
    }

    .dashboard-hero-chart {
        height: 190px;
    }

    .dashboard-summary-card {
        min-height: auto;
    }
}



/* =========================================================
   DASHBOARD SUMMARY ICON FIX
========================================================= */

.dashboard-summary-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    font-size: 17px !important;
    line-height: 1;
}

.dashboard-summary-card > .dashboard-summary-icon {
    font-size: 17px !important;
}

.dashboard-alert-icon {
    font-size: 16px !important;
    line-height: 1;
}

.dashboard-quick-action-grid > a > span {
    font-size: 16px !important;
    line-height: 1;
}

@media (max-width: 680px) {
    .dashboard-summary-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 16px !important;
    }
}



/* =========================================================
   PROFILE UPGRADE — STAGE 13
========================================================= */

.profile-upgrade-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.profile-upgrade-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.profile-upgrade-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.profile-upgrade-heading h1 {
    color: var(--text-dark);
    font-size: clamp(31px, 4vw, 44px);
}

.profile-upgrade-heading p {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 15px;
}

.profile-upgrade-actions,
.profile-upgrade-photo-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-upgrade-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    align-items: center;
    gap: 25px;
    padding: 25px;
    margin-bottom: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .09),
            rgba(124, 58, 237, .06)
        ),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-small);
}

.profile-upgrade-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-upgrade-photo {
    width: 126px;
    height: 126px;
    flex: 0 0 126px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #ffffff;
    border: 5px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .15);
    font-size: 38px;
    font-weight: 800;
}

.profile-upgrade-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-upgrade-copy {
    min-width: 0;
}

.profile-upgrade-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-upgrade-name-row h2 {
    color: var(--text-dark);
    font-size: 26px;
}

.profile-upgrade-status {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 10px;
    background: rgba(22, 163, 74, .11);
    color: #16a34a;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.profile-upgrade-status.inactive {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.profile-upgrade-username {
    display: block;
    margin-top: 5px;
    color: #2563eb;
    font-size: 14px;
}

.profile-upgrade-copy > p {
    margin: 7px 0 15px;
    color: var(--text-muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.profile-upgrade-remove {
    min-height: 42px;
    padding: 8px 13px;
    background: rgba(239, 68, 68, .09);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, .15);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.profile-photo-help {
    display: block;
    margin-top: 9px;
    color: var(--text-muted);
    font-size: 11px;
}

.profile-completion-card {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
}

.profile-completion-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.profile-completion-top small,
.profile-completion-top strong {
    display: block;
}

.profile-completion-top small {
    color: var(--text-muted);
    font-size: 12px;
}

.profile-completion-top strong {
    margin-top: 4px;
    color: var(--text-dark);
    font-size: 28px;
}

.profile-completion-top > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 11px;
    font-size: 18px;
    font-weight: 800;
}

.profile-completion-track {
    height: 9px;
    margin: 15px 0 11px;
    overflow: hidden;
    background: rgba(148, 163, 184, .18);
    border-radius: 999px;
}

.profile-completion-track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    border-radius: inherit;
}

.profile-completion-card p {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.profile-completion-card a {
    display: inline-block;
    margin-top: 12px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.profile-upgrade-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.profile-upgrade-stats > a {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--surface);
    color: inherit;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-small);
    text-decoration: none;
}

.profile-stat-icon {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 800;
}

.profile-stat-icon.goals {
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
}

.profile-stat-icon.watchlist {
    background: rgba(217, 119, 6, .11);
    color: #d97706;
}

.profile-stat-icon.notification {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.profile-upgrade-stats small,
.profile-upgrade-stats strong,
.profile-upgrade-stats p {
    display: block;
}

.profile-upgrade-stats small {
    color: var(--text-muted);
    font-size: 12px;
}

.profile-upgrade-stats strong {
    margin: 4px 0;
    color: var(--text-dark);
    font-size: 21px;
}

.profile-upgrade-stats p {
    color: var(--text-muted);
    font-size: 11px;
}

.profile-upgrade-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.profile-upgrade-card,
.profile-security-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 17px;
    box-shadow: var(--shadow-small);
}

.profile-upgrade-card {
    overflow: hidden;
}

.profile-upgrade-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.profile-upgrade-card-heading h2 {
    color: var(--text-dark);
    font-size: 18px;
}

.profile-upgrade-card-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.profile-upgrade-card-heading a {
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.profile-information-list,
.profile-account-list {
    display: grid;
}

.profile-information-list > div {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
}

.profile-information-list > div:last-child,
.profile-account-list > div:last-child {
    border-bottom: 0;
}

.profile-information-icon {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
}

.profile-information-list small,
.profile-information-list strong,
.profile-account-list small,
.profile-account-list strong {
    display: block;
}

.profile-information-list small,
.profile-account-list small {
    color: var(--text-muted);
    font-size: 11px;
}

.profile-information-list strong,
.profile-account-list strong {
    margin-top: 4px;
    color: var(--text-dark);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.profile-account-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.profile-account-list strong {
    text-align: right;
}

.profile-security-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 21px;
}

.profile-security-copy {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.profile-security-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 800;
}

.profile-security-copy h2 {
    color: var(--text-dark);
    font-size: 18px;
}

.profile-security-copy p {
    max-width: 760px;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.6;
}

html[data-theme="dark"] .profile-upgrade-heading h1,
html[data-theme="dark"] .profile-upgrade-name-row h2,
html[data-theme="dark"] .profile-completion-top strong,
html[data-theme="dark"] .profile-upgrade-stats strong,
html[data-theme="dark"] .profile-upgrade-card-heading h2,
html[data-theme="dark"] .profile-information-list strong,
html[data-theme="dark"] .profile-account-list strong,
html[data-theme="dark"] .profile-security-copy h2 {
    color: #f8fafc;
}

@media (max-width: 1050px) {
    .profile-upgrade-hero,
    .profile-upgrade-layout {
        grid-template-columns: 1fr;
    }

    .profile-upgrade-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .profile-upgrade-page {
        padding: 25px 18px;
    }

    .profile-upgrade-heading,
    .profile-security-card {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-upgrade-identity {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-upgrade-stats {
        grid-template-columns: 1fr;
    }

    .profile-account-list > div {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-account-list strong {
        text-align: left;
    }
}



/* =========================================================
   TRANSACTIONS & SALES HISTORY — STAGE 14
========================================================= */

.sales-upgrade-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.sales-upgrade-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.sales-upgrade-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.sales-upgrade-heading h1 {
    color: var(--text-dark);
    font-size: clamp(31px, 4vw, 44px);
}

.sales-upgrade-heading p {
    max-width: 720px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.55;
}

.sales-upgrade-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.sales-upgrade-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.sales-upgrade-summary article,
.sales-upgrade-filters,
.sales-upgrade-table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-small);
}

.sales-upgrade-summary article {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
}

.sales-summary-icon {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 800;
}

.sales-summary-icon.proceeds,
.sales-summary-icon.profit {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.sales-summary-icon.cost {
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
}

.sales-summary-icon.rate {
    background: rgba(217, 119, 6, .11);
    color: #d97706;
}

.sales-summary-icon.average {
    background: rgba(14, 165, 233, .10);
    color: #0284c7;
}

.sales-upgrade-summary small,
.sales-upgrade-summary strong,
.sales-upgrade-summary p {
    display: block;
}

.sales-upgrade-summary small {
    color: var(--text-muted);
    font-size: 12px;
}

.sales-upgrade-summary strong {
    margin: 5px 0;
    color: var(--text-dark);
    font-size: 18px;
    overflow-wrap: anywhere;
}

.sales-upgrade-summary p {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.sales-upgrade-filters {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.5fr)
        minmax(145px, .8fr)
        minmax(135px, .7fr)
        minmax(135px, .7fr)
        minmax(135px, .7fr)
        auto;
    align-items: end;
    gap: 12px;
    padding: 17px;
    margin-bottom: 18px;
    border-radius: 15px;
}

.sales-upgrade-filters label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.sales-upgrade-filters input,
.sales-upgrade-filters select {
    width: 100%;
    min-height: 43px;
}

.sales-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sales-upgrade-table-card {
    overflow: hidden;
    border-radius: 17px;
}

.sales-upgrade-table-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.sales-upgrade-table-heading h2 {
    color: var(--text-dark);
    font-size: 19px;
}

.sales-upgrade-table-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.sales-upgrade-table-heading > span {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.sales-upgrade-table-wrap {
    overflow-x: auto;
}

.sales-upgrade-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
}

.sales-upgrade-table th,
.sales-upgrade-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.sales-upgrade-table th {
    background: rgba(148, 163, 184, .055);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.sales-upgrade-table td {
    color: var(--text-normal);
    font-size: 13px;
}

.sales-upgrade-table tbody tr:last-child td {
    border-bottom: 0;
}

.sales-upgrade-table tbody tr:hover {
    background: rgba(148, 163, 184, .05);
}

.sales-upgrade-table td small,
.sales-upgrade-table td strong {
    display: block;
}

.sales-upgrade-table td small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.sales-upgrade-ticker {
    color: var(--text-dark);
    font-size: 14px;
}

.sales-upgrade-type {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    margin-top: 5px;
    padding: 3px 8px;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.sales-upgrade-empty {
    min-height: 430px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 11px;
    padding: 35px 22px;
    text-align: center;
}

.sales-upgrade-empty > span {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 50%;
    font-size: 25px;
    font-weight: 800;
}

.sales-upgrade-empty h3 {
    color: var(--text-dark);
    font-size: 20px;
}

.sales-upgrade-empty p {
    max-width: 520px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.sales-upgrade-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
}

.sales-upgrade-pagination a,
.sales-upgrade-pagination span {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
}

.sales-upgrade-pagination a {
    background: var(--surface);
    color: #2563eb;
    border: 1px solid var(--border);
    text-decoration: none;
}

.sales-upgrade-pagination span {
    color: var(--text-muted);
}

.sales-upgrade-pagination .disabled {
    opacity: .55;
}

html[data-theme="dark"] .sales-upgrade-heading h1,
html[data-theme="dark"] .sales-upgrade-summary strong,
html[data-theme="dark"] .sales-upgrade-table-heading h2,
html[data-theme="dark"] .sales-upgrade-ticker,
html[data-theme="dark"] .sales-upgrade-empty h3 {
    color: #f8fafc;
}

@media (max-width: 1300px) {
    .sales-upgrade-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sales-upgrade-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sales-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .sales-upgrade-page {
        padding: 25px 18px;
    }

    .sales-upgrade-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .sales-upgrade-summary,
    .sales-upgrade-filters {
        grid-template-columns: 1fr;
    }

    .sales-filter-actions {
        grid-column: auto;
        flex-wrap: wrap;
    }

    .sales-upgrade-table {
        min-width: 0;
    }

    .sales-upgrade-table thead {
        display: none;
    }

    .sales-upgrade-table,
    .sales-upgrade-table tbody,
    .sales-upgrade-table tr,
    .sales-upgrade-table td {
        display: block;
        width: 100%;
    }

    .sales-upgrade-table tr {
        padding: 12px 17px;
        border-bottom: 1px solid var(--border);
    }

    .sales-upgrade-table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 8px 0;
        border-bottom: 0;
        text-align: right;
    }

    .sales-upgrade-table td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
        text-align: left;
    }

    .sales-upgrade-table td > * {
        max-width: 60%;
    }
}

@media print {
    .sidebar,
    .navbar,
    .page-heading-bar,
    .sales-upgrade-actions,
    .sales-upgrade-filters,
    .sales-upgrade-pagination {
        display: none !important;
    }

    .main-content {
        width: 100% !important;
        margin: 0 !important;
    }

    .sales-upgrade-page {
        max-width: none;
        padding: 0;
    }

    .sales-upgrade-summary article,
    .sales-upgrade-table-card {
        box-shadow: none;
    }
}



/* =========================================================
   CONTRIBUTIONS UPGRADE — STAGE 15
========================================================= */

.contributions-upgrade-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.contributions-upgrade-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.contributions-upgrade-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.contributions-upgrade-heading h1 {
    color: var(--text-dark);
    font-size: clamp(31px, 4vw, 44px);
}

.contributions-upgrade-heading p {
    max-width: 720px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.55;
}

.contributions-upgrade-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.contributions-upgrade-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.contributions-upgrade-summary article,
.contributions-chart-card,
.contributions-withdrawal-card,
.contributions-filter-card,
.contributions-history-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-small);
}

.contributions-upgrade-summary article {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
}

.contribution-summary-icon {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 800;
}

.contribution-summary-icon.contributed,
.contribution-summary-icon.month {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.contribution-summary-icon.withdrawn,
.contribution-summary-icon.month-out {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.contribution-summary-icon.balance {
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
}

.contributions-upgrade-summary small,
.contributions-upgrade-summary strong,
.contributions-upgrade-summary p {
    display: block;
}

.contributions-upgrade-summary small {
    color: var(--text-muted);
    font-size: 12px;
}

.contributions-upgrade-summary strong {
    margin: 5px 0;
    color: var(--text-dark);
    font-size: 18px;
    overflow-wrap: anywhere;
}

.contributions-upgrade-summary p {
    color: var(--text-muted);
    font-size: 11px;
}

.contributions-upgrade-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr);
    align-items: stretch;
    gap: 18px;
    margin-bottom: 18px;
}

.contributions-chart-card,
.contributions-withdrawal-card,
.contributions-history-card {
    overflow: hidden;
    border-radius: 17px;
}

.contributions-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.contributions-card-heading h2 {
    color: var(--text-dark);
    font-size: 19px;
}

.contributions-card-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.contributions-chart-wrap {
    height: 310px;
    padding: 18px 20px 20px;
}

.contributions-withdrawal-card form {
    padding: 19px 20px 20px;
}

.contributions-balance-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    margin-bottom: 14px;
    background: rgba(37, 99, 235, .06);
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 11px;
}

.contributions-balance-note small {
    color: var(--text-muted);
    font-size: 12px;
}

.contributions-balance-note strong {
    color: var(--text-dark);
    font-size: 14px;
}

.contributions-withdraw-button {
    width: 100%;
}

.contributions-withdrawal-warning {
    padding: 0 20px 20px;
    color: #dc2626;
    font-size: 12px;
    line-height: 1.5;
}

.contributions-filter-card {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.35fr)
        minmax(145px, .75fr)
        minmax(135px, .65fr)
        minmax(135px, .65fr)
        minmax(135px, .65fr)
        minmax(135px, .65fr)
        auto;
    align-items: end;
    gap: 12px;
    padding: 17px;
    margin-bottom: 18px;
    border-radius: 15px;
}

.contributions-filter-card label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.contributions-filter-card input,
.contributions-filter-card select {
    width: 100%;
    min-height: 43px;
}

.contributions-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contributions-history-count {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.contributions-filter-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
}

.contributions-filter-summary > div {
    min-width: 0;
    padding: 14px 20px;
    border-right: 1px solid var(--border);
}

.contributions-filter-summary > div:last-child {
    border-right: 0;
}

.contributions-filter-summary small,
.contributions-filter-summary strong {
    display: block;
}

.contributions-filter-summary small {
    color: var(--text-muted);
    font-size: 11px;
}

.contributions-filter-summary strong {
    margin-top: 4px;
    font-size: 15px;
}

.contributions-history-list {
    display: grid;
}

.contributions-history-row {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
}

.contributions-history-row:last-child {
    border-bottom: 0;
}

.contributions-history-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
}

.contributions-history-icon.contribution {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.contributions-history-icon.withdrawal {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.contributions-history-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.contributions-history-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.contributions-history-title strong {
    color: var(--text-dark);
    font-size: 14px;
}

.contributions-type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.contributions-type-badge.contribution {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.contributions-type-badge.withdrawal {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.contributions-history-copy p {
    color: var(--text-normal);
    font-size: 12px;
    line-height: 1.45;
}

.contributions-history-copy small {
    color: var(--text-muted);
    font-size: 11px;
}

.contributions-history-amount {
    text-align: right;
}

.contributions-history-amount strong {
    font-size: 14px;
}

.contributions-history-empty {
    min-height: 400px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 35px 22px;
    text-align: center;
}

.contributions-history-empty > span {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 50%;
    font-size: 25px;
}

.contributions-history-empty h3 {
    color: var(--text-dark);
    font-size: 20px;
}

.contributions-history-empty p {
    max-width: 480px;
    color: var(--text-muted);
    font-size: 13px;
}

.contributions-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
}

.contributions-pagination a,
.contributions-pagination span {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
}

.contributions-pagination a {
    background: var(--surface);
    color: #2563eb;
    border: 1px solid var(--border);
    text-decoration: none;
}

.contributions-pagination span {
    color: var(--text-muted);
}

.contributions-pagination .disabled {
    opacity: .55;
}

html[data-theme="dark"] .contributions-upgrade-heading h1,
html[data-theme="dark"] .contributions-upgrade-summary strong,
html[data-theme="dark"] .contributions-card-heading h2,
html[data-theme="dark"] .contributions-balance-note strong,
html[data-theme="dark"] .contributions-history-title strong,
html[data-theme="dark"] .contributions-history-empty h3 {
    color: #f8fafc;
}

@media (max-width: 1350px) {
    .contributions-upgrade-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contributions-filter-card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contributions-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    .contributions-upgrade-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .contributions-upgrade-page {
        padding: 25px 18px;
    }

    .contributions-upgrade-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .contributions-upgrade-summary,
    .contributions-filter-card,
    .contributions-filter-summary {
        grid-template-columns: 1fr;
    }

    .contributions-filter-actions {
        grid-column: auto;
        flex-wrap: wrap;
    }

    .contributions-filter-summary > div {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .contributions-filter-summary > div:last-child {
        border-bottom: 0;
    }

    .contributions-history-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .contributions-history-amount {
        grid-column: 2;
        text-align: left;
    }
}

@media print {
    .sidebar,
    .navbar,
    .page-heading-bar,
    .contributions-upgrade-actions,
    .contributions-withdrawal-card,
    .contributions-filter-card,
    .contributions-pagination {
        display: none !important;
    }

    .main-content {
        width: 100% !important;
        margin: 0 !important;
    }

    .contributions-upgrade-page {
        max-width: none;
        padding: 0;
    }

    .contributions-upgrade-summary article,
    .contributions-chart-card,
    .contributions-history-card {
        box-shadow: none;
    }
}



/* =========================================================
   GOALS UPGRADE — STAGE 16
========================================================= */

.goals-upgrade-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.goals-upgrade-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.goals-upgrade-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.goals-upgrade-heading h1 {
    color: var(--text-dark);
    font-size: clamp(31px, 4vw, 44px);
}

.goals-upgrade-heading p {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 15px;
}

.goals-upgrade-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.goals-upgrade-summary article,
.goals-overall-progress,
.goals-create-card,
.goals-filter-card,
.goal-upgrade-card,
.goals-upgrade-empty {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-small);
}

.goals-upgrade-summary article {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
}

.goal-summary-icon {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 800;
}

.goal-summary-icon.active,
.goal-summary-icon.target {
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
}

.goal-summary-icon.completed,
.goal-summary-icon.saved {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.goal-summary-icon.remaining {
    background: rgba(217, 119, 6, .11);
    color: #d97706;
}

.goals-upgrade-summary small,
.goals-upgrade-summary strong,
.goals-upgrade-summary p {
    display: block;
}

.goals-upgrade-summary small {
    color: var(--text-muted);
    font-size: 12px;
}

.goals-upgrade-summary strong {
    margin: 5px 0;
    color: var(--text-dark);
    font-size: 18px;
    overflow-wrap: anywhere;
}

.goals-upgrade-summary p {
    color: var(--text-muted);
    font-size: 11px;
}

.goals-overall-progress {
    padding: 18px 20px;
    margin-bottom: 18px;
    border-radius: 15px;
}

.goals-overall-progress-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
}

.goals-overall-progress-top small,
.goals-overall-progress-top strong {
    display: block;
}

.goals-overall-progress-top small {
    color: var(--text-muted);
    font-size: 12px;
}

.goals-overall-progress-top strong {
    margin-top: 4px;
    color: var(--text-dark);
    font-size: 24px;
}

.goals-overall-progress-top > span {
    color: var(--text-muted);
    font-size: 12px;
}

.goals-overall-track,
.goal-upgrade-track {
    overflow: hidden;
    background: rgba(148, 163, 184, .18);
    border-radius: 999px;
}

.goals-overall-track {
    height: 10px;
    margin-top: 14px;
}

.goals-overall-track span,
.goal-upgrade-track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    border-radius: inherit;
}

.goals-create-card {
    overflow: hidden;
    margin-bottom: 18px;
    border-radius: 17px;
}

.goals-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.goals-card-heading h2,
.goals-results-heading h2 {
    color: var(--text-dark);
    font-size: 19px;
}

.goals-card-heading p,
.goals-results-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.goals-card-heading-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 11px;
    font-size: 18px;
    font-weight: 800;
}

.goals-create-form {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 13px;
    padding: 18px 20px 20px;
}

.goals-filter-card {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(170px, .8fr) minmax(180px, .8fr) auto;
    align-items: end;
    gap: 12px;
    padding: 17px;
    margin-bottom: 18px;
    border-radius: 15px;
}

.goals-filter-card label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.goals-filter-card input,
.goals-filter-card select {
    width: 100%;
}

.goals-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.goals-results-heading {
    margin-bottom: 14px;
}

.goals-upgrade-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.goal-upgrade-card {
    min-width: 0;
    overflow: hidden;
    padding: 19px;
    border-radius: 17px;
}

.goal-upgrade-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 13px;
}

.goal-upgrade-title-area {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.goal-upgrade-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 800;
}

.goal-upgrade-title-area h3 {
    color: var(--text-dark);
    font-size: 17px;
    overflow-wrap: anywhere;
}

.goal-upgrade-title-area small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.goal-upgrade-progress-badge {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.goal-upgrade-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 17px 0;
}

.goal-upgrade-values > div {
    min-width: 0;
    padding: 11px;
    background: rgba(148, 163, 184, .055);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.goal-upgrade-values small,
.goal-upgrade-values strong {
    display: block;
}

.goal-upgrade-values small {
    color: var(--text-muted);
    font-size: 10px;
}

.goal-upgrade-values strong {
    margin-top: 5px;
    color: var(--text-dark);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.goal-upgrade-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted);
    font-size: 11px;
}

.goal-upgrade-progress-info strong {
    color: #2563eb;
}

.goal-upgrade-track {
    height: 8px;
    margin: 9px 0 13px;
}

.goal-upgrade-message {
    padding: 10px 11px;
    margin-bottom: 14px;
    background: rgba(37, 99, 235, .06);
    color: var(--text-muted);
    border: 1px solid rgba(37, 99, 235, .10);
    border-radius: 9px;
    font-size: 11px;
}

.goal-upgrade-message.near {
    background: rgba(22, 163, 74, .07);
    color: #15803d;
    border-color: rgba(22, 163, 74, .13);
}

.goal-upgrade-saving-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.goal-upgrade-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid var(--border);
}

.goal-upgrade-actions .btn {
    flex: 1;
}

.goals-upgrade-empty {
    min-height: 400px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 35px 22px;
    border-radius: 17px;
    text-align: center;
}

.goals-upgrade-empty > span {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
    border-radius: 50%;
    font-size: 25px;
}

.goals-upgrade-empty h2 {
    color: var(--text-dark);
    font-size: 21px;
}

.goals-upgrade-empty p {
    max-width: 480px;
    color: var(--text-muted);
    font-size: 13px;
}

.goals-upgrade-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
}

.goals-upgrade-pagination a,
.goals-upgrade-pagination span {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
}

.goals-upgrade-pagination a {
    background: var(--surface);
    color: #2563eb;
    border: 1px solid var(--border);
    text-decoration: none;
}

.goals-upgrade-pagination span {
    color: var(--text-muted);
}

.goals-upgrade-pagination .disabled {
    opacity: .55;
}

html[data-theme="dark"] .goals-upgrade-heading h1,
html[data-theme="dark"] .goals-upgrade-summary strong,
html[data-theme="dark"] .goals-overall-progress-top strong,
html[data-theme="dark"] .goals-card-heading h2,
html[data-theme="dark"] .goals-results-heading h2,
html[data-theme="dark"] .goal-upgrade-title-area h3,
html[data-theme="dark"] .goal-upgrade-values strong,
html[data-theme="dark"] .goals-upgrade-empty h2 {
    color: #f8fafc;
}

@media (max-width: 1250px) {
    .goals-upgrade-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .goals-upgrade-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .goals-create-form,
    .goals-filter-card {
        grid-template-columns: 1fr;
    }

    .goals-filter-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 700px) {
    .goals-upgrade-page {
        padding: 25px 18px;
    }

    .goals-upgrade-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .goals-upgrade-summary,
    .goals-upgrade-grid {
        grid-template-columns: 1fr;
    }

    .goal-upgrade-values {
        grid-template-columns: 1fr;
    }

    .goal-upgrade-saving-form {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   DIVIDENDS & BONDS — STAGE 17
========================================================= */
.income-page{width:100%;max-width:1500px;margin:0 auto;padding:36px}
.income-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}
.income-eyebrow{display:inline-block;margin-bottom:7px;color:#2563eb;font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.income-heading h1{color:var(--text-dark);font-size:clamp(31px,4vw,44px)}
.income-heading p{margin-top:8px;color:var(--text-muted);font-size:15px}
.income-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.income-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.bond-upgrade-summary{grid-template-columns:repeat(5,minmax(0,1fr))}
.income-summary-grid article,.income-card,.income-filter-card,.bond-next-maturity{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-small)}
.income-summary-grid article{display:flex;align-items:flex-start;gap:12px;padding:16px;border-radius:14px}
.income-icon{width:41px;height:41px;flex:0 0 41px;display:grid;place-items:center;border-radius:11px;font-size:16px;font-weight:800;background:rgba(37,99,235,.10);color:#2563eb}
.income-icon.year{background:rgba(22,163,74,.10);color:#16a34a}
.income-icon.average{background:rgba(124,58,237,.10);color:#7c3aed}
.income-icon.tickers,.income-icon.maturity{background:rgba(217,119,6,.11);color:#d97706}
.income-summary-grid small,.income-summary-grid strong,.income-summary-grid p{display:block}
.income-summary-grid small{color:var(--text-muted);font-size:12px}
.income-summary-grid strong{margin:5px 0;color:var(--text-dark);font-size:18px;overflow-wrap:anywhere}
.income-summary-grid p{color:var(--text-muted);font-size:11px}
.income-main-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr);gap:18px;margin-bottom:18px}
.income-card{overflow:hidden;border-radius:17px}
.income-card-heading{display:flex;justify-content:space-between;gap:15px;padding:18px 20px;border-bottom:1px solid var(--border)}
.income-card-heading h2{color:var(--text-dark);font-size:19px}
.income-card-heading p{margin-top:4px;color:var(--text-muted);font-size:12px}
.income-count{padding:5px 10px;background:rgba(37,99,235,.09);color:#2563eb;border-radius:999px;font-size:11px;font-weight:800}
.income-chart-wrap{height:300px;padding:18px 20px}
.income-filter-total{display:grid;place-items:center;padding:25px;text-align:center}
.income-filter-total small,.income-filter-total strong,.income-filter-total p{display:block}
.income-filter-total small{color:var(--text-muted);font-size:12px}
.income-filter-total strong{margin:8px 0;font-size:28px}
.income-filter-total p{color:var(--text-muted);font-size:12px}
.income-filter-card{display:grid;grid-template-columns:minmax(220px,1.3fr) minmax(150px,.7fr) minmax(150px,.7fr) auto;align-items:end;gap:12px;padding:17px;margin-bottom:18px;border-radius:15px}
.bond-filter-card{grid-template-columns:minmax(240px,1.3fr) minmax(180px,.8fr) minmax(150px,.7fr) auto}
.income-filter-card label{display:block;margin-bottom:7px;color:var(--text-muted);font-size:12px;font-weight:800}
.income-filter-card input,.income-filter-card select{width:100%}
.income-filter-actions{display:flex;gap:8px}
.income-list{display:grid}
.income-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid var(--border)}
.income-row:last-child{border-bottom:0}
.income-row-icon{width:42px;height:42px;display:grid;place-items:center;background:rgba(22,163,74,.10);color:#16a34a;border-radius:12px;font-size:16px;font-weight:800}
.income-row-copy,.income-row-date{display:grid;gap:4px}
.income-row-copy strong,.income-row-date strong{color:var(--text-dark);font-size:14px}
.income-row-copy small,.income-row-date small{color:var(--text-muted);font-size:11px}
.income-row-amount{font-size:14px;white-space:nowrap}
.income-empty{min-height:390px;display:grid;place-items:center;align-content:center;gap:10px;padding:35px;text-align:center}
.income-empty>span{width:66px;height:66px;display:grid;place-items:center;background:rgba(37,99,235,.10);color:#2563eb;border-radius:50%;font-size:24px}
.income-empty h3{color:var(--text-dark);font-size:20px}
.income-empty p{color:var(--text-muted);font-size:13px}
.income-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.income-pagination a,.income-pagination span{min-height:38px;display:inline-flex;align-items:center;padding:7px 12px;border-radius:10px;font-size:12px;font-weight:800}
.income-pagination a{background:var(--surface);color:#2563eb;border:1px solid var(--border);text-decoration:none}
.income-pagination span{color:var(--text-muted)}.income-pagination .disabled{opacity:.55}
.bond-next-maturity{padding:16px 20px;margin-bottom:18px;border-radius:14px}
.bond-next-maturity small,.bond-next-maturity strong{display:block}
.bond-next-maturity small{color:var(--text-muted);font-size:12px}
.bond-next-maturity strong{margin-top:5px;color:var(--text-dark);font-size:18px}
.bond-upgrade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:18px}
.bond-upgrade-card{padding:17px;border:1px solid var(--border);border-radius:14px;background:rgba(148,163,184,.035)}
.bond-upgrade-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:11px}
.bond-upgrade-icon{width:41px;height:41px;display:grid;place-items:center;background:rgba(37,99,235,.10);color:#2563eb;border-radius:11px;font-size:16px;font-weight:800}
.bond-upgrade-top h3{color:var(--text-dark);font-size:15px;overflow-wrap:anywhere}
.bond-upgrade-top small{display:block;margin-top:4px;color:var(--text-muted);font-size:11px}
.bond-upgrade-status{padding:5px 9px;background:rgba(22,163,74,.10);color:#16a34a;border-radius:999px;font-size:10px;font-weight:800}
.bond-upgrade-status.matured{background:rgba(148,163,184,.13);color:var(--text-muted)}
.bond-upgrade-principal{margin:15px 0;padding:13px;background:rgba(37,99,235,.05);border-radius:10px}
.bond-upgrade-principal small,.bond-upgrade-principal strong{display:block}
.bond-upgrade-principal small{color:var(--text-muted);font-size:11px}
.bond-upgrade-principal strong{margin-top:5px;color:var(--text-dark);font-size:18px}
.bond-upgrade-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bond-upgrade-details>div{padding:10px;border:1px solid var(--border);border-radius:9px}
.bond-upgrade-details small,.bond-upgrade-details strong{display:block}
.bond-upgrade-details small{color:var(--text-muted);font-size:10px}
.bond-upgrade-details strong{margin-top:4px;color:var(--text-dark);font-size:12px;overflow-wrap:anywhere}
html[data-theme="dark"] .income-heading h1,html[data-theme="dark"] .income-summary-grid strong,html[data-theme="dark"] .income-card-heading h2,html[data-theme="dark"] .income-row-copy strong,html[data-theme="dark"] .income-row-date strong,html[data-theme="dark"] .income-empty h3,html[data-theme="dark"] .bond-next-maturity strong,html[data-theme="dark"] .bond-upgrade-top h3,html[data-theme="dark"] .bond-upgrade-principal strong,html[data-theme="dark"] .bond-upgrade-details strong{color:#f8fafc}
@media(max-width:1250px){.income-summary-grid,.bond-upgrade-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:950px){.income-main-grid,.bond-upgrade-grid{grid-template-columns:1fr}.income-filter-card,.bond-filter-card{grid-template-columns:repeat(2,minmax(0,1fr))}.income-filter-actions{grid-column:1/-1}}
@media(max-width:680px){.income-page{padding:25px 18px}.income-heading{flex-direction:column;align-items:stretch}.income-summary-grid,.bond-upgrade-summary,.income-filter-card,.bond-filter-card{grid-template-columns:1fr}.income-filter-actions{grid-column:auto;flex-wrap:wrap}.income-row{grid-template-columns:auto minmax(0,1fr)}.income-row-date,.income-row-amount{grid-column:2}.bond-upgrade-details{grid-template-columns:1fr}}
@media print{.sidebar,.navbar,.page-heading-bar,.income-actions,.income-filter-card,.income-pagination{display:none!important}.main-content{width:100%!important;margin:0!important}.income-page{max-width:none;padding:0}}



/* =========================================================
   ADMIN DASHBOARD UPGRADE — STAGE 18
========================================================= */

.admin-upgrade-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.admin-upgrade-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.admin-upgrade-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.admin-upgrade-heading h1 {
    color: var(--text-dark);
    font-size: clamp(31px, 4vw, 44px);
}

.admin-upgrade-heading p {
    max-width: 720px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.55;
}

.admin-upgrade-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-upgrade-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.admin-upgrade-metrics article,
.admin-upgrade-alert-strip,
.admin-upgrade-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-small);
}

.admin-upgrade-metrics article {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
}

.admin-upgrade-icon {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 800;
}

.admin-upgrade-icon.users,
.admin-upgrade-icon.portfolio {
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
}

.admin-upgrade-icon.contributions {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.admin-upgrade-icon.support {
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
}

.admin-upgrade-icon.alerts {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.admin-upgrade-icon.bonds {
    background: rgba(217, 119, 6, .11);
    color: #d97706;
}

.admin-upgrade-metrics small,
.admin-upgrade-metrics strong,
.admin-upgrade-metrics p {
    display: block;
}

.admin-upgrade-metrics small {
    color: var(--text-muted);
    font-size: 12px;
}

.admin-upgrade-metrics strong {
    margin: 5px 0;
    color: var(--text-dark);
    font-size: 18px;
    overflow-wrap: anywhere;
}

.admin-upgrade-metrics p {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.admin-upgrade-alert-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 18px;
    border-radius: 14px;
}

.admin-upgrade-alert-strip a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    color: inherit;
    border-right: 1px solid var(--border);
    text-decoration: none;
}

.admin-upgrade-alert-strip a:last-child {
    border-right: 0;
}

.admin-upgrade-alert-strip a > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 800;
}

.admin-upgrade-alert-strip small,
.admin-upgrade-alert-strip strong {
    display: block;
}

.admin-upgrade-alert-strip small {
    color: var(--text-muted);
    font-size: 12px;
}

.admin-upgrade-alert-strip strong {
    margin-top: 3px;
    color: var(--text-dark);
    font-size: 20px;
}

.admin-upgrade-chart-grid,
.admin-upgrade-content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.admin-upgrade-panel {
    overflow: hidden;
    margin-bottom: 18px;
    border-radius: 17px;
}

.admin-upgrade-chart-grid .admin-upgrade-panel,
.admin-upgrade-content-grid .admin-upgrade-panel {
    margin-bottom: 0;
}

.admin-upgrade-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.admin-upgrade-panel-heading h2 {
    color: var(--text-dark);
    font-size: 19px;
}

.admin-upgrade-panel-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.admin-upgrade-panel-heading a {
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.admin-upgrade-count {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.admin-upgrade-count.warning {
    background: rgba(217, 119, 6, .11);
    color: #d97706;
}

.admin-user-chart,
.admin-activity-chart {
    height: 300px;
    padding: 18px 20px 20px;
}

.admin-upgrade-table-wrap {
    overflow-x: auto;
}

.admin-upgrade-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

.admin-upgrade-table th,
.admin-upgrade-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.admin-upgrade-table th {
    background: rgba(148, 163, 184, .055);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
}

.admin-upgrade-table td {
    color: var(--text-normal);
    font-size: 13px;
}

.admin-upgrade-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-upgrade-table td strong,
.admin-upgrade-table td small {
    display: block;
}

.admin-upgrade-table td strong {
    color: var(--text-dark);
    font-size: 13px;
}

.admin-upgrade-table td small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.admin-table-count {
    min-width: 29px;
    height: 29px;
    display: inline-grid;
    place-items: center;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.admin-table-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.admin-user-list,
.admin-support-preview-list,
.admin-log-list {
    display: grid;
}

.admin-user-row,
.admin-support-preview-row,
.admin-log-row {
    min-width: 0;
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.admin-user-row,
.admin-support-preview-row {
    color: inherit;
    text-decoration: none;
}

.admin-user-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.admin-support-preview-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.admin-log-row {
    grid-template-columns: auto minmax(0, 1fr);
}

.admin-user-avatar,
.admin-support-preview-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
}

.admin-support-preview-icon {
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
}

.admin-user-copy,
.admin-user-side,
.admin-support-preview-copy,
.admin-support-preview-side {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.admin-user-copy strong,
.admin-support-preview-copy strong,
.admin-log-row strong {
    color: var(--text-dark);
    font-size: 13px;
}

.admin-user-copy small,
.admin-user-side small,
.admin-support-preview-copy small,
.admin-support-preview-side small,
.admin-log-row small {
    color: var(--text-muted);
    font-size: 11px;
}

.admin-user-side,
.admin-support-preview-side {
    text-align: right;
}

.admin-user-side strong,
.admin-support-preview-side strong {
    font-size: 11px;
}

.admin-log-dot {
    width: 10px;
    height: 10px;
    background: #2563eb;
    border-radius: 50%;
}

.admin-log-row > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.admin-quick-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    padding: 17px;
}

.admin-quick-action-grid a {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 14px;
    color: inherit;
    border: 1px solid var(--border);
    border-radius: 11px;
    text-decoration: none;
}

.admin-quick-action-grid a > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin-bottom: 2px;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
}

.admin-quick-action-grid strong {
    color: var(--text-dark);
    font-size: 13px;
}

.admin-quick-action-grid small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.admin-upgrade-empty {
    min-height: 130px;
    display: grid;
    place-items: center;
    padding: 25px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

html[data-theme="dark"] .admin-upgrade-heading h1,
html[data-theme="dark"] .admin-upgrade-metrics strong,
html[data-theme="dark"] .admin-upgrade-alert-strip strong,
html[data-theme="dark"] .admin-upgrade-panel-heading h2,
html[data-theme="dark"] .admin-upgrade-table td strong,
html[data-theme="dark"] .admin-user-copy strong,
html[data-theme="dark"] .admin-support-preview-copy strong,
html[data-theme="dark"] .admin-log-row strong,
html[data-theme="dark"] .admin-quick-action-grid strong {
    color: #f8fafc;
}

@media (max-width: 1300px) {
    .admin-upgrade-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 950px) {
    .admin-upgrade-chart-grid,
    .admin-upgrade-content-grid {
        grid-template-columns: 1fr;
    }

    .admin-upgrade-alert-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-upgrade-alert-strip a:nth-child(2) {
        border-right: 0;
    }

    .admin-upgrade-alert-strip a:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
    }
}

@media (max-width: 680px) {
    .admin-upgrade-page {
        padding: 25px 18px;
    }

    .admin-upgrade-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-upgrade-metrics,
    .admin-upgrade-alert-strip,
    .admin-quick-action-grid {
        grid-template-columns: 1fr;
    }

    .admin-upgrade-alert-strip a {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .admin-upgrade-alert-strip a:last-child {
        border-bottom: 0;
    }

    .admin-upgrade-table {
        min-width: 0;
    }

    .admin-upgrade-table thead {
        display: none;
    }

    .admin-upgrade-table,
    .admin-upgrade-table tbody,
    .admin-upgrade-table tr,
    .admin-upgrade-table td {
        display: block;
        width: 100%;
    }

    .admin-upgrade-table tr {
        padding: 12px 17px;
        border-bottom: 1px solid var(--border);
    }

    .admin-upgrade-table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 8px 0;
        border-bottom: 0;
        text-align: right;
    }

    .admin-upgrade-table td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
        text-align: left;
    }

    .admin-user-row,
    .admin-support-preview-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .admin-user-side,
    .admin-support-preview-side {
        grid-column: 2;
        text-align: left;
    }
}



/* =========================================================
   ADMIN USERS UPGRADE — STAGE 19
========================================================= */

.admin-users-upgrade-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.admin-users-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.admin-users-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.admin-users-heading h1 {
    color: var(--text-dark);
    font-size: clamp(31px, 4vw, 44px);
}

.admin-users-heading p {
    max-width: 720px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.55;
}

.admin-users-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.admin-users-summary article,
.admin-users-filter-card,
.admin-users-list-card,
.admin-user-upgrade-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-small);
}

.admin-users-summary article {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
}

.admin-users-summary-icon {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 800;
}

.admin-users-summary-icon.total,
.admin-users-summary-icon.members {
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
}

.admin-users-summary-icon.active {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.admin-users-summary-icon.suspended {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.admin-users-summary-icon.admins {
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
}

.admin-users-summary small,
.admin-users-summary strong,
.admin-users-summary p {
    display: block;
}

.admin-users-summary small {
    color: var(--text-muted);
    font-size: 12px;
}

.admin-users-summary strong {
    margin: 5px 0;
    color: var(--text-dark);
    font-size: 20px;
}

.admin-users-summary p {
    color: var(--text-muted);
    font-size: 11px;
}

.admin-users-filter-card {
    display: grid;
    grid-template-columns:
        minmax(240px, 1.4fr)
        minmax(150px, .7fr)
        minmax(150px, .7fr)
        minmax(170px, .8fr)
        auto;
    align-items: end;
    gap: 12px;
    padding: 17px;
    margin-bottom: 18px;
    border-radius: 15px;
}

.admin-users-filter-card label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.admin-users-filter-card input,
.admin-users-filter-card select {
    width: 100%;
}

.admin-users-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-users-list-card {
    overflow: hidden;
    border-radius: 17px;
}

.admin-users-list-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.admin-users-list-heading h2 {
    color: var(--text-dark);
    font-size: 19px;
}

.admin-users-list-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.admin-users-list-heading > span {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.admin-users-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
}

.admin-user-upgrade-card {
    min-width: 0;
    overflow: hidden;
    padding: 18px;
    border-radius: 14px;
    box-shadow: none;
}

.admin-user-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.admin-user-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.admin-user-photo {
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    object-fit: cover;
    border-radius: 13px;
}

.admin-user-initial {
    display: grid;
    place-items: center;
    background: linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
}

.admin-user-identity h3 {
    color: var(--text-dark);
    font-size: 15px;
    overflow-wrap: anywhere;
}

.admin-user-identity small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.admin-user-badges {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
}

.admin-user-role-badge,
.admin-user-status-badge {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-user-role-badge {
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
}

.admin-user-role-badge.admin {
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
}

.admin-user-status-badge {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.admin-user-status-badge.suspended {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.admin-user-contact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.admin-user-contact > div,
.admin-user-account-stats > div {
    min-width: 0;
    padding: 10px;
    background: rgba(148, 163, 184, .045);
    border: 1px solid var(--border);
    border-radius: 9px;
}

.admin-user-contact small,
.admin-user-contact strong,
.admin-user-account-stats small,
.admin-user-account-stats strong {
    display: block;
}

.admin-user-contact small,
.admin-user-account-stats small {
    color: var(--text-muted);
    font-size: 10px;
}

.admin-user-contact strong,
.admin-user-account-stats strong {
    margin-top: 4px;
    color: var(--text-dark);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.admin-user-account-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.admin-user-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid var(--border);
}

.admin-current-user-note {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.admin-users-empty {
    grid-column: 1 / -1;
    min-height: 390px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 35px 22px;
    color: var(--text-muted);
    text-align: center;
}

.admin-users-empty > span {
    width: 67px;
    height: 67px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 50%;
    font-size: 25px;
}

.admin-users-empty h3 {
    color: var(--text-dark);
    font-size: 20px;
}

.admin-users-empty p {
    font-size: 13px;
}

.admin-users-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
}

.admin-users-pagination a,
.admin-users-pagination span {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
}

.admin-users-pagination a {
    background: var(--surface);
    color: #2563eb;
    border: 1px solid var(--border);
    text-decoration: none;
}

.admin-users-pagination span {
    color: var(--text-muted);
}

.admin-users-pagination .disabled {
    opacity: .55;
}

html[data-theme="dark"] .admin-users-heading h1,
html[data-theme="dark"] .admin-users-summary strong,
html[data-theme="dark"] .admin-users-list-heading h2,
html[data-theme="dark"] .admin-user-identity h3,
html[data-theme="dark"] .admin-user-contact strong,
html[data-theme="dark"] .admin-user-account-stats strong,
html[data-theme="dark"] .admin-users-empty h3 {
    color: #f8fafc;
}

@media (max-width: 1250px) {
    .admin-users-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-users-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 950px) {
    .admin-users-filter-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-users-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .admin-users-upgrade-page {
        padding: 25px 18px;
    }

    .admin-users-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-users-summary,
    .admin-users-filter-card,
    .admin-user-contact,
    .admin-user-account-stats {
        grid-template-columns: 1fr;
    }

    .admin-users-filter-actions {
        grid-column: auto;
        flex-wrap: wrap;
    }

    .admin-user-card-top {
        flex-direction: column;
    }

    .admin-user-badges {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }
}



/* =========================================================
   MARKET FEED & INSTRUMENTS — STAGE 20
========================================================= */

.market-admin-page,
.market-history-upgrade-page,
.add-market-instrument-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px;
}

.market-admin-heading,
.market-history-upgrade-heading,
.add-market-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.market-admin-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.market-admin-heading h1,
.market-history-upgrade-heading h1,
.add-market-heading h1 {
    color: var(--text-dark);
    font-size: clamp(31px, 4vw, 44px);
}

.market-admin-heading p,
.market-history-upgrade-heading p,
.add-market-heading p {
    max-width: 760px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.55;
}

.market-admin-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.market-admin-actions form {
    margin: 0;
}

.market-admin-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.market-admin-summary article,
.market-sync-card,
.market-provider-card,
.market-filter-card,
.market-instrument-list-card,
.market-price-list-card,
.market-log-card,
.market-history-upgrade-heading,
.market-history-metrics article,
.market-history-chart-card,
.add-market-form-card,
.add-market-help-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-small);
}

.market-admin-summary article {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
}

.market-summary-icon {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 800;
}

.market-summary-icon.total {
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
}

.market-summary-icon.active {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.market-summary-icon.inactive {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.market-summary-icon.tracking {
    background: rgba(124, 58, 237, .10);
    color: #7c3aed;
}

.market-admin-summary small,
.market-admin-summary strong,
.market-admin-summary p {
    display: block;
}

.market-admin-summary small {
    color: var(--text-muted);
    font-size: 12px;
}

.market-admin-summary strong {
    margin: 5px 0;
    color: var(--text-dark);
    font-size: 20px;
}

.market-admin-summary p {
    color: var(--text-muted);
    font-size: 11px;
}

.market-sync-card,
.market-provider-card,
.market-instrument-list-card,
.market-price-list-card,
.market-log-card,
.market-history-chart-card,
.add-market-form-card,
.add-market-help-card {
    overflow: hidden;
    margin-bottom: 18px;
    border-radius: 17px;
}

.market-sync-card-heading,
.market-provider-heading,
.market-list-heading,
.market-history-chart-heading,
.add-market-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.market-sync-card-heading h2,
.market-provider-heading h2,
.market-list-heading h2,
.market-history-chart-heading h2,
.add-market-card-heading h2,
.add-market-help-card h2 {
    color: var(--text-dark);
    font-size: 19px;
}

.market-sync-card-heading p,
.market-provider-heading p,
.market-list-heading p,
.market-history-chart-heading p,
.add-market-card-heading p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.market-status-pill,
.market-provider-badge,
.market-list-heading > span,
.market-history-chart-heading > span {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.market-status-pill.warning,
.market-provider-badge.warning {
    background: rgba(217, 119, 6, .11);
    color: #d97706;
}

.market-sync-grid,
.market-provider-grid {
    display: grid;
    gap: 0;
}

.market-sync-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.market-provider-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.market-sync-grid > div,
.market-provider-grid > div {
    min-width: 0;
    padding: 15px 18px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.market-sync-grid small,
.market-sync-grid strong,
.market-provider-grid small,
.market-provider-grid strong {
    display: block;
}

.market-sync-grid small,
.market-provider-grid small {
    color: var(--text-muted);
    font-size: 10px;
}

.market-sync-grid strong,
.market-provider-grid strong {
    margin-top: 5px;
    color: var(--text-dark);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.market-sync-warning {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 16px 18px 0;
    padding: 14px 16px;
    background: rgba(245, 158, 11, .12);
    border: 1px solid #f59e0b;
    border-radius: 12px;
    color: var(--text-normal);
}

.market-sync-warning strong,
.market-sync-warning span {
    display: block;
}

.market-filter-card {
    display: grid;
    grid-template-columns:
        minmax(240px, 1.4fr)
        minmax(150px, .7fr)
        minmax(150px, .7fr)
        minmax(170px, .8fr)
        auto;
    align-items: end;
    gap: 12px;
    padding: 17px;
    margin-bottom: 18px;
    border-radius: 15px;
}

.market-feed-filter {
    grid-template-columns:
        minmax(260px, 1.4fr)
        minmax(170px, .7fr)
        auto;
}

.market-filter-card label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.market-filter-card input,
.market-filter-card select {
    width: 100%;
}

.market-filter-actions {
    display: flex;
    gap: 8px;
}

.market-instrument-grid,
.market-price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
}

.market-instrument-card,
.market-price-card {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(148, 163, 184, .035);
}

.market-instrument-card-top,
.market-price-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 13px;
}

.market-instrument-name {
    min-width: 0;
    display: flex;
    gap: 11px;
}

.market-instrument-name > span {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
}

.market-instrument-name h3,
.market-price-card-top h3 {
    color: var(--text-dark);
    font-size: 15px;
}

.market-instrument-name p,
.market-price-card-top small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.market-instrument-badges {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
}

.market-type-badge,
.market-state-badge,
.market-symbol-badge {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.market-type-badge,
.market-symbol-badge {
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
}

.market-state-badge {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
}

.market-state-badge.inactive {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.market-instrument-price,
.market-price-main {
    margin: 15px 0;
    padding: 13px;
    background: rgba(37, 99, 235, .045);
    border-radius: 10px;
}

.market-instrument-price small,
.market-instrument-price strong,
.market-instrument-price span,
.market-price-main small,
.market-price-main strong,
.market-price-main span {
    display: block;
}

.market-instrument-price small,
.market-price-main small {
    color: var(--text-muted);
    font-size: 10px;
}

.market-instrument-price strong,
.market-price-main strong {
    margin: 5px 0;
    color: var(--text-dark);
    font-size: 19px;
}

.market-instrument-price span,
.market-price-main span {
    font-size: 11px;
    font-weight: 800;
}

.market-instrument-price .fresh {
    color: #16a34a;
}

.market-instrument-price .stale {
    color: #dc2626;
}

.market-instrument-details,
.market-price-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.market-instrument-details > div,
.market-price-details > div {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.market-instrument-details small,
.market-instrument-details strong,
.market-price-details small,
.market-price-details strong {
    display: block;
}

.market-instrument-details small,
.market-price-details small {
    color: var(--text-muted);
    font-size: 10px;
}

.market-instrument-details strong,
.market-price-details strong {
    margin-top: 4px;
    color: var(--text-dark);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.market-instrument-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid var(--border);
}

.market-instrument-actions form {
    margin: 0;
}

.market-price-chart-link {
    width: 100%;
    margin-top: 14px;
}

.market-list-empty {
    grid-column: 1 / -1;
    min-height: 330px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 30px;
    color: var(--text-muted);
    text-align: center;
}

.market-list-empty > span {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 50%;
    font-size: 23px;
}

.market-list-empty h3 {
    color: var(--text-dark);
    font-size: 20px;
}

.market-list-empty p {
    font-size: 13px;
}

.market-log-list {
    display: grid;
}

.market-log-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
}

.market-log-row:last-child {
    border-bottom: 0;
}

.market-log-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
    border-radius: 11px;
    font-weight: 800;
}

.market-log-icon.warning {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.market-log-copy {
    min-width: 0;
}

.market-log-copy strong,
.market-log-copy small,
.market-log-copy p {
    display: block;
}

.market-log-copy strong {
    color: var(--text-dark);
    font-size: 13px;
}

.market-log-copy small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.market-log-copy p {
    margin-top: 5px;
    color: var(--text-normal);
    font-size: 11px;
}

.market-log-stats {
    display: flex;
    gap: 10px;
}

.market-log-stats span {
    min-width: 70px;
    padding: 8px;
    background: rgba(148, 163, 184, .045);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-muted);
    font-size: 9px;
    text-align: center;
}

.market-log-stats strong {
    display: block;
    margin-top: 3px;
    color: var(--text-dark);
    font-size: 13px;
}

.market-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 18px 0;
}

.market-pagination a,
.market-pagination span {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
}

.market-pagination a {
    background: var(--surface);
    color: #2563eb;
    border: 1px solid var(--border);
    text-decoration: none;
}

.market-pagination span {
    color: var(--text-muted);
}

.market-pagination .disabled {
    opacity: .55;
}

/* Price history */

.market-history-upgrade-heading {
    padding: 24px 28px;
    border-radius: 18px;
}

.market-history-back {
    display: inline-block;
    margin-bottom: 13px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.market-history-symbol {
    display: inline-flex;
    padding: 7px 12px;
    background: rgba(34, 197, 94, .14);
    color: #16a34a;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.market-history-current {
    min-width: 220px;
    text-align: right;
}

.market-history-current small,
.market-history-current strong,
.market-history-current span {
    display: block;
}

.market-history-current small,
.market-history-current span {
    color: var(--text-muted);
    font-size: 11px;
}

.market-history-current strong {
    margin: 7px 0;
    color: var(--text-dark);
    font-size: 30px;
}

.market-history-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.market-history-periods button.active {
    background: #16a34a;
    color: #ffffff;
    border-color: #16a34a;
}

.market-history-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.market-history-metrics article {
    padding: 17px 18px;
    border-radius: 14px;
}

.market-history-metrics small,
.market-history-metrics strong {
    display: block;
}

.market-history-metrics small {
    color: var(--text-muted);
    font-size: 11px;
}

.market-history-metrics strong {
    margin-top: 7px;
    color: var(--text-dark);
    font-size: 18px;
}

.market-history-chart-card {
    position: relative;
    min-height: 450px;
}

.market-history-chart-wrap {
    height: 390px;
    padding: 18px 20px 22px;
}

.market-history-empty {
    display: none;
    place-items: center;
    min-height: 350px;
    padding: 30px;
    color: var(--text-muted);
    text-align: center;
}

.market-history-empty strong {
    color: var(--text-dark);
}

.market-history-empty p {
    margin-top: 8px;
    font-size: 12px;
}

.market-history-loading {
    position: absolute;
    inset: 78px 0 0;
    display: grid;
    place-items: center;
    z-index: 2;
    background: color-mix(
        in srgb,
        var(--surface) 86%,
        transparent
    );
    color: var(--text-dark);
}

/* Add instrument */

.add-market-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 18px;
}

.add-market-card-heading > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 11px;
    font-size: 18px;
    font-weight: 800;
}

.add-market-form-card form {
    display: grid;
    gap: 3px;
    padding: 20px;
}

.add-market-form-card .form-group small {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 10px;
}

.add-market-switches {
    display: grid;
    gap: 10px;
    margin: 8px 0 15px;
}

.add-market-switches label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
}

.add-market-switches input {
    width: auto;
    margin-top: 3px;
}

.add-market-switches strong,
.add-market-switches small {
    display: block;
}

.add-market-switches strong {
    color: var(--text-dark);
    font-size: 12px;
}

.add-market-switches small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
}

.add-market-form-actions {
    display: flex;
    gap: 9px;
}

.add-market-help-card {
    align-self: start;
    padding: 22px;
}

.add-market-help-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-radius: 13px;
    font-size: 18px;
    font-weight: 800;
}

.add-market-help-card > p {
    margin: 8px 0 18px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.add-market-help-card > div {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.add-market-help-card strong {
    color: var(--text-dark);
    font-size: 12px;
}

.add-market-help-card div span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

html[data-theme="dark"] .market-admin-heading h1,
html[data-theme="dark"] .market-history-upgrade-heading h1,
html[data-theme="dark"] .add-market-heading h1,
html[data-theme="dark"] .market-admin-summary strong,
html[data-theme="dark"] .market-sync-card-heading h2,
html[data-theme="dark"] .market-provider-heading h2,
html[data-theme="dark"] .market-list-heading h2,
html[data-theme="dark"] .market-history-chart-heading h2,
html[data-theme="dark"] .add-market-card-heading h2,
html[data-theme="dark"] .add-market-help-card h2,
html[data-theme="dark"] .market-sync-grid strong,
html[data-theme="dark"] .market-provider-grid strong,
html[data-theme="dark"] .market-instrument-name h3,
html[data-theme="dark"] .market-price-card-top h3,
html[data-theme="dark"] .market-instrument-price strong,
html[data-theme="dark"] .market-price-main strong,
html[data-theme="dark"] .market-instrument-details strong,
html[data-theme="dark"] .market-price-details strong,
html[data-theme="dark"] .market-log-copy strong,
html[data-theme="dark"] .market-log-stats strong,
html[data-theme="dark"] .market-history-current strong,
html[data-theme="dark"] .market-history-metrics strong,
html[data-theme="dark"] .market-history-empty strong,
html[data-theme="dark"] .add-market-switches strong,
html[data-theme="dark"] .add-market-help-card strong {
    color: #f8fafc;
}

@media (max-width: 1150px) {
    .market-admin-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-provider-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .market-filter-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-filter-actions {
        grid-column: 1 / -1;
    }

    .market-history-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .market-instrument-grid,
    .market-price-grid,
    .add-market-grid {
        grid-template-columns: 1fr;
    }

    .market-sync-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-log-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .market-log-stats {
        grid-column: 2;
        flex-wrap: wrap;
    }
}

@media (max-width: 680px) {
    .market-admin-page,
    .market-history-upgrade-page,
    .add-market-instrument-page {
        padding: 25px 18px;
    }

    .market-admin-heading,
    .market-history-upgrade-heading,
    .add-market-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .market-admin-summary,
    .market-sync-grid,
    .market-provider-grid,
    .market-filter-card,
    .market-history-metrics {
        grid-template-columns: 1fr;
    }

    .market-filter-actions {
        grid-column: auto;
        flex-wrap: wrap;
    }

    .market-admin-actions,
    .market-admin-actions form,
    .market-admin-actions button {
        width: 100%;
    }

    .market-instrument-card-top,
    .market-price-card-top {
        flex-direction: column;
    }

    .market-instrument-badges {
        align-items: flex-start;
        flex-direction: row;
    }

    .market-instrument-details,
    .market-price-details {
        grid-template-columns: 1fr;
    }

    .market-history-current {
        min-width: 0;
        text-align: left;
    }

    .market-history-chart-wrap {
        height: 310px;
    }

    .add-market-form-actions {
        flex-wrap: wrap;
    }
}



/* =========================================================
   STAGE 23A — GLOBAL MOBILE FOUNDATION
   Final responsive overrides
========================================================= */

:root {
    --content-max-width: 1500px;
    --content-padding-desktop: 32px;
    --content-padding-tablet: 22px;
    --content-padding-mobile: 16px;
    --mobile-control-height: 46px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 320px;
    overflow-x: hidden;
    font-size: 16px;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

img,
video {
    height: auto;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

input,
select,
textarea {
    min-height: 44px;
    font-size: 16px;
}

textarea {
    min-height: 110px;
}

button,
.btn,
a.btn {
    min-height: 42px;
    width: auto;
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.btn-small {
    min-height: 36px;
    width: auto;
}

.page-content {
    width: 100%;
    min-width: 0;
    padding: var(--content-padding-desktop);
}

.main-content,
.main-content > *,
.page-content > * {
    min-width: 0;
}

.hero,
.dashboard-page,
.exact-dashboard,
.investments-page,
.sales-history-page,
.contributions-page,
.goals-page,
.watchlist-page,
.dividends-page,
.bonds-page,
.performance-page,
.reports-page,
.dashboard-index-page,
.account-page,
.profile-page,
.settings-page,
.notifications-page,
.help-support-page,
.admin-page,
.admin-upgrade-page,
.admin-users-upgrade-page,
.market-admin-page,
.market-history-upgrade-page,
.add-market-instrument-page {
    width: 100%;
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
}

.page-heading,
.dashboard-heading,
.admin-upgrade-heading,
.admin-users-heading,
.market-admin-heading,
.market-history-upgrade-heading,
.add-market-heading {
    min-width: 0;
}

.page-heading > div,
.dashboard-heading > div,
.admin-upgrade-heading > div,
.admin-users-heading > div,
.market-admin-heading > div,
.market-history-upgrade-heading > div,
.add-market-heading > div {
    min-width: 0;
}

h1,
h2,
h3,
h4,
p,
small,
strong,
span,
a,
td,
th,
label {
    overflow-wrap: anywhere;
}

small {
    line-height: 1.45;
}

.table-responsive,
.admin-upgrade-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.data-table,
.admin-upgrade-table {
    max-width: none;
}

.table-actions,
.admin-actions,
.admin-user-card-actions,
.market-instrument-actions,
.record-action-buttons,
.notifications-row-actions {
    min-width: 0;
}

.record-action-modal {
    padding: 18px;
}

.record-action-dialog {
    width: min(100%, 520px);
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.record-action-summary {
    min-width: 0;
}

.record-action-summary strong {
    overflow-wrap: anywhere;
}

.chart-container,
.chart-container-small,
.exact-hero-chart,
.exact-performance-chart,
.exact-allocation-chart,
.admin-user-chart,
.admin-activity-chart,
.market-history-chart-wrap {
    min-width: 0;
}

canvas {
    width: 100% !important;
}

.empty-state,
.empty-state-card,
.admin-users-empty,
.market-list-empty {
    min-width: 0;
}

.navbar {
    width: 100%;
}

.navbar-left,
.navbar-user,
.navbar-brand {
    min-width: 0;
}

.navbar-user-menu {
    max-width: calc(100vw - 24px);
}

/* Preserve compact inline buttons despite old global mobile rule. */
.table-actions .btn,
.admin-actions .btn,
.admin-user-card-actions .btn,
.market-instrument-actions .btn,
.notifications-row-actions .btn,
.record-action-buttons .btn,
.btn-small {
    width: auto;
}

/* Improve keyboard and touch accessibility. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 2px;
}

@media (hover: none) {
    .btn:hover,
    .dashboard-card:hover,
    .sidebar a:hover {
        transform: none;
    }
}

@media (max-width: 1000px) {
    .page-content {
        padding: var(--content-padding-tablet);
    }

    .page-heading,
    .dashboard-heading,
    .admin-upgrade-heading,
    .admin-users-heading,
    .market-admin-heading,
    .market-history-upgrade-heading,
    .add-market-heading {
        gap: 16px;
    }
}

@media (max-width: 850px) {
    .main-content,
    .main-content.sidebar-collapsed {
        width: 100%;
        margin-left: 0;
    }

    .page-content {
        padding: var(--content-padding-tablet);
    }

    .hero,
    .dashboard-page,
    .exact-dashboard,
    .investments-page,
    .sales-history-page,
    .contributions-page,
    .goals-page,
    .watchlist-page,
    .dividends-page,
    .bonds-page,
    .performance-page,
    .reports-page,
    .dashboard-index-page,
    .account-page,
    .profile-page,
    .settings-page,
    .notifications-page,
    .help-support-page,
    .admin-page,
    .admin-upgrade-page,
    .admin-users-upgrade-page,
    .market-admin-page,
    .market-history-upgrade-page,
    .add-market-instrument-page {
        padding-left: 0;
        padding-right: 0;
    }

    .page-heading,
    .dashboard-heading,
    .admin-upgrade-heading,
    .admin-users-heading,
    .market-admin-heading,
    .market-history-upgrade-heading,
    .add-market-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .page-heading > .btn,
    .page-heading > a.btn,
    .dashboard-heading > .btn,
    .admin-upgrade-actions,
    .market-admin-actions {
        align-self: stretch;
    }

    .admin-upgrade-actions,
    .market-admin-actions {
        width: 100%;
    }

    .admin-upgrade-actions .btn,
    .market-admin-actions .btn,
    .market-admin-actions form {
        flex: 1 1 180px;
    }

    .table-card,
    .watchlist-table-card,
    .admin-upgrade-panel,
    .admin-users-list-card,
    .market-instrument-list-card,
    .market-price-list-card,
    .market-log-card {
        border-radius: 14px;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 15px;
    }

    .page-content {
        padding: var(--content-padding-mobile);
    }

    .navbar {
        min-height: 62px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .page-heading-bar {
        padding: 13px 16px;
    }

    .page-heading-bar h1 {
        font-size: 18px;
    }

    .page-heading h1,
    .dashboard-heading h1,
    .admin-upgrade-heading h1,
    .admin-users-heading h1,
    .market-admin-heading h1,
    .market-history-upgrade-heading h1,
    .add-market-heading h1 {
        font-size: clamp(27px, 9vw, 34px);
    }

    .page-heading p,
    .dashboard-heading p,
    .admin-upgrade-heading p,
    .admin-users-heading p,
    .market-admin-heading p,
    .market-history-upgrade-heading p,
    .add-market-heading p {
        font-size: 14px;
    }

    input,
    select,
    textarea,
    .btn {
        min-height: var(--mobile-control-height);
    }

    /* Undo the earlier rule that made every button full-width. */
    .btn,
    a.btn,
    button.btn {
        width: auto;
    }

    /* Only primary page/form action areas become full-width. */
    .page-heading > .btn,
    .page-heading > a.btn,
    .main-form > .btn,
    .investment-submit-area .btn,
    .withdrawal-submit-btn,
    .goal-saving-form .btn,
    .create-goal-form .btn,
    .watchlist-form-card form > .btn,
    .add-market-form-actions .btn,
    .notifications-hero-actions .btn {
        width: 100%;
    }

    .table-actions,
    .admin-actions,
    .admin-user-card-actions,
    .market-instrument-actions,
    .notifications-row-actions,
    .record-action-buttons {
        align-items: stretch;
    }

    .table-actions .btn,
    .admin-actions .btn,
    .admin-user-card-actions .btn,
    .market-instrument-actions .btn,
    .notifications-row-actions .btn,
    .record-action-buttons .btn,
    .record-action-buttons a {
        flex: 1 1 130px;
        width: auto;
    }

    .data-table th,
    .data-table td {
        padding: 13px 14px;
        font-size: 13px;
    }

    .data-table td .btn {
        min-height: 38px;
        padding: 8px 11px;
    }

    .record-action-modal {
        padding: 10px;
    }

    .record-action-dialog {
        width: 100%;
        max-height: calc(100dvh - 20px);
        padding: 22px 17px;
        border-radius: 16px;
    }

    .record-action-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .record-action-buttons > * {
        width: 100% !important;
    }

    .empty-state,
    .empty-state-card {
        padding: 36px 18px;
    }

    .chart-container,
    .chart-container-small {
        height: 260px;
    }

    .navbar-user-menu {
        right: -4px;
    }
}

@media (max-width: 380px) {
    .page-content {
        padding: 12px;
    }

    .navbar {
        padding-left: 8px;
        padding-right: 8px;
    }

    .menu-btn {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .navbar-user-avatar {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .btn {
        padding-left: 13px;
        padding-right: 13px;
    }
}

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



/* =========================================================
   STAGE 23B — SIDEBAR, TOP NAVIGATION & DARK CARD CONSISTENCY
   Keep this section at the very bottom of style.css
========================================================= */

:root {
    --app-header-height: 64px;
    --mobile-sidebar-width: min(286px, 86vw);
}

/* ---------------------------------------------------------
   1. Dashboard dark surfaces
   Make the hero, KPI cards and lower panels use one surface.
--------------------------------------------------------- */

html[data-theme="dark"] {
    --dashboard-unified-surface: #0d213b;
    --dashboard-unified-border: #203a5b;
    --dashboard-inner-surface: #101f34;
}

html[data-theme="dark"] .exact-top-summary,
html[data-theme="dark"] .exact-overview-card,
html[data-theme="dark"] .exact-kpi-card,
html[data-theme="dark"] .exact-panel,
html[data-theme="dark"] .exact-performance-panel,
html[data-theme="dark"] .exact-allocation-panel,
html[data-theme="dark"] .exact-recent-panel,
html[data-theme="dark"] .exact-goals-panel,
html[data-theme="dark"] .exact-updates-panel {
    background: var(--dashboard-unified-surface) !important;
    background-image: none !important;
    border: 1px solid var(--dashboard-unified-border) !important;
    box-shadow: var(--shadow-small) !important;
}

/* Remove the lighter blue section inside the main portfolio box. */
html[data-theme="dark"] .exact-overview-copy,
html[data-theme="dark"] .exact-overview-chart-area,
html[data-theme="dark"] .exact-hero-chart,
html[data-theme="dark"] .exact-performance-chart,
html[data-theme="dark"] .exact-allocation-content {
    background: transparent !important;
}

/* Keep only small nested records slightly darker. */
html[data-theme="dark"] .exact-list-item,
html[data-theme="dark"] .exact-update-item,
html[data-theme="dark"] .exact-goal-card,
html[data-theme="dark"] .exact-goal-empty,
html[data-theme="dark"] .exact-create-goal,
html[data-theme="dark"] .exact-empty {
    background: var(--dashboard-inner-surface) !important;
    border-color: var(--dashboard-unified-border) !important;
}

/* Apply the same correction to other newer dashboard-style pages. */
html[data-theme="dark"] .dashboard-hero-card,
html[data-theme="dark"] .dashboard-summary-card,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .activity-history-card,
html[data-theme="dark"] .notifications-panel,
html[data-theme="dark"] .help-support-card,
html[data-theme="dark"] .admin-upgrade-panel,
html[data-theme="dark"] .admin-users-list-card,
html[data-theme="dark"] .market-sync-card,
html[data-theme="dark"] .market-provider-card,
html[data-theme="dark"] .market-instrument-list-card,
html[data-theme="dark"] .market-price-list-card,
html[data-theme="dark"] .market-log-card {
    background-image: none !important;
}

/* ---------------------------------------------------------
   2. Top navigation
--------------------------------------------------------- */

.navbar {
    min-height: var(--app-header-height);
    height: var(--app-header-height);
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 24px;
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--border);
}

.navbar-left,
.navbar-user {
    display: flex;
    align-items: center;
    min-width: 0;
}

.navbar-left {
    gap: 14px;
}

.navbar-user {
    justify-content: flex-end;
    gap: 10px;
}

.navbar-app-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-btn,
.navbar-theme-button,
.navbar-notification-button,
.navbar-user-toggle {
    flex: 0 0 auto;
}

.navbar-notification-button,
.navbar-theme-button,
.menu-btn {
    width: 40px;
    height: 40px;
    min-height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
}

.navbar-user-toggle {
    min-width: 0;
    max-width: 250px;
}

.navbar-user-details {
    min-width: 0;
}

.navbar-user-details strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-user-menu,
.notification-dropdown {
    position: fixed;
    top: calc(var(--app-header-height) + 8px);
    right: 16px;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - var(--app-header-height) - 24px);
    overflow-y: auto;
    z-index: 1200;
}

/* ---------------------------------------------------------
   3. Sidebar desktop behavior
--------------------------------------------------------- */

.sidebar {
    z-index: 1000;
}

.sidebar-main {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.sidebar-menu {
    min-width: 0;
}

.sidebar-link,
.sidebar-group-toggle,
.sidebar-submenu a,
.sidebar-logout {
    min-height: 43px;
}

.sidebar-link,
.sidebar-group-left,
.sidebar-group-toggle {
    min-width: 0;
}

.sidebar-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-group-toggle {
    width: 100%;
}

/* The overlay is hidden on desktop. */
.sidebar-overlay {
    display: none;
}

/* ---------------------------------------------------------
   4. Tablet and mobile navigation
--------------------------------------------------------- */

@media (max-width: 850px) {
    .navbar {
        width: 100%;
        left: 0;
        padding: 0 16px;
    }

    .navbar-app-name {
        max-width: min(46vw, 260px);
    }

    .navbar-user-details,
    .navbar-user-separator {
        display: none;
    }

    .navbar-user-toggle {
        max-width: none;
        padding-left: 2px;
        padding-right: 2px;
    }

    .sidebar {
        width: var(--mobile-sidebar-width) !important;
        max-width: var(--mobile-sidebar-width);
        height: 100dvh;
        position: fixed;
        inset: 0 auto 0 0;
        transform: translateX(-105%);
        transition: transform .26s ease;
        box-shadow: 20px 0 45px rgba(0, 0, 0, .28);
        visibility: hidden;
    }

    .sidebar.open,
    body.sidebar-open .sidebar {
        transform: translateX(0);
        visibility: visible;
    }

    .sidebar .sidebar-text {
        display: inline;
        opacity: 1;
        visibility: visible;
    }

    .sidebar-brand {
        min-height: var(--app-header-height);
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 950;
        background: rgba(2, 8, 23, .62);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity .24s ease,
            visibility .24s ease;
        backdrop-filter: blur(2px);
    }

    .sidebar-overlay.active,
    body.sidebar-open .sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    .main-content,
    .main-content.sidebar-collapsed {
        width: 100%;
        margin-left: 0 !important;
    }
}

@media (max-width: 600px) {
    :root {
        --app-header-height: 60px;
    }

    .navbar {
        padding: 0 11px;
        gap: 8px;
    }

    .navbar-left,
    .navbar-user {
        gap: 7px;
    }

    .navbar-app-name {
        max-width: 42vw;
        font-size: 15px;
    }

    .menu-btn,
    .navbar-theme-button,
    .navbar-notification-button {
        width: 38px;
        height: 38px;
        min-height: 38px;
    }

    .navbar-user-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .navbar-chevron-icon {
        display: none;
    }

    .navbar-user-menu,
    .notification-dropdown {
        top: calc(var(--app-header-height) + 6px);
        right: 8px;
        width: min(340px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
    }

    .notification-dropdown {
        left: 8px;
        right: 8px;
        width: auto;
    }

    .sidebar-link,
    .sidebar-group-toggle,
    .sidebar-submenu a,
    .sidebar-logout {
        min-height: 46px;
    }
}

@media (max-width: 390px) {
    .navbar-app-name {
        max-width: 34vw;
        font-size: 14px;
    }

    .navbar-theme-button {
        display: none;
    }

    .navbar-user-menu,
    .notification-dropdown {
        right: 6px;
        left: 6px;
        width: auto;
        max-width: none;
    }
}



/* =========================================================
   STAGE 23B FIX — MOBILE SIDEBAR CLASS MATCH
   This section must remain at the very bottom of style.css.
========================================================= */

@media (max-width: 850px) {

    /*
     * base.html uses:
     *   sidebar.classList.add("active")
     *   body.classList.add("sidebar-mobile-open")
     *
     * These selectors must therefore use those exact names.
     */

    .sidebar,
    .sidebar.collapsed {
        width: min(286px, 86vw) !important;
        max-width: min(286px, 86vw) !important;
        height: 100dvh !important;

        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;

        z-index: 1100 !important;

        display: flex !important;
        flex-direction: column !important;

        padding: 0 !important;

        background: #071426 !important;
        background-image: none !important;
        color: #dbe4f0 !important;

        border-right: 1px solid rgba(148, 163, 184, .18) !important;
        box-shadow: 18px 0 42px rgba(0, 0, 0, .34) !important;

        overflow: hidden !important;

        transform: translateX(-105%) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;

        transition:
            transform .26s ease,
            opacity .2s ease,
            visibility .2s ease !important;
    }

    .sidebar.active,
    body.sidebar-mobile-open .sidebar {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    html[data-theme="light"] .sidebar,
    html[data-theme="light"] .sidebar.collapsed {
        background: #ffffff !important;
        background-image: none !important;
        color: #334155 !important;
        border-right-color: #dbe3ef !important;
        box-shadow: 18px 0 42px rgba(15, 23, 42, .20) !important;
    }

    .sidebar-main {
        width: 100% !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        padding: 14px 10px 16px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    .sidebar-footer {
        width: 100% !important;
        flex: 0 0 auto !important;
        padding: 12px 10px 16px !important;
        background: inherit !important;
        border-top: 1px solid rgba(148, 163, 184, .14) !important;
    }

    html[data-theme="light"] .sidebar-footer {
        border-top-color: #e2e8f0 !important;
    }

    .sidebar-brand {
        width: 100% !important;
        min-height: 58px !important;
        margin: 0 0 10px !important;
        padding: 6px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .sidebar-logo-image {
        width: auto !important;
        max-width: 96px !important;
        max-height: 48px !important;
        object-fit: contain !important;
    }

    .sidebar-menu {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
    }

    .sidebar .sidebar-text,
    .sidebar.collapsed .sidebar-text,
    .sidebar.collapsed .sidebar-chevron {
        display: inline !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .sidebar.collapsed .sidebar-brand,
    .sidebar.collapsed .sidebar-link,
    .sidebar.collapsed .sidebar-group-toggle,
    .sidebar.collapsed .sidebar-group-left,
    .sidebar.collapsed .sidebar-logout {
        justify-content: initial !important;
    }

    .sidebar.collapsed .sidebar-submenu {
        display: block;
    }

    .sidebar-link,
    .sidebar-group-toggle,
    .sidebar-submenu a,
    .sidebar-logout {
        width: 100% !important;
        min-height: 44px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .sidebar-overlay {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 1050 !important;

        background: rgba(2, 8, 23, .68) !important;
        backdrop-filter: blur(2px);

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transition:
            opacity .24s ease,
            visibility .24s ease !important;
    }

    .sidebar-overlay.active,
    body.sidebar-mobile-open .sidebar-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.sidebar-mobile-open {
        overflow: hidden !important;
    }

    .main-content,
    .main-content.sidebar-collapsed {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /*
     * Keep the navbar above the page, but below the opened
     * mobile sidebar so the menu never appears underneath it.
     */
    .navbar {
        z-index: 1000 !important;
    }
}

@media (max-width: 600px) {
    .sidebar,
    .sidebar.collapsed {
        width: min(280px, 88vw) !important;
        max-width: min(280px, 88vw) !important;
    }
}



/* =========================================================
   STAGE 23B FIX 2 — NAVBAR OVERLAP WHILE SCROLLING
   Keep this at the very bottom of style.css.
========================================================= */

/*
 * Some older rules set the navbar to fixed positioning.
 * Force it back into the normal document flow while still
 * allowing it to remain visible at the top during scrolling.
 */
.navbar {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    margin: 0 !important;

    z-index: 1000 !important;
}

/*
 * Prevent page sections from visually painting above or
 * through the sticky navigation.
 */
.page-content {
    position: relative;
    z-index: 1;
}

.page-heading-bar {
    position: relative;
    z-index: 2;
}

/*
 * The main page must scroll as one normal document.
 * Do not make it a second fixed-height scrolling container.
 */
.main-content {
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
}

/*
 * Keep the desktop sidebar fixed without forcing the navbar
 * or page content into fixed positioning.
 */
@media (min-width: 851px) {
    .main-content {
        margin-left: var(--sidebar-width, 228px) !important;
        width: calc(
            100% - var(--sidebar-width, 228px)
        ) !important;
    }

    .main-content.sidebar-collapsed {
        margin-left: var(--sidebar-collapsed-width, 76px) !important;
        width: calc(
            100% - var(--sidebar-collapsed-width, 76px)
        ) !important;
    }
}

/*
 * On tablets and phones the content always uses the full
 * viewport width and the sidebar floats above it.
 */
@media (max-width: 850px) {
    .main-content,
    .main-content.sidebar-collapsed {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .navbar {
        left: auto !important;
        right: auto !important;
    }
}

/* =========================================================
   FIX — SOLID NAVBAR WHILE SCROLLING
========================================================= */

.navbar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;

    width: 100% !important;
    min-height: 64px !important;
    height: 64px !important;

    margin: 0 !important;
    padding: 0 24px !important;

    z-index: 5000 !important;
    isolation: isolate !important;

    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border-bottom: 1px solid #dbe3ef !important;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.1) !important;
}


/* Dark-mode navbar */

html[data-theme="dark"] .navbar {
    background: #071426 !important;
    background-color: #071426 !important;
    background-image: none !important;

    border-bottom-color: #20344f !important;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.35) !important;
}


/*
 * A second solid background layer prevents charts
 * and other dashboard sections from showing through.
 */

.navbar::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background: #ffffff !important;

    pointer-events: none;
}


html[data-theme="dark"] .navbar::before {
    background: #071426 !important;
}


/* Keep navbar items above its background */

.navbar-left,
.navbar-user,
.navbar-app-name,
.menu-btn,
.theme-toggle,
.notification-area,
.notification-button,
.navbar-user-avatar,
.navbar-user-details,
.navbar-user-toggle {
    position: relative !important;
    z-index: 2 !important;
}


/* Dropdowns remain above navbar */

.notification-dropdown,
.navbar-user-menu {
    z-index: 5100 !important;
}


/* Stop charts and cards from appearing above navbar */

.page-content,
.exact-dashboard,
.exact-dashboard-grid,
.exact-overview-card,
.exact-panel,
.exact-hero-chart,
.exact-performance-chart,
.exact-allocation-chart,
.chart-container,
canvas {
    z-index: auto !important;
}


/* Tablet and mobile */

@media (max-width: 850px) {

    .navbar {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

}


@media (max-width: 600px) {

    .navbar {
        min-height: 60px !important;
        height: 60px !important;

        padding-left: 11px !important;
        padding-right: 11px !important;
    }

}

/* =========================================================
   DASHBOARD KPI CARD ICON ALIGNMENT IMPROVEMENT
========================================================= */

.exact-kpi-grid {
    align-items: stretch;
}

.exact-kpi-card {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 14px !important;

    min-height: 142px;
    padding: 15px !important;
}

.exact-kpi-card > span:first-child {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 12px !important;

    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;

    overflow: hidden !important;
}

.exact-kpi-card > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.exact-kpi-card small {
    display: block;
    min-height: 36px;

    margin: 0 0 6px !important;

    font-size: 13px !important;
    line-height: 1.35 !important;
}

.exact-kpi-card strong {
    display: block;

    margin: 0 0 7px !important;

    font-size: 17px !important;
    line-height: 1.3 !important;

    overflow-wrap: anywhere;
}

.exact-kpi-card p {
    margin: 0 !important;

    font-size: 12px !important;
    line-height: 1.45 !important;
}


/* Investment Cost icon */

.exact-kpi-card:nth-child(1) > span:first-child {
    color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.13) !important;
}


/* Current Market Value icon */

.exact-kpi-card:nth-child(2) > span:first-child {
    color: #2563eb !important;
    background: rgba(37, 99, 235, 0.14) !important;
}


/* Contribution Balance icon */

.exact-kpi-card:nth-child(3) > span:first-child {
    color: #16c784 !important;
    background: rgba(22, 199, 132, 0.13) !important;
}


/* Dividends Received icon */

.exact-kpi-card:nth-child(4) > span:first-child {
    color: #22c55e !important;
    background: rgba(34, 197, 94, 0.13) !important;
}


/* Realized Profit/Loss icon */

.exact-kpi-card:nth-child(5) > span:first-child {
    color: #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.14) !important;
}


/* Unrealized Profit/Loss icon */

.exact-kpi-card:nth-child(6) > span:first-child {
    color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.13) !important;
}


/* Make symbol characters sit perfectly inside their box */

.exact-kpi-card:nth-child(4) > span:first-child,
.exact-kpi-card:nth-child(5) > span:first-child,
.exact-kpi-card:nth-child(6) > span:first-child {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    transform: none !important;
}


/* Tablet */

@media (max-width: 1100px) {

    .exact-kpi-card {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .exact-kpi-card > span:first-child {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

}


/* Mobile */

@media (max-width: 600px) {

    .exact-kpi-card {
        min-height: auto;
        padding: 14px !important;
    }

    .exact-kpi-card small {
        min-height: auto;
    }

}

/* =========================================================
   STAGE 23C.1
   DASHBOARD — DESKTOP / TABLET RESPONSIVE IMPROVEMENT
========================================================= */


/* ---------------------------------------------------------
   Medium desktop / small laptop
--------------------------------------------------------- */

@media (max-width: 1300px) {

    .dashboard-final-page {
        padding-left: 24px;
        padding-right: 24px;
    }


    /* Summary cards: 3 per row */

    .dashboard-summary-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    /* Keep card content from overflowing */

    .dashboard-summary-card {
        min-width: 0;
    }

    .dashboard-summary-card > div {
        min-width: 0;
    }

    .dashboard-summary-card strong {
        overflow-wrap: anywhere;
    }


    /* Quick actions */

    .dashboard-quick-action-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* ---------------------------------------------------------
   Tablet / smaller laptop
--------------------------------------------------------- */

@media (max-width: 1050px) {

    .dashboard-final-page {
        padding-left: 22px;
        padding-right: 22px;
    }


    /* Dashboard heading */

    .dashboard-final-heading {
        gap: 18px;
    }


    /* Main hero becomes vertical */

    .dashboard-hero-card {
        grid-template-columns: 1fr;
    }

    .dashboard-hero-copy {
        border-right: 0;
        border-bottom:
            1px solid var(--border);
    }


    /* Summary cards */

    .dashboard-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* Main dashboard panels */

    .dashboard-performance-panel,
    .dashboard-allocation-panel,
    .dashboard-holdings-panel,
    .dashboard-goals-panel,
    .dashboard-activity-panel,
    .dashboard-updates-panel {
        grid-column: span 12;
    }


    /* Alerts */

    .dashboard-alert-strip {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dashboard-alert-strip > a {
        min-width: 0;
    }


    .dashboard-alert-strip > a:nth-child(2) {
        border-right: 0;
    }


    .dashboard-alert-strip > a:nth-child(-n+2) {
        border-bottom:
            1px solid var(--border);
    }


    /* Allocation */

    .dashboard-allocation-content {
        gap: 20px;
    }


    /* Charts */

    .dashboard-performance-chart {
        min-height: 260px;
    }


    /* Quick actions */

    .dashboard-quick-action-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ---------------------------------------------------------
   Narrow tablet
--------------------------------------------------------- */

@media (max-width: 850px) {

    .dashboard-final-page {
        width: 100%;
        max-width: 100%;
        padding: 22px 18px 32px;
    }


    /* Heading */

    .dashboard-final-heading {
        flex-direction: column;
        align-items: stretch;
    }


    /* Hero */

    .dashboard-hero-card {
        width: 100%;
        min-width: 0;
    }

    .dashboard-hero-copy,
    .dashboard-hero-chart-area {
        min-width: 0;
    }


    /* Summary cards */

    .dashboard-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 14px;
    }


    .dashboard-summary-card {
        min-width: 0;
    }


    /* Prevent large money values breaking layout */

    .dashboard-summary-card strong {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }


    /* Panels */

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }


    .dashboard-performance-panel,
    .dashboard-allocation-panel,
    .dashboard-holdings-panel,
    .dashboard-goals-panel,
    .dashboard-activity-panel,
    .dashboard-updates-panel {
        grid-column: auto;
        min-width: 0;
    }


    /* Panel headings */

    .dashboard-panel-heading {
        gap: 12px;
    }


    /* Allocation */

    .dashboard-allocation-content {
        grid-template-columns: 1fr;
    }


    .dashboard-allocation-chart {
        width: 100%;
        max-width: 320px;
        height: 220px;
        margin-left: auto;
        margin-right: auto;
    }


    /* Lists */

    .dashboard-holding-row,
    .dashboard-activity-row,
    .dashboard-update-row {
        min-width: 0;
    }


    /* Quick actions */

    .dashboard-quick-action-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* =========================================================
   STAGE 23C.2
   DASHBOARD — MOBILE RESPONSIVE IMPROVEMENT
========================================================= */

@media (max-width: 680px) {

    /* =====================================================
       PAGE
    ===================================================== */

    .dashboard-final-page {
        width: 100%;
        max-width: 100%;
        padding: 18px 14px 28px;
        overflow-x: hidden;
    }


    /* =====================================================
       PAGE HEADING
    ===================================================== */

    .dashboard-final-heading {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 18px;
    }

    .dashboard-final-heading h1 {
        font-size: 25px;
        line-height: 1.2;
    }

    .dashboard-final-heading p {
        font-size: 14px;
        line-height: 1.55;
    }


    /* =====================================================
       PORTFOLIO HERO
    ===================================================== */

    .dashboard-hero-card {
        grid-template-columns: 1fr;
        border-radius: 16px;
        overflow: hidden;
    }

    .dashboard-hero-copy {
        min-width: 0;
        padding: 20px 18px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .dashboard-hero-copy h2 {
        font-size: 15px;
    }

    .dashboard-hero-copy strong {
        max-width: 100%;
        font-size: clamp(26px, 8vw, 36px);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .dashboard-hero-copy p {
        font-size: 13px;
        line-height: 1.5;
    }

    .dashboard-hero-chart-area {
        min-width: 0;
        padding: 18px 14px;
    }


    /* =====================================================
       SUMMARY CARDS
    ===================================================== */

    .dashboard-summary-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dashboard-summary-card {
        width: 100%;
        min-width: 0;
        padding: 16px;
        gap: 13px;
        border-radius: 14px;
    }

    .dashboard-summary-card > div {
        min-width: 0;
        flex: 1;
    }

    .dashboard-summary-card small {
        font-size: 12px;
    }

    .dashboard-summary-card strong {
        display: block;
        max-width: 100%;
        margin-top: 4px;
        font-size: 20px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .dashboard-summary-card p {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.4;
    }


    /* =====================================================
       SUMMARY ICONS
    ===================================================== */

    .dashboard-summary-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;

        display: grid;
        place-items: center;

        padding: 0;
        margin: 0;

        font-size: 17px;
        font-weight: 800;
        line-height: 1;

        text-align: center;
        vertical-align: middle;
    }


    /* =====================================================
       ALERT STRIP
    ===================================================== */

    .dashboard-alert-strip {
        grid-template-columns: 1fr;
        border-radius: 14px;
        overflow: hidden;
    }

    .dashboard-alert-strip > a {
        min-width: 0;
        padding: 15px 16px;

        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .dashboard-alert-strip > a:last-child {
        border-bottom: 0;
    }


    /* =====================================================
       MAIN DASHBOARD PANELS
    ===================================================== */

    .dashboard-main-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .dashboard-panel {
        width: 100%;
        min-width: 0;
        padding: 17px 15px;
        border-radius: 15px;
    }

    .dashboard-performance-panel,
    .dashboard-allocation-panel,
    .dashboard-holdings-panel,
    .dashboard-goals-panel,
    .dashboard-activity-panel,
    .dashboard-updates-panel {
        grid-column: auto;
        min-width: 0;
    }


    /* =====================================================
       PANEL HEADINGS
    ===================================================== */

    .dashboard-panel-heading {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 16px;
    }

    .dashboard-panel-heading h2 {
        font-size: 17px;
        line-height: 1.3;
    }

    .dashboard-panel-heading p {
        margin-top: 3px;
        font-size: 12px;
        line-height: 1.45;
    }


    /* =====================================================
       PERFORMANCE CHART
    ===================================================== */

    .dashboard-performance-chart {
        width: 100%;
        min-width: 0;
        min-height: 220px;
        height: 220px;
    }

    .dashboard-performance-chart canvas {
        max-width: 100%;
    }


    /* =====================================================
       ALLOCATION
    ===================================================== */

    .dashboard-allocation-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .dashboard-allocation-chart {
        width: 100%;
        max-width: 260px;
        height: 210px;
        margin: 0 auto;
    }

    .dashboard-allocation-list {
        min-width: 0;
    }


    /* =====================================================
       HOLDINGS / ACTIVITY / UPDATES
    ===================================================== */

    .dashboard-holding-row,
    .dashboard-activity-row,
    .dashboard-update-row {
        min-width: 0;
    }

    .dashboard-holding-row strong,
    .dashboard-activity-row strong,
    .dashboard-update-row strong {
        overflow-wrap: anywhere;
    }


    /* =====================================================
       GOALS
    ===================================================== */

    .dashboard-goal-row {
        min-width: 0;
    }

    .dashboard-goal-row strong {
        overflow-wrap: anywhere;
    }


    /* =====================================================
       QUICK ACTIONS
    ===================================================== */

    .dashboard-quick-action-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dashboard-quick-action-grid a {
        min-width: 0;
        min-height: 76px;
        padding: 13px 10px;
        border-radius: 13px;

        text-align: center;
    }


    /* =====================================================
       BUTTONS / LINKS
    ===================================================== */

    .dashboard-final-page .btn {
        min-height: 42px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .dashboard-final-page {
        padding:
            16px 11px
            24px;
    }


    .dashboard-final-heading h1 {
        font-size: 23px;
    }


    .dashboard-hero-copy {
        padding: 18px 15px;
    }

    .dashboard-hero-chart-area {
        padding: 16px 10px;
    }


    .dashboard-summary-card {
        padding: 15px 14px;
    }


    .dashboard-summary-card strong {
        font-size: 19px;
    }


    .dashboard-panel {
        padding: 15px 13px;
    }


    .dashboard-performance-chart {
        min-height: 200px;
        height: 200px;
    }


    /* Quick actions remain two columns,
       but become more compact */

    .dashboard-quick-action-grid {
        gap: 8px;
    }

    .dashboard-quick-action-grid a {
        min-height: 70px;
        padding: 11px 8px;
        font-size: 12px;
    }

}

/* =========================================================
   STAGE 23C.3
   DASHBOARD — MOBILE CHART FINE TUNING
========================================================= */

@media (max-width: 680px) {

    .dashboard-chart-toolbar {
        align-items: flex-start;
        gap: 10px;
    }

    .dashboard-chart-toolbar select {
        max-width: 125px;
        min-height: 38px;
        font-size: 12px;
    }


    .dashboard-performance-tabs {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .dashboard-performance-tabs::-webkit-scrollbar {
        display: none;
    }

    .dashboard-performance-tabs button {
        flex: 0 0 auto;
        white-space: nowrap;
    }


    .dashboard-performance-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
    }


    .dashboard-allocation-legend {
        width: 100%;
        min-width: 0;
    }

    .dashboard-allocation-legend > div {
        min-width: 0;
        gap: 10px;
    }

    .dashboard-allocation-legend > div > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

}


@media (max-width: 420px) {

    .dashboard-chart-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-chart-toolbar select {
        width: 100%;
        max-width: none;
    }

}

/* =========================================================
   STAGE 23C.4
   MOBILE SIDEBAR HEIGHT AND SCROLL FIX
========================================================= */

@media (max-width: 850px) {

    .sidebar {
        display: flex !important;
        flex-direction: column !important;

        width: min(86vw, 300px) !important;
        max-width: 300px !important;

        height: 100dvh !important;
        max-height: 100dvh !important;

        overflow: hidden !important;
    }


    /* Main sidebar area takes the available height */

    .sidebar-main {
        display: flex !important;
        flex-direction: column !important;

        flex: 1 1 auto !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }


    /* Keep logo visible */

    .sidebar-brand {
        flex: 0 0 auto !important;
    }


    /* Only the navigation links should scroll */

    .sidebar-menu {
        flex: 1 1 auto !important;
        min-height: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        padding-bottom: 18px !important;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: thin;
    }


    /* Logout remains visible at the bottom */

    .sidebar-footer {
        position: relative !important;
        inset: auto !important;

        flex: 0 0 auto !important;

        width: 100% !important;
        padding: 10px !important;

        background: inherit !important;
        border-top: 1px solid var(--border) !important;

        z-index: 5 !important;
    }


    .sidebar-logout {
        width: 100% !important;
        min-height: 44px !important;
    }

}


/* Smaller phones */

@media (max-width: 480px) {

    .sidebar {
        width: min(88vw, 290px) !important;
    }

    .sidebar-menu {
        padding-bottom: 14px !important;
    }

}

/* =========================================================
   STAGE 23C.4 — CORRECT MOBILE CLEANUP
========================================================= */


/* Hide the autocomplete container when it has no results */

#suggestions:empty {
    display: none !important;
}


/* Show it again when JavaScript adds suggestions */

#suggestions:not(:empty) {
    display: block;
}


/* Mobile sidebar logo */

@media (max-width: 850px) {

    /*
     * Keep only the navigation list scrollable.
     * This stops the WB logo from being pushed or clipped.
     */

    .sidebar-main {
        display: flex !important;
        flex-direction: column !important;

        flex: 1 1 auto !important;
        min-height: 0 !important;

        padding: 0 10px !important;
        overflow: hidden !important;
    }


    .sidebar-brand {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        flex: 0 0 82px !important;

        width: 100% !important;
        height: 82px !important;
        min-height: 82px !important;

        margin: 0 !important;
        padding: 12px 10px !important;

        overflow: visible !important;
    }


    .sidebar-logo-image {
        display: block !important;

        width: 92px !important;
        height: auto !important;
        max-width: 92px !important;
        max-height: 58px !important;

        margin: 0 !important;

        object-fit: contain !important;
        object-position: left center !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    .sidebar-menu {
        flex: 1 1 auto !important;
        min-height: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        padding-bottom: 16px !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }


    /*
     * Remove the separator above Logout.
     */

    .sidebar-footer {
        border-top: 0 !important;
    }

}

/* =========================================================
   MOBILE SIDEBAR — SHOW LOGO ABOVE NAVBAR
========================================================= */

@media (max-width: 850px) {

    .sidebar,
    .sidebar.collapsed {
        position: fixed !important;
        inset: 0 auto 0 0 !important;

        height: 100dvh !important;

        z-index: 1300 !important;
    }

    .sidebar-overlay {
        z-index: 1200 !important;
    }

    .navbar {
        z-index: 1000 !important;
    }

    .sidebar-brand {
        position: relative !important;
        z-index: 2 !important;

        flex: 0 0 82px !important;
        height: 82px !important;
        min-height: 82px !important;
    }

    .sidebar-logo-image {
        position: relative !important;
        z-index: 3 !important;

        display: block !important;
        width: 92px !important;
        height: auto !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

}

/* =========================================================
   STAGE 23E.1
   GLOBAL BUTTON AND FORM CONSISTENCY
========================================================= */

/* Shared control sizing */

.btn,
button.btn,
input,
select,
textarea {
    border-radius: 9px;
}

.btn,
button.btn {
    min-height: 42px;
    line-height: 1.2;
}


/* Clear disabled state */

.btn:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed !important;
    opacity: 0.58;
}

input[readonly],
textarea[readonly] {
    cursor: default;
    opacity: 0.86;
}


/* Consistent placeholders */

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.82;
}


/* Keep controls inside their containers */

input,
select,
textarea,
.btn {
    max-width: 100%;
}


/* Prevent long button text from overflowing */

.btn {
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}


/* Compact action buttons must remain compact */

.btn-small,
.table-actions .btn,
.admin-actions .btn,
.mobile-investment-actions .btn,
.watchlist-mobile-actions .btn,
.record-action-buttons .btn {
    width: auto;
}


/* Dark-mode readonly and disabled controls */

html[data-theme="dark"] input[readonly],
html[data-theme="dark"] textarea[readonly],
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled {
    background: #0d1728;
    color: #94a3b8;
    border-color: #263449;
}


/* Mobile button behaviour */

@media (max-width: 600px) {

    /*
     * Normal form-submit and heading buttons may use full width.
     * Small record actions remain compact.
     */

    .main-form > .btn,
    .investment-submit-area .btn,
    .watchlist-submit-button,
    .withdrawal-submit-btn,
    .income-filter-actions .btn,
    .reports-heading-actions .btn {
        width: 100%;
    }

    .btn-small,
    .table-actions .btn,
    .admin-actions .btn,
    .mobile-investment-actions .btn,
    .watchlist-mobile-actions .btn {
        width: auto;
    }

    input,
    select,
    textarea {
        min-height: 44px;
        font-size: 16px;
    }

    textarea {
        min-height: 110px;
    }

}

/* =========================================================
   STAGE 23E.2
   PROFILE CARD AND SPACING CONSISTENCY
========================================================= */

/* Keep all major Profile cards visually consistent */

.profile-main-card,
.profile-summary-card,
.profile-overview-card {
    border-radius: 16px;
    border: 1px solid var(--account-border);
    background: var(--account-card-bg);
    box-shadow: var(--account-shadow);
}


/* Shared card-heading spacing */

.profile-card-heading {
    min-height: 82px;
    padding: 20px 22px;
    gap: 16px;
}


/* Shared content spacing */

.profile-card-body {
    padding: 24px;
}

.profile-detail-list {
    padding: 6px 22px 16px;
}

.profile-detail-item {
    padding: 16px 0;
}


/* Reduce unnecessary empty space around identity section */

.profile-identity {
    margin-bottom: 24px;
    padding-bottom: 24px;
    gap: 18px;
}


/* Make the four overview cards match the other cards */

.profile-overview-card {
    margin-top: 20px;
}

.profile-overview-item {
    min-height: 150px;
    padding: 22px 18px;
}

.profile-overview-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 13px;
    border-radius: 12px;
}


/* Keep text spacing consistent */

.profile-overview-item p {
    margin-top: 6px;
}

.profile-card-heading p {
    margin-top: 4px;
}


/* Mobile spacing */

@media (max-width: 650px) {

    .profile-page-header {
        margin-bottom: 22px;
    }

    .profile-card-heading {
        min-height: auto;
        padding: 18px;
        gap: 12px;
    }

    .profile-card-body {
        padding: 20px 18px;
    }

    .profile-identity {
        margin-bottom: 20px;
        padding-bottom: 20px;
        gap: 14px;
    }

    .profile-large-avatar {
        width: 92px;
        height: 92px;
        flex-basis: 92px;
    }

    .profile-detail-list {
        padding: 4px 16px 12px;
    }

    .profile-detail-item {
        padding: 14px 0;
    }

    .profile-overview-card {
        margin-top: 16px;
    }

    .profile-overview-item {
        min-height: auto;
        padding: 18px 16px;
        text-align: left;

        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 12px;
        align-items: center;
    }

    .profile-overview-icon {
        width: 40px;
        height: 40px;
        margin: 0;
        grid-row: 1 / span 2;
    }

    .profile-overview-item h4,
    .profile-overview-item p {
        margin: 0;
    }

    .profile-overview-item p {
        margin-top: 3px;
    }

}

/* =========================================================
   STAGE 23E.3
   DASHBOARD MOBILE TYPOGRAPHY IMPROVEMENT
========================================================= */

@media (max-width: 700px) {

    /* Dashboard panel headings */

    .exact-dashboard .exact-panel-head h2 {
        font-size: 18px;
        line-height: 1.25;
    }

    .exact-dashboard .exact-panel-head p {
        font-size: 12px;
        line-height: 1.5;
    }


    /* Performance period buttons */

    .exact-dashboard .exact-period-tabs {
        gap: 7px;
    }

    .exact-dashboard .exact-period-tabs button,
    .exact-dashboard .exact-period-tabs span {
        min-height: 32px;
        padding: 7px 10px;
        font-size: 12px;
        line-height: 1;
    }


    /* Chart supporting text */

    .exact-dashboard .exact-chart-note {
        font-size: 12px;
        line-height: 1.5;
    }


    /* Chart labels and canvas readability */

    .exact-dashboard .exact-performance-chart {
        height: 280px;
    }


    /* Holding-count summary below chart */

    .exact-dashboard .exact-performance-panel
    .exact-panel-footer,
    .exact-dashboard .exact-performance-panel
    .exact-chart-summary {
        font-size: 12px;
        line-height: 1.5;
    }

}

/* =========================================================
   STAGE 23E.4
   MOBILE USER DROPDOWN ARROW FIX
========================================================= */

.navbar-user-toggle {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;

    display: grid;
    place-items: center;

    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
}

.navbar-chevron-icon {
    display: block !important;
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.2s ease;
}

/* Rotate the arrow when the menu is open */

.navbar-user-toggle[aria-expanded="true"]
.navbar-chevron-icon {
    transform: rotate(180deg);
}


/* Light mode */

html[data-theme="light"] .navbar-user-toggle {
    color: #334155;
}

html[data-theme="light"] .navbar-user-toggle:hover {
    background: #f1f5f9;
    border-color: #dbe3ee;
}


/* Dark mode */

html[data-theme="dark"] .navbar-user-toggle {
    color: #cbd5e1;
}

html[data-theme="dark"] .navbar-user-toggle:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(148, 163, 184, 0.18);
}


/* Keep the arrow visible on mobile */

@media (max-width: 600px) {

    .navbar-chevron-icon {
        display: block !important;
        width: 16px;
        height: 16px;
    }

    .navbar-user-toggle {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }

}