:root {
    --ink: #111513;
    --muted: #5f6c66;
    --line: #dde8e1;
    --soft: #f4f8f5;
    --paper: #ffffff;
    --green: #49cc68;
    --green-dark: #16843a;
    --green-soft: #ddf9e5;
    --gold: #f3c95d;
    --blue: #304f8f;
    --shadow: 0 24px 70px rgba(20, 57, 36, .14);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
}

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

button {
    font: inherit;
}

.page-shell {
    overflow-x: hidden;
    padding-top: 96px;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(17, 21, 19, .08);
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(18px);
    transition: box-shadow .25s ease, background .25s ease;
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 34px rgba(17, 21, 19, .08);
}

.nav-inner,
.section-inner {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.nav-inner {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
}

.brand-logo {
    width: 150px;
    height: auto;
    display: block;
}

.brand-divider {
    width: 1px;
    height: 24px;
    background: #cad8d0;
}

.brand-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #05230f;
    background: var(--green);
    box-shadow: inset 0 -7px 14px rgba(0, 0, 0, .08);
}

.brand-mark svg {
    width: 21px;
    height: 21px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    color: #34423b;
    font-size: .94rem;
    font-weight: 650;
}

.nav-links a {
    position: relative;
}

.nav-links a.is-active {
    color: var(--green-dark);
}

.nav-links a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 2px;
    border-radius: 999px;
    background: var(--green);
}

.mobile-menu-action {
    display: none;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-toggle {
    width: 44px;
    height: 44px;
    display: none;
    place-items: center;
    border: 1px solid #cad8d0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.menu-toggle span {
    width: 18px;
    height: 2px;
    display: block;
    margin: 2px 0;
    border-radius: 999px;
    background: var(--ink);
    transition: transform .2s ease, opacity .2s ease;
}

.menu-toggle.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0 20px;
    font-weight: 800;
    font-size: .95rem;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    color: #07180d;
    background: var(--green);
    box-shadow: 0 12px 30px rgba(73, 204, 104, .28);
}

.btn-secondary {
    color: var(--ink);
    background: #fff;
    border-color: #cad8d0;
}

.hero {
    position: relative;
    padding: 72px 0 64px;
    background:
        radial-gradient(circle at 82% 16%, rgba(73, 204, 104, .16), transparent 31%),
        linear-gradient(180deg, #f5fbf7 0%, #ffffff 78%);
}

.page-hero {
    padding: 86px 0 72px;
    background:
        radial-gradient(circle at 88% 18%, rgba(73, 204, 104, .15), transparent 30%),
        linear-gradient(180deg, #f5fbf7 0%, #ffffff 82%);
}

.page-security .page-hero {
    color: #fff;
    background:
        radial-gradient(circle at 80% 20%, rgba(73, 204, 104, .18), transparent 34%),
        linear-gradient(180deg, #101412 0%, #151b18 100%);
}

.page-security .page-hero .hero-copy {
    color: #b9c5bf;
}

.page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 410px);
    gap: 44px;
    align-items: center;
}

.network-visual,
.portfolio-lab,
.security-terminal,
.onboarding-card {
    min-height: 430px;
    position: relative;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.network-visual {
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle, rgba(73, 204, 104, .12), transparent 58%),
        #fff;
}

.network-ring {
    width: 280px;
    aspect-ratio: 1;
    position: absolute;
    border: 1px dashed #9fd8ad;
    border-radius: 50%;
    animation: spinSlow 18s linear infinite;
}

.network-core {
    width: 104px;
    height: 104px;
    z-index: 2;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #07180d;
    background: var(--green);
    font-size: 1.7rem;
    font-weight: 900;
    box-shadow: 0 18px 40px rgba(73, 204, 104, .32);
}

.asset-bubble {
    position: absolute;
    z-index: 3;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .9);
    font-size: .86rem;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(31, 59, 42, .08);
    animation: drift 5s ease-in-out infinite;
}

.bubble-one { top: 64px; left: 76px; }
.bubble-two { top: 96px; right: 60px; animation-delay: .4s; }
.bubble-three { bottom: 126px; left: 52px; animation-delay: .8s; }
.bubble-four { right: 58px; bottom: 92px; animation-delay: 1.2s; }

.network-card {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(16px);
}

.network-card strong,
.lab-header strong,
.rebalance-alert strong {
    display: block;
    font-size: 1.25rem;
}

.network-card p,
.rebalance-alert span {
    margin: 6px 0 0;
    color: var(--muted);
}

.asset-motion {
    background: #fff;
}

.asset-rail {
    display: flex;
    gap: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}

.asset-rail span {
    flex: 1 0 140px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 14px 18px;
    text-align: center;
    background: var(--green-soft);
    font-weight: 900;
    animation: railFloat 4s ease-in-out infinite;
}

.asset-rail span:nth-child(2n) {
    background: #fff;
    animation-delay: .35s;
}

.portfolio-lab {
    padding: 28px;
    overflow: hidden;
}

.portfolio-lab::before {
    content: "";
    position: absolute;
    inset: auto -20% -32% -20%;
    height: 170px;
    background: var(--green-soft);
    transform: rotate(-5deg);
}

.lab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-bottom: 38px;
}

.lab-header span {
    color: var(--muted);
    font-weight: 850;
}

.lab-bars {
    height: 220px;
    display: flex;
    align-items: end;
    gap: 18px;
    position: relative;
    z-index: 2;
}

.lab-bars i {
    flex: 1;
    border-radius: 999px 999px 6px 6px;
    background: linear-gradient(180deg, var(--green), var(--green-dark));
    animation: barRise 3s ease-in-out infinite;
}

.lab-bars i:nth-child(2n) {
    animation-delay: .3s;
}

.rebalance-alert {
    position: relative;
    z-index: 2;
    margin-top: 26px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, .9);
}

.portfolio-board {
    background: var(--soft);
}

.portfolio-board-grid {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 44px;
    align-items: center;
}

.security-terminal {
    overflow: hidden;
    border-color: rgba(255, 255, 255, .14);
    padding: 28px;
    color: #fff;
    background: #090d14;
}

.terminal-top {
    display: flex;
    gap: 8px;
    margin-bottom: 38px;
}

.terminal-top span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--green);
}

.terminal-line {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: 18px 0;
}

.terminal-line em {
    color: var(--green);
    font-style: normal;
    font-weight: 900;
}

.terminal-scan {
    height: 2px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 80px;
    background: var(--green);
    box-shadow: 0 0 24px rgba(73, 204, 104, .85);
    animation: scanLine 3.2s ease-in-out infinite;
}

.deep-security {
    padding-top: 92px;
}

.onboarding-card {
    display: grid;
    align-content: center;
    gap: 18px;
    padding: 30px;
}

.form-line {
    height: 14px;
    width: 72%;
    border-radius: 999px;
    background: #dfe8e2;
}

.form-line.wide {
    width: 100%;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.choice-grid span {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 12px 8px;
    text-align: center;
    color: var(--muted);
    font-weight: 850;
}

.choice-grid .is-selected {
    color: #07180d;
    background: var(--green);
    border-color: var(--green);
}

.risk-slider {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe8e2;
}

.risk-slider i {
    display: block;
    width: 62%;
    height: 100%;
    border-radius: inherit;
    background: var(--green);
    animation: sliderGlow 3.4s ease-in-out infinite;
}

.onboarding-card button {
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    color: #07180d;
    background: var(--green);
    font-weight: 900;
}

.signup-flow {
    background: linear-gradient(180deg, #fff 0%, var(--soft) 100%);
}

.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 8%, rgba(73, 204, 104, .16), transparent 30%),
        radial-gradient(circle at 90% 18%, rgba(48, 79, 143, .08), transparent 28%),
        #f6faf7;
}

.auth-body .page-shell {
    padding-top: 0;
}

.signup-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr);
    gap: 0;
}

.signup-hero-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 38px;
    overflow: hidden;
    margin: 18px 0 18px 18px;
    border: 1px solid #dce9e1;
    border-radius: 8px;
    padding: 34px;
    color: var(--ink);
    background:
        radial-gradient(circle at 16% 12%, rgba(73, 204, 104, .2), transparent 32%),
        linear-gradient(145deg, #ffffff 0%, #eff8f2 100%);
    box-shadow: 0 18px 54px rgba(31, 59, 42, .08);
}

.signup-hero-panel::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -160px;
    bottom: -120px;
    border: 1px dashed rgba(73, 204, 104, .38);
    border-radius: 50%;
    animation: spinSlow 22s linear infinite;
}

.auth-brand {
    position: relative;
    z-index: 2;
    width: fit-content;
    border: 1px solid #dce9e1;
    border-radius: 999px;
    padding: 9px 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 10px 28px rgba(31, 59, 42, .08);
}

.auth-brand .brand-divider {
    background: #cad8d0;
}

.auth-brand .brand-logo {
    width: 150px;
}

.signup-copy {
    position: relative;
    z-index: 2;
    max-width: 560px;
}

.signup-copy .eyebrow {
    border-color: #cfe7d6;
    background: #fff;
    color: var(--green-dark);
}

.signup-copy h1 {
    max-width: 560px;
    margin-bottom: 18px;
    font-size: clamp(2.6rem, 5vw, 5.1rem);
}

.signup-copy p {
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.7;
}

.signup-benefits {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 12px;
    max-width: 560px;
}

.signup-benefits div {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border: 1px solid #dce9e1;
    border-radius: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, .78);
}

.signup-benefits strong {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #07180d;
    background: var(--green);
}

.signup-benefits span {
    color: #26322c;
    font-weight: 750;
    line-height: 1.45;
}

.auth-visual {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 12px;
    max-width: 520px;
}

.auth-visual-card,
.auth-visual-row {
    border: 1px solid #dce9e1;
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
}

.auth-visual-card span {
    color: var(--muted);
    font-weight: 800;
}

.auth-visual-card strong {
    display: block;
    margin: 8px 0 16px;
    font-size: 2rem;
}

.auth-visual-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.auth-visual-row span {
    border-radius: 999px;
    padding: 9px;
    text-align: center;
    color: #07180d;
    background: var(--green);
    font-size: .86rem;
    font-weight: 900;
}

.signup-form-panel {
    display: grid;
    place-items: center;
    padding: 38px;
    background:
        radial-gradient(circle at 86% 16%, rgba(73, 204, 104, .15), transparent 26%),
        #f7fbf8;
}

.signup-form-card {
    width: min(100%, 720px);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: clamp(24px, 4vw, 40px);
    background: #fff;
    box-shadow: var(--shadow);
}

.form-heading {
    margin-bottom: 28px;
}

.form-heading span {
    color: var(--green-dark);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.form-heading h2 {
    margin: 8px 0 10px;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
}

.form-heading p {
    max-width: 560px;
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.signup-form {
    display: grid;
    gap: 14px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.signup-form label {
    display: grid;
    gap: 8px;
}

.signup-form label > span {
    color: #314039;
    font-size: .88rem;
    font-weight: 850;
}

.signup-form input,
.signup-form select {
    width: 100%;
    min-height: 50px;
    border: 1px solid #cad8d0;
    border-radius: 8px;
    padding: 0 14px;
    color: var(--ink);
    background: #fff;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.signup-form input:focus,
.signup-form select:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(73, 204, 104, .16);
}

.signup-form .has-error input,
.signup-form .has-error select {
    border-color: #d94a4a;
    background: #fffafa;
}

.field-error {
    color: #b72d2d;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.4;
}

.form-alert {
    border: 1px solid #cfe7d6;
    border-radius: 8px;
    padding: 13px 15px;
    background: var(--green-soft);
}

.form-alert p {
    margin: 0;
    color: #244d32;
    font-size: .92rem;
    font-weight: 750;
    line-height: 1.5;
}

.form-alert-error {
    border-color: #f1c2c2;
    background: #fff0f0;
}

.form-alert-error p {
    color: #9e2424;
}

.form-alert-warning {
    border-color: #f1d28a;
    background: #fff8e6;
}

.form-alert-warning p {
    color: #7a4f00;
}

.form-alert-success {
    border-color: #cfe7d6;
    background: var(--green-soft);
}

.form-alert-info {
    border-color: #cfe7d6;
    background: #f2fbf5;
}

.message-stack {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.checkbox-line {
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.5;
}

.checkbox-line input {
    min-height: auto;
    margin-top: 3px;
    accent-color: var(--green);
}

.signup-submit {
    width: 100%;
    margin-top: 4px;
}

.auth-footnote {
    margin: 18px 0 0;
    color: var(--muted);
    text-align: center;
}

.auth-footnote a {
    color: var(--green-dark);
    font-weight: 900;
}

.form-helper-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -6px;
}

.form-helper-row a {
    color: var(--green-dark);
    font-size: .9rem;
    font-weight: 900;
}

.verification-resend-panel {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    border: 1px solid #cfe7d6;
    border-radius: 8px;
    padding: 16px;
    background: #f2fbf5;
}

.verification-resend-panel strong {
    color: #163822;
}

.verification-resend-panel p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.verification-resend-panel b {
    color: var(--ink);
}

.resend-meta {
    font-size: .88rem;
    font-weight: 800;
}

.resend-form .btn {
    width: 100%;
}

.resend-form .btn:disabled {
    cursor: not-allowed;
    opacity: .68;
    transform: none;
}

.checkbox-line a {
    color: var(--green-dark);
    font-weight: 900;
}

.simple-auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.simple-auth-card {
    width: min(100%, 620px);
}

.simple-auth-brand {
    margin-bottom: 28px;
}

.terms-content {
    display: grid;
    gap: 14px;
    color: var(--muted);
    line-height: 1.65;
}

.terms-content p {
    margin: 0;
}

.terms-page {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 26px 0 54px;
}

.dashboard-body {
    min-height: 100vh;
    background: #eef5f0;
    color: var(--ink);
}

.dashboard-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
}

.dashboard-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 24px;
    background: #ffffff;
    border-right: 1px solid #dce8e1;
}

.dashboard-brand img {
    width: 210px;
    max-width: 100%;
    height: auto;
}

.dashboard-nav {
    display: grid;
    gap: 7px;
}

.dashboard-nav a {
    padding: 12px 13px;
    border-radius: 8px;
    color: #58655f;
    font-weight: 850;
}

.dashboard-nav a:hover,
.dashboard-nav a.is-active {
    background: var(--green-soft);
    color: var(--green-dark);
}

.dashboard-support {
    margin-top: auto;
    padding: 16px;
    border-radius: 8px;
    background: #f6faf7;
    border: 1px solid #dce8e1;
}

.dashboard-support span,
.dashboard-topbar span,
.dashboard-hero-copy span,
.dashboard-metrics span,
.panel-heading span {
    color: var(--green-dark);
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-support strong {
    display: block;
    margin-top: 8px;
}

.dashboard-support p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.5;
}

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

.dashboard-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.dashboard-topbar h1 {
    margin: 6px 0 0;
    font-size: clamp(1.45rem, 2.4vw, 2.35rem);
    letter-spacing: 0;
}

.dashboard-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.dashboard-user span {
    color: var(--muted);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.dashboard-user strong {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--green);
    color: #07180d;
}

.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
    gap: 22px;
    min-height: 280px;
    padding: 26px;
    border-radius: 8px;
    background: #102117;
    color: #ffffff;
    overflow: hidden;
}

.dashboard-checklist {
    display: grid;
    gap: 12px;
    align-self: center;
    padding: 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
}

.dashboard-checklist div {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
}

.dashboard-checklist b {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
}

.dashboard-checklist span {
    color: #ecf7ef;
    font-size: .95rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
}

.dashboard-checklist .is-done b,
.dashboard-checklist .is-active b {
    border-color: var(--green);
    background: var(--green);
}

.dashboard-hero-copy h2 {
    margin: 8px 0 10px;
    color: #ffffff;
    font-size: clamp(2.1rem, 5vw, 4.2rem);
    letter-spacing: 0;
}

.dashboard-hero-copy p {
    max-width: 620px;
    margin: 0;
    color: #c9d8ce;
    line-height: 1.65;
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.dashboard-metrics article,
.dashboard-panel {
    border: 1px solid #dce8e1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 40px rgba(12, 31, 19, .06);
}

.dashboard-metrics article {
    padding: 18px;
}

.dashboard-metrics strong {
    display: block;
    margin-top: 10px;
    font-size: 1.45rem;
}

.dashboard-metrics small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-weight: 750;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 16px;
    margin-top: 16px;
}

.dashboard-panel {
    padding: 20px;
}

.activity-panel {
    grid-column: 1 / -1;
}

.strategies-panel {
    grid-column: 1 / -1;
}

.panel-heading h2 {
    margin: 6px 0 0;
    font-size: 1.25rem;
    letter-spacing: 0;
}

.allocation-panel {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
}

.allocation-panel .panel-heading {
    grid-column: 1 / -1;
}

.allocation-ring {
    width: 180px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
}

.allocation-ring::after {
    content: "";
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: #ffffff;
}

.allocation-ring strong,
.allocation-ring span {
    position: relative;
    z-index: 1;
}

.allocation-ring strong {
    align-self: end;
    font-size: 1.8rem;
}

.allocation-ring span {
    align-self: start;
    color: var(--muted);
    font-weight: 850;
}

.allocation-list,
.activity-list,
.progress-list,
.task-list,
.strategy-list {
    display: grid;
    gap: 11px;
}

.allocation-list div,
.activity-list div,
.progress-list div {
    display: grid;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    background: #f7fbf8;
}

.kyc-panel p {
    margin: 14px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.kyc-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #f1d28a;
    border-radius: 8px;
    background: #fff8e6;
}

.kyc-status.is-submitted {
    border-color: #cfe7d6;
    background: #f2fbf5;
}

.kyc-status strong {
    font-size: 1.15rem;
}

.kyc-status span {
    padding: 7px 10px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--green-dark);
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.dashboard-link {
    display: inline-flex;
    width: fit-content;
    margin-top: 16px;
    color: var(--green-dark);
    font-weight: 950;
}

.task-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 8px;
    background: #f7fbf8;
    color: var(--ink);
    font-weight: 900;
}

.task-list a:hover {
    background: var(--green-soft);
}

.task-list strong {
    color: var(--green-dark);
    font-size: .78rem;
    text-transform: uppercase;
}

.strategy-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.strategy-list div {
    padding: 16px;
    border: 1px solid #dce8e1;
    border-radius: 8px;
    background: #f7fbf8;
}

.strategy-list span,
.strategy-list strong {
    display: block;
    font-weight: 950;
}

.strategy-list p {
    margin: 10px 0;
    color: var(--muted);
    line-height: 1.45;
}

.strategy-list small {
    display: inline-flex;
    margin-top: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--muted);
    font-weight: 850;
}

.allocation-list div {
    grid-template-columns: 12px minmax(0, 1fr) auto;
}

.allocation-list i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.allocation-list span,
.progress-list span {
    color: var(--muted);
    font-weight: 800;
}

.progress-list div {
    grid-template-columns: 18px minmax(0, 1fr);
}

.progress-list b {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #c9d8ce;
}

.progress-list .is-complete b,
.progress-list .is-active b {
    border-color: var(--green);
    background: var(--green);
}

.activity-list div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
}

.activity-list span,
.activity-list strong {
    font-weight: 900;
}

.activity-list small {
    color: var(--muted);
    font-weight: 750;
}

.activity-list em {
    justify-self: end;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green-dark);
    font-size: .78rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

@media (max-width: 980px) {
    .dashboard-shell {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid #dce8e1;
    }

    .dashboard-nav {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .dashboard-nav a {
        white-space: nowrap;
    }

    .dashboard-support {
        display: none;
    }

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

    .strategy-list {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 640px) {
    .dashboard-main,
    .dashboard-sidebar {
        padding: 16px;
    }

    .dashboard-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-user {
        width: 100%;
        justify-content: space-between;
    }

    .dashboard-user span {
        overflow-wrap: anywhere;
    }

    .dashboard-hero {
        padding: 18px;
    }

    .dashboard-metrics,
    .allocation-panel {
        grid-template-columns: 1fr;
    }

    .allocation-ring {
        justify-self: center;
    }

    .activity-list div,
    .task-list a {
        grid-template-columns: 1fr;
    }

    .activity-list em {
        justify-self: start;
    }
}

/* Refined client dashboard */
.dashboard-body {
    background: #f4f7f5;
}

.dashboard-shell {
    grid-template-columns: 270px minmax(0, 1fr);
}

.dashboard-sidebar {
    background: #fbfdfb;
    border-right: 1px solid #dfe9e3;
}

.dashboard-nav a {
    border: 1px solid transparent;
}

.dashboard-nav a:hover,
.dashboard-nav a.is-active {
    border-color: #cfe7d6;
}

.dashboard-main {
    padding: 28px;
}

.dashboard-topbar {
    margin-bottom: 18px;
}

.dashboard-topbar h1 {
    font-size: clamp(1.55rem, 2vw, 2.15rem);
}

.dashboard-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    min-height: 250px;
    padding: 30px;
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .18), rgba(16, 33, 23, 0) 38%),
        #101f17;
    box-shadow: 0 22px 60px rgba(14, 32, 21, .16);
}

.dashboard-hero-copy h2 {
    max-width: 100%;
    font-size: clamp(2.5rem, 5.2vw, 4.5rem);
}

.dashboard-hero-copy p {
    max-width: 560px;
}

.dashboard-balance-card {
    align-self: center;
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
}

.dashboard-balance-card div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
}

.dashboard-balance-card span {
    color: #c9d8ce;
    font-size: .82rem;
    font-weight: 850;
}

.dashboard-balance-card strong {
    color: #ffffff;
    font-size: 1.05rem;
}

