:root {
    --mf-bg: #071225;
    --mf-panel: rgba(15, 30, 56, .88);
    --mf-panel-light: rgba(23, 43, 76, .90);
    --mf-blue: #3985ff;
    --mf-cyan: #21d4fd;
    --mf-green: #20dfa0;
    --mf-purple: #a879ff;
    --mf-gold: #ffc857;
    --mf-text: #edf4ff;
    --mf-muted: #9aacc8;
    --mf-border: rgba(139, 177, 255, .19);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--mf-text) !important;
    background-color: var(--mf-bg) !important;
    background-image:
        radial-gradient(ellipse at 12% 12%, rgba(30, 105, 230, .23), transparent 36%),
        radial-gradient(ellipse at 88% 18%, rgba(133, 67, 230, .19), transparent 34%),
        radial-gradient(ellipse at 72% 90%, rgba(0, 205, 160, .12), transparent 38%),
        linear-gradient(rgba(60, 110, 190, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60, 110, 190, .045) 1px, transparent 1px),
        linear-gradient(145deg, #071225, #101d39 55%, #09172b) !important;
    background-size: auto, auto, auto, 42px 42px, 42px 42px, auto !important;
    background-attachment: fixed !important;
    position: relative;
    isolation: isolate;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .28;
    background:
        linear-gradient(90deg, transparent 49.8%, rgba(32, 223, 160, .5) 50%, transparent 50.2%) 12% 30% / 18px 95px no-repeat,
        linear-gradient(90deg, transparent 49.8%, rgba(57, 133, 255, .6) 50%, transparent 50.2%) 17% 23% / 18px 125px no-repeat,
        linear-gradient(90deg, transparent 49.8%, rgba(32, 223, 160, .5) 50%, transparent 50.2%) 22% 35% / 18px 75px no-repeat,
        linear-gradient(90deg, transparent 49.8%, rgba(255, 200, 87, .5) 50%, transparent 50.2%) 78% 25% / 18px 110px no-repeat,
        linear-gradient(90deg, transparent 49.8%, rgba(32, 223, 160, .5) 50%, transparent 50.2%) 83% 32% / 18px 85px no-repeat;
    filter: drop-shadow(0 0 9px rgba(32, 223, 160, .3));
}

body::after {
    content: "";
    position: fixed;
    width: 460px;
    height: 460px;
    right: -180px;
    top: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(57, 133, 255, .17), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: -1;
}

@keyframes mfGlow {
    0%, 100% { box-shadow: 0 12px 35px rgba(0, 0, 0, .22), 0 0 0 rgba(57, 133, 255, 0); }
    50% { box-shadow: 0 15px 40px rgba(0, 0, 0, .28), 0 0 22px rgba(57, 133, 255, .10); }
}

@keyframes mfFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}

/* Main application surfaces */
.app-layout,
.layout,
.app-main,
.main,
.content,
.page-container {
    background: transparent !important;
    color: var(--mf-text) !important;
}

.app-main,
.main {
    min-width: 0;
}

