:root{
  --bg-0:#2b0406; --bg-1:#5a080e; --bg-2:#7a0d13;
  --gold:#e8c874; --gold-2:#f7e3a1; --neon:#4fd8ff;
  --txt:#f4ece0; --panel:rgba(60,6,10,.66);
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;color:var(--txt);
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,90,90,.20),transparent 45%),
    radial-gradient(circle at 85% 100%,rgba(80,200,255,.14),transparent 45%),
    linear-gradient(160deg,var(--bg-1),var(--bg-0) 65%);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.15;
  background-image:
    linear-gradient(rgba(255,120,120,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,120,120,.35) 1px,transparent 1px);
  background-size:42px 42px;
}
.gsy-logo{
  width:110px;display:block;margin:0 auto 8px;
  animation:gsyFloat 3.4s ease-in-out infinite;
  filter:drop-shadow(0 0 16px rgba(232,200,116,.6));
}
@keyframes gsyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.gsy-title{text-align:center;font-weight:800;letter-spacing:3px;color:var(--gold-2);font-size:20px}
.gsy-sub{text-align:center;font-size:11px;letter-spacing:2px;color:#e9c9c9;margin-bottom:18px}
.gsy-card{
  max-width:760px;margin:0 auto;padding:22px;
  background:var(--panel);border:1px solid rgba(232,200,116,.45);
  border-radius:16px;box-shadow:0 0 40px rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
}
.gsy-btn{
  display:block;width:100%;text-align:center;padding:12px;margin-top:10px;
  border-radius:9px;font-weight:800;letter-spacing:2px;font-size:13px;
  cursor:pointer;border:1px solid;text-decoration:none;
}
.gsy-btn-gold{background:linear-gradient(180deg,#f7e3a1,#d8ab3e);color:#4a1206;border-color:#f7e3a1;box-shadow:0 0 18px rgba(232,200,116,.45)}
.gsy-btn-ghost{background:rgba(0,0,0,.25);color:var(--gold-2);border-color:rgba(232,200,116,.6)}
.gsy-btn-neon{border-color:var(--neon);color:#dff6ff;background:rgba(10,40,60,.35);box-shadow:0 0 16px rgba(79,216,255,.35)}
.gsy-fld{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(232,200,116,.35);
  border-radius:8px;padding:9px 11px;
}
.gsy-fld label{color:var(--gold-2);font-weight:700;min-width:150px;font-size:12px}
.gsy-fld input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:13px}
.badge-ok{display:inline-flex;align-items:center;gap:6px;background:rgba(20,120,60,.35);
  border:1px solid #3fd07a;color:#c8ffdd;border-radius:20px;padding:4px 10px;font-size:11px}
.qris-box{background:#fff;padding:8px;border-radius:8px;width:180px;margin:10px auto}
.qris-box img{width:100%;display:block}
.gsy-marquee{overflow:hidden;white-space:nowrap;border-top:1px solid rgba(232,200,116,.3);
  border-bottom:1px solid rgba(232,200,116,.3);margin-top:16px;padding:6px 0}
.gsy-marquee span{display:inline-block;padding-left:100%;animation:gsyRun 14s linear infinite;
  color:var(--gold-2);letter-spacing:4px;font-size:12px}
@keyframes gsyRun{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
/* ===== OVERRIDE GSY: peta kelas lama -> tema merah ===== */

.app{max-width:1100px;margin:0 auto;padding:18px}
.brand{display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;
  background:var(--panel);border:1px solid rgba(232,200,116,.45)}
.brand h1{margin:0;font-size:20px;letter-spacing:2px;color:var(--gold-2)}
.brand p{margin:3px 0 0;font-size:12px;color:#e9c9c9}
.brand-logo{width:64px;height:64px;object-fit:contain;
  animation:gsyFloat 3.4s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(232,200,116,.6))}

.btn{display:inline-block;padding:10px 16px;border-radius:9px;
  border:1px solid rgba(232,200,116,.6);background:rgba(0,0,0,.28);
  color:var(--gold-2);font-weight:700;letter-spacing:1px;text-decoration:none;
  cursor:pointer;font-size:13px}
.btn:hover{background:rgba(232,200,116,.18)}
.btn:not(.ghost){background:linear-gradient(180deg,#f7e3a1,#d8ab3e);color:#4a1206;border-color:#f7e3a1}
.btn.block{display:block;width:100%;text-align:center;margin-top:10px}
.btn.ghost{background:transparent}
.btn.sm{padding:7px 12px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.pill{display:inline-block;padding:4px 10px;border-radius:20px;font-size:11px;
  background:rgba(79,216,255,.16);border:1px solid rgba(79,216,255,.5);color:#dff6ff}
.pill.admin{background:rgba(232,200,116,.18);border-color:rgba(232,200,116,.6);color:var(--gold-2)}

.panel{background:var(--panel);border:1px solid rgba(232,200,116,.4);border-radius:14px;padding:16px}
.panel.side{margin-top:14px}
.panel h2{font-size:14px;letter-spacing:2px;color:var(--gold-2);margin:0 0 10px}

.drop{border:2px dashed rgba(232,200,116,.55);border-radius:12px;padding:20px;
  text-align:center;color:#f0e0d0;font-size:12.5px;line-height:1.7;
  background:rgba(0,0,0,.18);cursor:pointer}
.drop:hover{border-color:var(--gold-2);background:rgba(232,200,116,.08)}
.drop b{color:var(--gold-2)}

.notice{margin:10px 0;padding:10px 12px;border-radius:9px;font-size:12.5px;
  background:rgba(79,216,255,.12);border:1px solid rgba(79,216,255,.45);color:#dff6ff}
.notice a{color:var(--gold-2)}

.docs{display:flex;flex-direction:column;gap:8px}
.docs .doc,.docs li,.docs>div{background:rgba(0,0,0,.22);
  border:1px solid rgba(232,200,116,.28);border-radius:9px;padding:9px 11px;
  font-size:12.5px;color:#f2e8dc}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  padding:10px 16px;border-radius:9px;font-size:13px;opacity:0;transition:.25s;
  background:rgba(20,120,60,.9);border:1px solid #3fd07a;color:#e9ffef;z-index:9999}
.toast.show{opacity:1}
.toast.err{background:rgba(140,20,20,.92);border-color:#ff7a7a;color:#ffecec}

input,select,textarea{width:100%;padding:11px;margin-bottom:10px;border-radius:9px;
  background:rgba(255,255,255,.07);border:1px solid rgba(232,200,116,.4);
  color:#fff;font-size:13px;outline:0}
input:focus,textarea:focus{border-color:var(--gold-2)}
input::placeholder{color:#d8c8bc}
label{display:block;font-size:12px;color:var(--gold-2);margin-bottom:5px;font-weight:700}
.auth-foot{margin-top:14px;text-align:center;font-size:12.5px}
.auth-foot a{color:var(--gold-2)}
/* ===== OVERRIDE 2: admin, auth, gate — tema merah GSY ===== */

/* ---- AUTH / LOGIN ---- */
.auth-body,body.auth-body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 0%,#5c1010 0%,#280607 55%,#140303 100%) !important;
  font-family:ui-monospace,"Courier New",monospace;color:#f6e6dc}
.auth-card{width:340px;max-width:92vw;padding:26px 22px;border-radius:16px;
  background:linear-gradient(180deg,rgba(42,8,8,.97),rgba(18,4,4,.97));
  border:1px solid rgba(232,200,116,.5);
  box-shadow:0 18px 50px rgba(0,0,0,.7)}
.auth-brand{text-align:center;margin-bottom:14px}
.auth-note{font-size:11.5px;color:#e9b9b9;text-align:center;margin-top:10px;line-height:1.6}

/* ---- BRAND & JUDUL ---- */
.gsy-title{text-align:center;font-size:15px;letter-spacing:3px;
  color:var(--gold-2,#e8c874);font-weight:800;margin-top:6px}
.gsy-sub{text-align:center;font-size:10.5px;letter-spacing:3px;
  color:#e9a9a9;margin-bottom:14px}
.logo{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(180deg,#f7e3a1,#d8ab3e);
  color:#4a1206;font-weight:800;font-size:18px}
.brand.small h1{font-size:15px}

/* ---- ADMIN SHELL ---- */
.admin-body{background:#1b0505 !important;color:#f6e6dc;margin:0;
  font-family:ui-monospace,"Courier New",monospace}
.admin-top{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:rgba(0,0,0,.45);
  border-bottom:1px solid rgba(232,200,116,.45);position:sticky;top:0;z-index:50}
.admin-top-right{display:flex;align-items:center;gap:10px}
.admin-main{max-width:1100px;margin:0 auto;padding:18px}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---- TABS ---- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 0}
.tab{padding:8px 14px;font-size:12.5px;cursor:pointer;border-radius:9px 9px 0 0;
  background:rgba(0,0,0,.35);border:1px solid rgba(232,200,116,.3);
  border-bottom:0;color:#e9c9c9}
.tab:hover{background:rgba(232,200,116,.12)}
.tab.active{background:linear-gradient(180deg,#f7e3a1,#d8ab3e);color:#4a1206;font-weight:700}
.card{background:rgba(0,0,0,.28);border:1px solid rgba(232,200,116,.35);
  border-radius:14px;padding:16px}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ---- PANEL DATA ---- */
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:12.5px}
.kv b{color:var(--gold-2,#e8c874)}
.audit{background:rgba(0,0,0,.32);border:1px solid rgba(232,200,116,.25);
  border-radius:9px;padding:10px;font-size:12px;line-height:1.7;
  max-height:280px;overflow:auto;color:#f2e2d8}
.status{font-size:12px;color:#e9c9c9}
.switches{display:flex;flex-wrap:wrap;gap:10px}
.switches label{display:flex;align-items:center;gap:7px;margin:0;
  padding:8px 12px;border-radius:9px;background:rgba(0,0,0,.3);
  border:1px solid rgba(232,200,116,.3);cursor:pointer}
.switches input[type=checkbox]{width:auto;margin:0;accent-color:#d8ab3e}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld{display:flex;flex-direction:column}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.row-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.warn-box{margin:10px 0;padding:10px 12px;border-radius:9px;font-size:12.5px;
  background:rgba(255,180,60,.12);border:1px solid rgba(255,180,60,.5);color:#ffe6b8}

/* ---- QRIS & BADGE ---- */
.qris-card{text-align:center;padding:16px;border-radius:14px;margin:14px 0;
  background:rgba(0,0,0,.35);border:1px solid rgba(232,200,116,.45)}
.qris-card h2{color:var(--gold-2,#e8c874);letter-spacing:2px}
.qris-card img{display:block;width:190px;max-width:80%;margin:8px auto 0;
  border-radius:10px;background:#fff;padding:8px}
.badge,.badge-ok{display:inline-block;padding:3px 9px;border-radius:20px;
  font-size:11px;font-weight:700}
.badge-ok{background:rgba(63,208,122,.18);border:1px solid #3fd07a;color:#b7ffcf}

/* ---- MARQUEE ---- */
.gsy-marquee{overflow:hidden;white-space:nowrap;margin-top:14px;padding:6px 0;
  background:rgba(0,0,0,.3);border-top:1px solid rgba(232,200,116,.35);
  border-bottom:1px solid rgba(232,200,116,.35)}
.gsy-marquee span{display:inline-block;min-width:100%;padding-left:100%;
  animation:gsyScroll 18s linear infinite;
  color:var(--gold-2,#e8c874);font-size:11.5px;letter-spacing:2px}
@keyframes gsyScroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* ---- CHAT ---- */
.chat-head{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:10px;border-bottom:1px solid rgba(232,200,116,.3)}
.messages{display:flex;flex-direction:column;gap:10px;max-height:52vh;
  overflow-y:auto;padding:12px 0}
.msg{max-width:82%;padding:10px 13px;border-radius:12px;font-size:13px;line-height:1.6}
.msg.bot{align-self:flex-start;background:rgba(0,0,0,.35);
  border:1px solid rgba(232,200,116,.3)}
.composer{display:flex;gap:8px;margin-top:10px}
.composer input{margin:0}
.who{font-size:11px;color:#e9c9c9}
.dot{width:8px;height:8px;border-radius:50%;background:#3fd07a;
  display:inline-block;margin-right:6px}
.empty{text-align:center;color:#d8b8b8;font-size:12.5px;padding:24px}
.muted{color:#d8b8b8;font-size:12px}

/* ---- GATE app-web-tim (netralkan inline biru/hitam) ---- */
html,body{background:#250607 !important}
div[style*="#0f172a"]{background:rgba(30,6,6,.96) !important;
  border-color:rgba(232,200,116,.5) !important}
div[style*="#030712"]{background:transparent !important}
button[style*="#f59e0b"]{background:linear-gradient(180deg,#f7e3a1,#d8ab3e) !important;
  color:#4a1206 !important;border:0 !important}
button[style*="#38bdf8"]{background:linear-gradient(180deg,#e9b7b7,#b45a5a) !important;
  color:#fff !important;border:0 !important}
button[style*="#0284c7"]{background:linear-gradient(180deg,#e9b7b7,#b45a5a) !important;
  color:#fff !important;border:0 !important}
button[style*="#0369a1"]{background:linear-gradient(180deg,#f7e3a1,#d8ab3e) !important;
  color:#4a1206 !important;border:0 !important}
input[style*="#020617"]{background:#1b0404 !important;
  border-color:rgba(232,200,116,.4) !important;color:#ffe9c9 !important}
a[style*="#0b63f6"]{background:#8a1f1f !important;
  box-shadow:0 6px 20px rgba(180,40,40,.5) !important}