.dashboard-grid {
    grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr);
    gap: 18px;
    margin-top: 18px;
}

.dashboard-panel {
    padding: 22px;
    border-color: #dfe9e3;
    box-shadow: 0 18px 48px rgba(20, 42, 27, .07);
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.panel-heading h2 {
    font-size: 1.2rem;
}

.dashboard-status-panel,
.dashboard-actions-panel {
    min-height: 250px;
}

.kyc-status {
    margin-top: 18px;
    background: #fff9eb;
}

.kyc-status.is-submitted {
    background: #f0fbf4;
}

.task-list {
    margin-top: 18px;
}

.task-list a {
    min-height: 54px;
    border: 1px solid #e3ede7;
    background: #ffffff;
}

.task-list a:hover {
    border-color: #bde3c8;
}

.strategies-panel,
.activity-panel {
    grid-column: 1 / -1;
}

.strategy-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}

.strategy-list div {
    min-height: 168px;
    display: grid;
    align-content: start;
    border-color: #dfe9e3;
    background: #ffffff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.strategy-list div:hover {
    transform: translateY(-2px);
    border-color: #bde3c8;
    box-shadow: 0 14px 34px rgba(20, 42, 27, .08);
}

.strategy-list span {
    font-size: 1.05rem;
}

.strategy-list strong {
    color: var(--green-dark);
}

.activity-list {
    margin-top: 18px;
}

.activity-list div {
    min-height: 58px;
    grid-template-columns: 1.1fr minmax(0, 1.25fr) auto auto;
    padding: 14px 16px;
    border: 1px solid #e3ede7;
    background: #ffffff;
}

.activity-list span {
    color: var(--ink);
}

.activity-list strong {
    white-space: nowrap;
}

@media (max-width: 980px) {
    .dashboard-main {
        padding: 20px;
    }

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

    .strategy-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dashboard-main {
        padding: 16px;
    }

    .dashboard-hero {
        padding: 20px;
    }

    .dashboard-balance-card div,
    .activity-list div {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .dashboard-balance-card div {
        display: grid;
    }
}

/* Client dashboard final polish */
.dashboard-hero {
    grid-template-columns: 1fr;
    min-height: 230px;
}

.dashboard-hero-copy {
    align-self: center;
}

.dashboard-hero-copy p,
.dashboard-balance-card {
    display: none;
}

.dashboard-hero .dashboard-actions {
    margin-top: 28px;
}

.dashboard-status-panel,
.dashboard-actions-panel,
.strategies-panel,
.activity-panel {
    position: relative;
    overflow: hidden;
}

.dashboard-status-panel::before,
.dashboard-actions-panel::before,
.strategies-panel::before,
.activity-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #49cc68, #d7b46a, #5794f2);
}

.dashboard-status-panel .panel-heading,
.dashboard-actions-panel .panel-heading,
.strategies-panel .panel-heading,
.activity-panel .panel-heading {
    padding-top: 4px;
}

.kyc-status {
    padding: 18px;
    border-color: #ead7a5;
    background:
        linear-gradient(135deg, rgba(215, 180, 106, .2), rgba(255, 255, 255, 0) 50%),
        #fffaf0;
}

.kyc-status.is-submitted {
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .16), rgba(255, 255, 255, 0) 55%),
        #f0fbf4;
}

.dashboard-status-panel p {
    font-size: .95rem;
}

.task-list a {
    box-shadow: 0 8px 22px rgba(20, 42, 27, .04);
}

.strategy-list div {
    background:
        linear-gradient(180deg, #ffffff, #f8fcf9);
}

.strategy-list span {
    color: #102117;
}

.strategy-list strong {
    width: fit-content;
    margin-top: 2px;
    padding: 8px 10px;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green-dark);
    font-size: .86rem;
}

.activity-list div {
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.activity-list div:hover {
    transform: translateY(-1px);
    border-color: #bde3c8;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .06);
}

.activity-list span::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 9px;
    border-radius: 50%;
    background: var(--green);
    vertical-align: 1px;
}

.kyc-top-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: .72rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kyc-top-badge.is-unverified {
    border: 1px solid #f4aaaa;
    background: #fff0f0;
    color: #b42323;
    animation: kycBadgePulse 1.8s ease-in-out infinite;
}

.kyc-top-badge.is-verified {
    border: 1px solid #bde3c8;
    background: #f0fbf4;
    color: var(--green-dark);
}

@keyframes kycBadgePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(180, 35, 35, .22);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(180, 35, 35, 0);
    }
}

.dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.dashboard-quick-actions a {
    min-height: 92px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 14px 34px rgba(20, 42, 27, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dashboard-quick-actions a:hover {
    transform: translateY(-2px);
    border-color: #bde3c8;
    box-shadow: 0 18px 44px rgba(20, 42, 27, .09);
}

.dashboard-quick-actions span {
    font-size: 1.02rem;
    font-weight: 950;
}

.dashboard-quick-actions strong {
    color: var(--muted);
    font-size: .84rem;
    font-weight: 800;
}

.dashboard-grid {
    grid-template-columns: 1fr;
    margin-top: 12px;
    gap: 12px;
}

@media (max-width: 980px) {
    .dashboard-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-user {
        align-items: flex-start;
        flex-wrap: wrap;
    }

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

/* Dashboard action buttons and transaction modal */
.kyc-verify-link {
    color: #b42323;
    font-size: .82rem;
    font-weight: 950;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dashboard-quick-actions button {
    min-height: 92px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(20, 42, 27, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dashboard-quick-actions button:hover {
    transform: translateY(-2px);
    border-color: #bde3c8;
    box-shadow: 0 18px 44px rgba(20, 42, 27, .09);
}

.dashboard-quick-actions button span {
    font-size: 1.02rem;
    font-weight: 950;
}

.dashboard-quick-actions button strong {
    color: var(--muted);
    font-size: .84rem;
    font-weight: 800;
}

.activity-list button {
    width: 100%;
    min-height: 68px;
    display: grid;
    grid-template-columns: 1.1fr .8fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid #e3ede7;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.activity-list button:hover {
    transform: translateY(-1px);
    border-color: #bde3c8;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .06);
}

.activity-list button > small:last-child {
    grid-column: 1 / -1;
    color: var(--muted);
}

.transaction-modal[hidden] {
    display: none;
}

.transaction-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
}

.modal-open {
    overflow: hidden;
}

.transaction-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 18, 10, .55);
}

.transaction-modal-card {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    padding: 24px;
    background: #ffffff;
    box-shadow: 0 28px 90px rgba(5, 18, 10, .28);
}

.transaction-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 1px solid #dfe9e3;
    border-radius: 50%;
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}

.transaction-modal-card > span {
    color: var(--green-dark);
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.transaction-modal-card h2 {
    margin: 8px 0 18px;
    font-size: 1.5rem;
}

.transaction-modal-card dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.transaction-modal-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px;
    border-radius: 8px;
    background: #f7fbf8;
}

.transaction-modal-card dt {
    color: var(--muted);
    font-weight: 800;
}

.transaction-modal-card dd {
    margin: 0;
    font-weight: 950;
    text-align: right;
}

@media (max-width: 640px) {
    .activity-list button {
        grid-template-columns: 1fr;
    }
}

/* Keep quick actions tight to the next dashboard section. */
.dashboard-quick-actions {
    margin-bottom: 0 !important;
}

.dashboard-quick-actions + .dashboard-grid {
    margin-top: 6px !important;
}

.dashboard-quick-actions + .dashboard-grid .strategies-panel {
    margin-top: 0 !important;
}

.terms-hero {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: clamp(24px, 5vw, 46px);
    background:
        radial-gradient(circle at 86% 14%, rgba(73, 204, 104, .18), transparent 30%),
        #fff;
    box-shadow: 0 18px 54px rgba(31, 59, 42, .08);
}

.terms-hero h1 {
    max-width: 780px;
    margin: 22px 0 14px;
    font-size: clamp(2.6rem, 5.6vw, 5.2rem);
}

.terms-hero p {
    max-width: 780px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.7;
}

.terms-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.terms-meta span {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 13px;
    color: var(--muted);
    background: #fff;
    font-size: .86rem;
    font-weight: 800;
}

.terms-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}

.terms-sidebar {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(31, 59, 42, .05);
}

.terms-sidebar strong {
    margin-bottom: 8px;
}

.terms-sidebar a {
    border-radius: 6px;
    padding: 9px 10px;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 750;
}

.terms-sidebar a:hover {
    color: var(--green-dark);
    background: var(--green-soft);
}

.terms-document {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: clamp(22px, 4vw, 42px);
    background: #fff;
    box-shadow: 0 12px 36px rgba(31, 59, 42, .05);
}

.terms-notice {
    border: 1px solid #cfe7d6;
    border-radius: 8px;
    padding: 16px;
    background: var(--green-soft);
}

.terms-notice p {
    margin: 6px 0 0;
    color: #315440;
    line-height: 1.55;
}

.terms-document section {
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
}

.terms-document section:last-of-type {
    border-bottom: 0;
}

.terms-document h2 {
    margin-bottom: 12px;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.14;
}

.terms-document p {
    color: var(--muted);
    line-height: 1.72;
}

.terms-document p:last-child {
    margin-bottom: 0;
}

.terms-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.page-summary-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 30px;
    background: #fff;
    box-shadow: var(--shadow);
}

.page-summary-card span {
    display: block;
    color: var(--green-dark);
    font-size: .84rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-summary-card strong {
    display: block;
    margin: 14px 0 12px;
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    line-height: 1;
}

.page-summary-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

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

.page-detail-band {
    background: var(--soft);
}

.split-content {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 44px;
    align-items: start;
}

.detail-list {
    display: grid;
    gap: 14px;
}

.detail-list-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    background: #fff;
}

.detail-list-item span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #06150b;
    background: var(--green);
    font-weight: 900;
}

.detail-list-item strong {
    display: block;
    margin-bottom: 7px;
    font-size: 1.08rem;
}

.detail-list-item p {
    margin: 0;
    color: var(--muted);
    line-height: 1.58;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr);
    gap: 54px;
    align-items: center;
}

.eyebrow {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    border: 1px solid #cfe7d6;
    border-radius: 999px;
    padding: 8px 13px;
    color: #1d6f37;
    background: #fff;
    font-size: .85rem;
    font-weight: 800;
}

.eyebrow-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(73, 204, 104, .16);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: 650px;
    margin-bottom: 20px;
    font-size: clamp(2.55rem, 5.3vw, 5rem);
    line-height: .98;
    letter-spacing: 0;
}

.hero-copy {
    max-width: 620px;
    color: var(--muted);
    font-size: clamp(1.03rem, 1.45vw, 1.18rem);
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 30px 0;
}

.trust-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 620px;
}

.trust-pill {
    min-height: 78px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}

.trust-pill strong {
    display: block;
    font-size: 1.3rem;
    line-height: 1;
}

.trust-pill span {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.35;
}

.hero-visual {
    position: relative;
    min-height: 610px;
}

.portfolio-carousel {
    position: absolute;
    inset: 0 0 auto auto;
    width: min(410px, 92vw);
    min-height: 610px;
    border: 12px solid #111513;
    border-radius: 42px;
    padding: 18px;
    background: #f7fbf8;
    box-shadow: var(--shadow);
}

.portfolio-carousel::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 50%;
    width: 94px;
    height: 24px;
    border-radius: 0 0 16px 16px;
    background: #111513;
    transform: translateX(-50%);
    z-index: 3;
}

.carousel-track {
    position: relative;
    min-height: 552px;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(circle at 88% 8%, rgba(73, 204, 104, .26), transparent 34%),
        #fff;
}

.portfolio-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 42px 18px 72px;
    opacity: 0;
    transform: translateX(34px) scale(.98);
    pointer-events: none;
    transition: opacity .55s ease, transform .55s ease;
}

.portfolio-slide.is-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.screen-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 750;
}

.balance-card,
.yield-card {
    border-radius: 8px;
    padding: 22px;
    color: #06150b;
    background: linear-gradient(135deg, var(--green) 0%, #b8f46d 100%);
}

.balance-label,
.yield-card span {
    display: block;
    margin-bottom: 7px;
    font-size: .83rem;
    font-weight: 850;
    opacity: .75;
}

.balance-card strong,
.yield-card strong {
    display: block;
    font-size: 2.3rem;
    line-height: 1;
}

.balance-card small {
    display: inline-flex;
    margin-top: 12px;
    border-radius: 999px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, .42);
    font-weight: 850;
}

.mini-chart {
    height: 126px;
    display: flex;
    align-items: end;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    background: #fff;
}

.mini-chart i {
    flex: 1;
    min-width: 12px;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, var(--green), var(--green-dark));
    animation: chartPulse 2.8s ease-in-out infinite;
}

.mini-chart i:nth-child(2n) {
    animation-delay: .25s;
}

.mini-chart i:nth-child(3n) {
    animation-delay: .45s;
}

.asset-list,
.payment-list {
    display: grid;
    gap: 10px;
}

.asset-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}

.asset-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #07180d;
    background: var(--green-soft);
    font-weight: 900;
}

.asset-row b,
.payment-list b {
    display: block;
    font-size: .96rem;
}

.asset-row small,
.payment-list span {
    color: var(--muted);
    font-weight: 700;
}

.asset-row em,
.payment-list em,
.timeline-item em {
    color: var(--green-dark);
    font-style: normal;
    font-weight: 900;
}

.allocation-card {
    display: grid;
    gap: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    background: #fff;
}

.donut {
    width: 170px;
    aspect-ratio: 1;
    justify-self: center;
    border-radius: 50%;
    background: conic-gradient(var(--green) 0 43%, var(--blue) 43% 68%, var(--gold) 68% 84%, #c7d6ce 84% 100%);
    position: relative;
    animation: breathe 4s ease-in-out infinite;
}

.donut::after {
    content: "";
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    background: #fff;
}

.legend {
    display: grid;
    gap: 14px;
}

.legend-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    color: var(--muted);
    font-weight: 750;
}

.legend-row i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--green);
}

.legend-row:nth-child(2) i {
    background: var(--blue);
}

.legend-row:nth-child(3) i {
    background: var(--gold);
}

.legend-row:nth-child(4) i {
    background: #c7d6ce;
}

.insight-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.insight-stack div,
.payment-list div {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}

.insight-stack span {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
}

.insight-stack strong {
    display: block;
    margin-top: 6px;
    font-size: 1.1rem;
}

.yield-meter {
    height: 10px;
    overflow: hidden;
    margin-top: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .44);
}

.yield-meter i {
    display: block;
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background: #06150b;
}

.payment-list div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
}

.payment-list em {
    grid-row: span 2;
    align-self: center;
}

.carousel-controls {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 28px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.carousel-controls button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    background: rgba(255, 255, 255, .86);
    cursor: pointer;
}

.carousel-controls svg {
    width: 20px;
    height: 20px;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.carousel-dots button {
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: #cbd8d1;
}

.carousel-dots button.is-active {
    width: 28px;
    border-radius: 999px;
    background: var(--green);
}

.floating-card {
    position: absolute;
    left: 0;
    bottom: 58px;
    width: 250px;
    border: 1px solid rgba(17, 21, 19, .08);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 20px 50px rgba(21, 40, 28, .14);
    backdrop-filter: blur(18px);
    animation: floatCard 5s ease-in-out infinite;
}

.floating-card span {
    color: var(--muted);
    font-size: .83rem;
    font-weight: 750;
}

.floating-card strong {
    display: block;
    margin-top: 8px;
    font-size: 1.65rem;
}

.floating-card .line {
    height: 8px;
    margin-top: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--green) 68%, #e5ece8 68%);
}

section {
    padding: 78px 0;
    scroll-margin-top: 88px;
}

.section-head {
    max-width: 720px;
    margin-bottom: 34px;
}

.section-kicker {
    margin-bottom: 10px;
    color: var(--green-dark);
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

h2 {
    margin-bottom: 12px;
    font-size: clamp(2rem, 4vw, 4.1rem);
    line-height: 1;
    letter-spacing: 0;
}

.section-head p {
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.65;
}

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

.feature-card {
    min-height: 290px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 26px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(31, 59, 42, .06);
}

.icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
    border-radius: 50%;
    color: #06150b;
    background: var(--green-soft);
}

.icon svg {
    width: 24px;
    height: 24px;
}

.feature-card h3 {
    margin-bottom: 12px;
    font-size: 1.35rem;
    line-height: 1.18;
}

.feature-card p {
    color: var(--muted);
    line-height: 1.6;
}

.portfolio {
    background: var(--soft);
}

.portfolio-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 44px;
    align-items: center;
}

.portfolio-panel {
    border: 1px solid #d9e7dd;
    border-radius: 8px;
    padding: 20px;
    background: #fff;
    box-shadow: var(--shadow);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.panel-header strong {
    font-size: 1.05rem;
}

.status {
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--green-dark);
    background: var(--green-soft);
    font-size: .78rem;
    font-weight: 900;
}

.allocation {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}

.timeline {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.timeline-item span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--green-dark);
    background: var(--green-soft);
    font-weight: 900;
}

.timeline-item b {
    display: block;
}

.timeline-item small {
    color: var(--muted);
}

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

.step {
    border-left: 2px solid var(--green);
    padding: 8px 0 8px 22px;
}

.step span {
    color: var(--green-dark);
    font-weight: 900;
}

.step h3 {
    margin: 10px 0;
    font-size: 1.2rem;
}

.step p {
    color: var(--muted);
    line-height: 1.6;
}

.security {
    color: #fff;
    background: #101412;
}

.security .section-kicker,
.security .section-head p {
    color: #a9d9b6;
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
}

.security-item {
    min-height: 156px;
    padding: 24px;
    background: #151b18;
}

.security-item strong {
    display: block;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.security-item p {
    margin: 0;
    color: #b9c5bf;
    line-height: 1.55;
}

.testimonials {
    background:
        radial-gradient(circle at 12% 16%, rgba(73, 204, 104, .13), transparent 28%),
        #ffffff;
}

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

.testimonial-card {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 26px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(31, 59, 42, .06);
}

.quote-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border-radius: 50%;
    color: #06150b;
    background: var(--green-soft);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
}

.testimonial-card blockquote {
    margin: 0;
    color: #26322c;
    font-size: 1.05rem;
    line-height: 1.65;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

.testimonial-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #06150b;
    background: var(--green);
    font-weight: 900;
}

.testimonial-author strong {
    display: block;
}

.testimonial-author span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 650;
}

.cta {
    padding: 86px 0;
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .92), rgba(184, 244, 109, .94)),
        var(--green);
}

.cta-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
}

.cta h2 {
    max-width: 760px;
    margin-bottom: 10px;
    color: #06150b;
}

.cta p {
    max-width: 650px;
    margin: 0;
    color: rgba(6, 21, 11, .74);
    font-size: 1.08rem;
    line-height: 1.6;
}

.footer {
    padding: 34px 0;
    color: var(--muted);
    background: #fff;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: .9rem;
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes floatCard {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes chartPulse {
    0%,
    100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.12);
    }
}

@keyframes breathe {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.035);
    }
}

@keyframes spinSlow {
    to {
        transform: rotate(360deg);
    }
}

@keyframes drift {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes railFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes barRise {
    0%,
    100% {
        filter: brightness(1);
        transform: scaleY(1);
        transform-origin: bottom;
    }
    50% {
        filter: brightness(1.12);
        transform: scaleY(.9);
    }
}

@keyframes scanLine {
    0%,
    100% {
        transform: translateY(0);
        opacity: .55;
    }
    50% {
        transform: translateY(270px);
        opacity: 1;
    }
}

@keyframes sliderGlow {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(73, 204, 104, 0);
    }
    50% {
        box-shadow: 0 0 24px rgba(73, 204, 104, .6);
    }
}

@media (max-width: 980px) {
    .menu-toggle {
        display: grid;
    }

    .nav-links {
        position: absolute;
        top: calc(100% + 1px);
        left: 20px;
        right: 20px;
        display: grid;
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 18px 44px rgba(17, 21, 19, .12);
        opacity: 0;
        transform: translateY(-12px);
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease;
    }

    .nav-links.is-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-links a {
        padding: 16px 18px;
        border-bottom: 1px solid var(--line);
    }

    .mobile-menu-action {
        display: block;
        margin: 10px 14px 0;
        border: 1px solid #cad8d0;
        border-radius: 999px;
        text-align: center;
    }

    .mobile-menu-primary {
        margin-bottom: 14px;
        color: #07180d;
        background: var(--green);
        border-color: var(--green);
    }

    .nav-links a.is-active::after {
        left: auto;
        right: 18px;
        bottom: 50%;
        width: 8px;
        height: 8px;
        transform: translateY(50%);
    }

    .nav-links a:last-child {
        border-bottom: 0;
    }

    .hero-grid,
    .page-hero-grid,
    .portfolio-layout,
    .portfolio-board-grid,
    .split-content,
    .cta-card {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 660px;
    }

    .portfolio-carousel {
        left: 50%;
        transform: translateX(-50%);
    }

    .floating-card {
        left: 50%;
        bottom: 8px;
        transform: translateX(-50%);
        animation-name: floatCardCentered;
    }

    .feature-grid,
    .steps,
    .page-stat-grid,
    .testimonial-grid,
    .security-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .signup-page {
        grid-template-columns: 1fr;
    }

    .signup-hero-panel {
        min-height: auto;
    }

    .terms-layout {
        grid-template-columns: 1fr;
    }

    .terms-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .terms-sidebar strong {
        grid-column: 1 / -1;
    }
}

@keyframes floatCardCentered {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-12px);
    }
}

