:root{
  --red:#c40000; --red2:#e30613; --dark:#7a0000; --black:#0d0d0f;
  --gold:#f5b301; --bg:#fff5f5; --card:#ffffff; --muted:#8a8a8a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Roboto,Arial,sans-serif;background:linear-gradient(180deg,#fff 0%,#ffe9e9 30%,#ffd7d7 100%);color:#1a1a1a;padding-bottom:120px;min-height:100vh}
.topbar{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,#8f0000,#c40000 40%,#e30613);color:#fff;padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 18px rgba(196,0,0,.35)}
.topbar img.logo{width:44px;height:44px;border-radius:12px;background:#fff;object-fit:contain;padding:2px}
.topbar .t{flex:1}.topbar .t h1{font-size:17px;letter-spacing:.5px}.topbar .t small{opacity:.9;font-size:11px}
.clock{background:rgba(255,255,255,.18);padding:6px 10px;border-radius:20px;font-size:12px;font-weight:700}
.balance-pill{background:#fff;color:var(--red);font-weight:800;padding:6px 12px;border-radius:20px;font-size:13px}
.hero{position:relative;margin:12px;border-radius:18px;overflow:hidden;box-shadow:0 8px 30px rgba(196,0,0,.25);height:190px;background:#000}
.hero img{width:100%;height:190px;object-fit:cover;transition:opacity .4s}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 60%,rgba(196,0,0,.35));display:flex;align-items:center;padding:18px;color:#fff}
.hero .overlay h2{font-size:22px;text-shadow:0 2px 8px rgba(0,0,0,.6)}.hero .overlay h2 span{color:#ffdf5d}
.hero .overlay p{font-size:12px;opacity:.95;margin-top:4px}
.dots{position:absolute;bottom:8px;left:0;right:0;text-align:center}.dots i{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);margin:0 3px}.dots i.on{background:#fff}
.wrap{padding:0 12px;max-width:640px;margin:0 auto}
.card{background:var(--card);border-radius:16px;padding:14px;margin:12px 0;box-shadow:0 4px 18px rgba(0,0,0,.07);border:1px solid #ffe0e0;animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes glow{0%,100%{box-shadow:0 0 8px rgba(227,6,19,.5)}50%{box-shadow:0 0 22px rgba(227,6,19,.9)}}
.vip{border:2px solid #ffd0d0;border-radius:16px;overflow:hidden;margin:12px 0;background:#fff;animation:fadeUp .5s ease}
.vip .vhead{display:flex;gap:12px;padding:12px;background:linear-gradient(135deg,#fff 55%,#ffe3e3)}
.vip img.p{width:96px;height:96px;object-fit:cover;border-radius:12px;flex-shrink:0;border:2px solid var(--red)}
.vip .info{flex:1}.vip .info h3{color:var(--red);font-size:18px}
.tag{display:inline-block;background:linear-gradient(90deg,var(--red),var(--red2));color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px;margin:4px 0}
.prow{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}.prow b{color:#111}
.prow .green{color:#0a8a2a;font-weight:800}
.btn{display:block;width:100%;border:none;border-radius:12px;padding:13px;font-size:15px;font-weight:800;cursor:pointer;margin-top:8px;transition:.2s}
.btn-red{background:linear-gradient(90deg,#a80000,#e30613);color:#fff;animation:glow 2s infinite}
.btn-red:active{transform:scale(.98)}
.btn-dark{background:#111;color:#fff}.btn-green{background:#0a8a2a;color:#fff}.btn-ghost{background:#f3f3f3;color:#333}
.btn:disabled{opacity:.5;cursor:not-allowed}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
input,select,textarea{width:100%;padding:12px;border-radius:10px;border:1.5px solid #e5b8b8;margin:6px 0;font-size:14px;background:#fffdfd}
input:focus,select:focus{outline:none;border-color:var(--red2);box-shadow:0 0 0 3px rgba(227,6,19,.15)}
label{font-size:13px;font-weight:700;color:#555}
.copyrow{display:flex;align-items:center;gap:8px;background:#fff8f8;border:1px dashed #e8a0a0;border-radius:10px;padding:8px 10px;margin:6px 0}
.copyrow .val{flex:1;font-size:13px;word-break:break-all;font-weight:600}
.copybtn{background:var(--red);color:#fff;border:none;border-radius:8px;padding:7px 14px;font-size:12px;font-weight:800;cursor:pointer;min-width:70px}
.copybtn.hit{background:#0a8a2a}
.refwarn{background:#fff3cd;border:2px solid #f5b301;border-radius:10px;padding:10px;font-size:14px;margin:10px 0;text-align:center}
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:60;background:#fff;border-top:2px solid #ffd0d0;display:flex;padding:8px 4px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(0,0,0,.1)}
.bottomnav button{flex:1;border:none;background:none;font-size:10px;font-weight:800;color:#888;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px}
.bottomnav button .ic{font-size:21px}
.bottomnav button.on{color:var(--red)}
.fab{position:fixed;right:14px;bottom:86px;z-index:70}
.fab-main{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-size:26px;border:none;cursor:pointer;box-shadow:0 6px 20px rgba(196,0,0,.5);animation:pulse 2s infinite}
.fab-opt{display:none;flex-direction:column;gap:8px;margin-bottom:8px}
.fab.open .fab-opt{display:flex}
.fab-opt a{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.fab-opt a.wa{background:#25D366}.fab-opt a.tg{background:#229ED9}
.fab-opt svg{width:26px;height:26px;fill:#fff}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.modal .box{background:#fff;border-radius:20px;padding:22px;max-width:440px;width:100%;max-height:90vh;overflow:auto;border-top:6px solid var(--red);animation:fadeUp .35s}
.modal h2{color:var(--red);margin-bottom:8px}
.big-soc{display:flex;gap:10px;margin:12px 0}.big-soc a{flex:1;text-align:center;padding:14px;border-radius:12px;color:#fff;font-weight:800;text-decoration:none;font-size:15px}
.big-soc a.wa{background:#25D366}.big-soc a.tg{background:#229ED9}
table{width:100%;border-collapse:collapse;font-size:12px}th,td{padding:8px;border-bottom:1px solid #eee;text-align:left}th{background:#fff0f0;color:var(--red)}
.badge{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:800}.b-pending{background:#fff3cd;color:#856404}.b-approved{background:#d4edda;color:#155724}.b-rejected{background:#f8d7da;color:#721c24}
.admin-tabs{display:flex;gap:6px;overflow-x:auto;margin:10px 0}.admin-tabs button{white-space:nowrap;border:none;background:#ffe3e3;color:var(--red);font-weight:800;padding:9px 14px;border-radius:20px;cursor:pointer}.admin-tabs button.on{background:var(--red);color:#fff}
.small{font-size:12px;color:#666}.mono{font-family:monospace;font-size:12px}
.hidden{display:none!important}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat{background:linear-gradient(135deg,#c40000,#e30613);color:#fff;border-radius:14px;padding:14px;text-align:center}.stat b{font-size:22px;display:block}
.kv{font-size:13px;padding:4px 0;border-bottom:1px dashed #eee}.kv b{color:#333}
.auth-card{max-width:420px;margin:26px auto}
.auth-logo{display:block;width:37px;height:37px;object-fit:contain;margin:2px auto;border-radius:10px;background:#fff;padding:2px;box-shadow:0 3px 12px rgba(196,0,0,.25);animation:floaty 3s ease-in-out infinite}
.auth-title{text-align:center;color:var(--red);letter-spacing:1px;margin:6px 0 2px;font-size:20px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* Task center button: big, round, glowing, slowly moving */
.taskfab{position:relative;overflow:visible}
.task-circle{display:flex;align-items:center;justify-content:center;width:62px;height:62px;margin:-26px auto 0;border-radius:50%;font-size:28px;background:radial-gradient(circle at 35% 30%,#ff6b6b,#c40000 60%,#7a0000);border:3px solid #fff;box-shadow:0 0 14px rgba(227,6,19,.85),0 0 34px rgba(227,6,19,.45),0 6px 14px rgba(0,0,0,.3);animation:taskfloat 2.6s ease-in-out infinite,taskglow 1.8s ease-in-out infinite}
@keyframes taskfloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(3deg)}}
@keyframes taskglow{0%,100%{box-shadow:0 0 12px rgba(227,6,19,.7),0 0 26px rgba(227,6,19,.35),0 6px 14px rgba(0,0,0,.3)}50%{box-shadow:0 0 22px rgba(227,6,19,1),0 0 52px rgba(227,6,19,.6),0 6px 14px rgba(0,0,0,.3)}}
.taskfab:active .task-circle{animation:taskpop .45s ease}
@keyframes taskpop{0%{transform:scale(1)}35%{transform:scale(1.25) rotate(10deg)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.task-circle.burst{animation:taskburst .6s ease}
@keyframes taskburst{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(-12deg)}60%{transform:scale(.9) rotate(8deg)}100%{transform:scale(1)}}
.taskdots{font-size:20px;letter-spacing:3px;margin:6px 0}
.taskdots .on{color:#e30613}.taskdots .off{color:#ddd}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
#authMsg.err{color:#c40000;font-weight:800}
.tablewrap{overflow-x:auto}
#profTx,#admTxList,#admUserList,#admDepList,#admWdList{overflow-x:auto}
table{min-width:420px}
/* ---- responsive ---- */
@media (max-width:480px){
  .topbar{padding:8px 10px;gap:8px}
  .topbar img.logo{width:36px;height:36px}
  .topbar .t h1{font-size:14px}
  .clock{font-size:11px;padding:5px 8px}
  .balance-pill{font-size:12px;padding:5px 10px}
  .hero{height:150px;margin:8px}
  .hero img{height:150px}
  .hero .overlay h2{font-size:17px}
  .wrap{padding:0 8px}
  .card{padding:11px;margin:9px 0}
  .vip img.p{width:72px;height:72px}
  .bottomnav button{font-size:9px}
  .bottomnav button .ic{font-size:18px}
  .task-circle{width:56px;height:56px;font-size:25px;margin:-22px auto 0}
  .btn{padding:12px;font-size:14px}
  .big-soc a{font-size:13px;padding:12px}
}
@media (min-width:700px){
  .wrap{max-width:680px}
  .hero{height:220px}.hero img{height:220px}
}