:root {
  --gold:#c9a84c;--gold-light:#f0d080;--gold-dark:#8a6a1a;
  --red:#8b1a1a;--red-bright:#c0392b;
  --bg:#010e1c;--bg2:#031828;--bg3:#062035;
  --text:#e8d8b0;--text-dim:#9a8060;
  --orange:#e87c1e;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'Crimson Text',serif;min-height:100vh;overflow-x:hidden;}

.bg-layer{position:fixed;inset:0;z-index:0;background-color:var(--bg);background-size:cover;background-position:center;}
/* Paksa background biru — override data gelap dari Firebase */
html, body { background-color: var(--bg) !important; }
.bg-overlay{display:none;}
.noise{display:none;}

.topbar{position:fixed;top:0;left:0;right:0;z-index:100;height:52px;background:rgba(1,14,28,.94);border-bottom:1px solid rgba(201,168,76,.15);backdrop-filter:blur(12px);display:flex;align-items:center;padding:0 16px;gap:12px;}
.hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border-radius:4px;transition:background .2s;}
.hamburger:hover{background:rgba(201,168,76,.1);}
.hamburger span{display:block;width:22px;height:2px;background:var(--gold);border-radius:2px;transition:all .3s;}
.topbar-title{font-family:'Cinzel',serif;font-size:12px;letter-spacing:3px;color:var(--gold);flex:1;text-align:center;}
.topbar-actions{display:flex;align-items:center;gap:12px;}
.lang-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; font-family: 'Cinzel', serif; font-size: 11px; color: var(--text-dim); background: var(--bg2); border: 1px solid rgba(201,168,76,0.2); padding: 4px 8px; border-radius: 4px; transition: all 0.3s ease; user-select: none; }
.lang-toggle:hover { background: var(--bg3); border-color: rgba(201,168,76,0.4); }
.lang-toggle span { transition: color 0.3s ease; }
.lang-toggle span.active { color: var(--gold-light); font-weight: bold; }
.lang-sep { opacity: 0.5; font-size: 10px; }
.cs-btn{display:flex;align-items:center;gap:6px;background:rgba(232,124,30,.12);border:1px solid rgba(232,124,30,.35);border-radius:999px;padding:5px 12px;font-family:'Cinzel',serif;font-size:9px;letter-spacing:1.5px;color:var(--orange);cursor:pointer;transition:all .25s;white-space:nowrap;}
.cs-btn:hover{background:rgba(232,124,30,.22);border-color:rgba(232,124,30,.6);}
.login-btn{display:flex;align-items:center;gap:6px;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.3);border-radius:999px;padding:5px 12px;font-family:'Cinzel',serif;font-size:9px;letter-spacing:1.5px;color:var(--gold);cursor:pointer;transition:all .25s;white-space:nowrap;}
.login-btn:hover{background:rgba(201,168,76,.2);}
.user-avatar{width:28px;height:28px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;}
.user-name-small{font-family:'Cinzel',serif;font-size:9px;color:var(--gold);letter-spacing:1px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── TOPBAR AUTH UI ── */
.tb-login-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--bg2);
  border:1px solid rgba(201,168,76,.4);
  border-radius:999px;padding:6px 14px 6px 9px;
  font-family:'Cinzel',serif;font-size:9px;letter-spacing:1.8px;
  color:var(--gold-light);cursor:pointer;
  transition:all .3s ease;white-space:nowrap;
  box-shadow:0 0 12px rgba(201,168,76,.08), inset 0 0 0 0 rgba(201,168,76,.06);
  position:relative;overflow:hidden;
  backdrop-filter:blur(8px);
}
.tb-login-btn::before{
  content:'';position:absolute;inset:0;border-radius:999px;
  background:linear-gradient(110deg,rgba(201,168,76,.1) 0%,transparent 60%);
  opacity:0;transition:opacity .3s;
}
.tb-login-btn::after{
  content:'';position:absolute;inset:0;border-radius:999px;
  background:conic-gradient(from 180deg at 50% 50%,rgba(201,168,76,.08) 0deg,transparent 60deg,rgba(201,168,76,.04) 180deg,transparent 240deg,rgba(201,168,76,.08) 360deg);
  opacity:0;transition:opacity .3s;
}
.tb-login-btn:hover{
  background:var(--bg3);
  border-color:rgba(201,168,76,.75);
  box-shadow:0 0 20px rgba(201,168,76,.2),0 0 40px rgba(201,168,76,.06),0 2px 8px rgba(0,0,0,.5);
  transform:translateY(-1px);
  color:#fff5d0;
}
.tb-login-btn:hover::before{opacity:1;}
.tb-login-btn:hover::after{opacity:1;}
.tb-login-btn:active{transform:translateY(0);box-shadow:0 0 10px rgba(201,168,76,.15);}
.tb-login-btn .g-icon{width:15px;height:15px;flex-shrink:0;filter:drop-shadow(0 0 3px rgba(255,255,255,.15));}
.tb-login-btn .g-icon-wrap{
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.tb-login-btn .g-icon-wrap svg{width:13px;height:13px;}
.tb-login-separator{display:inline-block;width:1px;height:12px;background:rgba(201,168,76,.3);margin:0 1px;}

/* Logged-in state */
.tb-user-pill{
  display:flex;align-items:center;gap:0;
  background:rgba(1,14,28,.65);
  border:1px solid rgba(201,168,76,.28);
  border-radius:8px;overflow:hidden;
  transition:border-color .25s;
}
.tb-user-pill:hover{border-color:rgba(201,168,76,.55);}
.tb-user-info{
  display:flex;align-items:center;gap:8px;
  padding:5px 10px 5px 6px;
}
.tb-avatar{
  width:26px;height:26px;border-radius:50%;
  border:1.5px solid rgba(201,168,76,.6);
  object-fit:cover;flex-shrink:0;
  box-shadow:0 0 8px rgba(201,168,76,.2);
}
.tb-username{
  font-family:'Cinzel',serif;font-size:9px;
  color:var(--gold-light);letter-spacing:1px;
  max-width:70px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.tb-logout-btn{
  display:flex;align-items:center;justify-content:center;
  height:100%;padding:0 10px;
  border-left:1px solid rgba(201,168,76,.2);
  color:rgba(201,168,76,.5);font-size:10px;
  cursor:pointer;transition:all .2s;
  background:transparent;border-top:none;border-right:none;border-bottom:none;
  font-family:'Cinzel',serif;letter-spacing:1px;
  min-height:36px;
}
.tb-logout-btn:hover{
  background:rgba(139,26,26,.25);
  color:#e07070;border-left-color:rgba(192,57,43,.3);
}
@keyframes tbPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.3)}50%{box-shadow:0 0 0 4px rgba(201,168,76,.0)}}
.tb-user-pill{animation:tbPulse 2.5s ease-in-out 1;}

.drawer-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(4px);}
.drawer-overlay.open{opacity:1;pointer-events:all;}
.drawer{position:fixed;top:0;left:-300px;bottom:0;width:280px;z-index:201;background:linear-gradient(160deg,#041528,#031020);border-right:1px solid rgba(201,168,76,.2);transition:left .35s cubic-bezier(.4,0,.2,1);padding:0;overflow-y:auto;}
.drawer.open{left:0;}
.drawer-header{padding:20px 20px 16px;border-bottom:1px solid rgba(201,168,76,.1);display:flex;align-items:center;gap:12px;}
.drawer-header-icon{font-size:1.5rem;}
.drawer-header-title{font-family:'Cinzel Decorative',serif;font-size:14px;color:var(--gold-light);}
.drawer-section{padding:16px 20px 8px;}
.drawer-section-label{font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;color:var(--text-dim);text-transform:uppercase;margin-bottom:10px;}
.drawer-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:4px;cursor:pointer;transition:background .2s;margin-bottom:4px;text-decoration:none;color:var(--text);}
.drawer-item:hover{background:rgba(201,168,76,.08);}
.drawer-item-icon{width:32px;height:32px;border-radius:50%;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.2);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;}
.drawer-item-text{font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;}
.drawer-item-sub{font-size:10px;color:var(--text-dim);font-style:italic;font-family:'Crimson Text',serif;}
.drawer-divider{height:1px;background:rgba(201,168,76,.1);margin:8px 20px;}
.drawer-close{position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:50%;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gold);font-size:14px;}

.wrapper{position:relative;z-index:5;max-width:720px;margin:0 auto;padding:72px 20px 80px;}