@media (max-width: 680px) {
    .nav-inner,
    .section-inner {
        width: min(100% - 28px, 1180px);
    }

    .nav-inner {
        min-height: 84px;
    }

    .page-shell {
        padding-top: 84px;
    }

    .brand {
        font-size: .98rem;
    }

    .brand-logo {
        width: 150px;
    }

    .nav-actions .btn-secondary {
        display: none;
    }

    .nav-actions .btn-primary {
        min-height: 40px;
        padding: 0 14px;
        font-size: .86rem;
    }

    .hero {
        padding-top: 44px;
    }

    h1 {
        font-size: clamp(2.25rem, 11vw, 3.45rem);
    }

    .hero-actions,
    .trust-row,
    .feature-grid,
    .steps,
    .page-stat-grid,
    .testimonial-grid,
    .security-grid,
    .allocation,
    .footer-inner {
        grid-template-columns: 1fr;
    }

    .trust-row {
        display: grid;
    }

    .btn {
        width: 100%;
    }

    .hero-actions .btn {
        width: auto;
        flex: 1 1 190px;
    }

    .hero-visual {
        min-height: 610px;
    }

    .portfolio-carousel {
        width: 100%;
        min-height: 574px;
        border-width: 9px;
        border-radius: 34px;
    }

    .carousel-track {
        min-height: 524px;
    }

    .portfolio-slide {
        padding: 38px 14px 66px;
    }

    .floating-card {
        width: calc(100% - 42px);
    }

    .balance-card strong,
    .yield-card strong {
        font-size: 2rem;
    }

    .allocation-card {
        padding: 16px;
    }

    .donut {
        width: 150px;
    }

    .timeline-item {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .timeline-item em {
        grid-column: 2;
    }

    section {
        padding: 58px 0;
    }

    .portfolio-panel {
        padding: 16px;
    }

    .network-visual,
    .portfolio-lab,
    .security-terminal,
    .onboarding-card {
        min-height: 360px;
    }

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

    .signup-hero-panel,
    .signup-form-panel {
        padding: 24px 16px;
    }

    .signup-hero-panel {
        margin: 10px;
        min-height: auto;
        gap: 0;
        padding-block: 22px;
    }

    .signup-copy h1 {
        font-size: clamp(2.05rem, 9vw, 2.8rem);
    }

    .signup-copy p {
        font-size: 1rem;
    }

    .signup-copy {
        display: none;
    }

    .signup-benefits,
    .auth-visual {
        display: none;
    }

    .form-grid,
    .auth-visual-row {
        grid-template-columns: 1fr;
    }

    .terms-sidebar {
        display: none;
    }

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

@media (max-width: 420px) {
    .nav-actions {
        display: none;
    }

    .brand-logo {
        width: min(150px, calc(100vw - 96px));
    }

    .hero-visual {
        min-height: 630px;
    }

    .asset-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .asset-row em {
        grid-column: 2;
    }

    .insight-stack {
        grid-template-columns: 1fr;
    }
}

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

/* Final dashboard spacing override. */
.dashboard-quick-actions {
    margin-bottom: 0 !important;
}

.dashboard-quick-actions + .dashboard-grid {
    margin-top: 4px !important;
}

.dashboard-quick-actions + .dashboard-grid .dashboard-panel:first-child {
    margin-top: 0 !important;
}

/* Compact dashboard vertical rhythm. */
.dashboard-hero {
    min-height: auto !important;
    padding: 22px 26px !important;
    margin-bottom: 0 !important;
}

.dashboard-hero-copy h2 {
    margin-bottom: 0 !important;
}

.dashboard-hero .dashboard-actions {
    margin-top: 16px !important;
}

.dashboard-quick-actions {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    gap: 10px !important;
}

.dashboard-quick-actions button {
    min-height: 72px !important;
    padding: 13px 16px !important;
}

.dashboard-quick-actions + .dashboard-grid {
    margin-top: 8px !important;
}

.dashboard-panel {
    padding-top: 18px !important;
}

.strategy-list {
    margin-top: 12px !important;
}

.dashboard-quick-actions button {
    min-height: 62px !important;
}

.dashboard-quick-actions + .dashboard-grid {
    margin-top: -4px !important;
}

/* Reworked compact client dashboard */
.client-dashboard-body {
    min-height: 100vh;
    margin: 0;
    background: #f4f7f5;
    color: var(--ink);
}

.client-dashboard-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
}

.client-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    align-content: start;
    gap: 24px;
    padding: 22px;
    border-right: 1px solid #dfe9e3;
    background: #ffffff;
}

.client-brand img {
    width: 210px;
    max-width: 100%;
    height: auto;
}

.client-nav {
    display: grid;
    gap: 8px;
}

.client-nav a,
.client-nav-logout button {
    display: block;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #58655f;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    text-align: left;
}

.client-nav a:hover,
.client-nav a.is-active,
.client-nav-logout button:hover {
    border-color: #cfe7d6;
    background: var(--green-soft);
    color: var(--green-dark);
}

.client-nav-logout {
    margin: 0;
}

.client-main {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 22px;
}

.client-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 2px;
    position: sticky;
    top: 0;
    z-index: 70;
    padding: 10px 0;
    background: rgba(244, 247, 245, .94);
    backdrop-filter: blur(12px);
}

.client-topbar span,
.client-balance-panel > span,
.client-section-heading span {
    color: var(--green-dark);
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.client-topbar h1 {
    margin: 5px 0 0;
    font-size: clamp(1.45rem, 2vw, 2.05rem);
    letter-spacing: 0;
}

.client-user-strip {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.client-user-strip > span {
    color: var(--muted);
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.client-user-strip em {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: .7rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
    white-space: nowrap;
}

.client-user-strip em.is-unverified {
    border: 1px solid #f4aaaa;
    background: #fff0f0;
    color: #b42323;
    animation: kycBadgePulse 1.8s ease-in-out infinite;
}

.client-user-strip em.is-verified {
    border: 1px solid #bde3c8;
    background: #f0fbf4;
    color: var(--green-dark);
}

.client-user-strip a {
    color: #b42323;
    font-size: .8rem;
    font-weight: 950;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.client-user-strip strong {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--green);
    color: #07180d;
}

.client-balance-panel {
    display: grid;
    align-content: center;
    min-height: 188px;
    padding: 22px 26px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .18), rgba(16, 33, 23, 0) 40%),
        #101f17;
    box-shadow: 0 18px 50px rgba(14, 32, 21, .14);
}

.client-balance-panel h2 {
    margin: 8px 0 0;
    color: #ffffff;
    font-size: clamp(2.5rem, 5vw, 4.4rem);
    letter-spacing: 0;
}

.client-balance-panel div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.client-action-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.client-action-row button,
.client-action-row a {
    min-height: 76px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    text-align: left;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.client-action-row button svg,
.client-action-row a svg,
.client-mobile-nav svg,
.client-menu-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.client-action-row button svg,
.client-action-row a svg {
    grid-row: span 2;
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 8px;
    background: var(--green-soft);
    color: var(--green-dark);
}

.client-action-row button:hover,
.client-action-row a:hover {
    transform: translateY(-2px);
    border-color: #bde3c8;
    box-shadow: 0 16px 34px rgba(20, 42, 27, .08);
}

.client-action-row span {
    font-weight: 950;
}

.client-action-row strong {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.client-menu-toggle,
.client-mobile-nav,
.client-menu-drawer {
    display: none;
}

.client-card {
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 14px 38px rgba(20, 42, 27, .06);
}

.client-section-heading h2 {
    margin: 5px 0 0;
    font-size: 1.2rem;
    letter-spacing: 0;
}

.client-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.client-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid #cfe7d6;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green-dark);
    font-size: .82rem;
    font-weight: 950;
    white-space: nowrap;
}

.client-strategy-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.client-strategy-list article {
    min-height: 142px;
    padding: 15px;
    border: 1px solid #e3ede7;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fcf9);
}

.strategy-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.strategy-card-top strong {
    flex: 0 0 auto;
    padding: 8px 10px;
    border-radius: 999px;
    background: #102117;
    color: #ffffff;
    font-size: .88rem;
    font-weight: 950;
}

.client-strategy-list span {
    display: block;
    font-weight: 950;
}

.client-strategy-list p {
    margin: 8px 0;
    color: var(--muted);
    line-height: 1.45;
}

.client-strategy-list strong {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green-dark);
    font-size: .84rem;
}

.client-strategy-list small {
    display: block;
    margin-top: 9px;
    color: var(--muted);
    font-weight: 850;
}

.client-strategy-meta div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    background: #f4f8f5;
}

.client-strategy-meta small {
    margin: 0;
    font-size: .72rem;
    text-transform: uppercase;
}

.client-strategy-meta b {
    font-size: .88rem;
    overflow-wrap: anywhere;
}

.client-transaction-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.client-transaction-list button {
    display: grid;
    grid-template-columns: 1.1fr .8fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 13px 15px;
    border: 1px solid #e3ede7;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.client-transaction-list button:hover {
    border-color: #bde3c8;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .06);
}

.client-transaction-list span,
.client-transaction-list strong {
    font-weight: 950;
}

.client-transaction-list small,
.client-transaction-list b {
    color: var(--muted);
    font-weight: 800;
}

.client-transaction-list em {
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green-dark);
    font-size: .76rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.client-transaction-list b {
    grid-column: 1 / -1;
}

@media (max-width: 980px) {
    .client-dashboard-shell {
        grid-template-columns: 1fr;
    }

    .client-sidebar {
        position: static;
        height: auto;
        padding: 16px;
        border-right: 0;
        border-bottom: 1px solid #dfe9e3;
    }

    .client-nav {
        display: flex;
        overflow-x: auto;
    }

    .client-nav a,
    .client-nav-logout button {
        white-space: nowrap;
    }

    .client-action-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-strategy-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .client-dashboard-body {
        padding-bottom: 82px;
    }

    .client-sidebar {
        display: none;
    }

    .client-main {
        padding: 14px;
        gap: 10px;
    }

    .client-topbar {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        top: 0;
        margin: -14px -14px 0;
        padding: 12px 14px;
        border-bottom: 1px solid #dfe9e3;
    }

    .client-user-strip {
        align-items: flex-start;
        flex-direction: column;
    }

    .client-user-strip {
        width: 100%;
    }

    .client-user-strip > span {
        overflow-wrap: anywhere;
    }

    .client-balance-panel {
        padding: 18px;
        min-height: 158px;
    }

    .client-action-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.client-action-row button,
.client-action-row a {
        min-height: 72px;
        grid-template-columns: 32px minmax(0, 1fr);
        padding: 11px;
    }

    .client-action-row button svg,
    .client-action-row a svg {
        width: 32px;
        height: 32px;
        padding: 7px;
    }

    .client-transaction-list button {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .client-menu-toggle {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid #dfe9e3;
        border-radius: 8px;
        background: #ffffff;
        color: var(--ink);
        cursor: pointer;
    }

    .client-mobile-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 80;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        padding: 8px;
        border: 1px solid #dfe9e3;
        border-radius: 16px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 18px 50px rgba(8, 22, 13, .18);
        backdrop-filter: blur(12px);
    }

    .client-mobile-nav a {
        min-height: 52px;
        display: grid;
        place-items: center;
        gap: 3px;
        border-radius: 12px;
        color: #58655f;
        font-size: .72rem;
        font-weight: 900;
    }

    .client-mobile-nav a.is-active,
    .client-mobile-nav a:hover {
        background: var(--green-soft);
        color: var(--green-dark);
    }

    .client-mobile-nav svg {
        width: 20px;
        height: 20px;
    }

    .client-menu-drawer:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: block;
    }

    .client-menu-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(5, 18, 10, .55);
    }

    .client-menu-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: min(82vw, 320px);
        height: 100%;
        display: grid;
        align-content: start;
        gap: 22px;
        padding: 22px;
        background: #ffffff;
        box-shadow: 18px 0 50px rgba(5, 18, 10, .18);
    }

    .client-menu-panel > button {
        justify-self: end;
        width: 36px;
        height: 36px;
        border: 1px solid #dfe9e3;
        border-radius: 50%;
        background: #ffffff;
        color: var(--ink);
        cursor: pointer;
        font-size: 1.4rem;
        line-height: 1;
    }

    .client-menu-panel img {
        width: 210px;
        max-width: 100%;
    }

    .client-menu-panel nav {
        display: grid;
        gap: 8px;
    }

    .client-menu-panel a,
    .client-menu-panel .client-nav-logout button {
        display: block;
        width: 100%;
        padding: 13px;
        border: 0;
        border-radius: 8px;
        background: #f7fbf8;
        color: var(--ink);
        cursor: pointer;
        font: inherit;
        font-weight: 900;
        text-align: left;
    }
}

@media (max-width: 420px) {
    .client-action-row,
    .client-transaction-list button {
        grid-template-columns: 1fr;
    }
}

/* Final client dashboard mobile/action refinement */
.client-topbar {
    justify-content: flex-end;
}

.client-main > .client-topbar:first-child {
    min-height: 42px;
}

.client-strategy-list article {
    display: grid;
    gap: 10px;
}

.client-strategy-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.client-strategy-list article > button,
.client-strategy-list article > a {
    width: 100%;
    min-height: 42px;
    margin-top: 2px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #07180d;
    cursor: pointer;
    font: inherit;
    font-weight: 950;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.client-strategy-list article > button:hover,
.client-strategy-list article > a:hover {
    filter: brightness(.96);
}

.client-transaction-list button {
    position: relative;
    overflow: hidden;
}

.client-transaction-list button::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--green);
}

.client-transaction-list b {
    padding-left: 13px;
    font-size: .84rem;
}

@media (max-width: 760px) {
    .client-mobile-nav {
        grid-template-columns: repeat(5, 1fr);
    }

    .client-mobile-nav a {
        font-size: .68rem;
    }
}

@media (max-width: 640px) {
    .client-topbar {
        grid-template-columns: 42px minmax(0, 1fr);
        justify-content: space-between;
    }

    .client-user-strip {
        align-items: flex-end;
        justify-self: end;
        text-align: right;
    }

    .client-card {
        padding: 14px;
    }

    .client-section-heading h2 {
        font-size: 1.08rem;
    }

    .client-section-heading {
        align-items: flex-start;
    }

    .client-view-all {
        min-height: 32px;
        padding: 7px 10px;
        font-size: .78rem;
    }

    .client-strategy-list {
        gap: 9px;
    }

    .client-strategy-list article {
        min-height: auto;
        padding: 14px;
    }

    .client-strategy-meta {
        align-items: flex-start;
        flex-direction: column;
    }

.client-strategy-list article > button {
    min-height: 44px;
}

    .client-transaction-list button {
        gap: 6px;
        padding: 14px 14px 14px 18px;
    }

    .client-transaction-list span {
        font-size: 1rem;
    }

    .client-transaction-list strong {
        font-size: 1.08rem;
    }

    .client-transaction-list em {
        width: fit-content;
    }
}

/* Refined investment strategy cards */
.client-strategy-list article {
    min-height: 220px;
    align-content: stretch;
    padding: 16px;
    border-color: #dce8e1;
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .08), rgba(255, 255, 255, 0) 45%),
        #ffffff;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
}

.client-strategy-list article:hover {
    border-color: #bde3c8;
    box-shadow: 0 16px 38px rgba(20, 42, 27, .08);
}

.client-strategy-list article > span {
    display: none;
}

.strategy-card-top span {
    color: #102117;
    font-size: 1.05rem;
    font-weight: 950;
    line-height: 1.25;
}

.client-strategy-list article > p {
    margin: 0;
    font-size: .9rem;
}

.client-strategy-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.client-strategy-meta strong,
.client-strategy-meta > small {
    display: none;
}

.client-strategy-list article > button {
    align-self: end;
    min-height: 44px;
    margin-top: 0;
}

@media (max-width: 640px) {
    .client-strategy-list article {
        min-height: auto;
        gap: 12px;
    }

    .strategy-card-top strong {
        padding: 7px 9px;
    }

    .client-strategy-meta {
        grid-template-columns: 1fr;
    }
}

/* Modern strategy card finish */
.client-strategy-list {
    gap: 12px;
}

.client-strategy-list article {
    min-height: 190px;
    gap: 14px;
    padding: 18px;
    border: 1px solid #dbe8e1;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 104, .16), transparent 34%),
        linear-gradient(180deg, #ffffff, #f9fcfa);
}

.strategy-card-top {
    padding-bottom: 10px;
    border-bottom: 1px solid #e8f0eb;
}

.strategy-card-top span {
    font-size: 1.12rem;
}

.strategy-card-top strong {
    background: #eaffef;
    color: #0b7430;
    box-shadow: inset 0 0 0 1px #bde3c8;
}

.client-strategy-meta {
    gap: 9px;
}

.client-strategy-meta div {
    padding: 11px;
    background: #ffffff;
    border: 1px solid #e7f0ea;
}

.client-strategy-meta b {
    color: #102117;
}

.client-strategy-list article > button,
.client-strategy-list article > a {
    background: #102117;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(16, 33, 23, .14);
}

.client-strategy-list article > button:hover,
.client-strategy-list article > a:hover {
    filter: none;
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .client-strategy-list article {
        padding: 16px;
    }

    .strategy-card-top {
        align-items: center;
    }
}

/* Mobile topbar and balance action polish */
.client-balance-panel .btn {
    min-height: 42px;
    padding: 11px 16px;
    font-size: .9rem;
}

.client-balance-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.client-balance-action svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.client-user-strip strong {
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .client-user-strip {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: end;
        align-items: center;
        gap: 8px;
        text-align: right;
    }

    .client-user-strip strong {
        order: 3;
        width: 38px;
        height: 38px;
        font-size: .82rem;
    }

    .client-user-strip em {
        order: 1;
        padding: 6px 9px;
        font-size: .66rem;
    }

    .client-user-strip a {
        order: 2;
        font-size: .74rem;
        white-space: nowrap;
    }

    .client-balance-panel div {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
    }

    .client-balance-panel .btn {
        min-height: 34px;
        padding: 8px 11px;
        border-radius: 999px;
        font-size: .78rem;
        line-height: 1;
        justify-content: center;
    }

    .client-balance-action svg {
        width: 15px;
        height: 15px;
    }

    .client-balance-action {
        gap: 6px;
        width: 100%;
    }
}

/* Sticky dashboard account strip */
.client-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 70 !important;
    background: rgba(244, 247, 245, .94) !important;
    backdrop-filter: blur(12px);
}

@media (max-width: 640px) {
    .client-topbar {
        margin: -14px -14px 0 !important;
        padding: 12px 14px !important;
        border-bottom: 1px solid #dfe9e3;
    }
}

/* Modern transaction list */
.client-transaction-list {
    gap: 10px;
}

.client-transaction-list button {
    grid-template-columns: 42px minmax(220px, 1fr) 130px 140px 112px;
    min-height: 74px;
    padding: 14px 16px;
    background:
        linear-gradient(180deg, #ffffff, #fbfdfb);
    border-color: #dce8e1;
    box-shadow: 0 8px 24px rgba(20, 42, 27, .04);
}

.client-transaction-list button::before {
    display: none;
}

.client-transaction-list i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--green-soft);
    color: var(--green-dark);
}

.client-transaction-list i svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.client-transaction-list span {
    display: grid;
    gap: 4px;
    color: #102117;
}

.client-transaction-list span b {
    grid-column: auto;
    padding-left: 0;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
}

.client-transaction-list button > small {
    color: var(--muted);
    font-weight: 850;
    text-align: left;
}

.client-transaction-list strong {
    color: #102117;
    text-align: right;
}

.client-transaction-list em {
    justify-self: end;
    min-width: 94px;
    text-align: center;
}

.client-transaction-list em.transaction-status-pending,
.transactions-table em.transaction-status-pending {
    background: #fff8e8;
    color: #986b00;
}

.client-transaction-list em.transaction-status-success,
.client-transaction-list em.transaction-status-successful,
.transactions-table em.transaction-status-success,
.transactions-table em.transaction-status-successful {
    background: #eaffef;
    color: #0b7430;
}

.client-transaction-list em.transaction-status-failed,
.client-transaction-list em.transaction-status-declined,
.transactions-table em.transaction-status-failed,
.transactions-table em.transaction-status-declined {
    background: #fff0f0;
    color: #b42323;
}

@media (max-width: 640px) {
    .client-transaction-list button {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 8px 10px;
        padding: 13px;
    }

    .client-transaction-list i {
        width: 36px;
        height: 36px;
        grid-row: 1 / span 2;
    }

    .client-transaction-list button > small {
        grid-column: 2;
    }

    .client-transaction-list strong {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
        font-size: .98rem;
        text-align: right;
    }

    .client-transaction-list em {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        align-self: start;
    }
}

/* Fund account page */
.fund-page {
    gap: 14px;
}

.fund-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 16px;
    align-items: stretch;
    padding: 24px;
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 104, .24), transparent 34%),
        linear-gradient(135deg, #102117, #193623);
    color: #ffffff;
    box-shadow: 0 18px 50px rgba(14, 32, 21, .14);
}

.fund-hero > div {
    display: grid;
    align-content: center;
    max-width: 680px;
}

.fund-hero span,
.fund-section-title span,
.fund-wallet-card > div span {
    color: var(--green);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fund-hero h1 {
    margin: 8px 0;
    max-width: 620px;
    font-size: clamp(1.85rem, 3vw, 3rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.fund-hero p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .76);
    font-weight: 750;
    line-height: 1.65;
}

.fund-balance-card {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
}

.fund-balance-card strong {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.fund-balance-card small {
    color: rgba(255, 255, 255, .68);
    font-weight: 800;
    line-height: 1.45;
}

.fund-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    gap: 14px;
    align-items: start;
}

.fund-card {
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
}

.fund-primary-card,
.fund-form-card,
.fund-steps-card {
    padding: 18px;
}

.fund-side-column {
    display: grid;
    gap: 14px;
}

.fund-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf3ef;
}

