@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --g1:#0d2b1e; --g2:#164430; --g3:#1e6b49; --g4:#2ea06e; --g5:#52c98f;
  --g6:#a8e6c9; --g7:#e0f7ed;
  --gold:#c9a84c; --gold2:#f0d080; --gold3:#fef3d0;
  --blue:#2563eb; --blue-l:#eff6ff;
  --cream:#faf7f2; --red:#e05555; --red-l:#fdf0f0;
  --shadow:0 2px 16px rgba(13,43,30,0.10);
  --radius:16px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;-webkit-tap-highlight-color:transparent;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--cream);color:var(--g1);min-height:100vh;overflow-x:hidden;}

/* ── SPLASH ── */
#splash{position:fixed;inset:0;background:linear-gradient(160deg,var(--g1),var(--g2));
  display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .5s;}
#splash.hidden{opacity:0;pointer-events:none;}
.splash-inner{text-align:center;color:#fff;}
.splash-icon{font-size:64px;margin-bottom:16px;animation:bounce 1.2s ease infinite;}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.splash-inner h1{font-family:'Amiri',serif;font-size:1.8rem;margin-bottom:24px;}
.splash-loader{width:200px;height:4px;background:rgba(255,255,255,.15);border-radius:4px;overflow:hidden;margin:0 auto 12px;}
.loader-bar{height:100%;background:linear-gradient(90deg,var(--gold),var(--g5));border-radius:4px;animation:loadbar 2s ease-in-out infinite;}
@keyframes loadbar{0%{width:0%}60%{width:100%}100%{width:100%}}
#splash-msg{font-size:.83rem;color:rgba(255,255,255,.5);}

/* ── SCREENS ── */
.screen{display:none;min-height:100vh;flex-direction:column;}
.screen.active{display:flex;}

/* ── LOGIN ── */
#screen-login{background:linear-gradient(160deg,var(--g1) 0%,var(--g2) 50%,#0a3d28 100%);
  align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden;}
.login-bg{position:absolute;inset:0;pointer-events:none;}
.login-orb{position:absolute;border-radius:50%;}
.orb1{width:500px;height:500px;background:radial-gradient(circle,rgba(46,160,110,.12),transparent 70%);top:-150px;right:-150px;}
.orb2{width:350px;height:350px;background:radial-gradient(circle,rgba(201,168,76,.08),transparent 70%);bottom:-80px;left:-80px;}

.login-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:24px;padding:36px 32px;width:100%;max-width:400px;position:relative;z-index:1;
  animation:fadeUp .5s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.login-logo{text-align:center;margin-bottom:24px;}
.login-icon{width:70px;height:70px;background:linear-gradient(135deg,var(--g3),var(--g4));
  border-radius:20px;display:inline-flex;align-items:center;justify-content:center;
  font-size:32px;box-shadow:0 8px 24px rgba(46,160,110,.4);margin-bottom:12px;}
