*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#f4f8f6;color:#071126;}
.login-body{min-height:100vh;background:linear-gradient(135deg,#e9f7ef 0%,#ffffff 46%,#eef3ff 100%);}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:18px;}
.login-card{width:min(920px,100%);background:rgba(255,255,255,.94);border:1px solid #e2ece7;border-radius:24px;padding:24px;box-shadow:0 24px 70px rgba(7,17,38,.14);}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.login-brand h1{margin:0;color:#079247;font-size:34px;}
.login-brand p{margin:2px 0 0;color:#4b5b76;}
.auth-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;}
.auth-grid-login{grid-template-columns:1fr;max-width:460px;margin:0 auto;}
.auth-grid>div{background:#f8fbfa;border:1px solid #edf2ef;border-radius:18px;padding:18px;}
.auth-grid h2{font-size:22px;margin-bottom:10px;}
.app{padding:20px;max-width:900px;margin:0 auto 90px;}
.splash-screen{min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.splash-logo{width:96px;height:96px;border-radius:28px;background:#079247;color:white;display:grid;place-items:center;font-size:54px;font-weight:bold;animation:splashPop .9s ease both;}
.splash-screen h1{font-size:42px;color:#079247;margin:18px 0 6px;animation:splashFade .9s ease .35s both;}
.splash-screen p{color:#4b5b76;animation:splashFade .9s ease .55s both;}
.splash-loader{width:120px;height:5px;background:#dcece4;border-radius:999px;overflow:hidden;margin-top:28px;}
.splash-loader:after{content:"";display:block;width:45%;height:100%;background:#079247;border-radius:999px;animation:splashLoad 2.2s ease-in-out infinite;}
@keyframes splashPop{0%{transform:scale(.65);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes splashFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes splashLoad{0%{transform:translateX(-120%)}100%{transform:translateX(240%)}}
.shell{padding-top:24px;}
h1,h2,h3,p{margin-top:0}
.topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;}
.topbar>div{display:flex;align-items:center;gap:12px;}
.topbar h1{font-size:34px;line-height:1;margin-bottom:4px;color:#079247;}
.topbar p{color:#4b5b76;margin:0;}
.brand-mark{width:58px;height:58px;border-radius:18px;background:#079247;color:white;display:grid;place-items:center;font-size:34px;font-weight:bold;}
.icon-btn,.text-btn{width:auto;padding:10px 14px;background:white;color:#0b172f;border:1px solid #e0e8e4;}
.text-btn{margin-top:0;}
.top-actions{display:flex!important;gap:10px!important;}
.circle-btn{width:54px;height:54px;margin:0;border-radius:16px;background:white;color:#071126;border:1px solid #e0e8e4;font-size:22px;box-shadow:0 8px 20px rgba(10,45,30,.08);display:grid;place-items:center;}
.refresh-btn:before{content:"";width:18px;height:18px;border:2px solid #071126;border-right-color:transparent;border-radius:50%;display:block;}
.refresh-btn:after{content:"";width:7px;height:7px;border-top:2px solid #071126;border-right:2px solid #071126;transform:rotate(30deg);margin-top:-23px;margin-left:12px;display:block;}
.bell-btn:before{content:"";width:15px;height:17px;border:2px solid #071126;border-bottom:none;border-radius:10px 10px 5px 5px;display:block;position:relative;}
.bell-btn:after{content:"";width:18px;height:2px;background:#071126;border-radius:999px;display:block;margin-top:-13px;box-shadow:0 8px 0 -6px #071126;}
.menu-btn{gap:4px;}
.menu-btn span{display:block;width:22px;height:2px;background:#071126;border-radius:999px;}
.more-menu{position:absolute;right:0;top:68px;z-index:5;width:min(280px,88vw);background:white;border-radius:18px;padding:14px;box-shadow:0 18px 45px rgba(10,45,30,.16);border:1px solid #edf2ef;}
.more-menu button{background:white;color:#071126;text-align:left;border-bottom:1px solid #edf2ef;border-radius:0;margin:0;}
.more-menu button:last-child{border-bottom:none;color:#b91c1c;}
.nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:12px 0;}
.card,.hero-panel{background:white;padding:18px;border-radius:18px;margin-top:16px;box-shadow:0 12px 32px rgba(10,45,30,.08);border:1px solid #edf2ef;}
.profile-row{display:flex;align-items:center;gap:18px;margin-bottom:18px;}
.avatar{width:84px;height:84px;border-radius:50%;border:3px solid #079247;background:#e7f6ed;color:#079247;display:grid;place-items:center;font-weight:bold;font-size:24px;}
.profile-row p{color:#4b5b76;margin-bottom:4px;}
.profile-row h2{font-size:30px;margin-bottom:6px;}
.balance-card{position:relative;background:linear-gradient(135deg,#098946,#01502e);color:white;padding:24px;border-radius:20px;overflow:hidden;}
.balance-card:after{content:"";position:absolute;right:-50px;top:-50px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08);}
.eye-btn{position:absolute;right:18px;top:18px;width:auto;min-width:58px;height:36px;padding:8px 12px;margin:0;border-radius:999px;background:rgba(255,255,255,.14);font-size:13px;color:white;}
.balance-card p{opacity:.9;margin-bottom:8px;}
.balance-card h2{font-size:42px;margin-bottom:22px;}
.balance-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.balance-grid div{background:white;color:#071126;border-radius:14px;padding:16px;}
.balance-grid span{display:block;color:#4b5b76;margin-bottom:8px;}
.balance-grid b{color:#079247;font-size:20px;}
.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}
.action-grid button{min-height:86px;background:#eaf6f0;color:#052c1c;font-weight:bold;font-size:18px;}
.admin-panel{background:#071126;color:white;border-radius:18px;padding:16px;margin-top:14px;}
.admin-panel h3{margin-bottom:10px;}
.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.admin-grid button{background:#079247;margin-top:0;}
.flag{font-size:24px;margin-right:6px;}
.quick-card{padding:22px;}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.section-title h3{margin:0;}
.section-title span{color:#071126;font-weight:bold;}
.live-rate{animation:ratePulse 1.4s ease-in-out infinite;color:#067a3a!important;}
@keyframes ratePulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
input,select,textarea{width:100%;padding:13px;margin-top:10px;border-radius:12px;border:1px solid #dbe6df;background:white;color:#071126;}
textarea{min-height:90px;resize:vertical;font-family:Arial,sans-serif;}
button,.button-link{display:inline-block;width:100%;padding:13px;margin-top:10px;border:none;border-radius:12px;background:#079247;color:white;cursor:pointer;text-align:center;text-decoration:none;font-weight:bold;}
button:disabled{opacity:.65;cursor:not-allowed;}
button.loading{position:relative;}
button.loading:after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid rgba(255,255,255,.55);border-top-color:white;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px;}
@keyframes spin{to{transform:rotate(360deg)}}
.secondary-link{background:white;color:#079247;border:1px solid #cfe7d8;}
.instant-btn{display:flex;align-items:center;justify-content:center;gap:12px;font-size:17px;}
.instant-btn span{background:#dff4e8;color:#04733a;border-radius:999px;padding:5px 10px;font-size:12px;}
.hidden{display:none!important;}
.kyc-verified-card{text-align:center;border:1px solid rgba(22,199,132,.35);background:linear-gradient(145deg,rgba(22,199,132,.16),rgba(7,12,14,.96));color:white;}
.kyc-verified-card h3{color:white;margin-bottom:6px;}
.success-mark{position:relative;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:linear-gradient(145deg,#21dd8c,#079247);color:#03100a;font-size:0;font-weight:900;text-transform:uppercase;box-shadow:0 18px 45px rgba(22,199,132,.28),inset 0 0 0 7px rgba(255,255,255,.14);}
.success-mark:before{content:"";width:32px;height:18px;border-left:6px solid white;border-bottom:6px solid white;transform:rotate(-45deg) translate(2px,-2px);border-radius:2px;}
.success-mark:after{content:"DONE";position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.08em;color:#16C784;}
.help{font-size:13px;color:#53627a;margin-top:7px;}
.receipt-id-strip{margin:10px 0 12px;padding:9px 11px;border-radius:12px;background:rgba(22,199,132,.12);border:1px solid rgba(22,199,132,.22);color:#16C784;font-size:12px;letter-spacing:.02em;}
.receipt-id-strip b{color:inherit;}
.receipt-download-btn{margin:10px 0 4px;background:#16C784!important;color:#03100a!important;border:1px solid rgba(22,199,132,.45)!important;box-shadow:0 14px 30px rgba(22,199,132,.18);}
.receipt-action-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 4px;}
.receipt-action-row button{margin:0;}
.asset-fallback-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#16C784,#079247);color:#03100a;font-size:12px;font-weight:1000;letter-spacing:.08em;box-shadow:0 12px 26px rgba(22,199,132,.2);}
.result{margin-top:12px;font-weight:bold;color:#079247;}
.tx-card{background:#f9fbfa;padding:15px;border-radius:14px;margin-top:12px;border:1px solid #edf2ef;}
.tx-card button{width:auto;margin-right:8px;padding:9px 12px;}
.tx-card div{overflow-wrap:anywhere;}
.wallet-card{display:grid;gap:5px;}
.momo-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.momo-logo{width:54px;height:54px;border-radius:16px;background:#ffd400;color:#071126;display:grid;place-items:center;font-weight:900;box-shadow:0 10px 24px rgba(255,212,0,.24);}
.payment-instructions{background:#fff9d9;border:1px solid #ffe780;border-radius:16px;padding:14px;margin:12px 0;color:#071126;}
.payment-instructions h2{margin:8px 0;color:#071126;letter-spacing:1px;}
.payment-option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.payment-option{background:#f9fbfa;border:1px solid #edf2ef;border-radius:14px;padding:12px;}
.payment-option b,.payment-option span,.payment-option small{display:block;}
.payment-option span{font-size:20px;color:#079247;font-weight:800;margin:6px 0;}
.payment-option small{color:#53627a;}
.recipient-preview{background:#eaf6f0;border:1px solid #cfe7d8;border-radius:12px;padding:10px;margin-top:10px;color:#052c1c;}
.recipient-preview span{color:#53627a;font-size:13px;}
.upload-label{display:block;margin-top:10px;font-weight:700;color:#344054;}
.warning-box{background:#fff0d8;color:#9a4b00;border:1px solid #ffd59b;border-radius:12px;padding:10px;margin-top:10px;font-size:13px;}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.danger-btn{background:#b42318;}
.summary-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:12px 0;}
.summary-grid div{background:#f9fbfa;border:1px solid #edf2ef;border-radius:12px;padding:12px;}
.summary-grid b{display:block;color:#079247;font-size:22px;}
.summary-grid span{font-size:12px;color:#53627a;}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(20px);z-index:20;background:#071126;color:white;padding:12px 16px;border-radius:999px;box-shadow:0 16px 40px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:.22s ease;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.notification-panel{position:fixed;right:18px;top:82px;z-index:30;width:min(420px,calc(100% - 28px));max-height:76vh;overflow:auto;background:linear-gradient(145deg,#111816,#07100d);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px;box-shadow:0 22px 55px rgba(0,0,0,.36);color:#fff;}
.notification-panel .section-title{color:#fff;}
.notification-filters{display:flex;gap:8px;overflow:auto;padding:4px 0 12px;margin-bottom:4px;}
.notification-filters button{width:auto;margin:0;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#aab7b2;font-size:12px;white-space:nowrap;}
.notification-filters button.active{background:#16C784;color:#03130d;border-color:#16C784;}
.notification-badge{position:absolute;right:4px;top:4px;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:#16C784;color:#04120d;font-size:10px;font-weight:900;display:grid;place-items:center;border:2px solid #07100d;}
.bell-btn{position:relative;}
.notification-badge.hidden{display:none;}
.push-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;}
.push-card button{width:auto;min-width:180px;margin-top:0;}
.settings-grid{display:grid;gap:10px;margin:14px 0;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #edf2ef;font-weight:800;color:#0f172a;}
.toggle-row input{width:auto;margin:0;transform:scale(1.2);}
.notification-settings-card .help{margin-top:4px;}
.page-shell{min-height:100vh;}
.page-topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-bottom:16px;}
.page-topbar h2{margin:2px 0 0;font-size:26px;}
.back-btn{width:auto;margin:0;padding:10px 14px;border-radius:999px;background:#101816;color:#fff;}
.auto-back-wrap{margin-bottom:12px;}
.settings-menu{display:grid;gap:10px;}
.settings-menu button{display:grid;gap:5px;text-align:left;margin:0;padding:16px;border-radius:16px;background:white;color:#0f172a;border:1px solid #e3ece7;box-shadow:0 12px 28px rgba(9,20,39,.06);}
.settings-menu b{font-size:16px;}
.settings-menu span{font-size:12px;color:#64748b;}
.notification-page-list{display:grid;gap:0;background:linear-gradient(145deg,#111816,#07100d);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:6px 14px;color:white;}
.page-filters{margin-bottom:12px;}
.about-card p{color:#64748b;line-height:1.55;}
.notification-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border-top:1px solid rgba(255,255,255,.08);padding:12px 0;width:100%;background:transparent;color:inherit;box-shadow:none;border-radius:0;}
.notification-item:first-child{border-top:none;}
.notification-open{width:100%;margin:0;padding:0;background:transparent;color:inherit;text-align:left;border:0;box-shadow:none;}
.notification-item p{margin:5px 0;color:#53627a;}
.notification-item span{font-size:12px;color:#64748b;}
.notification-panel .notification-item p{color:#b7c4bf;}
.notification-panel .notification-item small,.notification-panel .notification-meta{display:block;color:#7d8c86;font-size:11px;}
.notification-item.unread b:after{content:" New";font-size:10px;background:#16C784;color:#03130d;border-radius:999px;padding:3px 6px;margin-left:6px;}
.notification-item:hover{background:rgba(255,255,255,.03);}
.notification-delete{width:auto;margin:0;padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.06);color:#c7d3ce;font-size:11px;}
.priority-critical{border-left:3px solid #ef4444;padding-left:10px;}
.priority-high{border-left:3px solid #f59e0b;padding-left:10px;}
.priority-medium{border-left:3px solid #16C784;padding-left:10px;}
.mobile-notification-pop{position:fixed;left:50%;top:18px;z-index:80;width:min(420px,calc(100% - 28px));display:grid;grid-template-columns:42px 1fr;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(22,199,132,.26);border-radius:18px;background:linear-gradient(135deg,#101816,#07100d);color:#fff;text-align:left;box-shadow:0 22px 60px rgba(0,0,0,.36),0 0 0 1px rgba(255,255,255,.04) inset;transform:translate(-50%,-18px);opacity:0;pointer-events:auto;transition:.24s ease;}
.mobile-notification-pop.show{transform:translate(-50%,0);opacity:1;}
.mobile-notification-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#16C784;color:#03130d;font-weight:900;font-size:20px;box-shadow:0 10px 24px rgba(22,199,132,.28);}
.mobile-notification-pop b{display:block;font-size:14px;line-height:1.2;margin-bottom:4px;}
.mobile-notification-pop small{display:block;color:#b8c8c1;font-size:12px;line-height:1.35;}
.status,.badge{display:inline-block;padding:6px 12px;border-radius:999px;font-size:12px;margin-bottom:8px;}
.pending{background:#fff0d8;color:#aa5a00;}
.paid{background:#e1edff;color:#1c5cab;}
.completed{background:#dff4e8;color:#05783a;}
.link{color:#079247;text-decoration:none;display:inline-block;margin-top:10px;font-weight:bold;}
.mini-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:14px 0;border-top:1px solid #edf2ef;}
.mini-row:first-child{border-top:none;}
.mini-row span{display:block;color:#53627a;font-size:13px;}
.security-banner{margin-top:18px;border-radius:18px;padding:22px;background:linear-gradient(135deg,#035330,#8ed4b3);color:white;}
.security-banner p{margin-bottom:0;max-width:560px;}
.balance-switch{position:relative;z-index:1;display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;background:rgba(255,255,255,.14);padding:4px;border-radius:999px;margin-bottom:12px;}
.balance-switch button{margin:0;padding:7px 14px;border-radius:999px;background:transparent;color:white;font-size:13px;}
.balance-switch button.active{background:white;color:#067a3a;}
.balance-equivalent{position:relative;z-index:1;margin-top:-12px;margin-bottom:18px;color:rgba(255,255,255,.88);font-size:14px;}
.bottom-nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:min(860px,calc(100% - 28px));display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:white;border-radius:20px;padding:10px;box-shadow:0 12px 30px rgba(10,45,30,.15);}
.bottom-nav button{margin-top:0;background:white;color:#071126;}
.bottom-nav button:first-child{color:#079247;}
.chat-box{height:320px;overflow:auto;background:#f9fbfa;border:1px solid #edf2ef;border-radius:14px;padding:12px;margin-top:10px;}
.chat-message{max-width:78%;background:white;border:1px solid #e5eee8;border-radius:14px;padding:10px;margin:10px 0;}
.chat-message.own{margin-left:auto;background:#e4f6ec;border-color:#bde8cf;}
.chat-message p{margin:6px 0;}
.chat-message span{font-size:12px;color:#64748b;}
label{display:block;margin-top:10px;color:#071126;}

/* Public approval-ready website pages */
.public-body{min-height:100vh;background:#070d0b;color:#f5fbf8;font-family:Arial,sans-serif;}
.public-body a{color:inherit;}
.public-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px clamp(16px,4vw,54px);background:rgba(7,13,11,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);}
.public-header.compact{position:relative;}
.public-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:18px;white-space:nowrap;}
.public-logo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#16C784;color:#03130d;font-size:15px;letter-spacing:-.04em;box-shadow:0 14px 30px rgba(22,199,132,.22);}
.public-nav{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;font-size:14px;color:#b7c8c1;}
.public-nav a{text-decoration:none;}
.public-nav a:hover,.public-link{color:#16C784;}
.public-actions{display:flex;align-items:center;gap:10px;}
.public-btn{display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:42px;margin:0;padding:11px 18px;border-radius:999px;background:#16C784;color:#03130d!important;text-decoration:none;font-weight:900;border:1px solid rgba(22,199,132,.55);box-shadow:0 14px 34px rgba(22,199,132,.18);}
.public-btn.ghost{background:rgba(255,255,255,.06);color:#f5fbf8!important;border-color:rgba(255,255,255,.12);box-shadow:none;}
.public-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.75fr);gap:26px;align-items:center;max-width:1180px;margin:0 auto;padding:82px clamp(16px,4vw,54px) 44px;}
.public-hero-copy h1{font-size:clamp(38px,6vw,76px);line-height:.98;margin:10px 0 18px;letter-spacing:0;}
.public-hero-copy p{max-width:680px;color:#bed0c8;font-size:18px;line-height:1.6;}
.public-kicker{display:inline-flex;align-items:center;gap:8px;color:#16C784;font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.08em;}
.public-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.public-hero-card,.public-policy-card,.public-compliance-card,.public-card,.public-feature-list>div{border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(18,29,25,.96),rgba(6,12,10,.98));border-radius:26px;box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.03);}
.public-hero-card{padding:22px;}
.public-rate-card{padding:22px;border-radius:22px;background:radial-gradient(circle at 85% 20%,rgba(22,199,132,.22),transparent 38%),linear-gradient(135deg,#093e2a,#09110f);}
.public-rate-card span,.public-rate-card small{display:block;color:#aebdb8;}
.public-rate-card strong{display:block;font-size:38px;margin:12px 0;color:#fff;}
.public-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.public-mini-grid div{padding:14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);}
.public-mini-grid b,.public-mini-grid span{display:block;}
.public-mini-grid span{color:#aebdb8;font-size:13px;margin-top:5px;}
.public-section{max-width:1180px;margin:0 auto;padding:38px clamp(16px,4vw,54px);}
.public-section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px;}
.public-section h2,.public-policy-card h1{font-size:clamp(28px,4vw,44px);margin:6px 0 0;color:#fff;}
.public-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.public-card{padding:20px;}
.public-card b{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:#16C784;color:#03130d;margin-bottom:14px;}
.public-card h3,.public-feature-list h3,.public-compliance-card h3{margin-bottom:8px;color:#fff;}
.public-card p,.public-feature-list p,.public-compliance-card li,.public-policy-card p{color:#b7c8c1;line-height:1.58;}
.public-feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.public-feature-list>div{padding:22px;}
.public-split{display:grid;grid-template-columns:1fr .82fr;gap:18px;align-items:start;}
.public-split p{color:#b7c8c1;line-height:1.65;}
.public-compliance-card{padding:22px;}
.public-compliance-card ul{margin:12px 0 0;padding-left:20px;}
.public-link{display:inline-block;margin-top:12px;font-weight:900;text-decoration:none;}
.public-footer{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start;margin-top:34px;padding:28px clamp(16px,4vw,54px);border-top:1px solid rgba(255,255,255,.08);background:#050a08;color:#b7c8c1;}
.public-footer b{color:#fff;}
.public-footer p{margin:6px 0;}
.public-footer a{color:#b7c8c1;text-decoration:none;}
.public-footer a:hover{color:#16C784;}
.public-footer-links{display:grid;gap:9px;min-width:230px;}
.public-footer.slim{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:20px;}
.public-page{max-width:920px;margin:0 auto;padding:54px 16px;}
.public-policy-card{padding:clamp(20px,4vw,34px);}
.public-policy-card h2{font-size:20px;margin:24px 0 8px;color:#fff;}
.public-info-grid,.public-contact-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;}
.public-info-grid div,.public-contact-list a,.public-contact-list div{display:grid;gap:6px;padding:14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);text-decoration:none;}
.public-info-grid b,.public-contact-list b{color:#fff;}
.public-info-grid span,.public-contact-list span{color:#b7c8c1;overflow-wrap:anywhere;}
.public-note{padding:14px;border-radius:18px;background:rgba(22,199,132,.1);border:1px solid rgba(22,199,132,.22);}
.pin-verify-overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.66);backdrop-filter:blur(8px);}
.pin-verify-card{position:relative;width:min(420px,100%);padding:22px;border-radius:22px;background:linear-gradient(145deg,#111816,#07100d);border:1px solid rgba(255,255,255,.1);color:#fff;box-shadow:0 28px 80px rgba(0,0,0,.42);}
.pin-verify-card h3{margin:8px 0 6px;color:#fff;font-size:24px;}
.pin-verify-card p{color:#b7c8c1;line-height:1.5;margin-bottom:12px;}
.pin-verify-card .help{min-height:18px;color:#ffb4a8;}
.pin-verify-card .password-field input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff;}
.pin-verify-card .password-field button{color:#fff;background:rgba(255,255,255,.08);}
.pin-close{position:absolute;right:14px;top:12px;width:34px;height:34px;margin:0;padding:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:22px;}
.confirm-check{display:flex;align-items:flex-start;gap:10px;margin:12px 0;padding:12px;border-radius:14px;background:rgba(22,199,132,.09);border:1px solid rgba(22,199,132,.18);font-weight:800;color:inherit;}
.confirm-check input{width:auto;margin:2px 0 0;accent-color:#16C784;}
input[readonly]{background:#eef5f1;color:#102018;font-weight:800;}

@media(max-width:880px){
.public-header{position:relative;align-items:flex-start;flex-direction:column;padding:14px 16px;}
.public-nav{justify-content:flex-start;gap:10px;font-size:13px;}
.public-actions{width:100%;}
.public-actions .public-btn{flex:1;}
.public-hero{grid-template-columns:1fr;padding-top:40px;}
.public-card-grid{grid-template-columns:1fr 1fr;}
.public-feature-list,.public-split{grid-template-columns:1fr;}
.public-footer{grid-template-columns:1fr;}
}

@media(max-width:520px){
.public-hero{padding:30px 14px;}
.public-hero-copy h1{font-size:38px;}
.public-hero-copy p{font-size:15px;}
.public-hero-actions{display:grid;}
.public-hero-actions .public-btn{width:100%;}
.public-card-grid,.public-mini-grid,.public-info-grid,.public-contact-list{grid-template-columns:1fr;}
.public-section{padding:26px 14px;}
.public-section-head{align-items:flex-start;flex-direction:column;}
.public-policy-card{border-radius:20px;}
}
@media(max-width:620px){
.login-shell{padding:10px;align-items:start;}
.login-card{border-radius:18px;padding:14px;margin-top:10px;}
.login-brand h1{font-size:25px;}
.auth-grid{grid-template-columns:1fr;gap:10px;}
.auth-grid>div{padding:12px;border-radius:14px;}
.app{padding:10px 8px;margin-bottom:76px;max-width:100%;}
.shell{padding-top:10px;}
.topbar{margin-bottom:8px;}
.topbar h1{font-size:22px;margin-bottom:2px;}
.topbar p{font-size:12px;}
.brand-mark{width:40px;height:40px;border-radius:11px;font-size:22px;}
.circle-btn{width:38px;height:38px;border-radius:12px;font-size:17px;}
.menu-btn span{width:17px;}
.more-menu{top:48px;right:0;width:230px;padding:8px;}
.more-menu button{font-size:13px;padding:10px;}
.nav{display:none;}
.card,.hero-panel{border-radius:14px;padding:10px;margin-top:10px;}
.profile-row{gap:10px;margin-bottom:10px;align-items:center;}
.avatar{width:56px;height:56px;font-size:17px;border-width:2px;}
.profile-row p{font-size:12px;margin-bottom:1px;}
.profile-row h2{font-size:21px;line-height:1.08;margin-bottom:4px;max-width:190px;}
.badge,.status{font-size:10px;padding:4px 8px;margin-bottom:4px;}
.balance-card{padding:16px;border-radius:16px;}
.balance-card p{font-size:13px;margin-bottom:6px;}
.balance-card h2{font-size:27px;margin-bottom:14px;}
.eye-btn{min-width:50px;height:30px;right:12px;top:12px;font-size:11px;padding:6px 10px;}
.balance-grid{grid-template-columns:1fr 1fr;gap:8px;}
.balance-grid div{padding:10px;border-radius:12px;min-height:72px;}
.balance-grid span{font-size:11px;margin-bottom:5px;}
.balance-grid b{font-size:15px;}
.flag{font-size:16px;margin-right:3px;}
.action-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;}
.action-grid button{min-height:52px;padding:9px 4px;font-size:13px;border-radius:12px;}
.admin-panel{padding:12px;border-radius:14px;}
.admin-grid{grid-template-columns:repeat(2,1fr);}
.admin-grid button{font-size:12px;padding:10px 6px;}
.quick-card{padding:11px;}
.section-title{align-items:flex-start;flex-direction:column;gap:3px;margin-bottom:8px;}
.section-title h3{font-size:18px;}
.section-title span{font-size:12px;}
.section-title .text-btn{width:auto;padding:7px 10px;font-size:11px;margin-top:0;}
input,select,textarea{padding:11px;margin-top:8px;border-radius:11px;font-size:13px;}
button,.button-link{padding:11px;border-radius:11px;font-size:13px;}
.instant-btn{font-size:14px;gap:8px;}
.instant-btn span{font-size:10px;padding:4px 8px;}
.result{font-size:13px;margin-top:8px;}
.tx-card{padding:10px;border-radius:12px;margin-top:8px;font-size:13px;}
.momo-header{align-items:flex-start;}
.momo-logo{width:46px;height:46px;border-radius:14px;}
.payment-option-grid{grid-template-columns:1fr;}
.admin-actions button{width:100%;margin-right:0;}
.summary-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
.summary-grid b{font-size:18px;}
.toast{bottom:72px;width:calc(100% - 28px);border-radius:14px;text-align:center;}
.notification-panel{right:8px;top:58px;border-radius:14px;}
.push-card{grid-template-columns:1fr;}
.push-card button{width:100%;margin-top:8px;}
.mini-row{grid-template-columns:1fr auto;gap:6px;padding:10px 0;font-size:13px;}
.mini-row b{font-size:13px;}
.mini-row span{font-size:11px;}
.mini-row .badge{grid-column:1 / -1;width:max-content;}
.security-banner{display:none;}
.bottom-nav{bottom:0;width:100%;border-radius:16px 16px 0 0;gap:2px;padding:6px 6px 8px;}
.bottom-nav button{font-size:11px;padding:8px 3px;border-radius:10px;}
.chat-box{height:260px;}
}

/* Premium ATV Exchange dashboard refresh */
:root{
--atv-ink:#091427;
--atv-ink-soft:#18263d;
--atv-muted:#627087;
--atv-line:#dde7e2;
--atv-panel:#ffffff;
--atv-surface:#f4f7f5;
--atv-green:#078a4b;
--atv-green-dark:#023d2a;
--atv-gold:#c99728;
--atv-danger:#b42318;
}
body{
font-family:Inter,"Segoe UI",Arial,sans-serif;
background:
linear-gradient(180deg,#edf5f1 0,#f8faf8 38%,#eef3f6 100%);
color:var(--atv-ink);
}
.app.shell{
max-width:980px;
padding:22px 18px 104px;
}
.topbar{
position:sticky;
top:0;
z-index:12;
padding:12px 4px 14px;
margin:0 0 8px;
background:linear-gradient(180deg,rgba(244,248,246,.98),rgba(244,248,246,.9));
backdrop-filter:blur(14px);
}
.topbar h1{
font-size:29px;
letter-spacing:0;
color:var(--atv-ink);
}
.topbar p{
font-size:13px;
font-weight:700;
color:var(--atv-green);
}
.brand-mark{
width:52px;
height:52px;
border-radius:15px;
background:linear-gradient(145deg,#063c2b,#0b9a55);
box-shadow:0 16px 30px rgba(3,61,42,.2);
font-size:29px;
}
.circle-btn{
width:48px;
height:48px;
border-radius:15px;
background:rgba(255,255,255,.92);
border:1px solid rgba(221,231,226,.95);
box-shadow:0 10px 24px rgba(9,20,39,.08);
}
.circle-btn:hover,.bottom-nav button:hover,.action-grid button:hover{
transform:translateY(-1px);
}
.more-menu{
top:66px;
border-radius:8px;
padding:8px;
border:1px solid var(--atv-line);
box-shadow:0 22px 55px rgba(9,20,39,.16);
}
.more-menu button{
border-radius:7px;
padding:12px;
font-size:14px;
}
.more-menu button:hover{
background:#f3f7f5;
}
.hero-panel{
display:grid;
grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);
align-items:stretch;
gap:16px;
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.92);
border:1px solid rgba(221,231,226,.9);
box-shadow:0 18px 45px rgba(9,20,39,.08);
}
.profile-row{
height:100%;
margin:0;
padding:18px;
border-radius:14px;
background:linear-gradient(180deg,#ffffff,#f5faf7);
border:1px solid #eaf1ed;
align-items:flex-start;
flex-direction:column;
justify-content:space-between;
}
.profile-row>div:last-child{
min-width:0;
}
.avatar{
width:72px;
height:72px;
border-radius:18px;
border:0;
background:#e7f5ee;
color:var(--atv-green);
box-shadow:inset 0 0 0 1px #cfe7d8;
font-size:22px;
}
.profile-row p{
font-size:13px;
font-weight:700;
color:var(--atv-muted);
margin-bottom:5px;
}
.profile-row h2{
font-size:28px;
line-height:1.08;
margin-bottom:10px;
color:var(--atv-ink);
overflow-wrap:anywhere;
}
.badge,.status{
border-radius:7px;
font-weight:800;
letter-spacing:0;
}
.completed,.paid{
background:#dff4e8;
color:#056236;
}
.pending{
background:#fff5dd;
color:#9a5f00;
}
.balance-card{
min-height:292px;
padding:22px;
border-radius:16px;
background:
linear-gradient(135deg,rgba(255,255,255,.08) 0 1px,transparent 1px 18px),
linear-gradient(145deg,#071a2f 0%,#06452f 48%,#079454 100%);
box-shadow:0 20px 42px rgba(4,66,45,.22);
}
.balance-card:after{
right:0;
top:0;
width:100%;
height:100%;
border-radius:0;
background:linear-gradient(115deg,transparent 0 54%,rgba(255,255,255,.08) 54% 68%,transparent 68%);
pointer-events:none;
}
.balance-switch{
border-radius:8px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.18);
padding:3px;
}
.balance-switch button{
border-radius:6px;
font-weight:900;
}
.balance-switch button.active{
color:#06452f;
}
.eye-btn{
z-index:2;
border-radius:8px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.2);
font-weight:900;
}
.balance-card p{
position:relative;
z-index:1;
font-size:14px;
font-weight:800;
letter-spacing:0;
}
.balance-card h2{
position:relative;
z-index:1;
font-size:43px;
line-height:1;
letter-spacing:0;
margin-bottom:16px;
}
.balance-equivalent{
font-weight:700;
margin-top:-6px;
margin-bottom:18px;
}
.balance-grid{
position:relative;
z-index:1;
gap:10px;
}
.balance-grid div{
border-radius:10px;
padding:14px;
background:rgba(255,255,255,.94);
border:1px solid rgba(255,255,255,.75);
box-shadow:0 12px 24px rgba(5,30,23,.1);
}
.balance-grid span{
font-size:12px;
font-weight:800;
color:#526075;
}
.balance-grid b{
font-size:18px;
color:#064f34;
}
.flag{
display:inline-grid;
place-items:center;
min-width:28px;
height:22px;
padding:0 6px;
border-radius:6px;
margin-right:6px;
background:#eef6f2;
color:#064f34;
font-size:11px;
font-weight:900;
vertical-align:middle;
}
.action-grid{
grid-template-columns:repeat(5,minmax(0,1fr));
gap:12px;
margin:14px 0 0;
}
.action-grid button{
position:relative;
min-height:92px;
padding:18px 14px 16px 62px;
border-radius:14px;
background:var(--atv-panel);
border:1px solid #e3ece7;
box-shadow:0 14px 30px rgba(9,20,39,.07);
color:var(--atv-ink);
font-size:17px;
text-align:left;
transition:transform .16s ease,box-shadow .16s ease;
}
.action-grid button:before{
content:"+";
position:absolute;
left:16px;
top:50%;
width:34px;
height:34px;
margin-top:-17px;
border-radius:10px;
display:grid;
place-items:center;
background:#e5f5ed;
color:var(--atv-green);
font-size:24px;
font-weight:900;
}
.action-grid button:nth-child(2):before{
content:"<>"; 
background:#eef2ff;
color:#243c91;
}
.action-grid button:nth-child(3):before{
content:"+";
background:#fff6df;
color:#a86600;
}
.action-grid button:nth-child(4):before{
content:">";
background:#ecfbf2;
color:#0b8f53;
}
.action-grid button:nth-child(5):before{
content:"v";
background:#f5edff;
color:#6d28d9;
}
.card,.admin-panel{
border-radius:14px;
border:1px solid rgba(221,231,226,.95);
box-shadow:0 14px 35px rgba(9,20,39,.07);
}
.quick-card{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px 14px;
align-items:end;
padding:18px;
}
.quick-card .section-title{
grid-column:1 / -1;
margin-bottom:0;
padding-bottom:10px;
border-bottom:1px solid #edf2ef;
}
.quick-card #result{
align-self:center;
padding:12px;
border-radius:10px;
background:#f6faf8;
border:1px solid #e5eee8;
min-height:44px;
}
.quick-card .instant-btn{
grid-column:1 / -1;
height:52px;
border-radius:10px;
background:linear-gradient(135deg,#078a4b,#035f3a);
box-shadow:0 14px 26px rgba(7,138,75,.18);
}
.instant-btn span{
border-radius:7px;
background:#e8f7ef;
color:#045c34;
}
input,select,textarea{
border-radius:10px;
border-color:#d8e4de;
box-shadow:0 1px 0 rgba(9,20,39,.03);
}
input:focus,select:focus,textarea:focus{
outline:2px solid rgba(7,138,75,.18);
border-color:#8fcfb0;
}
.section-title h3{
font-size:20px;
letter-spacing:0;
color:var(--atv-ink);
}
.section-title span,.live-rate{
font-size:13px;
font-weight:900;
}
.live-rate{
padding:6px 9px;
border-radius:8px;
background:#eef8f3;
}
.payment-options-card{
background:linear-gradient(180deg,#ffffff,#f7faf8);
}
.payment-option{
border-radius:10px;
background:white;
box-shadow:inset 0 0 0 1px #edf2ef;
}
.payment-option span{
font-size:18px;
color:var(--atv-ink);
}
.mini-row{
border-top-color:#e8efeb;
}
.security-banner{
border-radius:14px;
background:linear-gradient(135deg,#071a2f,#06452f 58%,#0b8f53);
box-shadow:0 18px 38px rgba(6,69,47,.16);
}
.bottom-nav{
width:min(940px,calc(100% - 28px));
border-radius:18px;
border:1px solid rgba(221,231,226,.96);
box-shadow:0 18px 45px rgba(9,20,39,.14);
}
.bottom-nav button{
position:relative;
border-radius:12px;
font-weight:900;
color:#4a5568;
transition:background .16s ease,transform .16s ease;
}
.bottom-nav button:first-child{
background:#edf8f2;
color:var(--atv-green);
}
.push-card{
background:linear-gradient(180deg,#ffffff,#f7fbf9);
}
.push-card button{
border-radius:10px;
background:#0f2745;
}
.admin-panel{
background:linear-gradient(135deg,#071a2f,#122743);
}
.admin-grid button{
border-radius:10px;
background:#0b8f53;
}

@media(max-width:720px){
.app.shell{
padding:10px 8px 88px;
}
.topbar{
padding:8px 0 10px;
}
.topbar h1{
font-size:22px;
}
.topbar p{
font-size:11px;
}
.brand-mark{
width:42px;
height:42px;
border-radius:12px;
font-size:23px;
}
.circle-btn{
width:39px;
height:39px;
border-radius:12px;
}
.hero-panel{
display:block;
padding:8px;
border-radius:16px;
}
.profile-row{
min-height:116px;
display:grid;
grid-template-columns:58px 1fr;
align-items:center;
gap:12px;
padding:12px;
margin-bottom:8px;
}
.avatar{
width:58px;
height:58px;
border-radius:15px;
font-size:18px;
}
.profile-row h2{
font-size:22px;
max-width:none;
}
.balance-card{
min-height:0;
padding:15px;
border-radius:15px;
}
.balance-card h2{
font-size:31px;
line-height:1.05;
margin-bottom:13px;
}
.balance-switch button{
padding:6px 12px;
font-size:12px;
}
.balance-grid{
grid-template-columns:1fr;
}
.balance-grid div{
min-height:76px;
padding:12px;
}
.action-grid{
grid-template-columns:repeat(5,1fr);
gap:6px;
}
.action-grid button{
min-height:70px;
padding:40px 4px 9px;
font-size:11px;
text-align:center;
border-radius:12px;
}
.action-grid button:before{
left:50%;
top:10px;
width:27px;
height:27px;
margin:0 0 0 -13px;
border-radius:8px;
font-size:19px;
}
.quick-card{
grid-template-columns:1fr;
padding:13px;
}
.quick-card .section-title{
padding-bottom:8px;
}
.quick-card .instant-btn{
height:48px;
}
.section-title{
flex-direction:row;
align-items:center;
gap:8px;
}
.section-title h3{
font-size:18px;
}
.payment-option-grid{
grid-template-columns:1fr;
}
.push-card{
grid-template-columns:1fr;
}
.push-card button{
width:100%;
}
.bottom-nav{
width:100%;
bottom:0;
border-radius:16px 16px 0 0;
padding:7px 6px 9px;
}
.bottom-nav button{
font-size:11px;
padding:8px 2px;
}
}

/* Admin approval desk */
.admin-shell{
max-width:1180px;
padding:24px 18px 80px;
}
.admin-topbar{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
padding:22px;
border-radius:16px;
background:linear-gradient(135deg,#071a2f,#0a3c32 62%,#0b8f53);
color:white;
box-shadow:0 22px 48px rgba(9,20,39,.16);
}
.admin-topbar h1{
font-size:34px;
line-height:1.05;
margin:5px 0 8px;
letter-spacing:0;
}
.admin-topbar p{
margin:0;
color:rgba(255,255,255,.78);
font-weight:700;
}
.admin-kicker{
display:inline-block;
font-size:12px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#cfa348;
}
.admin-logout-btn{
width:auto;
min-width:118px;
margin:0;
border-radius:10px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.25);
}
.admin-nav{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:10px;
margin:14px 0;
}
.admin-nav button{
margin:0;
border-radius:10px;
background:white;
color:var(--atv-ink);
border:1px solid #e3ece7;
box-shadow:0 10px 22px rgba(9,20,39,.06);
}
.admin-alert-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px;
margin:16px 0 22px;
}
.admin-alert-grid div,
.admin-alert-grid button{
background:linear-gradient(145deg,#111816,#07100d);
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
padding:16px;
color:#fff;
box-shadow:0 14px 35px rgba(0,0,0,.18);
text-align:left;
margin:0;
width:100%;
}
.admin-alert-grid button:hover{transform:translateY(-2px);border-color:rgba(22,199,132,.36);}
.admin-alert-grid span{
display:block;
color:#9fb0aa;
font-size:12px;
margin-bottom:8px;
}
.admin-alert-grid b{
font-size:28px;
color:#16C784;
}
.admin-quick-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:16px;
}
.admin-quick-grid button{
margin:0;
padding:16px;
border-radius:14px;
background:#f7faf8;
border:1px solid #e3ece7;
color:var(--atv-ink);
text-align:left;
box-shadow:none;
}
.admin-quick-grid button:hover{
background:#edf8f2;
border-color:#b9dcc8;
transform:translateY(-1px);
}
.admin-quick-grid b{
display:block;
font-size:15px;
margin-bottom:5px;
}
.admin-quick-grid span{
display:block;
font-size:12px;
font-weight:800;
color:var(--atv-muted);
}
.full-list-card{
min-height:70vh;
}
.compact-admin-list{
max-height:calc(100vh - 240px);
overflow:auto;
padding-right:4px;
}
.announcement-compose select,
.announcement-compose textarea{
width:100%;
box-sizing:border-box;
border:1px solid #dbe7e1;
border-radius:12px;
padding:13px 14px;
font:inherit;
background:white;
color:var(--atv-ink);
}
.announcement-form-grid{
display:grid;
grid-template-columns:1fr 220px;
gap:14px;
margin-top:14px;
}
.announcement-form-grid label span{
display:block;
font-size:12px;
font-weight:800;
color:#6b7b73;
margin-bottom:7px;
}
.announcement-form-grid .full{
grid-column:1 / -1;
}
.checkbox-line{
display:flex!important;
align-items:center;
gap:10px;
padding-top:26px;
}
.checkbox-line input{
width:auto;
margin:0;
}
.announcement-preview{
margin:16px 0;
padding:18px;
border-radius:16px;
background:linear-gradient(145deg,#111816,#07100d);
border:1px solid rgba(255,255,255,.08);
color:white;
}
.announcement-preview h3{
margin:8px 0;
font-size:22px;
}
.announcement-preview p{
margin:0;
color:#b6c5bf;
}
.announcement-row small,
.announcement-row em{
display:block;
font-style:normal;
color:#7b8a83;
margin-top:4px;
}
.admin-queue-card{
background:white;
border:1px solid #e1ebe6;
border-radius:16px;
padding:18px;
margin-top:14px;
box-shadow:0 18px 42px rgba(9,20,39,.08);
}
.admin-card-head{
display:grid;
grid-template-columns:1fr minmax(240px,360px);
align-items:end;
gap:16px;
padding-bottom:14px;
border-bottom:1px solid #edf2ef;
}
.admin-card-head h2{
font-size:24px;
line-height:1.1;
margin:4px 0 0;
}
.admin-card-head input{
margin:0;
background:#f7faf8;
}
.admin-summary-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin:14px 0;
}
.admin-summary-grid div{
padding:14px;
border-radius:12px;
background:#f7faf8;
border:1px solid #e6eee9;
}
.admin-summary-grid b{
display:block;
font-size:25px;
line-height:1;
color:var(--atv-ink);
}
.admin-summary-grid span{
display:block;
margin-top:7px;
font-size:12px;
font-weight:800;
color:var(--atv-muted);
}
.admin-queue-note{
padding:10px 12px;
border-radius:10px;
background:#fff8e7;
border:1px solid #f3dfa9;
color:#775118;
font-size:13px;
font-weight:800;
margin-bottom:12px;
}
.admin-list-row{
width:100%;
min-height:38px;
display:grid;
grid-template-columns:38px minmax(190px,1.4fr) minmax(140px,1fr) minmax(110px,.7fr) minmax(110px,.7fr);
gap:10px;
align-items:center;
padding:6px 10px;
margin:0;
border:1px solid #e5eee9;
border-radius:10px;
background:#fff;
color:var(--atv-ink);
text-align:left;
box-shadow:none;
}
.admin-list-row:hover{
border-color:#b9dcc8;
background:#f7fbf8;
transform:translateY(-1px);
}
.admin-list-row b,
.admin-list-row strong{
display:block;
font-size:13px;
overflow-wrap:anywhere;
}
.admin-list-row small{
display:block;
font-size:11px;
font-weight:700;
color:var(--atv-muted);
overflow-wrap:anywhere;
}
.admin-list-row > span:nth-child(3){
font-size:12px;
font-weight:800;
color:#4d5b70;
overflow-wrap:anywhere;
}
.admin-list-row em{
justify-self:end;
font-style:normal;
white-space:nowrap;
}
.admin-list-rank{
width:28px;
height:28px;
border-radius:8px;
display:grid;
place-items:center;
background:#edf8f2;
color:var(--atv-green);
font-weight:900;
font-size:12px;
}
.admin-order-list{
display:grid;
gap:12px;
}
.admin-order-list:has(.admin-list-row){
gap:6px;
}
.admin-order-card{
padding:14px;
border-radius:14px;
border:1px solid #e3ece7;
background:#fff;
box-shadow:0 10px 24px rgba(9,20,39,.05);
}
.admin-order-card.pending{
border-left:5px solid #c99728;
}
.admin-order-card.active{
border-left:5px solid #2563eb;
}
.admin-order-card.closed{
border-left:5px solid #94a3b8;
opacity:.92;
}
.admin-order-main{
display:grid;
grid-template-columns:38px 1fr auto;
gap:12px;
align-items:center;
margin-bottom:12px;
}
.admin-order-rank{
width:38px;
height:38px;
border-radius:10px;
display:grid;
place-items:center;
background:#edf8f2;
color:var(--atv-green);
font-weight:900;
}
.admin-order-title{
font-size:17px;
font-weight:900;
color:var(--atv-ink);
overflow-wrap:anywhere;
}
.admin-order-sub{
margin-top:3px;
font-size:12px;
font-weight:700;
color:var(--atv-muted);
overflow-wrap:anywhere;
}
.admin-order-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}
.admin-order-grid div{
padding:11px;
border-radius:10px;
background:#f8fbfa;
border:1px solid #eef3f0;
min-width:0;
}
.admin-order-grid span{
display:block;
font-size:11px;
font-weight:900;
text-transform:uppercase;
color:#6b778c;
margin-bottom:5px;
}
.admin-order-grid b{
display:block;
font-size:14px;
color:var(--atv-ink);
overflow-wrap:anywhere;
}
.admin-order-grid small{
display:block;
margin-top:4px;
color:var(--atv-muted);
overflow-wrap:anywhere;
}
.admin-actions{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
margin-top:12px;
}
.admin-actions button{
width:100%;
margin:0;
border-radius:9px;
padding:10px 8px;
font-size:13px;
background:#0b8f53;
}
.admin-actions button:nth-child(2){
background:#174ea6;
}
.admin-actions button:nth-child(3){
background:#071a2f;
}
.admin-actions .danger-btn{
background:#b42318;
}
.order-detail-head{
display:grid;
grid-template-columns:1fr auto;
gap:12px;
align-items:start;
padding-bottom:14px;
margin-bottom:14px;
border-bottom:1px solid #edf2ef;
}
.order-detail-head h2{
margin:4px 0 5px;
font-size:26px;
overflow-wrap:anywhere;
}
.order-detail-head p{
margin:0;
font-weight:800;
color:var(--atv-muted);
overflow-wrap:anywhere;
}
.order-detail-grid{
grid-template-columns:repeat(3,1fr);
}
.order-proof-links{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:14px 0;
}
.order-proof-links .link{
padding:10px 12px;
border-radius:10px;
background:#edf8f2;
font-weight:900;
}
.order-receipt-shell{
max-width:860px;
margin-left:auto;
margin-right:auto;
padding:0;
overflow:hidden;
background:#f7faf8;
}
.order-receipt-shell #orderDetailBox{
display:grid;
gap:8px;
}
.receipt-hero{
background:
radial-gradient(circle at 85% 15%, rgba(22,199,132,.22), transparent 34%),
linear-gradient(135deg,#07110c,#10271b 55%,#07110c);
color:#fff;
padding:13px 14px;
border-radius:14px;
box-shadow:0 10px 24px rgba(2,14,8,.16);
}
.receipt-hero-top{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
align-items:start;
}
.receipt-hero h2{
margin:3px 0 2px;
font-size:17px;
line-height:1.1;
overflow-wrap:anywhere;
}
.receipt-hero p{
margin:0;
color:rgba(255,255,255,.7);
font-size:11px;
font-weight:800;
overflow-wrap:anywhere;
}
.receipt-status{
background:rgba(22,199,132,.16);
border:1px solid rgba(22,199,132,.32);
box-shadow:none;
white-space:nowrap;
font-size:10px;
padding:6px 8px;
}
.receipt-amount-row{
margin-top:10px;
padding-top:9px;
border-top:1px solid rgba(255,255,255,.12);
display:flex;
justify-content:space-between;
gap:8px;
align-items:flex-end;
}
.receipt-amount-row span{
color:rgba(255,255,255,.68);
font-size:10px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
}
.receipt-amount-row strong{
font-size:18px;
line-height:1;
text-align:right;
overflow-wrap:anywhere;
}
.receipt-mini-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:6px;
margin:8px 8px 0;
}
.receipt-mini-grid > div{
padding:7px 8px;
border-radius:10px;
background:#fff;
border:1px solid #e7efeb;
min-width:0;
}
.receipt-mini-grid span,
.receipt-row-grid span{
display:block;
font-size:9px;
font-weight:900;
color:var(--atv-muted);
text-transform:uppercase;
letter-spacing:.02em;
margin-bottom:2px;
}
.receipt-mini-grid b,
.receipt-row-grid b{
display:block;
font-size:12px;
line-height:1.18;
overflow-wrap:anywhere;
}
.receipt-section,
.receipt-more{
margin:0 8px;
padding:8px 10px;
border:1px solid #e7efeb;
border-radius:12px;
background:#fff;
box-shadow:0 7px 18px rgba(9,37,22,.04);
}
.receipt-section h3{
display:flex;
align-items:center;
gap:8px;
margin:0 0 12px;
font-size:14px;
}
.receipt-section h3 span{
display:inline-flex;
width:20px;
height:20px;
border-radius:50%;
align-items:center;
justify-content:center;
background:#e9f8f0;
color:var(--atv-green);
font-size:0;
}
.receipt-section h3 span::after{
content:"";
width:7px;
height:7px;
border-radius:50%;
background:var(--atv-green);
}
.receipt-row-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px;
}
.receipt-row-grid > div{
padding:7px 8px;
border-radius:10px;
background:#f8fbf9;
border:1px solid #edf4f0;
min-width:0;
}
.receipt-empty{
padding:8px;
border-radius:10px;
background:#f8fbf9;
color:var(--atv-muted);
font-weight:800;
font-size:12px;
}
.receipt-alert{
margin:0 8px;
padding:8px 10px;
border-radius:12px;
background:#fff1f0;
border:1px solid #ffd3cf;
color:#9b1c16;
font-weight:900;
font-size:12px;
}
.receipt-more{
margin-bottom:0;
}
.receipt-more summary{
cursor:pointer;
font-weight:1000;
color:#092116;
font-size:12px;
list-style:none;
display:flex;
justify-content:space-between;
align-items:center;
}
.receipt-more summary::-webkit-details-marker{
display:none;
}
.receipt-more summary::after{
content:"+";
font-size:16px;
color:var(--atv-green);
}
.receipt-more[open] summary::after{
content:"-";
}
.receipt-more .receipt-row-grid{
margin-top:8px;
}
.order-receipt-shell .admin-actions{
position:static;
bottom:0;
z-index:4;
padding:0 8px;
margin:0;
background:transparent;
backdrop-filter:none;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:6px;
}
.order-receipt-shell .admin-actions button{
padding:8px 5px;
font-size:11px;
border-radius:9px;
}
.outline-btn{
background:transparent;
color:var(--atv-green);
border:1px solid #bfe8cf;
box-shadow:none;
}
.uid-card{
display:grid;
grid-template-columns:1fr auto;
gap:6px 10px;
align-items:center;
padding:12px;
margin-bottom:12px;
border-radius:14px;
background:linear-gradient(135deg,#07110c,#123321);
color:#fff;
}
.uid-card span,
.uid-card small{
color:rgba(255,255,255,.68);
font-weight:800;
}
.uid-card b{
font-size:22px;
letter-spacing:.08em;
}
.uid-card button{
grid-row:1 / span 2;
grid-column:2;
padding:8px 12px;
border-radius:10px;
font-size:12px;
}
.recipient-preview{
padding:12px;
border-radius:14px;
background:#ecfdf3;
border:1px solid #bbf7d0;
color:#092116;
font-weight:800;
}
.recipient-preview span{
display:block;
margin-top:4px;
font-size:12px;
color:#4f6358;
}
.admin-empty{
padding:28px;
border-radius:12px;
background:#f7faf8;
border:1px dashed #cfdcd5;
text-align:center;
color:var(--atv-muted);
font-weight:800;
}
.profit-calc-card{
margin-top:14px;
padding:18px;
border-radius:16px;
background:linear-gradient(145deg,#071126,#0b1c33 55%,#053f2c);
color:white;
border:1px solid rgba(255,255,255,.1);
box-shadow:0 22px 48px rgba(9,20,39,.18);
}
.profit-calc-head{
display:grid;
grid-template-columns:1fr 220px;
gap:16px;
align-items:start;
padding-bottom:16px;
border-bottom:1px solid rgba(255,255,255,.12);
}
.profit-calc-head h2{
font-size:25px;
margin:5px 0 7px;
}
.profit-calc-head p{
margin:0;
color:rgba(255,255,255,.72);
font-weight:700;
}
.profit-analytics-card{
padding:14px;
border-radius:12px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}
.profit-analytics-card span,.profit-analytics-card small{
display:block;
color:rgba(255,255,255,.68);
font-size:12px;
font-weight:800;
}
.profit-analytics-card b{
display:block;
margin:8px 0 5px;
font-size:28px;
line-height:1;
color:#37d782;
}
.profit-calc-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin-top:16px;
}
.profit-calc-grid label{
margin:0;
color:rgba(255,255,255,.82);
font-size:12px;
font-weight:900;
text-transform:uppercase;
}
.profit-calc-grid input{
margin-top:8px;
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.16);
color:white;
font-weight:800;
}
.profit-calc-grid input::placeholder{
color:rgba(255,255,255,.38);
}
.profit-result-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin-top:12px;
}
.profit-result-grid div{
padding:14px;
border-radius:12px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.1);
}
.profit-result-grid span{
display:block;
font-size:11px;
font-weight:900;
text-transform:uppercase;
color:rgba(255,255,255,.58);
margin-bottom:7px;
}
.profit-result-grid b{
display:block;
font-size:24px;
line-height:1;
color:#37d782;
overflow-wrap:anywhere;
}
.profit-result-grid .net-profit{
background:rgba(55,215,130,.1);
border-color:rgba(55,215,130,.28);
}
.profit-actions{
display:grid;
grid-template-columns:1fr 160px;
gap:10px;
margin-top:12px;
}
.profit-actions button{
margin:0;
border-radius:10px;
background:#0b8f53;
}
.profit-actions .secondary-link{
background:rgba(255,255,255,.08);
color:white;
border-color:rgba(255,255,255,.18);
}
.profit-history{
margin-top:16px;
padding-top:14px;
border-top:1px solid rgba(255,255,255,.12);
}
.profit-history .section-title h3{
color:white;
}
.profit-history .text-btn{
width:auto;
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.16);
color:white;
}
.profit-history-list{
display:grid;
gap:8px;
color:rgba(255,255,255,.72);
font-weight:700;
}
.profit-history-item{
display:grid;
grid-template-columns:1fr auto;
gap:8px 12px;
align-items:center;
padding:11px;
border-radius:10px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
}
.profit-history-item b,.profit-history-item span,.profit-history-item small{
display:block;
}
.profit-history-item b{
color:white;
}
.profit-history-item span,.profit-history-item small{
margin-top:4px;
font-size:12px;
color:rgba(255,255,255,.62);
}
.profit-history-item strong{
font-size:18px;
color:#37d782;
}
.profit-history-item small{
grid-column:1 / -1;
}
.profit-page .admin-topbar{
background:linear-gradient(135deg,#071126,#10325a 55%,#06452f);
}
.profit-filter-card,.profit-dashboard-card{
margin-top:14px;
padding:18px;
border-radius:16px;
background:#ffffff;
border:1px solid #e1ebe6;
box-shadow:0 18px 42px rgba(9,20,39,.08);
}
.profit-filter-card{
display:grid;
grid-template-columns:1fr 1.6fr;
gap:16px;
align-items:end;
}
.profit-filter-card h2{
font-size:24px;
margin:4px 0 0;
}
.profit-filter-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}
.profit-filter-grid label{
margin:0;
font-size:12px;
font-weight:900;
text-transform:uppercase;
color:var(--atv-muted);
}
.profit-filter-grid input,.profit-filter-grid select{
margin-top:8px;
background:#f7faf8;
}
.profit-kpi-grid{
display:grid;
grid-template-columns:1.4fr repeat(4,1fr);
gap:10px;
}
.profit-kpi-grid div{
padding:16px;
border-radius:14px;
background:#f7faf8;
border:1px solid #e6eee9;
}
.profit-kpi-grid .primary{
background:linear-gradient(135deg,#071126,#06452f);
color:white;
}
.profit-kpi-grid span{
display:block;
font-size:11px;
font-weight:900;
text-transform:uppercase;
color:#6b778c;
margin-bottom:8px;
}
.profit-kpi-grid .primary span{
color:rgba(255,255,255,.68);
}
.profit-kpi-grid b{
display:block;
font-size:25px;
line-height:1;
color:#078a4b;
overflow-wrap:anywhere;
}
.profit-kpi-grid .primary b{
font-size:32px;
color:#37d782;
}
.profit-history-panel{
margin-top:16px;
padding-top:14px;
border-top:1px solid #edf2ef;
}
.profit-history-panel .section-title span{
color:var(--atv-muted);
}
.profit-order-list{
display:grid;
gap:10px;
}
.profit-order-row{
display:grid;
grid-template-columns:1.3fr repeat(5,1fr);
gap:8px;
align-items:stretch;
padding:12px;
border-radius:14px;
background:#ffffff;
border:1px solid #e4ede8;
box-shadow:0 10px 24px rgba(9,20,39,.05);
}
.profit-order-row>div{
padding:10px;
border-radius:10px;
background:#f8fbfa;
min-width:0;
}
.profit-order-row span{
display:block;
font-size:11px;
font-weight:900;
text-transform:uppercase;
color:#6b778c;
margin-bottom:5px;
}
.profit-order-row b{
display:block;
font-size:14px;
color:var(--atv-ink);
overflow-wrap:anywhere;
}
.profit-order-row>div:first-child span{
font-size:12px;
font-weight:700;
text-transform:none;
margin-top:4px;
}
.profit-order-row .profit-positive{
background:#ecfbf2;
border:1px solid #c9f0d8;
}
.profit-order-row .profit-positive b{
color:#078a4b;
}

/* Customer conversion and payment flow */
.convert-flow-card{
background:linear-gradient(180deg,#ffffff,#f8fbfa);
}
.flow-progress{
grid-column:1 / -1;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin:2px 0 4px;
}
.flow-progress.full{
grid-template-columns:repeat(4,1fr);
margin:14px 0;
}
.flow-progress span{
padding:9px 8px;
border-radius:10px;
background:#edf2ef;
color:#627087;
font-size:12px;
font-weight:900;
text-align:center;
}
.flow-progress span.active{
background:#0b8f53;
color:white;
}
.journey-tracker{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:6px;
margin:14px 0;
padding:8px;
border-radius:14px;
background:#0b172f;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 18px 38px rgba(9,20,39,.16);
}
.journey-tracker.compact{
grid-template-columns:repeat(6,1fr);
}
.journey-tracker span{
position:relative;
min-height:44px;
display:grid;
place-items:center;
padding:8px 6px;
border-radius:10px;
background:rgba(255,255,255,.06);
color:rgba(255,255,255,.58);
font-size:11px;
font-weight:900;
text-align:center;
}
.journey-tracker span.active{
background:#0b8f53;
color:white;
}
.step-meter{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:14px 0 8px;
padding:13px 14px;
border-radius:14px;
background:#071126;
color:white;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 14px 32px rgba(9,20,39,.14);
}
.step-meter b{
color:#37d782;
font-size:14px;
}
.step-meter span{
font-weight:900;
font-size:14px;
text-align:right;
}
.convert-launch-card{
background:linear-gradient(135deg,#ffffff,#f4faf7);
}
.convert-page-card{
background:linear-gradient(180deg,#ffffff,#f8fbfa);
}
.flow-result-box{
padding:13px;
border-radius:12px;
background:#071126;
color:white;
border:1px solid rgba(255,255,255,.08);
}
.flow-result-box div{
display:flex;
justify-content:space-between;
gap:12px;
padding:7px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}
.flow-result-box div:last-child{
border-bottom:none;
}
.flow-result-box b{
color:#37d782;
}
.flow-step-label{
grid-column:1 / -1;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
color:#c99728;
margin-top:4px;
}
.payment-flow-shell{
max-width:900px;
padding:20px 14px 70px;
}
.payment-flow-top{
display:grid;
grid-template-columns:1fr auto;
gap:16px;
align-items:end;
padding:22px;
border-radius:16px;
background:linear-gradient(135deg,#071126,#10325a 58%,#06452f);
color:white;
box-shadow:0 22px 48px rgba(9,20,39,.18);
}
.payment-flow-top h1{
font-size:32px;
line-height:1.05;
margin:5px 0 8px;
}
.payment-flow-top p{
margin:0;
color:rgba(255,255,255,.72);
font-weight:700;
}
.payment-flow-top button{
width:auto;
min-width:130px;
margin:0;
border-radius:10px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
}
.flow-panel{
margin-top:14px;
padding:18px;
border-radius:16px;
background:#ffffff;
border:1px solid #e1ebe6;
box-shadow:0 18px 42px rgba(9,20,39,.08);
}
.flow-panel h2{
font-size:24px;
margin:6px 0 14px;
}
.flow-summary{
padding:13px;
border-radius:12px;
background:#f7faf8;
border:1px solid #e6eee9;
margin-bottom:12px;
}
.flow-summary-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
}
.flow-summary-grid div{
padding:10px;
border-radius:9px;
background:white;
border:1px solid #edf2ef;
}
.flow-summary-grid span{
display:block;
font-size:11px;
font-weight:900;
text-transform:uppercase;
color:#6b778c;
margin-bottom:5px;
}
.flow-summary-grid b{
display:block;
color:#091427;
overflow-wrap:anywhere;
}
.method-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin:12px 0;
}
.method-card{
margin:0;
min-height:96px;
padding:16px;
border-radius:14px;
background:#f7faf8;
border:1px solid #e1ebe6;
color:#091427;
text-align:left;
box-shadow:none;
}
.method-card b,.method-card span{
display:block;
}
.method-card b{
font-size:17px;
margin-bottom:7px;
}
.method-card span{
color:#627087;
font-size:13px;
}
.method-card.active{
background:#ecfbf2;
border-color:#5fcf91;
}
.method-card.disabled{
opacity:.55;
cursor:not-allowed;
}
.payment-instructions.dark{
background:linear-gradient(135deg,#071126,#06452f);
border:0;
color:white;
}
.payment-instructions.dark h2{
color:#37d782;
letter-spacing:0;
}
.countdown-box{
display:inline-grid;
place-items:center;
min-width:120px;
height:46px;
border-radius:12px;
background:#fff5dd;
color:#9a5f00;
font-size:22px;
font-weight:900;
margin:4px 0 10px;
}
.countdown-box.green{
background:#e9f9ef;
color:#078a4b;
}
.done-panel{
text-align:center;
}
.done-icon{
position:relative;
width:88px;
height:88px;
margin:0 auto 14px;
border-radius:50%;
display:flex;
align-items:flex-end;
justify-content:center;
padding-bottom:17px;
background:linear-gradient(145deg,#e9f9ef,#d9f5e4);
color:#078a4b;
font-size:12px;
font-weight:900;
letter-spacing:.06em;
box-shadow:0 14px 30px rgba(7,138,75,.18),inset 0 0 0 7px #c9f0d8;
}
.done-icon:before{
content:"";
position:absolute;
top:25px;
left:50%;
width:34px;
height:19px;
border-left:6px solid #078a4b;
border-bottom:6px solid #078a4b;
border-radius:2px;
transform:translateX(-50%) rotate(-45deg);
}
.done-icon:after{
content:"";
position:absolute;
inset:-7px;
border-radius:50%;
border:1px solid rgba(22,199,132,.28);
animation:successSoftPulse 1.9s ease-in-out infinite;
}
.success-page-shell{
max-width:760px;
}
.success-panel{
text-align:center;
padding:30px 20px;
}
.success-done-mark{
position:relative;
width:126px;
height:126px;
margin:4px auto 18px;
border-radius:50%;
display:flex;
align-items:flex-end;
justify-content:center;
padding-bottom:26px;
background:linear-gradient(145deg,#1fd889,#078a4b);
color:white;
font-size:18px;
font-weight:1000;
letter-spacing:.08em;
box-shadow:0 20px 44px rgba(7,138,75,.24), inset 0 0 0 9px rgba(255,255,255,.16);
}
.success-done-mark:before{
content:"";
position:absolute;
top:33px;
left:50%;
width:48px;
height:28px;
border-left:8px solid white;
border-bottom:8px solid white;
border-radius:3px;
transform:translateX(-50%) rotate(-45deg);
}
.success-done-mark:after{
content:"";
position:absolute;
inset:-9px;
border-radius:50%;
border:1px solid rgba(31,216,137,.28);
animation:successSoftPulse 2s ease-in-out infinite;
}
@keyframes successSoftPulse{
0%,100%{transform:scale(.98);opacity:.45}
50%{transform:scale(1.04);opacity:.9}
}
.success-panel h1{
font-size:34px;
margin:8px 0;
color:#071126;
}
.success-panel p{
max-width:520px;
margin:0 auto 18px;
color:#526075;
font-weight:800;
line-height:1.55;
}
.success-summary-grid{
text-align:left;
margin-top:18px;
}
.success-actions{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin-top:18px;
}
.success-actions button{
margin:0;
}

@media(max-width:760px){
.quick-card.convert-flow-card{
grid-template-columns:1fr;
}
.flow-progress,.flow-progress.full{
grid-template-columns:1fr 1fr;
}
.journey-tracker{
display:flex;
overflow-x:auto;
gap:7px;
padding:7px;
scroll-snap-type:x proximity;
}
.journey-tracker span{
min-height:34px;
min-width:104px;
scroll-snap-align:start;
white-space:nowrap;
}
.step-meter{
align-items:flex-start;
flex-direction:column;
gap:4px;
}
.step-meter span{
text-align:left;
}
.payment-flow-shell{
padding:10px 8px 48px;
}
.payment-flow-top{
grid-template-columns:1fr;
padding:16px;
border-radius:14px;
}
.payment-flow-top h1{
font-size:26px;
}
.payment-flow-top button{
width:100%;
}
.flow-panel{
padding:13px;
border-radius:14px;
}
.flow-panel h2{
font-size:21px;
}
.flow-summary-grid,.method-grid{
grid-template-columns:1fr;
}
.success-done-mark{
width:112px;
height:112px;
font-size:16px;
padding-bottom:22px;
}
.success-done-mark:before{
top:30px;
width:42px;
height:24px;
border-left-width:7px;
border-bottom-width:7px;
}
.success-panel h1{
font-size:27px;
}
.success-actions{
grid-template-columns:1fr;
}
}

@media(max-width:760px){
.admin-shell{
padding:10px 8px 48px;
}
.admin-topbar{
display:block;
padding:16px;
border-radius:14px;
}
.admin-topbar h1{
font-size:26px;
}
.admin-topbar p{
font-size:13px;
}
.admin-logout-btn{
width:100%;
margin-top:14px;
}
.admin-nav{
grid-template-columns:repeat(2,1fr);
gap:8px;
}
.admin-nav button{
font-size:12px;
padding:10px 6px;
}
.admin-alert-grid{
grid-template-columns:repeat(2,1fr);
gap:8px;
}
.admin-alert-grid div{
padding:12px;
border-radius:14px;
}
.admin-alert-grid b{
font-size:22px;
}
.announcement-form-grid{
grid-template-columns:1fr;
}
.checkbox-line{
padding-top:0;
}
.admin-queue-card{
padding:12px;
border-radius:14px;
}
.admin-card-head{
grid-template-columns:1fr;
gap:10px;
}
.admin-card-head h2{
font-size:21px;
}
.admin-summary-grid{
grid-template-columns:repeat(2,1fr);
}
.admin-summary-grid b{
font-size:21px;
}
.admin-list-row{
grid-template-columns:30px 1fr auto;
gap:8px;
min-height:54px;
padding:8px;
}
.admin-list-row > span:nth-child(3),
.admin-list-row strong{
display:none;
}
.admin-list-row em{
grid-column:3;
font-size:10px;
padding:6px 8px;
}
.order-detail-head{
grid-template-columns:1fr;
}
.order-detail-head h2{
font-size:22px;
}
.order-detail-grid{
grid-template-columns:1fr;
}
.order-receipt-shell{
border-radius:18px;
margin:0;
}
.receipt-hero{
padding:12px;
border-radius:14px;
}
.receipt-hero-top{
grid-template-columns:1fr auto;
}
.receipt-hero h2{
font-size:16px;
}
.receipt-status{
width:max-content;
max-width:100%;
}
.receipt-amount-row{
display:flex;
gap:8px;
align-items:start;
}
.receipt-amount-row strong{
text-align:right;
font-size:16px;
}
.receipt-section,
.receipt-more,
.receipt-alert{
margin-left:6px;
margin-right:6px;
}
.receipt-mini-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
margin-left:6px;
margin-right:6px;
}
.receipt-row-grid{
grid-template-columns:1fr;
}
.order-receipt-shell .admin-actions{
grid-template-columns:repeat(4,minmax(0,1fr));
padding-left:6px;
padding-right:6px;
}
.admin-order-main{
grid-template-columns:32px 1fr;
}
.admin-order-main .status{
grid-column:1 / -1;
width:max-content;
}
.admin-order-rank{
width:32px;
height:32px;
border-radius:9px;
}
.admin-order-grid{
grid-template-columns:1fr;
gap:8px;
}
.admin-actions{
grid-template-columns:1fr 1fr;
}
.admin-actions button{
font-size:12px;
}
.profit-calc-card{
padding:13px;
border-radius:14px;
}
.profit-calc-head{
grid-template-columns:1fr;
gap:10px;
}
.profit-calc-head h2{
font-size:21px;
}
.profit-analytics-card b{
font-size:24px;
}
.profit-calc-grid,.profit-result-grid{
grid-template-columns:1fr;
}
.profit-result-grid b{
font-size:22px;
}
.profit-actions{
grid-template-columns:1fr;
}
.profit-history .section-title{
align-items:flex-start;
flex-direction:column;
}
.profit-history .text-btn{
width:100%;
}
.profit-history-item{
grid-template-columns:1fr;
}
.profit-filter-card{
grid-template-columns:1fr;
padding:13px;
}
.profit-filter-card h2{
font-size:21px;
}
.profit-filter-grid{
grid-template-columns:1fr;
}
.profit-dashboard-card{
padding:12px;
}
.profit-kpi-grid{
grid-template-columns:1fr 1fr;
}
.profit-kpi-grid .primary{
grid-column:1 / -1;
}
.profit-kpi-grid b{
font-size:21px;
}
.profit-kpi-grid .primary b{
font-size:27px;
}
.profit-order-row{
grid-template-columns:1fr;
}
}

/* ATV Exchange premium dark customer dashboard */
.premium-dashboard{
--dash-bg:#07090d;
--dash-panel:#101419;
--dash-panel-2:#141a20;
--dash-line:rgba(255,255,255,.09);
--dash-text:#f8fafc;
--dash-muted:#9aa4af;
--dash-green:#16C784;
--dash-green-soft:rgba(22,199,132,.14);
max-width:none!important;
width:100%;
min-height:100vh;
display:grid;
grid-template-columns:236px minmax(0,1fr);
gap:0;
padding:0!important;
background:
radial-gradient(circle at 24% 0,rgba(22,199,132,.08),transparent 32%),
linear-gradient(135deg,#07090d 0%,#0b0f12 55%,#050607 100%);
color:var(--dash-text);
}
.premium-dashboard .dashboard-main{
min-width:0;
padding:32px 44px 34px;
}
.dashboard-sidebar{
position:sticky;
top:0;
height:100vh;
display:flex;
flex-direction:column;
gap:24px;
padding:32px 16px 18px;
background:linear-gradient(180deg,rgba(12,15,19,.98),rgba(5,7,10,.98));
border-right:1px solid var(--dash-line);
}
.sidebar-logo{
padding:8px 12px 18px;
}
.sidebar-logo strong{
display:block;
font-size:34px;
line-height:.9;
letter-spacing:-1px;
color:white;
}
.sidebar-logo span{
display:block;
margin-top:8px;
font-size:9px;
letter-spacing:5px;
font-weight:900;
color:var(--dash-green);
}
.sidebar-nav{
display:grid;
gap:8px;
}
.sidebar-nav button{
height:52px;
padding:0 16px 0 48px;
border-radius:8px;
background:transparent;
color:var(--dash-text);
border:1px solid transparent;
text-align:left;
font-size:15px;
font-weight:800;
position:relative;
}
.sidebar-nav button:before{
content:"";
position:absolute;
left:17px;
top:50%;
width:18px;
height:18px;
margin-top:-9px;
border-radius:6px;
border:2px solid currentColor;
opacity:.9;
}
.sidebar-nav button.active,
.sidebar-nav button:hover{
background:linear-gradient(90deg,rgba(22,199,132,.16),rgba(22,199,132,.04));
color:var(--dash-green);
border-color:rgba(22,199,132,.18);
box-shadow:inset -3px 0 0 var(--dash-green);
}
.sidebar-help{
margin-top:auto;
padding:18px;
border-radius:12px;
background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
border:1px solid var(--dash-line);
box-shadow:0 18px 42px rgba(0,0,0,.26);
}
.sidebar-help b,.sidebar-help span{
display:block;
}
.sidebar-help span{
margin:8px 0 14px;
color:var(--dash-muted);
font-size:13px;
line-height:1.5;
}
.sidebar-help button{
height:38px;
border-radius:7px;
background:var(--dash-green);
color:#03130d;
font-weight:900;
}
.premium-dashboard .topbar{
position:relative;
top:auto;
display:flex;
align-items:flex-start;
justify-content:space-between;
padding:0;
margin:0 0 34px;
background:transparent;
backdrop-filter:none;
}
.premium-dashboard .topbar h1{
font-size:30px;
line-height:1.1;
color:var(--dash-text);
margin:0;
}
.premium-dashboard .topbar p{
margin-top:9px;
font-size:15px;
font-weight:700;
color:var(--dash-muted);
}
.premium-dashboard .wave{
color:var(--dash-green);
font-size:20px;
}
.premium-dashboard .circle-btn{
width:46px;
height:46px;
border-radius:14px;
background:rgba(255,255,255,.05);
border:1px solid var(--dash-line);
box-shadow:none;
color:var(--dash-text);
}
.premium-dashboard .circle-btn:hover{
background:rgba(22,199,132,.13);
border-color:rgba(22,199,132,.38);
}
.premium-dashboard .bell-btn:before{
color:white;
font-size:20px;
}
.premium-dashboard .menu-btn span{
background:white;
}
.premium-dashboard .more-menu{
right:44px;
top:82px;
background:#101419;
border:1px solid var(--dash-line);
box-shadow:0 22px 60px rgba(0,0,0,.42);
}
.premium-dashboard .more-menu button{
color:white;
background:transparent;
}
.premium-dashboard .more-menu button:hover{
background:rgba(22,199,132,.12);
}
.premium-dashboard .balance-card{
min-height:330px;
padding:42px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background:
radial-gradient(ellipse at 78% 64%,rgba(22,199,132,.16),transparent 34%),
linear-gradient(135deg,rgba(22,199,132,.18),rgba(12,17,20,.98) 38%,#0b0f12 100%);
box-shadow:0 28px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
overflow:hidden;
}
.premium-dashboard .balance-card:before{
content:"";
position:absolute;
right:5%;
bottom:22%;
width:360px;
height:120px;
border:1px solid rgba(22,199,132,.18);
border-left:0;
border-right:0;
border-radius:50%;
transform:rotate(-8deg);
opacity:.55;
}
.premium-dashboard .balance-card:after{
display:none;
}
.premium-dashboard .balance-card p{
font-size:17px;
font-weight:900;
color:white;
}
.premium-dashboard .balance-card h2{
font-size:52px;
letter-spacing:0;
color:white;
margin:20px 0 12px;
}
.premium-dashboard .balance-equivalent{
display:inline-flex;
align-items:center;
min-height:34px;
padding:7px 14px;
border-radius:999px;
background:rgba(22,199,132,.16);
color:var(--dash-green);
font-weight:900;
}
.premium-dashboard .eye-btn{
right:auto;
left:198px;
top:48px;
width:auto;
height:auto;
padding:3px 9px;
border:0;
background:transparent;
color:white;
font-size:0;
}
.premium-dashboard .eye-btn:before{
content:"Show";
font-size:12px;
font-weight:900;
}
.premium-dashboard .balance-switch{
right:36px;
top:38px;
display:flex;
gap:8px;
padding:10px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}
.premium-dashboard .balance-switch button{
height:36px;
min-width:64px;
border-radius:20px;
color:white;
background:transparent;
font-size:14px;
}
.premium-dashboard .balance-switch button.active{
background:rgba(22,199,132,.18);
color:white;
box-shadow:inset 0 0 0 1px rgba(22,199,132,.35);
}
.premium-dashboard .balance-meta{
position:relative;
z-index:1;
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
max-width:620px;
margin-top:36px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.08);
}
.premium-dashboard .balance-meta span{
display:block;
color:var(--dash-muted);
font-size:13px;
margin-bottom:9px;
}
.premium-dashboard .balance-meta b{
color:white;
font-size:18px;
}
.premium-dashboard .badge.completed,
.premium-dashboard .badge.pending{
display:inline-flex;
width:max-content;
background:transparent;
color:white;
padding:0;
}
.premium-dashboard .badge.completed:after{
content:"";
width:13px;
height:13px;
margin-left:8px;
border-radius:50%;
background:var(--dash-green);
}
.premium-dashboard .balance-grid{
display:none;
}
.premium-dashboard .action-grid{
grid-template-columns:repeat(5,minmax(0,1fr));
gap:18px;
margin:34px 0 28px;
}
.premium-dashboard .action-grid button{
min-height:96px;
padding:20px 18px 18px 82px;
border-radius:11px;
background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
border:1px solid var(--dash-line);
box-shadow:0 20px 42px rgba(0,0,0,.24);
color:white;
}
.premium-dashboard .action-grid button b,
.premium-dashboard .action-grid button span{
display:block;
}
.premium-dashboard .action-grid button b{
font-size:15px;
}
.premium-dashboard .action-grid button span{
margin-top:5px;
color:var(--dash-muted);
font-size:13px;
font-weight:700;
}
.premium-dashboard .action-grid button:before{
left:22px;
width:48px;
height:48px;
margin-top:-24px;
border-radius:50%;
background:linear-gradient(145deg,#21d58e,#0e8f55);
color:white;
font-size:24px;
box-shadow:0 14px 28px rgba(22,199,132,.2);
}
.premium-dashboard .action-grid button:nth-child(1):before{content:"+";}
.premium-dashboard .action-grid button:nth-child(2):before{content:"S";}
.premium-dashboard .action-grid button:nth-child(3):before{content:">";}
.premium-dashboard .action-grid button:nth-child(4):before{content:"C";}
.premium-dashboard .action-grid button:nth-child(5):before{content:"-";}
.premium-dashboard .action-grid button:hover{
transform:translateY(-3px);
border-color:rgba(22,199,132,.32);
}
.dashboard-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
.premium-dashboard .card,
.premium-dashboard .admin-panel{
border-radius:12px;
background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
border:1px solid var(--dash-line);
box-shadow:0 22px 48px rgba(0,0,0,.28);
color:white;
}
.premium-dashboard .section-title{
border:0;
margin-bottom:18px;
}
.premium-dashboard .section-title h3{
color:white;
font-size:19px;
}
.premium-dashboard .text-btn,
.premium-dashboard .section-title span{
color:var(--dash-green);
font-weight:900;
}
.premium-dashboard .mini-row{
grid-template-columns:1fr auto;
gap:12px;
padding:14px 0;
border-top:1px solid rgba(255,255,255,.08);
color:white;
}
.premium-dashboard .mini-row:first-child{
border-top:0;
}
.premium-dashboard .mini-row span{
color:var(--dash-muted);
}
.premium-dashboard .mini-row .badge{
grid-column:2;
background:rgba(22,199,132,.14);
color:var(--dash-green);
}
.rate-table{
display:grid;
gap:14px;
}
.rate-table>div{
display:grid;
grid-template-columns:1.2fr .9fr .7fr;
gap:12px;
align-items:center;
color:var(--dash-muted);
}
.rate-table b{
color:white;
}
.rate-table strong{
color:var(--dash-green);
}
.premium-dashboard .live-rate{
padding:0;
background:transparent;
color:white;
}
.pending-summary{
padding:18px;
border-radius:12px;
background:rgba(255,193,7,.09);
color:white;
font-weight:800;
}
.premium-dashboard .support-card .help{
color:var(--dash-muted);
}
.premium-dashboard .security-banner{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
margin-top:28px;
padding:28px 34px;
border-radius:12px;
background:
radial-gradient(circle at 12% 50%,rgba(22,199,132,.14),transparent 28%),
linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
border:1px solid var(--dash-line);
}
.premium-dashboard .security-banner span{
color:var(--dash-green);
font-weight:900;
}
.premium-dashboard .security-banner h3{
font-size:27px;
line-height:1.18;
margin:8px 0;
color:white;
}
.premium-dashboard .security-banner p{
color:var(--dash-muted);
}
.premium-dashboard .security-banner button{
width:160px;
height:50px;
border-radius:9px;
background:var(--dash-green);
color:#03130d;
font-weight:900;
}
.service-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-top:28px;
}
.service-grid button{
min-height:116px;
padding:22px;
text-align:left;
border-radius:11px;
background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
border:1px solid var(--dash-line);
color:white;
box-shadow:0 20px 42px rgba(0,0,0,.22);
}
.service-grid button b,
.service-grid button span{
display:block;
}
.service-grid button span{
margin-top:8px;
color:var(--dash-muted);
line-height:1.4;
}
.premium-dashboard .push-card{
display:grid;
grid-template-columns:1fr auto;
align-items:center;
gap:14px;
margin:0 0 18px;
}
.premium-dashboard .push-card h3{
color:white;
}
.premium-dashboard .push-card .help{
color:var(--dash-muted);
}
.premium-dashboard .push-card button{
width:auto;
height:42px;
padding:0 18px;
border-radius:9px;
background:var(--dash-green);
color:#03130d;
font-weight:900;
}
.premium-dashboard .admin-panel{
margin:0 0 18px;
}
.premium-dashboard .bottom-nav{
display:none;
}

@media(max-width:980px){
.premium-dashboard{
display:block;
}
.dashboard-sidebar{
display:none;
}
.premium-dashboard .dashboard-main{
padding:24px 14px 92px;
}
.premium-dashboard .topbar{
margin-bottom:22px;
}
.premium-dashboard .topbar h1{
font-size:24px;
}
.premium-dashboard .balance-card{
min-height:288px;
padding:24px 18px;
}
.premium-dashboard .balance-card h2{
font-size:36px;
margin-top:28px;
}
.premium-dashboard .eye-btn{
left:150px;
top:30px;
}
.premium-dashboard .balance-switch{
position:relative;
right:auto;
top:auto;
width:max-content;
margin-bottom:18px;
}
.premium-dashboard .balance-meta{
grid-template-columns:1fr 1fr;
gap:18px;
margin-top:24px;
}
.premium-dashboard .action-grid{
grid-template-columns:repeat(2,1fr);
gap:12px;
margin:22px 0;
}
.premium-dashboard .action-grid button{
min-height:86px;
padding:16px 14px 16px 74px;
}
.premium-dashboard .action-grid button:before{
left:18px;
width:42px;
height:42px;
margin-top:-21px;
}
.dashboard-grid{
grid-template-columns:1fr;
}
.premium-dashboard .security-banner{
display:block;
padding:22px;
}
.premium-dashboard .security-banner button{
width:100%;
margin-top:18px;
}
.service-grid{
grid-template-columns:1fr 1fr;
gap:12px;
}
.premium-dashboard .bottom-nav{
display:flex;
background:rgba(10,13,16,.96);
border-color:var(--dash-line);
}
.premium-dashboard .bottom-nav button{
color:var(--dash-muted);
background:transparent;
}
.premium-dashboard .bottom-nav button:first-child{
background:rgba(22,199,132,.12);
color:var(--dash-green);
}
}

@media(max-width:520px){
.premium-dashboard .dashboard-main{
padding:18px 10px 86px;
}
.premium-dashboard .top-actions{
gap:8px;
}
.premium-dashboard .balance-card h2{
font-size:31px;
}
.premium-dashboard .balance-meta{
grid-template-columns:1fr;
}
.premium-dashboard .action-grid{
grid-template-columns:1fr;
}
.service-grid{
grid-template-columns:1fr;
}
.rate-table>div{
grid-template-columns:1fr;
gap:4px;
padding:10px 0;
border-top:1px solid rgba(255,255,255,.08);
}
}

/* Mobile fit pass: keep desktop untouched, tighten only phone/tablet dashboard */
@media(max-width:980px){
html,body{
max-width:100%;
overflow-x:hidden;
}
.premium-dashboard,
.premium-dashboard *{
box-sizing:border-box;
}
.premium-dashboard{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.premium-dashboard .dashboard-main,
.premium-dashboard .topbar,
.premium-dashboard .balance-card,
.premium-dashboard .action-grid,
.dashboard-grid,
.service-grid,
.premium-dashboard .card,
.premium-dashboard .security-banner,
.premium-dashboard .push-card{
width:100%;
max-width:100%;
min-width:0;
}
.premium-dashboard .dashboard-main{
overflow-x:hidden;
}
.premium-dashboard .topbar{
align-items:center;
gap:12px;
}
.premium-dashboard .topbar>div:first-child{
min-width:0;
}
.premium-dashboard .topbar h1{
overflow-wrap:anywhere;
}
.premium-dashboard .topbar p{
font-size:13px;
}
.premium-dashboard .top-actions{
flex-shrink:0;
}
.premium-dashboard .more-menu{
right:10px;
left:10px;
top:72px;
width:auto;
}
.premium-dashboard .balance-card{
overflow:hidden;
}
.premium-dashboard .balance-card:before{
width:240px;
height:82px;
right:-50px;
bottom:22%;
}
.premium-dashboard .balance-card h2{
max-width:100%;
font-size:clamp(28px,8.8vw,42px);
line-height:1.05;
overflow-wrap:anywhere;
}
.premium-dashboard .balance-equivalent{
max-width:100%;
white-space:normal;
line-height:1.35;
}
.premium-dashboard .balance-switch{
max-width:100%;
}
.premium-dashboard .balance-switch button{
min-width:58px;
}
.premium-dashboard .balance-meta{
max-width:100%;
}
.premium-dashboard .action-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.premium-dashboard .action-grid button{
width:100%;
min-width:0;
min-height:82px;
padding:14px 10px 14px 62px;
}
.premium-dashboard .action-grid button:before{
left:14px;
width:38px;
height:38px;
margin-top:-19px;
font-size:19px;
}
.premium-dashboard .action-grid button b{
font-size:14px;
white-space:normal;
}
.premium-dashboard .action-grid button span{
font-size:12px;
line-height:1.25;
white-space:normal;
}
.premium-dashboard .card,
.premium-dashboard .security-banner,
.service-grid button{
padding:16px;
}
.premium-dashboard .section-title{
align-items:center;
gap:10px;
}
.premium-dashboard .section-title h3{
font-size:17px;
}
.premium-dashboard .mini-row{
grid-template-columns:1fr;
gap:6px;
}
.premium-dashboard .mini-row .badge{
grid-column:auto;
width:max-content;
}
.premium-dashboard .mini-row b{
overflow-wrap:anywhere;
}
.premium-dashboard .push-card{
grid-template-columns:1fr;
}
.premium-dashboard .push-card button{
width:100%;
}
.premium-dashboard .bottom-nav{
max-width:100%;
left:0;
right:0;
}
}

@media(max-width:430px){
.premium-dashboard .dashboard-main{
padding:16px 10px 88px;
}
.premium-dashboard .topbar h1{
font-size:21px;
}
.premium-dashboard .circle-btn{
width:40px;
height:40px;
border-radius:12px;
}
.premium-dashboard .balance-card{
min-height:0;
padding:18px 14px;
}
.premium-dashboard .balance-card p{
font-size:14px;
}
.premium-dashboard .eye-btn{
left:auto;
right:14px;
top:19px;
}
.premium-dashboard .balance-switch{
padding:6px;
gap:5px;
margin-bottom:16px;
}
.premium-dashboard .balance-switch button{
height:32px;
min-width:54px;
padding:0 10px;
font-size:12px;
}
.premium-dashboard .balance-meta{
gap:12px;
margin-top:18px;
padding-top:18px;
}
.premium-dashboard .balance-meta b{
font-size:15px;
}
.premium-dashboard .action-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:9px;
}
.premium-dashboard .action-grid button{
min-height:78px;
padding:13px 8px 13px 56px;
border-radius:10px;
}
.premium-dashboard .action-grid button:before{
left:12px;
width:36px;
height:36px;
margin-top:-18px;
}
.premium-dashboard .security-banner h3{
font-size:21px;
}
.service-grid{
grid-template-columns:1fr;
}
.service-grid button{
min-height:94px;
}
}

@media(max-width:375px){
.premium-dashboard .dashboard-main{
padding-left:8px;
padding-right:8px;
}
.premium-dashboard .topbar{
gap:8px;
}
.premium-dashboard .topbar h1{
font-size:19px;
}
.premium-dashboard .topbar p{
font-size:12px;
}
.premium-dashboard .balance-card h2{
font-size:27px;
}
.premium-dashboard .action-grid button{
padding-left:50px;
}
.premium-dashboard .action-grid button:before{
left:10px;
width:34px;
height:34px;
margin-top:-17px;
}
.premium-dashboard .action-grid button b{
font-size:13px;
}
.premium-dashboard .action-grid button span{
font-size:11px;
}
.premium-dashboard .bottom-nav button{
font-size:10px;
padding-left:1px;
padding-right:1px;
}
}

/* Phone layout matched to the dark ATV mobile reference */
.mobile-app-header{
display:none;
}
@media(max-width:760px){
body:has(.premium-dashboard){
background:#060a0d;
}
.premium-dashboard{
background:
radial-gradient(circle at 50% -6%,rgba(22,199,132,.08),transparent 25%),
linear-gradient(180deg,#070b0d 0%,#030506 100%);
}
.premium-dashboard .dashboard-main{
padding:34px 18px 142px;
}
.premium-dashboard .topbar{
display:none;
}
.mobile-app-header{
display:grid;
grid-template-columns:54px 1fr 54px;
align-items:center;
margin-bottom:28px;
}
.mobile-avatar{
width:54px;
height:54px;
border-radius:50%;
background:
radial-gradient(circle at 50% 34%,#c8d0d0 0 10px,transparent 11px),
radial-gradient(circle at 50% 76%,#9aa4a6 0 18px,transparent 19px),
linear-gradient(145deg,#293236,#161d20);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.mobile-logo{
text-align:center;
line-height:.9;
}
.mobile-logo strong{
display:block;
font-size:33px;
letter-spacing:-1px;
color:white;
}
.mobile-logo span{
display:block;
margin-top:8px;
font-size:8px;
letter-spacing:4px;
font-weight:900;
color:#16C784;
}
.mobile-bell{
justify-self:end;
width:48px;
height:48px;
border:0;
background:transparent;
position:relative;
}
.mobile-bell:before{
content:"\1F514";
font-size:26px;
color:white;
}
.mobile-bell:after{
content:"";
position:absolute;
right:9px;
top:8px;
width:12px;
height:12px;
border-radius:50%;
background:#16C784;
box-shadow:0 0 0 3px #07100c;
}
.premium-dashboard .more-menu{
top:96px;
}
.premium-dashboard .balance-card{
min-height:0;
padding:26px 22px 24px;
border-radius:26px;
background:
radial-gradient(circle at 87% 45%,rgba(22,199,132,.14),transparent 30%),
linear-gradient(135deg,#073721 0%,#08100f 43%,#0b1011 100%);
box-shadow:0 24px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
}
.premium-dashboard .balance-card:before{
width:320px;
height:92px;
right:-86px;
bottom:34%;
border-color:rgba(22,199,132,.16);
}
.premium-dashboard .balance-switch{
position:absolute;
right:22px;
top:24px;
display:flex;
align-items:center;
height:56px;
padding:8px;
border-radius:999px;
background:rgba(255,255,255,.08);
}
.premium-dashboard .balance-switch button{
height:38px;
min-width:58px;
font-size:0;
position:relative;
}
.premium-dashboard .balance-switch button.active:before{
content:"";
display:inline-block;
width:28px;
height:28px;
border-radius:50%;
background:linear-gradient(90deg,#159447 0 33%,#fff 33% 66%,#159447 66%);
vertical-align:middle;
margin-right:8px;
}
.premium-dashboard .balance-switch button.active:after{
content:"NGN";
font-size:18px;
color:white;
vertical-align:middle;
}
.premium-dashboard #ghsBalanceTab.active:before{
background:linear-gradient(180deg,#ce1126 0 33%,#fcd116 33% 66%,#006b3f 66%);
}
.premium-dashboard #ghsBalanceTab.active:after{
content:"GHS";
}
.premium-dashboard .balance-switch button:not(.active){
display:none;
}
.premium-dashboard .balance-card p{
font-size:20px;
margin-top:32px;
}
.premium-dashboard .eye-btn{
left:236px;
right:auto;
top:80px;
padding:0;
}
.premium-dashboard .eye-btn:before{
content:"\25C9";
font-size:18px;
}
.premium-dashboard .balance-card h2{
font-size:clamp(37px,10vw,52px);
margin:30px 0 22px;
letter-spacing:-1px;
}
.premium-dashboard .balance-equivalent{
font-size:18px;
padding:9px 16px;
border-radius:999px;
margin:0 0 26px;
}
.premium-dashboard .balance-equivalent:after{
content:" vs yesterday";
margin-left:18px;
color:rgba(255,255,255,.76);
font-weight:600;
}
.premium-dashboard .balance-meta{
grid-template-columns:1fr 1fr;
gap:22px;
margin-top:8px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.11);
}
.premium-dashboard .balance-meta div+div{
border-left:1px solid rgba(255,255,255,.11);
padding-left:22px;
}
.premium-dashboard .balance-meta span{
font-size:14px;
}
.premium-dashboard .balance-meta b{
font-size:20px;
}
.premium-dashboard .action-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:12px;
margin:28px 0 24px;
}
.premium-dashboard .action-grid button{
min-height:122px;
padding:62px 10px 16px;
text-align:center;
border-radius:16px;
}
.premium-dashboard .action-grid button:nth-child(2),
.premium-dashboard .action-grid button:nth-child(4){
display:none;
}
.premium-dashboard .action-grid button:nth-child(1){order:1;}
.premium-dashboard .action-grid button:nth-child(5){order:2;}
.premium-dashboard .action-grid button:nth-child(3){order:3;}
.premium-dashboard .action-grid button:before{
left:50%;
top:24px;
width:48px;
height:48px;
margin:0 0 0 -24px;
font-size:23px;
}
.premium-dashboard .action-grid button b{
font-size:16px;
}
.premium-dashboard .action-grid button span{
font-size:14px;
}
.dashboard-grid{
grid-template-columns:1fr 1fr;
gap:12px;
}
.premium-dashboard .pending-card,
.premium-dashboard .support-card,
.premium-dashboard .service-grid,
.premium-dashboard .push-card,
.premium-dashboard .admin-panel{
display:none!important;
}
.premium-dashboard .card{
padding:16px;
border-radius:16px;
background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
}
.premium-dashboard .section-title h3{
font-size:16px;
}
.premium-dashboard .text-btn{
font-size:12px;
}
.premium-dashboard .mini-row{
padding:12px 0;
font-size:12px;
}
.premium-dashboard .mini-row b{
font-size:12px;
}
.premium-dashboard .mini-row .badge{
font-size:10px;
padding:5px 8px;
}
.rate-table{
gap:10px;
}
.rate-table>div{
grid-template-columns:1fr .8fr .8fr;
gap:7px;
font-size:11px;
padding:0;
border:0;
}
.rate-table b,.rate-table span,.rate-table strong{
font-size:11px;
overflow-wrap:anywhere;
}
.premium-dashboard .live-rate{
font-size:10px;
line-height:1.2;
}
.premium-dashboard .security-banner{
display:grid;
grid-template-columns:.8fr 1.2fr;
align-items:center;
gap:12px;
margin-top:24px;
padding:22px;
border-radius:18px;
}
.premium-dashboard .security-banner:before{
content:"";
width:116px;
height:104px;
grid-row:1 / span 3;
border-radius:24px;
background:
radial-gradient(circle at 32% 26%,#ffc34d 0 10px,transparent 11px),
radial-gradient(circle at 54% 18%,#f8d36b 0 9px,transparent 10px),
linear-gradient(145deg,#2e3b33,#101513);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.premium-dashboard .security-banner div{
grid-column:2;
}
.premium-dashboard .security-banner span{
font-size:13px;
}
.premium-dashboard .security-banner h3{
font-size:21px;
}
.premium-dashboard .security-banner p{
font-size:13px;
}
.premium-dashboard .security-banner button{
grid-column:2;
width:100%;
height:46px;
margin:0;
}
.premium-dashboard .bottom-nav{
height:108px;
padding:12px 12px 14px;
border-radius:36px 36px 0 0;
background:rgba(9,12,14,.96);
box-shadow:0 -18px 50px rgba(0,0,0,.42);
display:grid;
grid-template-columns:1fr 1fr 92px 1fr 1fr;
align-items:end;
gap:5px;
}
.premium-dashboard .bottom-nav button{
height:68px;
padding:38px 2px 4px;
border-radius:16px;
font-size:12px;
position:relative;
color:#9aa4af;
}
.premium-dashboard .bottom-nav button:before{
content:"";
position:absolute;
left:50%;
top:9px;
width:25px;
height:25px;
margin-left:-12px;
border:2px solid currentColor;
border-radius:7px;
}
.premium-dashboard .bottom-nav button:first-child{
color:#16C784;
background:transparent;
}
.premium-dashboard .bottom-nav .nav-convert{
height:96px;
padding-top:70px;
margin-top:-40px;
color:white;
overflow:visible;
}
.premium-dashboard .bottom-nav .nav-convert:before{
content:"\21C4";
top:-18px;
width:76px;
height:76px;
margin-left:-38px;
border:12px solid rgba(22,199,132,.22);
border-radius:50%;
background:linear-gradient(145deg,#20dc8f,#0ca95f);
display:grid;
place-items:center;
font-size:36px;
line-height:52px;
box-shadow:0 18px 34px rgba(22,199,132,.25);
}
}

@media(max-width:430px){
.premium-dashboard .dashboard-main{
padding:30px 14px 140px;
}
.mobile-app-header{
margin-bottom:24px;
}
.premium-dashboard .balance-card{
padding:22px 18px;
border-radius:24px;
}
.premium-dashboard .balance-card p{
font-size:17px;
}
.premium-dashboard .eye-btn{
left:196px;
top:74px;
}
.premium-dashboard .balance-card h2{
font-size:37px;
}
.premium-dashboard .balance-equivalent{
font-size:15px;
}
.premium-dashboard .balance-meta b{
font-size:17px;
}
.premium-dashboard .action-grid button{
min-height:108px;
}
.dashboard-grid{
gap:10px;
}
.premium-dashboard .card{
padding:13px;
}
.premium-dashboard .section-title{
display:flex;
align-items:center;
}
.premium-dashboard .section-title h3{
font-size:14px;
}
.premium-dashboard .mini-row{
font-size:10px;
}
.premium-dashboard .mini-row b{
font-size:10px;
}
.rate-table>div,
.rate-table b,
.rate-table span,
.rate-table strong{
font-size:9px;
}
.premium-dashboard .security-banner{
padding:16px;
}
.premium-dashboard .security-banner h3{
font-size:18px;
}
}

@media(max-width:375px){
.premium-dashboard .dashboard-main{
padding-left:10px;
padding-right:10px;
}
.mobile-logo strong{
font-size:29px;
}
.premium-dashboard .balance-card h2{
font-size:32px;
}
.premium-dashboard .eye-btn{
left:178px;
}
.premium-dashboard .balance-switch{
right:14px;
}
.premium-dashboard .action-grid{
gap:8px;
}
.premium-dashboard .action-grid button{
min-height:100px;
padding-left:6px;
padding-right:6px;
}
.premium-dashboard .action-grid button b{
font-size:14px;
}
.premium-dashboard .action-grid button span{
font-size:12px;
}
.premium-dashboard .bottom-nav{
grid-template-columns:1fr 1fr 84px 1fr 1fr;
}
}

/* Final clean mobile dashboard organization */
@media(max-width:760px){
.premium-dashboard .dashboard-main{
padding:22px 16px 128px!important;
}
.mobile-app-header{
grid-template-columns:52px 1fr 102px!important;
gap:8px;
align-items:center;
margin-bottom:22px!important;
}
.mobile-header-actions{
display:flex;
justify-content:flex-end;
align-items:center;
gap:10px;
}
.mobile-bell,.mobile-menu-btn{
width:42px;
height:42px;
border:0;
border-radius:14px;
background:rgba(255,255,255,.05);
position:relative;
}
.mobile-bell:before{
font-size:22px;
}
.mobile-bell:after{
right:7px;
top:7px;
width:10px;
height:10px;
}
.mobile-menu-btn{
display:grid;
place-items:center;
padding:0;
}
.mobile-menu-btn span{
display:block;
width:20px;
height:2px;
margin:2px 0;
border-radius:99px;
background:white;
}
.premium-dashboard .balance-card{
padding:18px 16px 18px!important;
border-radius:22px!important;
min-height:248px!important;
}
.premium-dashboard .balance-card p{
margin-top:50px!important;
font-size:15px!important;
}
.premium-dashboard .balance-card h2{
font-size:clamp(30px,8.4vw,40px)!important;
margin:16px 0 22px!important;
line-height:1.03!important;
}
.premium-dashboard .balance-equivalent{
display:none!important;
}
.premium-dashboard .balance-switch{
top:16px!important;
right:14px!important;
height:44px!important;
margin:0!important;
}
.premium-dashboard .eye-btn{
top:66px!important;
left:182px!important;
right:auto!important;
}
.premium-dashboard .balance-meta{
grid-template-columns:1fr 1fr!important;
gap:10px!important;
margin-top:0!important;
padding-top:16px!important;
}
.premium-dashboard .balance-meta div+div{
padding-left:10px!important;
}
.premium-dashboard .balance-meta span{
font-size:12px!important;
}
.premium-dashboard .balance-meta b{
font-size:15px!important;
}
.premium-dashboard .action-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:9px!important;
margin:18px 0 20px!important;
}
.premium-dashboard .action-grid button{
display:block;
min-height:88px!important;
padding:48px 6px 10px!important;
text-align:center!important;
}
.premium-dashboard .action-grid button:nth-child(2),
.premium-dashboard .action-grid button:nth-child(4){
display:none!important;
}
.premium-dashboard .action-grid button:nth-child(1){order:1;}
.premium-dashboard .action-grid button:nth-child(5){order:2;}
.premium-dashboard .action-grid button:nth-child(3){order:3;}
.premium-dashboard .action-grid button:before{
left:50%!important;
top:14px!important;
width:36px!important;
height:36px!important;
margin:0 0 0 -18px!important;
font-size:18px!important;
}
.premium-dashboard .action-grid button b{
font-size:13px!important;
}
.premium-dashboard .action-grid button span{
font-size:11px!important;
}
.dashboard-grid{
display:grid!important;
grid-template-columns:1fr!important;
gap:14px!important;
}
.premium-dashboard .recent-card,
.premium-dashboard .rates-card{
min-width:0!important;
}
.premium-dashboard .card{
padding:16px!important;
border-radius:18px!important;
}
.premium-dashboard .mini-row{
display:grid!important;
grid-template-columns:1fr auto!important;
align-items:center!important;
gap:8px 10px!important;
}
.premium-dashboard .mini-row .badge{
grid-column:2!important;
}
.rate-table>div{
grid-template-columns:1.1fr .8fr .7fr!important;
gap:8px!important;
border:0!important;
padding:4px 0!important;
}
.rate-table b,.rate-table span,.rate-table strong{
font-size:12px!important;
}
.premium-dashboard .security-banner{
grid-template-columns:100px 1fr!important;
padding:18px!important;
border-radius:20px!important;
}
.premium-dashboard .security-banner:before{
width:88px!important;
height:88px!important;
}
.premium-dashboard .security-banner h3{
font-size:19px!important;
}
.premium-dashboard .security-banner p{
font-size:12px!important;
}
.premium-dashboard .security-banner button{
height:42px!important;
}
.premium-dashboard .bottom-nav{
height:104px!important;
grid-template-columns:1fr 1fr 88px 1fr 1fr!important;
}
}

@media(max-width:430px){
.premium-dashboard .dashboard-main{
padding:20px 12px 126px!important;
}
.mobile-app-header{
grid-template-columns:46px 1fr 94px!important;
}
.mobile-avatar{
width:46px!important;
height:46px!important;
}
.mobile-logo strong{
font-size:29px!important;
}
.mobile-bell,.mobile-menu-btn{
width:38px;
height:38px;
}
.premium-dashboard .balance-card{
padding:16px 14px 16px!important;
min-height:232px!important;
}
.premium-dashboard .balance-card p{
font-size:14px!important;
margin-top:46px!important;
}
.premium-dashboard .balance-card h2{
font-size:30px!important;
margin-bottom:18px!important;
}
.premium-dashboard .eye-btn{
left:168px!important;
top:62px!important;
}
.premium-dashboard .balance-meta b{
font-size:14px!important;
}
.premium-dashboard .action-grid{
gap:9px!important;
}
.premium-dashboard .action-grid button{
min-height:84px!important;
}
.premium-dashboard .security-banner{
grid-template-columns:1fr!important;
}
.premium-dashboard .security-banner:before{
grid-row:auto!important;
}
}

@media(max-width:375px){
.premium-dashboard .balance-card h2{
font-size:27px!important;
}
.premium-dashboard .eye-btn{
left:150px!important;
}
.premium-dashboard .balance-switch{
right:12px!important;
}
.premium-dashboard .action-grid button{
min-height:80px!important;
}
}

@media(max-width:760px){
.premium-dashboard .bottom-nav{
position:fixed!important;
left:0!important;
right:0!important;
bottom:0!important;
z-index:90!important;
width:100%!important;
max-width:100%!important;
height:92px!important;
display:grid!important;
grid-template-columns:1fr 1fr 92px 1fr 1fr!important;
align-items:end!important;
overflow:visible!important;
transform:none!important;
border-radius:28px 28px 0 0!important;
padding:10px 10px 8px!important;
}
.premium-dashboard .bottom-nav .nav-convert{
position:absolute!important;
left:50%!important;
top:-26px!important;
transform:translateX(-50%)!important;
width:86px!important;
height:104px!important;
padding-top:76px!important;
z-index:3!important;
overflow:visible!important;
background:transparent!important;
}
.premium-dashboard .bottom-nav .nav-convert:before{
top:0!important;
left:50%!important;
width:70px!important;
height:70px!important;
margin-left:-35px!important;
border-radius:50%!important;
}
}

@media(max-width:430px){
.premium-dashboard .bottom-nav{
grid-template-columns:1fr 1fr 84px 1fr 1fr!important;
height:88px!important;
padding:9px 8px 7px!important;
}
.premium-dashboard .bottom-nav .nav-convert{
top:-24px!important;
width:80px!important;
height:100px!important;
padding-top:72px!important;
}
.premium-dashboard .bottom-nav .nav-convert:before{
width:66px!important;
height:66px!important;
margin-left:-33px!important;
}
}

/* iPhone 393x852 primary mobile polish */
@media(max-width:760px){
html,body{
width:100%;
max-width:100%;
overflow-x:hidden!important;
background:#050809!important;
}
.premium-dashboard{
min-height:100vh;
overflow-x:hidden!important;
background:
radial-gradient(circle at 50% -8%,rgba(22,199,132,.10),transparent 27%),
linear-gradient(180deg,#070b0d 0%,#040607 100%)!important;
}
.premium-dashboard .dashboard-main{
width:100%;
max-width:430px;
min-height:100vh;
margin:0 auto;
padding:24px 14px 126px!important;
overflow-x:hidden!important;
}
.mobile-app-header{
display:grid!important;
grid-template-columns:46px 1fr 46px!important;
align-items:center!important;
gap:10px!important;
height:58px;
margin:0 0 18px!important;
}
.mobile-avatar{
display:block!important;
width:46px!important;
height:46px!important;
border:0!important;
border-radius:50%!important;
padding:0!important;
margin:0!important;
background:
radial-gradient(circle at 50% 34%,#cdd4d5 0 8px,transparent 9px),
radial-gradient(circle at 50% 76%,#9ca6a8 0 15px,transparent 16px),
linear-gradient(145deg,#293236,#151a1d)!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 24px rgba(0,0,0,.2)!important;
}
.mobile-logo strong{
font-size:30px!important;
letter-spacing:-1px!important;
}
.mobile-logo span{
font-size:7px!important;
letter-spacing:4px!important;
}
.mobile-header-actions{
display:flex!important;
justify-content:flex-end!important;
align-items:center!important;
}
.mobile-bell{
width:44px!important;
height:44px!important;
border-radius:14px!important;
background:transparent!important;
}
.mobile-bell:before{
font-size:24px!important;
}
.mobile-bell:after{
right:7px!important;
top:6px!important;
}
.mobile-menu-btn{
display:grid!important;
}
.premium-dashboard .more-menu{
top:82px!important;
left:14px!important;
right:14px!important;
}
.premium-dashboard .balance-card{
width:100%!important;
min-height:236px!important;
padding:18px 16px 18px!important;
border-radius:24px!important;
background:
radial-gradient(circle at 84% 46%,rgba(22,199,132,.14),transparent 30%),
linear-gradient(135deg,#07371f 0%,#07100f 43%,#0a0f10 100%)!important;
box-shadow:0 20px 46px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.premium-dashboard .balance-card:before{
width:280px!important;
height:76px!important;
right:-78px!important;
bottom:34%!important;
}
.premium-dashboard .balance-switch{
top:16px!important;
right:16px!important;
height:42px!important;
padding:6px!important;
border-radius:999px!important;
}
.premium-dashboard .balance-switch button{
height:30px!important;
min-width:52px!important;
padding:0 8px!important;
}
.premium-dashboard .balance-switch button.active:before{
width:24px!important;
height:24px!important;
margin-right:6px!important;
}
.premium-dashboard .balance-switch button.active:after{
font-size:14px!important;
}
.premium-dashboard .balance-card p{
font-size:15px!important;
margin:52px 0 0!important;
}
.premium-dashboard .eye-btn{
top:66px!important;
left:178px!important;
height:24px!important;
min-width:24px!important;
}
.premium-dashboard .balance-card h2{
font-size:34px!important;
line-height:1.02!important;
letter-spacing:-.5px!important;
margin:16px 0 20px!important;
white-space:nowrap!important;
}
.premium-dashboard .balance-meta{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:12px!important;
padding-top:16px!important;
border-top:1px solid rgba(255,255,255,.10)!important;
}
.premium-dashboard .balance-meta div+div{
padding-left:12px!important;
border-left:1px solid rgba(255,255,255,.10)!important;
}
.premium-dashboard .balance-meta span{
font-size:12px!important;
margin-bottom:7px!important;
}
.premium-dashboard .balance-meta b{
font-size:15px!important;
}
.premium-dashboard .action-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:10px!important;
margin:18px 0 16px!important;
}
.premium-dashboard .action-grid button{
min-width:0!important;
min-height:86px!important;
padding:48px 6px 10px!important;
border-radius:16px!important;
text-align:center!important;
}
.premium-dashboard .action-grid button:nth-child(2),
.premium-dashboard .action-grid button:nth-child(4){
display:none!important;
}
.premium-dashboard .action-grid button:nth-child(1){order:1!important;}
.premium-dashboard .action-grid button:nth-child(5){order:2!important;}
.premium-dashboard .action-grid button:nth-child(3){order:3!important;}
.premium-dashboard .action-grid button:before{
top:13px!important;
left:50%!important;
width:34px!important;
height:34px!important;
margin-left:-17px!important;
font-size:17px!important;
}
.premium-dashboard .action-grid button b{
font-size:13px!important;
}
.premium-dashboard .action-grid button span{
font-size:11px!important;
line-height:1.25!important;
}
.dashboard-grid{
display:grid!important;
grid-template-columns:1fr!important;
gap:12px!important;
}
.premium-dashboard .pending-card,
.premium-dashboard .support-card,
.premium-dashboard .service-grid,
.premium-dashboard .push-card,
.premium-dashboard .admin-panel{
display:none!important;
}
.premium-dashboard .card{
width:100%!important;
padding:15px!important;
border-radius:18px!important;
}
.premium-dashboard .section-title{
margin-bottom:12px!important;
}
.premium-dashboard .section-title h3{
font-size:16px!important;
}
.premium-dashboard .text-btn{
font-size:12px!important;
}
.premium-dashboard .mini-row{
display:grid!important;
grid-template-columns:1fr auto!important;
gap:4px 10px!important;
padding:10px 0!important;
}
.premium-dashboard .mini-row b{
font-size:12px!important;
}
.premium-dashboard .mini-row span{
font-size:11px!important;
}
.premium-dashboard .mini-row .badge{
grid-column:2!important;
font-size:10px!important;
padding:4px 8px!important;
}
.rate-table{
gap:8px!important;
}
.rate-table>div{
grid-template-columns:1.08fr .8fr .68fr!important;
gap:8px!important;
padding:3px 0!important;
border:0!important;
}
.rate-table b,.rate-table span,.rate-table strong{
font-size:12px!important;
line-height:1.25!important;
}
.premium-dashboard .security-banner{
display:grid!important;
grid-template-columns:86px 1fr!important;
gap:12px!important;
margin-top:16px!important;
padding:16px!important;
border-radius:20px!important;
}
.premium-dashboard .security-banner:before{
width:78px!important;
height:78px!important;
grid-row:1 / span 3!important;
}
.premium-dashboard .security-banner h3{
font-size:18px!important;
line-height:1.2!important;
}
.premium-dashboard .security-banner p{
font-size:12px!important;
}
.premium-dashboard .security-banner button{
height:40px!important;
border-radius:10px!important;
font-size:13px!important;
}
.premium-dashboard .bottom-nav{
position:fixed!important;
left:50%!important;
right:auto!important;
bottom:0!important;
transform:translateX(-50%)!important;
z-index:100!important;
width:100%!important;
max-width:430px!important;
height:92px!important;
display:grid!important;
grid-template-columns:1fr 1fr 88px 1fr 1fr!important;
align-items:end!important;
gap:4px!important;
padding:10px 10px 8px!important;
border-radius:30px 30px 0 0!important;
background:rgba(9,12,14,.97)!important;
box-shadow:0 -18px 46px rgba(0,0,0,.42)!important;
overflow:visible!important;
}
.premium-dashboard .bottom-nav button{
height:64px!important;
padding:36px 2px 4px!important;
font-size:11px!important;
border-radius:14px!important;
background:transparent!important;
color:#9aa4af!important;
}
.premium-dashboard .bottom-nav button:first-child{
color:#16C784!important;
}
.premium-dashboard .bottom-nav .nav-convert{
position:absolute!important;
left:50%!important;
top:-15px!important;
transform:translateX(-50%)!important;
width:68px!important;
height:82px!important;
padding-top:56px!important;
color:white!important;
z-index:4!important;
}
.premium-dashboard .bottom-nav .nav-convert:before{
top:0!important;
left:50%!important;
width:52px!important;
height:52px!important;
margin-left:-26px!important;
border:6px solid rgba(22,199,132,.20)!important;
border-radius:18px!important;
}
}

@media(max-width:375px){
.premium-dashboard .dashboard-main{
padding-left:10px!important;
padding-right:10px!important;
}
.premium-dashboard .balance-card h2{
font-size:30px!important;
}
.premium-dashboard .eye-btn{
left:158px!important;
}
.premium-dashboard .bottom-nav{
grid-template-columns:1fr 1fr 82px 1fr 1fr!important;
}
}

/* Keep mobile balance currency switch tappable */
@media(max-width:760px){
.premium-dashboard .balance-switch{
display:flex!important;
gap:6px!important;
}
.premium-dashboard .balance-switch button,
.premium-dashboard .balance-switch button:not(.active){
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-width:52px!important;
height:30px!important;
font-size:12px!important;
font-weight:900!important;
color:white!important;
background:transparent!important;
}
.premium-dashboard .balance-switch button.active{
background:rgba(22,199,132,.22)!important;
box-shadow:inset 0 0 0 1px rgba(22,199,132,.42)!important;
}
.premium-dashboard .balance-switch button.active:before,
.premium-dashboard .balance-switch button.active:after{
display:none!important;
content:none!important;
}
}

@media(max-width:760px){
.mobile-app-header{
grid-template-columns:46px 1fr 92px!important;
}
.mobile-header-actions{
gap:8px!important;
}
.mobile-bell,.mobile-menu-btn{
width:40px!important;
height:40px!important;
}
.mobile-menu-btn span{
display:block!important;
width:19px!important;
height:2px!important;
margin:2px 0!important;
background:white!important;
border-radius:99px!important;
}
}

/* Stable final mobile nav: no floating overflow, convert fits in center slot */
@media(max-width:760px){
.premium-dashboard .bottom-nav{
position:fixed!important;
left:50%!important;
right:auto!important;
bottom:0!important;
transform:translateX(-50%)!important;
width:100%!important;
max-width:430px!important;
height:86px!important;
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:4px!important;
align-items:center!important;
padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;
border-radius:26px 26px 0 0!important;
overflow:hidden!important;
}
.premium-dashboard .bottom-nav button,
.premium-dashboard .bottom-nav .nav-convert{
position:relative!important;
left:auto!important;
top:auto!important;
transform:none!important;
grid-column:auto!important;
width:100%!important;
height:66px!important;
margin:0!important;
padding:40px 2px 4px!important;
border-radius:16px!important;
font-size:10px!important;
line-height:1.1!important;
overflow:hidden!important;
}
.premium-dashboard .bottom-nav button:nth-child(1){grid-column:1!important;}
.premium-dashboard .bottom-nav button:nth-child(2){grid-column:2!important;}
.premium-dashboard .bottom-nav .nav-convert{grid-column:3!important;}
.premium-dashboard .bottom-nav button:nth-child(4){grid-column:4!important;}
.premium-dashboard .bottom-nav button:nth-child(5){grid-column:5!important;}
.premium-dashboard .bottom-nav button:before,
.premium-dashboard .bottom-nav .nav-convert:before{
position:absolute!important;
left:50%!important;
top:8px!important;
width:26px!important;
height:26px!important;
margin-left:-13px!important;
border:2px solid currentColor!important;
border-radius:8px!important;
background:transparent!important;
box-shadow:none!important;
font-size:16px!important;
line-height:22px!important;
}
.premium-dashboard .bottom-nav .nav-convert{
color:white!important;
background:rgba(22,199,132,.16)!important;
box-shadow:inset 0 0 0 1px rgba(22,199,132,.26)!important;
}
.premium-dashboard .bottom-nav .nav-convert:before{
content:"\21C4"!important;
width:34px!important;
height:34px!important;
top:5px!important;
margin-left:-17px!important;
border:0!important;
border-radius:12px!important;
background:linear-gradient(145deg,#20dc8f,#0ca95f)!important;
display:grid!important;
place-items:center!important;
font-size:22px!important;
line-height:34px!important;
}
}

@media(max-width:760px){
.premium-dashboard .bottom-nav button:nth-child(1){
grid-column:1!important;
}
.premium-dashboard .bottom-nav button:nth-child(2){
grid-column:2!important;
}
.premium-dashboard .bottom-nav .nav-convert{
grid-column:3!important;
}
.premium-dashboard .bottom-nav button:nth-child(4){
grid-column:4!important;
}
.premium-dashboard .bottom-nav button:nth-child(5){
grid-column:5!important;
}
}

/* Stable balance header: keeps the eye tool beside the active balance label. */
.premium-dashboard .balance-card .balance-card-head,
.balance-card .balance-card-head{
position:relative!important;
z-index:3!important;
display:flex!important;
align-items:center!important;
gap:8px!important;
width:max-content!important;
max-width:calc(100% - 140px)!important;
margin:28px 0 0!important;
}
.premium-dashboard .balance-card .balance-card-head p,
.balance-card .balance-card-head p{
margin:0!important;
font-size:15px!important;
line-height:1.2!important;
}
.premium-dashboard .balance-card .eye-btn,
.balance-card .eye-btn{
position:relative!important;
top:auto!important;
left:auto!important;
right:auto!important;
bottom:auto!important;
display:inline-grid!important;
place-items:center!important;
width:30px!important;
min-width:30px!important;
height:30px!important;
padding:0!important;
margin:0!important;
border-radius:50%!important;
font-size:15px!important;
line-height:1!important;
color:white!important;
background:rgba(255,255,255,.14)!important;
border:1px solid rgba(255,255,255,.22)!important;
box-shadow:none!important;
}
.premium-dashboard .balance-card .eye-btn:before,
.balance-card .eye-btn:before{
content:none!important;
}
.premium-dashboard .balance-card .eye-btn.is-hidden,
.balance-card .eye-btn.is-hidden{
opacity:.72!important;
}
.premium-dashboard .balance-card h2{
margin-top:18px!important;
}

.premium-dashboard .balance-amount-row,
.balance-card .balance-amount-row{
position:relative!important;
z-index:3!important;
display:flex!important;
align-items:center!important;
gap:12px!important;
margin:16px 0 18px!important;
min-width:0!important;
}

.premium-dashboard .balance-amount-row h2,
.balance-card .balance-amount-row h2{
margin:0!important;
min-width:0!important;
overflow-wrap:anywhere!important;
}

@media(max-width:430px){
.premium-dashboard .balance-card .balance-card-head,
.balance-card .balance-card-head{
max-width:calc(100% - 116px)!important;
margin-top:46px!important;
}
.premium-dashboard .balance-card .balance-card-head p,
.balance-card .balance-card-head p{
font-size:13px!important;
}
.premium-dashboard .balance-card .eye-btn,
.balance-card .eye-btn{
width:26px!important;
min-width:26px!important;
height:26px!important;
font-size:13px!important;
}
.premium-dashboard .balance-amount-row,
.balance-card .balance-amount-row{
gap:8px!important;
margin-top:14px!important;
}
}

/* Crisp mobile profile button. */
.premium-dashboard .mobile-avatar,
.mobile-avatar{
position:relative!important;
display:grid!important;
place-items:center!important;
width:48px!important;
height:48px!important;
border-radius:50%!important;
padding:0!important;
border:1px solid rgba(255,255,255,.12)!important;
background:linear-gradient(145deg,#1b2421,#0b1110)!important;
box-shadow:0 12px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08)!important;
overflow:hidden!important;
}
.premium-dashboard .mobile-avatar:before,
.mobile-avatar:before{
content:""!important;
position:absolute!important;
top:11px!important;
left:50%!important;
width:14px!important;
height:14px!important;
margin-left:-7px!important;
border-radius:50%!important;
background:#e9f3ee!important;
box-shadow:0 0 0 2px rgba(22,199,132,.18)!important;
}
.premium-dashboard .mobile-avatar:after,
.mobile-avatar:after{
content:""!important;
position:absolute!important;
left:50%!important;
bottom:9px!important;
width:26px!important;
height:15px!important;
margin-left:-13px!important;
border-radius:16px 16px 8px 8px!important;
background:#e9f3ee!important;
box-shadow:0 0 0 2px rgba(22,199,132,.12)!important;
}
.premium-dashboard .mobile-avatar:hover,
.mobile-avatar:hover{
border-color:rgba(22,199,132,.5)!important;
box-shadow:0 14px 32px rgba(0,0,0,.36),0 0 0 4px rgba(22,199,132,.1)!important;
}

/* Keep notification setup visible on phones so each mobile device can save its own token. */
@media(max-width:760px){
.premium-dashboard .push-card{
display:grid!important;
grid-template-columns:1fr!important;
gap:10px!important;
margin:0 0 14px!important;
padding:14px!important;
border-radius:18px!important;
background:linear-gradient(145deg,rgba(22,199,132,.12),rgba(255,255,255,.04))!important;
border:1px solid rgba(22,199,132,.18)!important;
}
.premium-dashboard .push-card h3{
font-size:15px!important;
margin:0 0 4px!important;
}
.premium-dashboard .push-card .help{
font-size:12px!important;
line-height:1.4!important;
}
.premium-dashboard .push-card button{
width:100%!important;
height:42px!important;
border-radius:14px!important;
background:#16C784!important;
color:#04140e!important;
font-weight:800!important;
}
.mobile-notification-pop{
top:12px!important;
width:calc(100% - 24px)!important;
border-radius:16px!important;
}
}

.forgot-password-link{
width:auto;
display:block;
margin:2px 0 10px auto;
padding:0;
border:0;
background:transparent;
box-shadow:none;
color:#079247;
font-size:13px;
font-weight:900;
text-align:right;
}
.forgot-password-link:hover{
text-decoration:underline;
background:transparent;
}

.password-field{
position:relative;
display:flex;
align-items:center;
margin-top:10px;
}
.password-field input{
margin-top:0;
padding-right:76px;
}
.password-field button{
position:absolute;
right:7px;
top:50%;
transform:translateY(-50%);
width:auto;
margin:0;
padding:7px 10px;
border-radius:10px;
background:#edf8f2;
color:#079247;
font-size:12px;
box-shadow:none;
}
.support-auth-link{
display:block;
margin:10px 0 4px;
font-size:13px;
font-weight:900;
color:#079247;
text-align:center;
text-decoration:none;
}
.support-auth-link:hover{text-decoration:underline;}
.tier-badge,.vip-badge{
display:inline-flex;
align-items:center;
gap:5px;
width:max-content;
border-radius:999px;
padding:5px 9px;
font-size:12px;
font-weight:900;
background:#edf8f2;
color:#079247;
margin:4px 6px 4px 0;
}
.vip-badge{
background:linear-gradient(135deg,#111816,#16C784);
color:white;
}

.profile-summary-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin:14px 0;
}

.profile-summary-grid div{
padding:11px;
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
background:rgba(255,255,255,.04);
min-width:0;
}

.profile-summary-grid span{
display:block;
font-size:12px;
color:#8b98a8;
margin-bottom:5px;
}

.profile-summary-grid b{
display:block;
font-size:13px;
word-break:break-word;
}

.recipient-preview span{
display:block;
margin-top:4px;
}

.atv-page-loader{
position:fixed;
inset:0;
z-index:99999;
display:grid;
place-items:center;
padding:24px;
background:
radial-gradient(circle at 50% 32%,rgba(22,199,132,.08),transparent 30%),
rgba(3,8,7,.82);
color:white;
transition:opacity .18s ease,visibility .18s ease;
}

.atv-page-loader.hidden{
opacity:0;
visibility:hidden;
pointer-events:none;
}

.atv-loader-card{
position:relative;
display:grid;
place-items:center;
gap:12px;
text-align:center;
min-width:min(210px,76vw);
padding:22px 20px;
border:1px solid rgba(255,255,255,.09);
border-radius:20px;
background:rgba(10,17,16,.56);
box-shadow:0 20px 48px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter:blur(10px);
opacity:.88;
}

.atv-loader-logo{
position:relative;
width:70px;
height:70px;
display:grid;
place-items:center;
border-radius:20px;
background:linear-gradient(145deg,#ffffff,#d9fff0);
color:#07120d;
font-size:22px;
font-weight:900;
letter-spacing:-1px;
box-shadow:0 0 24px rgba(22,199,132,.18);
animation:atvLoaderPulse 1.5s ease-in-out infinite;
}

.atv-loader-logo span{
display:block;
grid-column:1;
font-size:5px;
letter-spacing:2px;
color:#16C784;
margin-top:32px;
position:absolute;
}

.atv-loader-ring{
width:28px;
height:28px;
border-radius:50%;
border:2px solid rgba(255,255,255,.10);
border-top-color:#16C784;
animation:atvLoaderSpin .9s linear infinite;
}

.atv-page-loader p{
margin:0;
max-width:260px;
font-size:14px;
line-height:1.5;
color:#dbe8e2;
}

.atv-page-loader.mini{
inset:auto 16px 18px auto;
display:block;
padding:0;
background:transparent;
pointer-events:none;
}

.atv-page-loader.mini .atv-loader-card{
min-width:0;
grid-template-columns:34px 1fr;
gap:10px;
padding:10px 12px;
border-radius:999px;
background:rgba(5,12,10,.72);
box-shadow:0 10px 28px rgba(0,0,0,.22);
}

.atv-page-loader.mini .atv-loader-logo{
width:34px;
height:34px;
border-radius:11px;
font-size:12px;
}

.atv-page-loader.mini .atv-loader-logo span{
display:none;
}

.atv-page-loader.mini .atv-loader-ring{
display:none;
}

.atv-page-loader.mini p{
font-size:12px;
max-width:140px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.atv-page-loader.failed .atv-loader-ring{
animation:none;
border-color:rgba(255,255,255,.18);
border-top-color:#ff5f5f;
}

.atv-page-loader button{
width:auto;
min-width:120px;
margin:0;
padding:11px 18px;
border-radius:999px;
background:#16C784;
color:#03110a;
font-weight:900;
box-shadow:0 12px 26px rgba(22,199,132,.24);
}

@keyframes atvLoaderPulse{
0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(22,199,132,0));}
50%{transform:scale(1.05);filter:drop-shadow(0 0 18px rgba(22,199,132,.45));}
}

@keyframes atvLoaderSpin{
to{transform:rotate(360deg);}
}

@media(max-width:520px){
.profile-summary-grid{
grid-template-columns:1fr;
}
}

@media(max-width:760px){
.admin-alert-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.admin-alert-grid button,
.admin-alert-grid div{
padding:13px;
}
.admin-alert-grid b{
font-size:24px;
}
.admin-quick-grid{
grid-template-columns:1fr;
gap:9px;
}
.admin-card-head{
grid-template-columns:1fr;
align-items:start;
}
.compact-admin-list{
max-height:none;
overflow:visible;
}
.admin-list-row{
grid-template-columns:30px 1fr auto;
gap:8px;
padding:9px;
}
.admin-list-row > span:nth-child(3),
.admin-list-row strong{
display:none;
}
.admin-list-row em{
grid-column:3;
}
}