/* Sidebar */
.sidebar,
.app-sidebar {
    background: linear-gradient(165deg, #09152c 0%, #10264a 55%, #192d55 100%) !important;
    color: #edf4ff !important;
    border-right: 1px solid rgba(120, 165, 255, .18) !important;
    box-shadow: 12px 0 40px rgba(0, 0, 0, .25) !important;
}

.sidebar *,
.app-sidebar * {
    color: inherit;
}

.brand {
    color: #ffffff !important;
    letter-spacing: -.5px;
}

.nav-item {
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    transition: all .22s ease !important;
}

.nav-item:hover {
    background: linear-gradient(100deg, rgba(57, 133, 255, .22), rgba(168, 121, 255, .13)) !important;
    border-color: rgba(125, 170, 255, .22) !important;
    transform: translateX(3px);
}

.nav-item.active {
    background: linear-gradient(110deg, rgba(57, 133, 255, .35), rgba(168, 121, 255, .25)) !important;
    border-color: rgba(120, 170, 255, .32) !important;
    box-shadow: 0 5px 22px rgba(57, 133, 255, .18);
}

/* Top navigation */
.topbar {
    color: #ffffff !important;
    background: linear-gradient(105deg, rgba(12, 29, 57, .97), rgba(31, 48, 91, .95), rgba(55, 42, 105, .94)) !important;
    border: 1px solid rgba(130, 170, 255, .15) !important;
    box-shadow: 0 9px 30px rgba(0, 0, 0, .22) !important;
    backdrop-filter: blur(16px);
}

.topbar h1,
.topbar h2,
.topbar h3,
.topbar a,
.topbar span,
.topbar strong {
    color: #ffffff !important;
}

/* Cards and panels */
.card,
.summary-card,
.stat-card,
.panel,
.table-card,
.portfolio-card,
.sip-card,
.section-card,
[class*="summary"],
[class*="metric-card"],
[class*="stat-card"] {
    color: var(--mf-text) !important;
    background: linear-gradient(145deg, rgba(24, 45, 79, .94), rgba(12, 27, 52, .94)) !important;
    border: 1px solid var(--mf-border) !important;
    border-radius: 17px !important;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, .27),
        0 4px 12px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset 0 -1px 0 rgba(0, 0, 0, .18) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.card:hover,
.summary-card:hover,
.stat-card:hover,
.panel:hover,
.table-card:hover,
.portfolio-card:hover,
.sip-card:hover {
    transform: translateY(-4px);
    border-color: rgba(57, 133, 255, .48) !important;
    box-shadow:
        0 20px 42px rgba(0, 0, 0, .32),
        0 0 22px rgba(57, 133, 255, .13),
        inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

/* Headings and text */
h1, h2, h3, h4, h5, h6 {
    color: #f1f6ff !important;
}

p, label, .muted, small, .text-muted {
    color: var(--mf-muted);
}

.metric-value,
.summary-value,
.stat-value {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: -.7px;
    text-shadow: 0 0 18px rgba(57, 133, 255, .18);
}

.metric-label,
.summary-label,
.stat-label {
    color: #a9bad7 !important;
}

.positive,
.text-success {
    color: var(--mf-green) !important;
}

.negative,
.text-danger {
    color: #ff7188 !important;
}

/* Tables */
table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    color: var(--mf-text) !important;
}

thead th,
th {
    color: #bcd0f5 !important;
    background: rgba(42, 67, 111, .78) !important;
    font-weight: 700 !important;
    white-space: nowrap;
    border-bottom: 1px solid rgba(139, 177, 255, .18) !important;
}

th:first-child {
    border-radius: 8px 0 0 8px;
}

th:last-child {
    border-radius: 0 8px 8px 0;
}

td {
    color: #dce8fb !important;
    border-bottom: 1px solid rgba(139, 177, 255, .11) !important;
}

tbody tr {
    transition: background .18s ease;
}

tbody tr:hover {
    background: rgba(57, 133, 255, .10) !important;
}

/* Forms */
input,
select,
textarea {
    color: #edf4ff !important;
    background: rgba(8, 21, 42, .88) !important;
    border: 1px solid rgba(139, 177, 255, .25) !important;
    border-radius: 9px !important;
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: #8094b5 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--mf-blue) !important;
    box-shadow: 0 0 0 3px rgba(57, 133, 255, .18), 0 0 18px rgba(57, 133, 255, .12) !important;
}

option {
    color: #edf4ff;
    background: #10213d;
}

/* Buttons */
button,
.btn,
.logout-button,
.logout {
    border-radius: 9px;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

button:hover,
.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.10);
    box-shadow: 0 8px 22px rgba(57, 133, 255, .22);
}

/* Links */
a {
    transition: color .2s ease;
}

a:hover {
    color: var(--mf-cyan);
}

/* Status labels */
.status,
.badge,
[class*="status-"] {
    border-radius: 30px;
    font-weight: 700;
}

/* Login */
body:has(.login-card) {
    background-color: #071225 !important;
}

.login-card {
    color: var(--mf-text) !important;
    background: linear-gradient(145deg, rgba(24, 45, 79, .97), rgba(10, 23, 45, .97)) !important;
    border: 1px solid rgba(139, 177, 255, .24) !important;
    border-radius: 23px !important;
    box-shadow: 0 28px 75px rgba(0, 0, 0, .42), 0 0 35px rgba(57, 133, 255, .13) !important;
}

.login-card .brand {
    color: #ffffff !important;
}

/* Scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: #365b91 #0a1830;
}

*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-track {
    background: #0a1830;
}

*::-webkit-scrollbar-thumb {
    background: #365b91;
    border-radius: 10px;
}

/* Responsive */
@media (max-width: 1000px) {
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .section-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 650px) {
    .layout {
        flex-direction: column;
    }

    .sidebar,
    .app-sidebar {
        width: 100% !important;
        padding: 16px !important;
    }

    .content {
        padding: 18px !important;
    }

    .topbar {
        padding: 15px 18px !important;
        height: auto !important;
        min-height: 65px;
    }

    .cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 11px !important;
    }

    table {
        min-width: 760px;
    }

    .table-responsive,
    .table-container,
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}
/* Asset Allocation - improve all financial figures and labels */
.app-main .metric-label,
.app-main .summary-label,
.app-main .stat-label,
.main .metric-label,
.main .summary-label,
.main .stat-label {
    color: #c6d8f5 !important;
    font-weight: 600 !important;
}

.app-main .metric-value,
.app-main .summary-value,
.app-main .stat-value,
.main .metric-value,
.main .summary-value,
.main .stat-value {
    color: #ffffff !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    text-shadow: 0 0 14px rgba(57, 133, 255, .25);
}

.app-main .card *,
.app-main .panel *,
.app-main .section-card *,
.main .card *,
.main .panel * {
    color: #dce9ff;
}

.app-main .card h1,
.app-main .card h2,
.app-main .card h3,
.app-main .panel h1,
.app-main .panel h2,
.app-main .panel h3 {
    color: #ffffff !important;
}

.app-main .card p,
.app-main .panel p,
.app-main .card span,
.app-main .panel span {
    color: #c6d8f5;
}

.app-main td,
.app-main th,
.main td,
.main th {
    color: #e4edff !important;
}

.app-main .positive,
.main .positive {
    color: #35e5a7 !important;
}

.app-main .negative,
.main .negative {
    color: #ff8298 !important;
}


