:root {
    --brand-primary: #10243e;
    --brand-accent: #176bda;
}

.topbar {
    min-height: 88px;
    background: linear-gradient(118deg, var(--brand-primary) 0%, color-mix(in srgb, var(--brand-primary) 78%, #06111f) 100%);
    border-bottom: 3px solid var(--brand-accent);
}

.brand-zone, .topbar-right, .brand-copy, .account-chip {
    display: flex;
    align-items: center;
}

.brand-zone { gap: 18px; }
.topbar-right { gap: 24px; }
.brand-copy { align-items: flex-start; flex-direction: column; line-height: 1.15; }
.brand-copy strong { color: #fff; font-size: 16px; letter-spacing: -.01em; }
.brand-copy small { color: rgba(255,255,255,.66); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; margin-top: 5px; }
.brand-mark { background: var(--brand-accent); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.role-chip { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.09); color: #fff; border-radius: 999px; padding: 5px 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.account-chip { gap: 9px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.18); }
.account-chip > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.13); color: #fff; font-weight: 800; }
.account-chip div { display: flex; flex-direction: column; line-height: 1.15; }
.account-chip strong { color: #fff; font-size: 12px; }
.account-chip small { color: rgba(255,255,255,.62); font-size: 10px; margin-top: 4px; }

.page-heading {
    position: relative;
    overflow: hidden;
    align-items: center;
    min-height: 180px;
    padding: clamp(24px,4vw,42px);
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(125deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 70%, var(--brand-accent)));
    box-shadow: 0 24px 55px color-mix(in srgb, var(--brand-primary) 25%, transparent);
}
.page-heading::after { content: ""; position: absolute; width: 320px; height: 320px; right: -80px; top: -170px; border: 70px solid color-mix(in srgb, var(--brand-accent) 32%, transparent); border-radius: 50%; pointer-events: none; }
.page-heading > * { position: relative; z-index: 1; }
.page-heading .eyebrow { color: color-mix(in srgb, var(--brand-accent) 48%, white); }
.page-heading h1 { color: #fff; }
.page-heading p { color: rgba(255,255,255,.72); max-width: 620px; }
.page-heading .btn-secondary { background: rgba(255,255,255,.11); color: #fff; border-color: rgba(255,255,255,.32); }
.page-heading > div:first-child { flex:1 1 38%; min-width:0; }
.page-heading .heading-actions { flex:0 1 58%; width:58%; max-width:58%; justify-content:flex-end; }
.page-heading .heading-actions .btn { white-space:nowrap; }

.btn-primary { background: var(--brand-accent); }
.eyebrow { color: var(--brand-accent); }
.count-pill { background: color-mix(in srgb, var(--brand-accent) 10%, white); color: var(--brand-accent); }
.group-card::before { background: var(--brand-accent); }
.group-card-clickable:hover { border-color: color-mix(in srgb, var(--brand-accent) 50%, white); }
.stat-card { position: relative; overflow: hidden; border-top: 3px solid var(--brand-accent); }
.stat-card::after { content: ""; position: absolute; width: 75px; height: 75px; right: -34px; bottom: -36px; border-radius: 50%; background: color-mix(in srgb, var(--brand-accent) 9%, white); }
.stat-card strong { color: var(--brand-primary); }
.color-preview { display: grid; grid-template-columns: 1fr 1fr; min-height: 110px; border-radius: 14px; overflow: hidden; border: 1px solid #dfe6ef; }
.color-preview div { display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.color-input { min-height: 52px; padding: 5px; cursor: pointer; }
.financial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-bottom:16px; }
.amount-card { position:relative; overflow:hidden; background:#fff; border:1px solid #dfe6ef; border-radius:16px; padding:20px; box-shadow:0 12px 32px rgba(16,36,62,.07); }
.amount-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--brand-accent); }
.amount-card > span { display:block; color:#65758b; font-size:12px; font-weight:750; }
.amount-card strong { display:block; color:var(--brand-primary); font-size:clamp(20px,2vw,27px); letter-spacing:-.035em; margin:7px 0 4px; white-space:nowrap; }
.amount-card small { color:#8794a5; font-size:10px; }
.financial-table { margin-bottom:30px; }
.financial-table table { min-width:900px; }
.financial-table th { background:color-mix(in srgb,var(--brand-primary) 94%,white); color:#fff; }
.alert-info { background:#edf5ff; border-color:#c9ddf8; color:#174b83; }
.bulk-import-card { display:grid; gap:22px; }
.import-step { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:16px; padding-bottom:22px; border-bottom:1px solid #dfe6ef; }
.import-step h2 { margin:0 0 6px; font-size:19px; }
.import-step p { margin:0 0 16px; color:#65758b; }
.import-step form { margin-top:14px; }
.bulk-import-card > .alert:last-child { margin-bottom:0; }
.group-agreement-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:20px; border-left:4px solid var(--brand-accent); }
.group-agreement-bar > div:first-child { min-width:0; }
.group-agreement-bar > .actions { flex:0 0 auto; justify-content:flex-end; max-width:48%; }
.group-agreement-bar h2 { margin:3px 0 3px; font-size:18px; }
.group-agreement-bar h2 { overflow-wrap:anywhere; }
.group-agreement-bar p { margin:0; color:#65758b; font-size:13px; }

@media (max-width: 1050px) {
    .account-chip { display: none; }
    .financial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .topbar { min-height: auto; }
    .brand-zone { width: 100%; justify-content: space-between; }
    .topbar-right { width: 100%; }
    .topbar-right nav { padding-bottom: 3px; }
    .page-heading { min-height: 210px; align-items: flex-start; }
    .page-heading .heading-actions { width:100%; max-width:none; }
    .financial-grid { grid-template-columns:1fr; }
    .import-step { grid-template-columns:1fr; }
    .group-agreement-bar { align-items:flex-start; flex-direction:column; }
    .group-agreement-bar > .actions { max-width:none; }
}