.fund-section-title h2 {
    margin: 0;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f3f8f5;
    color: #26382e;
    font-size: .82rem;
    font-weight: 950;
    letter-spacing: 0;
}

.fund-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.fund-method-card {
    min-height: 78px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #fbfdfb;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.fund-method-card:hover,
.fund-method-card.is-active {
    transform: translateY(-1px);
    border-color: #9edfb1;
    background: #f0fbf4;
    box-shadow: 0 14px 30px rgba(20, 42, 27, .08);
}

.fund-method-card img,
.fund-method-card i {
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

.fund-method-card img {
    object-fit: cover;
    background: #ffffff;
}

.fund-method-card i {
    display: grid;
    place-items: center;
    background: #102117;
    color: var(--green);
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.fund-method-card span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.fund-method-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fund-method-card small {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
}

.fund-wallet-list {
    display: grid;
    gap: 10px;
}

.fund-wallet-card {
    display: none;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #fbfdfb);
}

.fund-wallet-card.is-active {
    display: grid;
}

.fund-wallet-card > div,
.fund-wallet-card p,
.fund-wallet-card img {
    grid-column: 1 / -1;
}

.fund-wallet-card > div strong {
    display: block;
    margin-top: 3px;
    color: #102117;
    font-size: 1rem;
}

.fund-wallet-card code {
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 11px 12px;
    border-radius: 8px;
    background: #f3f8f5;
    color: #102117;
    font-size: .86rem;
    font-weight: 850;
}

.fund-wallet-card button,
.fund-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    background: #102117;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 950;
}

.fund-wallet-card button {
    min-height: 40px;
    padding: 0 14px;
}

.fund-wallet-card img {
    width: 108px;
    height: 108px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    object-fit: cover;
}

.fund-wallet-card p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 750;
    line-height: 1.55;
}

.fund-form {
    display: grid;
    gap: 12px;
}

.fund-form label {
    display: grid;
    gap: 7px;
    color: #102117;
    font-size: .84rem;
    font-weight: 950;
}

.fund-form label small,
.fund-form-errors {
    padding: 9px 10px;
    border: 1px solid #f4aaaa;
    border-radius: 8px;
    background: #fff0f0;
    color: #b42323;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1.45;
}

.fund-form-errors ul {
    margin: 0;
    padding-left: 16px;
}

.fund-form input {
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #fbfdfb;
    color: var(--ink);
    font: inherit;
    font-weight: 800;
}

.fund-form label.has-error input {
    border-color: #d92d20;
    background: #fffafa;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .08);
}

.fund-form button {
    min-height: 48px;
    margin-top: 4px;
}

.fund-form button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.fund-form button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fund-steps-card ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fund-steps-card li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: #33443b;
    font-weight: 850;
    line-height: 1.4;
}

.fund-steps-card li span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green-dark);
    font-weight: 950;
}

@media (max-width: 980px) {
    .fund-grid,
    .fund-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .fund-page {
        gap: 10px;
    }

    .fund-hero {
        padding: 18px;
    }

    .fund-hero > div {
        display: none;
    }

    .fund-hero h1 {
        font-size: 1.78rem;
    }

    .fund-method-grid {
        grid-template-columns: 1fr;
    }

    .fund-primary-card,
    .fund-form-card,
    .fund-steps-card {
        padding: 14px;
    }

    .fund-section-title {
        align-items: start;
        margin-bottom: 12px;
    }

    .fund-wallet-card {
        grid-template-columns: 1fr;
    }

    .fund-wallet-card button {
        width: 100%;
    }
}

/* Transactions page */
.transactions-page {
    gap: 14px;
}

.transactions-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 104, .18), transparent 34%),
        #102117;
    color: #ffffff;
    box-shadow: 0 18px 50px rgba(14, 32, 21, .14);
}

.transactions-hero span {
    color: var(--green);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.transactions-hero h1 {
    margin: 6px 0 0;
    color: #ffffff;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    letter-spacing: 0;
}

.transactions-deposit-link,
.transactions-filter-form button,
.transactions-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #07180d;
    cursor: pointer;
    font: inherit;
    font-weight: 950;
}

.transactions-deposit-link {
    padding: 0 16px;
}

.transactions-deposit-link svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.transactions-filter-card,
.transactions-search-card,
.transactions-card {
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
}

.transactions-filter-card {
    padding: 14px;
}

.transactions-search-card {
    padding: 14px;
}

.transactions-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.transactions-search-form label {
    position: relative;
    display: block;
    min-width: 0;
}

.transactions-search-form label svg {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--muted);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.transactions-search-form input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px 0 44px;
    border: 1px solid #d7e6dd;
    border-radius: 8px;
    background: #f9fcfa;
    color: #102117;
    font: inherit;
    font-weight: 850;
    outline: none;
}

.transactions-search-form input:focus {
    border-color: var(--green);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(73, 204, 104, .14);
}

.transactions-search-form button,
.transactions-search-form a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 8px;
    font-weight: 950;
}

.transactions-search-form button {
    border: 0;
    background: var(--green);
    color: #07180d;
    cursor: pointer;
}

.transactions-search-form a {
    border: 1px solid #d7e6dd;
    color: var(--muted);
    text-decoration: none;
}

.transactions-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 190px) minmax(150px, 190px) auto auto;
    gap: 10px;
    align-items: end;
}

.transactions-filter-form label {
    display: grid;
    gap: 7px;
    color: #102117;
    font-size: .78rem;
    font-weight: 950;
}

.transactions-filter-form input,
.transactions-filter-form select {
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #fbfdfb;
    color: var(--ink);
    font: inherit;
    font-weight: 800;
}

.transactions-filter-form button {
    padding: 0 16px;
}

.transactions-filter-form button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.transactions-filter-form > a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    color: #58655f;
    font-weight: 950;
}

.transactions-card {
    overflow: hidden;
}

.transactions-table-head,
.transactions-table button {
    display: grid;
    grid-template-columns: 170px minmax(230px, 1fr) 130px 140px 110px;
    gap: 14px;
    align-items: center;
}

.transactions-table-head {
    padding: 13px 16px;
    border-bottom: 1px solid #e4eee8;
    background: #f7fbf8;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.transactions-table {
    display: grid;
}

.transactions-table button {
    width: 100%;
    min-height: 74px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid #edf3ef;
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.transactions-table button:hover {
    background: #fbfdfb;
}

.transactions-type {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.transactions-type i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--green-soft);
    color: var(--green-dark);
}

.transactions-type svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.transactions-type b,
.transactions-reference b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #102117;
    font-weight: 950;
}

.transactions-reference {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.transactions-reference small,
.transactions-date {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 850;
}

.transactions-table strong {
    color: #102117;
    text-align: right;
}

.transactions-table em {
    justify-self: end;
    min-width: 92px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f3f8f5;
    color: #58655f;
    font-size: .72rem;
    font-style: normal;
    font-weight: 950;
    text-align: center;
}

.transactions-table em.transaction-status-pending {
    background: #fff8e8;
    color: #986b00;
}

.transactions-table em.transaction-status-successful {
    background: #eaffef;
    color: #0b7430;
}

.transactions-table em.transaction-status-failed {
    background: #fff0f0;
    color: #b42323;
}

.transactions-empty {
    padding: 34px 18px;
    text-align: center;
}

.transactions-empty strong {
    color: #102117;
    font-size: 1.1rem;
}

.transactions-empty p {
    margin: 8px auto 0;
    max-width: 420px;
    color: var(--muted);
    font-weight: 800;
    line-height: 1.55;
}

.transactions-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid #edf3ef;
    background: #fbfdfb;
}

.transactions-pagination a,
.transactions-pagination span {
    min-width: 96px;
    padding: 0 14px;
}

.transactions-pagination span {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    color: #9aa8a0;
    font-weight: 950;
}

.transactions-pagination strong {
    color: #102117;
    font-size: .88rem;
}

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

    .transactions-table-head {
        display: none;
    }

    .transactions-table button {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 9px 12px;
        align-items: start;
    }

    .transactions-type,
    .transactions-reference {
        grid-column: 1;
    }

    .transactions-date {
        grid-column: 1;
    }

    .transactions-table strong {
        grid-column: 2;
        grid-row: 1;
    }

    .transactions-table em {
        grid-column: 2;
        grid-row: 2;
    }
}

@media (max-width: 640px) {
    .transactions-hero {
        padding: 16px;
    }

    .transactions-deposit-link {
        min-width: 42px;
        width: 42px;
        padding: 0;
        font-size: 0;
    }

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

    .transactions-filter-form button,
    .transactions-filter-form > a {
        width: 100%;
    }

    .transactions-table button {
        padding: 13px;
    }

    .transactions-pagination {
        padding: 12px;
    }

    .transactions-pagination strong {
        font-size: .78rem;
        text-align: center;
    }
}

/* Transaction list alignment refresh */
.transactions-table button {
    grid-template-columns: 180px minmax(260px, 1fr) 130px 140px 112px;
    column-gap: 16px;
}

.transactions-date {
    text-align: left;
}

.transactions-amount {
    justify-self: end;
    min-width: 0;
}

.transactions-type,
.transactions-reference,
.transactions-date,
.transactions-amount {
    min-width: 0;
}

@media (max-width: 980px) {
    .transactions-card {
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .transactions-table {
        gap: 10px;
    }

    .transactions-table button {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        padding: 14px;
        border: 1px solid #dfe9e3;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
    }

    .transactions-type {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .transactions-table em {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: end;
    }

    .transactions-reference,
    .transactions-date,
    .transactions-amount {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 86px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        padding-top: 10px;
        border-top: 1px solid #edf3ef;
        text-align: right;
    }

    .transactions-reference::before,
    .transactions-date::before,
    .transactions-amount::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .7rem;
        font-weight: 950;
        letter-spacing: .06em;
        text-align: left;
        text-transform: uppercase;
    }

    .transactions-reference b,
    .transactions-reference small {
        grid-column: 2;
        justify-self: end;
        max-width: 100%;
        text-align: right;
    }

    .transactions-reference b {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .transactions-reference small {
        margin-top: -6px;
    }

    .transactions-date,
    .transactions-amount {
        justify-self: stretch;
    }
}

@media (max-width: 640px) {
    .transactions-page {
        gap: 10px;
    }

    .transactions-hero h1 {
        font-size: 1.45rem;
    }

    .transactions-filter-card {
        padding: 12px;
    }

    .transactions-search-card {
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 12px 28px rgba(20, 42, 27, .06);
    }

    .transactions-search-form {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .transactions-search-form input {
        min-height: 46px;
        border-radius: 999px;
        font-size: .88rem;
    }

    .transactions-search-form button,
    .transactions-search-form a {
        width: 100%;
        min-height: 44px;
        border-radius: 999px;
    }

    .transactions-type i {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .transactions-type b {
        font-size: .94rem;
    }

    .transactions-table em {
        min-width: 82px;
        padding: 6px 9px;
        font-size: .68rem;
    }

    .transactions-reference,
    .transactions-date,
    .transactions-amount {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 10px;
        font-size: .86rem;
    }

    .transactions-pagination {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .transactions-pagination strong {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}

/* Mobile transactions filter and row polish */
@media (max-width: 640px) {
    .transactions-filter-card {
        border-color: #dce8e1;
        background: linear-gradient(180deg, #ffffff, #f9fcfa);
        box-shadow: 0 12px 32px rgba(20, 42, 27, .06);
    }

    .transactions-filter-form {
        gap: 9px;
    }

    .transactions-filter-form label {
        gap: 6px;
        font-size: .7rem;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .transactions-filter-form input,
    .transactions-filter-form select {
        min-height: 44px;
        border-radius: 999px;
        background: #ffffff;
        font-size: .88rem;
    }

    .transactions-filter-form button,
    .transactions-filter-form > a {
        min-height: 42px;
        border-radius: 999px;
    }

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

    .transactions-filter-form label:first-child {
        grid-column: 1 / -1;
    }

    .transactions-filter-form button {
        grid-column: 1;
    }

    .transactions-filter-form > a {
        grid-column: 2;
        background: #ffffff;
    }

    .transactions-table button {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 14px;
    }

    .transactions-table .transactions-reference,
    .transactions-table .transactions-date,
    .transactions-table .transactions-amount {
        grid-column: 1 / -1;
        grid-row: auto;
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        align-items: center;
        justify-self: stretch;
        width: 100%;
        padding-top: 10px;
        border-top: 1px solid #edf3ef;
        text-align: right;
    }

    .transactions-table .transactions-amount {
        color: #102117;
        font-size: 1rem;
        font-weight: 950;
    }

    .transactions-table .transactions-amount::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .7rem;
        font-weight: 950;
        letter-spacing: .06em;
        text-align: left;
        text-transform: uppercase;
    }
}

/* Mobile search-only transactions controls */
@media (max-width: 640px) {
    .transactions-filter-form {
        grid-template-columns: minmax(0, 1fr) 46px;
        gap: 8px;
        align-items: end;
    }

    .transactions-filter-form label:first-child {
        grid-column: 1;
    }

    .transactions-filter-form label:not(:first-child),
    .transactions-filter-form > a {
        display: none;
    }

    .transactions-filter-form button {
        grid-column: 2;
        width: 46px;
        min-height: 44px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
    }

    .transactions-filter-form button svg {
        width: 19px;
        height: 19px;
    }
}

/* Reusable client pages */
.client-page-main {
    gap: 14px;
}

.client-page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 104, .2), transparent 34%),
        linear-gradient(135deg, #102117, #193623);
    color: #ffffff;
    box-shadow: 0 18px 50px rgba(14, 32, 21, .14);
}

.client-page-hero span,
.client-page-note > span {
    color: var(--green);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.client-page-hero h1 {
    margin: 6px 0 0;
    color: #ffffff;
    font-size: clamp(1.85rem, 3vw, 3rem);
    letter-spacing: 0;
}

.client-page-hero p {
    max-width: 640px;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .74);
    font-weight: 800;
    line-height: 1.6;
}

.client-page-hero > a,
.client-page-note a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 8px;
    background: var(--green);
    color: #07180d;
    font-weight: 950;
}

.client-page-hero svg,
.client-page-list svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.client-page-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.client-page-stats article,
.client-page-panel {
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
}

.client-page-stats article {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.client-page-stats span {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.client-page-stats strong {
    overflow-wrap: anywhere;
    color: #102117;
    font-size: clamp(1.1rem, 2vw, 1.55rem);
}

.client-page-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 14px;
    align-items: start;
}

.client-page-panel {
    padding: 18px;
}

.client-page-list {
    display: grid;
    gap: 10px;
}

.client-page-list button {
    min-height: 62px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.client-page-list i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--green-soft);
    color: var(--green-dark);
    font-style: normal;
    font-weight: 950;
}

.client-page-list span {
    color: #102117;
    font-weight: 950;
}

.client-page-note {
    display: grid;
    gap: 10px;
}

.client-page-note h2 {
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: 0;
}

.client-page-note p {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
    line-height: 1.6;
}

.client-page-note a {
    margin-top: 4px;
    background: #102117;
    color: #ffffff;
}

@media (max-width: 980px) {
    .client-page-hero,
    .client-page-content {
        grid-template-columns: 1fr;
    }

    .client-page-hero > a {
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .client-page-hero {
        padding: 18px;
    }

    .client-page-hero h1 {
        font-size: 1.75rem;
    }

    .client-page-hero p {
        font-size: .9rem;
    }

    .client-page-stats {
        grid-template-columns: 1fr;
    }

    .client-page-panel {
        padding: 14px;
    }
}

/* Investment plan pages */
.investment-page,
.investment-detail-page {
    gap: 14px;
}

.investment-hero,
.investment-detail-hero {
    display: grid;
    gap: 16px;
    padding: 24px;
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 104, .2), transparent 34%),
        linear-gradient(135deg, #102117, #193623);
    color: #ffffff;
    box-shadow: 0 18px 50px rgba(14, 32, 21, .14);
}

.investment-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: center;
}

.investment-hero span,
.investment-detail-hero span,
.investment-plan-grid article > div > span {
    color: var(--green);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.investment-hero h1,
.investment-detail-hero h1 {
    margin: 8px 0;
    color: #ffffff;
    font-size: clamp(1.9rem, 3vw, 3rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.investment-hero p,
.investment-detail-hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, .75);
    font-weight: 800;
    line-height: 1.6;
}

.investment-hero aside {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
}

.investment-hero aside strong {
    color: #ffffff;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.investment-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.investment-plan-grid article,
.investment-detail-card {
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
}

.investment-plan-grid article {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.investment-plan-grid img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    object-fit: cover;
    background: #f3f8f5;
}

.investment-plan-grid h2 {
    margin: 5px 0 6px;
    font-size: 1.2rem;
    letter-spacing: 0;
}

.investment-plan-grid p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.55;
}

.investment-plan-grid dl,
.investment-detail-stats {
    display: grid;
    gap: 9px;
    margin: 0;
}

.investment-plan-grid dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.investment-plan-grid dl div,
.investment-detail-stats div {
    padding: 10px;
    border: 1px solid #e7f0ea;
    border-radius: 8px;
    background: #fbfdfb;
}

.investment-plan-grid dt,
.investment-detail-stats dt {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.investment-plan-grid dd,
.investment-detail-stats dd {
    margin: 4px 0 0;
    color: #102117;
    font-size: .88rem;
    font-weight: 950;
}

.investment-plan-grid article > a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #102117;
    color: #ffffff;
    font-weight: 950;
}

.investment-empty {
    grid-column: 1 / -1;
}

.investment-detail-hero {
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
    align-items: center;
}

.investment-detail-hero img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    object-fit: cover;
}

.investment-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    gap: 14px;
    align-items: start;
}

.investment-detail-card {
    padding: 18px;
}

.investment-detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.investment-form-card .fund-form {
    margin-top: 2px;
}

.investment-input-help {
    color: var(--muted);
    font-size: .78rem;
    font-style: normal;
    font-weight: 850;
    line-height: 1.4;
}

@media (max-width: 1100px) {
    .investment-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .investment-hero,
    .investment-detail-hero,
    .investment-detail-grid {
        grid-template-columns: 1fr;
    }

    .investment-plan-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .investment-hero,
    .investment-detail-hero {
        padding: 18px;
    }

    .investment-hero h1,
    .investment-detail-hero h1 {
        font-size: 1.75rem;
    }

    .investment-plan-grid dl,
    .investment-detail-stats {
        grid-template-columns: 1fr;
    }

    .investment-detail-card {
        padding: 14px;
    }
}

/* Investment ROI redesign */
.client-strategy-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-strategy-meta div {
    min-width: 0;
}

.client-strategy-meta b {
    display: block;
    overflow-wrap: anywhere;
    font-size: .86rem;
    line-height: 1.25;
}

.client-strategy-meta .strategy-period {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.client-strategy-meta .strategy-period b {
    text-align: right;
}

.strategy-card-top strong {
    min-width: 88px;
    text-align: center;
}

.investment-plan-grid dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.investment-detail-grid-redesign {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
}

.investment-plan-overview {
    display: grid;
    gap: 16px;
}

.investment-plan-description {
    margin: 0;
    padding: 16px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #fbfdfb);
    color: #33443b;
    font-weight: 800;
    line-height: 1.7;
}

.investment-form-card {
    position: sticky;
    top: 76px;
}

.investment-roi-preview {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
    padding: 18px;
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 104, .2), transparent 36%),
        #102117;
    color: #ffffff;
}

.investment-roi-preview span {
    color: var(--green);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.investment-roi-preview strong {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.investment-roi-preview small {
    color: rgba(255, 255, 255, .7);
    font-weight: 800;
}

.investment-detail-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.investment-detail-stats div {
    padding: 14px;
}

.investment-detail-stats dd {
    overflow-wrap: anywhere;
    font-size: 1rem;
}

@media (max-width: 980px) {
    .investment-detail-grid-redesign {
        grid-template-columns: 1fr;
    }

    .investment-form-card {
        position: static;
    }

    .investment-detail-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .client-strategy-meta,
    .investment-plan-grid dl,
    .investment-detail-stats {
        grid-template-columns: 1fr;
    }

    .strategy-card-top {
        gap: 10px;
    }

    .strategy-card-top strong {
        min-width: 76px;
        font-size: .78rem;
    }

    .investment-plan-description,
    .investment-roi-preview {
        padding: 14px;
    }

    .investment-roi-preview strong {
        font-size: 2rem;
    }
}

/* Modern investment list redesign */
.investment-page {
    gap: 16px;
}

.investment-page .investment-hero {
    min-height: 230px;
    padding: 28px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .2), rgba(73, 204, 104, 0) 38%),
        linear-gradient(145deg, #101f17, #183925);
}

.investment-page .investment-hero aside {
    align-self: stretch;
    align-content: center;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(12px);
}

.investment-page .investment-hero aside small {
    color: rgba(255, 255, 255, .68);
    font-weight: 850;
}

.investment-page .investment-plan-grid {
    counter-reset: investment-plan;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    align-items: stretch;
}

.investment-page .investment-plan-grid article {
    counter-increment: investment-plan;
    position: relative;
    overflow: hidden;
    gap: 16px;
    padding: 18px;
    border-color: #dbe8e0;
    background:
        linear-gradient(145deg, rgba(73, 204, 104, .12), rgba(73, 204, 104, 0) 34%),
        linear-gradient(180deg, #ffffff, #fbfdfb);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.investment-page .investment-plan-grid article::before {
    content: counter(investment-plan, decimal-leading-zero);
    position: absolute;
    top: 18px;
    right: 18px;
    color: rgba(16, 33, 23, .08);
    font-size: 3.2rem;
    font-weight: 950;
    line-height: 1;
}

.investment-page .investment-plan-grid article:hover {
    transform: translateY(-3px);
    border-color: #bde3c8;
    box-shadow: 0 18px 42px rgba(20, 42, 27, .1);
}

.investment-page .investment-plan-grid article > div,
.investment-page .investment-plan-grid dl,
.investment-page .investment-plan-grid article > a {
    position: relative;
    z-index: 1;
}

.investment-page .investment-plan-grid article > div {
    display: grid;
    gap: 10px;
    padding-right: 58px;
}

.investment-page .investment-plan-grid article > div > span {
    width: max-content;
    max-width: 100%;
    padding: 8px 11px;
    border-radius: 999px;
    background: #eaffef;
    color: #0b7430;
    font-size: .68rem;
}

.investment-page .investment-plan-grid h2 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.16;
}

.investment-page .investment-plan-grid p {
    display: -webkit-box;
    min-height: 4.3em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.investment-page .investment-plan-grid dl {
    gap: 8px;
}

.investment-page .investment-plan-grid dl div {
    min-width: 0;
    padding: 12px;
    background: #f7fbf8;
}

.investment-page .investment-plan-grid dd {
    overflow-wrap: anywhere;
}

.investment-page .investment-plan-grid article > a {
    gap: 8px;
    margin-top: auto;
    background: #102117;
    box-shadow: 0 12px 24px rgba(16, 33, 23, .14);
}

.investment-page .investment-plan-grid article > a svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1180px) {
    .investment-page .investment-plan-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width: 760px) {
    .investment-page .investment-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 20px;
    }

    .investment-page .investment-plan-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .investment-page .investment-hero h1 {
        font-size: 1.85rem;
        line-height: 1.12;
    }

    .investment-page .investment-hero p {
        font-size: .92rem;
    }

    .investment-page .investment-hero aside strong {
        font-size: 2rem;
    }

    .investment-page .investment-plan-grid article > div,
    .investment-page .investment-plan-grid dl,
    .investment-page .investment-plan-grid article > a {
        margin-left: 0;
        margin-right: 0;
    }

    .investment-page .investment-plan-grid p {
        min-height: 0;
        -webkit-line-clamp: 4;
    }

    .investment-page .investment-plan-grid article {
        padding: 15px;
    }

    .investment-page .investment-plan-grid article::before {
        top: 15px;
        right: 15px;
        font-size: 2.5rem;
    }
}

/* Smart investment detail redesign */
.investment-detail-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
    gap: 14px;
    align-items: start;
}

