:root{
  --bg:#07090b;--panel:#0d1116;--panel2:#10151b;--line:#222a33;
  --text:#edf1f5;--muted:#788391;--gold:#e7bd49;--green:#56db8c;--red:#dc8c8c;
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select{font:inherit} button{cursor:pointer}
.app{min-height:100vh}
.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#090c10}
.brand{display:flex;align-items:center;gap:12px}.brand .mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#f7dc73,#c4931f);color:#17130a;font-weight:900}.brand b{display:block;font-size:16px}.brand small{display:block;color:var(--gold);font-size:8px;letter-spacing:2px;margin-top:3px}
.top-actions{display:flex;align-items:center;gap:16px}.system{font-size:9px;letter-spacing:1.4px;color:#93a0ad}.system i,.dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 10px rgba(86,219,140,.7);margin-right:7px}
.main{max-width:1240px;margin:0 auto;padding:30px 24px 60px}
.view{display:none}.view.active{display:block}
.login-card{max-width:470px;margin:9vh auto 0;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 20px 70px rgba(0,0,0,.3)}
.eyebrow{font-size:8px;letter-spacing:2px;color:var(--gold);font-weight:800}.login-card h1,.hero h1{margin:9px 0;font-size:30px}.login-card p,.hero p{color:var(--muted);font-size:12px;line-height:1.7}
label{display:block;color:#aab4bf;font-size:9px;margin:15px 0 7px}
input,select{width:100%;border:1px solid var(--line);background:#090d12;color:var(--text);padding:12px 13px;border-radius:9px;outline:none}
input:focus,select:focus{border-color:#6b5824}
.primary,.ghost{border-radius:9px;padding:11px 15px;border:1px solid var(--line);font-size:10px;font-weight:800;letter-spacing:.6px}
.primary{background:linear-gradient(135deg,#f4d46a,#ca9723);color:#17130a;border:0}.ghost{background:#0c1116;color:#cbd3db}.ghost.small{padding:8px 11px}
.primary.wide{min-width:220px}.message{min-height:18px;margin-top:12px;color:#d5a85a;font-size:10px}
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}.hero h1{margin-bottom:6px}
.operator-badge{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:10px 13px;border-radius:11px;background:#0b1015}.operator-badge b{display:block;font-size:10px}.operator-badge small{display:block;color:var(--muted);font-size:8px;margin-top:3px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.card-head h2{margin:6px 0 0;font-size:15px}
.status{padding:6px 9px;border-radius:20px;background:#151a20;color:#87919d;font-size:8px;font-weight:800;letter-spacing:.5px}.status.ok{color:var(--green)}.status.warn{color:var(--gold)}.status.fail{color:var(--red)}
.qr-stage{height:285px;border:1px dashed #303944;border-radius:12px;background:#090d12;display:grid;place-items:center;overflow:hidden}.qr-placeholder{text-align:center}.qr-icon{width:130px;height:130px;border:10px solid #dfe4ea;color:#111;display:grid;place-items:center;background:#fff;margin:0 auto 13px;font-weight:900}.qr-placeholder b{display:block;font-size:12px}.qr-placeholder small{display:block;color:var(--muted);font-size:9px;margin-top:5px}
#qrImage{max-width:260px;max-height:260px;background:#fff;padding:8px;border-radius:8px}
.qr-actions{display:flex;gap:8px;margin-top:13px}.account-box{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:9px;background:#0a0f14}.account-box span,.metric span{display:block;color:#66717e;font-size:8px;letter-spacing:1px}.account-box b{display:block;margin-top:5px;font-size:11px}.account-box small{display:block;color:var(--muted);font-size:8px;margin-top:3px}
.campaign-preview{margin-top:14px;border:1px solid var(--line);border-radius:10px;background:#0a0f14}.preview-row{display:flex;justify-content:space-between;gap:15px;padding:11px 12px;border-bottom:1px solid #191f26}.preview-row:last-child{border-bottom:0}.preview-row span{color:#707b87;font-size:9px}.preview-row b{font-size:9px;text-align:right}
.message-preview{margin-top:14px}.preview-label{color:#6f7985;font-size:8px;letter-spacing:1px;margin-bottom:6px}pre{margin:0;padding:12px;border:1px solid var(--line);border-radius:9px;background:#080c10;color:#ced5dc;min-height:100px;white-space:pre-wrap;overflow-wrap:anywhere;font:10px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}
.control-card{margin-top:14px}.control-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.metric{border:1px solid var(--line);background:#0a0f14;border-radius:10px;padding:12px}.metric b{display:block;font-size:22px;margin-top:6px}.progress{height:10px;background:#151b21;border-radius:999px;overflow:hidden;margin:15px 0}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c79520,#f3d86f);transition:width .25s}
.run-actions{display:flex;gap:8px}.activity-card{margin-top:14px}.activity-list{display:grid;gap:8px}.activity-item{display:grid;grid-template-columns:85px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid #1c232b;border-radius:9px;background:#0a0f14}.activity-item small{color:var(--muted);font-size:8px}.activity-item b{font-size:9px}.empty{text-align:center;color:#59636f;padding:24px;font-size:9px}
@media(max-width:850px){.grid{grid-template-columns:1fr}.control-grid{grid-template-columns:1fr 1fr}.hero{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.topbar{padding:0 16px}.main{padding:20px 14px 40px}.login-card{margin-top:5vh;padding:22px}.control-grid{grid-template-columns:1fr}.run-actions{flex-direction:column}.primary.wide{width:100%}}

/* Login form alignment */
.login-card{max-width:470px}
.login-card form{margin-top:18px}
.login-card form label{margin:0 0 7px}
.login-card form input{display:block;height:46px;margin:0 0 16px}
.login-card form .primary{display:block;width:100%;height:46px;margin-top:2px}
.login-card .message{margin-top:10px;min-height:18px}
@media(max-width:560px){
  .login-card{width:100%;max-width:none}
  .login-card form input,.login-card form .primary{height:48px}
}

.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:#080c10;border:1px solid var(--line);border-radius:10px;margin:18px 0 18px}
.auth-tab{height:36px;border:0;border-radius:7px;background:transparent;color:#66717e;font-size:9px;font-weight:800;letter-spacing:.7px}
.auth-tab.active{background:#151a20;color:var(--gold)}
.login-card form[hidden]{display:none}
.login-card form .primary{width:100%}
.customer-badge{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:10px 13px;border-radius:11px;background:#0b1015}

body{padding-bottom:82px}
.customer-page{display:none}.customer-page.active{display:block}
.page-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.page-title-row h1{margin:7px 0 5px;font-size:28px}.page-title-row p{margin:0;color:var(--muted);font-size:12px}
.dashboard-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.dashboard-cards.compact{grid-template-columns:repeat(3,1fr)}
.summary-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}.summary-card span{display:block;color:#707b87;font-size:8px;letter-spacing:1px}.summary-card b{display:block;font-size:23px;margin-top:6px}.summary-card small{display:block;color:var(--muted);font-size:8px;margin-top:3px}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.quick-btn{background:#0a0f14;border:1px solid var(--line);border-radius:10px;text-align:left;padding:14px;color:var(--text)}.quick-btn b{display:block;font-size:10px}.quick-btn small{display:block;color:var(--muted);font-size:8px;margin-top:5px}
.ref-code{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#0a0f14}.ref-code span{color:#6f7985;font-size:8px;letter-spacing:1px}.ref-code b{flex:1;font-size:13px;letter-spacing:1px}.balance-main{background:linear-gradient(135deg,#121820,#0a0f14);border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:14px}.balance-main span{display:block;color:#76818d;font-size:8px;letter-spacing:1px}.balance-main b{display:block;font-size:34px;margin-top:8px}.balance-main small{display:block;color:var(--muted);font-size:9px;margin-top:6px}.profile-card{display:flex;align-items:center;gap:18px}.profile-avatar{width:70px;height:70px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#f6d866,#b98619);color:#17130a;font-size:28px;font-weight:900}.profile-info{display:grid;grid-template-columns:100px 1fr;gap:8px 12px}.profile-info span{color:#6f7985;font-size:8px;letter-spacing:1px}.profile-info b{font-size:10px}
.customer-bottom-nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:min(720px,calc(100% - 28px));background:#0b1015;border:1px solid #272f38;border-radius:17px;padding:7px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;z-index:50;box-shadow:0 16px 45px rgba(0,0,0,.45)}
.nav-item{border:0;background:transparent;color:#77828e;border-radius:11px;padding:8px 4px 7px}.nav-item span{display:block;font-size:15px;line-height:1.1}.nav-item b{display:block;font-size:8px;margin-top:4px;font-weight:800}.nav-item.active{background:#151b22;color:var(--gold)}
@media(max-width:800px){.dashboard-cards,.quick-grid{grid-template-columns:1fr 1fr}.dashboard-cards.compact{grid-template-columns:1fr}.page-title-row{flex-direction:column}.customer-bottom-nav{bottom:8px}}
@media(max-width:560px){body{padding-bottom:86px}.main{padding:20px 14px 100px}.customer-bottom-nav{width:calc(100% - 16px);bottom:6px}.nav-item b{font-size:7px}.summary-card b{font-size:20px}}

/* Authenticated customer pages are never visible before customerView is active. */
#customerView{width:100%}
#customerView .customer-page{display:none}
#customerView .customer-page.active{display:block}
#headerLogoutBtn[hidden]{display:none}
.profile-logout{margin-top:14px}
.customer-bottom-nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:min(720px,calc(100% - 28px));background:#0b1015;border:1px solid #272f38;border-radius:17px;padding:7px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;z-index:50;box-shadow:0 16px 45px rgba(0,0,0,.45)}
.nav-item{border:0;background:transparent;color:#77828e;border-radius:11px;padding:8px 4px 7px}
.nav-item span{display:block;font-size:15px;line-height:1.1}
.nav-item b{display:block;font-size:8px;margin-top:4px;font-weight:800}
.nav-item.active{background:#151b22;color:var(--gold)}
.dashboard-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.dashboard-cards.compact{grid-template-columns:repeat(3,1fr)}
.summary-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.summary-card span{display:block;color:#707b87;font-size:8px;letter-spacing:1px}
.summary-card b{display:block;font-size:23px;margin-top:6px}
.summary-card small{display:block;color:var(--muted);font-size:8px;margin-top:3px}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.quick-btn{background:#0a0f14;border:1px solid var(--line);border-radius:10px;text-align:left;padding:14px;color:var(--text)}
.quick-btn b{display:block;font-size:10px}.quick-btn small{display:block;color:var(--muted);font-size:8px;margin-top:5px}
.ref-code{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#0a0f14}
.ref-code span{color:#6f7985;font-size:8px;letter-spacing:1px}.ref-code b{flex:1;font-size:13px;letter-spacing:1px}
.balance-main{background:linear-gradient(135deg,#121820,#0a0f14);border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:14px}
.balance-main span{display:block;color:#76818d;font-size:8px;letter-spacing:1px}
.balance-main b{display:block;font-size:34px;margin-top:8px}
.balance-main small{display:block;color:var(--muted);font-size:9px;margin-top:6px}
.profile-card{display:flex;align-items:center;gap:18px}
.profile-avatar{width:70px;height:70px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#f6d866,#b98619);color:#17130a;font-size:28px;font-weight:900}
.profile-info{display:grid;grid-template-columns:100px 1fr;gap:8px 12px}
.profile-info span{color:#6f7985;font-size:8px;letter-spacing:1px}.profile-info b{font-size:10px}
@media(max-width:800px){.dashboard-cards,.quick-grid{grid-template-columns:1fr 1fr}.dashboard-cards.compact{grid-template-columns:1fr}}
@media(max-width:560px){.customer-bottom-nav{width:calc(100% - 16px);bottom:6px}.nav-item b{font-size:7px}.summary-card b{font-size:20px}}

.welcome-box{min-width:280px;max-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.welcome-box h2{margin:6px 0 13px;font-size:18px}
.welcome-row{display:flex;justify-content:space-between;gap:18px;padding:8px 0;border-top:1px solid #191f26}
.welcome-row span{color:#6f7985;font-size:8px;letter-spacing:.7px}
.welcome-row b{font-size:10px;text-align:right}
@media(max-width:800px){.welcome-box{width:100%;max-width:none}}

/* Dashboard Customer — reference-inspired layout */
body{background:#07080a}
#pageDashboard{max-width:100%}
.welcome-strip{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:linear-gradient(110deg,#3b2a08 0%,#17140d 28%,#12110c 100%);
  border:1px solid #594514;border-radius:18px;padding:16px 20px;margin-bottom:16px;
  box-shadow:0 0 38px rgba(205,156,28,.09)
}
.welcome-left{display:flex;align-items:center;gap:14px;min-width:0}
.welcome-avatar{
  width:62px;height:62px;border-radius:16px;display:grid;place-items:center;
  flex:0 0 auto;background:radial-gradient(circle at 35% 28%,#2c64aa,#102e68 50%,#071324 100%);
  border:2px solid #a98626;box-shadow:0 0 24px rgba(228,184,63,.18);
  color:#fff;font-weight:900;font-size:21px
}
.welcome-copy{min-width:0}.welcome-copy h1{font-size:19px;margin:5px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.welcome-copy p{margin:0;color:#8f815f;font-size:10px}.welcome-copy p b{color:#e8c85e}
.wib-clock{display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding-left:22px;border-left:1px solid #55461f}
.wib-clock span{font-size:8px;letter-spacing:1px;color:#a48d55;font-weight:800}.wib-clock b{font-size:21px;color:#efbd3e;letter-spacing:1px;font-variant-numeric:tabular-nums}
.dashboard-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.dash-card{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  background:#16130d;border:1px solid #403415;border-radius:16px;padding:17px 18px;
  color:var(--text);transition:border-color .15s,transform .15s
}
.dash-card:hover{border-color:#6c5720;transform:translateY(-1px)}
.dash-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex:0 0 auto;background:#111}
.dash-icon.blue{background:#0d2845;color:#6faaff}.dash-icon.gold{background:#3b2b06;color:#f0c24a}
.dash-copy{min-width:0;flex:1}.dash-copy span{display:block;font-size:8px;letter-spacing:1px;color:#9a8b6b;font-weight:800}
.dash-copy b{display:block;font-size:24px;margin-top:4px;color:#f2f2ef}
.dash-copy small{display:block;font-size:9px;color:#7e7461;margin-top:2px}
.dash-card em{font-style:normal;color:#7b6b3e;font-size:25px}
.service-card{
  background:#16130d;border:1px solid #403415;border-radius:16px;padding:18px 20px
}
.service-head h2{font-size:16px;margin:6px 0 16px}
.service-row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid #2d2719;font-size:12px}
.service-row:last-child{border-bottom:0;padding-bottom:4px}
.service-row span{color:#a08f6b}.service-row b{color:#fff;font-size:12px}
@media(max-width:760px){
  .dashboard-stats{grid-template-columns:1fr}
  .welcome-strip{align-items:flex-start}
  .wib-clock{min-width:120px}
}
@media(max-width:520px){
  .welcome-strip{flex-direction:column}
  .welcome-left{width:100%}
  .wib-clock{width:100%;border-left:0;border-top:1px solid #55461f;padding-left:0;padding-top:11px;align-items:flex-start}
  .welcome-copy h1{white-space:normal}
}