.skull-deco{text-align:center;font-size:1.1rem;letter-spacing:12px;color:var(--gold-dark);margin-bottom:4px;opacity:.5;animation:sway 4s ease-in-out infinite;}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px 40px;position:relative;}
.profile-frame{position:relative;width:min(200px,52vw);height:min(200px,52vw);margin-bottom:28px;}
.profile-frame::before,.profile-frame::after{content:'';position:absolute;border-radius:50%;}
.profile-frame::before{inset:-14px;border:2px solid transparent;border-top-color:var(--gold);border-right-color:var(--gold);animation:spin 8s linear infinite;}
.profile-frame::after{inset:-24px;border:1px dashed var(--gold-dark);animation:spin 12s linear infinite reverse;}
@keyframes spin{to{transform:rotate(360deg)}}
.profile-img{width:min(200px,52vw);height:min(200px,52vw);border-radius:50%;object-fit:cover;border:3px solid var(--gold);box-shadow:0 0 30px rgba(201,168,76,.4),0 0 60px rgba(201,168,76,.15);background:#1a1206;}
.compass-points{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;}
.cp{position:absolute;font-size:10px;color:var(--gold);font-family:'Cinzel',serif;font-weight:700;}
.cp.n{top:-36px;left:50%;transform:translateX(-50%)}
.cp.s{bottom:-36px;left:50%;transform:translateX(-50%)}
.cp.e{right:-36px;top:50%;transform:translateY(-50%)}
.cp.w{left:-36px;top:50%;transform:translateY(-50%)}
.hero-tag{font-family:'Cinzel',serif;font-size:11px;letter-spacing:4px;color:var(--gold-dark);text-transform:uppercase;margin-bottom:8px;}
.hero-name{font-family:'Cinzel Decorative',serif;font-size:clamp(2rem,8vw,3.2rem);font-weight:900;color:var(--gold-light);text-shadow:0 2px 4px rgba(0,0,0,.8);letter-spacing:2px;line-height:1.1;margin-bottom:12px;margin-top:12px;}

.hero-subtitle{font-family:'Cinzel',serif;font-size:13px;color:var(--gold);letter-spacing:3px;margin-bottom:12px;}
.hero-handle{font-family:'Crimson Text',serif;font-style:italic;font-size:1.1rem;color:var(--text-dim);margin-bottom:20px;}
.status-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.4);border-radius:999px;padding:5px 16px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--gold-light);margin-bottom:28px;transition:all .4s ease;}
.status-badge.closed{background:rgba(232,220,180,.1);border-color:rgba(232,220,180,.35);color:#e8dcb4;}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold);animation:pulse 1.5s ease-in-out infinite;}
.status-dot.open{background:var(--gold);box-shadow:0 0 8px var(--gold-light);}
.status-dot.closed{background:#e8dcb4;box-shadow:0 0 6px rgba(232,220,180,.6);}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.divider{display:flex;align-items:center;gap:12px;margin:28px 0;width:100%;}
.divider-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dark),transparent);}
.divider-icon{color:var(--gold);font-size:1.2rem;opacity:.7;}

.section-card{background:linear-gradient(135deg,rgba(4,22,44,.94),rgba(3,14,30,.96));border:1px solid rgba(201,168,76,.2);border-radius:4px;margin-bottom:20px;overflow:hidden;position:relative;transition:border-color .3s,box-shadow .3s;}
.section-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(201,168,76,.04),transparent);pointer-events:none;}
.section-card:hover{border-color:rgba(201,168,76,.45);box-shadow:0 0 24px rgba(201,168,76,.08),0 8px 32px rgba(0,0,0,.5);}
.section-card .corner{position:absolute;width:16px;height:16px;border-color:var(--gold-dark);border-style:solid;opacity:.6;}
.section-card .corner.tl{top:6px;left:6px;border-width:2px 0 0 2px;}
.section-card .corner.tr{top:6px;right:6px;border-width:2px 2px 0 0;}
.section-card .corner.bl{bottom:6px;left:6px;border-width:0 0 2px 2px;}
.section-card .corner.br{bottom:6px;right:6px;border-width:0 2px 2px 0;}
.section-header{padding:16px 24px 12px;border-bottom:1px solid rgba(201,168,76,.15);display:flex;align-items:center;gap:10px;}
.section-header-icon{font-size:1.3rem;color:var(--gold);}
.section-title{font-family:'Cinzel',serif;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);font-weight:600;}
.section-body{padding:20px 24px;}

.link-btn{display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:10px;background:rgba(1,14,28,.65);border:1px solid rgba(201,168,76,.15);border-radius:3px;text-decoration:none;color:var(--text);transition:all .3s ease;position:relative;overflow:hidden;cursor:pointer;}
.link-btn::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);transform:scaleY(0);transition:transform .3s ease;transform-origin:bottom;}
.link-btn:hover{background:rgba(201,168,76,.08);border-color:rgba(201,168,76,.4);transform:translateX(4px);box-shadow:-4px 0 20px rgba(201,168,76,.1);color:var(--gold-light);}
.link-btn:hover::before{transform:scaleY(1);}
.link-icon{width:40px;height:40px;border-radius:50%;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;transition:background .3s;}
.link-btn:hover .link-icon{background:rgba(201,168,76,.2);}
.link-info{flex:1;}
.link-name{font-family:'Cinzel',serif;font-size:13px;font-weight:600;letter-spacing:1px;margin-bottom:2px;transition:color .3s;}
.link-desc{font-size:12px;color:var(--text-dim);font-style:italic;}
.link-arrow{color:var(--gold-dark);font-size:1rem;transition:transform .3s,color .3s;}
.link-btn:hover .link-arrow{transform:translateX(4px);color:var(--gold);}
.link-btn.discord:hover{border-color:rgba(88,101,242,.5);background:rgba(88,101,242,.07);}
.link-copy-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:3px;
  background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.22);
  color:var(--gold-dark);font-size:9px;font-family:'Cinzel',serif;letter-spacing:1px;
  cursor:pointer;flex-shrink:0;transition:all .2s;
  position:relative;z-index:2;white-space:nowrap;
}
.link-copy-btn:hover{background:rgba(201,168,76,.2);border-color:rgba(201,168,76,.55);color:var(--gold-light);}
.link-copy-btn.copied{background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.35);color:#4ade80;}
.link-btn.tiktok:hover{border-color:rgba(255,0,80,.4);background:rgba(255,0,80,.05);}
.link-btn.whatsapp:hover{border-color:rgba(37,211,102,.4);background:rgba(37,211,102,.05);}
.link-btn.saweria:hover{border-color:rgba(255,160,50,.4);background:rgba(255,160,50,.05);}

.about-text{font-size:1.05rem;line-height:1.9;color:var(--text-dim);font-style:italic;text-align:center;padding:4px 0;}
.about-text strong{color:var(--gold);font-style:normal;font-family:'Cinzel',serif;font-size:.9rem;}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:transparent;border-radius:3px;overflow:hidden;margin-top:16px;}
.stat-item{background:transparent;padding:16px 8px;text-align:center;}
.stat-number{font-family:'Cinzel',serif;font-size:1.8rem;color:var(--gold-light);display:block;margin-bottom:4px;line-height:1;}
.stat-label{font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;}
.tags-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.tag{background:rgba(201,168,76,.07);border:1px solid rgba(201,168,76,.4);border-radius:2px;padding:4px 12px;font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;color:var(--gold-light);text-transform:uppercase;}

.jasa-card{background:linear-gradient(135deg,rgba(4,22,44,.97),rgba(3,14,30,.98));border:1px solid rgba(201,168,76,.2);}
.jasa-card .section-title{color:var(--gold-light);}
.jasa-card .section-header-icon{color:var(--gold);}
.jasa-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.4);border-radius:999px;padding:4px 14px;font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;color:var(--gold-light);margin-bottom:14px;transition:all .4s ease;}
.jasa-badge.closed{background:rgba(232,220,180,.08);border-color:rgba(232,220,180,.3);color:#e8dcb4;}
.jasa-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.jasa-list li{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--text-dim);font-style:italic;}
.jasa-list li::before{
  content:'\2620';
  font-style:normal;
  font-size:.85rem;
  color:var(--gold-dark);
  flex-shrink:0;
  line-height:1;
}
.jasa-note{margin-top:14px;padding:10px 14px;background:rgba(201,168,76,.05);border-left:2px solid var(--gold-dark);font-size:.9rem;color:var(--text-dim);font-style:italic;}

/* ── TEAM LIST CARD ── */
.team-card { background: linear-gradient(135deg,rgba(4,22,44,.97),rgba(3,14,30,.98)); border: 1px solid rgba(201,168,76,.2); }
.team-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.team-member-item { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: rgba(1,14,28,.5); border: 1px solid rgba(201,168,76,.12); border-radius: 4px; position: relative; overflow: hidden; transition: border-color .3s, background .3s; }
.team-member-item:hover { border-color: rgba(201,168,76,.35); background: rgba(201,168,76,.05); }
.team-member-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold), var(--gold-dark)); }
.team-member-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(201,168,76,.4); background: rgba(201,168,76,.1); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.team-member-info { flex: 1; }
.team-member-name { font-family: 'Cinzel', serif; font-size: 12px; color: var(--gold-light); letter-spacing: 1px; font-weight: 600; }
.team-member-role { font-family: 'Crimson Text', serif; font-size: 11px; color: var(--text-dim); font-style: italic; margin-top: 2px; }
.team-member-badge { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 1.5px; color: var(--gold-dark); background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.2); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

.footer{text-align:center;padding:32px 0 8px;}
.footer-emblem{font-family:'Cinzel Decorative',serif;font-size:1.8rem;color:var(--gold-dark);opacity:.4;margin-bottom:12px;letter-spacing:4px;}
.footer-text{font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;color:var(--text-dim);opacity:.5;text-transform:uppercase;}
.footer-copy{margin-top:6px;font-size:11px;color:var(--text-dim);opacity:.35;font-style:italic;}

@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.animate{animation:fadeInUp .7s ease forwards;}
.delay-1{animation-delay:.1s;opacity:0}
.delay-2{animation-delay:.2s;opacity:0}
.delay-3{animation-delay:.3s;opacity:0}
.delay-4{animation-delay:.4s;opacity:0}
.delay-5{animation-delay:.5s;opacity:0}
.delay-6{animation-delay:.6s;opacity:0}
.delay-7{animation-delay:.7s;opacity:0}