.smart-plan-card,
.smart-invest-card {
    border: 1px solid #dbe8e1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 38px rgba(20, 42, 27, .07);
}

.smart-plan-card {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.smart-plan-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8f0eb;
}

.smart-plan-heading span,
.smart-invest-heading span {
    color: var(--green-dark);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.smart-plan-heading h1 {
    margin: 6px 0 0;
    color: #102117;
    font-size: clamp(1.65rem, 3vw, 2.65rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.smart-plan-heading > strong {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 58px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #102117;
    color: var(--green);
    font-size: 1.2rem;
    font-weight: 950;
}

.smart-plan-card .investment-plan-description {
    padding: 0;
    border: 0;
    background: transparent;
    color: #33443b;
    font-size: .96rem;
}

.smart-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.smart-stat-grid div {
    min-height: 86px;
    display: grid;
    align-content: center;
    border-color: #e2ede6;
    background: #f8fcf9;
}

.smart-stat-grid dd {
    font-size: 1.02rem;
}

.smart-plan-timeline {
    display: grid;
    grid-template-columns: auto minmax(26px, 1fr) auto minmax(26px, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e2ede6;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fcf9);
}

.smart-plan-timeline span {
    color: #33443b;
    font-size: .8rem;
    font-weight: 950;
    white-space: nowrap;
}

.smart-plan-timeline i {
    height: 2px;
    border-radius: 999px;
    background: #bde3c8;
}

.smart-invest-card {
    position: sticky;
    top: 76px;
    display: grid;
    gap: 14px;
    padding: 18px;
}

.smart-invest-heading {
    display: grid;
    gap: 4px;
}

.smart-invest-heading h2 {
    margin: 0;
    color: #102117;
    font-size: 1.25rem;
    letter-spacing: 0;
}

.smart-invest-card .investment-roi-preview {
    margin-bottom: 0;
    padding: 20px;
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .2), rgba(73, 204, 104, 0) 42%),
        #102117;
}

.smart-invest-card .fund-form {
    padding-top: 2px;
}

.smart-invest-card .fund-form input {
    min-height: 52px;
    font-size: 1rem;
}

.smart-invest-card .fund-form button {
    min-height: 52px;
}

.smart-invest-card .fund-form button:disabled {
    background: #cbd8d0;
    color: #627168;
}

@media (max-width: 980px) {
    .investment-detail-shell {
        grid-template-columns: 1fr;
    }

    .smart-invest-card {
        position: static;
    }
}

@media (max-width: 640px) {
    .investment-detail-shell {
        gap: 10px;
    }

    .smart-plan-card,
    .smart-invest-card {
        padding: 14px;
    }

    .smart-plan-heading {
        display: grid;
        gap: 12px;
    }

    .smart-plan-heading > strong {
        justify-self: start;
        min-height: 44px;
        min-width: 82px;
        font-size: 1rem;
    }

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

    .smart-plan-timeline {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .smart-plan-timeline i {
        width: 2px;
        height: 18px;
        margin-left: 8px;
    }

    .smart-invest-card .investment-roi-preview {
        padding: 16px;
    }
}

@media (max-width: 420px) {
    .smart-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* Portfolio pages */
.portfolio-page {
    gap: 14px;
}

.portfolio-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 104, .18), transparent 34%),
        #102117;
    color: #ffffff;
    box-shadow: 0 18px 50px rgba(14, 32, 21, .14);
}

.portfolio-hero span,
.portfolio-section-head span,
.portfolio-status-card > span {
    color: var(--green);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.portfolio-hero h1 {
    margin: 6px 0 0;
    color: #ffffff;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    letter-spacing: 0;
}

.portfolio-hero a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-radius: 8px;
    background: var(--green);
    color: #07180d;
    font-weight: 950;
}

.portfolio-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.portfolio-metrics article,
.portfolio-card {
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
}

.portfolio-metrics article {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.portfolio-metrics span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.portfolio-metrics strong {
    overflow-wrap: anywhere;
    color: #102117;
    font-size: clamp(1.1rem, 2vw, 1.55rem);
}

.portfolio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 14px;
    align-items: stretch;
}

.portfolio-card {
    padding: 18px;
}

.portfolio-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.portfolio-section-head h2 {
    margin: 4px 0 0;
    color: #102117;
    font-size: 1.2rem;
    letter-spacing: 0;
}

.portfolio-chart {
    width: 100%;
    height: 220px;
    border-radius: 8px;
    background:
        linear-gradient(#edf3ef 1px, transparent 1px) 0 0 / 100% 25%,
        linear-gradient(90deg, #edf3ef 1px, transparent 1px) 0 0 / 12.5% 100%,
        #fbfdfb;
}

.portfolio-chart path {
    fill: none;
    stroke: #d8e6dd;
    stroke-width: 1;
}

.portfolio-chart polyline {
    fill: none;
    stroke: var(--green-dark);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.portfolio-chart-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 850;
}

.portfolio-status-card {
    display: grid;
    align-content: center;
    gap: 10px;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 104, .16), transparent 36%),
        #ffffff;
}

.portfolio-status-card strong {
    color: #102117;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.portfolio-status-card p {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
    line-height: 1.55;
}

.portfolio-plan-list {
    display: grid;
    gap: 10px;
}

.portfolio-plan-list a {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 150px 150px 110px;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
    color: var(--ink);
}

.portfolio-plan-list a:hover {
    border-color: #bde3c8;
    background: #f2fbf5;
}

.portfolio-plan-list span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.portfolio-plan-list b {
    overflow-wrap: anywhere;
    color: #102117;
    font-weight: 950;
}

.portfolio-plan-list small {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 850;
}

.portfolio-empty {
    padding: 20px;
    border: 1px dashed #cfe0d6;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 850;
    text-align: center;
}

.portfolio-detail-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.portfolio-detail-list div {
    padding: 13px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
}

.portfolio-detail-list dt {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.portfolio-detail-list dd {
    margin: 5px 0 0;
    overflow-wrap: anywhere;
    color: #102117;
    font-weight: 950;
}

@media (max-width: 980px) {
    .portfolio-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio-layout {
        grid-template-columns: 1fr;
    }

    .portfolio-plan-list a {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 640px) {
    .portfolio-page {
        gap: 10px;
    }

    .portfolio-hero {
        align-items: flex-start;
        padding: 16px;
    }

    .portfolio-hero h1 {
        font-size: 1.45rem;
    }

    .portfolio-hero a {
        min-height: 38px;
        padding: 0 12px;
        font-size: .8rem;
        white-space: nowrap;
    }

    .portfolio-metrics,
    .portfolio-plan-list a,
    .portfolio-detail-list {
        grid-template-columns: 1fr;
    }

    .portfolio-card {
        padding: 14px;
    }

    .portfolio-chart {
        height: 170px;
    }

    .portfolio-plan-list a {
        gap: 10px;
    }

    .portfolio-plan-list a span:not(:first-child) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 9px;
        border-top: 1px solid #e3eee7;
    }

    .smart-invest-card {
        order: -1;
    }

    .smart-invest-heading h2 {
        font-size: 1.1rem;
    }

    .smart-invest-card .fund-form input {
        min-height: 48px;
    }
}

.client-user-strip em.is-under-review {
    border: 1px solid #f0cf82;
    background: #fff8e7;
    color: #946200;
}

.kyc-page {
    gap: 14px;
}

.kyc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px;
    align-items: stretch;
    padding: 22px;
    border: 1px solid #dce9e1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(18, 35, 24, .08);
}

.kyc-hero span,
.kyc-form-head span,
.kyc-side-card > span {
    color: var(--green-dark);
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.kyc-hero h1,
.kyc-form-head h2 {
    margin: 6px 0 0;
    color: #102117;
    letter-spacing: 0;
}

.kyc-hero h1 {
    font-size: clamp(1.7rem, 3vw, 2.55rem);
}

.kyc-hero p,
.kyc-form-head p,
.kyc-side-card small {
    margin: 8px 0 0;
    color: var(--muted);
    font-weight: 750;
    line-height: 1.55;
}

.kyc-hero aside {
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 18px;
    border: 1px solid #e4eee8;
    border-radius: 8px;
    background: #f8fbf8;
}

.kyc-hero aside small {
    color: var(--muted);
    font-weight: 900;
}

.kyc-hero aside strong {
    width: fit-content;
    padding: 8px 11px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.kyc-hero aside strong.is-unverified {
    background: #fff0f0;
    color: #b42323;
}

.kyc-hero aside strong.is-under-review {
    background: #fff8e7;
    color: #946200;
}

.kyc-hero aside strong.is-verified {
    background: #f0fbf4;
    color: var(--green-dark);
}

.kyc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
    align-items: start;
}

.kyc-form-card,
.kyc-side-card {
    border: 1px solid #dce9e1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(18, 35, 24, .08);
}

.kyc-form-card {
    padding: 22px;
}

.kyc-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.kyc-form-head p {
    max-width: 340px;
    text-align: right;
}

.kyc-document-head {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #e3eee7;
}

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

.kyc-field,
.kyc-file-field {
    display: grid;
    gap: 8px;
    min-width: 0;
    color: #17261d;
    font-size: .84rem;
    font-weight: 950;
}

.kyc-field-wide {
    grid-column: 1 / -1;
}

.kyc-field input,
.kyc-field select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #cfe0d6;
    border-radius: 8px;
    background: #fbfdfb;
    color: #102117;
    font: inherit;
    font-weight: 800;
    outline: none;
}

.kyc-field input:focus,
.kyc-field select:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(73, 204, 104, .14);
}

.kyc-field small,
.kyc-file-field small,
.kyc-form-errors {
    color: #b42323;
    font-size: .78rem;
    font-weight: 850;
}

.kyc-form-errors {
    margin-bottom: 14px;
    padding: 12px 13px;
    border: 1px solid #f4aaaa;
    border-radius: 8px;
    background: #fff0f0;
}

.kyc-field.has-error input,
.kyc-field.has-error select,
.kyc-file-field.has-error {
    border-color: #d33b3b;
    background: #fffafa;
}

.kyc-document-grid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
}

.kyc-file-field {
    min-height: 126px;
    align-content: center;
    padding: 16px;
    border: 1px dashed #b8d0c0;
    border-radius: 8px;
    background: #f8fbf8;
}

.kyc-file-field input {
    width: 100%;
    color: #33453a;
    font-size: .82rem;
    font-weight: 800;
}

.kyc-file-field span {
    color: #102117;
    font-size: .86rem;
    font-weight: 950;
}

.kyc-file-field small {
    color: var(--muted);
}

.kyc-file-field.has-error small {
    color: #b42323;
}

.kyc-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    margin-top: 22px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #07180d;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(73, 204, 104, .22);
}

.kyc-submit svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kyc-side-card {
    position: sticky;
    top: 94px;
    padding: 18px;
}

.kyc-side-card ul {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.kyc-side-card li {
    padding: 13px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
}

.kyc-side-card b {
    display: block;
    color: #102117;
    font-size: .9rem;
    font-weight: 950;
}

@media (max-width: 980px) {
    .kyc-hero,
    .kyc-layout {
        grid-template-columns: 1fr;
    }

    .kyc-side-card {
        position: static;
    }
}

@media (max-width: 640px) {
    .kyc-page {
        gap: 10px;
    }

    .kyc-hero {
        padding: 16px;
    }

    .kyc-hero p {
        font-size: .9rem;
    }

    .kyc-form-card,
    .kyc-side-card {
        padding: 14px;
    }

    .kyc-form-head {
        display: grid;
        gap: 6px;
        margin-bottom: 14px;
    }

    .kyc-form-head p {
        max-width: none;
        text-align: left;
    }

    .kyc-grid,
    .kyc-document-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kyc-field-wide {
        grid-column: auto;
    }

    .kyc-submit {
        width: 100%;
    }
}

/* KYC page refresh */
.client-main.kyc-page {
    display: grid;
    gap: 16px;
    padding-bottom: 90px;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 104, .13), transparent 30%),
        linear-gradient(180deg, #f7fbf8 0%, #edf5ef 100%);
}

.kyc-page .client-topbar {
    border: 1px solid rgba(207, 224, 214, .9);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
}

.kyc-hero {
    position: relative;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 18px;
    padding: 26px;
    border: 1px solid #d8e7de;
    background:
        linear-gradient(135deg, rgba(16, 33, 23, .98), rgba(22, 53, 35, .94)),
        #102117;
    box-shadow: 0 22px 60px rgba(13, 37, 22, .18);
}

.kyc-hero::after {
    content: "";
    position: absolute;
    inset: auto -80px -120px auto;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(73, 204, 104, .32);
    border-radius: 50%;
    pointer-events: none;
}

.kyc-hero > div,
.kyc-hero aside {
    position: relative;
    z-index: 1;
}

.kyc-hero span {
    color: var(--green);
}

.kyc-hero h1 {
    max-width: 680px;
    color: #ffffff;
    font-size: clamp(1.85rem, 4vw, 3.1rem);
    line-height: 1.02;
}

.kyc-hero p {
    max-width: 620px;
    color: rgba(255, 255, 255, .76);
    font-size: .98rem;
}

.kyc-hero aside {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.kyc-hero aside small,
.kyc-hero aside p {
    color: rgba(255, 255, 255, .7);
}

.kyc-hero aside strong {
    border: 1px solid rgba(255, 255, 255, .18);
}

.kyc-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
}

.kyc-form-card,
.kyc-side-card {
    border: 1px solid #d8e7de;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 55px rgba(23, 45, 30, .1);
}

.kyc-form-card {
    padding: 0;
    overflow: hidden;
}

.kyc-form-head {
    margin: 0;
    padding: 22px 24px;
    border-bottom: 1px solid #e4eee8;
    background:
        linear-gradient(90deg, rgba(73, 204, 104, .1), transparent 42%),
        #ffffff;
}

.kyc-form-head h2 {
    font-size: 1.18rem;
}

.kyc-form-head p {
    max-width: 360px;
    margin-top: 0;
    color: #66776b;
    font-size: .86rem;
}

.kyc-form-card > .kyc-grid {
    padding: 22px 24px 24px;
}

.kyc-document-head {
    margin-top: 0;
    padding-top: 22px;
    border-top: 1px solid #e4eee8;
}

.kyc-document-grid {
    padding-top: 22px;
}

.kyc-field,
.kyc-file-field {
    color: #203427;
    font-size: .78rem;
    letter-spacing: .01em;
}

.kyc-field input,
.kyc-field select {
    min-height: 52px;
    border-color: #d7e6dd;
    background: #f9fcfa;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.kyc-field input:hover,
.kyc-field select:hover {
    border-color: #a8cdb4;
    background: #ffffff;
}

.kyc-field input:focus,
.kyc-field select:focus {
    background: #ffffff;
}

.kyc-file-field {
    min-height: 148px;
    border-color: #b8d8c2;
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .1), rgba(255, 255, 255, 0) 55%),
        #f8fcf9;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.kyc-file-field:hover {
    transform: translateY(-1px);
    border-color: var(--green);
    background: #ffffff;
}

.kyc-submit {
    margin: 0 24px 24px;
    min-height: 52px;
    padding: 0 22px;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.kyc-submit:hover {
    transform: translateY(-1px);
    background: #5ee078;
    box-shadow: 0 18px 30px rgba(73, 204, 104, .28);
}

.kyc-side-card {
    top: 106px;
    padding: 20px;
}

.kyc-side-card ul {
    gap: 14px;
}

.kyc-side-card li {
    position: relative;
    padding: 16px 16px 16px 46px;
    border-color: #dce9e1;
    background: #ffffff;
}

.kyc-side-card li::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 17px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(73, 204, 104, .14);
}

.kyc-side-card li::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 21px;
    width: 5px;
    height: 9px;
    border: solid #07180d;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@media (max-width: 980px) {
    .kyc-hero,
    .kyc-layout {
        grid-template-columns: 1fr;
    }

    .kyc-side-card {
        position: static;
    }
}

@media (max-width: 640px) {
    .client-main.kyc-page {
        gap: 12px;
        padding-bottom: 86px;
    }

    .kyc-hero {
        gap: 14px;
        padding: 18px;
    }

    .kyc-hero h1 {
        font-size: 1.75rem;
    }

    .kyc-hero aside {
        padding: 14px;
    }

    .kyc-form-head {
        padding: 18px 16px;
    }

    .kyc-form-card > .kyc-grid {
        padding: 16px;
    }

    .kyc-field input,
    .kyc-field select {
        min-height: 50px;
    }

    .kyc-file-field {
        min-height: 132px;
    }

    .kyc-submit {
        width: calc(100% - 32px);
        margin: 0 16px 18px;
    }

    .kyc-side-card {
        padding: 16px;
    }
}

/* Dashboard KYC status badges */
.client-user-strip em.is-under-review {
    border: 1px solid #f0c86f;
    background: #fff4d8;
    color: #8a5a00;
    box-shadow: 0 0 0 4px rgba(240, 200, 111, .18);
}

.client-user-strip em.is-verified {
    border: 1px solid #a9dfb9;
    background: #eaf9ef;
    color: #0f6b32;
    box-shadow: 0 0 0 4px rgba(73, 204, 104, .14);
}

.client-user-strip em.is-unverified {
    border: 1px solid #f4aaaa;
    background: #fff0f0;
    color: #b42323;
}

/* Dashboard quick action and transaction refresh */
@media (min-width: 981px) {
    .client-action-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .client-action-row a {
        position: relative;
        min-height: 118px;
        overflow: hidden;
        grid-template-columns: 52px minmax(0, 1fr);
        padding: 20px;
        border-color: #d7e6dd;
        background:
            radial-gradient(circle at 92% 8%, rgba(73, 204, 104, .18), transparent 30%),
            linear-gradient(180deg, #ffffff, #fbfdfb),
            #ffffff;
        box-shadow: 0 18px 46px rgba(20, 42, 27, .07);
    }

    .client-action-row a::after {
        content: "";
        position: absolute;
        right: 18px;
        bottom: 18px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background:
            linear-gradient(135deg, transparent 45%, #102117 46% 54%, transparent 55%) center / 12px 12px no-repeat,
            #eef8f1;
    }

    .client-action-row a svg {
        position: static;
        width: 52px;
        height: 52px;
        padding: 13px;
        border-radius: 8px;
        background: #102117;
        color: var(--green);
    }

    .client-action-row a:nth-child(2) svg {
        background: #122338;
        color: #7bd2ff;
    }

    .client-action-row a:nth-child(3) svg {
        background: #2a1d08;
        color: #f1b84b;
    }

    .client-action-row a:hover {
        transform: translateY(-2px);
        border-color: var(--green);
        box-shadow: 0 24px 54px rgba(73, 204, 104, .14);
    }

    .client-action-row span {
        font-size: 1.02rem;
    }

    .client-action-row strong {
        margin-top: 5px;
        max-width: 180px;
        line-height: 1.35;
    }
}

.client-transactions-empty {
    padding: 18px;
    border: 1px dashed #cfe0d6;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 850;
    text-align: center;
}

/* Withdrawal page */
.client-main.withdraw-page {
    display: grid;
    gap: 16px;
    padding-bottom: 90px;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 104, .14), transparent 28%),
        linear-gradient(180deg, #f7fbf8 0%, #eef6f0 100%);
}

.withdraw-page .client-topbar {
    border: 1px solid rgba(207, 224, 214, .9);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
}

.withdraw-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 16px;
    align-items: stretch;
    overflow: hidden;
    padding: 26px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(16, 33, 23, .98), rgba(21, 52, 34, .95)),
        #102117;
    box-shadow: 0 22px 60px rgba(13, 37, 22, .18);
}

