:root{--black:#111214;--charcoal:#24262a;--gold:#b78a38;--gold-soft:#f5ead2;--white:#fff;--canvas:#f7f6f2;--emerald:#17865e;--blue:#246bce;--amber:#b66d09;--red:#b42332;--text:#17181a;--muted:#69707a;--line:#dedbd3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 82% 0,#f3e6c9 0,transparent 30%),var(--canvas);color:var(--text);min-height:100vh}button,input{font:inherit}.shell{display:grid;grid-template-columns:272px 1fr;min-height:100vh}.side{padding:27px 18px;background:var(--black);color:#fff;position:sticky;top:0;height:100vh}.brand{display:flex;gap:12px;align-items:center;margin:0 8px 36px}.mark{width:40px;height:40px;border:1px solid var(--gold);border-radius:12px;display:grid;place-items:center;color:var(--gold);font-weight:900;box-shadow:inset 0 0 0 3px #111}.brand strong{display:block}.brand small{color:#9fa3aa}nav a{display:flex;gap:12px;padding:12px 14px;margin:5px 0;border-radius:10px;color:#aeb2b8;text-decoration:none;transition:.2s ease}nav a.active,nav a:hover{background:#2b2c2f;color:#fff;transform:translateX(2px)}nav a.active{box-shadow:inset 3px 0 var(--gold)}.main{padding:34px 4vw}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.eyebrow{color:var(--gold);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800}.top h1{font-size:clamp(28px,4vw,44px);margin:5px 0;letter-spacing:-.03em}.pill{padding:9px 13px;border:1px solid #cfcac0;border-radius:999px;color:var(--charcoal);background:#fff}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:18px;padding:23px;box-shadow:0 16px 50px #1a1a1a0b}.hero{grid-column:span 8;min-height:230px;background:linear-gradient(135deg,#151515,#2b2b2b);color:#fff;border-color:#3c3c3c;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:220px;height:220px;border:1px solid #b78a3866;border-radius:50%;right:-60px;top:-90px}.rank{grid-column:span 4;border-top:3px solid var(--gold)}.journey{grid-column:span 8}.wallet{grid-column:span 4}.card h2,.card h3{margin-top:0}.muted{color:var(--muted)}.hero .muted{color:#bfc1c5}.progress{height:9px;background:#ece8df;border-radius:9px;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#dfbd72);border-radius:9px}.cta{display:inline-block;background:var(--gold);color:#111;text-decoration:none;border:0;border-radius:10px;padding:12px 18px;font-weight:800;margin-top:14px;cursor:pointer;box-shadow:0 8px 24px #b78a3830}.journey-list{display:flex;gap:7px;flex-wrap:wrap}.step{padding:9px 11px;border-radius:9px;background:#f0eee8;color:var(--muted);font-size:13px;border:1px solid transparent}.step.done{color:var(--emerald);border-color:#bcdcca;background:#eff9f4}.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(125deg,#111 0,#242424 48%,#f7f6f2 48%)}.auth-card{width:min(480px,100%);padding:38px;background:#fff;border:1px solid #dedbd3;border-radius:24px;box-shadow:0 28px 80px #0003}.auth-card .brand{color:#111;margin-left:0}.auth-card .brand small{color:var(--muted)}.auth-card h1{margin:18px 0 5px;letter-spacing:-.03em}.field{display:grid;gap:7px;margin:15px 0;color:#36383b}.field input{width:100%;padding:13px;background:#fff;border:1px solid #cfcac0;border-radius:10px;color:#111;outline:none}.field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #b78a3820}.auth-card button.cta{width:100%;background:#111;color:#fff}.link{background:none;border:0;color:var(--blue);cursor:pointer}.error{color:var(--red);min-height:24px}.skeleton{opacity:.6;animation:pulse 1.4s infinite}@keyframes pulse{50%{opacity:.25}}@media(max-width:900px){.shell{grid-template-columns:1fr}.side{height:auto;position:static}.side nav{display:flex;overflow:auto}.brand{margin-bottom:15px}.hero,.rank,.journey,.wallet{grid-column:span 12}.main{padding:22px}.top{align-items:flex-start;gap:12px}.auth{background:#f7f6f2}}
.logout{position:absolute;bottom:24px;left:28px;color:#aaa}.top-actions,.status-row{display:flex;gap:10px;align-items:center;justify-content:space-between}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.metric{display:grid;gap:8px;border-top:3px solid var(--gold)}.metric strong{font-size:28px}.split{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(420px,1.5fr);gap:18px}.stack,.form-grid{display:grid;gap:12px}.form-grid{grid-template-columns:repeat(2,1fr)}.form-grid label{display:grid;gap:6px}.stack input,.stack select,.form-grid input,.form-grid select{padding:12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#111}.form-card{max-width:900px}.status{display:inline-block;padding:5px 9px;border-radius:999px;background:#eee;color:#555;font-size:12px;text-transform:capitalize}.status.approved,.status.active{background:#e6f6ef;color:var(--emerald)}.status.submitted,.status.review{background:#fff5df;color:var(--amber)}.status.rejected,.status.inactive{background:#fdebed;color:var(--red)}.success{padding:18px;border-radius:12px;background:#e6f6ef;color:var(--emerald);font-weight:800}.lesson-list{margin-top:18px}.lesson{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}.lesson>div{display:grid;grid-template-columns:auto 1fr;gap:3px 10px}.lesson small{grid-column:2;color:var(--muted)}.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.offer{border-top:3px solid var(--gold)}.linkbox{padding:10px;background:#f2efe8;border-radius:8px;word-break:break-all;margin-top:14px}.network{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.member{display:flex;gap:12px;padding:15px;border:1px solid var(--line);border-radius:12px}.member>div:last-child{display:grid;gap:4px}.avatar{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;background:#111;color:var(--gold);font-weight:900}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}code{font-size:11px;white-space:normal}.course{margin-bottom:18px}button:disabled{opacity:.5;cursor:wait}@media(max-width:1100px){.metrics{grid-template-columns:repeat(2,1fr)}.offer-grid,.network{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.logout{position:static;margin:12px}.split{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.top-actions{flex-wrap:wrap;justify-content:flex-end}}@media(max-width:600px){.metrics,.offer-grid,.network{grid-template-columns:1fr}.top{display:grid}.top-actions{justify-content:flex-start}.card{padding:18px}}
/* Secure profile identity */
.command-profile,.profile-upload-row{display:flex;align-items:center;gap:18px}.command-profile-card{grid-column:span 12}.profile-avatar{width:88px;height:88px;flex:0 0 88px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#111;color:var(--gold);border:3px solid var(--gold);font-size:28px;font-weight:900}.profile-avatar>*{grid-area:1/1}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-upload-row h2{margin-bottom:4px}
.kyc-evidence-list{display:grid;gap:8px;min-width:330px}.kyc-review-doc{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px;border:1px solid var(--line);border-radius:10px;background:#fff}.kyc-review-doc>div{display:grid;gap:3px}.kyc-review-doc small{color:var(--muted)}.kyc-review-doc.missing{border-color:#efc3c8;background:#fff7f8}.kyc-evidence-list+.notice,.kyc-evidence-list+.success{margin:10px 0 0;padding:10px;font-size:12px}
.correction-card{border:2px solid #e3a2aa;background:#fff5f6}.correction-card h2{color:var(--red);margin:8px 0}.correction-card>p:not(.muted){font-size:18px;font-weight:700;white-space:pre-wrap}
.referral-qr{max-width:240px;margin:20px auto 0;padding:12px;background:#fff;border:1px solid #d7b363;border-radius:16px}.referral-qr svg{display:block;width:100%;height:auto}
/* Responsive workspace and active-role controls */
.top{gap:16px}.title-block{flex:1 1 280px;min-width:220px}.top-actions{flex:1 1 560px;min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-end}.top-actions>#workspacePicker{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}.top-actions .pill{white-space:nowrap;max-width:100%}.top-actions select.pill{min-width:130px;width:auto;text-overflow:ellipsis}
@media(max-width:1200px){.top{align-items:flex-start;flex-wrap:wrap}.top-actions{flex-basis:100%;justify-content:flex-start}}
@media(max-width:900px){.top-actions{width:100%;margin-left:0;justify-content:flex-start}.title-block{min-width:0}.top-actions>#workspacePicker{flex:1 1 100%}}
@media(max-width:600px){.top{display:flex;flex-wrap:wrap}.top-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.top-actions>#workspacePicker{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.top-actions .pill,.top-actions select.pill{width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis}}
/* Metric labels and values must remain visually separated on every dashboard. */
.metrics>.card{display:grid;gap:8px}.metrics>.card span{display:block;line-height:1.35}.metrics>.card strong{display:block;font-size:28px;line-height:1.15}
/* Communication campaign: compact controls that never escape the card. */
#campaignForm{min-width:0;max-width:100%;overflow:hidden}
#campaignForm>*{min-width:0;max-width:100%}
#campaignForm input,#campaignForm select,#campaignForm textarea{width:100%;min-width:0;max-width:100%}
#campaignForm .status-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;min-width:0}
#campaignForm .status-row>input{flex:1 1 180px;width:auto}
#campaignForm .status-row>div{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%}
#campaignForm button{width:auto;max-width:100%;min-height:38px;padding:8px 12px;margin:0;white-space:normal;line-height:1.2}
#campaignForm>button.cta{width:100%;margin-top:4px;padding:11px 14px}
#campaignForm .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#campaignAudience{display:grid;gap:7px;max-width:100%;overflow:hidden}
#campaignAudience label{display:flex;align-items:flex-start;gap:8px;min-width:0;padding:8px 9px;border:1px solid var(--line);border-radius:9px;overflow-wrap:anywhere}
#campaignAudience input{flex:0 0 auto;width:auto;margin-top:3px}
@media(max-width:1200px){#campaignForm .form-grid{grid-template-columns:1fr}}
@media(max-width:600px){#campaignForm .status-row{display:grid;grid-template-columns:1fr;width:100%}#campaignForm .status-row>input,#campaignForm .status-row>div{width:100%}#campaignForm .status-row>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#campaignForm .status-row button{width:100%}.split>.card{min-width:0;padding:16px}.split{gap:14px}}

/* Message queue: filters, table actions and pagination stay inside the card. */
#messageQueueCard{min-width:0;max-width:100%;overflow:hidden}
#messageQueueCard>.form-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
#messageQueueCard>.form-grid>*{min-width:0}
#messageQueueCard>.form-grid input,#messageQueueCard>.form-grid select{width:100%;min-width:0;max-width:100%}
#messageQueueCard .table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
#messageQueueCard th:last-child,#messageQueueCard td:last-child{min-width:230px}
.message-row-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.message-row-actions button{width:auto;max-width:100%;min-height:34px;margin:0;padding:7px 10px;white-space:normal;line-height:1.15}
.message-row-actions .message-bulk-select{flex:0 0 auto;width:18px;height:18px;margin:0 3px 0 0}
#messageQueueActions{display:flex;justify-content:flex-start;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;margin-top:12px}
#messageQueueActions button{width:auto;max-width:100%;min-height:36px;margin:0;padding:8px 11px;white-space:normal;line-height:1.15}
#messageQueuePage{margin-left:auto;white-space:nowrap}
@media(max-width:600px){#messageQueueCard{padding:16px}#messageQueueCard>.form-grid{grid-template-columns:1fr}#messageQueueActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}#messageQueueActions button{width:100%;min-width:0}#messageQueuePage{grid-column:1/-1;margin:0;text-align:center}.message-row-actions{min-width:190px}}