/* ── PAYMENT SECTION ── */
.payment-trigger-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:18px 20px;background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(139,26,26,.08));border:2px solid rgba(201,168,76,.4);border-radius:4px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;margin-bottom:14px;}
.payment-trigger-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(201,168,76,.06),transparent);pointer-events:none;}
.payment-trigger-btn:hover{border-color:rgba(201,168,76,.75);background:linear-gradient(135deg,rgba(201,168,76,.2),rgba(139,26,26,.12));box-shadow:0 0 32px rgba(201,168,76,.15);}
.payment-trigger-icon{font-size:1.8rem;}
.payment-trigger-text{font-family:'Cinzel',serif;font-size:13px;letter-spacing:3px;color:var(--gold-light);font-weight:700;}
.payment-trigger-sub{font-family:'Crimson Text',serif;font-size:11px;color:var(--text-dim);font-style:italic;letter-spacing:1px;}

.payment-modal-overlay{position:fixed;inset:0;z-index:600;background:var(--bg);display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;}
.payment-modal-overlay.open{display:flex;}
.payment-modal-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:16px 16px 8px;}
.payment-modal-inner{position:relative;width:100%;max-width:420px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.payment-close-bar{flex-shrink:0;position:sticky;bottom:0;left:0;right:0;z-index:700;padding:12px 16px;background:transparent;display:flex;align-items:center;justify-content:center;}
.payment-close-bar-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,rgba(139,26,26,.25),rgba(201,168,76,.12));border:1px solid rgba(201,168,76,.45);border-radius:8px;padding:14px 40px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:3px;color:var(--gold-light);cursor:pointer;width:100%;max-width:500px;transition:all .25s;box-shadow:0 -4px 24px rgba(0,0,0,.6);}
.payment-close-bar-btn:hover{background:linear-gradient(135deg,rgba(139,26,26,.4),rgba(201,168,76,.22));border-color:rgba(201,168,76,.75);box-shadow:0 -4px 32px rgba(201,168,76,.12);}
.payment-img-frame{position:relative;width:100%;aspect-ratio:864/1536;border-radius:6px;overflow:hidden;border:2px solid rgba(201,168,76,.4);box-shadow:0 0 60px rgba(201,168,76,.15),0 0 120px rgba(201,168,76,.05);}
.payment-img-frame::before,.payment-img-frame::after{content:'';position:absolute;z-index:2;pointer-events:none;}
.payment-img-frame::before{inset:0;border:12px solid transparent;background:linear-gradient(135deg,rgba(201,168,76,.15),transparent 40%,transparent 60%,rgba(201,168,76,.1)) border-box;}
.payment-corner-deco{position:absolute;z-index:3;font-family:'Cinzel',serif;font-size:11px;color:var(--gold);letter-spacing:2px;pointer-events:none;}
.payment-corner-deco.tl{top:8px;left:12px;}
.payment-corner-deco.tr{top:8px;right:12px;}
.payment-corner-deco.bl{bottom:8px;left:12px;}
.payment-corner-deco.br{bottom:8px;right:12px;}
.payment-img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;}
.payment-info-row{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:16px;}
.payment-info-card{background:linear-gradient(135deg,rgba(3,24,40,.97),rgba(6,32,53,.97));border:1px solid rgba(201,168,76,.25);border-radius:4px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;overflow:hidden;}
.payment-info-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold),var(--gold-dark));}
.payment-info-label{font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;margin-bottom:4px;}
.payment-info-value{font-family:'Cinzel',serif;font-size:15px;color:var(--gold-light);letter-spacing:1px;font-weight:700;}
.payment-copy-btn{display:flex;align-items:center;gap:6px;background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.35);border-radius:999px;padding:6px 14px;font-family:'Cinzel',serif;font-size:9px;letter-spacing:1.5px;color:var(--gold);cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0;}
.payment-copy-btn:hover{background:rgba(201,168,76,.25);border-color:rgba(201,168,76,.6);}
.payment-copy-btn.copied{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.4);color:#4ade80;}

.payment-download-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;background:linear-gradient(135deg,rgba(201,168,76,.15),rgba(201,168,76,.08));border:1px solid rgba(201,168,76,.45);border-radius:4px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--gold-light);cursor:pointer;transition:all .25s;}
.payment-download-btn:hover{background:linear-gradient(135deg,rgba(201,168,76,.28),rgba(201,168,76,.15));border-color:rgba(201,168,76,.75);box-shadow:0 0 20px rgba(201,168,76,.12);}
.payment-tips-card{background:rgba(3,24,40,.97);border:1px solid rgba(201,168,76,.2);border-left:3px solid var(--gold-dark);border-radius:4px;padding:14px 16px;}
.payment-tips-header{display:flex;align-items:center;gap:8px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--gold);margin-bottom:10px;text-transform:uppercase;}
.payment-tips-list{list-style:none;display:flex;flex-direction:column;gap:7px;}
.payment-tips-list li{font-size:.85rem;color:var(--text-dim);line-height:1.7;font-style:italic;}
.payment-tips-list li strong{color:var(--gold);font-style:normal;font-family:'Cinzel',serif;font-size:.8rem;}

.payment-banner{text-align:center;font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;color:var(--text-dim);margin-top:16px;opacity:.5;text-transform:uppercase;}

.drawer-auth{display:flex;flex-direction:column;gap:8px;padding:12px;background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.15);border-radius:4px;}
.drawer-auth-user{display:flex;align-items:center;gap:10px;}
.drawer-auth-name{font-family:'Cinzel',serif;font-size:10px;letter-spacing:1px;color:var(--gold);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.drawer-login-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:#3c4043;border:none;border-radius:4px;padding:9px 16px;font-size:12px;font-weight:500;cursor:pointer;font-family:Roboto,Arial,sans-serif;box-shadow:0 1px 3px rgba(0,0,0,.2);width:100%;transition:box-shadow .2s;}
.drawer-login-btn:hover{box-shadow:0 2px 8px rgba(0,0,0,.3);}
.drawer-logout-btn{background:rgba(139,26,26,.15);border:1px solid rgba(192,57,43,.3);border-radius:4px;padding:6px 12px;font-family:'Cinzel',serif;font-size:9px;letter-spacing:1px;color:#e07070;cursor:pointer;width:100%;transition:all .2s;text-align:center;}
.drawer-logout-btn:hover{background:rgba(139,26,26,.28);}

/* ── RATING SECTION ── */
.rating-section{margin-top:0;}
.rating-stars-row{display:flex;align-items:center;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.rating-stars-row .star-btn{font-size:1.8rem;cursor:pointer;transition:transform .15s,color .15s;background:none;border:none;padding:0 2px;line-height:1;color:rgba(201,168,76,.25);}
.rating-stars-row .star-btn.active{color:var(--gold);text-shadow:0 0 8px rgba(201,168,76,.5);}
.rating-stars-row .star-btn:hover{transform:scale(1.2);}
.rating-avg-display{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;color:var(--gold);margin-left:4px;}
.rating-count{font-family:'Crimson Text',serif;font-style:italic;font-size:11px;color:var(--text-dim);margin-left:4px;}
.rating-textarea{width:100%;background:rgba(3,24,40,.92);border:1px solid rgba(201,168,76,.2);border-radius:4px;padding:10px 14px;color:var(--text);font-family:'Crimson Text',serif;font-size:.95rem;resize:none;outline:none;min-height:70px;max-height:120px;transition:border-color .2s;box-sizing:border-box;}
.rating-textarea:focus{border-color:rgba(201,168,76,.45);}
.rating-submit-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;margin-top:10px;background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.35);border-radius:4px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--gold);cursor:pointer;transition:all .25s;}
.rating-submit-btn:hover{background:rgba(201,168,76,.25);border-color:rgba(201,168,76,.65);}
.rating-login-note{font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;color:var(--text-dim);text-align:center;margin-top:8px;opacity:.7;}
.rating-divider{height:1px;background:rgba(201,168,76,.1);margin:14px 0;}
.show-comments-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.2);border-radius:4px;font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;color:var(--gold-dark);cursor:pointer;transition:all .25s;}
.show-comments-btn:hover{background:rgba(201,168,76,.14);border-color:rgba(201,168,76,.4);color:var(--gold);}
/* Comments modal */
.comments-overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.95);backdrop-filter:blur(12px);display:none;align-items:stretch;justify-content:center;padding:0;}
.comments-overlay.open{display:flex;}
.comments-sheet{background:linear-gradient(160deg,#031828,#020f1e);border:none;border-radius:0;width:100%;max-width:100%;height:100%;max-height:100%;display:flex;flex-direction:column;animation:fadeInUp .3s ease;}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.comments-sheet-header{padding:18px 24px;border-bottom:1px solid rgba(201,168,76,.15);display:flex;align-items:center;gap:12px;flex-shrink:0;background:rgba(1,14,28,.65);backdrop-filter:blur(8px);position:sticky;top:0;z-index:2;}
.comments-sheet-title{font-family:'Cinzel',serif;font-size:13px;letter-spacing:4px;color:var(--gold);flex:1;}
.comments-list{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px;max-width:720px;width:100%;margin:0 auto;}
.comment-item{background:rgba(5,5,5,.5);border:1px solid rgba(201,168,76,.12);border-radius:4px;padding:12px 14px;}
.comment-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.comment-author{font-family:'Cinzel',serif;font-size:9px;letter-spacing:1px;color:var(--gold);flex:1;}
.comment-stars{font-size:.85rem;color:var(--gold);}
.comment-time{font-family:'Crimson Text',serif;font-size:10px;color:var(--text-dim);font-style:italic;}
.comment-text{font-size:.9rem;color:var(--text-dim);font-style:italic;line-height:1.6;}
.comments-empty{text-align:center;padding:32px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--text-dim);}
/* Name prompt modal */
.name-modal-overlay{position:fixed;inset:0;z-index:450;background:rgba(0,0,0,.82);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px;}
.name-modal-overlay.open{display:flex;}
.name-modal-box{background:linear-gradient(160deg,#041528,#031020);border:1px solid rgba(201,168,76,.3);border-radius:6px;width:100%;max-width:380px;padding:28px 24px;animation:fadeInUp .25s ease;}
.name-modal-title{font-family:'Cinzel',serif;font-size:12px;letter-spacing:3px;color:var(--gold);margin-bottom:8px;}
.name-modal-sub{font-family:'Crimson Text',serif;font-style:italic;font-size:.9rem;color:var(--text-dim);margin-bottom:18px;line-height:1.6;}
.name-modal-input{width:100%;background:rgba(5,5,5,.7);border:1px solid rgba(201,168,76,.2);border-radius:4px;padding:10px 14px;color:var(--text);font-family:'Crimson Text',serif;font-size:.95rem;outline:none;transition:border-color .2s;box-sizing:border-box;margin-bottom:8px;}
.name-modal-input:focus{border-color:rgba(201,168,76,.45);}
.name-modal-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.4);border-radius:4px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--gold);cursor:pointer;transition:all .2s;margin-top:4px;}
.name-modal-btn:hover{background:rgba(201,168,76,.28);}
.name-modal-skip{display:block;text-align:center;margin-top:10px;font-family:'Cinzel',serif;font-size:8px;letter-spacing:2px;color:var(--text-dim);cursor:pointer;opacity:.6;}
.name-modal-skip:hover{opacity:1;}