.withdraw-hero span,
.withdraw-card-head span,
.withdraw-status-card > span {
    color: var(--green);
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.withdraw-hero h1 {
    margin: 6px 0 0;
    max-width: 640px;
    color: #ffffff;
    font-size: clamp(1.85rem, 4vw, 3.05rem);
    line-height: 1.03;
    letter-spacing: 0;
}

.withdraw-hero p {
    max-width: 590px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .74);
    font-weight: 760;
    line-height: 1.58;
}

.withdraw-hero aside {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
}

.withdraw-hero aside small {
    color: rgba(255, 255, 255, .7);
    font-weight: 900;
}

.withdraw-hero aside strong {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 950;
}

.withdraw-hero aside a {
    width: fit-content;
    color: var(--green);
    font-size: .86rem;
    font-weight: 950;
    text-decoration: none;
}

.withdraw-layout {
    display: grid;
    grid-template-columns: minmax(0, 980px);
    gap: 16px;
    align-items: start;
    justify-content: center;
}

.withdraw-card {
    border: 1px solid #d8e7de;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 55px rgba(23, 45, 30, .1);
}

.withdraw-form-card {
    overflow: hidden;
}

.withdraw-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid #e4eee8;
    background:
        linear-gradient(90deg, rgba(73, 204, 104, .1), transparent 42%),
        #ffffff;
}

.withdraw-card-head h2,
.withdraw-status-card h2 {
    margin: 6px 0 0;
    color: #102117;
    font-size: 1.18rem;
    letter-spacing: 0;
}

.withdraw-card-head small {
    max-width: 300px;
    color: #66776b;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.45;
    text-align: right;
}

.withdraw-method-grid,
.withdraw-form-grid {
    display: grid;
    gap: 14px;
    padding: 22px 24px 0;
}

.withdraw-method-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.withdraw-method-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 14px;
    border: 1px solid #d7e6dd;
    border-radius: 8px;
    background: #f9fcfa;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.withdraw-method-card:hover,
.withdraw-method-card.is-selected {
    transform: translateY(-1px);
    border-color: var(--green);
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(24, 50, 32, .1);
}

.withdraw-method-card.is-selected {
    border-width: 2px;
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .16), rgba(255, 255, 255, 0) 58%),
        #ffffff;
    box-shadow: 0 18px 40px rgba(73, 204, 104, .2);
}

.withdraw-method-card input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.withdraw-method-card i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #102117;
    color: var(--green);
    font-style: normal;
    font-weight: 950;
}

.withdraw-method-card.is-selected i {
    background: var(--green);
    color: #07180d;
}

.withdraw-method-card span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.withdraw-method-card b {
    overflow-wrap: anywhere;
    color: #102117;
    font-size: .92rem;
    font-weight: 950;
}

.withdraw-method-card small {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 800;
}

.withdraw-method-card em {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    padding: 5px 8px;
    border-radius: 999px;
    background: #102117;
    color: var(--green);
    font-size: .64rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.withdraw-method-card.is-selected em {
    display: inline-flex;
}

.withdraw-empty-method {
    grid-column: 1 / -1;
    padding: 16px;
    border: 1px dashed #b8d0c0;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 850;
    text-align: center;
}

.withdraw-form-grid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    padding-bottom: 22px;
}

.withdraw-form-grid label {
    display: grid;
    gap: 8px;
    min-width: 0;
    color: #203427;
    font-size: .78rem;
    font-weight: 950;
}

.withdraw-form-grid input,
.withdraw-form-grid textarea {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid #d7e6dd;
    border-radius: 8px;
    background: #f9fcfa;
    color: #102117;
    font: inherit;
    font-weight: 800;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.withdraw-form-grid textarea {
    min-height: 104px;
    padding-top: 13px;
    resize: vertical;
}

.withdraw-form-grid input:hover,
.withdraw-form-grid textarea:hover,
.withdraw-form-grid input:focus,
.withdraw-form-grid textarea:focus {
    border-color: var(--green);
    background: #ffffff;
}

.withdraw-form-grid input:focus,
.withdraw-form-grid textarea:focus {
    box-shadow: 0 0 0 4px rgba(73, 204, 104, .14);
}

.withdraw-note {
    grid-column: 1 / -1;
}

.withdraw-errors,
.withdraw-field-error,
.withdraw-form-grid label small {
    color: #b42323;
    font-size: .78rem;
    font-weight: 850;
}

.withdraw-errors {
    margin: 18px 24px 0;
    padding: 12px 13px;
    border: 1px solid #f4aaaa;
    border-radius: 8px;
    background: #fff0f0;
}

.withdraw-field-error {
    display: block;
    margin: 10px 24px 0;
}

.withdraw-form-grid label.has-error input,
.withdraw-form-grid label.has-error textarea {
    border-color: #d33b3b;
    background: #fffafa;
}

.withdraw-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    margin: 0 24px 24px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #07180d;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(73, 204, 104, .22);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.withdraw-submit:hover {
    transform: translateY(-1px);
    background: #5ee078;
    box-shadow: 0 18px 30px rgba(73, 204, 104, .28);
}

.withdraw-submit:disabled {
    opacity: .58;
    cursor: not-allowed;
}

.withdraw-submit svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.withdraw-side {
    display: grid;
    gap: 16px;
}

.withdraw-status-card,
.withdraw-recent-card {
    padding: 20px;
}

.withdraw-status-card {
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .1), transparent 55%),
        #ffffff;
}

.withdraw-status-card p,
.withdraw-recent-list p {
    margin: 10px 0 0;
    color: var(--muted);
    font-weight: 760;
    line-height: 1.55;
}

.withdraw-recent-card .withdraw-card-head {
    padding: 0 0 14px;
    border-bottom: 1px solid #e4eee8;
    background: transparent;
}

.withdraw-recent-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.withdraw-recent-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
    text-decoration: none;
}

.withdraw-recent-list span {
    display: grid;
    gap: 4px;
}

.withdraw-recent-list b {
    color: #102117;
    font-weight: 950;
}

.withdraw-recent-list small {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 850;
}

.withdraw-recent-list em {
    padding: 6px 9px;
    border-radius: 999px;
    background: #fff4d8;
    color: #8a5a00;
    font-size: .68rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

@media (max-width: 1080px) {
    .withdraw-layout {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 760px) {
    .withdraw-hero {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .withdraw-hero h1 {
        font-size: 1.75rem;
    }

    .withdraw-card-head {
        display: grid;
        gap: 7px;
        padding: 18px 16px;
    }

    .withdraw-card-head small {
        max-width: none;
        text-align: left;
    }

    .withdraw-method-grid,
    .withdraw-form-grid {
        grid-template-columns: 1fr;
        padding: 16px 16px 0;
    }

    .withdraw-form-grid {
        padding-bottom: 18px;
    }

    .withdraw-note {
        grid-column: auto;
    }

    .withdraw-errors {
        margin: 14px 16px 0;
    }

    .withdraw-field-error {
        margin: 10px 16px 0;
    }

    .withdraw-submit {
        width: calc(100% - 32px);
        margin: 0 16px 18px;
    }

    .withdraw-status-card,
    .withdraw-recent-card {
        padding: 16px;
    }
}

/* Profile page */
.client-main.profile-page {
    display: grid;
    gap: 16px;
    padding-bottom: 90px;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 104, .13), transparent 30%),
        linear-gradient(180deg, #f7fbf8 0%, #eef6f0 100%);
}

.profile-page .client-topbar {
    border: 1px solid rgba(207, 224, 214, .9);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
}

.profile-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 280px;
    gap: 18px;
    align-items: center;
    padding: 24px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(16, 33, 23, .98), rgba(21, 52, 34, .95)),
        #102117;
    box-shadow: 0 22px 60px rgba(13, 37, 22, .18);
}

.profile-avatar {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    overflow: hidden;
    border: 2px solid rgba(73, 204, 104, .55);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar span {
    color: var(--green);
    font-size: 1.4rem;
    font-weight: 950;
}

.profile-hero > div > span,
.profile-card-head span,
.profile-status-card > span {
    color: var(--green);
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.profile-hero h1 {
    margin: 6px 0 0;
    color: #ffffff;
    font-size: clamp(1.65rem, 3vw, 2.65rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.profile-hero p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .72);
    font-weight: 850;
}

.profile-hero aside {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
}

.profile-hero aside small {
    color: rgba(255, 255, 255, .68);
    font-weight: 900;
}

.profile-hero aside strong,
.profile-status-card strong {
    width: fit-content;
    padding: 8px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.profile-hero aside strong.is-unverified,
.profile-status-card strong.is-unverified {
    background: #fff0f0;
    color: #b42323;
}

.profile-hero aside strong.is-under-review,
.profile-status-card strong.is-under-review {
    background: #fff4d8;
    color: #8a5a00;
}

.profile-hero aside strong.is-verified,
.profile-status-card strong.is-verified {
    background: #eaf9ef;
    color: #0f6b32;
}

.profile-hero aside a {
    color: var(--green);
    font-size: .82rem;
    font-weight: 950;
    text-decoration: none;
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .68fr);
    gap: 16px;
    align-items: start;
}

.profile-card {
    border: 1px solid #d8e7de;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 55px rgba(23, 45, 30, .1);
}

.profile-card-head {
    padding: 20px 22px;
    border-bottom: 1px solid #e4eee8;
    background:
        linear-gradient(90deg, rgba(73, 204, 104, .1), transparent 42%),
        #ffffff;
}

.profile-card-head h2 {
    margin: 6px 0 0;
    color: #102117;
    font-size: 1.15rem;
    letter-spacing: 0;
}

.profile-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 20px 22px;
}

.profile-detail-list div {
    min-width: 0;
    padding: 14px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
}

.profile-detail-list dt {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.profile-detail-list dd {
    margin: 6px 0 0;
    overflow-wrap: anywhere;
    color: #102117;
    font-weight: 950;
}

.profile-password-form {
    display: grid;
    gap: 14px;
    padding: 20px 22px 22px;
}

.profile-password-form label {
    display: grid;
    gap: 8px;
    color: #203427;
    font-size: .78rem;
    font-weight: 950;
}

.profile-password-form input {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid #d7e6dd;
    border-radius: 8px;
    background: #f9fcfa;
    color: #102117;
    font: inherit;
    font-weight: 800;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.profile-password-form input:hover,
.profile-password-form input:focus {
    border-color: var(--green);
    background: #ffffff;
}

.profile-password-form input:focus {
    box-shadow: 0 0 0 4px rgba(73, 204, 104, .14);
}

.profile-password-form label.has-error input {
    border-color: #d33b3b;
    background: #fffafa;
}

.profile-password-form small,
.profile-form-errors {
    color: #b42323;
    font-size: .78rem;
    font-weight: 850;
}

.profile-form-errors {
    padding: 12px 13px;
    border: 1px solid #f4aaaa;
    border-radius: 8px;
    background: #fff0f0;
}

.profile-password-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    min-height: 50px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #07180d;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(73, 204, 104, .22);
}

.profile-password-form button svg,
.profile-action-card svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-side {
    display: grid;
    gap: 16px;
}

.profile-status-card {
    display: grid;
    gap: 10px;
    padding: 20px;
}

.profile-status-card p {
    margin: 0;
    color: var(--muted);
    font-weight: 780;
    line-height: 1.55;
}

.profile-status-card a {
    color: var(--green-dark);
    font-weight: 950;
    text-decoration: none;
}

.profile-action-card {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.profile-action-card a,
.profile-action-card button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 68px;
    padding: 12px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
    color: #102117;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.profile-action-card a:hover,
.profile-action-card button:hover {
    border-color: var(--green);
    background: #ffffff;
}

.profile-action-card span {
    display: grid;
    gap: 3px;
}

.profile-action-card b {
    font-weight: 950;
}

.profile-action-card small {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
}

.profile-action-card form {
    margin: 0;
}

@media (max-width: 1080px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .profile-hero {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 18px;
    }

    .profile-hero aside {
        grid-column: 1 / -1;
    }

    .profile-avatar {
        width: 64px;
        height: 64px;
    }

    .profile-hero h1 {
        font-size: 1.45rem;
    }

    .profile-detail-list {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .profile-card-head,
    .profile-password-form {
        padding: 16px;
    }

    .profile-password-form button {
        width: 100%;
    }

    .profile-status-card {
        padding: 16px;
    }
}

/* Support page */
.client-main.support-page {
    display: grid;
    gap: 16px;
    padding-bottom: 90px;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 104, .13), transparent 30%),
        linear-gradient(180deg, #f7fbf8 0%, #eef6f0 100%);
}

.support-page .client-topbar {
    border: 1px solid rgba(207, 224, 214, .9);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
}

.support-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: stretch;
    padding: 26px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(16, 33, 23, .98), rgba(21, 52, 34, .95)),
        #102117;
    box-shadow: 0 22px 60px rgba(13, 37, 22, .18);
}

.support-hero span,
.support-card-head span,
.support-info-card > span {
    color: var(--green);
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.support-hero h1 {
    margin: 6px 0 0;
    color: #ffffff;
    font-size: clamp(1.85rem, 4vw, 3.05rem);
    line-height: 1.03;
    letter-spacing: 0;
}

.support-hero p {
    max-width: 590px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .74);
    font-weight: 760;
    line-height: 1.58;
}

.support-hero aside {
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
}

.support-hero aside small {
    color: rgba(255, 255, 255, .7);
    font-weight: 900;
}

.support-hero aside strong {
    overflow-wrap: anywhere;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 950;
}

.support-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
    align-items: start;
}

.support-card {
    border: 1px solid #d8e7de;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 55px rgba(23, 45, 30, .1);
}

.support-form {
    overflow: hidden;
}

.support-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid #e4eee8;
    background:
        linear-gradient(90deg, rgba(73, 204, 104, .1), transparent 42%),
        #ffffff;
}

.support-card-head h2,
.support-info-card h2 {
    margin: 6px 0 0;
    color: #102117;
    font-size: 1.18rem;
    letter-spacing: 0;
}

.support-card-head small {
    max-width: 320px;
    color: #66776b;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.45;
    text-align: right;
}

.support-form-body {
    display: grid;
    gap: 14px;
    padding: 22px 24px;
}

.support-form-body label {
    display: grid;
    gap: 8px;
    color: #203427;
    font-size: .78rem;
    font-weight: 950;
}

.support-form-body input,
.support-form-body textarea {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid #d7e6dd;
    border-radius: 8px;
    background: #f9fcfa;
    color: #102117;
    font: inherit;
    font-weight: 800;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.support-form-body textarea {
    min-height: 180px;
    padding-top: 13px;
    resize: vertical;
}

.support-form-body input:hover,
.support-form-body textarea:hover,
.support-form-body input:focus,
.support-form-body textarea:focus {
    border-color: var(--green);
    background: #ffffff;
}

.support-form-body input:focus,
.support-form-body textarea:focus {
    box-shadow: 0 0 0 4px rgba(73, 204, 104, .14);
}

.support-form-body label.has-error input,
.support-form-body label.has-error textarea {
    border-color: #d33b3b;
    background: #fffafa;
}

.support-form-body small,
.support-errors {
    color: #b42323;
    font-size: .78rem;
    font-weight: 850;
}

.support-errors {
    margin: 18px 24px 0;
    padding: 12px 13px;
    border: 1px solid #f4aaaa;
    border-radius: 8px;
    background: #fff0f0;
}

.support-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    margin: 0 24px 24px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #07180d;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(73, 204, 104, .22);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.support-submit:hover {
    transform: translateY(-1px);
    background: #5ee078;
    box-shadow: 0 18px 30px rgba(73, 204, 104, .28);
}

.support-submit svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.support-side {
    display: grid;
    gap: 16px;
}

.support-info-card {
    padding: 20px;
}

.support-info-card p {
    margin: 10px 0 0;
    color: var(--muted);
    font-weight: 780;
    line-height: 1.55;
}

@media (max-width: 1080px) {
    .support-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .support-hero {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .support-hero h1 {
        font-size: 1.75rem;
    }

    .support-card-head {
        display: grid;
        gap: 7px;
        padding: 18px 16px;
    }

    .support-card-head small {
        max-width: none;
        text-align: left;
    }

    .support-form-body {
        padding: 16px;
    }

    .support-errors {
        margin: 14px 16px 0;
    }

    .support-submit {
        width: calc(100% - 32px);
        margin: 0 16px 18px;
    }

    .support-info-card {
        padding: 16px;
    }
}

.support-page .support-hero {
    grid-template-columns: minmax(0, 1fr);
}

.support-page .support-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
}

.support-page .support-card-head {
    display: block;
}

@media (max-width: 1080px) {
    .support-page .support-layout {
        grid-template-columns: 1fr;
    }
}

/* Refer and earn page */
.client-main.refer-page {
    display: grid;
    gap: 16px;
    padding-bottom: 90px;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 104, .14), transparent 30%),
        linear-gradient(180deg, #f7fbf8 0%, #eef6f0 100%);
}

.refer-page .client-topbar {
    border: 1px solid rgba(207, 224, 214, .9);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
}

.refer-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
    align-items: stretch;
    padding: 26px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(16, 33, 23, .98), rgba(21, 52, 34, .95)),
        #102117;
    box-shadow: 0 22px 60px rgba(13, 37, 22, .18);
}

.refer-hero span,
.refer-card-head span,
.refer-stats-card > span {
    color: var(--green);
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.refer-hero h1 {
    margin: 6px 0 0;
    color: #ffffff;
    font-size: clamp(1.85rem, 4vw, 3.05rem);
    line-height: 1.03;
    letter-spacing: 0;
}

.refer-hero p {
    max-width: 650px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .74);
    font-weight: 760;
    line-height: 1.58;
}

.refer-hero aside {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
}

.refer-hero aside small {
    color: rgba(255, 255, 255, .7);
    font-weight: 900;
}

.refer-hero aside strong {
    color: var(--green);
    font-size: 1.8rem;
    font-weight: 950;
    letter-spacing: .08em;
}

.refer-grid,
.refer-layout {
    display: grid;
    gap: 16px;
}

.refer-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.refer-layout {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}

.refer-card {
    border: 1px solid #d8e7de;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 55px rgba(23, 45, 30, .1);
}

.refer-card-head {
    padding: 20px 22px;
    border-bottom: 1px solid #e4eee8;
    background:
        linear-gradient(90deg, rgba(73, 204, 104, .1), transparent 42%),
        #ffffff;
}

.refer-card-head h2 {
    margin: 6px 0 0;
    color: #102117;
    font-size: 1.15rem;
    letter-spacing: 0;
}

.refer-link-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 20px 22px 0;
}

.refer-link-box code {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 52px;
    overflow-wrap: anywhere;
    padding: 12px 14px;
    border: 1px solid #d7e6dd;
    border-radius: 8px;
    background: #f9fcfa;
    color: #102117;
    font-weight: 850;
}

.refer-link-box button,
.refer-share-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #07180d;
    font-weight: 950;
    text-decoration: none;
    cursor: pointer;
}

.refer-link-box svg,
.refer-share-actions svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.refer-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 22px 22px;
}

.refer-share-actions a:nth-child(2) {
    background: #102117;
    color: var(--green);
}

.refer-stats-card {
    display: grid;
    gap: 12px;
    padding: 20px;
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .11), transparent 54%),
        #ffffff;
}

.refer-stats-card > strong {
    color: #102117;
    font-size: 2rem;
    font-weight: 950;
}

.refer-stats-card > small {
    color: var(--muted);
    font-weight: 850;
}

.refer-stats-card div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
}

.refer-stats-card b {
    color: #102117;
    font-size: 1.25rem;
    font-weight: 950;
}

.refer-stats-card div span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 850;
}

.refer-rule-list,
.refer-invite-list {
    display: grid;
    gap: 12px;
    padding: 20px 22px 22px;
}

.refer-rule-list div,
.refer-invite-list div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
}

.refer-rule-list b {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #102117;
    color: var(--green);
}

.refer-rule-list span {
    color: #102117;
    font-weight: 900;
}

.refer-invite-list div {
    justify-content: space-between;
}

.refer-invite-list span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.refer-invite-list b {
    overflow-wrap: anywhere;
    color: #102117;
    font-weight: 950;
}

.refer-invite-list small,
.refer-invite-list p {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 850;
}

.refer-invite-list p {
    margin: 0;
    padding: 18px;
    border: 1px dashed #b8d0c0;
    border-radius: 8px;
    text-align: center;
}

