/* SUKISU TEAM theme: design copied from the supplied user-panel index.html.
   Loaded AFTER ui.css + app.css, so it only re-skins. No behaviour lives here. */
:root{
  --bg:#0a0a0f; --bg2:#12121a; --ink:#fff; --mute:#8a8a9a; --faint:#5d5d6e;
  --line:#2a2a3a; --glass:#12121a; --glass2:#1a1a24; --input:#1a1a24;
  --cyan:#00f0ff; --cyan2:#00c8d6; --violet:#bf5af2; --purple:#bf5af2; --pink:#ff2d55; --red:#ff2d55;
  --green:#00ff88; --yellow:#ffcc00; --orange:#ff9500;
  --ok:#00ff88; --warn:#ffcc00; --bad:#ff2d55;
  --cyan-g:rgba(0,240,255,.3); --red-g:rgba(255,45,85,.3); --green-g:rgba(0,255,136,.3); --purple-g:rgba(191,90,242,.3); --yellow-g:rgba(255,204,0,.3);
  --r:20px; --r-sm:14px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{-webkit-tap-highlight-color:transparent}
body{font-family:var(--font);background:var(--bg);font-size:15px}
body::before,body::after{display:none}
body.mobile-app{background:var(--bg)}
@media (min-width:481px){body.mobile-app{background:#1a1a2e}}
a{color:var(--cyan)}
::selection{background:rgba(0,240,255,.3)}
:focus-visible{outline:2px solid var(--cyan)}
h1,h2,h3{letter-spacing:0}

/* ---------- particles ---------- */
.particles-container{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.particle{position:absolute;border-radius:50%;animation:floatUp linear infinite;opacity:0}
@keyframes floatUp{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100px) scale(1);opacity:0}}
#app{position:relative;z-index:1}

/* ---------- neon cards (gradient border + glow) ---------- */
.card,.modal,.hero-bal{--c:var(--cyan);--cg:rgba(0,240,255,.16)}
.c-cyan{--c:var(--cyan)!important;--cg:var(--cyan-g)!important}
.c-red{--c:var(--red)!important;--cg:var(--red-g)!important}
.c-green{--c:var(--green)!important;--cg:var(--green-g)!important}
.c-purple{--c:var(--purple)!important;--cg:var(--purple-g)!important}
.c-yellow{--c:var(--yellow)!important;--cg:var(--yellow-g)!important}
.card{background:var(--bg2);border:1px solid transparent;border-radius:20px;padding:20px;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 0 20px var(--cg);position:relative;isolation:isolate}
.card::before,.balance-card::before,.action-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:-1;opacity:.5;
  background:linear-gradient(135deg,var(--c),transparent,var(--c));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.card.flat{background:var(--bg2);box-shadow:none}
.card.flat::before{display:none}
.card h2{font-size:1.05rem;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.card-head h2{margin:0}
.tbl-wrap .card,.modal .card{box-shadow:none}

/* ---------- headings ---------- */
.page-title{font-size:20px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin:6px 0 4px}
.page-title span{color:var(--cyan)}
.page-sub{color:var(--mute);font-size:.85rem;margin-bottom:6px}
.main h1{font-size:20px;font-weight:800;letter-spacing:2px;text-transform:uppercase}

/* ---------- buttons (design: outline purple / solid cyan) ---------- */
.btn{background:transparent;border:2px solid var(--purple);color:var(--purple);border-radius:14px;font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:.82rem;padding:10px 16px;box-shadow:none}
.btn:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn.primary{background:var(--cyan);color:#000;border:0;font-weight:900;letter-spacing:2px;box-shadow:0 0 20px var(--cyan-g)}
.btn.primary:hover{filter:brightness(1.08);background:var(--cyan);color:#000;box-shadow:0 0 28px rgba(0,240,255,.5)}
.btn.danger{color:var(--red);border-color:var(--red)} .btn.danger:hover{background:var(--red);color:#fff;border-color:var(--red)}
.btn.sm{font-size:.72rem;letter-spacing:.5px;border-width:1.5px;padding:5px 11px}
.btn.lg{min-height:54px;font-size:1rem;border-radius:14px}
.btn .spin{border-color:currentColor;border-right-color:transparent}

/* ---------- inputs ---------- */
label.f{font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute)}
input,select,textarea{background:var(--input);border:1px solid var(--line);border-radius:14px;color:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 20px var(--cyan-g)}
select option{background:#12121a}
input[type=checkbox]{accent-color:var(--cyan)}
.input-field{padding:16px 20px;font-size:15px}

/* ---------- toggle row (tabs) ---------- */
.tabs,.toggle-row{display:flex;gap:8px;padding:4px;border-radius:12px;background:var(--input);border:0}
.tabs button,.toggle-btn{flex:1;padding:12px;border-radius:10px;border:0;background:transparent;color:var(--mute);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:.8rem;cursor:pointer;transition:.3s}
.tabs button.on,.toggle-btn.active{background:var(--cyan);color:#000;box-shadow:0 0 20px var(--cyan-g)}

/* ---------- badges / alerts ---------- */
.badge.ok{background:rgba(0,255,136,.15);color:var(--green);border-color:transparent}
.badge.warn{background:rgba(255,204,0,.15);color:var(--yellow);border-color:transparent}
.badge.bad{background:rgba(255,45,85,.15);color:var(--red);border-color:transparent}
.badge.info{background:rgba(0,240,255,.12);color:var(--cyan);border-color:transparent}
.badge.mute{background:#2a2a3a;color:#ccc;border-color:transparent}
.badge{font-weight:800;letter-spacing:.5px}
.alert{background:rgba(0,240,255,.07);border:1px solid rgba(0,240,255,.3);border-radius:12px}
.alert.warn{background:rgba(255,204,0,.1);border-color:rgba(255,204,0,.3);color:var(--yellow)}
.alert.bad{background:rgba(255,45,85,.1);border-color:rgba(255,45,85,.35)}
.alert.ok{background:rgba(0,255,136,.08);border-color:rgba(0,255,136,.3)}
.ann{border-radius:12px;background:rgba(0,240,255,.07);border:1px solid var(--cyan)}
.ann.warn{background:rgba(255,204,0,.1);border-color:var(--yellow)} .ann.danger{background:rgba(255,45,85,.1);border-color:var(--red)} .ann.success{background:rgba(0,255,136,.1);border-color:var(--green)}

/* ---------- tables ---------- */
.tbl-wrap{border-radius:14px;border:1px solid #222}
th{background:#1a1a2e;color:var(--mute);font-size:.7rem;letter-spacing:2px;text-transform:uppercase}
td{border-top:1px solid #222}
tbody tr:hover{background:rgba(0,240,255,.04)}

/* ---------- stats ---------- */
.stat{gap:6px}
.stat .k{font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--mute)}
.stat .v{font-weight:900;letter-spacing:0}
.cy{color:var(--cyan)}
.g4>.card.stat:nth-child(4n+1){--c:var(--cyan);--cg:var(--cyan-g)}
.g4>.card.stat:nth-child(4n+2){--c:var(--green);--cg:var(--green-g)}
.g4>.card.stat:nth-child(4n+3){--c:var(--purple);--cg:var(--purple-g)}
.g4>.card.stat:nth-child(4n+4){--c:var(--yellow);--cg:var(--yellow-g)}

/* ---------- toast / modal / overlay ---------- */
#toasts{top:auto;bottom:80px;left:50%;right:auto;transform:translateX(-50%);align-items:center;max-width:92vw}
.toast{background:#1a1a2e;color:var(--cyan);border:1px solid var(--cyan);border-left-width:1px;border-radius:10px;padding:12px 24px;font-weight:600;font-size:13px}
.toast.ok{border-color:var(--green);color:var(--green)} .toast.bad{border-color:var(--red);color:var(--red)} .toast.warn{border-color:var(--yellow);color:var(--yellow)}
.overlay{background:rgba(0,0,0,.8)}
.modal{background:#0f0f16;border:1px solid rgba(0,240,255,.25);box-shadow:0 0 40px rgba(0,240,255,.12),0 30px 80px -20px #000;border-radius:20px}
.keybox,.keyline,pre.code{background:var(--input);border-color:rgba(0,240,255,.4)}
.keyline code,.keybox span{color:var(--cyan)}
.kbd{background:var(--input)}
.sk{background:linear-gradient(90deg,#14141c,#1c1c28,#14141c);background-size:200% 100%}
.pill{background:var(--input);border:1px solid var(--line);border-radius:99px;font-weight:700}
.pill svg{color:var(--cyan)}

/* ---------- store / deposit pieces ---------- */
.pcard{border-radius:20px}
.pcard:hover{border-color:transparent;box-shadow:0 0 30px var(--cyan-g)}
.pcard .ic{background:rgba(0,240,255,.1);color:var(--cyan);border-radius:14px}
.chip{background:var(--input);border:1px solid var(--line);font-weight:700;letter-spacing:.5px}
.chip.on{background:var(--cyan);color:#000;border-color:var(--cyan);box-shadow:0 0 16px var(--cyan-g)}
.dur button{background:#1a1a2e;border-radius:12px}
.dur button.on{border-color:var(--cyan);background:rgba(0,240,255,.1);box-shadow:0 0 0 1px var(--cyan),0 0 20px var(--cyan-g)}
.qrbox{box-shadow:0 0 0 2px var(--cyan),0 0 30px var(--cyan-g)}
.qty{background:var(--input)} .qty button{background:#1a1a2e}
.stp .b{background:var(--bg2)}
.stp.now .b{border-color:var(--cyan);color:var(--cyan)}

/* ---------- login screen (shield + rotating border) ---------- */
.app-container{position:relative;z-index:1;max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);overflow:hidden}
.login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;position:relative}
.login-card{background:rgba(18,18,26,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;padding:40px 28px 32px;width:100%;max-width:400px;position:relative;z-index:1;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:cardEntry .6s ease-out;overflow:hidden}
@keyframes cardEntry{from{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.login-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(transparent,transparent,transparent,var(--cyan));animation:borderRotate 2s linear infinite;z-index:-1}
.login-card::after{content:'';position:absolute;inset:3px;border-radius:21px;background:rgba(18,18,26,.97);z-index:-1;box-shadow:0 0 60px rgba(0,240,255,.1),0 0 120px rgba(191,90,242,.05)}
@keyframes borderRotate{to{transform:rotate(360deg)}}
.shield-wrapper{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.shield-rotate-line{position:absolute;width:110px;height:110px;border-radius:50%}
.shield-rotate-line::before{content:'';position:absolute;inset:0;border-radius:50%;border:3px dashed var(--cyan);animation:rotateLine 8s linear infinite;box-shadow:0 0 30px var(--cyan-g),inset 0 0 30px var(--cyan-g)}
@keyframes rotateLine{to{transform:rotate(360deg)}}
.shield-glow{position:absolute;width:75px;height:75px;border-radius:50%;background:radial-gradient(circle,rgba(0,240,255,.15) 0%,rgba(0,240,255,.05) 50%,transparent 70%);display:flex;align-items:center;justify-content:center;color:#a0a0b0}
.shield-glow svg{width:36px;height:36px;filter:drop-shadow(0 0 15px rgba(0,240,255,.5));z-index:2}
.login-title{font-size:32px;font-weight:900;letter-spacing:4px;margin-bottom:6px;text-align:center;text-shadow:0 0 30px var(--cyan-g);text-transform:uppercase}
.login-title span{color:var(--cyan)}
.login-subtitle{font-size:13px;letter-spacing:6px;color:var(--mute);margin-bottom:32px;text-transform:uppercase;text-align:center}
.login-card .toggle-row,.login-card .tabs{margin-bottom:24px}
.login-card form{gap:16px}
.login-card .btn.primary{margin-top:8px;padding:18px;font-size:16px;letter-spacing:2px}
.copyright{margin-top:16px;font-size:11px;color:#444;text-transform:uppercase;letter-spacing:2px;text-align:center}
.login-card input::placeholder{text-transform:uppercase;letter-spacing:.5px;font-size:.85rem}
.login-card .alert{font-size:.8rem}
.login-wide{max-width:440px}

/* ---------- app header / drawer (user + admin mobile) ---------- */
.dashboard-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;background:var(--bg2);margin:12px;border-radius:16px}
.menu-btn{width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;background:none;border:0;padding:0}
.menu-btn span{display:block;height:2px;background:#fff;border-radius:2px}
.menu-btn span:nth-child(1),.menu-btn span:nth-child(3){width:20px} .menu-btn span:nth-child(2){width:14px}
.header-logo{width:46px;height:46px;border:2px solid var(--cyan);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px var(--cyan-g);color:var(--cyan);flex:none;overflow:hidden}
.header-logo img{width:100%;height:100%;object-fit:cover}
.page-wrap{padding:0 12px 100px}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:200;opacity:0;visibility:hidden;transition:all .3s}
.drawer-overlay.active{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;width:75%;max-width:300px;height:100vh;background:#0f0f16;z-index:201;transform:translateX(-100%);transition:transform .3s ease;overflow-y:auto;display:flex;flex-direction:column}
.drawer.active{transform:translateX(0)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid #222}
.drawer-brand{display:flex;align-items:center;gap:12px;color:var(--cyan);min-width:0}
.drawer-brand span{font-size:20px;font-weight:900;letter-spacing:2px;color:var(--cyan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-brand svg{width:28px;height:28px;flex:none}
.drawer-close{color:#fff;cursor:pointer;background:none;border:0;display:grid;place-items:center;padding:4px}
.drawer-menu{padding:12px 0;display:flex;flex-direction:column;flex:1}
.drawer-item{display:flex;align-items:center;gap:16px;padding:15px 24px;color:#fff;font-size:15px;font-weight:600;transition:.2s;cursor:pointer;border:0;border-left:3px solid transparent;background:none;width:100%;text-align:left;text-decoration:none;position:relative}
.drawer-item svg{width:22px;height:22px;flex:none}
.drawer-item:hover,.drawer-item.on{background:linear-gradient(90deg,rgba(0,240,255,.1),transparent);border-left-color:var(--cyan);color:#fff}
.drawer-item.logout{color:var(--red)}
.drawer-item.logout:hover{background:linear-gradient(90deg,rgba(255,45,85,.1),transparent);border-left-color:var(--red)}
.drawer-item .cnt{margin-left:auto;background:var(--red);color:#fff;border-radius:99px;font-size:.72rem;padding:1px 8px}
.drawer-section{padding:16px 24px 8px;font-size:13px;letter-spacing:3px;color:var(--cyan);text-transform:uppercase}
.drawer-email{padding:6px 24px;font-size:.78rem;color:var(--mute);word-break:break-all}
.fab,.tg{position:fixed;bottom:24px;right:24px;width:60px;height:60px;background:linear-gradient(135deg,#0088cc,#00aaff);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 20px rgba(0,136,204,.4);z-index:100;border:0;animation:fabPulse 2s infinite}
@keyframes fabPulse{0%,100%{box-shadow:0 4px 20px rgba(0,136,204,.4)}50%{box-shadow:0 4px 30px rgba(0,136,204,.6)}}
@media (min-width:901px){.tg{bottom:24px}}

/* ---------- user dashboard ---------- */
.balance-card{margin:0;background:var(--bg2);border-radius:20px;padding:28px 20px;text-align:center;position:relative;overflow:hidden;border:1px solid transparent;box-shadow:0 0 20px var(--red-g);--c:var(--red)}
.balance-label{font-size:13px;letter-spacing:3px;color:var(--mute);text-transform:uppercase;margin-bottom:10px}
.balance-amount{font-size:42px;font-weight:900;color:var(--red);text-shadow:0 0 20px var(--red-g);font-variant-numeric:tabular-nums;line-height:1.1}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat-card{background:var(--bg2);border-radius:20px;padding:22px 12px;text-align:center;position:relative;overflow:hidden;isolation:isolate;border:1px solid transparent}
.stat-card.cyan{box-shadow:0 0 20px var(--cyan-g);--c:var(--cyan)} .stat-card.green{box-shadow:0 0 20px var(--green-g);--c:var(--green)}
.stat-card.purple{box-shadow:0 0 20px var(--purple-g);--c:var(--purple)} .stat-card.yellow{box-shadow:0 0 20px var(--yellow-g);--c:var(--yellow)}
.stat-card::before{content:"";position:absolute;inset:0;border-radius:20px;padding:2px;pointer-events:none;z-index:-1;opacity:.5;background:linear-gradient(135deg,var(--c),transparent,var(--c));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.stat-number{font-size:32px;font-weight:900;margin-bottom:6px;font-variant-numeric:tabular-nums;line-height:1.1}
.stat-label{font-size:12px;letter-spacing:2px;color:var(--mute);text-transform:uppercase}
.stat-note{font-size:11px;color:var(--faint);margin-top:6px}
.actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.action-card{background:var(--bg2);border-radius:20px;padding:28px 12px;text-align:center;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;isolation:isolate;border:1px solid transparent;color:#fff;display:block}
.action-card:hover{transform:translateY(-4px);color:#fff}
.action-card.cyan{box-shadow:0 0 20px var(--cyan-g);--c:var(--cyan)} .action-card.red{box-shadow:0 0 20px var(--red-g);--c:var(--red)}
.action-card.green{box-shadow:0 0 20px var(--green-g);--c:var(--green)} .action-card.purple{box-shadow:0 0 20px var(--purple-g);--c:var(--purple)}
.action-card.yellow{box-shadow:0 0 20px var(--yellow-g);--c:var(--yellow)}
.action-icon{margin-bottom:12px;display:grid;place-items:center;color:var(--c)}
.action-icon svg{width:36px;height:36px}
.action-label{font-size:13px;letter-spacing:2px;color:var(--mute);text-transform:uppercase}
.profile-card{background:var(--bg2);border-radius:20px;padding:26px;text-align:center;position:relative;isolation:isolate;border:1px solid transparent;box-shadow:0 0 20px var(--purple-g);cursor:pointer;display:block;--c:var(--purple)}
.profile-card::before{content:"";position:absolute;inset:0;border-radius:20px;padding:2px;pointer-events:none;z-index:-1;opacity:.4;background:linear-gradient(135deg,var(--c),transparent,var(--c));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.profile-icon{color:var(--purple);margin-bottom:10px;display:grid;place-items:center} .profile-icon svg{width:40px;height:40px}
.profile-text{font-size:15px;letter-spacing:3px;color:var(--mute);text-transform:uppercase}
.recent-title{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.recent-title svg{color:var(--orange)}

/* ---------- admin shell (sidebar on desktop, drawer on mobile) ---------- */
.shell{background:transparent}
.side{background:#0f0f16;border-right:1px solid #222;backdrop-filter:none;padding:18px 0}
.side .brand{padding:6px 22px 18px;color:var(--cyan);font-weight:900;letter-spacing:2px;text-transform:uppercase}
.brand .logo{background:transparent;border:2px solid var(--cyan);border-radius:50%;color:var(--cyan);box-shadow:0 0 15px var(--cyan-g)}
.nav a,.nav button{border-radius:0;border-left:3px solid transparent;padding:14px 22px;color:#fff;font-weight:600}
.nav a:hover,.nav button:hover{background:linear-gradient(90deg,rgba(0,240,255,.1),transparent);color:#fff}
.nav a.on{background:linear-gradient(90deg,rgba(0,240,255,.1),transparent);border-left-color:var(--cyan);color:#fff}
.nav a.on::before{display:none}
.main{max-width:1400px}
.mhead{display:none}
@media (max-width:900px){
  .mhead{display:flex;position:sticky;top:0;z-index:60;margin:0 0 14px;background:var(--bg2);border-bottom:1px solid #222;padding:12px 16px;align-items:center;justify-content:space-between}
  .main{padding:0 0 60px}
  .main>#page{padding:0 14px}
}
@media (prefers-reduced-motion:reduce){.login-card::before{animation:none}}