@keyframes glimmer{0%,100%{text-shadow:0 0 60px rgba(201,168,76,.5),0 0 120px rgba(201,168,76,.2)}50%{text-shadow:0 0 80px rgba(201,168,76,.8),0 0 160px rgba(201,168,76,.4)}}
::-webkit-scrollbar{display:none}
*{scrollbar-width:none;-ms-overflow-style:none;}

/* MODAL */
.modal-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px;}
#paymentModal{background:var(--bg);backdrop-filter:none;}
.modal-overlay.open{display:flex;}
.cs-modal{background:linear-gradient(160deg,#041528,#031020);border:1px solid rgba(201,168,76,.25);border-radius:6px;width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;position:relative;animation:fadeInUp .3s ease;}
.cs-modal-header{padding:16px 20px;border-bottom:1px solid rgba(201,168,76,.15);display:flex;align-items:center;gap:10px;}
.cs-modal-title{font-family:'Cinzel',serif;font-size:12px;letter-spacing:3px;color:var(--gold);flex:1;}
.cs-modal-close{width:28px;height:28px;border-radius:50%;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.2);cursor:pointer;color:var(--gold);font-size:14px;display:flex;align-items:center;justify-content:center;}
.cs-login-prompt{padding:32px 24px;text-align:center;}
.cs-login-prompt p{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;color:var(--text-dim);margin-bottom:20px;line-height:1.8;}
.cs-login-prompt .g-btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#333;border:none;border-radius:4px;padding:10px 20px;font-size:14px;font-weight:500;cursor:pointer;transition:box-shadow .2s;}
.cs-login-prompt .g-btn:hover{box-shadow:0 2px 12px rgba(0,0,0,.3);}
.cs-chat-area{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:200px;max-height:380px;}
.msg{display:flex;flex-direction:column;max-width:80%;}
.msg.me{align-self:flex-end;align-items:flex-end;}
.msg.other{align-self:flex-start;align-items:flex-start;}
.msg.bot{align-self:flex-start;align-items:flex-start;}
.msg-bubble{padding:10px 14px;border-radius:12px;font-size:.9rem;line-height:1.5;}
.msg.me .msg-bubble{background:rgba(201,168,76,.18);border:1px solid rgba(201,168,76,.3);color:var(--text);border-radius:12px 12px 2px 12px;}
.msg.other .msg-bubble{background:rgba(88,101,242,.18);border:1px solid rgba(88,101,242,.3);color:var(--text);border-radius:12px 12px 12px 2px;}
.msg.bot .msg-bubble{background:rgba(232,124,30,.12);border:1px solid rgba(232,124,30,.3);color:#f0c080;border-radius:12px 12px 12px 2px;}
.msg-meta{font-family:'Cinzel',serif;font-size:8px;letter-spacing:1px;color:var(--text-dim);margin-top:3px;}
.msg-sender{font-family:'Cinzel',serif;font-size:9px;letter-spacing:1px;color:var(--gold);margin-bottom:3px;}
.msg.bot .msg-sender{color:var(--orange);}
.cs-input-area{padding:12px 16px;border-top:1px solid rgba(201,168,76,.1);display:flex;gap:8px;align-items:flex-end;}
.cs-input{flex:1;background:rgba(5,5,5,.7);border:1px solid rgba(201,168,76,.2);border-radius:4px;padding:10px 14px;color:var(--text);font-family:'Crimson Text',serif;font-size:.95rem;resize:none;outline:none;min-height:40px;max-height:100px;transition:border-color .2s;}
.cs-input:focus{border-color:rgba(201,168,76,.45);}
.cs-send{background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.3);border-radius:4px;padding:8px 14px;color:var(--gold);cursor:pointer;font-size:1rem;transition:all .2s;flex-shrink:0;}
.cs-send:hover{background:rgba(201,168,76,.28);}
.cs-send:disabled{opacity:.35;cursor:not-allowed;}
.cs-locked-notice{padding:10px 16px;background:rgba(139,26,26,.15);border-top:1px solid rgba(192,57,43,.2);font-family:'Cinzel',serif;font-size:9px;letter-spacing:1.5px;color:#e07070;text-align:center;}
.dev-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(232,124,30,.15);border:1px solid rgba(232,124,30,.4);border-radius:999px;padding:3px 10px;font-family:'Cinzel',serif;font-size:8px;letter-spacing:2px;color:var(--orange);}
.g-topbar-btn{display:flex;align-items:center;gap:6px;background:#fff;border:none;border-radius:4px;padding:4px 10px;font-size:11px;font-weight:500;color:#333;cursor:pointer;transition:box-shadow .2s;}
.g-topbar-btn:hover{box-shadow:0 2px 8px rgba(0,0,0,.3);}
.cs-tabs{display:flex;border-bottom:1px solid rgba(201,168,76,.12);}
.cs-tab{flex:1;padding:10px;text-align:center;font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;}
.cs-tab.active{color:var(--gold);border-bottom-color:var(--gold);}
.cs-requests-list{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;max-height:380px;}
.req-item{background:rgba(1,14,28,.65);border:1px solid rgba(201,168,76,.15);border-radius:4px;padding:12px 14px;cursor:pointer;transition:all .2s;}
.req-item:hover{border-color:rgba(201,168,76,.35);background:rgba(201,168,76,.05);}
.req-item.approved{border-color:rgba(37,211,102,.3);}
.req-item-header{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.req-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid rgba(201,168,76,.3);}
.req-name{font-family:'Cinzel',serif;font-size:10px;color:var(--gold);flex:1;}
.req-status{font-family:'Cinzel',serif;font-size:8px;letter-spacing:1px;padding:2px 8px;border-radius:999px;}
.req-status.pending{background:rgba(232,124,30,.15);color:var(--orange);border:1px solid rgba(232,124,30,.3);}
.req-status.approved{background:rgba(37,211,102,.12);color:#4ade80;border:1px solid rgba(37,211,102,.3);}
.req-preview{font-size:.85rem;color:var(--text-dim);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.req-approve-btn{margin-top:8px;width:100%;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.3);border-radius:3px;padding:6px;font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;color:#4ade80;cursor:pointer;transition:all .2s;}
.req-approve-btn:hover{background:rgba(37,211,102,.22);}

/* CONFIRM LINK MODAL */
.confirm-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px;}
.confirm-overlay.open{display:flex;}
.confirm-box{background:linear-gradient(160deg,#041528,#031020);border:1px solid rgba(201,168,76,.35);border-radius:6px;width:100%;max-width:400px;padding:28px 24px;text-align:center;animation:fadeInUp .25s ease;}
.confirm-icon{font-size:2rem;margin-bottom:12px;}
.confirm-title{font-family:'Cinzel',serif;font-size:12px;letter-spacing:3px;color:var(--gold);margin-bottom:16px;}
.confirm-url{font-size:.85rem;color:var(--text-dim);font-style:italic;word-break:break-all;margin-bottom:24px;padding:10px;background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.1);border-radius:3px;}
.confirm-btns{display:flex;gap:10px;justify-content:center;}
.confirm-yes{background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.4);border-radius:4px;padding:8px 24px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--gold);cursor:pointer;transition:all .2s;}
.confirm-yes:hover{background:rgba(201,168,76,.28);}
.confirm-no{background:rgba(139,26,26,.15);border:1px solid rgba(192,57,43,.3);border-radius:4px;padding:8px 24px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:#e07070;cursor:pointer;transition:all .2s;}
.confirm-no:hover{background:rgba(139,26,26,.28);}

/* DEV SETTINGS MODAL */
.settings-modal{background:linear-gradient(160deg,#041528,#031020);border:1px solid rgba(201,168,76,.25);border-radius:6px;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;position:relative;animation:fadeInUp .3s ease;}
.settings-section{padding:16px 20px;border-bottom:1px solid rgba(201,168,76,.1);}
.settings-label{font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;color:var(--text-dim);text-transform:uppercase;margin-bottom:10px;}
.settings-input{width:100%;background:rgba(5,5,5,.7);border:1px solid rgba(201,168,76,.2);border-radius:4px;padding:10px 14px;color:var(--text);font-family:'Crimson Text',serif;font-size:.95rem;outline:none;transition:border-color .2s;margin-bottom:8px;}
.settings-input:focus{border-color:rgba(201,168,76,.45);}
.settings-save-btn{background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.4);border-radius:4px;padding:8px 20px;font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;color:var(--gold);cursor:pointer;transition:all .2s;}
.settings-save-btn:hover{background:rgba(201,168,76,.28);}
.settings-delete-btn{background:rgba(139,26,26,.15);border:1px solid rgba(192,57,43,.3);border-radius:4px;padding:6px 14px;font-family:'Cinzel',serif;font-size:9px;letter-spacing:1px;color:#e07070;cursor:pointer;transition:all .2s;margin-left:8px;}
.settings-delete-btn:hover{background:rgba(139,26,26,.28);}
.settings-toggle{display:flex;align-items:center;gap:12px;padding:10px 0;}
.toggle-label{font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--text);}
.toggle-switch{position:relative;width:48px;height:24px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;border-radius:24px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:.3s;}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:2px;background:#fff;border-radius:50%;transition:.3s;}
input:checked + .toggle-slider{background:rgba(201,168,76,.3);border-color:var(--gold);}
input:checked + .toggle-slider::before{transform:translateX(24px);background:var(--gold);}
.avatar-preview{width:60px;height:60px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;margin-bottom:8px;display:block;}

/* PERATURAN MODAL */
.rules-body{padding:20px 24px;max-height:60vh;overflow-y:auto;}
.rules-body h3{font-family:'Cinzel',serif;font-size:11px;letter-spacing:3px;color:var(--gold);margin:16px 0 8px;}
.rules-body p,.rules-body li{font-size:.9rem;color:var(--text-dim);line-height:1.8;margin-bottom:6px;}
.rules-body ul{padding-left:20px;}
.rules-body ul li{list-style:disc;}

@media(max-width:480px){.jasa-list{grid-template-columns:1fr}.hero-name{font-size:2rem}.user-name-small{display:none}}

/* ── LOADING SCREEN ── */
#loadingScreen{
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(ellipse 80% 70% at 50% 40%, rgba(4,22,44,1) 0%, rgba(3,14,30,1) 60%, #010e1c 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .8s ease, visibility .8s ease;
  overflow:hidden;
}
#loadingScreen.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.ls-bg{position:absolute;inset:0;background-image:none;background-size:cover;background-position:center;filter:brightness(0.12) saturate(0.5);}
.ls-overlay{position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 50% 35%,rgba(201,168,76,.05) 0%,transparent 60%);}

/* Floating particles */
.ls-particles{position:absolute;inset:0;pointer-events:none;}
.ls-p{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--gold);animation:lsFloat linear infinite;}
@keyframes lsFloat{0%{opacity:0;transform:translateY(0) scale(0);}15%{opacity:.8;}80%{opacity:.3;}100%{opacity:0;transform:translateY(-90px) scale(1.5);}}

/* Shimmer beam */
@keyframes lsBeam{0%{transform:translateX(-100%) skewX(-20deg);opacity:0;}35%{opacity:.5;}65%{opacity:.5;}100%{transform:translateX(220%) skewX(-20deg);opacity:0;}}
.ls-beam{position:absolute;top:0;left:0;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.03),rgba(201,168,76,.08),rgba(201,168,76,.03),transparent);pointer-events:none;animation:lsBeam 5s ease-in-out infinite;}