/* Portfolio analytics - premium growth chart */
.portfolio-analytics {
    margin: 0 0 24px;
    padding: 25px;
    border: 1px solid rgba(139,177,255,.22);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(22,43,78,.97), rgba(9,23,46,.97));
    box-shadow: 0 18px 42px rgba(0,0,0,.27),
                inset 0 1px 0 rgba(255,255,255,.08);
}
.analytics-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}
.analytics-heading h2 {
    margin: 5px 0 7px;
    font-size: 22px;
    color: #fff !important;
}
.analytics-heading p {
    margin: 0;
    color: #9aacc8 !important;
    font-size: 13px;
}
.analytics-eyebrow {
    color: #21d4fd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}
.analytics-count {
    color: #c7d8f5;
    background: rgba(57,133,255,.14);
    border: 1px solid rgba(57,133,255,.25);
    border-radius: 20px;
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
}
.analytics-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    margin-bottom: 18px;
}
.analytics-filter > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.analytics-filter label {
    color: #a9bad7 !important;
    font-size: 11px;
}
.analytics-filter input,
.analytics-filter select {
    min-width: 155px;
    padding: 10px;
    color: #edf4ff !important;
    background: #0b1b35 !important;
    border: 1px solid rgba(139,177,255,.25) !important;
}
.analytics-filter button {
    border: 0;
    color: #071225;
    background: linear-gradient(100deg,#21d4fd,#3985ff);
    padding: 11px 18px;
    font-weight: 800;
    cursor: pointer;
}
.analytics-filter a {
    color: #21d4fd;
    padding: 10px 4px;
    font-size: 13px;
}
.analytics-chart-wrap {
    width: 100%;
    min-height: 230px;
    border-radius: 14px;
    background: rgba(4,13,29,.35);
    padding: 12px 8px 4px;
}
#portfolioGrowthChart {
    display: block;
    width: 100%;
    height: 330px;
}
.chart-tooltip {
    padding: 10px 12px;
    color: #dce9ff;
    font-size: 12px;
    border-top: 1px solid rgba(139,177,255,.12);
}
.analytics-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 15px;
    color: #c6d8f5;
    font-size: 12px;
}
.analytics-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.legend-dot {
    width: 9px;
    height: 9px;
    display: inline-block;
    border-radius: 50%;
}
.invested-dot { background: #a879ff; }
.current-dot { background: #21d4fd; }
.analytics-warning {
    margin-top: 16px;
    padding: 11px 14px;
    border: 1px solid rgba(255,200,87,.3);
    border-radius: 10px;
    background: rgba(255,200,87,.08);
    color: #ffd98a !important;
    font-size: 12px;
    line-height: 1.6;
}
.analytics-footnote {
    margin-top: 14px;
    color: #91a6c7 !important;
    font-size: 11px;
    line-height: 1.7;
}
.analytics-empty {
    padding: 42px 15px;
    text-align: center;
}
.analytics-empty-icon {
    color: #21d4fd;
    font-size: 36px;
}
.analytics-empty h3 {
    color: #fff !important;
}
.analytics-empty p {
    color: #9aacc8 !important;
    font-size: 13px;
}
@media(max-width:700px) {
    .portfolio-analytics { padding: 17px; }
    .analytics-heading { flex-direction: column; }
    .analytics-filter { display: grid; grid-template-columns: 1fr 1fr; }
    .analytics-filter > div,
    .analytics-filter input,
    .analytics-filter select { width: 100%; min-width: 0; }
    .analytics-filter button { width: 100%; }
    #portfolioGrowthChart { height: 270px; }
}
/* Portfolio asset allocation donut */
.allocation-panel {
    margin: 0 0 24px;
    padding: 25px;
    border: 1px solid rgba(139,177,255,.22);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(22,43,78,.97), rgba(9,23,46,.97));
    box-shadow: 0 18px 42px rgba(0,0,0,.27),
                inset 0 1px 0 rgba(255,255,255,.08);
}
.allocation-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}
.allocation-heading h2 {
    margin: 5px 0 7px;
    font-size: 22px;
}
.allocation-heading p {
    margin: 0;
    color: #9aacc8 !important;
    font-size: 13px;
}
.allocation-total {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: right;
}
.allocation-total span {
    color: #9aacc8;
    font-size: 11px;
}
.allocation-total strong {
    color: #fff;
    font-size: 20px;
}
.allocation-layout {
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(280px, 1.15fr);
    gap: 30px;
    align-items: center;
}
.allocation-donut-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}
.allocation-donut {
    width: 245px;
    height: 245px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    box-shadow: 0 0 35px rgba(33,212,253,.12);
}
.allocation-donut::before {
    content: "";
    position: absolute;
    width: 65%;
    height: 65%;
    border-radius: 50%;
    background: #0c1b35;
    border: 1px solid rgba(139,177,255,.2);
    box-shadow: inset 0 5px 20px rgba(0,0,0,.35);
}
.allocation-donut-center {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    max-width: 62%;
}
.allocation-donut-center span {
    color: #9aacc8;
    font-size: 11px;
}
.allocation-donut-center strong {
    color: #fff;
    font-size: 18px;
    text-align: center;
    overflow-wrap: anywhere;
}
.allocation-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.allocation-item {
    display: grid;
    grid-template-columns: 12px minmax(100px,1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(139,177,255,.12);
    border-radius: 11px;
    background: rgba(5,16,34,.35);
}
.allocation-color {
    width: 11px;
    height: 35px;
    border-radius: 8px;
}
.allocation-equity { background: #21d4fd; }
.allocation-debt { background: #a879ff; }
.allocation-hybrid { background: #20dfa0; }
.allocation-gold { background: #ffc857; }
.allocation-other { background: #ff8298; }
.allocation-unclassified { background: #718096; }
.allocation-item-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.allocation-item-name strong,
.allocation-item-value {
    color: #edf4ff !important;
    font-size: 13px;
}
.allocation-item-name small {
    color: #9aacc8 !important;
    font-size: 11px;
}
@media(max-width:700px) {
    .allocation-panel { padding: 17px; }
    .allocation-heading { flex-direction: column; }
    .allocation-total { text-align: left; }
    .allocation-layout { grid-template-columns: 1fr; gap: 12px; }
    .allocation-donut { width: 210px; height: 210px; }
}

/* MF_SAAS_MASTER_UPGRADE_V1 */
:root {
    color-scheme: dark;
    --mf-bg: #07111f;
    --mf-panel: #101e31;
    --mf-panel-soft: #14263d;
    --mf-border: rgba(148, 174, 205, .17);
    --mf-text: #e8f1fc;
    --mf-muted: #91a6bf;
    --mf-cyan: #28d7c0;
    --mf-blue: #5b8cff;
}

html, body {
    background:
        radial-gradient(ellipse at 12% 0%, rgba(36, 104, 157, .19), transparent 36%),
        radial-gradient(ellipse at 90% 12%, rgba(91, 91, 190, .13), transparent 30%),
        #07111f !important;
    color: var(--mf-text) !important;
}

.layout, .app-layout {
    background: transparent !important;
}

.sidebar, .app-sidebar {
    background: linear-gradient(180deg, #10243e, #091729) !important;
    border-right: 1px solid var(--mf-border);
}

.nav-item, .app-nav-item {
    color: #c7d7e9 !important;
    border-radius: 9px !important;
    transition: background .2s ease, transform .2s ease;
}

.nav-item:hover, .nav-item.active,
.app-nav-item:hover, .app-nav-item.active {
    background: linear-gradient(100deg, rgba(40, 215, 192, .18), rgba(91, 140, 255, .14)) !important;
    color: #fff !important;
}

.topbar, .app-main .topbar {
    background: rgba(13, 27, 45, .94) !important;
    color: var(--mf-text) !important;
    border-bottom: 1px solid var(--mf-border) !important;
    backdrop-filter: blur(14px);
}

.topbar h2, .topbar .brand, .user-info strong {
    color: var(--mf-text) !important;
}

.content, .container {
    color: var(--mf-text) !important;
}

.welcome h1, h1, h2, h3, .section-title,
.panel-heading, .scheme {
    color: var(--mf-text) !important;
}

.welcome p, .subtitle, .muted, .metric-label,
.metric-note, .breadcrumb, .notice {
    color: var(--mf-muted) !important;
}

.card, .panel, .family-ownership-panel,
.portfolio-analytics {
    background: linear-gradient(145deg, rgba(20, 38, 61, .97), rgba(12, 26, 43, .97)) !important;
    border: 1px solid var(--mf-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .22) !important;
    color: var(--mf-text) !important;
}

.metric-value {
    color: #f2f7ff !important;
}

.positive { color: #28d7a5 !important; }
.negative { color: #ff7587 !important; }

table th {
    background: #14263d !important;
    color: #a9bfd8 !important;
    border-color: var(--mf-border) !important;
}

table td {
    color: #dce8f6 !important;
    border-color: var(--mf-border) !important;
}

input, select, textarea {
    background: #0c1a2b !important;
    color: var(--mf-text) !important;
    border: 1px solid var(--mf-border) !important;
}

button, .logout, .logout-button {
    transition: transform .18s ease, filter .18s ease;
}

button:hover, .logout:hover, .logout-button:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.status {
    background: rgba(40, 215, 165, .14) !important;
    color: #55e5b6 !important;
}

.family-ownership-panel {
    padding: 24px;
    margin: 0 0 22px;
}

.family-ownership-eyebrow {
    color: var(--mf-cyan);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.family-ownership-description {
    color: var(--mf-muted);
    font-size: 13px;
    margin: -8px 0 22px;
}

.family-ownership-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
    flex-wrap: wrap;
    padding: 12px 0;
}

.family-ownership-ring {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 0 35px rgba(40, 215, 192, .12);
}

.family-ownership-center {
    width: 154px;
    height: 154px;
    border-radius: 50%;
    background: #101e31;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
}

.family-ownership-center strong {
    color: #fff;
    font-size: 19px;
    overflow-wrap: anywhere;
}

.family-ownership-center span {
    color: var(--mf-muted);
    font-size: 11px;
    margin-top: 5px;
}

.family-ownership-legend {
    flex: 1;
    min-width: 230px;
    max-width: 520px;
}

.family-ownership-member,
.family-ownership-name,
.family-ownership-amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.family-ownership-member {
    padding: 13px 0;
    border-bottom: 1px solid var(--mf-border);
    font-size: 13px;
}

.family-ownership-name {
    justify-content: flex-start;
    min-width: 0;
}

.family-ownership-name span {
    overflow-wrap: anywhere;
}

.family-ownership-name i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.family-ownership-amount {
    flex-direction: column;
    align-items: flex-end;
}

.family-ownership-amount strong { color: #fff; }
.family-ownership-amount span { color: var(--mf-muted); font-size: 11px; }

@media(max-width: 600px) {
    .family-ownership-content { gap: 20px; }
    .family-ownership-ring { width: 185px; height: 185px; }
    .family-ownership-center { width: 130px; height: 130px; }
    .family-ownership-center strong { font-size: 16px; }
    .family-ownership-panel { padding: 17px; }
}