:root{--brand:#005f4f;--brand-2:#0b7f6a;--brand-soft:#e8f7f2;--bg:#f6f7f9;--card:#fff;--text:#17212b;--muted:#667085;--line:#e6ecef;--danger:#ef4444;--warn:#f59e0b;--success:#16a34a;--shadow:0 10px 28px rgba(0,0,0,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}a{text-decoration:none;color:inherit}button{font:inherit}.page-wrap{max-width:900px;margin:0 auto;padding:16px 14px 96px}.card{background:var(--card);border-radius:18px;padding:16px;box-shadow:var(--shadow);border:1px solid #edf2f4;margin-top:14px}.topbar{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff;padding:18px;border-radius:0 0 18px 18px;box-shadow:var(--shadow)}.wallet-hero{margin-top:0}.muted,.muted-light{color:var(--muted)}.muted-light{color:#d9f3ee}.balance-big{font-size:30px;font-weight:800;letter-spacing:.2px}.hero-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.pill{background:rgba(255,255,255,.15);padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.hero-stats>div{background:rgba(255,255,255,.12);padding:10px 12px;border-radius:14px}.hero-stats small{display:block;color:#d8f6f0;margin-bottom:4px}.hero-stats strong{font-size:18px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.section-head h2,.section-head h3{margin:0}.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.qa{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;min-height:88px}.qa span{font-size:24px}.qa b{font-size:13px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.feature-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;text-align:center}.feature-icon{width:44px;height:44px;background:#cdeee4;border-radius:14px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;color:#064e3b;font-size:20px}.tx-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #edf2f7}.tx-item:last-child{border-bottom:none}.tx-title{font-weight:700}.tx-meta{font-size:12px;color:var(--muted);margin-top:4px}.badge{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;display:inline-block}.pending{background:#fff7ed;color:#c2410c}.success,.ok{background:#ecfdf5;color:#15803d}.expired{background:#fef2f2;color:#b91c1c}.alert{padding:12px 14px;border-radius:14px;margin:12px 0}.alert-success{background:#ecfdf5;color:#166534}.alert-danger{background:#fef2f2;color:#991b1b}.form-control,.select{display:flex;align-items:center;gap:10px;border:1px solid #d8e2ef;border-radius:14px;padding:12px 14px;background:#fff}.phone-box input,.form-control input,.select select,textarea{border:none;outline:none;width:100%;font-size:15px;background:transparent}.label{display:block;margin:14px 0 8px;font-weight:700}.btn-auth{display:block;width:100%;border:none;border-radius:14px;padding:13px;background:var(--brand);color:#fff;font-weight:700;cursor:pointer}.btn-auth:hover{background:#0a7a66}.btn-outline,.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--brand);color:var(--brand);padding:10px 14px;border-radius:12px;background:#fff;cursor:pointer}.btn{background:var(--brand);color:#fff}.btn:hover{opacity:.95}.btn-sm-refresh{padding:8px 12px;font-size:12px}.empty-box{padding:18px;border:1px dashed #dbe3ee;border-radius:16px;color:#64748b;background:#f8fafc}.fee-box{margin-top:10px;background:#eff6ff;color:#1d4ed8;border-radius:14px;padding:12px 14px}.channel-grid{display:grid;gap:10px}.channel-item{display:flex;gap:10px;align-items:flex-start;border:1px solid #dbe3ee;border-radius:16px;padding:12px;cursor:pointer}.channel-item input{margin-top:4px}.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}.chip{padding:8px 12px;border-radius:999px;background:#f1f5f9;color:#334155}.chip.active{background:var(--brand);color:#fff}.invoice-status{display:flex;justify-content:space-between;align-items:center;background:#f8fafc;border-radius:14px;padding:12px 14px;margin:10px 0 14px}.invoice-box{border:1px solid #eef2f7;border-radius:16px;padding:4px 14px 0}.menu-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #edf2f7}.menu-item:last-child{border-bottom:none}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px;border-bottom:1px solid #e5e7eb;font-size:14px;text-align:left;vertical-align:top}.admin-shell{display:flex;min-height:100vh;background:#f4f6f9}.admin-sidebar{width:250px;background:#212529;color:#fff;padding:18px}.admin-sidebar a{display:block;color:#fff;padding:10px 12px;border-radius:10px;margin-bottom:6px}.admin-sidebar a:hover,.admin-sidebar a.active{background:#343a40}.admin-main{flex:1;padding:20px}.admin-topbar,.admin-card{background:#fff;padding:18px;border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,.04);margin-bottom:18px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.top-mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.mini-stat{background:#f8fafc;border:1px solid #eef2f7;border-radius:14px;padding:12px}.mini-stat strong{display:block;font-size:18px;margin-top:6px}.toast-wrap{position:fixed;right:16px;top:16px;z-index:9999;display:grid;gap:10px}.toast{min-width:240px;max-width:360px;padding:12px 14px;border-radius:14px;color:#fff;box-shadow:var(--shadow);animation:toastIn .25s ease}.toast.success{background:#16a34a}.toast.error{background:#dc2626}@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;background:#fff;border-top:1px solid #e5e7eb;padding:10px 12px;width:100%;max-width:900px;box-shadow:0 -4px 18px rgba(0,0,0,.06)}.bottom-nav .inner{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:end}.bottom-nav a{text-align:center;color:#475569;font-size:12px;padding:4px 0;position:relative}.bottom-nav a .ico{display:block;font-size:20px;margin-bottom:4px}.bottom-nav a.active{color:var(--brand);font-weight:700}.bottom-nav .nav-topup .bubble{width:56px;height:56px;background:var(--brand);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;margin:-30px auto 6px;box-shadow:0 10px 18px rgba(0,95,79,.25)}.nav-badge{display:inline-flex;min-width:18px;height:18px;padding:0 5px;align-items:center;justify-content:center;background:var(--danger);color:#fff;border-radius:999px;font-size:10px;margin-left:4px;vertical-align:top}.search-row{display:grid;grid-template-columns:1fr auto;gap:8px}.inline-actions{display:flex;gap:8px;flex-wrap:wrap}.tabs2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.list-tight .tx-item{padding:10px 0}.text-right{text-align:right}.small{font-size:12px}.hide-mobile{display:block}.show-mobile{display:none}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.page-wrap{padding-bottom:110px}.admin-shell{display:block}.admin-sidebar{width:auto}.hide-mobile{display:none}.show-mobile{display:block}}
@media(max-width:640px){.page-wrap{padding:0 12px 110px}.topbar{border-radius:0 0 18px 18px}.quick-actions,.feature-grid{grid-template-columns:repeat(4,1fr)}.qa{padding:12px;min-height:78px}.qa span{font-size:20px}.qa b,.feature-card{font-size:12px}.hero-row{flex-direction:row}.hero-stats{grid-template-columns:repeat(3,1fr)}.stats{grid-template-columns:1fr}.table th,.table td{font-size:12px;padding:8px}.bottom-nav .inner{gap:4px}}

.profile-hero{display:flex;align-items:center;gap:12px;padding:8px 0 14px}
.avatar-circle{width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,var(--brand),var(--brand-2));display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;box-shadow:var(--shadow)}