/* Stars */
.ls-stars{position:absolute;inset:0;pointer-events:none;}
.ls-star{position:absolute;border-radius:50%;animation:lsTwinkle ease-in-out infinite;}
@keyframes lsTwinkle{0%,100%{opacity:.06;}50%{opacity:.5;}}

/* Ocean scene */
.ls-ocean{position:absolute;bottom:0;left:0;right:0;height:110px;pointer-events:none;overflow:hidden;}

/* Wave layers */
.ls-wave-svg{position:absolute;bottom:0;left:0;width:200%;height:100%;}
.ls-wave-svg.a{animation:lsWaveA 7s linear infinite;}
.ls-wave-svg.b{animation:lsWaveB 11s linear infinite;opacity:.7;}
.ls-wave-svg.c{animation:lsWaveA 5s linear infinite;opacity:.4;}
@keyframes lsWaveA{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lsWaveB{from{transform:translateX(-50%)}to{transform:translateX(0)}}



.ls-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;}
.ls-skull{font-size:2.5rem;letter-spacing:16px;color:var(--gold-dark);opacity:.55;animation:sway 3s ease-in-out infinite;}
.ls-logo{font-family:'Cinzel Decorative',serif;font-size:clamp(2.4rem,9vw,3.8rem);font-weight:900;color:var(--gold-light);letter-spacing:4px;text-shadow:0 0 50px rgba(201,168,76,.45),0 0 100px rgba(201,168,76,.18),0 0 180px rgba(10,80,160,.25);animation:glimmer 2.5s ease-in-out infinite;}
.ls-sub{font-family:'Cinzel',serif;font-size:11px;letter-spacing:6px;color:var(--gold-dark);text-transform:uppercase;opacity:.65;margin-top:-10px;}
.ls-divider{width:110px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.4),transparent);margin:2px 0;}
.ls-bar-wrap{width:180px;height:1.5px;background:rgba(201,168,76,.1);border-radius:2px;overflow:hidden;margin-top:6px;}
.ls-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light),var(--gold-dark));border-radius:2px;animation:loadBar 5s linear forwards;position:relative;}
.ls-bar::after{content:'';position:absolute;top:0;right:0;width:24px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55));animation:lsBarShimmer 1.2s ease-in-out infinite;}
@keyframes lsBarShimmer{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
@keyframes loadBar{0%{width:0%}100%{width:100%}}
.ls-tagline{font-family:'Crimson Text',serif;font-style:italic;font-size:.95rem;color:var(--text);opacity:.8;margin-top:2px;letter-spacing:1px;}
.ls-dots{display:flex;gap:8px;margin-top:2px;}
.ls-dot{width:4px;height:4px;border-radius:50%;background:var(--gold-dark);opacity:.3;animation:dotPulse 1.2s ease-in-out infinite;}
.ls-dot:nth-child(2){animation-delay:.2s;}
.ls-dot:nth-child(3){animation-delay:.4s;}
@keyframes dotPulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}

/* ── PREMIUM NEW COMPONENT STYLES ── */

