@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    --navy: #071848;
    --navy-2: #0c2768;
    --blue: #174ea6;
    --gold: #dba53a;
    --gold-soft: #fff6df;
    --ink: #17213a;
    --muted: #6b7488;
    --line: #e7eaf0;
    --surface: #ffffff;
    --canvas: #f5f7fb;
    --green: #159b67;
    --red: #d84c5b;
    --purple: #7857c8;
    --shadow: 0 16px 50px rgba(22, 37, 72, .08);
    --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: "DM Sans", sans-serif; background: var(--canvas); }
a { color: var(--blue); text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, .btn { cursor: pointer; }
img { max-width: 100%; }
h1, h2, h3, strong { font-family: "Manrope", sans-serif; }

.btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    display: inline-flex;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    transition: .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--navy-2), var(--blue)); box-shadow: 0 8px 18px rgba(15, 61, 145, .2); color: #fff; }
.btn-primary:hover { box-shadow: 0 12px 26px rgba(15, 61, 145, .3); color: #fff; }
.btn-light { background: #fff; border-color: var(--line); color: var(--navy); }
.btn-ghost { background: transparent; border-color: rgba(7, 24, 72, .18); color: var(--navy); }
.btn-large { min-height: 50px; padding: 13px 22px; }
.btn-small { font-size: 12px; min-height: 34px; padding: 7px 12px; }
.full { grid-column: 1 / -1; width: 100%; }
.right-text { text-align: right; }

.eyebrow, .hero-kicker {
    color: var(--blue);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.alert { border: 1px solid; border-radius: 11px; font-size: 14px; margin-bottom: 16px; padding: 13px 15px; }
.alert-success { background: #ecfbf5; border-color: #bcebd8; color: #08744b; }
.alert-error, .alert-danger { background: #fff0f2; border-color: #f4cbd0; color: #b32638; }
.alert-warning { background: #fff8e8; border-color: #f0dda8; color: #846015; }
.alert-info { background: #edf5ff; border-color: #cbdffb; color: #23538b; }

/* Public website */
.public-body { background: #fff; }
.public-nav {
    align-items: center;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid rgba(10, 40, 100, .08);
    display: flex;
    height: 78px;
    justify-content: space-between;
    padding: 0 clamp(22px, 6vw, 90px);
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(14px);
}
.public-logo img { display: block; height: 54px; width: auto; }
.public-nav nav { display: flex; gap: 34px; }
.public-nav nav a { color: #424b60; font-size: 14px; font-weight: 600; }
.nav-buttons { display: flex; gap: 10px; }
.public-flash { left: 50%; max-width: 680px; position: fixed; top: 92px; transform: translateX(-50%); width: calc(100% - 40px); z-index: 50; }
.hero {
    align-items: center;
    background:
        radial-gradient(circle at 86% 24%, rgba(219,165,58,.16), transparent 28%),
        radial-gradient(circle at 6% 85%, rgba(23,78,166,.09), transparent 25%),
        linear-gradient(140deg, #fafdff 0%, #f1f6ff 55%, #fffaf0 100%);
    display: grid;
    gap: 70px;
    grid-template-columns: 1.05fr .95fr;
    min-height: 680px;
    overflow: hidden;
    padding: 90px clamp(28px, 8vw, 125px);
}
.hero-copy { max-width: 690px; position: relative; z-index: 2; }
.hero-copy h1 { color: var(--navy); font-size: clamp(44px, 5.4vw, 74px); letter-spacing: -.055em; line-height: 1.04; margin: 14px 0 22px; }
.hero-copy h1 em { color: var(--blue); font-style: normal; }
.hero-copy > p { color: #5f6d83; font-size: 18px; line-height: 1.75; max-width: 630px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 25px; }
.trust-row { color: #526078; display: flex; flex-wrap: wrap; font-size: 13px; gap: 22px; }
.trust-row span::first-letter { color: var(--green); }
.hero-panel { min-height: 500px; position: relative; }
.hero-card-main {
    background: linear-gradient(145deg, #071848, #123b91);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 30px;
    box-shadow: 0 36px 70px rgba(5, 24, 72, .25);
    color: #fff;
    inset: 50px 20px 30px 20px;
    overflow: hidden;
    padding: 45px;
    position: absolute;
    transform: rotate(-2deg);
}
.hero-card-main::after { background: rgba(255,255,255,.07); border-radius: 50%; content: ""; height: 300px; position: absolute; right: -80px; top: -100px; width: 300px; }
.card-label { color: #d8e5ff; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero-card-main h3 { font-size: 31px; line-height: 1.2; margin: 18px 0 35px; max-width: 410px; }
.mini-stats { display: grid; gap: 10px; grid-template-columns: repeat(3,1fr); }
.mini-stats div { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 13px; padding: 14px; }
.mini-stats small, .mini-stats strong { display: block; }
.mini-stats small { color: #b7c9ee; font-size: 10px; }
.mini-stats strong { font-size: 13px; margin-top: 6px; }
.mock-chart { align-items: end; display: flex; gap: 12px; height: 110px; margin-top: 28px; }
.mock-chart i { background: linear-gradient(#f3c45d,#d39d25); border-radius: 7px 7px 2px 2px; flex: 1; }
.mock-chart i:nth-child(1) { height: 27%; }.mock-chart i:nth-child(2) { height: 42%; }.mock-chart i:nth-child(3) { height: 37%; }.mock-chart i:nth-child(4) { height: 64%; }.mock-chart i:nth-child(5) { height: 55%; }.mock-chart i:nth-child(6) { height: 78%; }.mock-chart i:nth-child(7) { height: 93%; }
.floating-card { align-items: center; background: #fff; border: 1px solid rgba(15, 49, 110, .1); border-radius: 16px; box-shadow: var(--shadow); display: grid; gap: 2px 10px; grid-template-columns: 38px 1fr; padding: 16px 18px; position: absolute; z-index: 3; }
.floating-card > span { align-items: center; background: var(--gold-soft); border-radius: 10px; color: #b17b10; display: flex; font-size: 22px; grid-row: 1 / 3; height: 38px; justify-content: center; }
.floating-card strong { color: var(--navy); font-size: 13px; }
.floating-card small { color: var(--muted); font-size: 11px; }
.float-one { left: -15px; top: 15px; }
.float-two { bottom: 0; right: -10px; }
.feature-section { padding: 110px clamp(28px, 8vw, 125px); }
.section-intro { margin: 0 auto 55px; max-width: 680px; text-align: center; }
.section-intro h2 { color: var(--navy); font-size: clamp(34px, 4vw, 50px); letter-spacing: -.04em; margin: 10px 0 15px; }
.section-intro p { color: var(--muted); font-size: 17px; line-height: 1.7; }
.feature-grid { display: grid; gap: 18px; grid-template-columns: repeat(4,1fr); }
.feature-grid article { background: #fff; border: 1px solid var(--line); border-radius: 20px; min-height: 245px; padding: 30px; transition: .25s; }
.feature-grid article:hover { border-color: #b9c9e8; box-shadow: var(--shadow); transform: translateY(-6px); }
.feature-grid article > span { color: var(--gold); font-family: "Manrope"; font-size: 13px; font-weight: 800; }
.feature-grid h3 { color: var(--navy); font-size: 20px; margin: 42px 0 12px; }
.feature-grid p { color: var(--muted); line-height: 1.7; }
.public-cta { align-items: center; background: var(--navy); border-radius: 30px; color: #fff; display: grid; gap: 30px; grid-template-columns: 1.2fr 1fr auto; margin: 0 clamp(28px, 6vw, 90px) 90px; padding: 55px; }
.public-cta .eyebrow { color: #f0c562; }
.public-cta h2 { font-size: 32px; margin: 5px 0 0; }
.public-cta p { color: #c4cee3; line-height: 1.7; }
.public-footer { align-items: center; background: #f7f8fb; border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-direction: column; gap: 8px; padding: 45px 20px; text-align: center; }
.public-footer img { height: 60px; }
.public-footer p { margin: 0; }
.public-footer span { font-size: 12px; margin-top: 8px; }

/* Authentication */
.auth-body { background: #edf2fa; min-height: 100vh; }
.auth-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth-side { background: linear-gradient(145deg, #061641, #123b91); color: #fff; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: clamp(50px, 8vw, 120px); position: relative; }
.auth-side::after { border: 70px solid rgba(255,255,255,.045); border-radius: 50%; content: ""; height: 420px; position: absolute; right: -190px; top: -160px; width: 420px; }
.auth-logo { background: #fff; border-radius: 10px; height: 65px; margin-bottom: 70px; object-fit: contain; padding: 7px; width: 300px; }
.auth-side .hero-kicker { color: #efc45e; }
.auth-side h1 { font-size: clamp(38px, 4vw, 60px); letter-spacing: -.05em; line-height: 1.07; margin: 15px 0 22px; max-width: 680px; }
.auth-side > p { color: #c3cee4; font-size: 17px; line-height: 1.75; max-width: 600px; }
.auth-points { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.auth-points span { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #e4ebfa; font-size: 12px; padding: 10px 13px; }
.auth-card { align-self: center; background: #fff; border: 1px solid rgba(8, 38, 96, .08); border-radius: 22px; box-shadow: var(--shadow); justify-self: center; margin: 40px; max-width: 660px; padding: clamp(28px, 5vw, 58px); width: calc(100% - 80px); }
.auth-heading { margin-bottom: 28px; }
.auth-heading h1, .auth-heading h2 { color: var(--navy); font-size: 32px; letter-spacing: -.035em; margin: 5px 0 8px; }
.auth-heading p { color: var(--muted); margin: 0; }
.auth-brand { align-items: center; display: flex; gap: 25px; margin-bottom: 35px; }
.auth-brand img { border: 1px solid var(--line); border-radius: 10px; height: 75px; object-fit: contain; width: 240px; }
.auth-brand h1 { color: var(--navy); font-size: 27px; margin: 3px 0; }
.auth-brand p { color: var(--muted); margin: 0; }
.setup-shell { display: flex; justify-content: center; min-height: 100vh; padding: 40px 20px; }
.setup-card { margin: auto; max-width: 850px; width: 100%; }
.stack-form { display: grid; gap: 18px; }
.form-grid { display: grid; gap: 18px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.stack-form label, .form-grid label { color: #39445b; display: grid; font-size: 13px; font-weight: 700; gap: 7px; }
input, select, textarea {
    background: #fff;
    border: 1px solid #dfe4ed;
    border-radius: 9px;
    color: var(--ink);
    min-height: 43px;
    outline: none;
    padding: 10px 12px;
    transition: .2s;
    width: 100%;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #7095d4; box-shadow: 0 0 0 3px rgba(31, 86, 172, .09); }
input[readonly] { background: #f4f6f9; color: var(--muted); }
label small { color: var(--muted); font-size: 11px; font-weight: 500; }
.password-field { display: flex; position: relative; }
.password-field button { background: transparent; border: 0; color: var(--blue); font-size: 12px; font-weight: 700; padding: 0 12px; position: absolute; right: 3px; top: 12px; }
.checkbox { align-items: start; display: flex !important; flex-direction: row; }
.checkbox input { height: 18px; min-height: auto; width: 18px; }
.section-label { border-bottom: 1px solid var(--line); color: var(--navy); font-family: "Manrope"; font-size: 14px; font-weight: 800; margin-top: 8px; padding-bottom: 10px; }
.auth-switch { color: var(--muted); font-size: 13px; margin: 22px 0; text-align: center; }
.auth-switch a, .back-home { font-weight: 700; }
.back-home { display: block; font-size: 12px; text-align: center; }
.form-help { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 20px 0 0; }

/* Application shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    background: #061640;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    left: 0;
    overflow-y: auto;
    padding: 22px 16px;
    position: fixed;
    top: 0;
    width: 258px;
    z-index: 40;
}
.side-brand { background: #fff; border-radius: 11px; display: block; height: 64px; margin: 0 4px 22px; overflow: hidden; padding: 5px 12px; }
.side-brand img { height: 100%; object-fit: contain; width: 100%; }
.account-pill { align-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; display: flex; gap: 10px; margin: 0 3px 19px; padding: 10px; }
.avatar { align-items: center; background: linear-gradient(145deg, #e9bd56, #b47a11); border-radius: 9px; color: #fff; display: flex; font-family: "Manrope"; font-weight: 800; height: 36px; justify-content: center; width: 36px; }
.account-pill strong, .account-pill small { display: block; max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-pill strong { font-size: 12px; }
.account-pill small { color: #9dadcb; font-size: 10px; margin-top: 2px; }
.side-nav { display: grid; gap: 3px; }
.side-nav a, .side-logout button { align-items: center; background: transparent; border: 0; border-radius: 9px; color: #aebbd4; display: flex; font-size: 13px; font-weight: 600; gap: 12px; padding: 11px 12px; text-align: left; transition: .2s; width: 100%; }
.side-nav a:hover, .side-nav a.active { background: linear-gradient(90deg, rgba(32,91,192,.55), rgba(32,91,192,.16)); color: #fff; }
.side-nav a.active { box-shadow: inset 3px 0 var(--gold); }
.side-nav svg, .side-logout svg, .topbar svg, .quick-grid svg, .stat-icon svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 18px; }
.side-logout { border-top: 1px solid rgba(255,255,255,.09); margin-top: auto; padding-top: 14px; }
.main-area { margin-left: 258px; min-width: 0; width: calc(100% - 258px); }
.topbar { align-items: center; background: rgba(255,255,255,.93); border-bottom: 1px solid var(--line); display: flex; height: 80px; justify-content: space-between; padding: 0 32px; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); }
.topbar h1 { color: var(--navy); font-size: 20px; margin: 0; }
.top-actions { align-items: center; display: flex; gap: 16px; }
.icon-button { align-items: center; background: #f4f6fa; border: 1px solid var(--line); border-radius: 9px; color: var(--navy); display: flex; height: 38px; justify-content: center; width: 38px; }
.status-dot { background: var(--green); border: 3px solid #d9f4e9; border-radius: 50%; height: 12px; width: 12px; }
.menu-btn { background: transparent; border: 0; color: var(--navy); display: none; font-size: 22px; }
.content { margin: 0 auto; max-width: 1620px; min-height: calc(100vh - 135px); padding: 28px 32px 42px; }
.app-footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: 11px; justify-content: space-between; padding: 18px 32px; }
.mobile-overlay { display: none; }

/* Reusable dashboard components */
.page-heading { align-items: end; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 22px; }
.page-heading h2 { color: var(--navy); font-size: 25px; letter-spacing: -.03em; margin: 0 0 5px; }
.page-heading p { color: var(--muted); font-size: 13px; margin: 0; }
.welcome-banner {
    align-items: center;
    background:
        radial-gradient(circle at 85% 20%, rgba(219,165,58,.23), transparent 24%),
        linear-gradient(125deg, #071848, #123a8b);
    border-radius: var(--radius);
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    min-height: 170px;
    overflow: hidden;
    padding: 34px 38px;
    position: relative;
}
.welcome-banner::after { border: 35px solid rgba(255,255,255,.04); border-radius: 50%; content: ""; height: 210px; position: absolute; right: -85px; top: -90px; width: 210px; }
.welcome-banner .eyebrow { color: #efc45e; }
.welcome-banner h2 { font-size: 31px; letter-spacing: -.04em; margin: 5px 0 8px; }
.welcome-banner p { color: #cbd5e9; font-size: 14px; margin: 0; }
.member-chip, .admin-date { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); border-radius: 13px; min-width: 185px; padding: 15px 18px; position: relative; z-index: 2; }
.member-chip small, .member-chip strong, .admin-date small, .admin-date strong, .admin-date span { display: block; }
.member-chip small, .admin-date small { color: #bdcae3; font-size: 10px; }
.member-chip strong, .admin-date strong { font-size: 18px; margin: 3px 0 8px; }
.member-chip button { background: transparent; border: 0; color: #f1c765; font-size: 11px; font-weight: 700; padding: 0; }
.admin-date span { color: #cbd5e9; font-size: 11px; }
.stat-grid { display: grid; gap: 16px; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 20px; }
.stat-grid.compact { grid-template-columns: repeat(3,minmax(0,1fr)); }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 5px 24px rgba(26,42,77,.035); min-height: 137px; padding: 21px; position: relative; }
.stat-card > small, .stat-card > strong, .stat-card > em { display: block; }
.stat-card > small { color: var(--muted); font-size: 11px; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; }
.stat-card > strong { color: var(--navy); font-size: 24px; letter-spacing: -.03em; }
.stat-card > strong.smaller { font-size: 17px; margin-top: 4px; }
.stat-card > em { color: #8a93a5; font-size: 11px; font-style: normal; margin-top: 8px; }
.stat-icon { align-items: center; border-radius: 9px; display: flex; height: 36px; justify-content: center; position: absolute; right: 18px; top: 18px; width: 36px; }
.stat-icon.blue { background: #eaf2ff; color: #2d66bd; }.stat-icon.gold { background: var(--gold-soft); color: #b47c10; }.stat-icon.green { background: #eaf9f2; color: #159b67; }.stat-icon.purple { background: #f1edfc; color: var(--purple); }
.split-grid { display: grid; gap: 20px; grid-template-columns: minmax(0,1.35fr) minmax(340px,.65fr); margin-bottom: 20px; }
.form-split { align-items: start; grid-template-columns: minmax(360px,.8fr) minmax(0,1.2fr); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(26,42,77,.035); padding: 22px; }
.panel-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 18px; }
.panel-head h3 { color: var(--navy); font-size: 17px; margin: 0; }
.panel-head a { font-size: 11px; font-weight: 700; }
.business-sides { display: grid; gap: 15px; grid-template-columns: 1fr 1fr; }
.business-side { border: 1px solid var(--line); border-radius: 13px; padding: 17px; position: relative; }
.business-side > span { align-items: center; border-radius: 8px; display: flex; font-weight: 800; height: 31px; justify-content: center; position: absolute; right: 14px; top: 14px; width: 31px; }
.business-side.left > span { background: #eaf2ff; color: #2d66bd; }.business-side.right > span { background: var(--gold-soft); color: #b47c10; }
.business-side small, .business-side strong { display: block; }
.business-side small { color: var(--muted); font-size: 10px; margin-bottom: 7px; text-transform: uppercase; }
.business-side strong { color: var(--navy); font-size: 20px; }
.progress { background: #edf0f5; border-radius: 10px; height: 6px; margin-top: 15px; overflow: hidden; }
.progress i { background: linear-gradient(90deg,var(--blue),#4a85df); border-radius: inherit; display: block; height: 100%; }
.business-side.right .progress i { background: linear-gradient(90deg,var(--gold),#f0c866); }
.pair-note { align-items: center; background: #f6f8fb; border-radius: 10px; display: flex; font-size: 11px; justify-content: space-between; margin-top: 14px; padding: 11px 14px; }
.pair-note span { color: var(--muted); }
.quick-grid { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.quick-grid a { align-items: center; background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; color: #47536a; display: flex; font-size: 11px; font-weight: 700; gap: 9px; padding: 12px; }
.quick-grid a:hover { background: #edf3ff; color: var(--blue); }
.referral-box { border-top: 1px solid var(--line); margin-top: 17px; padding-top: 15px; }
.referral-box label { color: var(--muted); display: block; font-size: 10px; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; }
.referral-box div { display: flex; }
.referral-box input { border-radius: 8px 0 0 8px; font-size: 10px; min-height: 36px; }
.referral-box button { background: var(--navy); border: 0; border-radius: 0 8px 8px 0; color: #fff; font-size: 10px; font-weight: 700; padding: 0 14px; }
.count-pill { background: #eef3fc; border-radius: 999px; color: var(--blue); font-size: 11px; font-weight: 800; padding: 6px 10px; }

/* Tables, forms and list content */
.table-panel { overflow: hidden; padding: 0; }
.table-panel > .panel-head { padding: 22px 22px 0; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; min-width: 620px; width: 100%; }
th { background: #fafbfc; border-bottom: 1px solid var(--line); color: #7b8495; font-size: 10px; letter-spacing: .04em; padding: 11px 16px; text-align: left; text-transform: uppercase; }
td { border-bottom: 1px solid #edf0f4; color: #4e586b; font-size: 12px; padding: 13px 16px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
td strong, td small { display: block; }
td strong { color: #253048; font-size: 12px; }
td small { color: #9098a8; font-size: 10px; margin-top: 3px; }
.amount-positive { color: var(--green) !important; font-weight: 700; }
.amount-negative { color: var(--red) !important; font-weight: 700; }
.badge { border-radius: 999px; display: inline-block; font-family: "DM Sans"; font-size: 9px; font-weight: 800; padding: 4px 8px; text-transform: uppercase; white-space: nowrap; }
.badge-success { background: #e8f8f1; color: #087a4f; }.badge-danger { background: #fff0f2; color: #bd3042; }.badge-warning { background: #fff5df; color: #9a6a0a; }
.empty-state { color: var(--muted); padding: 42px 25px; text-align: center; }
.empty-icon { align-items: center; background: #f1f4f9; border-radius: 50%; color: #8794aa; display: flex; font-size: 28px; height: 55px; justify-content: center; margin: 0 auto 13px; width: 55px; }
.empty-state h3 { color: #4a556d; font-size: 15px; margin: 0 0 6px; }
.empty-state p { font-size: 11px; margin: 0; }
.form-panel { padding: 28px; }
.balance-strip { align-items: center; background: linear-gradient(135deg,#edf3ff,#fff8e8); border-radius: 11px; display: flex; justify-content: space-between; padding: 16px; }
.balance-strip span { color: var(--muted); font-size: 11px; }
.balance-strip strong { color: var(--navy); font-size: 20px; }
.account-preview { background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; display: grid; font-size: 11px; gap: 5px; padding: 13px; }
.account-preview span { color: var(--muted); }
.account-preview a { font-weight: 700; }
.file-drop { background: #f8fafc; border: 1px dashed #b6c3d8; border-radius: 12px; cursor: pointer; padding: 25px; text-align: center; }
.file-drop input { display: none; }
.file-drop span, .file-drop small { display: block; }
.file-drop span { color: var(--blue); }
.document-list { display: grid; }
.document-list > div { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 12px; padding: 14px 0; }
.document-list > div:last-child { border-bottom: 0; }
.doc-icon { align-items: center; background: #edf2fa; border-radius: 8px; color: var(--blue); display: flex; font-size: 9px; font-weight: 800; height: 38px; justify-content: center; width: 38px; }
.document-list p { flex: 1; margin: 0; }
.document-list strong, .document-list small { display: block; }
.document-list strong { font-size: 12px; }.document-list small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.inline-form { align-items: center; display: flex; gap: 6px; min-width: 400px; }
.inline-form input, .inline-form select { font-size: 10px; min-height: 33px; padding: 6px 8px; }
.search-bar { display: flex; gap: 9px; }
.search-bar input { max-width: 420px; }
.level-rule { align-items: center; background: #f8f9fb; border: 1px solid var(--line); border-radius: 9px; display: grid; gap: 8px; grid-template-columns: 70px 1fr 1fr 1fr; padding: 8px 10px; }
.level-rule input, .level-rule select { min-height: 36px; }
.level-rule strong { font-size: 11px; }
.readiness-list { display: grid; margin-bottom: 17px; }
.readiness-list > div { align-items: center; border-bottom: 1px solid var(--line); display: flex; font-size: 12px; justify-content: space-between; padding: 12px 0; }
.engine-card { background: linear-gradient(145deg,#f3f7ff,#fffbf2); border: 1px solid #dfe6f1; border-radius: 15px; margin-bottom: 15px; padding: 25px; text-align: center; }
.engine-card > span { align-items: center; background: var(--navy); border-radius: 12px; color: #fff; display: flex; height: 48px; justify-content: center; margin: 0 auto 12px; width: 48px; }
.engine-card svg { fill: none; height: 25px; stroke: currentColor; stroke-width: 1.7; width: 25px; }
.engine-card h3 { color: var(--navy); font-size: 16px; margin: 0 0 8px; }
.engine-card p { color: var(--muted); font-size: 11px; line-height: 1.6; }

/* Member-specific */
.tree-panel { overflow-x: auto; }
.tree-legend { display: flex; gap: 20px; justify-content: center; margin-bottom: 30px; }
.tree-legend span { align-items: center; color: var(--muted); display: flex; font-size: 10px; gap: 6px; }
.dot { border-radius: 50%; height: 8px; width: 8px; }.dot.active { background: var(--green); }.dot.pending { background: var(--gold); }.dot.vacant { background: #c9cfda; }
.tree-canvas { display: flex; justify-content: center; min-width: 920px; padding: 10px 10px 35px; }
.tree-branch { align-items: center; display: flex; flex-direction: column; position: relative; }
.tree-node { align-items: center; background: #fff; border: 1px solid #d9dfeb; border-radius: 12px; box-shadow: 0 8px 20px rgba(15,40,80,.07); display: flex; flex-direction: column; min-height: 118px; padding: 12px; position: relative; text-align: center; width: 155px; z-index: 2; }
.tree-node > span { align-items: center; background: var(--navy); border-radius: 50%; color: #fff; display: flex; font-family: "Manrope"; font-weight: 800; height: 34px; justify-content: center; margin-bottom: 7px; width: 34px; }
.tree-node > small { color: var(--muted); font-size: 8px; }.tree-node > strong { color: var(--navy); font-size: 10px; margin: 4px 0; max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-node.active { border-top: 3px solid var(--green); }.tree-node.pending, .tree-node.inactive { border-top: 3px solid var(--gold); }
.tree-node.empty { border-style: dashed; box-shadow: none; color: var(--muted); justify-content: center; }
.tree-node.empty > span { background: #edf0f5; color: #9aa3b2; }
.tree-children { display: flex; gap: 25px; padding-top: 45px; position: relative; }
.tree-children::before { background: #cfd6e2; content: ""; height: 25px; left: 50%; position: absolute; top: 0; width: 1px; }
.tree-children > .tree-branch::before { background: #cfd6e2; content: ""; height: 20px; left: 50%; position: absolute; top: -20px; width: 1px; }
.tree-children > .tree-branch:first-child::after { border-left: 1px solid #cfd6e2; border-top: 1px solid #cfd6e2; content: ""; height: 1px; left: 50%; position: absolute; top: -20px; width: calc(50% + 12px); }
.tree-children > .tree-branch:last-child::after { border-right: 1px solid #cfd6e2; border-top: 1px solid #cfd6e2; content: ""; height: 1px; position: absolute; right: 50%; top: -20px; width: calc(50% + 12px); }
.income-summary { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.income-summary article { background: #fff; border: 1px solid var(--line); border-radius: 12px; min-width: 160px; padding: 15px; }
.income-summary span, .income-summary strong { display: block; }.income-summary span { color: var(--muted); font-size: 10px; text-transform: uppercase; }.income-summary strong { color: var(--navy); font-size: 18px; margin-top: 5px; }
.wallet-hero { align-items: center; background: linear-gradient(135deg,#0c2768,#1762c8); border-radius: 18px; box-shadow: 0 18px 35px rgba(14,55,128,.2); color: #fff; display: flex; justify-content: space-between; margin-bottom: 20px; max-width: 520px; min-height: 190px; overflow: hidden; padding: 30px; position: relative; }
.wallet-hero::after { border: 28px solid rgba(255,255,255,.06); border-radius: 50%; content: ""; height: 180px; position: absolute; right: -50px; top: -60px; width: 180px; }
.wallet-hero span, .wallet-hero strong, .wallet-hero small { display: block; }.wallet-hero span { color: #c8d7f2; font-size: 11px; }.wallet-hero strong { font-size: 34px; margin: 9px 0 30px; }.wallet-hero small { color: #dbe5f7; }
.wallet-mark { align-items: center; border: 2px solid #e5b951; border-radius: 50%; color: #e5b951; display: flex; font-family: "Manrope"; font-size: 44px; font-weight: 800; height: 80px; justify-content: center; position: relative; width: 80px; z-index: 2; }
.product-grid { display: grid; gap: 18px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.product-card { background: #fff; border: 1px solid var(--line); border-radius: 17px; overflow: hidden; }
.product-image { align-items: center; background: linear-gradient(145deg,#eef4ff,#fff8e8); display: flex; height: 190px; justify-content: center; position: relative; }
.product-image > span { align-items: center; background: var(--navy); border: 4px solid var(--gold); border-radius: 50%; color: #fff; display: flex; font-family: "Manrope"; font-size: 47px; font-weight: 800; height: 90px; justify-content: center; width: 90px; }
.product-image img { height: 100%; object-fit: cover; width: 100%; }
.product-image em { background: #fff; border-radius: 999px; bottom: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.07); font-size: 9px; font-style: normal; font-weight: 700; left: 12px; padding: 5px 9px; position: absolute; }
.product-copy { padding: 18px; }.product-copy > small { color: var(--muted); font-size: 9px; }.product-copy h3 { color: var(--navy); font-size: 17px; margin: 5px 0 8px; }.product-copy > p { color: var(--muted); font-size: 11px; height: 34px; line-height: 1.55; overflow: hidden; }
.price-row { align-items: baseline; display: flex; gap: 8px; }.price-row strong { color: var(--navy); font-size: 20px; }.price-row del { color: #a0a7b4; font-size: 11px; }
.bv-row { display: flex; gap: 7px; margin: 12px 0; }.bv-row span { background: #f1f4f8; border-radius: 6px; color: #687287; font-size: 9px; padding: 5px 7px; }
.buy-form { display: grid; gap: 7px; grid-template-columns: 65px 1fr; }.buy-form input { font-size: 10px; min-height: 36px; }.buy-form input[name="shipping_address"] { grid-column: 1 / -1; }.buy-form .btn { min-height: 36px; }
.ticket-list { display: grid; gap: 12px; }.ticket-list article { border: 1px solid var(--line); border-radius: 11px; padding: 14px; }.ticket-list article > div { align-items: center; display: flex; justify-content: space-between; }.ticket-list small { color: var(--muted); font-size: 9px; }.ticket-list p { color: #545f73; font-size: 11px; }.ticket-list blockquote { background: #edf5ff; border-left: 3px solid var(--blue); color: #3b5277; font-size: 10px; margin: 10px 0 0; padding: 10px; }
.notification-list { display: grid; gap: 0; padding: 0; }.notification-list article { align-items: start; border-bottom: 1px solid var(--line); display: flex; gap: 13px; padding: 18px 22px; }.notification-list article:last-child { border-bottom: 0; }.notification-list article.unread { background: #f5f8ff; }.notification-list article > span { align-items: center; background: #eaf1ff; border-radius: 9px; color: var(--blue); display: flex; font-weight: 800; height: 38px; justify-content: center; width: 38px; }.notification-list strong { color: var(--navy); font-size: 13px; }.notification-list p { color: #596479; font-size: 11px; margin: 4px 0; }.notification-list small { color: #939baa; font-size: 9px; }

@media (max-width: 1180px) {
    .feature-grid { grid-template-columns: repeat(2,1fr); }
    .public-cta { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2,1fr); }
    .split-grid, .form-split { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
    .public-nav nav { display: none; }
    .hero { gap: 20px; grid-template-columns: 1fr; padding-bottom: 60px; }
    .hero-panel { min-height: 450px; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-side { min-height: 440px; padding: 55px 35px; }
    .auth-logo { margin-bottom: 40px; }
    .sidebar { transform: translateX(-100%); transition: .25s ease; }
    .sidebar.open { transform: translateX(0); }
    .main-area { margin-left: 0; width: 100%; }
    .menu-btn { display: block; }
    .topbar { padding: 0 20px; }
    .content { padding: 22px 20px 35px; }
    .mobile-overlay.open { background: rgba(1,10,32,.55); display: block; inset: 0; position: fixed; z-index: 30; }
}

@media (max-width: 650px) {
    .public-nav { height: 68px; padding: 0 15px; }
    .public-logo img { height: 45px; }
    .nav-buttons .btn-ghost { display: none; }
    .nav-buttons .btn { font-size: 11px; min-height: 38px; padding: 8px 12px; }
    .hero { min-height: auto; padding: 65px 20px 40px; }
    .hero-copy h1 { font-size: 43px; }
    .hero-copy > p { font-size: 15px; }
    .hero-actions .btn { width: 100%; }
    .trust-row { display: grid; gap: 8px; }
    .hero-panel { min-height: 400px; }
    .hero-card-main { inset: 45px 0 25px; padding: 30px 23px; }
    .hero-card-main h3 { font-size: 24px; }
    .mini-stats { grid-template-columns: 1fr; }
    .mini-stats div:nth-child(n+2) { display: none; }
    .feature-section { padding: 75px 20px; }
    .feature-grid { grid-template-columns: 1fr; }
    .public-cta { border-radius: 18px; margin: 0 15px 60px; padding: 30px 24px; }
    .auth-side { min-height: 390px; }
    .auth-side h1 { font-size: 36px; }
    .auth-card { margin: 20px; padding: 27px 21px; width: calc(100% - 40px); }
    .auth-brand { align-items: start; flex-direction: column; }
    .auth-brand img { width: 100%; }
    .form-grid { grid-template-columns: 1fr; }
    .welcome-banner { align-items: start; flex-direction: column; gap: 22px; padding: 28px 24px; }
    .member-chip, .admin-date { min-width: 100%; }
    .stat-grid, .stat-grid.compact { grid-template-columns: 1fr; }
    .business-sides, .quick-grid { grid-template-columns: 1fr; }
    .page-heading { align-items: start; flex-direction: column; }
    .product-grid { grid-template-columns: 1fr; }
    .wallet-hero { min-height: 170px; padding: 24px; }
    .wallet-mark { height: 60px; width: 60px; }
    .level-rule { grid-template-columns: 1fr; }
    .app-footer { flex-direction: column; gap: 6px; }
    .top-actions { display: none; }
}

@media print {
    .sidebar, .topbar, .app-footer, .page-heading .btn, .alert { display: none !important; }
    .main-area { margin: 0; width: 100%; }
    .content { padding: 0; }
    .panel { box-shadow: none; }
}