/* Tahap 27 - DANA-like mobile header */
:root{--dana-dark:#005f4f;--dana-dark-2:#0b6d5d;--dana-soft:#dff4ee;}
body{background:#f5f7f8}
.topbar{position:relative;overflow:hidden;padding:16px 16px 18px;border-radius:0 0 22px 22px;background:linear-gradient(180deg,#005f4f 0%,#0a7a66 100%)}
.topbar:before{content:'';position:absolute;inset:-40% auto auto -10%;width:220px;height:220px;background:radial-gradient(circle at center,rgba(255,255,255,.14),transparent 60%);pointer-events:none}
.topbar:after{content:'';position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at center,rgba(255,255,255,.12),transparent 62%);pointer-events:none}
.dana-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;position:relative;z-index:1}
.dana-brand{display:flex;align-items:center;gap:10px;color:#fff}
.dana-brand-logo{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.dana-brand-text small{display:block;color:#d7f2ec;font-size:11px;font-weight:600;letter-spacing:.2px}.dana-brand-text strong{display:block;font-size:16px;line-height:1.2}
.dana-head-actions{display:flex;align-items:center;gap:10px}.icon-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:#fff;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.icon-btn .badge-dot{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700}
.balance-panel{position:relative;z-index:1;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(4px);border-radius:18px;padding:14px 14px 12px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.balance-line{display:flex;align-items:center;justify-content:space-between;gap:12px}.balance-caption{font-size:12px;color:#d7f2ec;font-weight:600}.balance-big{font-size:30px;line-height:1.15}.balance-tools{display:flex;align-items:center;gap:10px}.balance-eye{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.hero-stats{margin-top:12px}.hero-stats>div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.08)}
.quick-actions{margin-top:-22px;position:relative;z-index:2}
.quick-actions.card{padding:12px}.qa{border:none;background:#fff;box-shadow:0 8px 18px rgba(0,0,0,.05)}
.qa span{width:44px;height:44px;border-radius:14px;background:#dff4ee;display:flex;align-items:center;justify-content:center;color:#075546;margin-bottom:8px}
.feature-card{box-shadow:0 8px 18px rgba(0,0,0,.04)}
.app-header{display:flex;align-items:center;gap:10px;padding:12px 14px;max-width:900px;margin:0 auto;background:linear-gradient(180deg,#005f4f 0%,#0a7a66 100%);color:#fff;position:fixed;top:0;left:0;right:0;height:58px;z-index:1000;box-shadow:0 8px 18px rgba(0,0,0,.08)}
.app-header .header-title{font-size:17px;font-weight:700;flex:1}.back-icon-link,.header-action-link{color:#fff;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14)}
.app-header-spacer{height:58px}
.bottom-nav{border-top:1px solid #e7ecef;border-radius:18px 18px 0 0;padding-top:12px}
.bottom-nav .nav-topup .bubble{background:linear-gradient(180deg,#005f4f 0%,#0a7a66 100%)}
.section-soft{background:#fff;border-radius:18px;padding:14px;border:1px solid #edf2f4;box-shadow:0 10px 24px rgba(0,0,0,.05)}