/* Settings Tabs */
.settings-tabs-scroll { overflow-x: auto; display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid rgba(201,168,76,.15); background: rgba(1,14,28,0.55); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.settings-tabs-scroll::-webkit-scrollbar { display: none; }
.settings-tab-btn { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1.5px; color: var(--text-dim); background: rgba(201,168,76,0.05); border: 1px solid rgba(201,168,76,0.15); border-radius: 4px; padding: 6px 12px; cursor: pointer; white-space: nowrap; transition: all 0.25s ease; }
.settings-tab-btn:hover { background: rgba(201,168,76,0.12); color: var(--gold-light); }
.settings-tab-btn.active { color: var(--gold-light); background: rgba(201,168,76,0.18); border-color: var(--gold); box-shadow: 0 0 8px rgba(201,168,76,0.15); }
.settings-panel { display: none; }
.settings-panel.active { display: block; }

/* Dynamic List Items for Admin Panel */
.dev-list-item { display: flex; align-items: center; justify-content: space-between; background: rgba(1,14,28,0.65); border: 1px solid rgba(201,168,76,0.15); border-radius: 4px; padding: 8px 12px; margin-bottom: 8px; gap: 8px; }
.dev-list-text { font-family: 'Cinzel', serif; font-size: 10px; color: var(--gold-light); flex: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.dev-list-controls { display: flex; gap: 6px; }
.dev-btn-small { background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.25); border-radius: 3px; color: var(--gold); font-size: 9px; padding: 3px 8px; cursor: pointer; font-family: 'Cinzel', serif; transition: all 0.2s; white-space: nowrap; }
.dev-btn-small:hover { background: rgba(201,168,76,0.2); border-color: var(--gold-light); }
.dev-btn-small.danger { background: rgba(139,26,26,0.15); border-color: rgba(192,57,43,0.3); color: #e07070; }
.dev-btn-small.danger:hover { background: rgba(139,26,26,0.3); }

/* Custom Login and Signup Modal */
.auth-tabs { display: flex; border-bottom: 1px solid rgba(201,168,76,0.15); margin-bottom: 16px; }
.auth-tab { flex: 1; text-align: center; padding: 10px; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 2px; color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.25s ease; }
.auth-tab.active { color: var(--gold-light); border-bottom-color: var(--gold); text-shadow: 0 0 6px rgba(201,168,76,0.3); }
.auth-form-group { margin-bottom: 12px; }
.auth-label { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 2px; color: var(--text-dim); margin-bottom: 6px; text-transform: uppercase; display: block; }
.auth-input { width: 100%; background: rgba(1,14,28,0.78); border: 1px solid rgba(201,168,76,0.2); border-radius: 4px; padding: 10px 14px; color: var(--text); font-family: 'Crimson Text', serif; font-size: 14px; outline: none; transition: border-color 0.2s; }
.auth-input:focus { border-color: rgba(201,168,76,0.45); }
.auth-btn-primary { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: rgba(201,168,76,0.15); border: 1px solid rgba(201,168,76,0.4); border-radius: 4px; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 2px; color: var(--gold-light); cursor: pointer; transition: all 0.25s; margin-top: 8px; }
.auth-btn-primary:hover { background: rgba(201,168,76,0.28); border-color: var(--gold); box-shadow: 0 0 15px rgba(201,168,76,0.2); }
.auth-btn-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; background: #fff; border: none; border-radius: 4px; color: #3c4043; font-family: Roboto, Arial, sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; margin-top: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: box-shadow 0.2s; }
.auth-btn-google:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.auth-link { font-family: 'Crimson Text', serif; font-style: italic; font-size: 11px; color: var(--text-dim); text-align: center; display: block; margin-top: 10px; cursor: pointer; text-decoration: underline; }
.auth-link:hover { color: var(--gold-light); }
.auth-notif-box { background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.25); border-radius: 6px; padding: 12px; text-align: center; margin-bottom: 12px; animation: fadeInUp 0.3s; }
.auth-notif-title { font-family: 'Cinzel', serif; font-size: 9px; color: var(--gold); letter-spacing: 1.5px; margin-bottom: 4px; }
.auth-notif-code { font-family: 'Cinzel', serif; font-size: 20px; color: var(--gold-light); letter-spacing: 4px; font-weight: 700; margin: 6px 0; }
.auth-notif-desc { font-family: 'Crimson Text', serif; font-style: italic; font-size: 10px; color: var(--text-dim); }

/* Lightbox Image Preview Modal */
.lightbox-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.95); display: none; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(10px); }
.lightbox-overlay.open { display: flex; }
.lightbox-container { position: relative; max-width: 90%; max-height: 90%; display: flex; flex-direction: column; align-items: center; }
.lightbox-img { max-width: 100%; max-height: 80vh; object-fit: contain; border: 2px solid rgba(201,168,76,0.4); border-radius: 6px; box-shadow: 0 0 40px rgba(0,0,0,0.8); cursor: zoom-out; }
.lightbox-caption { margin-top: 12px; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 2px; color: var(--gold-light); text-align: center; }
.lightbox-close { position: absolute; top: -40px; right: 0; width: 32px; height: 32px; border-radius: 50%; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.3); color: var(--gold); font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox-close:hover { background: rgba(201,168,76,0.25); color: #fff; }

/* Combined Payment layout styles */
.payment-vertical-details { display: flex; flex-direction: column; width: 100%; gap: 12px; }
.payment-lists-row { display: flex; gap: 16px; width: 100%; margin-top: 16px; align-items: stretch; }
.payment-lists-row .payment-sub-card { flex: 1; margin-bottom: 0 !important; }
.dev-cs-wrapper { display: flex; height: 65vh; }
.dev-cs-inbox { width: 35%; border-right: 1px solid rgba(255,255,255,0.1); overflow-y: auto; }
.dev-cs-detail { width: 65%; display: flex; flex-direction: column; padding: 12px; height: 100%; box-sizing: border-box; }
@media (max-width: 768px) {
  .dev-cs-wrapper { flex-direction: column; height: 70vh; }
  .dev-cs-inbox { width: 100%; height: 35%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .dev-cs-detail { width: 100%; height: 65%; padding: 8px 0 0 0; }
}
@media (max-width: 600px) {
  .payment-lists-row { flex-direction: column; gap: 14px; }
}
.payment-sub-card { background: linear-gradient(135deg,rgba(3,24,40,.97),rgba(6,32,53,.97)); border: 1px solid rgba(201,168,76,0.25); border-radius: 4px; padding: 14px 18px; position: relative; overflow: hidden; }
.payment-sub-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg,var(--gold),var(--gold-dark)); }
.payment-sub-title { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 2px; color: var(--gold-light); margin-bottom: 10px; text-transform: uppercase; border-bottom: 1px solid rgba(201,168,76,0.15); padding-bottom: 6px; }
.payment-sub-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.payment-sub-list li { font-size: 11px; color: var(--text-dim); font-style: italic; display: flex; align-items: center; gap: 6px; }
.payment-sub-list li::before { content: '✦'; color: var(--gold-dark); font-size: 8px; }

/* Clickable zoom image styles */
.clickable-preview { cursor: zoom-in; transition: transform 0.25s ease, border-color 0.25s ease; }
.clickable-preview:hover { transform: scale(1.015); border-color: rgba(201,168,76,0.75) !important; }

/* Event card styles */
.now-event-card { background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(139,26,26,0.06)); border: 2px dashed rgba(201,168,76,0.4); border-radius: 6px; cursor: pointer; transition: all 0.3s; margin-bottom: 20px; text-align: center; padding: 18px; position: relative; overflow: hidden; animation: tbPulse 2.5s ease-in-out infinite; }
.now-event-card:hover { border-color: var(--gold); background: linear-gradient(135deg, rgba(201,168,76,0.22), rgba(139,26,26,0.12)); box-shadow: 0 0 25px rgba(201,168,76,0.15); }
.now-event-title { font-family: 'Cinzel Decorative', serif; font-size: 14px; letter-spacing: 3px; color: var(--gold-light); margin-bottom: 4px; font-weight: 700; }
.now-event-sub { font-family: 'Crimson Text', serif; font-style: italic; font-size: 11px; color: var(--text-dim); }

/* Theme Personalizer Background layer override */
body.custom-theme-bg { background-image: none !important; }
.bg-layer.custom-theme-bg { background-image: none !important; background-color: var(--custom-bg-color) !important; filter: none !important; }

/* Testimonial slider / grid styles */
.testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 14px; width: 100%; max-width: 440px; margin: 0 auto; }
.testimonial-card { background: linear-gradient(135deg,rgba(17,13,7,0.96),rgba(13,10,6,0.98)); border: 1px solid rgba(201,168,76,0.25); border-radius: 4px; padding: 12px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.testimonial-img-frame { width: 100%; aspect-ratio: 16/9; border-radius: 4px; border: 1px solid rgba(201,168,76,0.2); overflow: hidden; position: relative; }
.testimonial-img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 0.25s; }
.testimonial-img:hover { transform: scale(1.02); }
.testimonial-text { font-family: 'Crimson Text', serif; font-style: italic; font-size: 12px; color: var(--text-dim); line-height: 1.5; text-align: center; }

