@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 {
  --ink: #172033;
  --muted: #74809a;
  --paper: #f6f7fb;
  --line: #e7eaf1;
  --sidebar: #151c2c;
  --sidebar-soft: #202a3f;
  --blue: #3b64f0;
  --indigo: #5b4fe9;
  --cyan: #16a7d8;
  --green: #18a972;
  --amber: #e89920;
  --rose: #e34a67;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 254px; display: flex; flex-direction: column; color: #cad1df; background: linear-gradient(180deg, #182033, #111827); padding: 24px 14px 16px; z-index: 3; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 18px; color: #fff; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #4b69ef, #7e6bf2); font-family: Manrope, sans-serif; font-weight: 800; font-size: 18px; }
.brand strong { display: block; font-family: Manrope, sans-serif; letter-spacing: .12em; font-size: 14px; }
.brand small { display: block; margin-top: 1px; color: #8995aa; letter-spacing: .12em; font-size: 7px; }
.program-badge { display: inline-flex; align-items: center; align-self: flex-start; gap: 7px; margin: 2px 10px 20px; border: 1px solid rgba(76, 222, 170, .16); border-radius: 99px; padding: 6px 10px; color: #74e3b9; background: rgba(24, 169, 114, .1); letter-spacing: .08em; font-size: 9px; font-weight: 700; }
.pulse { width: 6px; height: 6px; background: #49d59e; border-radius: 99px; box-shadow: 0 0 0 4px rgba(73, 213, 158, .12); }
.sidebar nav { display: grid; gap: 4px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #b6c0d2; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 13px; transition: .16s ease; }
.nav-item span { width: 17px; text-align: center; color: #9ba8bd; font-size: 16px; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(79, 105, 239, .95), rgba(91, 79, 233, .9)); box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.nav-item b { margin-left: auto; min-width: 19px; padding: 2px 5px; border-radius: 99px; color: #fff; background: rgba(255,255,255,.19); text-align: center; font-size: 10px; }
.sidebar-bottom { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 16px 8px 4px; border-top: 1px solid rgba(255,255,255,.08); }
.team-avatar, .avatar { display: grid; flex: 0 0 auto; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #fff; background: #d97b55; font-size: 10px; font-weight: 700; }
.sidebar-bottom strong { display: block; color: #e7ebf3; font-size: 11px; }.sidebar-bottom small { display: block; color: #8490a3; font-size: 10px; }.dots { margin-left: auto; color: #9aa6ba; }

.main-content { width: calc(100% - 254px); margin-left: 254px; padding: 0 34px 42px; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 106px; margin: 0 -34px 26px; padding: 20px 34px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.72); }
.breadcrumb { margin-bottom: 6px; color: #97a1b4; font-size: 11px; }.breadcrumb span { margin: 0 6px; color: #c1c7d3; }.topbar h1 { margin: 0; font-family: Manrope, sans-serif; font-size: 23px; letter-spacing: -.04em; }
.header-actions { display: flex; align-items: center; gap: 14px; }.environment-tag { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid #dce1fb; border-radius: 6px; color: #625add; background: #f5f4ff; font-size: 9px; font-weight: 700; letter-spacing: .06em; }.environment-tag span { width: 6px; height: 6px; border-radius: 50%; background: #625add; }.icon-button, .help-button { position: relative; display: grid; place-items: center; border: 1px solid var(--line); color: #66718a; background: #fff; }.icon-button { width: 31px; height: 31px; border-radius: 8px; font-size: 18px; }.icon-button i { position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--rose); }.help-button { width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 700; }
.view { display: none; }.view.active { display: block; }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }.section-heading h2 { margin: 0 0 5px; font-family: Manrope, sans-serif; font-size: 23px; letter-spacing: -.04em; }.section-heading p { margin: 0; color: var(--muted); font-size: 13px; }

.hero-card { display: flex; align-items: center; justify-content: space-between; min-height: 187px; margin-bottom: 20px; overflow: hidden; border-radius: 14px; padding: 30px 36px; color: #fff; background: linear-gradient(110deg, #3b52bf 0%, #485fe8 50%, #6358ed 100%); box-shadow: 0 14px 26px rgba(75, 85, 218, .18); }.hero-card::after { content: ''; position: absolute; pointer-events: none; }.hero-copy h2 { margin: 4px 0 6px; font-family: Manrope, sans-serif; font-size: 24px; line-height: 1.18; letter-spacing: -.045em; }.hero-copy > p:not(.eyebrow) { margin: 0; color: #dce5ff; font-size: 12px; }.eyebrow { margin: 0; color: #bfc9ff; font-size: 9px; font-weight: 800; letter-spacing: .13em; }.hero-steps { display: flex; align-items: center; gap: 10px; margin-top: 19px; color: #fff; font-size: 10px; }.hero-steps span { display: inline-flex; align-items: center; gap: 5px; }.hero-steps b { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; font-size: 9px; }.hero-steps em { color: #b9c7ff; font-style: normal; }.hero-metrics { display: flex; align-items: center; gap: 33px; padding-right: 12px; }.hero-metrics > div:last-child { display: grid; gap: 3px; }.hero-metrics > div:last-child strong { font-size: 21px; }.hero-metrics span { color: #d5dcff; font-size: 10px; }.growth-ring { display: grid; place-content: center; width: 92px; height: 92px; border: 7px solid #57d3b3; border-top-color: rgba(255,255,255,.24); border-left-color: rgba(255,255,255,.24); border-radius: 50%; text-align: center; transform: rotate(35deg); }.growth-ring strong,.growth-ring span { transform: rotate(-35deg); }.growth-ring strong { font-size: 20px; }.growth-ring span { font-size: 9px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }.metric-card { display: flex; align-items: center; gap: 12px; min-height: 100px; border: 1px solid var(--line); border-radius: 11px; padding: 17px; background: #fff; }.metric-icon { display: grid; flex: 0 0 auto; place-items: center; width: 33px; height: 33px; border-radius: 9px; font-size: 13px; font-weight: 700; }.metric-icon.blue { color: #4670ea; background: #eaf0ff; }.metric-icon.purple { color: #775ce8; background: #f0edff; }.metric-icon.green { color: #159b6c; background: #e8f9f2; }.metric-icon.orange { color: #dc9020; background: #fff3df; }.metric-card span { display: block; color: var(--muted); font-size: 10px; }.metric-card strong { display: block; margin: 3px 0; font-family: Manrope, sans-serif; font-size: 20px; letter-spacing: -.04em; }.metric-card small { color: #97a1b4; font-size: 9px; }.metric-card small i { color: #9aa5b5; font-style: normal; }.metric-card .positive { color: #1aa979; font-weight: 700; }
.content-grid { display: grid; gap: 20px; margin-bottom: 20px; }.content-grid.two-thirds { grid-template-columns: 1.38fr 1fr; }.content-grid.half { grid-template-columns: 1fr 1fr; }.panel { border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.01); }.panel-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 19px 20px 13px; }.panel-header h3 { margin: 0 0 3px; font-family: Manrope, sans-serif; font-size: 14px; letter-spacing: -.025em; }.panel-header p { margin: 0; color: var(--muted); font-size: 10px; }.link-button,.plain-icon { border: 0; color: #5265dc; background: transparent; font-size: 10px; font-weight: 700; }.plain-icon { font-size: 15px; color: #8a95a8; }
.funnel { display: flex; align-items: flex-end; gap: 6px; min-height: 131px; padding: 7px 20px 19px; }.funnel-stage { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; min-width: 0; }.funnel-stage div { display: grid; place-items: center; min-height: 28px; border-radius: 4px 4px 0 0; color: #fff; font-size: 11px; font-weight: 700; }.funnel-stage small { display: block; overflow: hidden; margin-top: 8px; color: #8994a8; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; text-align: center; }.stage-new { background: #7b8af3; }.stage-progress { background: #566fee; }.stage-complete { background: #29bd91; }.stage-pending { background: #a6b0c4; }
.program-card { padding-bottom: 16px; }.rule-flow { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 15px 15px; text-align: center; }.rule-flow > div { width: 31%; }.rule-flow > span { color: #bdc5d4; }.rule-number { display: grid; place-items: center; width: 22px; height: 22px; margin: 0 auto 7px; border: 1px solid #dce2f3; border-radius: 50%; color: #5e67db; background: #f4f5ff; font-size: 10px; font-weight: 700; }.rule-flow b { display: block; font-size: 10px; }.rule-flow strong { display: block; margin: 4px 0 2px; color: #35a874; font-size: 12px; }.rule-flow small { display: block; color: #8793a7; font-size: 8px; line-height: 1.25; }.rule-note { margin: 0 16px; border-radius: 5px; padding: 7px 9px; color: #5b6790; background: #f4f7ff; font-size: 8px; }
.list { padding: 0 20px 10px; }.list-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #f0f2f7; }.list-item:first-child { border-top: 0; }.initials { display: grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #5968dd; background: #edf0ff; font-size: 9px; font-weight: 700; }.list-item .data { min-width: 0; }.list-item .data b { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.list-item .data small { display: block; margin-top: 2px; color: #8791a4; font-size: 9px; }.status { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; border-radius: 99px; padding: 4px 7px; font-size: 8px; font-weight: 700; white-space: nowrap; }.status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }.status.new { color: #ad7015; background: #fff5df; }.status.new::before { background: #e8a027; }.status.progress { color: #435fd2; background: #edf0ff; }.status.progress::before { background: #5b70ec; }.status.complete { color: #188c64; background: #e8f8f1; }.status.complete::before { background: #24b987; }.tips { padding: 0 19px 12px; }.tips > div { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #f0f2f7; }.tips > div > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; color: #6775df; background: #eff1ff; font-size: 12px; }.tips p { flex: 1; margin: 0; }.tips b,.tips small { display: block; }.tips b { font-size: 10px; }.tips small { margin-top: 2px; color: #8a95a7; font-size: 9px; }.small-action { border: 1px solid #dce2ed; border-radius: 5px; padding: 5px 7px; color: #647089; background: #fff; font-size: 8px; font-weight: 700; }

.toolbar { display: flex; gap: 10px; margin-bottom: 16px; }.search { display: flex; align-items: center; width: min(420px, 100%); gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: #fff; color: #8994aa; }.search input { width: 100%; outline: none; border: 0; padding: 11px 0; background: transparent; color: var(--ink); font-size: 12px; }.filter-button,.outline-button { border: 1px solid #dce1ea; border-radius: 7px; padding: 10px 13px; color: #536078; background: #fff; font-size: 11px; font-weight: 600; }.primary-button { border: 0; border-radius: 7px; padding: 10px 14px; color: #fff; background: linear-gradient(135deg, #485fea, #5d54e5); box-shadow: 0 5px 10px rgba(74,88,224,.16); font-size: 11px; font-weight: 700; }.primary-button:hover { filter: brightness(1.04); transform: translateY(-1px); }.table-panel { overflow: auto; }.table-panel table { width: 100%; border-collapse: collapse; text-align: left; }.table-panel th { border-bottom: 1px solid var(--line); padding: 12px 18px; color: #919bb0; background: #fbfcfe; font-size: 9px; font-weight: 700; letter-spacing: .05em; }.table-panel td { border-bottom: 1px solid #eef0f5; padding: 14px 18px; color: #44506a; font-size: 11px; }.table-panel tr:last-child td { border-bottom: 0; }.cell-main { color: #263148; font-weight: 700; }.cell-muted { display: block; margin-top: 3px; color: #8d98ab; font-size: 9px; }.code { border-radius: 4px; padding: 4px 6px; color: #5965d7; background: #eef0ff; font-family: monospace; font-size: 10px; font-weight: 700; }.text-button { border: 0; color: #5967db; background: transparent; font-size: 10px; font-weight: 700; }.copy-button { margin-left: 5px; border: 0; color: #8995ab; background: transparent; font-size: 12px; }
.referral-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.referral-card { border: 1px solid var(--line); border-radius: 11px; padding: 17px; background: #fff; }.referral-card-top { display: flex; align-items: flex-start; justify-content: space-between; }.referral-card h3 { margin: 10px 0 2px; font-size: 14px; }.referral-card p { margin: 0; color: #8490a4; font-size: 10px; }.referral-meta { display: grid; gap: 6px; margin: 14px 0; border-top: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; padding: 12px 0; color: #647086; font-size: 10px; }.referral-meta b { color: #364158; }.referral-card-footer { display: flex; align-items: center; justify-content: space-between; }.referrer-note { color: #8d98a9; font-size: 9px; }.referral-action { border: 0; border-radius: 6px; padding: 7px 9px; color: #fff; background: #5968df; font-size: 9px; font-weight: 700; }
.status-tabs { display: flex; gap: 5px; margin-bottom: 17px; }.tab { border: 1px solid transparent; border-radius: 6px; padding: 7px 10px; color: #778297; background: transparent; font-size: 10px; font-weight: 700; }.tab.active { border-color: #dce1fb; color: #5761d7; background: #f0f1ff; }
.warning-strip { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; border: 1px solid #d7e6ff; border-radius: 8px; padding: 12px 15px; color: #4e6794; background: #f2f7ff; }.warning-strip > span { color: #5284dc; }.warning-strip b,.warning-strip small { display: block; }.warning-strip b { font-size: 11px; }.warning-strip small { margin-top: 2px; font-size: 10px; }

.wallet-layout,.whatsapp-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; margin-bottom: 20px; }.wallet-card { min-height: 216px; overflow: hidden; border-radius: 13px; padding: 24px; color: #fff; background: linear-gradient(135deg, #2e3fa1, #5745cd 60%, #2f71bd); box-shadow: 0 13px 25px rgba(49,62,160,.18); }.wallet-card p { margin: 0 0 9px; color: #c2caff; font-size: 9px; font-weight: 700; letter-spacing: .1em; }.wallet-card select { max-width: 235px; border: 0; border-radius: 5px; padding: 5px 8px; color: #fff; outline: 0; background: rgba(255,255,255,.12); font-size: 10px; }.wallet-card option { color: #172033; }.wallet-card strong { display: block; margin: 22px 0 2px; font-family: Manrope, sans-serif; font-size: 36px; letter-spacing: -.06em; }.wallet-card > span { color: #d3dbff; font-size: 10px; }.wallet-dots { margin-top: 27px; color: rgba(255,255,255,.48); font-family: monospace; letter-spacing: .13em; font-size: 11px; }.wallet-explainer { padding: 24px; }.wallet-explainer .eyebrow { color: #6473d7; }.wallet-explainer h3 { margin: 8px 0 7px; font-family: Manrope, sans-serif; font-size: 20px; }.wallet-explainer p { margin: 0; color: #738097; font-size: 11px; line-height: 1.55; }.wallet-explainer ul { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 0; padding: 0; color: #319c73; list-style: none; font-size: 9px; font-weight: 700; }
.phone-preview { overflow: hidden; border-radius: 21px; border-color: #24324b; background: #e8ddd1; }.phone-top { display: flex; justify-content: space-between; padding: 7px 16px; color: #fff; background: #1c273c; font-size: 9px; }.whatsapp-head { display: flex; align-items: center; gap: 9px; padding: 10px 14px; color: #fff; background: #1f6c5e; }.whatsapp-head .green-avatar { width: 28px; height: 28px; background: #5b87d7; }.whatsapp-head b,.whatsapp-head small { display: block; }.whatsapp-head b { font-size: 10px; }.whatsapp-head small { color: #bbd9d3; font-size: 8px; }.whatsapp-head > span { margin-left: auto; }.chat-bg { min-height: 209px; padding: 20px 17px; background-color: #ece5dd; background-image: radial-gradient(#dcd3c8 1px, transparent 1px); background-size: 14px 14px; }.whatsapp-message { max-width: 83%; border-radius: 0 8px 8px 8px; padding: 10px; color: #3c4854; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.07); font-size: 10px; line-height: 1.5; }.message-time { display: block; margin: 2px 17% 0 0; color: #87949e; font-size: 8px; text-align: right; }.message-config { padding-bottom: 17px; }.automation-list { padding: 0 20px 12px; }.automation-list label { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #eef0f5; }.automation-list input { accent-color: #5c68de; }.automation-list span { flex: 1; }.automation-list b,.automation-list small { display: block; }.automation-list b { font-size: 10px; }.automation-list small { margin-top: 2px; color: #8d98aa; font-size: 9px; }.automation-list em { border-radius: 99px; padding: 3px 6px; color: #168f64; background: #e5f7ef; font-size: 8px; font-style: normal; font-weight: 700; }.message-config .outline-button { margin-left: 20px; }.message-log { max-height: 270px; overflow: auto; padding: 0 20px 12px; }.log-item { display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid #eef0f5; }.log-item > span { display: grid; flex: 0 0 auto; place-items: center; width: 25px; height: 25px; border-radius: 7px; color: #349875; background: #e7f8f0; }.log-item b,.log-item small { display: block; }.log-item b { color: #344056; font-size: 10px; }.log-item small { margin-top: 2px; color: #7e899d; font-size: 9px; }.log-item p { margin: 4px 0 0; color: #738096; font-size: 9px; line-height: 1.35; }
.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 20px; }.setting-card { min-height: 246px; padding: 21px; }.setting-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 9px; background: #f0f1ff; }.setting-card h3 { margin: 14px 0 4px; font-family: Manrope, sans-serif; font-size: 14px; }.setting-card p { margin: 0 0 15px; color: #7d899d; font-size: 10px; }.setting-card label { display: block; color: #6a768d; font-size: 9px; font-weight: 700; }.setting-card input { display: block; width: 100%; margin-top: 5px; border: 1px solid #dce1eb; border-radius: 6px; padding: 8px; outline: 0; color: #354057; font-size: 12px; }.setting-card input:focus { border-color: #6672df; box-shadow: 0 0 0 3px #eef0ff; }.setting-card small { display: block; margin-top: 9px; color: #9aa4b3; font-size: 9px; line-height: 1.35; }.implementation-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px; }.implementation-card .eyebrow { color: #6572dd; }.implementation-card h3 { margin: 7px 0 4px; font-family: Manrope, sans-serif; font-size: 15px; }.implementation-card p { max-width: 600px; margin: 0; color: #748095; font-size: 10px; line-height: 1.5; }.implementation-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 15px; flex: 0 0 280px; color: #2b9a70; font-size: 10px; font-weight: 700; }.save-settings { display: block; margin: 20px 0 0 auto; }

.import-panel { padding-bottom: 20px; }.hidden-input { display: none; }.dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 20px 20px; border: 1.5px dashed #c7cedd; border-radius: 10px; padding: 34px 20px; color: #4a5571; background: #fafbfe; text-align: center; cursor: pointer; transition: .15s ease; }.dropzone:hover,.dropzone.dragover { border-color: #5968df; background: #f3f4ff; }.dropzone-icon { font-size: 26px; color: #6b78e8; }.dropzone b { font-size: 12px; }.dropzone small { color: #8a95ab; font-size: 10px; }
.info-strip { border-color: #ffe3b0; background: #fff8ec; color: #7a5a1c; }.info-strip > span { color: #d99b2b; }
.import-summary { display: flex; gap: 8px; }.summary-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; color: #5c6780; background: #fff; font-size: 10px; font-weight: 600; }.summary-chip b { color: #263148; }.summary-chip.valid { border-color: #c9eadc; color: #188c64; background: #f1fcf7; }.summary-chip.invalid { border-color: #f5c7d0; color: #a23048; background: #fff4f6; }
.status.invalid { color: #a23048; background: #fff1f3; }.status.invalid::before { background: #e24a67; }
.status.discarded { color: #667085; background: #eef1f5; }.status.discarded::before { background: #98a2b3; }

.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); }.modal-backdrop.open { display: flex; }.modal { width: min(510px, 100%); max-height: 90vh; overflow: auto; border-radius: 13px; padding: 24px; background: #fff; box-shadow: 0 24px 48px rgba(15,23,42,.2); }.modal h2 { margin: 0 0 5px; font-family: Manrope, sans-serif; font-size: 18px; }.modal > p { margin: 0 0 19px; color: #78849a; font-size: 11px; }.modal label { display: block; margin: 12px 0 5px; color: #526076; font-size: 10px; font-weight: 700; }.modal input,.modal select { width: 100%; border: 1px solid #dce2ed; border-radius: 7px; padding: 10px; outline: 0; color: #344056; background: #fff; font-size: 12px; }.modal input:focus,.modal select:focus { border-color: #6270e3; box-shadow: 0 0 0 3px #eef0ff; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }.modal .copy-link { display: flex; gap: 7px; margin: 16px 0; }.modal .copy-link input { color: #5968d9; background: #f5f6ff; font-size: 10px; }.modal .copy-link button { border: 0; border-radius: 6px; padding: 8px 10px; color: #fff; background: #5968de; font-size: 10px; font-weight: 700; }.qr-placeholder { display: grid; place-items: center; width: 160px; height: 160px; margin: 16px auto; background: repeating-conic-gradient(#1e293b 0 25%, #fff 0 50%) 50% / 20px 20px; border: 12px solid #fff; box-shadow: 0 0 0 1px #dce2ec; }.empty { padding: 32px; color: #8c97a9; text-align: center; font-size: 12px; }
#toast-container { position: fixed; right: 22px; bottom: 22px; z-index: 20; display: grid; gap: 9px; }.toast { min-width: 270px; max-width: 360px; border: 1px solid #c9eadc; border-radius: 9px; padding: 12px 14px; color: #176d50; background: #f1fcf7; box-shadow: 0 10px 22px rgba(16,24,40,.13); font-size: 11px; animation: toast-in .23s ease-out; }.toast.error { border-color: #f5c7d0; color: #a23048; background: #fff4f6; }@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 1100px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.hero-metrics { display: none; }.content-grid.two-thirds,.content-grid.half,.wallet-layout,.whatsapp-layout { grid-template-columns: 1fr; }.settings-grid { grid-template-columns: 1fr; }.referral-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .sidebar { position: static; width: 100%; min-height: auto; padding: 12px; }.app-shell { display: block; }.sidebar nav { grid-template-columns: repeat(2, 1fr); }.sidebar-bottom,.program-badge { display: none; }.main-content { width: 100%; margin: 0; padding: 0 15px 30px; }.topbar { min-height: 80px; margin: 0 -15px 19px; padding: 14px 15px; }.header-actions { gap: 7px; }.environment-tag { display: none; }.hero-card { min-height: 190px; padding: 24px; }.hero-copy h2 { font-size: 20px; }.hero-steps { flex-wrap: wrap; }.metric-grid,.referral-board { grid-template-columns: 1fr; }.section-heading { align-items: flex-start; flex-direction: column; }.implementation-card { align-items: flex-start; flex-direction: column; }.implementation-list { flex-basis: auto; }.wallet-card strong { font-size: 30px; } }