*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif}
:root{--bg:#050a19;--card:#111a2d;--card2:#0c1426;--line:#24304a;--muted:#8390a7;--white:#fff;--purple:#8427ff;--blue:#0798dc;--pink:#f50055;--green:#08dc94;--yellow:#ffc426}
html,body{min-height:100%;background:var(--bg)}
body{color:#fff;padding:10px 10px 28px;display:flex;justify-content:center;overflow-x:hidden}
button,a{font-family:inherit}
button{cursor:pointer}
.app-container{width:100%;max-width:480px;display:flex;flex-direction:column;gap:10px}

/* HEADER */
.top-header{background:linear-gradient(145deg,#6841f4 0%,#2d58ee 52%,#087bd0 100%);border-radius:18px;padding:13px 13px 12px;box-shadow:0 12px 30px rgba(30,58,190,.22)}
.brand-row{display:flex;align-items:center;justify-content:space-between}
.brand-left{display:flex;align-items:center;gap:9px}
.brand-logo{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-weight:1000;font-size:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.brand-name{font-size:17px;font-weight:1000;line-height:1}
.brand-sub{font-size:9px;opacity:.78;margin-top:3px}
.settings-btn{width:31px;height:31px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#fff;font-size:15px}
.header-actions{display:flex;align-items:center;gap:7px;margin-top:11px}
.live-pill{background:rgba(0,35,55,.46);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:7px 9px;font-size:8px;font-weight:800;white-space:nowrap;flex:1}
.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#16e9a0;margin-right:4px;box-shadow:0 0 0 3px rgba(22,233,160,.12)}
.care-btn{border:0;border-radius:20px;background:#ffc323;color:#17100a;font-size:9px;font-weight:1000;padding:8px 11px;white-space:nowrap}
.download-btn{display:inline-block;margin-top:8px;color:#fff;text-decoration:none;background:rgba(4,16,45,.25);border:1px solid rgba(255,255,255,.16);border-radius:15px;padding:7px 11px;font-size:8px;font-weight:900}

/* MONEY */
.money-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
.money-card{min-height:68px;border-radius:17px;padding:9px 9px 8px;overflow:hidden}
.money-card.profit{background:linear-gradient(145deg,#08ad84,#009f84)}
.money-card.balance{background:linear-gradient(145deg,#057fae,#069ed3)}
.money-card.withdrawal{background:linear-gradient(145deg,#ff6b38,#f33b56)}
.money-head{font-size:7px;font-weight:1000;letter-spacing:.15px;display:flex;justify-content:space-between;opacity:.9}
.money-value{font-size:13px;font-weight:1000;margin-top:7px}
.money-foot{font-size:7px;margin-top:4px;opacity:.75}
.money-action{display:block;border:0;border-radius:12px;background:#071a25;color:#fff;font-size:8px;font-weight:1000;padding:5px 9px;margin-top:5px;width:100%}
.main-register{display:block;text-align:center;text-decoration:none;background:linear-gradient(90deg,#7b2bff,#0b9de7);color:#fff;border-radius:18px;padding:11px 10px;font-size:10px;font-weight:1000;box-shadow:0 7px 20px rgba(79,49,255,.2)}

/* PEOPLE */
.people-section{padding-top:1px}
.people-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin:3px 1px 7px}
.people-heading h2{font-size:14px;font-weight:1000}
.people-heading p{font-size:8px;color:#68758d;margin-top:3px}
.filters{display:flex;gap:2px;background:#11192c;border:1px solid #202b42;padding:2px;border-radius:14px}
.filter{border:0;background:transparent;color:#718098;font-size:7px;font-weight:900;padding:6px 7px;border-radius:11px}
.filter.active{background:#7434ee;color:#fff;box-shadow:0 3px 10px rgba(116,52,238,.3)}
.wazungu-list{display:flex;flex-direction:column;gap:8px;max-height:610px;overflow-y:auto;padding-right:1px;scrollbar-width:none}
.wazungu-list::-webkit-scrollbar{display:none}
.mzungu-card{background:linear-gradient(145deg,#111a2d,#0d1526);border:1px solid #202d46;border-radius:17px;padding:10px 10px 9px;box-shadow:0 7px 18px rgba(0,0,0,.16)}
.mzungu-header{display:flex;align-items:center;gap:8px;min-width:0}
.avatar-wrap{position:relative;flex:0 0 42px}
.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #293752;background:#1c2740}
.online-dot{position:absolute;right:0;bottom:1px;width:9px;height:9px;border-radius:50%;background:#11d998;border:2px solid #111a2d}
.offline-dot{background:#f43f61}
.mzungu-info{min-width:0;flex:1}
.mzungu-info h4{font-size:10px;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mzungu-info .meta{font-size:7px;color:#8a96a9;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-text{display:inline-block;font-size:6px;font-weight:1000;margin-top:3px;color:#08e0a0;background:rgba(8,224,160,.08);padding:2px 5px;border-radius:8px}
.status-text.offline{color:#ff4c6b;background:rgba(255,76,107,.08)}
.price-badge{min-width:67px;background:#ffc526;color:#10131c;border-radius:12px;padding:6px 7px;text-align:center;font-size:6px;font-weight:1000;line-height:1.1}
.price-badge strong{display:block;font-size:8px;margin-top:2px}
.card-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-top:8px}
.card-actions button{border:0;border-radius:14px;color:#fff;padding:7px 2px;font-size:8px;font-weight:1000;white-space:nowrap}
.btn-chat{background:linear-gradient(90deg,#7922ff,#9d24ff)}
.btn-call{background:#078fd7}
.btn-video{background:#ef0050}
.card-actions .completed{background:#202a3d;color:#77849a;cursor:not-allowed}

/* LOWER SECTIONS */
.support-card,.transactions-card,.reviews-card{background:linear-gradient(145deg,#10192b,#0b1323);border:1px solid #202c44;border-radius:18px;padding:13px 11px}
.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.section-title-row h2{font-size:14px;font-weight:1000}
.section-title-row p{font-size:8px;color:#6e7b91;margin-top:3px}
.round-section-icon{width:32px;height:32px;border-radius:11px;background:linear-gradient(135deg,#7827ff,#0797dc);display:flex;align-items:center;justify-content:center}
.support-buttons{display:flex;flex-direction:column;gap:7px}
.support-item{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;border-radius:14px;padding:9px 10px}
.support-item.whatsapp{background:#1cae54}.support-item.group{background:#151d31;border:1px solid #ca2d80}
.support-symbol{font-size:18px;width:25px;text-align:center}
.support-item span:nth-child(2){display:flex;flex-direction:column;flex:1}
.support-item b{font-size:10px}.support-item small{font-size:7px;opacity:.72;margin-top:2px}.support-item i{font-size:18px;font-style:normal;opacity:.7}
.live-tag{font-size:7px;color:#05df96;background:rgba(5,223,150,.08);padding:5px 7px;border-radius:10px}
.transactions-list{display:flex;flex-direction:column;gap:6px}
.transaction{display:flex;align-items:center;justify-content:space-between;background:#080f1e;border:1px solid #18243a;border-radius:12px;padding:8px}
.transaction span{display:flex;flex-direction:column;min-width:0}.transaction b{font-size:8px}.transaction small{font-size:6px;color:#68768c;margin-top:2px}.transaction strong{font-size:8px;color:#08df99;white-space:nowrap}
.rating{background:#131c2f;border:1px solid #2c2d2a;border-radius:12px;padding:6px 8px;text-align:center;min-width:69px}
.rating b{display:block;font-size:15px;color:#ffc326}.rating span{display:block;font-size:7px;color:#ffc326;letter-spacing:1px}.rating small{display:block;font-size:6px;color:#69758b;margin-top:2px}
.reviews{display:flex;flex-direction:column;gap:6px}.review{display:flex;gap:8px;background:#080f1e;border:1px solid #18243a;border-radius:13px;padding:9px}
.review-avatar{width:31px;height:31px;flex:0 0 31px;border-radius:50%;background:linear-gradient(135deg,#7930ff,#087fd6);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:1000}
.review>div:nth-child(2){min-width:0;position:relative;flex:1}.review b{font-size:8px}.review small{font-size:6px;color:#69778c;margin-left:5px}.review span{float:right;font-size:7px;color:#ffc326}.review em{color:#344159;font-style:normal}.review p{font-size:7px;color:#8996aa;line-height:1.4;margin-top:5px}

/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(1,5,15,.86);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:12px;z-index:1000}
.modal-card,.chat-room-card{background:#10192b;border:1px solid #293650;border-radius:19px;width:100%;max-width:410px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal-card{padding:17px;position:relative}.close-btn{position:absolute;top:10px;right:10px;width:28px;height:28px;border:0;border-radius:50%;background:#1b263b;color:#a9b4c4;font-size:18px}
.modal-profile{text-align:center;padding:6px 0 12px}.modal-profile img{width:65px;height:65px;border-radius:50%;object-fit:cover;border:2px solid #2b3852}.modal-profile h3{font-size:17px;margin-top:7px}.modal-profile p{font-size:9px;color:#8794a8;margin-top:3px}.modal-profile span{display:block;font-size:9px;color:#8794a8;margin-top:8px}
.time-options{display:flex;flex-direction:column;gap:6px}.time-options button{display:flex;align-items:center;justify-content:space-between;background:#090f1d;border:1px solid #24314a;color:#fff;border-radius:12px;padding:10px 12px;font-size:10px}.time-options strong{color:#ffc526}
.chat-room-card{height:570px;display:flex;flex-direction:column;overflow:hidden;position:relative}.chat-header{display:flex;align-items:center;justify-content:space-between;background:#162036;padding:11px 13px}.chat-user-info{display:flex;align-items:center;gap:8px}.chat-user-info img{width:34px;height:34px;border-radius:50%;object-fit:cover}.chat-user-info b{font-size:11px;display:block}.online-status{font-size:7px;color:#08df99}.progress-container{height:4px;background:#080e1a}.progress-bar{height:100%;width:0;background:linear-gradient(90deg,#8128ff,#00bdf4)}.timer-text{text-align:center;background:#0a1120;color:#8390a4;font-size:8px;padding:5px}.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:7px;background:#070d1a}.msg{max-width:78%;padding:8px 10px;border-radius:13px;font-size:10px;line-height:1.4}.msg.received{align-self:flex-start;background:#19243a}.msg.sent{align-self:flex-end;background:#7e25ff}.chat-input-area{display:flex;gap:6px;padding:8px;background:#141e32}.chat-input-area input{flex:1;background:#080e1c;border:1px solid #26334c;color:#fff;border-radius:18px;padding:9px;font-size:10px;outline:0}.chat-input-area button{border:0;border-radius:18px;background:#08dc94;color:#04120d;font-size:9px;font-weight:1000;padding:0 14px}
.reward-card{text-align:center}.reward-icon{font-size:38px}.reward-card h3{font-size:20px;margin-top:3px}.reward-amount{color:#ffc526;font-size:11px;font-weight:900;margin:7px 0 12px}.reward-info{background:#080f1e;border:1px solid #3d341d;border-radius:13px;padding:11px;text-align:left;font-size:9px;color:#bdc7d4;line-height:1.5;margin-bottom:13px}.reward-info p+p{margin-top:7px}.reward-info b{color:#ffc526}
.modal-balance{font-size:9px;color:#8794a8;margin:6px 0 12px}.modal-card form label{display:block;font-size:8px;color:#8794a8;margin:8px 0 4px}.form-control{width:100%;background:#080f1e;border:1px solid #27344c;border-radius:10px;padding:9px;color:#fff;font-size:10px;outline:0}.submit-btn{width:100%;border:0;border-radius:17px;background:#08d98f;color:#03130e;padding:10px;font-size:10px;font-weight:1000;margin-top:12px}.error-card{text-align:center;border-color:#ef3d5d}.error-icon{width:45px;height:45px;border-radius:50%;margin:2px auto 9px;border:2px solid #ef3d5d;color:#ff5471;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:1000}.error-card h3{font-size:16px;color:#ff5471}.error-card p{font-size:9px;color:#8592a7;line-height:1.5;margin:7px 0 14px}

/* NOTIFICATION */
.floating-notification{position:fixed;top:-130px;left:50%;transform:translateX(-50%);width:calc(100% - 20px);max-width:460px;background:#003b30;border:2px solid #09d99a;border-radius:22px;padding:9px 10px;display:flex;align-items:center;gap:8px;z-index:9999;box-shadow:0 15px 45px rgba(0,0,0,.55);transition:top .42s cubic-bezier(.175,.885,.32,1.275)}
.floating-notification.show{top:12px}.notif-icon{width:38px;height:38px;border-radius:50%;background:#08dc94;color:#00372b;display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 38px}.notif-content{min-width:0;flex:1}.notif-kicker{font-size:7px;color:#43edb6;font-weight:1000;letter-spacing:.4px}.notif-title{font-size:10px;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.notif-desc{font-size:8px;color:#c7d6d1;margin-top:2px}.notif-desc span{color:#ffc526;font-weight:1000}.notif-close{width:26px;height:26px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#b7c7c2;font-size:16px}

@media(max-width:360px){
 .app-container{max-width:100%}.money-grid{gap:5px}.money-card{padding:8px 7px}.money-value{font-size:12px}.price-badge{min-width:62px}.card-actions{gap:4px}.card-actions button{font-size:7px}.people-heading h2{font-size:13px}.filter{padding:5px 6px}
}