/* Testimonials Carousel Styling */
.testi-carousel-wrapper { position: relative; overflow: hidden; width: 100%; border-radius: 8px; border: 1px solid rgba(201,168,76,0.15); box-shadow: inset 0 0 20px rgba(0,0,0,0.5); padding: 0; margin-bottom: 16px; display: flex; flex-direction: column; min-height: 250px; }
.testi-item { display: flex; flex-direction: column; align-items: center; justify-content: end; text-align: center; animation: fadeIn 0.4s ease-out; flex: 1; padding: 32px 20px; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; }
.testi-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,5,5,0.98) 0%, rgba(5,5,5,0.7) 30%, rgba(5,5,5,0) 70%); z-index: 1; pointer-events: none; }
.testi-item > * { position: relative; z-index: 2; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.testi-quote { font-family: 'Crimson Text', serif; font-style: italic; font-size: 1.1rem; line-height: 1.6; color: var(--text); padding: 0 10px; margin-bottom: 16px; }
.testi-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 10px; }
.testi-nav-btn { background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.3); color: var(--gold); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; font-size: 1.2rem; outline: none; }
.testi-nav-btn:hover { background: rgba(201,168,76,0.25); border-color: var(--gold); transform: scale(1.1); box-shadow: 0 0 10px rgba(201,168,76,0.2); }
.testi-dots { display: flex; gap: 6px; }
.testi-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(201,168,76,0.2); cursor: pointer; transition: all 0.3s; }
.testi-dot:hover { background: rgba(201,168,76,0.5); }
.testi-dot.active { background: var(--gold); box-shadow: 0 0 8px var(--gold); transform: scale(1.2); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Ban alert styles */
.ban-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(5,5,5,0.98); backdrop-filter: blur(12px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; }
.ban-skull { font-size: 4rem; color: var(--red-bright); text-shadow: 0 0 20px rgba(192,57,43,0.5); animation: sway 3s ease-in-out infinite; margin-bottom: 20px; }
.ban-title { font-family: 'Cinzel Decorative', serif; font-size: clamp(1.8rem, 6vw, 2.5rem); color: var(--red-bright); letter-spacing: 4px; font-weight: 900; margin-bottom: 8px; }
.ban-subtitle { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 24px; }
.ban-details { background: rgba(139,26,26,0.12); border: 1px solid rgba(192,57,43,0.3); border-radius: 6px; padding: 20px; max-width: 440px; margin-bottom: 30px; text-align: left; }
.ban-detail-row { margin-bottom: 10px; font-family: 'Crimson Text', serif; font-size: 14px; color: var(--text); }
.ban-detail-row strong { font-family: 'Cinzel', serif; font-size: 10px; color: var(--gold-light); letter-spacing: 1px; display: inline-block; width: 100px; }

/* Ban logs display */
.ban-logs-list { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 520px; margin: 0 auto; }
.ban-log-item { background: rgba(139,26,26,0.06); border: 1px solid rgba(192,57,43,0.2); border-radius: 4px; padding: 12px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.ban-log-item.developer { border-color: rgba(201,168,76,0.3); }
.ban-log-header { display: flex; align-items: center; justify-content: space-between; font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1px; color: var(--gold); }
.ban-log-username { font-weight: 700; color: var(--red-bright); }
.ban-log-reason { font-family: 'Crimson Text', serif; font-style: italic; font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ── DRAW SYSTEM ── */
.draw-tab-btn{flex:1;padding:10px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.5px;background:transparent;border:none;color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;}
.draw-tab-active{color:var(--gold-light) !important;border-bottom-color:var(--gold) !important;}
.draw-card{background:rgba(255,255,255,.02);border:1px solid rgba(201,168,76,.18);border-radius:6px;padding:14px;margin-bottom:10px;cursor:pointer;transition:all .2s;}
.draw-card:hover{background:rgba(201,168,76,.05);border-color:rgba(201,168,76,.4);}
.draw-card-title{font-family:'Cinzel',serif;font-size:11px;color:var(--gold-light);font-weight:bold;margin-bottom:6px;}
.draw-card-meta{font-size:10px;color:var(--text-dim);display:flex;flex-wrap:wrap;gap:8px;}
.draw-status-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-family:'Cinzel',serif;font-size:8px;letter-spacing:1px;font-weight:bold;}
.draw-status-waiting{background:rgba(201,168,76,.12);color:var(--gold);border:1px solid rgba(201,168,76,.3);}
.draw-status-live{background:rgba(50,200,100,.12);color:#50c878;border:1px solid rgba(50,200,100,.3);}
.draw-status-done{background:rgba(100,100,100,.12);color:#888;border:1px solid rgba(100,100,100,.3);}
.draw-status-hangus{background:rgba(200,50,50,.12);color:#e05050;border:1px solid rgba(200,50,50,.3);}

/* ── DRAW WINNER NOTIF BANNER ── */
@keyframes winnerBannerIn {
  from { transform: translateY(-120%) scale(0.95); opacity: 0; }
  to   { transform: translateY(0)       scale(1);    opacity: 1; }
}
@keyframes winnerBannerOut {
  from { transform: translateY(0)       scale(1);    opacity: 1; }
  to   { transform: translateY(-120%) scale(0.95); opacity: 0; }
}
@keyframes winnerShimmer {
  0%,100% { background-position: -200% center; }
  50%      { background-position:  200% center; }
}
.draw-winner-notif {
  position: fixed;
  top: 62px; left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 9500;
  width: min(420px, calc(100vw - 32px));
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(201,168,76,.15);
  animation: winnerBannerIn .45s cubic-bezier(.34,1.56,.64,1) forwards;
  transition: box-shadow .2s;
}
.draw-winner-notif.active {
  background: linear-gradient(135deg,rgba(4,22,44,.98),rgba(6,32,53,.98));
  border: 1.5px solid rgba(201,168,76,.55);
}
.draw-winner-notif.expired {
  background: linear-gradient(135deg,rgba(40,5,5,.98),rgba(60,8,8,.98));
  border: 1.5px solid rgba(200,50,50,.55);
}
.draw-winner-notif.hiding {
  animation: winnerBannerOut .35s ease forwards;
}
.draw-winner-notif-icon {
  font-size: 2rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(201,168,76,.4));
}
.draw-winner-notif-body { flex: 1; min-width: 0; }
.draw-winner-notif-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 3px;
}
.draw-winner-notif.active  .draw-winner-notif-title { color: var(--gold-light); }
.draw-winner-notif.expired .draw-winner-notif-title { color: #e05050; }
.draw-winner-notif-sub {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 1px;
}
.draw-winner-notif.active  .draw-winner-notif-sub { color: var(--gold); }
.draw-winner-notif.expired .draw-winner-notif-sub { color: #e07070; }
.draw-winner-notif-name {
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-size: 12px;
  margin-top: 2px;
  opacity: .75;
  color: var(--text-dim);
}
.draw-winner-notif-close {
  flex-shrink: 0;
  font-size: 14px;
  color: rgba(201,168,76,.5);
  cursor: pointer;
  padding: 2px 4px;
  transition: color .2s;
}
.draw-winner-notif.expired .draw-winner-notif-close { color: rgba(200,80,80,.5); }
.draw-winner-notif-close:hover { color: var(--gold-light); }
.draw-winner-notif-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  border-radius: 0 0 10px 10px;
  background: rgba(201,168,76,.55);
  animation: winnerProgressBar 5s linear forwards;
  width: 100%;
  transform-origin: left;
}
.draw-winner-notif.expired .draw-winner-notif-progress { background: rgba(200,50,50,.55); }
@keyframes winnerProgressBar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
.draw-roller{background:linear-gradient(135deg,rgba(1,14,28,.9),rgba(6,32,53,.9));border:2px solid rgba(201,168,76,.4);border-radius:8px;padding:24px 20px;text-align:center;margin:0 0 16px;position:relative;overflow:hidden;}
.draw-roller::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(201,168,76,.06),transparent);pointer-events:none;}
.draw-roller-label{font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;color:var(--text-dim);margin-bottom:12px;}
.draw-roller-name{font-family:'Cinzel Decorative',serif;font-size:clamp(1.2rem,5vw,1.8rem);color:var(--gold-light);text-shadow:0 0 30px rgba(201,168,76,.5);min-height:2.5rem;display:flex;align-items:center;justify-content:center;transition:opacity .15s;}
.draw-roller-name.fade{opacity:0;}
.draw-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.draw-winner-box{background:linear-gradient(135deg,rgba(201,168,76,.08),rgba(201,168,76,.03));border:2px solid rgba(201,168,76,.5);border-radius:8px;padding:16px;text-align:center;margin:12px 0;}
.draw-winner-name{font-family:'Cinzel Decorative',serif;font-size:1.3rem;color:var(--gold-light);text-shadow:0 0 20px rgba(201,168,76,.4);}
.draw-participants-list{max-height:150px;overflow-y:auto;margin-top:8px;border:1px solid rgba(201,168,76,.12);border-radius:4px;}
.draw-participant-item{font-size:10px;padding:6px 10px;border-bottom:1px solid rgba(201,168,76,.07);color:var(--text-dim);}
.draw-participant-item:last-child{border-bottom:none;}
.draw-empty{text-align:center;padding:40px 20px;font-style:italic;color:var(--text-dim);font-family:'Crimson Text',serif;}
.draw-detail-section{padding:0 16px 12px;border-bottom:1px solid rgba(201,168,76,.1);}
.draw-detail-section:last-child{border-bottom:none;}

/* Dynamic Section links spacing */
.dynamic-sections-container { display: flex; flex-direction: column; gap: 20px; width: 100%; }

.translation-sub { font-family: 'Crimson Text', serif; font-style: italic; font-size: 11px; color: var(--text-dim); opacity: 0.8; margin-top: 4px; display: block; border-top: 1px dashed rgba(201,168,76,0.15); padding-top: 4px; }

/* ── CUSTOM AUTHENTICATION MODAL PREMIUM STYLES ── */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid rgba(201,168,76,0.12);
  margin-bottom: 18px;
}
.auth-tab-btn {
  flex: 1;
  padding: 12px 6px;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
}
.auth-tab-btn:hover {
  color: var(--gold-light);
  background: rgba(201,168,76,0.03);
}
.auth-tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  text-shadow: 0 0 8px rgba(201,168,76,0.3);
}
.auth-tab-content {
  animation: fadeInUp 0.3s ease;
}
.auth-form-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--gold-dark);
  text-transform: uppercase;
  font-weight: 600;
  text-align: left;
}
.auth-input {
  width: 100%;
  background: rgba(1,14,28,0.80);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 4px;
  padding: 10px 14px;
  color: var(--text);
  font-family: 'Crimson Text', serif;
  font-size: 0.95rem;
  outline: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
}
.auth-input:focus {
  border-color: rgba(201,168,76,0.5);
  background: rgba(10,10,10,0.85);
  box-shadow: 0 0 8px rgba(201,168,76,0.08);
}
.auth-btn-primary {
  width: 100%;
  background: linear-gradient(135deg, rgba(201,168,76,0.18), rgba(201,168,76,0.08));
  border: 1px solid rgba(201,168,76,0.45);
  border-radius: 4px;
  padding: 12px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--gold);
  cursor: pointer;
  font-weight: 700;
  transition: all 0.3s ease;
  text-transform: uppercase;
  margin-top: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.auth-btn-primary:hover {
  background: linear-gradient(135deg, rgba(201,168,76,0.3), rgba(201,168,76,0.15));
  border-color: var(--gold);
  color: var(--gold-light);
  box-shadow: 0 0 15px rgba(201,168,76,0.15);
  transform: translateY(-1px);
}
.auth-btn-primary:active {
  transform: translateY(1px);
}
.auth-link {
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.7;
  cursor: pointer;
  text-align: center;
  display: block;
  margin-top: 14px;
  transition: all 0.25s ease;
}
.auth-link:hover {
  color: var(--gold-light);
  opacity: 1;
  text-decoration: underline;
}