.login-logo h1{font-family:'Amiri',serif;font-size:1.6rem;color:#fff;}
.login-logo p{color:rgba(255,255,255,.5);font-size:.82rem;margin-top:3px;}
.gold-line{width:50px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:12px auto 0;}

.role-tabs{display:flex;background:rgba(0,0,0,.25);border-radius:12px;padding:4px;margin-bottom:22px;gap:4px;}
.role-tab{flex:1;padding:9px;border-radius:9px;border:none;background:transparent;
  color:rgba(255,255,255,.5);font-family:'Plus Jakarta Sans',sans-serif;font-size:.84rem;font-weight:600;cursor:pointer;transition:all .2s;}
.role-tab.active{background:linear-gradient(135deg,var(--g3),var(--g4));color:#fff;box-shadow:0 3px 12px rgba(46,160,110,.4);}

.lgroup{margin-bottom:15px;}
.lgroup label{display:block;color:rgba(255,255,255,.6);font-size:.76rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;}
.linput-wrap{position:relative;}
.lic{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.5;}
.linput{width:100%;padding:11px 13px 11px 38px;background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.12);border-radius:11px;color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.93rem;outline:none;transition:all .2s;appearance:none;}
.linput:focus{border-color:var(--g5);background:rgba(255,255,255,.10);}
.linput::placeholder{color:rgba(255,255,255,.22);}
.lselect option{color:#111;background:#fff;}
.hint{font-size:.72rem;color:rgba(255,255,255,.28);text-align:right;margin-bottom:2px;}
.lerror{background:rgba(224,85,85,.15);border:1px solid rgba(224,85,85,.3);color:#ff9999;
  border-radius:10px;padding:9px 13px;font-size:.82rem;margin-top:8px;display:none;text-align:center;}
.btn-login{width:100%;padding:13px;background:linear-gradient(135deg,var(--gold),#e8c25a);
  border:none;border-radius:13px;color:var(--g1);font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1rem;font-weight:700;cursor:pointer;margin-top:10px;transition:all .22s;
  box-shadow:0 4px 18px rgba(201,168,76,.35);display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-login:hover{transform:translateY(-2px);}

/* ── TOPBAR ── */
.topbar{background:linear-gradient(135deg,var(--g1),var(--g2));padding:0 16px;display:flex;
  align-items:center;justify-content:space-between;height:56px;flex-shrink:0;
  box-shadow:0 2px 12px rgba(13,43,30,.3);}
.topbar-brand{display:flex;align-items:center;gap:9px;color:#fff;}
.ticon{width:34px;height:34px;background:linear-gradient(135deg,var(--g3),var(--g4));
  border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;}
.topbar-brand span{font-family:'Amiri',serif;font-size:1.1rem;font-weight:700;}
.topbar-r{display:flex;align-items:center;gap:8px;}
.topbar-user{color:rgba(255,255,255,.7);font-size:.75rem;text-align:right;display:none;}
.topbar-user strong{display:block;color:#fff;font-size:.82rem;}
@media(min-width:480px){.topbar-user{display:block;}}
.btn-logout{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.75);border-radius:8px;padding:6px 12px;font-size:.76rem;
  cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .2s;white-space:nowrap;}
.btn-logout:hover{background:rgba(224,85,85,.2);color:#ffaaaa;}

/* ── TABS ── */
.apptabs{background:var(--g2);display:flex;border-bottom:2px solid var(--gold);flex-shrink:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.apptabs::-webkit-scrollbar{display:none;}
.apptab{padding:11px 14px;color:rgba(255,255,255,.5);font-size:.8rem;font-weight:600;cursor:pointer;
  border:none;background:none;font-family:'Plus Jakarta Sans',sans-serif;transition:all .2s;
  border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;flex-shrink:0;}
.apptab.active{color:var(--gold);border-bottom-color:var(--gold);background:rgba(201,168,76,.08);}
.apptab:hover:not(.active){color:#fff;}

.appcontent{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch;}
.tabpanel{display:none;max-width:700px;margin:0 auto;}
.tabpanel.active{display:block;}

/* ── WELCOME ── */
.welcome-banner{background:linear-gradient(135deg,var(--g3),var(--g4));color:#fff;
  border-radius:var(--radius);padding:20px;display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;box-shadow:0 4px 20px rgba(30,107,73,.3);}
.wb-title{font-size:1.05rem;font-weight:700;}
.wb-sub{font-size:.8rem;opacity:.8;margin-top:3px;}
.wb-icon{font-size:2.5rem;}

/* ── STATS ── */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;}
@media(min-width:480px){.stats-grid{grid-template-columns:repeat(4,1fr);}}
.statcard{background:#fff;border-radius:14px;padding:14px 12px;text-align:center;
  box-shadow:var(--shadow);border-top:3px solid var(--g4);}
.statcard.green{border-top-color:var(--g4);}
.statcard.gold{border-top-color:var(--gold);}
.statcard.blue{border-top-color:var(--blue);}
.stat-icon{font-size:1.4rem;margin-bottom:4px;}
.statnum{font-size:1.8rem;font-weight:800;color:var(--g1);line-height:1;}
.statcard.gold .statnum{color:#a07020;}
.statcard.blue .statnum{color:var(--blue);}
.statlbl{font-size:.7rem;color:#aaa;margin-top:3px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;}

/* ── CARD ── */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:14px;border:1px solid rgba(30,107,73,.07);}
.card-hd{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.card-ico{width:34px;height:34px;border-radius:10px;background:var(--g7);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.card-t{font-size:.95rem;font-weight:700;color:var(--g1);}
.card-sub{font-size:.73rem;color:#999;margin-top:1px;}

/* ── BUTTONS ── */
.btn{padding:9px 18px;border-radius:10px;border:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.86rem;font-weight:700;transition:all .2s;display:inline-flex;align-items:center;gap:5px;touch-action:manipulation;}
.btn-g{background:linear-gradient(135deg,var(--g3),var(--g4));color:#fff;box-shadow:0 3px 12px rgba(30,107,73,.3);}
.btn-g:hover{transform:translateY(-1px);}
.btn-gd{background:linear-gradient(135deg,var(--gold),#e0c060);color:var(--g1);}
.btn-r{background:var(--red);color:#fff;}
.btn-gh{background:var(--g7);color:var(--g2);border:1.5px solid var(--g6);}
.btn-sm{padding:7px 13px;font-size:.76rem;border-radius:8px;}
.mfull{width:100%;justify-content:center;}

/* ── FORM ── */
.frow{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.frow .fg{flex:1;min-width:140px;}
.filter-row{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.filter-row .fg{flex:1;min-width:130px;}
.fg label{display:block;font-size:.75rem;font-weight:700;color:var(--g2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px;}
.fc{width:100%;padding:9px 13px;border:1.5px solid #d8eee4;border-radius:10px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;color:var(--g1);background:var(--cream);outline:none;transition:all .2s;}
.fc:focus{border-color:var(--g4);background:#fff;box-shadow:0 0 0 3px rgba(46,160,110,.1);}
textarea.fc{resize:vertical;}

/* ── TABLE ── */
.twrap{overflow-x:auto;border-radius:10px;border:1px solid #eaf5f0;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:.82rem;}
thead th{background:var(--g1);color:var(--gold2);padding:10px 12px;text-align:left;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;}
thead th:first-child{border-radius:10px 0 0 0;}thead th:last-child{border-radius:0 10px 0 0;}
tbody tr:nth-child(even){background:#f6fbf8;}tbody tr:hover{background:var(--g7);}
tbody td{padding:9px 12px;border-bottom:1px solid #eef7f2;vertical-align:middle;}

/* ── BADGE ── */
.badge{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:20px;font-size:.72rem;font-weight:700;}
.bg{background:var(--g7);color:var(--g3);}
.bgd{background:var(--gold3);color:#8a6010;}
.bb{background:var(--blue-l);color:var(--blue);}

/* ── SCANNER ── */
#reader-container{border-radius:14px;overflow:hidden;background:#0a1a0f;min-height:240px;position:relative;}
#reader{width:100%;}
#reader video{border-radius:0!important;}
.scan-corner{position:absolute;width:22px;height:22px;z-index:10;}
.scan-corner.tl{top:12px;left:12px;border-top:3px solid var(--gold);border-left:3px solid var(--gold);border-radius:4px 0 0 0;}
.scan-corner.tr{top:12px;right:12px;border-top:3px solid var(--gold);border-right:3px solid var(--gold);border-radius:0 4px 0 0;}
.scan-corner.bl{bottom:12px;left:12px;border-bottom:3px solid var(--gold);border-left:3px solid var(--gold);border-radius:0 0 0 4px;}
.scan-corner.br{bottom:12px;right:12px;border-bottom:3px solid var(--gold);border-right:3px solid var(--gold);border-radius:0 0 4px 0;}
.scan-line{position:absolute;left:12px;right:12px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
  z-index:10;animation:scanMove 2s ease-in-out infinite;display:none;}
@keyframes scanMove{0%{top:12px}100%{top:calc(100% - 12px)}}
.sstatus{padding:11px 14px;border-radius:11px;font-size:.86rem;font-weight:600;margin-top:10px;display:flex;align-items:center;gap:7px;}
.s-idle{background:var(--gold3);color:#7a5510;}
.s-scan{background:var(--g7);color:var(--g2);}
.s-ok{background:#e8f8f0;color:var(--g3);border:1px solid var(--g6);}
.s-warn{background:#fff8e8;color:#9a7010;}
.s-err{background:var(--red-l);color:var(--red);}
.scan-btns{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}

/* ── QR ── */
.qrwrap{background:#fff;border-radius:14px;padding:16px;border:2px solid var(--gold);
  box-shadow:0 4px 20px rgba(201,168,76,.15);display:flex;justify-content:center;
  margin:14px auto;max-width:220px;}
.qr-label{font-size:.73rem;color:#aaa;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
.qr-uname{font-family:'Amiri',serif;font-size:1.35rem;color:var(--g1);font-weight:700;}
.qr-uid{font-size:.7rem;color:#ccc;letter-spacing:1px;font-family:monospace;margin-top:2px;}
.qr-hint{font-size:.78rem;color:#bbb;margin-bottom:12px;}

/* ── ANGGOTA ITEM ── */
.aitem{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:11px;
  background:var(--cream);margin-bottom:7px;border:1px solid #e8f5ee;transition:border-color .2s;}
.aitem:hover{border-color:var(--g6);}
.aavatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--g6),var(--g7));
  display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.ainfo{flex:1;min-width:0;}
.aname{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ameta{font-size:.73rem;color:#999;margin-top:1px;font-family:monospace;}

/* ── JADWAL ── */
.jitem{padding:14px;border-radius:12px;background:var(--cream);margin-bottom:10px;border:1px solid #e8f5ee;position:relative;}
.jitem-title{font-weight:700;font-size:.92rem;color:var(--g1);}
.jitem-meta{font-size:.78rem;color:#888;margin-top:4px;display:flex;flex-wrap:wrap;gap:8px;}
.jitem-meta span{display:flex;align-items:center;gap:3px;}
.jitem-ket{font-size:.8rem;color:#aaa;margin-top:6px;font-style:italic;}
.jitem-del{position:absolute;top:12px;right:12px;}
.jadwal-next{background:linear-gradient(135deg,var(--g3),var(--g4));border:none;color:#fff;}
.jn-label{font-size:.73rem;opacity:.8;text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;}
.jn-title{font-size:1.1rem;font-weight:700;margin-bottom:4px;}
.jn-meta{font-size:.82rem;opacity:.85;}

/* ── EMPTY ── */
.empty{text-align:center;padding:30px 16px;color:#ccc;}
.empty .ei{font-size:3rem;margin-bottom:8px;}
.empty p{font-size:.85rem;}

/* ── MODAL ── */
.mbg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;align-items:center;justify-content:center;padding:16px;}
.mbg.open{display:flex;}
.mbox{background:#fff;border-radius:20px;padding:24px;max-width:380px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.25);animation:modalIn .25s ease both;}
@keyframes modalIn{from{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:none}}
.msicon{width:60px;height:60px;background:linear-gradient(135deg,var(--g3),var(--g5));
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;
  margin:0 auto 14px;box-shadow:0 8px 24px rgba(30,107,73,.3);}
.mtitle{font-size:1.1rem;font-weight:800;color:var(--g1);text-align:center;margin-bottom:10px;}
.mdata{background:var(--g7);border-radius:11px;padding:12px;margin:12px 0;font-size:.88rem;}
.mrow{display:flex;justify-content:space-between;padding:3px 0;color:var(--g2);}
.mrow strong{color:var(--g1);}

/* ── PROW ── */
.prow{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;font-size:.86rem;}
.prow:last-child{border:none;}

/* ── TOAST ── */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--g1);color:#fff;padding:10px 20px;border-radius:30px;font-size:.84rem;font-weight:600;
  opacity:0;transition:all .3s;z-index:1000;white-space:nowrap;pointer-events:none;max-width:90vw;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── SPINNER ── */
.spinner{width:18px;height:18px;border:2px solid rgba(0,0,0,.15);border-top-color:var(--g1);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── REALTIME INDICATOR ── */
.live-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;display:inline-block;
  box-shadow:0 0 0 0 rgba(34,197,94,.4);animation:livePulse 1.5s infinite;}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.4)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ── NOTIF ── */
.notif-item{padding:10px 12px;border-radius:10px;background:#fffbeb;border:1px solid #fde68a;margin-bottom:8px;font-size:.84rem;}
.notif-item strong{color:var(--g1);}
.notif-time{font-size:.72rem;color:#aaa;margin-top:3px;}

@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-7px)}80%{transform:translateX(7px)}}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:var(--g6);border-radius:10px;}

/* Extra classes for PHP version */
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;}
@media(min-width:480px){.sgrid{grid-template-columns:repeat(4,1fr);}}
.sc{background:#fff;border-radius:14px;padding:14px 12px;text-align:center;box-shadow:var(--shadow);border-top:3px solid var(--g4);}
.sc.g{border-top-color:var(--g4);}.sc.au{border-top-color:var(--gold);}.sc.bl{border-top-color:#2563eb;}
.si{font-size:1.4rem;margin-bottom:4px;}.sn{font-size:1.8rem;font-weight:800;color:var(--g1);line-height:1;}
.sc.au .sn{color:#a07020;}.sc.bl .sn{color:#2563eb;}
.sl{font-size:.7rem;color:#aaa;margin-top:3px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
.ch{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.ci{width:34px;height:34px;border-radius:10px;background:var(--g7);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.ct{font-size:.95rem;font-weight:700;color:var(--g1);}.cs{font-size:.73rem;color:#999;margin-top:1px;}
.aitem{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:11px;background:var(--cream);margin-bottom:7px;border:1px solid #e8f5ee;transition:border-color .2s;}
.aitem:hover{border-color:var(--g6);}
.aav{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--g6),var(--g7));display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.ain{flex:1;min-width:0;}.an{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.am{font-size:.73rem;color:#999;margin-top:1px;font-family:monospace;}
.bdg{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:20px;font-size:.72rem;font-weight:700;}
.bg{background:var(--g7);color:var(--g3);}.bgd{background:var(--gold3);color:#8a6010;}.bgh{background:var(--g7);color:var(--g2);border:1.5px solid var(--g6);}
.prow{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;font-size:.86rem;}
.prow:last-child{border:none;}
.jitem{padding:14px;border-radius:12px;background:var(--cream);margin-bottom:10px;border:1px solid #e8f5ee;position:relative;}
.jit{font-weight:700;font-size:.92rem;color:var(--g1);}
.jim{font-size:.78rem;color:#888;margin-top:4px;display:flex;flex-wrap:wrap;gap:8px;}
.jim span{display:flex;align-items:center;gap:3px;}
.jik{font-size:.8rem;color:#aaa;margin-top:6px;font-style:italic;}
.jnext{background:linear-gradient(135deg,var(--g3),var(--g4));border:none;color:#fff;}
.jnl{font-size:.73rem;opacity:.8;text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;}
.jnt{font-size:1.1rem;font-weight:700;margin-bottom:4px;}.jnm{font-size:.82rem;opacity:.85;}
.nitem{padding:10px 12px;border-radius:10px;background:#fffbeb;border:1px solid #fde68a;margin-bottom:8px;font-size:.84rem;}
.ntime{font-size:.72rem;color:#aaa;margin-top:3px;}
.qlbl{font-size:.73rem;color:#aaa;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
.quname{font-family:'Amiri',serif;font-size:1.35rem;color:var(--g1);font-weight:700;}
.quid{font-size:.7rem;color:#ccc;letter-spacing:.5px;font-family:monospace;margin-top:2px;}
.qhint{font-size:.78rem;color:#bbb;margin-bottom:12px;}
.qrwrap{background:#fff;border-radius:14px;padding:16px;border:2px solid var(--gold);box-shadow:0 4px 20px rgba(201,168,76,.15);display:flex;justify-content:center;margin:14px auto;max-width:220px;}
.welcome{background:linear-gradient(135deg,var(--g3),var(--g4));color:#fff;border-radius:16px;padding:20px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;box-shadow:0 4px 20px rgba(30,107,73,.3);}
.wt{font-size:1.05rem;font-weight:700;}.ws{font-size:.8rem;opacity:.8;margin-top:3px;}
.tabs{background:var(--g2);display:flex;border-bottom:2px solid var(--gold);flex-shrink:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{padding:11px 14px;color:rgba(255,255,255,.5);font-size:.8rem;font-weight:600;cursor:pointer;border:none;background:none;font-family:'Plus Jakarta Sans',sans-serif;transition:all .2s;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;flex-shrink:0;}
.tab.active{color:var(--gold);border-bottom-color:var(--gold);background:rgba(201,168,76,.08);}
.tab:hover:not(.active){color:#fff;}
.tb-brand{display:flex;align-items:center;gap:9px;color:#fff;}
.tb-r{display:flex;align-items:center;gap:8px;}
.tb-user{color:rgba(255,255,255,.7);font-size:.75rem;text-align:right;display:none;}
.tb-user strong{display:block;color:#fff;font-size:.82rem;}
@media(min-width:480px){.tb-user{display:block;}}
.btn-out{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.75);border-radius:8px;padding:6px 12px;font-size:.76rem;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .2s;white-space:nowrap;}
.btn-out:hover{background:rgba(224,85,85,.2);color:#ffaaaa;}
.content{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch;}
.panel{display:none;max-width:700px;margin:0 auto;}.panel.active{display:block;}
.rtab{flex:1;padding:9px;border-radius:9px;border:none;background:transparent;color:rgba(255,255,255,.5);font-family:'Plus Jakarta Sans',sans-serif;font-size:.84rem;font-weight:600;cursor:pointer;transition:all .2s;}
.rtab.active{background:linear-gradient(135deg,var(--g3),var(--g4));color:#fff;box-shadow:0 3px 12px rgba(46,160,110,.4);}
.lg{margin-bottom:15px;}.lg label{display:block;color:rgba(255,255,255,.6);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;}
.liw{position:relative;}.lic{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.5;}
.li{width:100%;padding:11px 13px 11px 38px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);border-radius:11px;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:.93rem;outline:none;transition:all .2s;appearance:none;}
.li:focus{border-color:var(--g5);background:rgba(255,255,255,.10);}.li::placeholder{color:rgba(255,255,255,.22);}
.lsel option{color:#111;background:#fff;}
.lerr{background:rgba(224,85,85,.15);border:1px solid rgba(224,85,85,.3);color:#ff9999;border-radius:10px;padding:9px 13px;font-size:.82rem;margin-top:8px;display:none;text-align:center;}
.hint{font-size:.72rem;color:rgba(255,255,255,.28);text-align:right;margin-bottom:2px;}
.ss{padding:11px 14px;border-radius:11px;font-size:.86rem;font-weight:600;margin-top:10px;display:flex;align-items:center;gap:7px;}
.s-idle{background:var(--gold3);color:#7a5510;}.s-scan{background:var(--g7);color:var(--g2);}
.s-ok{background:#e8f8f0;color:var(--g3);border:1px solid var(--g6);}.s-warn{background:#fff8e8;color:#9a7010;}.s-err{background:var(--red-l);color:var(--red);}
#reader-wrap{border-radius:14px;overflow:hidden;background:#0a1a0f;min-height:240px;position:relative;}
#reader{width:100%;}
.sc-c{position:absolute;width:22px;height:22px;z-index:10;}
.sc-c.tl{top:12px;left:12px;border-top:3px solid var(--gold);border-left:3px solid var(--gold);border-radius:4px 0 0 0;}
.sc-c.tr{top:12px;right:12px;border-top:3px solid var(--gold);border-right:3px solid var(--gold);border-radius:0 4px 0 0;}
.sc-c.bl{bottom:12px;left:12px;border-bottom:3px solid var(--gold);border-left:3px solid var(--gold);border-radius:0 0 0 4px;}
.sc-c.br{bottom:12px;right:12px;border-bottom:3px solid var(--gold);border-right:3px solid var(--gold);border-radius:0 0 4px 0;}
.sc-line{position:absolute;left:12px;right:12px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);z-index:10;animation:scanMove 2s ease-in-out infinite;display:none;}
.twrap{overflow-x:auto;border-radius:10px;border:1px solid #eaf5f0;-webkit-overflow-scrolling:touch;}
.frow{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;}.frow .fg{flex:1;min-width:140px;}
.fg label{display:block;font-size:.75rem;font-weight:700;color:var(--g2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px;}
.msico{width:60px;height:60px;background:linear-gradient(135deg,var(--g3),var(--g5));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;box-shadow:0 8px 24px rgba(30,107,73,.3);}
.mt{font-size:1.1rem;font-weight:800;color:var(--g1);text-align:center;margin-bottom:10px;}
.md{background:var(--g7);border-radius:11px;padding:12px;margin:12px 0;font-size:.88rem;}
.mrow{display:flex;justify-content:space-between;padding:3px 0;color:var(--g2);}.mrow strong{color:var(--g1);}
.splash-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--g5));border-radius:4px;animation:loadbar 2s ease-in-out infinite;}