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

:root {
  --bg: #f3f4f1;
  --surface: #ffffff;
  --surface-2: #f7f8f5;
  --ink: #111310;
  --muted: #6f746b;
  --line: #e5e7e1;
  --dark: #0b0d0c;
  --dark-2: #151815;
  --lime: #c8ff3d;
  --lime-dark: #8bb800;
  --red: #ef5c58;
  --orange: #f4a33b;
  --blue: #4f87f7;
  --purple: #9d74f6;
  --shadow: 0 1px 2px rgba(18, 24, 16, .04), 0 12px 32px rgba(18, 24, 16, .055);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(200,255,61,.45); outline-offset: 2px; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 252px; background: var(--dark); color: white; padding: 22px 14px 16px; display: flex; flex-direction: column; z-index: 30; border-right: 1px solid rgba(255,255,255,.06); }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 10px 22px; }
.brand-lockup strong { display: block; font-family: Manrope, sans-serif; letter-spacing: .18em; font-size: 15px; }
.brand-lockup small { display: block; color: #7f857d; margin-top: 2px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--lime); display: flex; justify-content: center; align-items: flex-end; gap: 2px; padding: 8px; transform: rotate(-3deg); }
.brand-mark span { width: 4px; background: var(--dark); border-radius: 4px; }
.brand-mark span:nth-child(1) { height: 9px; }.brand-mark span:nth-child(2) { height: 17px; }.brand-mark span:nth-child(3) { height: 12px; }
.club-switcher, .profile-button { border: 1px solid #292d29; background: #151815; color: white; border-radius: 13px; padding: 10px; display: flex; align-items: center; width: 100%; gap: 10px; text-align: left; }
.club-switcher { margin-bottom: 18px; }.club-switcher:hover, .profile-button:hover { border-color: #434843; background: #1b1e1b; }
.club-avatar, .avatar { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #2b3128; color: var(--lime); font-weight: 700; font-size: 11px; flex: 0 0 auto; }
.club-switcher > span:nth-child(2), .profile-button > span:nth-child(2) { flex: 1; }.club-switcher strong, .profile-button strong { display: block; font-size: 12px; }.club-switcher small, .profile-button small { display: block; color: #838983; font-size: 10px; margin-top: 2px; }.chevron { color: #777d77; }
.primary-nav { display: grid; gap: 3px; }
.nav-item { position: relative; border: 0; color: #929792; background: transparent; border-radius: 10px; min-height: 40px; padding: 0 11px; display: flex; align-items: center; gap: 11px; font-size: 12px; text-align: left; width: 100%; transition: .2s ease; }
.nav-item:hover { background: #181b18; color: #dfe3de; }.nav-item.active { background: #21251f; color: white; }.nav-item.active:before { content: ""; position: absolute; left: 0; width: 3px; height: 18px; border-radius: 0 4px 4px 0; background: var(--lime); }
.nav-icon { width: 19px; text-align: center; font-size: 15px; color: #aeb4ad; }.nav-item.active .nav-icon { color: var(--lime); }.nav-badge { margin-left: auto; min-width: 22px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; background: #323831; color: var(--lime); font-size: 9px; }.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); margin-left: auto; box-shadow: 0 0 0 4px rgba(200,255,61,.08); }
.sidebar-bottom { margin-top: auto; display: grid; gap: 7px; }.ai-status { border: 1px solid rgba(200,255,61,.15); background: rgba(200,255,61,.04); border-radius: 12px; display: flex; gap: 9px; padding: 11px; margin-bottom: 5px; }.pulse { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 5px rgba(200,255,61,.09); margin-top: 3px; animation: pulse 2s infinite; }.ai-status strong { display: block; font-size: 10px; }.ai-status small { color: #6f766e; font-size: 9px; }.profile-button { margin-top: 6px; border: 0; background: transparent; padding: 8px; }
.main-content { margin-left: 252px; min-height: 100vh; }
.topbar { height: 68px; background: rgba(255,255,255,.88); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 20; display: flex; align-items: center; padding: 0 28px; justify-content: space-between; }
.breadcrumb { display: flex; gap: 10px; align-items: center; color: #9a9e97; font-size: 12px; }.breadcrumb b { color: #c7cac4; }.breadcrumb strong { color: var(--ink); }.topbar-actions { display: flex; align-items: center; gap: 8px; }.mobile-menu { display: none; border: 0; background: transparent; font-size: 22px; }
.segmented { display: flex; padding: 3px; border: 1px solid var(--line); background: #f7f8f5; border-radius: 9px; }.segmented button { border: 0; padding: 6px 10px; border-radius: 6px; background: transparent; color: #858a81; font-weight: 600; font-size: 10px; }.segmented button.active { background: white; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.09); }
.icon-button { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: white; color: #5f645d; position: relative; }.notification-button span { position: absolute; right: -4px; top: -5px; width: 17px; height: 17px; border-radius: 50%; background: var(--ink); color: white; display: grid; place-items: center; font-size: 8px; border: 2px solid white; }
.primary-button, .secondary-button, .filter-button { border-radius: 9px; padding: 10px 14px; font-size: 11px; font-weight: 700; transition: .2s; }.primary-button { border: 1px solid var(--dark); background: var(--dark); color: white; }.primary-button:hover { background: #252825; transform: translateY(-1px); }.primary-button span { color: var(--lime); }.secondary-button, .filter-button { border: 1px solid var(--line); background: white; color: var(--ink); }.secondary-button:hover, .filter-button:hover { border-color: #bfc3ba; background: #fafbf9; }.full { width: 100%; }
.view { display: none; padding: 30px 30px 50px; max-width: 1600px; margin: 0 auto; animation: viewIn .28s ease; }.view.active { display: block; }
.page-intro, .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 5px 0 24px; }.eyebrow, .panel-kicker { font-size: 9px; letter-spacing: .16em; font-weight: 800; color: #969b92; margin: 0 0 8px; }.page-intro h1, .section-heading h1 { font-family: Manrope, sans-serif; font-size: clamp(27px, 3vw, 38px); line-height: 1.1; margin: 0; letter-spacing: -.04em; }.page-intro p:not(.eyebrow), .section-heading p:not(.eyebrow) { color: var(--muted); margin: 8px 0 0; }.page-intro p strong { color: var(--ink); }
.intelligence-brief { min-width: 278px; border: 1px solid #282c27; color: white; background: var(--dark); border-radius: 14px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; text-align: left; box-shadow: 0 12px 30px rgba(10,12,10,.14); }.intelligence-brief:hover { transform: translateY(-2px); }.intelligence-brief .spark { width: 34px; height: 34px; display: grid; place-items: center; background: rgba(200,255,61,.12); border-radius: 9px; color: var(--lime); font-size: 16px; }.intelligence-brief span:nth-child(2) { flex: 1; }.intelligence-brief strong { display: block; font-size: 11px; }.intelligence-brief small { display: block; color: #81877f; font-size: 9px; margin-top: 3px; }
.alert-strip { border: 1px solid #dcecb8; background: linear-gradient(90deg,#f6ffe2,#fbfff4); border-radius: 13px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }.alert-icon { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; background: var(--lime); font-weight: 800; }.alert-strip div:nth-child(2) { flex: 1; }.alert-strip strong { font-size: 11px; }.alert-strip p { margin: 3px 0 0; color: #69705f; font-size: 10px; }.alert-strip button { border: 0; background: transparent; font-size: 10px; font-weight: 700; text-decoration: underline; }.dismiss-alert { font-size: 18px!important; color: #a1a69c; text-decoration: none!important; }
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 12px; }.kpi-card { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: 0 1px 1px rgba(0,0,0,.02); min-width: 0; }.kpi-card.attention { border-color: #f0d5d3; background: linear-gradient(145deg,#fff,#fff9f8); }.kpi-label { display: flex; justify-content: space-between; color: #777c74; font-size: 10px; }.tooltip { width: 15px; height: 15px; border: 1px solid #dfe2dc; border-radius: 50%; display: grid; place-items: center; font-size: 8px; }.kpi-value { display: flex; align-items: center; gap: 9px; margin: 12px 0 13px; }.kpi-value strong { font-family: Manrope, sans-serif; font-size: 25px; letter-spacing: -.04em; }.trend { font-size: 9px; font-weight: 700; border-radius: 20px; padding: 4px 6px; }.positive { color: #577700; background: #f0f9d9; }.negative { color: #b84944; background: #fff0ef; }.kpi-foot { min-height: 20px; display: flex; justify-content: space-between; align-items: flex-end; color: #a0a49d; font-size: 9px; }.text-button { border: 0; background: transparent; color: var(--ink); font-size: 9px; font-weight: 700; padding: 0; }.mini-bars { width: 56px; height: 18px; display: flex; align-items: flex-end; gap: 2px; }.mini-bars i { display: block; flex: 1; border-radius: 2px 2px 0 0; background: #dfe4d8; }.mini-bars i:last-child, .mini-bars i:nth-last-child(2) { background: var(--lime); }.goal-ring { display: flex; align-items: center; gap: 5px; }.goal-ring i { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--lime-dark) calc(var(--progress)*1%),#edf0e9 0); position: relative; }.goal-ring i:after { content:""; position:absolute; inset:4px; background:white; border-radius:50%; }
.dashboard-grid, .finance-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 12px; }.span-8 { grid-column: span 8; }.span-7 { grid-column: span 7; }.span-5 { grid-column: span 5; }.span-4 { grid-column: span 4; }.panel { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 19px; box-shadow: var(--shadow); min-width: 0; }.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }.panel-header h2 { font-family: Manrope, sans-serif; font-size: 15px; margin: 0; letter-spacing: -.02em; }.menu-button { border: 0; background: transparent; color: #9da199; letter-spacing: .12em; }.legend { display: flex; align-items: center; gap: 14px; font-size: 9px; color: #8b9088; }.legend span { display: flex; align-items: center; gap: 5px; }.legend-dot { width: 7px; height: 7px; border-radius: 50%; }.lime { background: var(--lime-dark); }.legend-line { width: 13px; height: 2px; background: #242824; }
.revenue-summary { display: flex; align-items: center; gap: 22px; margin: 21px 0 4px; position: relative; }.revenue-summary div:not(.chart-tooltip) span { display:block; color:#8c9189; font-size:9px; }.revenue-summary div:not(.chart-tooltip) strong { display:block; font:700 20px Manrope; margin:4px 0 1px; }.revenue-summary small { color:#9ca098; font-size:8px; }.positive-text { color: #6c9004!important; }.vertical-divider { height: 37px; border-left: 1px solid var(--line); }.chart-tooltip { position: absolute; right: 5%; top: 10px; z-index: 2; display: none; background: var(--dark); color: white; border-radius: 9px; padding: 9px 11px; box-shadow: 0 8px 24px rgba(0,0,0,.18); pointer-events: none; }.chart-tooltip span,.chart-tooltip small { display:block; color:#8f958e; font-size:8px; }.chart-tooltip strong { display:block; font-size:11px; margin:3px 0; }.revenue-panel canvas { width:100%; height:205px; }.chart-axis { display:flex; justify-content:space-between; color:#a5a9a2; font-size:8px; padding:4px 8px 0 30px; }
.health-score { text-align: center; padding: 20px 0 14px; }.score-orbit { width: 132px; height: 132px; position: relative; margin: 0 auto; }.score-orbit svg { width:100%; transform:rotate(-90deg); }.score-orbit circle { fill:none; stroke-width:7; }.score-track { stroke:#eef0eb; }.score-fill { stroke:var(--lime-dark); stroke-linecap:round; stroke-dasharray:314; stroke-dashoffset:50; }.score-orbit > div { position:absolute; inset:0; display:grid; place-content:center; }.score-orbit strong { font:800 32px Manrope; line-height:1; }.score-orbit small { color:#78806e; font-size:9px; margin-top:4px; }.health-score p { color:#8d928a; font-size:9px; margin:7px 0 0; }.health-breakdown { display:grid; gap:10px; border-top:1px solid var(--line); padding:15px 0 18px; }.health-breakdown div { display:grid; grid-template-columns:72px 1fr 23px; align-items:center; gap:8px; font-size:9px; }.health-breakdown b { grid-column:3; grid-row:1; text-align:right; }.health-breakdown i { grid-column:2; grid-row:1; height:4px; background:#edf0e9; border-radius:4px; overflow:hidden; }.health-breakdown em { display:block; height:100%; background:var(--lime-dark); border-radius:4px; }
.action-queue, .capacity-panel { margin-top:0; }.queue-list { margin-top:12px; }.queue-item { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; padding:11px 2px; border-top:1px solid #f0f1ee; }.queue-item:first-child { border-top:0; }.queue-icon { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:12px; }.queue-icon.risk { color:#bb4f49;background:#fff0ee; }.queue-icon.lead { color:#4f6cbd;background:#eef3ff; }.queue-icon.revenue { color:#618400;background:#f2f9df; }.queue-item strong { display:block;font-size:10px; }.queue-item p { margin:3px 0 0;color:#8f948c;font-size:9px; }.queue-meta { text-align:right; }.queue-meta b { display:block;font-size:9px; }.queue-meta span { display:block;color:#a1a59e;font-size:8px;margin-top:2px; }.queue-item button { border:1px solid var(--line);background:white;border-radius:7px;padding:6px 8px;font-size:8px;font-weight:700;margin-left:8px; }
.live-pill { display:flex; align-items:center; gap:6px; color:#6c870f; background:#f4fadd; border-radius:20px; padding:5px 8px; font-size:8px; font-weight:700; }.live-pill span { width:6px;height:6px;border-radius:50%;background:#8cb400;box-shadow:0 0 0 3px rgba(140,180,0,.12); }.live-pill.large { padding:8px 12px;font-size:10px; }.capacity-hero { display:flex;align-items:center;gap:18px;margin:18px 0 14px; }.capacity-ring { width:103px;height:103px;position:relative;flex:0 0 auto; }.capacity-ring svg { transform:rotate(-90deg); }.capacity-ring circle { fill:none;stroke:#edf0e9;stroke-width:8; }.capacity-ring .capacity-fill { stroke:var(--lime-dark);stroke-linecap:round;stroke-dasharray:270;stroke-dashoffset:103; }.capacity-ring div { position:absolute;inset:0;display:grid;place-content:center;text-align:center; }.capacity-ring strong { font:800 21px Manrope; }.capacity-ring small { font-size:8px;color:#92978f; }.capacity-hero > div:last-child span,.capacity-hero > div:last-child small { display:block;color:#92978f;font-size:8px; }.capacity-hero > div:last-child strong { display:block;font-size:10px;margin:6px 0; }.location-bars { display:grid;gap:9px;margin-bottom:17px; }.location-bar { display:grid;grid-template-columns:90px 1fr 28px;align-items:center;gap:8px;font-size:8px; }.location-bar i { height:5px;border-radius:5px;background:#edf0e9;overflow:hidden; }.location-bar em { display:block;height:100%;background:#9fbf3b;border-radius:5px; }.location-bar.hot em { background:var(--orange); }
.tabs { display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow:auto; }.tabs button { border:0;background:transparent;padding:11px 13px;color:#888d85;font-size:10px;font-weight:700;white-space:nowrap;border-bottom:2px solid transparent; }.tabs button.active { color:var(--ink);border-color:var(--ink); }.tabs b { background:#ecefe8;padding:2px 5px;border-radius:7px;font-size:8px;margin-left:4px; }.tabs.compact { margin-bottom:22px; }.toolbar { display:flex;gap:8px;margin-bottom:12px; }.search-field { min-width:280px;flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:white;border-radius:9px;padding:0 10px; }.search-field input { border:0;outline:0;width:100%;padding:10px 0;font-size:10px; }.toolbar select,.panel-header select { border:1px solid var(--line);background:white;border-radius:9px;padding:9px 28px 9px 10px;font-size:10px;color:#5f655c; }.tab-panel { display:none; }.tab-panel.active { display:block;animation:viewIn .2s ease; }.table-panel { padding:0;overflow:hidden; }.table-summary { display:flex;justify-content:space-between;padding:14px 17px;background:#fafbf8;border-bottom:1px solid var(--line);font-size:9px;color:#777d74; }.data-table { overflow:auto; }.risk-row,.table-head { min-width:800px;display:grid;grid-template-columns:1.7fr .7fr 1.2fr 1fr .7fr 90px;align-items:center;gap:12px;padding:11px 17px;border-bottom:1px solid #f0f1ee;font-size:9px; }.table-head { color:#999e96;background:#fff;font-weight:700;text-transform:uppercase;font-size:8px;letter-spacing:.08em; }.risk-row:hover { background:#fbfcf9; }.member-cell { display:flex;align-items:center;gap:9px; }.member-avatar { width:31px;height:31px;border-radius:9px;background:linear-gradient(135deg,#e3e6df,#f7f8f5);display:grid;place-items:center;font-weight:700;color:#5c6259; }.member-cell strong { display:block;font-size:10px; }.member-cell small { color:#9a9f97;font-size:8px; }.risk-pill { display:inline-flex;border-radius:20px;padding:4px 7px;font-size:8px;font-weight:700; }.risk-pill.critical { background:#ffebe9;color:#b94741; }.risk-pill.high { background:#fff4e2;color:#a66612; }.risk-pill.medium { background:#f5f5df;color:#777c1b; }.signal-list { display:flex;gap:3px;flex-wrap:wrap; }.signal-list span { background:#f1f3ef;border-radius:5px;padding:3px 5px;color:#6e746a;font-size:7px; }.row-action { border:1px solid var(--line);background:white;border-radius:7px;padding:6px 8px;font-size:8px;font-weight:700; }
.empty-feature { min-height:370px;display:grid;place-content:center;text-align:center;justify-items:center;background:white;border:1px solid var(--line);border-radius:var(--radius); }.empty-feature > span { width:55px;height:55px;border-radius:16px;background:#f0f4e7;color:#799a1f;display:grid;place-items:center;font-size:24px; }.empty-feature h2 { margin:14px 0 7px;font:700 18px Manrope; }.empty-feature p { max-width:430px;color:var(--muted);font-size:11px;line-height:1.6; }.segment-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }.segment-card { background:white;border:1px solid var(--line);border-radius:14px;padding:18px; }.segment-card .segment-icon { width:34px;height:34px;border-radius:9px;background:#f2f6e9;display:grid;place-items:center;margin-bottom:16px; }.segment-card h3 { font:700 13px Manrope;margin:0 0 5px; }.segment-card p { color:var(--muted);font-size:9px;min-height:30px; }.segment-card footer { display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--line);padding-top:12px;margin-top:14px; }.segment-card footer strong { font:700 20px Manrope; }.segment-card footer small { display:block;color:#9b9f98;font-size:8px; }.member-profile-demo { background:white;border:1px solid var(--line);border-radius:var(--radius);padding:22px; }.profile-header { display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px; }.profile-person { display:flex;align-items:center;gap:12px; }.profile-person .member-avatar { width:48px;height:48px;font-size:14px; }.profile-person h2 { margin:0;font:700 17px Manrope; }.profile-person p { color:var(--muted);font-size:9px;margin:4px 0 0; }.profile-stats { display:flex;gap:25px; }.profile-stats span { color:#969b93;font-size:8px;display:block; }.profile-stats strong { font-size:12px;display:block;margin-top:3px; }.timeline { max-width:700px;margin:18px auto 0; }.timeline-item { position:relative;padding:0 0 22px 33px;border-left:1px solid #dde1d9; }.timeline-item:last-child { border-left-color:transparent; }.timeline-icon { position:absolute;left:-12px;width:24px;height:24px;border-radius:50%;background:white;border:1px solid var(--line);display:grid;place-items:center;font-size:9px; }.timeline-item strong { font-size:10px; }.timeline-item p { color:var(--muted);font-size:9px;margin:4px 0; }.timeline-item time { color:#a1a69e;font-size:8px; }
.journey-kpis,.crm-top,.campaign-stats,.benchmark-summary { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px; }.journey-kpis > div,.crm-top > div,.campaign-stats > div,.benchmark-summary article { background:white;border:1px solid var(--line);border-radius:13px;padding:15px; }.journey-kpis span,.crm-top span,.campaign-stats span,.benchmark-summary span { color:#858a82;font-size:9px;display:block; }.journey-kpis strong,.crm-top strong,.campaign-stats strong,.benchmark-summary strong { font:700 21px Manrope;display:block;margin:8px 0 3px; }.journey-kpis small,.crm-top small,.campaign-stats small,.benchmark-summary small { color:#999e96;font-size:8px; }.journey-layout { display:grid;grid-template-columns:310px 1fr;gap:12px; }.journey-list { display:grid;gap:8px;align-content:start; }.journey-card { background:white;border:1px solid var(--line);border-radius:13px;padding:14px;cursor:pointer;transition:.2s; }.journey-card:hover,.journey-card.active { border-color:#b3bbab;box-shadow:var(--shadow); }.journey-card.active { box-shadow:inset 3px 0 var(--lime-dark),var(--shadow); }.journey-card header { display:flex;justify-content:space-between;align-items:start; }.journey-card h3 { margin:0;font:700 11px Manrope; }.status-pill { border-radius:20px;background:#edf5dd;color:#64830e;padding:3px 6px;font-size:7px;font-weight:700; }.journey-card p { color:var(--muted);font-size:8px;line-height:1.5; }.journey-card footer { display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:9px;margin-top:10px;font-size:8px;color:#8e938b; }.journey-canvas { min-height:510px;background:radial-gradient(circle at 1px 1px,#e2e5df 1px,transparent 0);background-size:22px 22px;position:relative;overflow:hidden; }.canvas-title { background:white;border-bottom:1px solid var(--line);margin:-19px -19px 0;padding:16px 19px;display:flex;justify-content:space-between; }.canvas-title h2 { font:700 14px Manrope;margin:0; }.canvas-title p { color:var(--muted);font-size:8px;margin:4px 0 0; }.journey-flow { display:flex;align-items:center;justify-content:center;min-height:400px;gap:22px;position:relative; }.flow-node { width:155px;background:white;border:1px solid var(--line);border-radius:12px;padding:13px;box-shadow:0 7px 18px rgba(14,18,13,.07);position:relative; }.flow-node:after { content:"→";position:absolute;right:-18px;top:50%;color:#939991; }.flow-node:last-child:after { display:none; }.flow-node .node-icon { width:28px;height:28px;border-radius:8px;background:#f0f4e9;display:grid;place-items:center;margin-bottom:10px; }.flow-node span { color:#979c94;font-size:7px;text-transform:uppercase;letter-spacing:.08em; }.flow-node strong { display:block;font-size:9px;margin-top:4px;line-height:1.4; }.flow-node small { display:block;color:#999e96;font-size:7px;margin-top:5px; }
.operations-map { display:grid;grid-template-columns:1.45fr 1fr;gap:12px; }.map-panel { padding:14px;min-height:590px; }.floor-visual { position:relative;height:560px;background:#121512;border-radius:14px;overflow:hidden;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px; }.zone { position:absolute;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);border-radius:18px;color:white;display:flex;flex-direction:column;justify-content:flex-end;padding:15px;transition:.25s;overflow:hidden; }.zone:before { content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(200,255,61,.18),transparent 68%);top:50%;left:50%;transform:translate(-50%,-50%); }.zone:hover { border-color:rgba(200,255,61,.5);background:rgba(200,255,61,.08);transform:translateY(-2px); }.zone span,.zone b { position:relative; }.zone span { font-size:10px;color:#aeb4ae; }.zone b { font-size:13px;margin-top:4px; }.cardio { left:3%;top:4%;width:46%;height:39%; }.strength { right:3%;top:4%;width:44%;height:54%; }.studio { left:3%;bottom:4%;width:29%;height:48%; }.recovery { left:34%;bottom:4%;width:27%;height:34%; }.reception { right:3%;bottom:4%;width:33%;height:32%; }.operations-side { display:grid;gap:12px;align-content:start; }.class-list,.staff-list { margin-top:10px; }.class-item { display:grid;grid-template-columns:45px 1fr auto;align-items:center;gap:9px;padding:12px 0;border-top:1px solid var(--line); }.class-item:first-child { border-top:0; }.class-time { color:#747a71;font-size:9px; }.class-item strong { display:block;font-size:10px; }.class-item small { color:#999e96;font-size:8px; }.occupancy { min-width:34px;text-align:right; }.occupancy b { display:block;font-size:9px; }.occupancy i { display:block;width:34px;height:3px;background:#edf0e9;margin-top:4px;border-radius:3px; }.occupancy em { display:block;height:100%;background:var(--lime-dark); }.staff-row { display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--line); }.staff-row:first-child { border-top:0; }.staff-row .member-avatar { width:28px;height:28px;font-size:8px; }.staff-row div:nth-child(2) { flex:1; }.staff-row strong { display:block;font-size:9px; }.staff-row small { color:#999e96;font-size:8px; }.staff-row > span { color:#67890d;background:#f2f8e3;padding:3px 6px;border-radius:9px;font-size:7px; }
.crm-top { grid-template-columns:repeat(4,1fr); }.kanban { display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:10px;overflow:auto;padding-bottom:10px; }.kanban-column { background:#eceee9;border-radius:14px;padding:10px;min-height:500px; }.kanban-column header { display:flex;justify-content:space-between;padding:4px 3px 11px;font-size:9px;font-weight:700; }.kanban-column header b { background:white;border-radius:10px;padding:2px 6px;font-size:8px; }.lead-card { background:white;border:1px solid #e4e7e0;border-radius:10px;padding:11px;margin-bottom:7px;box-shadow:0 1px 3px rgba(0,0,0,.03);cursor:grab; }.lead-card:active { cursor:grabbing; }.lead-card .lead-source { color:#91968e;font-size:7px;text-transform:uppercase;letter-spacing:.08em; }.lead-card h3 { font-size:10px;margin:7px 0 3px; }.lead-card p { color:#8b9088;font-size:8px;margin:0; }.lead-card footer { display:flex;justify-content:space-between;margin-top:12px;align-items:center; }.lead-card footer strong { font-size:9px; }.lead-card .avatar { width:23px;height:23px;font-size:7px;border-radius:7px; }.lead-score { border-radius:9px;padding:3px 5px;background:#eff6df;color:#63810f;font-size:7px;font-weight:700; }
.campaign-stats { grid-template-columns:repeat(3,1fr); }.campaign-builder { padding:0;overflow:hidden;min-height:480px; }.builder-steps { display:flex;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line);background:#fafbf8; }.builder-steps button { border:0;background:transparent;color:#999e96;font-size:9px;font-weight:700;display:flex;align-items:center;gap:7px; }.builder-steps button b { width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#e9ece6;color:#7d837a;font-size:8px; }.builder-steps button.active { color:var(--ink); }.builder-steps button.active b { background:var(--dark);color:var(--lime); }.builder-steps i { flex:1;height:1px;background:#dfe2dc;margin:0 8px; }.builder-body { padding:25px; }.builder-section { max-width:830px;margin:0 auto; }.builder-section h2 { font:700 20px Manrope;margin:0 0 6px; }.builder-section > p { color:var(--muted);font-size:10px;margin:0 0 24px; }.audience-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }.audience-card { border:1px solid var(--line);background:white;border-radius:12px;padding:15px;text-align:left; }.audience-card:hover,.audience-card.selected { border-color:#8f9b82;box-shadow:inset 0 0 0 1px #8f9b82; }.audience-card .segment-icon { margin-bottom:15px; }.audience-card strong { display:block;font-size:10px; }.audience-card span { display:block;font:700 18px Manrope;margin:7px 0 3px; }.audience-card small { color:#999e96;font-size:8px; }.builder-footer { display:flex;justify-content:flex-end;gap:8px;margin-top:25px;padding-top:18px;border-top:1px solid var(--line); }
.brand-studio { display:grid;grid-template-columns:minmax(380px,1fr) minmax(400px,1.1fr);gap:12px; }.brand-controls { max-width:650px; }.brand-controls label { display:block;font-size:9px;font-weight:700;margin-bottom:17px; }.brand-controls label > input,.brand-controls label > select { display:block;width:100%;border:1px solid var(--line);border-radius:9px;padding:11px;margin-top:7px;outline:0;font-size:10px;background:white; }.colour-input { display:flex;gap:8px;margin-top:7px; }.colour-input input[type="color"] { width:43px;height:39px;border:1px solid var(--line);padding:4px;border-radius:9px;background:white; }.colour-input input:last-child { flex:1;border:1px solid var(--line);border-radius:9px;padding:0 11px; }.choice-row { display:flex;gap:8px;margin-top:8px; }.style-choice { flex:1;border:1px solid var(--line);border-radius:9px;background:white;padding:10px;font-size:9px;font-weight:700; }.style-choice.active { border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink); }.upload-box { display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:9px;margin-top:8px; }.preview-logo { width:40px;height:40px;background:var(--dark);color:var(--lime);border-radius:10px;display:grid;place-items:center;font:800 17px Manrope; }.upload-box span { flex:1; }.upload-box strong,.upload-box small { display:block;font-size:9px; }.upload-box small { color:#999e96;font-size:8px;margin-top:2px; }.upload-box button { border:0;background:transparent;font-size:8px;text-decoration:underline; }.toggle-label { display:flex!important;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:9px 0;margin:0!important; }.toggle-label strong,.toggle-label small { display:block; }.toggle-label small { color:#999e96;font-weight:400;margin-top:3px; }.toggle { appearance:none;width:34px!important;height:19px;border-radius:20px;background:#dfe2dc;position:relative;margin:0!important;padding:0!important; }.toggle:before { content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:white;top:2px;left:2px;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s; }.toggle:checked { background:var(--dark); }.toggle:checked:before { transform:translateX(15px);background:var(--lime); }.feature-toggles { display:grid;grid-template-columns:1fr 1fr;gap:9px; }.feature-toggle { border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;justify-content:space-between;align-items:center;font-size:9px; }.feature-toggle strong { display:block; }.feature-toggle small { display:block;color:#999e96;font-size:7px;margin-top:3px; }.phone-stage { min-height:650px;background:radial-gradient(circle at center,rgba(200,255,61,.2),transparent 48%),var(--dark);border-radius:18px;display:grid;place-content:center;justify-items:center;overflow:hidden;position:relative; }.phone-stage:before { content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:35px 35px; }.phone { width:274px;height:574px;background:#050605;border:6px solid #252825;border-radius:40px;padding:7px;box-shadow:0 35px 90px rgba(0,0,0,.55);position:relative;z-index:2; }.phone:before { content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:84px;height:20px;border-radius:14px;background:#050605;z-index:3; }.phone-status { height:25px;padding:4px 11px;color:white;display:flex;justify-content:space-between;font-size:7px;position:relative;z-index:4; }.phone-app { height:calc(100% - 25px);border-radius:28px;overflow:hidden;padding:17px 13px 55px;position:relative;transition:.25s; }.phone-app.dark { background:#111311;color:white; }.phone-app.light { background:#f5f6f2;color:#111310; }.phone-app.energy { background:linear-gradient(160deg,#1a1511,#101210 55%,#18200b);color:white; }.app-wordmark { font:800 11px Manrope;letter-spacing:.2em;color:var(--brand-accent,var(--lime)); }.app-greeting { margin-top:27px; }.app-greeting span,.app-hero-card > span { color:#7f867c;font-size:6px;letter-spacing:.12em;font-weight:700; }.app-greeting h3 { font:700 19px/1.16 Manrope;margin:5px 0 14px;letter-spacing:-.04em; }.app-score { display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:9px;border-radius:12px; }.light .app-score { background:white;border-color:#e4e7df; }.small-ring { width:35px;height:35px;border-radius:50%;border:3px solid var(--brand-accent,var(--lime));display:grid;place-items:center;font-size:9px;font-weight:700; }.app-score strong,.app-score small { display:block;font-size:8px; }.app-score small { color:#8b9188;font-size:6px;margin-top:2px; }.app-hero-card { margin-top:10px;background:var(--brand-accent,var(--lime));color:#10120e;padding:12px;border-radius:13px; }.app-hero-card > span { color:#4c5b24; }.app-hero-card strong,.app-hero-card small { display:block; }.app-hero-card strong { font-size:11px;margin:8px 0 3px; }.app-hero-card small { font-size:6px;color:#4f572f; }.app-hero-card button { border:0;background:#111310;color:white;border-radius:7px;padding:6px 8px;font-size:6px;font-weight:700;margin-top:10px; }.app-section-title { display:flex;justify-content:space-between;margin:16px 0 8px;align-items:center; }.app-section-title strong { font-size:8px; }.app-section-title span { color:#8d938a;font-size:6px; }.app-class-row { display:grid;grid-template-columns:1fr 1fr;gap:7px; }.app-class-row div { height:62px;border-radius:10px;background:rgba(255,255,255,.06);padding:9px;display:flex;flex-direction:column;justify-content:flex-end; }.light .app-class-row div { background:white;border:1px solid #e5e7e1; }.app-class-row b { font-size:7px; }.app-class-row small { color:#899087;font-size:6px;margin-top:3px; }.app-bottom-nav { position:absolute;left:0;right:0;bottom:0;height:49px;background:rgba(10,12,10,.92);border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-around;align-items:center; }.light .app-bottom-nav { background:white;border-color:#e4e7df; }.app-bottom-nav span { display:grid;justify-items:center;font-size:11px; }.app-bottom-nav span:first-child { color:var(--brand-accent,var(--lime)); }.app-bottom-nav small { font-size:5px;margin-top:2px; }.phone-home { position:absolute;bottom:5px;left:50%;transform:translateX(-50%);height:3px;width:90px;background:#8a8a8a;border-radius:4px;z-index:5; }.device-note { z-index:2;color:#9ca39a;font-size:8px;margin-top:20px;display:flex;align-items:center;gap:8px; }
.finance-chart-wrap { display:grid;grid-template-columns:1.7fr .8fr;gap:25px;margin-top:20px;align-items:center; }.finance-chart-wrap canvas { width:100%;height:260px; }.revenue-mix-legend { display:grid;gap:12px; }.revenue-mix-legend div { display:grid;grid-template-columns:9px 1fr auto;gap:7px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:10px; }.revenue-mix-legend i { width:7px;height:7px;border-radius:50%; }.lime-bg { background:#9fc72f; }.blue-bg { background:var(--blue); }.purple-bg { background:var(--purple); }.orange-bg { background:var(--orange); }.revenue-mix-legend span { font-size:8px; }.revenue-mix-legend strong { font-size:9px; }.revenue-mix-legend small { grid-column:2;color:#999e96;font-size:7px; }.collections { display:flex;flex-direction:column; }.collection-score { padding:26px 0 20px;text-align:center;border-bottom:1px solid var(--line); }.collection-score strong { display:block;font:800 39px Manrope;letter-spacing:-.05em; }.collection-score span { color:#8c9189;font-size:9px; }.collection-list { display:grid;gap:0;margin:10px 0 17px;flex:1; }.collection-list div { display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:8px;color:#7b8178; }.collection-list strong { color:var(--ink);font-size:9px; }
.benchmark-summary { grid-template-columns:repeat(3,1fr); }.benchmark-table { margin-top:15px; }.benchmark-row,.benchmark-head { display:grid;grid-template-columns:1.4fr .7fr .8fr .8fr .8fr 1.2fr;gap:10px;align-items:center;padding:12px 8px;border-bottom:1px solid var(--line);font-size:9px; }.benchmark-head { color:#969b93;font-size:7px;text-transform:uppercase;letter-spacing:.08em;font-weight:700; }.benchmark-location { display:flex;align-items:center;gap:8px; }.rank { width:23px;height:23px;border-radius:7px;display:grid;place-items:center;background:#f0f2ed;font-weight:700; }.benchmark-location strong { display:block; }.benchmark-location small { display:block;color:#999e96;font-size:7px; }.benchmark-bar { display:flex;align-items:center;gap:8px; }.benchmark-bar i { flex:1;height:5px;border-radius:5px;background:#ecefe8;overflow:hidden; }.benchmark-bar em { display:block;height:100%;border-radius:5px;background:var(--lime-dark); }.benchmark-row.top { background:#fbfef3; }.benchmark-row.bottom .benchmark-bar em { background:var(--orange); }
.modal-backdrop { position:fixed;inset:0;background:rgba(5,7,5,.58);backdrop-filter:blur(5px);z-index:100;display:none;place-items:center;padding:20px; }.modal-backdrop.open { display:grid;animation:fadeIn .2s ease; }.modal { width:min(620px,100%);max-height:90vh;overflow:auto;background:white;border-radius:20px;padding:25px;position:relative;box-shadow:0 30px 90px rgba(0,0,0,.28);animation:modalIn .25s ease; }.modal-close { position:absolute;right:14px;top:12px;border:0;background:#f0f2ed;width:30px;height:30px;border-radius:50%;font-size:18px;color:#757a72; }.modal h2 { font:700 22px Manrope;margin:0 35px 6px 0;letter-spacing:-.03em; }.modal > div > p { color:var(--muted);font-size:10px;line-height:1.6; }.modal-form { display:grid;gap:13px;margin-top:20px; }.modal-form label { font-size:9px;font-weight:700; }.modal-form input,.modal-form select,.modal-form textarea { display:block;width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;margin-top:6px;outline:0; }.modal-form textarea { min-height:90px;resize:vertical; }.modal-actions { display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--line);padding-top:16px;margin-top:18px; }.brief-grid { display:grid;gap:9px;margin:18px 0; }.brief-item { display:grid;grid-template-columns:30px 1fr;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px; }.brief-item > span { width:28px;height:28px;border-radius:8px;background:#f0f5e5;display:grid;place-items:center; }.brief-item strong { display:block;font-size:10px; }.brief-item p { margin:3px 0 0!important;font-size:8px!important;color:#898f86!important; }.opportunity-total { border-radius:13px;background:var(--dark);color:white;padding:16px;display:flex;justify-content:space-between;align-items:center;margin-top:16px; }.opportunity-total span { color:#989f96;font-size:8px; }.opportunity-total strong { display:block;font:700 24px Manrope;color:var(--lime);margin-top:3px; }
.toast-stack { position:fixed;right:20px;bottom:20px;z-index:120;display:grid;gap:8px; }.toast { min-width:260px;background:var(--dark);color:white;border-radius:11px;padding:12px 14px;display:flex;gap:10px;align-items:center;box-shadow:0 12px 30px rgba(0,0,0,.24);animation:toastIn .25s ease; }.toast > span { color:var(--lime); }.toast strong,.toast small { display:block;font-size:9px; }.toast small { color:#949a93;font-size:8px;margin-top:2px; }
.command-palette { position:fixed;inset:0;z-index:110;background:rgba(10,12,10,.45);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding-top:12vh; }.command-palette.open { display:flex; }.command-box { width:min(590px,92vw);background:white;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.25);overflow:hidden; }.command-search { display:flex;align-items:center;gap:10px;padding:15px;border-bottom:1px solid var(--line); }.command-search input { flex:1;border:0;outline:0;font-size:12px; }.command-search kbd { background:#f0f2ee;border:1px solid #dfe2dc;border-radius:5px;padding:3px 5px;font-size:7px;color:#858a82; }.command-results { padding:8px;max-height:360px;overflow:auto; }.command-result { display:flex;align-items:center;gap:10px;padding:10px;border-radius:9px; }.command-result:hover { background:#f4f6f1; }.command-result > span { width:28px;height:28px;background:#eef1ea;border-radius:8px;display:grid;place-items:center; }.command-result strong,.command-result small { display:block;font-size:9px; }.command-result small { color:#999e96;font-size:8px;margin-top:2px; }
@keyframes viewIn { from { opacity:0;transform:translateY(5px); } to { opacity:1;transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes modalIn { from { opacity:0;transform:translateY(12px) scale(.98); } to { opacity:1;transform:none; } }
@keyframes toastIn { from { opacity:0;transform:translateX(15px); } to { opacity:1;transform:none; } }
@keyframes pulse { 50% { box-shadow:0 0 0 8px rgba(200,255,61,0); } }

@media (max-width:1180px) {
  .sidebar { width:220px; }.main-content { margin-left:220px; }.kpi-grid { grid-template-columns:repeat(2,1fr); }.span-8,.span-7 { grid-column:span 12; }.span-4,.span-5 { grid-column:span 6; }.operations-map { grid-template-columns:1fr; }.operations-side { grid-template-columns:1fr 1fr; }.brand-studio { grid-template-columns:1fr; }.brand-controls { max-width:none; }.phone-stage { min-height:700px; }.kanban { grid-template-columns:repeat(5,240px); }
}
@media (max-width:820px) {
  .sidebar { transform:translateX(-100%);transition:.25s;width:252px;box-shadow:12px 0 40px rgba(0,0,0,.25); }.sidebar.open { transform:none; }.main-content { margin-left:0; }.mobile-menu { display:block; }.breadcrumb span,.breadcrumb b { display:none; }.topbar { padding:0 15px; }.topbar-actions .date-filter,.topbar-actions .notification-button { display:none; }.view { padding:22px 15px 40px; }.page-intro,.section-heading { align-items:flex-start;flex-direction:column; }.intelligence-brief { width:100%; }.alert-strip { align-items:flex-start;flex-wrap:wrap; }.alert-strip div:nth-child(2) { flex-basis:calc(100% - 50px); }.kpi-grid { grid-template-columns:1fr 1fr; }.span-4,.span-5 { grid-column:span 12; }.journey-layout { grid-template-columns:1fr; }.journey-list { grid-template-columns:repeat(3,260px);overflow:auto; }.operations-side { grid-template-columns:1fr; }.journey-kpis,.crm-top { grid-template-columns:1fr 1fr; }.segment-grid { grid-template-columns:1fr 1fr; }.finance-chart-wrap { grid-template-columns:1fr; }.finance-grid .span-8,.finance-grid .span-4 { grid-column:span 12; }.benchmark-row,.benchmark-head { grid-template-columns:1.5fr .7fr .8fr 1.2fr; }.benchmark-row > *:nth-child(4),.benchmark-head > *:nth-child(4),.benchmark-row > *:nth-child(5),.benchmark-head > *:nth-child(5) { display:none; }.profile-header { align-items:flex-start;flex-direction:column; }.phone-stage { min-height:650px; }
}
@media (max-width:560px) {
  .topbar .primary-button { padding:9px 10px; }.topbar .primary-button span { display:none; }.kpi-grid { grid-template-columns:1fr; }.dashboard-grid { display:block; }.dashboard-grid > * { margin-bottom:12px; }.legend { display:none; }.revenue-summary { gap:12px; }.revenue-summary .vertical-divider { display:none; }.toolbar { flex-wrap:wrap; }.search-field { min-width:100%; }.toolbar select { flex:1;min-width:130px; }.table-summary { gap:10px;flex-direction:column; }.segment-grid { grid-template-columns:1fr; }.journey-kpis,.crm-top,.campaign-stats,.benchmark-summary { grid-template-columns:1fr 1fr; }.journey-flow { flex-direction:column;gap:28px;padding:25px 0; }.flow-node:after { content:"↓";right:50%;top:auto;bottom:-23px; }.floor-visual { height:470px; }.audience-grid { grid-template-columns:1fr; }.builder-steps { padding:12px; }.builder-steps button { font-size:0; }.builder-steps button b { font-size:8px; }.brand-studio { grid-template-columns:1fr; }.brand-controls { min-width:0; }.feature-toggles { grid-template-columns:1fr; }.profile-stats { flex-wrap:wrap;gap:15px; }.benchmark-summary { grid-template-columns:1fr; }.benchmark-row,.benchmark-head { grid-template-columns:1.5fr .7fr 1.2fr; }.benchmark-row > *:nth-child(3),.benchmark-head > *:nth-child(3) { display:none; }.phone { transform:scale(.92); }.toast-stack { left:15px;right:15px; }.toast { min-width:0; }
}