/* Auth password recovery notification box */
.auth-notif-box {
  background: rgba(201,168,76,0.05);
  border: 1px dashed rgba(201,168,76,0.25);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  margin-bottom: 16px;
  animation: tbPulse 2.5s ease-in-out infinite;
}
.auth-notif-title {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--gold-dark);
  margin-bottom: 6px;
}
.auth-notif-code {
  font-family: 'Cinzel Decorative', serif;
  font-size: 20px;
  color: var(--gold-light);
  letter-spacing: 4px;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(201,168,76,0.2);
}
.auth-notif-desc {
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--text-dim);
}

/* ── CUSTOM IN-APP CS INPUT ROW PREMIUM STYLES ── */
.cs-send-row {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: stretch;
  box-sizing: border-box;
}
.cs-input-field {
  flex: 1;
  background: rgba(1,14,28,0.80);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 4px;
  padding: 10px 14px;
  color: var(--text);
  font-family: 'Crimson Text', serif;
  font-size: 0.95rem;
  outline: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
  height: 38px;
}
.cs-input-field:focus {
  border-color: rgba(201,168,76,0.55);
}
.cs-input-field:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(139,26,26,0.05);
  border-color: rgba(192,57,43,0.3);
  color: #f0a0a0;
}
.cs-send-row .dev-btn-small {
  padding: 0 18px;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  box-sizing: border-box;
}

/* ── CUSTOM IN-APP CS CHAT BUBBLE PREMIUM STYLES ── */
#csBody {
  padding: 16px 20px 20px 20px;
  box-sizing: border-box;
}
.cs-messages-scroll {
  height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 0;
  margin-bottom: 12px;
  box-sizing: border-box;
}
.cs-messages-scroll::-webkit-scrollbar {
  width: 4px;
}
.cs-messages-scroll::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
}
.cs-messages-scroll::-webkit-scrollbar-thumb {
  background: rgba(201,168,76,0.3);
  border-radius: 2px;
}
.cs-msg-box {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  position: relative;
  animation: messageSlideIn 0.25s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  box-sizing: border-box;
}
@keyframes messageSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.cs-msg-box.self {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(17,13,7,0.85));
  border: 1px solid rgba(201,168,76,0.35);
  border-top-right-radius: 2px;
  box-shadow: 0 4px 15px rgba(201,168,76,0.05);
}
.cs-msg-box.other {
  align-self: flex-start;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(5,5,5,0.9));
  border: 1px solid rgba(255,255,255,0.1);
  border-top-left-radius: 2px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.cs-msg-sender {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--gold-light);
  margin-bottom: 4px;
  font-weight: 700;
}
.cs-msg-box.self .cs-msg-sender {
  color: #fff;
  opacity: 0.85;
  text-align: right;
}
.cs-msg-body {
  font-family: 'Crimson Text', serif;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}
.cs-msg-time {
  font-size: 7.5px;
  opacity: 0.55;
  margin-top: 4px;
  text-align: right;
  font-family: 'Cinzel', serif;
  color: var(--text-dim);
}
.cs-msg-box.self .cs-msg-time {
  color: rgba(255,255,255,0.6);
}

/* Music Player Styles */
.music-player-container { position: relative; background: linear-gradient(135deg,rgba(4,22,44,.97),rgba(3,14,30,.98)); border: 1px solid rgba(201,168,76,0.3); border-radius: 12px; overflow: hidden; margin-bottom: 30px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(201,168,76,0.1); min-height: 200px; }
#musicPlayerContainer::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(201,168,76,0.15) 0%, transparent 60%); animation: pulseBg 4s infinite alternate; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s; }
#musicPlayerContainer.is-playing::before { opacity: 1; }
@keyframes pulseBg { 0% { transform: scale(0.8); } 100% { transform: scale(1.1); } }
.css-visualizer { position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; display: flex; align-items: flex-end; justify-content: space-around; z-index: 1; opacity: 0.5; pointer-events: none; padding: 0 10px; box-sizing: border-box; }
.css-bar { flex: 1; max-width: 6px; background: linear-gradient(to top, rgba(201,168,76,0.8), rgba(201,168,76,0.2)); border-radius: 4px 4px 0 0; animation: bounceBar 1s infinite alternate ease-in-out; animation-play-state: paused; height: 10px; margin: 0 2px; }
#musicPlayerContainer.is-playing .css-bar { animation-play-state: running; }
@keyframes bounceBar { 0% { height: 10%; } 100% { height: 100%; } }
#musicVisualizer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.5; pointer-events: none; }
.music-content { position: relative; z-index: 2; text-align: center; width: 100%; }
.music-title { font-family: 'Cinzel Decorative', serif; font-size: 1.5rem; color: var(--gold); margin-bottom: 8px; letter-spacing: 2px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.music-time { font-family: 'Courier New', Courier, monospace; font-size: 0.9rem; color: var(--text-dim); margin-bottom: 16px; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.music-controls { display: flex; align-items: center; justify-content: center; gap: 20px; }
.music-btn { background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.4); color: var(--gold); border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; font-size: 1.2rem; outline: none; }
.music-btn:hover { background: rgba(201,168,76,0.3); transform: scale(1.1); box-shadow: 0 0 12px rgba(201,168,76,0.3); }
.music-btn.play-pause { width: 60px; height: 60px; font-size: 1.8rem; position: relative; overflow: visible; }


.pwd-wrapper { position: relative; display: block; width: 100%; }

#lsPlayBtn::before,
#lsPlayBtn::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(201,168,76,0.5) 30%, rgba(201,168,76,0.5) 70%, transparent 100%);
}
#lsPlayBtn::before { top: 0; }
#lsPlayBtn::after  { bottom: 0; }
.pwd-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--gold-dark); opacity: 0.7; transition: opacity 0.2s; background: none; border: none; padding: 0; outline: none; z-index: 10; }
.pwd-toggle:hover { opacity: 1; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 14px; background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; color: #fff; cursor: pointer; transition: all 0.3s; margin-top: 12px; font-family: 'Crimson Text', serif; font-size: 14px; }
.btn-google:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.4); }
/* ── GOLD GOOGLE LOGIN BUTTON ── */
.auth-btn-google {
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:11px 16px;
  background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(201,168,76,.06));
  border:1px solid rgba(201,168,76,.45);border-radius:6px;
  color:var(--gold-light);cursor:pointer;transition:all .3s ease;
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.5px;font-weight:600;
  box-shadow:0 0 12px rgba(201,168,76,.06);position:relative;overflow:hidden;
}
.auth-btn-google::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,rgba(201,168,76,.1) 0%,transparent 60%);opacity:0;transition:opacity .3s;}
.auth-btn-google:hover{background:linear-gradient(135deg,rgba(201,168,76,.22),rgba(201,168,76,.1));border-color:rgba(201,168,76,.75);box-shadow:0 0 20px rgba(201,168,76,.18),0 2px 8px rgba(0,0,0,.4);transform:translateY(-1px);color:#fff5d0;}
.auth-btn-google:hover::before{opacity:1;}
.auth-btn-google:active{transform:translateY(0);}
.auth-btn-google .g-logo-wrap{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.auth-btn-google .g-logo-wrap svg{width:13px;height:13px;}

/* Gold Google Login Button */
.auth-btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px;
  background: linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.06));
  border: 1.5px solid rgba(201,168,76,.5);
  border-radius: 6px;
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1.8px;
  color: var(--gold-light); cursor: pointer;
  transition: all .3s ease; box-sizing: border-box;
  box-shadow: 0 0 12px rgba(201,168,76,.08), inset 0 0 8px rgba(201,168,76,.04);
  position: relative; overflow: hidden;
}
.auth-btn-google::before {
  content: ''; position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(110deg, rgba(201,168,76,.14) 0%, transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.auth-btn-google:hover {
  background: linear-gradient(135deg, rgba(201,168,76,.22), rgba(201,168,76,.12));
  border-color: rgba(201,168,76,.85);
  color: #fff5d0;
  box-shadow: 0 0 24px rgba(201,168,76,.18), 0 2px 10px rgba(0,0,0,.5);
  transform: translateY(-1px);
}
.auth-btn-google:hover::before { opacity: 1; }
.auth-btn-google:active { transform: translateY(0); }
.auth-btn-google .g-circle {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.92); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.auth-btn-google .g-circle svg { width: 13px; height: 13px; }
/* Copy link helper */
.confirm-copy-btn {
  display:inline-flex; align-items:center; gap:5px; margin-top:8px;
  background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.3);
  border-radius:999px; padding:4px 12px; font-family:'Cinzel',serif;
  font-size:8px; letter-spacing:1.5px; color:var(--gold); cursor:pointer;
  transition:all .2s;
}
.confirm-copy-btn:hover { background:rgba(201,168,76,.22); border-color:rgba(201,168,76,.6); }
.confirm-copy-btn.copied { background:rgba(37,211,102,.1); border-color:rgba(37,211,102,.4); color:#4ade80; }