.refer-invite-list em {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff4d8;
    color: #8a5a00;
    font-size: .68rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.refer-invite-list em.is-success {
    background: #eaf9ef;
    color: #0f6b32;
}

@media (max-width: 1080px) {
    .refer-grid,
    .refer-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .refer-hero {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .refer-hero h1 {
        font-size: 1.75rem;
    }

    .refer-link-box {
        grid-template-columns: 1fr;
        padding: 16px 16px 0;
    }

    .refer-share-actions {
        padding: 12px 16px 16px;
    }

    .refer-share-actions a,
    .refer-link-box button {
        width: 100%;
    }

    .refer-card-head,
    .refer-stats-card,
    .refer-rule-list,
    .refer-invite-list {
        padding: 16px;
    }

    .refer-invite-list div {
        display: grid;
        gap: 10px;
    }
}

/* Portfolio refresh */
.portfolio-bar-chart {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
}

.portfolio-bar-item {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(180px, 1fr) 54px;
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 12px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #ffffff;
}

.portfolio-bar-track {
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8f1eb;
}

.portfolio-bar-track i {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green), #179f45);
    box-shadow: 0 8px 18px rgba(73, 204, 104, .22);
}

.portfolio-bar-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.portfolio-bar-copy span {
    overflow: hidden;
    color: #102117;
    font-size: .88rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-bar-copy small {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    line-height: 1.35;
}

.portfolio-bar-item strong {
    color: #102117;
    font-size: .86rem;
    text-align: right;
}

.portfolio-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.portfolio-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
}

.portfolio-chart-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #102117;
}

.portfolio-chart-legend span:nth-child(2) i {
    background: var(--green);
}

.portfolio-tabs-card .portfolio-section-head {
    align-items: center;
}

.portfolio-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #dce9e1;
    border-radius: 999px;
    background: #f8fbf8;
}

.portfolio-tabs button {
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-weight: 950;
    cursor: pointer;
}

.portfolio-tabs button.is-active {
    background: #102117;
    color: var(--green);
    box-shadow: 0 10px 22px rgba(16, 33, 23, .16);
}

.portfolio-tab-panel[hidden] {
    display: none;
}

.portfolio-pie-wrap {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    min-height: 240px;
}

.portfolio-pie {
    display: grid;
    place-items: center;
    width: 220px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--green) 0 var(--earned), #e3eee7 var(--earned) 100%);
    box-shadow: 0 18px 36px rgba(73, 204, 104, .18);
}

.portfolio-pie::before {
    content: "";
    position: absolute;
}

.portfolio-pie span {
    display: grid;
    place-items: center;
    width: 126px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffffff;
    color: #102117;
    font-size: 1.55rem;
    font-weight: 950;
    box-shadow: inset 0 0 0 1px #e3eee7;
}

.portfolio-pie-legend {
    display: grid;
    gap: 12px;
}

.portfolio-pie-legend span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
    color: var(--muted);
    font-weight: 850;
}

.portfolio-pie-legend i {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--green);
}

.portfolio-pie-legend span:nth-child(2) i {
    background: #d4e4da;
}

.portfolio-pie-legend b {
    margin-left: auto;
    color: #102117;
    font-weight: 950;
}

@media (max-width: 760px) {
    .portfolio-bar-chart {
        padding: 12px;
    }

    .portfolio-bar-item {
        grid-template-columns: 1fr 48px;
        gap: 9px 12px;
    }

    .portfolio-bar-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .portfolio-bar-item strong {
        grid-column: 2;
        grid-row: 1;
    }

    .portfolio-tabs-card .portfolio-section-head {
        display: grid;
    }

    .portfolio-tabs {
        width: 100%;
    }

    .portfolio-tabs button {
        flex: 1;
    }

    .portfolio-pie-wrap {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .portfolio-pie {
        width: min(220px, 78vw);
    }

    .portfolio-pie-legend {
        width: 100%;
    }
}

/* Restored vertical ROI bar chart */
.portfolio-bar-chart {
    grid-template-columns: 66px repeat(auto-fit, minmax(118px, 1fr));
    gap: 14px;
    align-items: end;
    min-height: 290px;
    padding: 18px;
    background:
        linear-gradient(#e6eee9 1px, transparent 1px) 0 18px / 100% 25%,
        #fbfdfb;
}

.portfolio-y-axis {
    height: 204px;
    display: grid;
    grid-template-rows: auto 1fr 1fr auto;
    align-self: start;
    color: var(--muted);
}

.portfolio-y-axis span {
    color: #102117;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.portfolio-y-axis b {
    font-size: .7rem;
    font-weight: 900;
}

.portfolio-bar-item {
    grid-template-columns: 1fr;
    gap: 9px;
    align-items: end;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
}

.portfolio-bar-copy small {
    display: none;
}

.portfolio-bar-track {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 8px;
    height: 170px;
    padding: 10px 8px 0;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #eef6f0;
}

.portfolio-bar-track i {
    width: min(34px, 40%);
    min-width: 8px;
    border-radius: 999px 999px 6px 6px;
    transition: height .25s ease;
}

.portfolio-bar-track i.is-expected {
    background: linear-gradient(180deg, #102117, #245339);
    box-shadow: 0 14px 24px rgba(16, 33, 23, .22);
}

.portfolio-bar-track i.is-earned {
    background: linear-gradient(180deg, var(--green), #179f45);
    box-shadow: 0 14px 24px rgba(73, 204, 104, .28);
}

.portfolio-bar-copy span,
.portfolio-bar-item > span {
    overflow: hidden;
    color: #102117;
    font-size: .78rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-bar-item > small {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    line-height: 1.35;
}

@media (max-width: 760px) {
    .portfolio-bar-chart {
        grid-template-columns: 44px repeat(auto-fit, minmax(104px, 1fr));
        gap: 10px;
        min-height: 238px;
        overflow-x: auto;
        padding: 12px;
    }

    .portfolio-y-axis {
        height: 158px;
    }

    .portfolio-y-axis span {
        font-size: .58rem;
    }

    .portfolio-bar-track {
        height: 126px;
        gap: 6px;
        padding-inline: 6px;
    }

    .portfolio-bar-item {
        min-width: 104px;
    }
}

/* Market page */
.client-main.market-page {
    display: grid;
    gap: 16px;
    padding-bottom: 90px;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 104, .13), transparent 30%),
        linear-gradient(180deg, #f7fbf8 0%, #eef6f0 100%);
}

/* Staff boss dashboard */
.boss-body {
    min-height: 100vh;
    margin: 0;
    background: #f4f7f5;
    color: var(--ink);
}

.boss-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
}

.boss-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    align-content: start;
    gap: 22px;
    padding: 22px;
    border-right: 1px solid #dfe9e3;
    background: #ffffff;
}

.boss-brand img {
    width: 210px;
    max-width: 100%;
}

.boss-nav {
    display: grid;
    gap: 8px;
}

.boss-nav a,
.boss-nav button {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #58655f;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    text-align: left;
}

.boss-nav a:hover,
.boss-nav a.is-active,
.boss-nav button:hover {
    border-color: #cfe7d6;
    background: var(--green-soft);
    color: var(--green-dark);
}

.boss-nav form {
    margin: 0;
}

.boss-main {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 22px;
}

.boss-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 10px 0;
    background: rgba(244, 247, 245, .94);
    backdrop-filter: blur(12px);
}

.boss-menu-toggle,
.boss-menu-drawer {
    display: none;
}

.boss-menu-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.boss-topbar span,
.boss-card-head span {
    color: var(--green-dark);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.boss-topbar h1 {
    margin: 4px 0 0;
    font-size: clamp(1.55rem, 2.4vw, 2.25rem);
}

.boss-topbar strong {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--green);
    color: #07180d;
}

.boss-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.boss-metrics article,
.boss-metric-card,
.boss-card,
.boss-table-card {
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
}

.boss-metrics article,
.boss-metric-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
    padding: 16px;
    background:
        linear-gradient(145deg, rgba(73, 204, 104, .12), rgba(73, 204, 104, 0) 48%),
        #ffffff;
    color: var(--ink);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.boss-metric-card:hover {
    transform: translateY(-2px);
    border-color: #bde3c8;
    box-shadow: 0 16px 34px rgba(20, 42, 27, .09);
}

.boss-metrics article::after,
.boss-metric-card::after {
    content: "";
    position: absolute;
    right: -24px;
    top: -28px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(73, 204, 104, .12);
}

.boss-metrics i {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #102117;
    color: var(--green);
}

.boss-metrics svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.boss-metrics span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.boss-metrics strong {
    color: #102117;
    font-size: 1.75rem;
    line-height: 1;
}

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

.boss-card,
.boss-table-card {
    padding: 16px;
}

.boss-card-head,
.boss-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.boss-card-head a,
.boss-toolbar > a,
.boss-form-actions button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 0;
    border-radius: 8px;
    background: #102117;
    color: #ffffff;
    cursor: pointer;
    font-weight: 950;
}

.boss-toolbar form {
    display: flex;
    gap: 8px;
    min-width: min(100%, 420px);
}

.boss-toolbar input,
.boss-toolbar select,
.boss-toolbar button,
.boss-input {
    min-height: 40px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
}

.boss-toolbar input {
    flex: 1;
    padding: 0 12px;
}

.boss-toolbar select {
    min-width: 148px;
    padding: 0 36px 0 12px;
    color: #102117;
    font-weight: 850;
}

.boss-toolbar button {
    padding: 0 13px;
    background: var(--green-soft);
    color: var(--green-dark);
    cursor: pointer;
    font-weight: 950;
}

.boss-filter-form a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    color: #58655f;
    font-weight: 950;
}

.boss-list {
    display: grid;
    gap: 8px;
}

.boss-list a,
.boss-table-row {
    display: grid;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #edf3ef;
    border-radius: 8px;
    background: #fbfdfb;
    color: var(--ink);
}

.boss-list a {
    grid-template-columns: minmax(0, 1fr) auto;
}

.boss-list span,
.boss-table-row span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.boss-list b,
.boss-table-row b {
    overflow: hidden;
    color: #102117;
    text-overflow: ellipsis;
}

.boss-list small,
.boss-table-row small {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}

.boss-list em,
.boss-table-row em,
.boss-status {
    width: max-content;
    max-width: 100%;
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green-dark);
    font-size: .72rem;
    font-style: normal;
    font-weight: 950;
}

.boss-status-unverified,
.boss-status-failed,
.boss-status-declined {
    border: 1px solid #f4aaaa;
    background: #fff0f0 !important;
    color: #b42323 !important;
}

.boss-status-verified,
.boss-status-success,
.boss-status-successful {
    border: 1px solid #bde3c8;
    background: #eaffef !important;
    color: #0b7430 !important;
}

.boss-status-under-review,
.boss-status-pending {
    border: 1px solid #f4dda6;
    background: #fff8e8 !important;
    color: #986b00 !important;
}

.boss-table {
    display: grid;
    gap: 8px;
}

.boss-table-head,
.boss-table-row {
    grid-template-columns: var(--boss-cols, repeat(3, minmax(0, 1fr)));
}

.boss-table-head {
    display: grid;
    gap: 10px;
    padding: 0 12px 6px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.boss-wallet-table { --boss-cols: minmax(140px, .7fr) minmax(180px, 1fr) 150px; }
.boss-client-table { --boss-cols: minmax(180px, 1fr) 150px 120px 140px; }
.boss-plan-table { --boss-cols: minmax(180px, 1fr) 190px 90px 150px; }
.boss-transaction-table { --boss-cols: minmax(180px, 1fr) 110px 130px 110px 150px; }
.boss-kyc-table { --boss-cols: minmax(180px, 1fr) 140px 130px 120px 110px; }

.boss-directory-toolbar {
    align-items: flex-end;
    padding: 16px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .14), rgba(73, 204, 104, 0) 48%),
        #ffffff;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
}

.boss-directory-toolbar > div {
    display: grid;
    gap: 4px;
}

.boss-directory-toolbar span,
.boss-kyc-review-hero > span {
    color: var(--green-dark);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.boss-directory-toolbar h2,
.boss-kyc-review-hero h2 {
    margin: 0;
    color: #102117;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
}

.boss-directory-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.boss-directory-toolbar svg,
.boss-client-meta svg,
.boss-client-card-actions svg,
.boss-kyc-card svg,
.boss-kyc-review-hero svg,
.boss-kyc-documents span svg,
.boss-kyc-actions svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.boss-client-directory,
.boss-kyc-board {
    display: grid;
    gap: 12px;
}

.boss-client-card,
.boss-kyc-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
}

.boss-client-card:hover,
.boss-kyc-card:hover {
    border-color: #bde3c8;
    box-shadow: 0 16px 34px rgba(20, 42, 27, .08);
}

.boss-client-avatar,
.boss-kyc-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: #102117;
    color: var(--green);
    font-size: 1.25rem;
    font-weight: 950;
}

.boss-kyc-icon {
    background: var(--green-soft);
    color: var(--green-dark);
}

.boss-client-main,
.boss-kyc-main,
.boss-client-title,
.boss-kyc-title {
    min-width: 0;
}

.boss-client-title,
.boss-kyc-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.boss-client-title span,
.boss-kyc-title span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.boss-client-title b,
.boss-kyc-title b {
    overflow: hidden;
    color: #102117;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boss-client-title small,
.boss-kyc-title small {
    overflow: hidden;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boss-client-meta,
.boss-kyc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.boss-client-meta span,
.boss-kyc-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #edf3ef;
    border-radius: 8px;
    background: #fbfdfb;
    color: #58655f;
    font-size: .8rem;
    font-weight: 850;
}

.boss-client-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.boss-client-card-actions a,
.boss-kyc-review-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    color: #102117;
    font-weight: 950;
}

.boss-client-card-actions a:hover,
.boss-kyc-review-link:hover {
    border-color: #bde3c8;
    background: var(--green-soft);
    color: var(--green-dark);
}

.boss-client-card-actions a.is-danger {
    border-color: #f4aaaa;
    background: #fff7f7;
    color: #b42323;
}

.boss-new-plan-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.boss-back-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    color: #102117;
    font-weight: 950;
}

.boss-back-link:hover {
    border-color: #bde3c8;
    background: var(--green-soft);
    color: var(--green-dark);
}

.boss-modal-back-link {
    justify-self: start;
}

.boss-back-link svg,
.boss-new-plan-link svg,
.boss-plan-card svg,
.boss-plan-form-panel svg,
.boss-transaction-card svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.boss-plan-directory,
.boss-transaction-directory {
    display: grid;
    gap: 12px;
}

.boss-plan-card,
.boss-transaction-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(73, 204, 104, .1), rgba(73, 204, 104, 0) 40%),
        #ffffff;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
}

.boss-plan-card:hover,
.boss-transaction-card:hover {
    border-color: #bde3c8;
    box-shadow: 0 16px 34px rgba(20, 42, 27, .08);
}

.boss-plan-icon,
.boss-transaction-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: #102117;
    color: var(--green);
}

.boss-transaction-icon.is-deposit {
    background: #eaffef;
    color: #0b7430;
}

.boss-transaction-icon.is-withdrawal {
    background: #fff8e8;
    color: #986b00;
}

.boss-plan-main,
.boss-plan-title,
.boss-transaction-main,
.boss-transaction-title {
    min-width: 0;
}

.boss-plan-title,
.boss-transaction-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.boss-plan-title span,
.boss-transaction-title span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.boss-plan-title b,
.boss-transaction-title b {
    overflow: hidden;
    color: #102117;
    font-size: 1.04rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boss-plan-title small,
.boss-transaction-title small {
    overflow: hidden;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boss-transaction-title strong {
    flex: 0 0 auto;
    color: #102117;
    font-size: 1.05rem;
}

.boss-plan-title em {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid #bde3c8;
    border-radius: 999px;
    background: #eaffef;
    color: #0b7430;
    font-size: .75rem;
    font-style: normal;
    font-weight: 950;
}

.boss-plan-meta,
.boss-transaction-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.boss-plan-meta span,
.boss-transaction-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #edf3ef;
    border-radius: 8px;
    background: #fbfdfb;
    color: #58655f;
    font-size: .8rem;
    font-weight: 850;
}

.boss-transaction-meta .boss-status {
    align-self: center;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
}

.boss-plan-actions,
.boss-transaction-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.boss-plan-actions a,
.boss-transaction-actions a,
.boss-transaction-actions button,
.boss-transaction-actions > span {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    color: #102117;
    cursor: pointer;
    font: inherit;
    font-weight: 950;
}

.boss-transaction-actions form {
    margin: 0;
}

.boss-plan-actions a:hover,
.boss-transaction-actions a:hover,
.boss-transaction-actions button:hover {
    border-color: #bde3c8;
    background: var(--green-soft);
    color: var(--green-dark);
}

.boss-plan-actions a.is-danger,
.boss-transaction-actions button.is-danger {
    border-color: #f4aaaa;
    background: #fff7f7;
    color: #b42323;
}

.boss-transaction-actions button.is-safe {
    border-color: #bde3c8;
    background: #eaffef;
    color: #0b7430;
}

.boss-withdrawal-preview {
    width: min(100%, 620px);
}

.boss-copy-detail {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #edf3ef;
    border-radius: 8px;
    background: #fbfdfb;
}

.boss-copy-detail > span {
    color: var(--green-dark);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.boss-copy-detail code {
    display: block;
    max-width: 100%;
    padding: 10px;
    overflow-wrap: anywhere;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    color: #102117;
    font: inherit;
    font-size: .84rem;
    font-weight: 850;
}

.boss-copy-detail button {
    justify-self: start;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #bde3c8;
    border-radius: 8px;
    background: #eaffef;
    color: #0b7430;
    cursor: pointer;
    font: inherit;
    font-weight: 950;
}

.boss-transaction-actions > span {
    border-color: #edf3ef;
    background: #fbfdfb;
    color: var(--muted);
    cursor: default;
}

.boss-wallet-directory {
    display: grid;
    gap: 12px;
}

.boss-wallet-row-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(73, 204, 104, .1), rgba(73, 204, 104, 0) 40%),
        #ffffff;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
}

.boss-wallet-row-card:hover {
    border-color: #bde3c8;
    box-shadow: 0 16px 34px rgba(20, 42, 27, .08);
}

.boss-wallet-row-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: #102117;
    color: var(--green);
}

.boss-wallet-row-card svg,
.boss-wallet-form-panel svg,
.boss-wallet-delete-panel svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.boss-wallet-row-main,
.boss-wallet-row-title {
    min-width: 0;
}

.boss-wallet-row-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.boss-wallet-row-title span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.boss-wallet-row-title b {
    overflow: hidden;
    color: #102117;
    font-size: 1.04rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boss-wallet-row-title small {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
}

.boss-wallet-row-title em {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid #bde3c8;
    border-radius: 999px;
    background: #eaffef;
    color: #0b7430;
    font-size: .75rem;
    font-style: normal;
    font-weight: 950;
}

.boss-wallet-row-meta {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.boss-wallet-row-meta span {
    width: max-content;
    max-width: 100%;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid #edf3ef;
    border-radius: 8px;
    background: #fbfdfb;
    color: #58655f;
    font-size: .8rem;
    font-weight: 850;
}

.boss-wallet-row-meta code,
.boss-wallet-preview code,
.boss-wallet-delete-panel code {
    display: block;
    max-width: 100%;
    padding: 10px;
    overflow-wrap: anywhere;
    border: 1px solid #edf3ef;
    border-radius: 8px;
    background: #fbfdfb;
    color: #102117;
    font: inherit;
    font-size: .82rem;
    font-weight: 850;
}

.boss-wallet-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.boss-wallet-row-actions a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    color: #102117;
    font-weight: 950;
}

.boss-wallet-row-actions a:hover {
    border-color: #bde3c8;
    background: var(--green-soft);
    color: var(--green-dark);
}

.boss-wallet-row-actions a.is-danger {
    border-color: #f4aaaa;
    background: #fff7f7;
    color: #b42323;
}

.boss-plan-form-panel {
    width: min(100%, 760px);
}

.boss-plan-fields {
    margin-top: 2px;
}

.boss-plan-form label.boss-plan-description {
    grid-column: 1 / -1;
}

.boss-usd-field {
    grid-column: 2;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
}

.boss-usd-field b {
    display: grid;
    place-items: center;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #f1f7f3;
    color: var(--green-dark);
    font-weight: 950;
}

.boss-plan-form textarea.boss-input {
    min-height: 118px;
    resize: vertical;
}

.boss-plan-form .money-widget,
.boss-plan-form .money-field,
.boss-plan-form label > div {
    grid-column: 2;
}

.boss-plan-form-panel .boss-form-actions button {
    background: #102117;
    color: #ffffff;
}

.boss-plan-delete-panel .boss-form-actions button {
    background: #b42323;
    color: #ffffff;
}

.boss-kyc-review-link {
    background: #102117;
    color: #ffffff;
}

.boss-kyc-review-shell {
    display: grid;
    grid-template-columns: minmax(240px, .44fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.boss-kyc-review-hero {
    position: sticky;
    top: 86px;
    display: grid;
    gap: 10px;
    padding: 20px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(73, 204, 104, .16), rgba(73, 204, 104, 0) 52%),
        #ffffff;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
}

.boss-kyc-review-hero p {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-weight: 850;
}

.boss-kyc-review-hero i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: #102117;
    color: var(--green);
}

.boss-kyc-review-panel {
    display: grid;
    gap: 16px;
}

.boss-kyc-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.boss-kyc-info-grid div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid #edf3ef;
    border-radius: 8px;
    background: #fbfdfb;
}

.boss-kyc-info-grid span,
.boss-kyc-documents > article > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.boss-kyc-info-grid b {
    overflow-wrap: anywhere;
    color: #102117;
}

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

.boss-kyc-documents article {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.boss-kyc-documents img,
.boss-kyc-missing {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #f7fbf8;
}

.boss-kyc-documents img {
    display: block;
    object-fit: contain;
}

.boss-kyc-missing {
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 900;
}

.boss-kyc-documents a {
    justify-self: start;
    color: var(--green-dark);
    font-weight: 950;
}

.boss-kyc-preview-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #bde3c8;
    border-radius: 8px;
    background: #eaffef;
    color: #0b7430;
    font-weight: 900;
}

.boss-kyc-preview-note svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.boss-kyc-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #edf3ef;
}

.boss-kyc-actions a,
.boss-kyc-actions button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    color: #102117;
    cursor: pointer;
    font: inherit;
    font-weight: 950;
}

.boss-kyc-actions button.is-danger {
    border-color: #f4aaaa;
    background: #fff0f0;
    color: #b42323;
}

.boss-kyc-actions button.is-safe {
    border-color: #bde3c8;
    background: #eaffef;
    color: #0b7430;
}

.boss-wallet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.boss-wallet-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(73, 204, 104, .12), rgba(73, 204, 104, 0) 42%),
        #ffffff;
    box-shadow: 0 10px 28px rgba(20, 42, 27, .05);
}

.boss-wallet-card::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -34px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(73, 204, 104, .12);
}

.boss-wallet-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.boss-wallet-top i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #102117;
    color: var(--green);
    font-style: normal;
    font-weight: 950;
}

.boss-wallet-top span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.boss-wallet-top b {
    overflow: hidden;
    color: #102117;
    font-size: 1rem;
    text-overflow: ellipsis;
}

.boss-wallet-top small,
.boss-wallet-qr-display small {
    color: var(--muted);
    font-weight: 850;
}

.boss-wallet-card code,
.boss-wallet-preview code,
.boss-wallet-delete-panel code {
    position: relative;
    z-index: 1;
    display: block;
    overflow-wrap: anywhere;
    padding: 12px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
    color: #102117;
    font: inherit;
    font-size: .85rem;
    font-weight: 850;
}

.boss-wallet-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.boss-wallet-actions a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    background: #f1f7f3;
    color: var(--green-dark);
    font-weight: 950;
}

.boss-wallet-actions a:first-child {
    background: #102117;
    color: #ffffff;
}

.boss-wallet-actions a.is-danger {
    background: #fff0f0;
    color: #b42323;
}

.boss-modal {
    display: none;
}

.boss-modal:target {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 18px;
}

.boss-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 18, 10, .56);
}

.boss-modal-page {
    min-height: calc(100vh - 130px);
    display: grid;
    place-items: center;
    padding: 18px;
}

.boss-modal-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(5, 18, 10, .25);
}

.boss-modal-panel > span {
    color: var(--green-dark);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.boss-modal-panel h2 {
    margin: 0;
    color: #102117;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

.boss-modal-panel p {
    margin: 0;
    color: var(--muted);
    font-weight: 850;
    line-height: 1.55;
}

.boss-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #dfe9e3;
    border-radius: 50%;
    background: #ffffff;
    color: #102117;
    font-weight: 950;
}

.boss-wallet-preview {
    justify-items: center;
    text-align: center;
}

.boss-wallet-preview img,
.boss-wallet-qr-display img {
    width: min(220px, 68vw);
    aspect-ratio: 1;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    object-fit: contain;
    background: #ffffff;
}

.boss-qr-placeholder {
    display: grid;
    place-items: center;
    width: min(220px, 68vw);
    aspect-ratio: 1;
    border: 1px dashed #b9c9c0;
    border-radius: 8px;
    background: #f7fbf8;
    color: var(--muted);
    font-weight: 950;
}

.boss-wallet-form-panel .boss-form-grid.is-single,
.boss-wallet-form-panel .boss-smart-fields.is-single {
    grid-template-columns: 1fr;
}

.boss-wallet-qr-display {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 14px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
}

.boss-wallet-delete-panel .boss-form-actions button {
    background: #b42323;
    color: #ffffff;
}

.boss-editor-shell {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.boss-editor-hero {
    display: grid;
    gap: 8px;
    padding: 20px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .16), rgba(73, 204, 104, 0) 42%),
        #102117;
    color: #ffffff;
    box-shadow: 0 18px 50px rgba(14, 32, 21, .14);
}

.boss-editor-hero span,
.boss-smart-form label > span,
.boss-balance-modal > span,
.boss-client-delete-panel > span {
    color: var(--green);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.boss-editor-hero h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
}

.boss-editor-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .74);
    font-weight: 850;
    line-height: 1.55;
}

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

.boss-smart-form label {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 7px 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
}

.boss-smart-form label i {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #102117;
    color: var(--green);
}

.boss-smart-form label svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.boss-smart-form label .boss-input {
    grid-column: 2;
}

.boss-toggle-field input {
    width: 22px;
    height: 22px;
    accent-color: var(--green);
}

.boss-money-field {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 8px;
}

.boss-money-field b {
    display: grid;
    place-items: center;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #f1f7f3;
    color: var(--green-dark);
    font-weight: 950;
}

.boss-client-delete-panel .boss-form-actions button {
    background: #b42323;
    color: #ffffff;
}

.boss-delete-client-summary {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid #f4aaaa;
    border-radius: 8px;
    background: #fff0f0;
}

.boss-delete-client-summary b {
    color: #102117;
}

.boss-delete-client-summary small {
    color: #b42323;
    font-weight: 850;
}

.boss-table-row a,
.boss-form-actions a,
.boss-confirm a {
    color: var(--green-dark);
    font-weight: 950;
}

.boss-table-row a + a {
    margin-left: 10px;
}

.boss-table-row a.is-danger,
.boss-confirm button {
    color: #b42323;
}

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

.boss-form label {
    display: grid;
    gap: 7px;
    color: #102117;
    font-weight: 900;
}

.boss-input {
    width: 100%;
    padding: 9px 11px;
}

.boss-form textarea.boss-input {
    min-height: 96px;
}

.boss-form-actions,
.boss-confirm form {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.boss-detail-list {
    display: grid;
    gap: 8px;
    margin: 0;
}

.boss-detail-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    background: #fbfdfb;
}

.boss-detail-list dt {
    color: var(--muted);
    font-weight: 850;
}

.boss-detail-list dd {
    margin: 0;
    color: #102117;
    font-weight: 950;
}

.boss-client-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .16), rgba(73, 204, 104, 0) 42%),
        #102117;
    color: #ffffff;
    box-shadow: 0 18px 50px rgba(14, 32, 21, .14);
}

.boss-client-identity {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.boss-client-identity > strong {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--green);
    color: #07180d;
}

.boss-client-identity span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.boss-client-identity b {
    overflow: hidden;
    color: #ffffff;
    font-size: 1.15rem;
    text-overflow: ellipsis;
}

.boss-client-identity small {
    color: rgba(255, 255, 255, .72);
    font-weight: 850;
}

.boss-client-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.boss-client-actions a,
.boss-client-actions button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    color: #102117;
    cursor: pointer;
    font: inherit;
    font-weight: 950;
}

.boss-client-actions form {
    margin: 0;
}

.boss-client-actions button.is-danger {
    background: #fff0f0;
    color: #b42323;
}

.boss-client-actions a.is-danger {
    background: #fff0f0;
    color: #b42323;
}

.boss-client-actions button.is-safe {
    background: #eaffef;
    color: #0b7430;
}

.boss-account-card {
    display: grid;
    gap: 14px;
}

.boss-balance-display {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(73, 204, 104, .14), rgba(73, 204, 104, 0) 42%),
        #102117;
}

.boss-balance-display span,
.boss-account-stats span {
    color: var(--green);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.boss-balance-display strong {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3rem);
}

.boss-account-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.boss-account-stats div {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
}

.boss-account-stats span {
    color: var(--muted);
}

.boss-account-stats b {
    overflow-wrap: anywhere;
    color: #102117;
}

.boss-client-plans-card .boss-card-head {
    align-items: center;
}

.boss-client-plans-card h2 {
    margin: 4px 0 0;
    color: #102117;
    font-size: 1.15rem;
    letter-spacing: 0;
}

.boss-client-plan-list {
    display: grid;
    gap: 9px;
}

.boss-client-plan-list article {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(120px, .55fr));
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #edf3ef;
    border-radius: 8px;
    background: #fbfdfb;
}

.boss-client-plan-list span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.boss-client-plan-list b {
    overflow-wrap: anywhere;
    color: #102117;
}

.boss-client-plan-list small {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 850;
}

.boss-empty,
.boss-messages p {
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    background: #f7fbf8;
    color: var(--muted);
    font-weight: 850;
}

.boss-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #edf3ef;
}

.boss-pagination a,
.boss-pagination span,
.boss-pagination strong {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 950;
}

.boss-pagination a {
    background: #102117;
    color: #ffffff;
}

.boss-pagination span {
    background: #f2f6f3;
    color: #9aa7a0;
}

.boss-pagination strong {
    color: #102117;
}

.boss-mobile-nav {
    display: none;
}

@media (max-width: 980px) {
    .boss-body {
        padding-bottom: 84px;
    }

    .boss-shell {
        grid-template-columns: 1fr;
    }

    .boss-sidebar {
        display: none;
    }

    .boss-main {
        padding: 14px;
    }

    .boss-topbar {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        align-items: center;
        gap: 10px;
        margin: -14px -14px 0;
        padding: 12px 14px;
        border-bottom: 1px solid #dfe9e3;
    }

    .boss-menu-toggle {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid #dfe9e3;
        border-radius: 8px;
        background: #ffffff;
        color: var(--ink);
        cursor: pointer;
    }

    .boss-menu-drawer:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 120;
        display: block;
    }

    .boss-menu-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(5, 18, 10, .55);
    }

    .boss-menu-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: min(84vw, 330px);
        height: 100%;
        display: grid;
        align-content: start;
        gap: 20px;
        padding: 20px;
        background: #ffffff;
        box-shadow: 18px 0 50px rgba(5, 18, 10, .18);
    }

    .boss-menu-panel > button {
        justify-self: end;
        width: 36px;
        height: 36px;
        border: 1px solid #dfe9e3;
        border-radius: 50%;
        background: #ffffff;
        color: var(--ink);
        cursor: pointer;
        font-size: 1.2rem;
        line-height: 1;
    }

    .boss-menu-panel img {
        width: 210px;
        max-width: 100%;
    }

    .boss-metrics,
    .boss-grid,
    .boss-profile-grid,
    .boss-form-grid {
        grid-template-columns: 1fr;
    }

    .boss-toolbar {
        display: grid;
    }

    .boss-directory-toolbar {
        align-items: stretch;
        padding: 14px;
    }

    .boss-filter-form {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .boss-toolbar input,
    .boss-toolbar select,
    .boss-toolbar button,
    .boss-filter-form a,
    .boss-toolbar > a {
        width: 100%;
    }

    .boss-table-head {
        display: none;
    }

    .boss-table-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .boss-pagination {
        display: grid;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .boss-wallet-grid {
        grid-template-columns: 1fr;
    }

    .boss-wallet-card {
        padding: 14px;
    }

    .boss-wallet-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .boss-wallet-actions a {
        justify-content: center;
        padding: 0 8px;
        font-size: .82rem;
    }

    .boss-client-card,
    .boss-kyc-card,
    .boss-plan-card,
    .boss-transaction-card,
    .boss-wallet-row-card {
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        padding: 12px;
    }

    .boss-client-avatar,
    .boss-kyc-icon,
    .boss-plan-icon,
    .boss-transaction-icon,
    .boss-wallet-row-icon {
        width: 46px;
        height: 46px;
    }

    .boss-client-title,
    .boss-kyc-title,
    .boss-plan-title,
    .boss-transaction-title,
    .boss-wallet-row-title {
        display: grid;
        gap: 8px;
    }

    .boss-client-meta,
    .boss-kyc-meta,
    .boss-plan-meta,
    .boss-transaction-meta {
        display: grid;
        grid-template-columns: 1fr;
    }

    .boss-client-meta span,
    .boss-kyc-meta span,
    .boss-plan-meta span,
    .boss-transaction-meta span {
        width: 100%;
        overflow-wrap: anywhere;
    }

    .boss-client-card-actions,
    .boss-plan-actions,
    .boss-transaction-actions,
    .boss-wallet-row-actions,
    .boss-kyc-review-link {
        grid-column: 1 / -1;
        width: 100%;
    }

    .boss-client-card-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .boss-client-card-actions a {
        padding: 0 8px;
        font-size: .8rem;
    }

    .boss-plan-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .boss-transaction-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .boss-wallet-row-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .boss-transaction-actions a,
    .boss-transaction-actions form,
    .boss-transaction-actions button,
    .boss-transaction-actions > span {
        width: 100%;
    }

    .boss-plan-actions a,
    .boss-transaction-actions a,
    .boss-transaction-actions button,
    .boss-transaction-actions > span,
    .boss-wallet-row-actions a {
        padding: 0 8px;
        font-size: .84rem;
    }

    .boss-plan-form label.boss-plan-description {
        grid-column: auto;
    }

    .boss-usd-field {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .boss-kyc-review-shell {
        grid-template-columns: 1fr;
    }

    .boss-kyc-review-hero {
        position: static;
        padding: 15px;
    }

    .boss-kyc-info-grid,
    .boss-kyc-documents {
        grid-template-columns: 1fr;
    }

    .boss-kyc-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .boss-modal:target {
        align-items: end;
        padding: 10px;
    }

    .boss-modal-page {
        min-height: calc(100vh - 100px);
        padding: 0;
    }

    .boss-modal-panel {
        width: 100%;
        padding: 16px;
    }

    .boss-editor-shell,
    .boss-smart-fields {
        grid-template-columns: 1fr;
    }

    .boss-smart-form label {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .boss-smart-form label i {
        width: 38px;
        height: 38px;
    }

    .boss-money-field {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .boss-wallet-form-panel .boss-form-actions,
    .boss-wallet-delete-panel .boss-form-actions,
    .boss-client-delete-panel .boss-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .boss-mobile-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 90;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        padding: 6px;
        border: 1px solid #dfe9e3;
        border-radius: 16px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 16px 38px rgba(20, 42, 27, .16);
        backdrop-filter: blur(14px);
    }

    .boss-mobile-nav a {
        min-height: 52px;
        display: grid;
        place-items: center;
        gap: 3px;
        border-radius: 12px;
        color: #58655f;
        font-size: .7rem;
        font-weight: 900;
    }

    .boss-mobile-nav a.is-active,
    .boss-mobile-nav a:hover {
        background: var(--green-soft);
        color: var(--green-dark);
    }

    .boss-mobile-nav svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .boss-client-hero {
        display: grid;
        gap: 14px;
        padding: 15px;
    }

    .boss-client-actions {
        justify-content: stretch;
    }

    .boss-client-actions a,
    .boss-client-actions form,
    .boss-client-actions button {
        width: 100%;
    }

    .boss-account-stats {
        grid-template-columns: 1fr;
    }

    .boss-client-plans-card .boss-card-head {
        display: grid;
    }

    .boss-client-plan-list article {
        grid-template-columns: 1fr;
    }

    .boss-detail-list div {
        display: grid;
    }

    .boss-balance-display strong {
        font-size: 2rem;
    }
}

.market-page .client-topbar {
    border: 1px solid rgba(207, 224, 214, .9);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
}

.error-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(73, 204, 104, .18), transparent 30%),
        linear-gradient(135deg, #f4f8f5 0%, #ffffff 52%, #eef8f1 100%);
    color: #102117;
}

.error-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.error-panel {
    width: min(100%, 620px);
    display: grid;
    gap: 14px;
    padding: clamp(22px, 5vw, 40px);
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 28px 80px rgba(20, 42, 27, .12);
    text-align: center;
}

.error-brand {
    justify-self: center;
}

.error-brand img {
    width: min(260px, 78vw);
    height: auto;
}

.error-code {
    justify-self: center;
    min-width: 92px;
    padding: 10px 16px;
    border: 1px solid #bde3c8;
    border-radius: 999px;
    background: #eaffef;
    color: #0b7430;
    font-size: 1.1rem;
    font-weight: 950;
}

.error-panel > span {
    color: #0b7430;
    font-size: .75rem;
    font-weight: 950;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.error-panel h1 {
    margin: 0;
    color: #102117;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.05;
}

.error-panel p {
    max-width: 48ch;
    margin: 0 auto;
    color: #5f6c66;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.65;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.error-actions a,
.error-actions button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #ffffff;
    color: #102117;
    cursor: pointer;
    font: inherit;
    font-weight: 950;
}

.error-actions .is-primary {
    border-color: #102117;
    background: #102117;
    color: #ffffff;
}

.error-panel small {
    color: #7a8780;
    font-weight: 800;
}

@media (max-width: 640px) {
    .error-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .error-actions a,
    .error-actions button {
        width: 100%;
    }
}

.market-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: stretch;
    padding: 26px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(16, 33, 23, .98), rgba(21, 52, 34, .95)),
        #102117;
    box-shadow: 0 22px 60px rgba(13, 37, 22, .18);
}

.market-hero span,
.market-card-head span {
    color: var(--green);
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.market-hero h1 {
    margin: 6px 0 0;
    max-width: 760px;
    color: #ffffff;
    font-size: clamp(1.85rem, 4vw, 3.05rem);
    line-height: 1.03;
    letter-spacing: 0;
}

.market-hero p {
    max-width: 680px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .74);
    font-weight: 760;
    line-height: 1.58;
}

.market-hero aside {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
}

.market-hero aside small {
    color: rgba(255, 255, 255, .7);
    font-weight: 900;
}

.market-hero aside strong {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 950;
}

.market-hero aside em {
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--green);
    color: #07180d;
    font-size: .7rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.market-alert {
    padding: 12px 14px;
    border: 1px solid #f0c86f;
    border-radius: 8px;
    background: #fff4d8;
    color: #8a5a00;
    font-weight: 850;
}

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

.market-summary-grid article,
.market-card {
    border: 1px solid #d8e7de;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 55px rgba(23, 45, 30, .1);
}

.market-summary-grid article {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.market-summary-grid span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.market-summary-grid strong {
    color: #102117;
    font-size: 1.55rem;
    font-weight: 950;
}

.market-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}

.market-card {
    overflow: hidden;
}

.market-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid #e4eee8;
    background:
        linear-gradient(90deg, rgba(73, 204, 104, .1), transparent 42%),
        #ffffff;
}

.market-card-head h2 {
    margin: 6px 0 0;
    color: #102117;
    font-size: 1.15rem;
    letter-spacing: 0;
}

.market-card-head small {
    color: var(--muted);
    font-weight: 850;
}

.market-table-wrap {
    overflow-x: auto;
}

.market-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.market-table th,
.market-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e7f0ea;
    text-align: left;
}

.market-table th {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.market-table td {
    color: #102117;
    font-weight: 900;
}

.market-table td:first-child {
    display: grid;
    gap: 3px;
}

.market-table b {
    font-weight: 950;
}

.market-table small {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 820;
}

.market-trend {
    display: inline-flex;
    min-width: 58px;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 999px;
    background: #edf3ef;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.market-trend.is-up,
.market-rank-list em.is-up {
    background: #eaf9ef;
    color: #0f6b32;
}

.market-trend.is-down,
.market-rank-list em.is-down {
    background: #fff0f0;
    color: #b42323;
}

.market-positive {
    color: #0f6b32 !important;
}

.market-negative {
    color: #b42323 !important;
}

.market-rank-column {
    display: grid;
    gap: 16px;
}

.market-rank-list {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.market-rank-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e3eee7;
    border-radius: 8px;
    background: #fbfdfb;
}

.market-rank-list span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.market-rank-list b {
    color: #102117;
    font-weight: 950;
}

.market-rank-list small {
    overflow: hidden;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-rank-list em {
    flex: 0 0 auto;
    padding: 7px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-style: normal;
    font-weight: 950;
}

.market-rank-list p {
    margin: 0;
    padding: 16px;
    border: 1px dashed #b8d0c0;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 850;
    text-align: center;
}

@media (max-width: 1080px) {
    .market-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .market-hero {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .market-hero h1 {
        font-size: 1.75rem;
    }

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

    .market-card-head {
        display: grid;
        gap: 7px;
        padding: 16px;
    }

    .market-table {
        min-width: 0;
    }

    .market-table thead {
        display: none;
    }

    .market-table tbody {
        display: grid;
        gap: 12px;
        padding: 12px;
    }

    .market-table tr {
        display: grid;
        gap: 10px;
        padding: 14px;
        border: 1px solid #e3eee7;
        border-radius: 8px;
        background: #fbfdfb;
        box-shadow: 0 10px 24px rgba(20, 42, 27, .06);
    }

    .market-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
        border: 0;
    }

    .market-table td::before {
        color: var(--muted);
        font-size: .68rem;
        font-weight: 950;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .market-table td:nth-child(1)::before { content: "Asset"; }
    .market-table td:nth-child(2)::before { content: "Type"; }
    .market-table td:nth-child(3)::before { content: "Price"; }
    .market-table td:nth-child(4)::before { content: "Trend"; }
    .market-table td:nth-child(5)::before { content: "Change"; }

    .market-table td:first-child {
        display: grid;
        align-items: start;
        justify-content: stretch;
        padding-bottom: 10px;
        border-bottom: 1px solid #e3eee7;
    }

    .market-table td:first-child::before {
        display: none;
    }

    .market-table td:first-child b {
        font-size: 1.05rem;
    }

    .market-table td:first-child small {
        white-space: normal;
    }

    .market-rank-column {
        gap: 12px;
    }

    .market-rank-list {
        padding: 12px;
    }

    .market-rank-list div {
        padding: 12px;
    }

    .market-rank-list small {
        white-space: normal;
    }
}