@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fira+Code:wght@400;500;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fira+Code:wght@400;500;600;700&display=swap"); /* ═══════════════════════════════════════════════════════════ RESET & BASE ═══════════════════════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box }
/* ── CSS CUSTOM PROPERTIES ───────────────────────────────────────── */
:root { --font-mono: "Fira Code", "Courier New", monospace; --border-glass: rgba(59, 130, 246, 0.15); --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #94a3b8; --accent-blue: #3b82f6; --accent-purple: #8b5cf6; --accent-neon: #06b6d4; --sidebar-width: 170px; --header-height: 55px; --bottom-nav-height: 65px; --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); --neon-glow: 0 0 5px rgba(59, 130, 246, 0.4), 0 0 15px rgba(6, 182, 212, 0.2); --neon-glow-strong: 0 0 8px rgba(59, 130, 246, 0.6), 0 0 25px rgba(6, 182, 212, 0.35) }
/* ── SCROLLBAR ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-neon), var(--accent-blue)); border-radius: 4px }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent-blue), var(--accent-purple)) }
/* ── BODY ────────────────────────────────────────────────────────── */
body { background: linear-gradient(145deg, #e8f0fe 0%, #dce6f5 30%, #c9d9ed 100%); color: var(--text-primary); font-family: "Inter", "Segoe UI", sans-serif; font-size: 14px; min-height: 100vh }
body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient( circle at 20% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50% ), radial-gradient( circle at 80% 80%, rgba(6, 182, 212, 0.06) 0%, transparent 50% ); pointer-events: none; z-index: 0 }
/* ── LOADING OVERLAY ─────────────────────────────────────────────── */
.loading-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s }
.loading-overlay.active { opacity: 1; visibility: visible }
.loading-spinner { display: flex; flex-direction: column; align-items: center; gap: 16px }
.loading-logo-wrap { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center }
.loading-logo-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; position: relative; z-index: 1; animation: logoBounce 1.5s ease-in-out infinite }
@keyframes logoBounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
.loading-ring {
position: absolute; inset: 0; border: 3px solid transparent; border-top-color: var(--accent-blue); border-right-color: var(--accent-neon); border-radius: 50%; animation: ringRotate 1s linear infinite }
@keyframes ringRotate {
  to {
    transform: rotate(360deg);
  }
}
.loading-bar {
width: 160px; height: 3px; background: rgba(255, 255, 255, 0.2); border-radius: 4px; overflow: hidden }
.loading-bar-inner { width: 40%; height: 100%; background: linear-gradient(90deg, var(--accent-neon), var(--accent-blue)); border-radius: 4px; animation: loadingSlide 1.2s ease-in-out infinite }
@keyframes loadingSlide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(350%);
  }
}
.loading-text {
font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.8); letter-spacing: 2px; text-transform: uppercase; animation: loadingPulse 1.5s ease-in-out infinite }
@keyframes loadingPulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
/* ── HEADER ──────────────────────────────────────────────────────── */
.top-header { display: flex; justify-content: space-between; align-items: center; padding: 0 14px; height: var(--header-height); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(59, 130, 246, 0.12); position: sticky; top: 0; z-index: 50; box-shadow: 0 4px 24px rgba(59, 130, 246, 0.1) }
.top-header::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--accent-blue); box-shadow: 0 0 8px rgba(59, 130, 246, 0.4), 0 0 16px rgba(6, 182, 212, 0.2); opacity: 0.6; transition: all 0.3s }
.top-header.loading::after { background: linear-gradient( 90deg, transparent, var(--accent-neon), var(--accent-blue), var(--accent-neon), transparent ); background-size: 200% 100%; animation: shimmerLine 0.8s ease-in-out infinite; opacity: 1; box-shadow: 0 0 12px rgba(59, 130, 246, 0.6), 0 0 24px rgba(6, 182, 212, 0.4) }
@keyframes shimmerLine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.header-left {
display: flex; align-items: center; gap: 14px }
.header-right { display: flex; align-items: center; gap: 4px }
.hide-header-icons .notif-icon { display: none }
.notif-icon { position: relative; cursor: pointer; font-size: 24px; color: var(--text-secondary); padding: 6px; transition: all 0.2s; display: flex; align-items: center; justify-content: center }
.notif-icon:hover { color: var(--accent-blue); transform: scale(1.1) }
.notif-badge { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; background: #ef4444; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); display: none }
.notif-badge.pulse { animation: notifPulse 1.5s ease-in-out infinite }
@keyframes notifPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.4);
  }
}
.header-logo {
width: 35px; height: 35px; border-radius: 50%; object-fit: cover; box-shadow: var(--neon-glow); animation: logoPulse 3s ease-in-out infinite }
@keyframes logoPulse {
  0%,
  100% {
    box-shadow: var(--neon-glow);
  }
  50% {
    box-shadow: var(--neon-glow-strong);
  }
}
.header-left h1 {
font-size: 20px; font-weight: 800; letter-spacing: 4px; background: linear-gradient( 135deg, var(--accent-neon), var(--accent-blue), var(--accent-purple) ); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: titleGlow 3s ease-in-out infinite, gradientShift 4s ease-in-out infinite; text-shadow: none }
@keyframes titleGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(6, 182, 212, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.6));
  }
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50% }
50% { background-position: 100% 50% }
}
.header-clock { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--accent-blue); letter-spacing: 1px; text-shadow: 0 0 8px rgba(59, 130, 246, 0.3) }
.header-clock .blink { color: var(--accent-blue) }
.header-clock .clock-wib { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--accent-neon); margin-left: 2px }
.header-text { display: flex; flex-direction: column; gap: 1px }
/* ── APP WRAPPER & LAYOUT ────────────────────────────────────────── */
.app-wrapper { max-width: 500px; margin: 0 auto; min-height: 100vh; background: linear-gradient( 180deg, rgba(240, 244, 248, 1) 0%, rgba(226, 232, 240, 0.95) 100% ); box-shadow: 0 0 60px rgba(59, 130, 246, 0.12), 0 0 120px rgba(6, 182, 212, 0.06); position: relative; z-index: 1 }
.main-layout { display: flex; height: calc(100vh - var(--header-height)); position: relative }
.main-content { flex: 1; overflow-y: auto; background: linear-gradient( 180deg, rgba(240, 244, 248, 0.5) 0%, rgba(226, 232, 240, 0.3) 100% ) }
.content-area { padding: 0 }
/* ── SIDEBAR ─────────────────────────────────────────────────────── */
.sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-right: 1px solid var(--border-glass); overflow-y: auto; position: relative; display: flex; flex-direction: column }
.sidebar-nav { flex: 1; padding: 8px }
.sidebar.hidden { display: none }
.has-bot-nav .sidebar { padding-bottom: 40px }
.sidebar-toggle { position: absolute; top: 50%; left: calc(var(--sidebar-width) - 13px); z-index: 10000; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); font-size: 11px; transform: translateY(-50%); background: rgba(0, 0, 0, 0.06); padding: 8px 4px; border: 1px solid rgba(0, 0, 0, 0.05) }
.sidebar.hidden ~ .sidebar-toggle { left: 8px; padding: 8px 4px; border: 1px solid rgba(0, 0, 0, 0.05) }
.sidebar-toggle:hover { color: var(--accent-blue); background: rgba(0, 0, 0, 0.1) }
.sidebar-toggle i { font-size: 11px }
.sidebar-toggle:hover i { transform: scale(1.2) }
.sidebar::-webkit-scrollbar { display: none }
.sidebar::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: var(--accent-blue); opacity: 0.5 }
/* ── NAV ITEM ────────────────────────────────────────────────────── */
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--text-secondary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; text-decoration: none; position: relative; overflow: hidden; border-left: 3px solid transparent; border-radius: 0 10px 10px 0 }
.nav-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(59, 130, 246, 0.1), transparent ); transform: translateX(-100%); transition: transform 0.5s ease }
.nav-item:hover::before { transform: translateX(100%) }
.nav-item:hover { color: var(--accent-blue); background: rgba(59, 130, 246, 0.06); transform: translateX(2px) }
.nav-item.active { background: linear-gradient( 135deg, rgba(59, 130, 246, 0.18), rgba(139, 92, 246, 0.1) ); color: var(--accent-blue); border-left: 3px solid var(--accent-blue); box-shadow: inset 0 0 24px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(59, 130, 246, 0.12); transform: translateX(2px) }
.nav-item.active i { animation: iconBounce 0.4s ease }
@keyframes iconBounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
.nav-item i {
font-size: 16px; width: 20px; text-align: center; transition: all 0.2s ease }
.nav-item:hover i { transform: scale(1.1); color: var(--accent-blue); text-shadow: 0 0 8px rgba(59, 130, 246, 0.4) }
/* ── PANEL ───────────────────────────────────────────────────────── */
.panel { background: rgba(255, 255, 255, 0.65); border: 1px solid var(--border-glass); border-radius: 4px; box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255, 255, 255, 0.9); height: calc(100vh - 65px); display: flex; flex-direction: column; animation: fadeIn 0.4s ease; margin: 4px; overflow: hidden }
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
    }
}
@keyframes to {
  from { opacity: 0; transform: translateY(0px) }
}

.panel-header {
padding: 8px 12px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 40%, #1d4ed8 100%); position: relative; overflow: hidden }
.panel-header::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent-neon), var(--accent-blue)); box-shadow: 0 0 8px rgba(59, 130, 246, 0.4) }
.panel-header-row { display: flex; align-items: center; justify-content: space-between }
.panel-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) }
.panel-title i { color: rgba(255, 255, 255, 0.9); animation: iconPulse 2s ease-in-out infinite }
@keyframes iconPulse {
  0%,
  100% {
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
  }
}
.panel-body {
flex: 1; padding: 10px; overflow-y: auto }
.panel-body.no-padding { display: flex; flex-direction: column; padding: 0; overflow: hidden }
[id^="page-"] { display: flex; flex-direction: column; flex: 1; overflow: hidden }
/* ── EMPTY STATE ─────────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 300px; color: var(--text-muted); gap: 12px }
.empty-state i { font-size: 48px; opacity: 0.3; animation: emptyPulse 2s ease-in-out infinite; background: linear-gradient(135deg, var(--accent-neon), var(--accent-blue)); -webkit-background-clip: text; background-clip: text; color: transparent }
@keyframes emptyPulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}
.empty-state p {
font-weight: 600; color: var(--text-muted) }
/* ── NOTIFICATIONS ───────────────────────────────────────────────── */
.notif-page { display: flex; flex-direction: column; height: 100% }
.notif-list { padding: 0; overflow-y: auto; flex: 1 }
.notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-glass); transition: all 0.2s; cursor: pointer }
.notif-item:last-child { border-bottom: none }
.notif-item.unread { background: rgba(59, 130, 246, 0.04) }
.notif-item:hover { background: rgba(59, 130, 246, 0.03) }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-blue); flex-shrink: 0; margin-top: 5px; opacity: 0; transition: opacity 0.2s }
.notif-item.unread .notif-dot { opacity: 1; animation: notifDotPulse 1.5s ease-in-out infinite }
@keyframes notifDotPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.3);
    box-shadow: 0 0 6px 2px rgba(59, 130, 246, 0.2);
  }
}
.notif-content {
flex: 1; min-width: 0 }
.notif-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px }
.notif-item.unread .notif-title { color: var(--accent-blue) }
.notif-broadcast-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; background: rgba(139, 92, 246, 0.12); color: #8b5cf6; font-size: 10px; margin-right: 4px; vertical-align: middle }
.notif-text { font-size: 11px; color: var(--text-secondary); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.notif-time { font-size: 10px; color: var(--text-muted); margin-top: 4px }
.notif-actions { display: flex; gap: 5px; padding: 8px; border-top: 1px solid var(--border-glass); margin-top: auto }
.notif-btn { flex: 1; padding: 8px; border: none; border-radius: 5px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px }
.notif-btn-primary { background: var(--accent-blue); color: white }
.notif-btn-primary:hover { background: #2563eb }
.notif-btn-danger { background: rgba(239, 68, 68, 0.1); color: #ef4444 }
.notif-btn-danger:hover { background: rgba(239, 68, 68, 0.2) }
/* ── DIALOG ──────────────────────────────────────────────────────── */
.dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s }
.dialog-overlay.active { opacity: 1; visibility: visible }
.dialog-box { background: white; border-radius: 14px; width: 320px; max-width: 90%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); overflow: hidden; transform: scale(0.95); transition: transform 0.2s }
.dialog-overlay.active .dialog-box { transform: scale(1) }
.dialog-header { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--border-glass) }
.dialog-header i { font-size: 28px; color: var(--accent-blue); margin-bottom: 4px; display: block }
.dialog-header h3 { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-top: 4px }
.dialog-body { padding: 14px 18px; text-align: left; font-size: 13px; color: var(--text-secondary); line-height: 1.6; font-family: "Fira Code", monospace }
.dialog-footer { display: flex; border-top: 1px solid var(--border-glass) }
.dialog-btn { flex: 1; padding: 12px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s }
.dialog-btn-cancel { background: transparent; color: var(--text-muted) }
.dialog-btn-cancel:hover { background: rgba(0, 0, 0, 0.03) }
.dialog-btn-confirm { background: var(--accent-blue); color: white }
.dialog-btn-confirm:hover { background: #2563eb }
/* ── DIALOG INFO ─────────────────────────────────────────────────── */
.dialog-info-box { width: 340px; max-width: 90%; max-height: 80vh; display: flex; flex-direction: column }
.dialog-info-header { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--border-glass) }
.dialog-info-header h3 { font-size: 15px; font-weight: 700; color: var(--text-primary) }
.dialog-info-body { padding: 14px 18px; text-align: left; font-size: 13px; color: var(--text-secondary); line-height: 1.6; font-family: "Fira Code", monospace; overflow-y: auto; flex: 1; min-height: 0 }
.dialog-info-footer { border-top: 1px solid var(--border-glass) }
.dialog-info-btn { width: 100%; padding: 12px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--accent-blue); color: white; transition: all 0.2s }
.dialog-info-btn:hover { background: #2563eb }
/* ── GAME LOGIN DIALOG ───────────────────────────────────────────── */
.dialog-overlay:has(.game-login-dialog) { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px) }
.game-login-dialog { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100% ); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 24px; width: 380px; max-width: 92%; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.18), 0 8px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(59, 130, 246, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); overflow: hidden; transform: scale(0.92) translateY(16px); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease; opacity: 0; position: relative }
.dialog-overlay.active .game-login-dialog { transform: scale(1) translateY(0); opacity: 1 }
.gl-dialog-shine { position: absolute; top: 0; left: 0; right: 0; height: 120px; background: linear-gradient( 180deg, rgba(59, 130, 246, 0.04) 0%, transparent 100% ); pointer-events: none; z-index: 0 }
.game-login-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); position: relative; z-index: 1 }
.game-login-dialog-header-left { display: flex; align-items: center; gap: 14px }
.game-login-dialog-icon { width: 44px; height: 44px; border-radius: 0; background: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden }
.game-login-dialog-icon img { width: 100%; height: 100%; object-fit: contain }
.game-login-dialog:hover .game-login-dialog-icon { transform: scale(1.06) rotate(-3deg) }
.game-login-dialog-header-left h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: -0.2px }
.game-login-dialog-header-left p { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; font-weight: 500 }
.game-login-dialog-header-left p strong { color: var(--accent-blue); font-weight: 600 }
.game-login-dialog-close { width: 34px; height: 34px; border: none; background: rgba(0, 0, 0, 0.03); border-radius: 50%; cursor: pointer; font-size: 22px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); line-height: 1 }
.game-login-dialog-close:hover { background: rgba(239, 68, 68, 0.08); color: #ef4444; transform: rotate(90deg) scale(1.1) }
.game-login-dialog-body { padding: 18px 22px 6px; position: relative; z-index: 1 }
.game-login-notice { background: linear-gradient( 135deg, rgba(59, 130, 246, 0.04), rgba(6, 182, 212, 0.03) ); border: 1px solid rgba(59, 130, 246, 0.1); border-radius: 14px; padding: 14px 16px; margin-bottom: 20px }
.game-login-notice-text { font-size: 12px; color: var(--text-secondary); line-height: 1.6 }
.game-login-notice-text strong { color: var(--accent-blue); font-weight: 600 }
/* ── Floating Label Input ────────────────────────────────────────── */
@property --border-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false }
.gl-float-group { position: relative; margin-bottom: 18px; border-radius: 10px; background: rgba(248, 250, 252, 0.5); transition: box-shadow 0.3s ease }
.gl-float-group::before { content: ""; position: absolute; inset: -1.5px; border-radius: 11px; border: 1.5px solid rgba(0, 0, 0, 0.12); pointer-events: none; transition: border-color 0.3s ease }
.gl-float-group:last-child { margin-bottom: 0 }
.gl-float-group:hover::before { border-color: rgba(0, 0, 0, 0.25) }
.gl-float-group:focus-within::before { border-color: transparent }
.gl-float-group::after { content: ""; position: absolute; inset: -2px; border-radius: 12px; padding: 2px; background: conic-gradient( from var(--border-angle), var(--accent-blue) 0%, #22d3ee 8%, #67e8f9 16%, var(--accent-blue) 24%, var(--accent-blue) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; transition: opacity 0.3s ease }
.gl-float-group:focus-within::after { opacity: 1; animation: glBorderSpin 1.8s linear infinite }
@keyframes glBorderSpin {
  to {
    --border-angle: 360deg;
  }
}
.gl-float-input {
width: 100%; background: transparent; border: none; border-radius: 10px; padding: 14px 14px 8px; font-size: 14px; font-weight: 500; color: var(--text-primary); font-family: "Fira Code", monospace; outline: none; position: relative; z-index: 1 }
.gl-float-label { position: absolute; left: 14px; top: 10px; font-size: 12px; font-weight: 400; color: var(--text-muted); pointer-events: none; transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: left top; display: flex; align-items: center; gap: 8px; background: rgba(248, 250, 252, 1); padding: 0 4px; z-index: 2; border-radius: 4px }
.gl-float-label i { font-size: 15px; color: var(--text-muted); transition: color 0.25s ease }
.gl-float-input:focus ~ .gl-float-label,
.gl-float-input:not(:placeholder-shown) ~ .gl-float-label { top: -8px; left: 10px; font-size: 9px; font-weight: 600; color: var(--accent-blue); letter-spacing: 0.2px }
.gl-float-input:focus ~ .gl-float-label i,
.gl-float-input:not(:placeholder-shown) ~ .gl-float-label i { color: var(--accent-blue); font-size: 12px }
.gl-input-phone { letter-spacing: 2px; font-weight: 600 }
/* ── Autobet Input (compact floating label) ──────────────────────── */
.ab-float-group { position: relative; border-radius: 6px; background: rgba(248, 250, 252, 0.5); transition: box-shadow 0.3s ease }
.ab-float-group::before { content: ""; position: absolute; inset: -1px; border-radius: 7px; border: 1.5px solid rgba(0, 0, 0, 0.12); pointer-events: none; transition: border-color 0.3s ease }
.ab-float-group:hover::before { border-color: rgba(0, 0, 0, 0.25) }
.ab-float-group:focus-within::before { border-color: transparent }
.ab-float-group::after { content: ""; position: absolute; inset: -2px; border-radius: 8px; padding: 2px; background: conic-gradient( from var(--border-angle), var(--accent-blue) 0%, #22d3ee 8%, #67e8f9 16%, var(--accent-blue) 24%, var(--accent-blue) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; transition: opacity 0.3s ease }
.ab-float-group:focus-within::after { opacity: 1; animation: glBorderSpin 1.8s linear infinite }
.ab-float-group:focus-within { box-shadow: none }
.ab-float-input { width: 100%; background: transparent; border: none; border-radius: 6px; padding: 6px 8px; font-size: 12px; font-weight: 500; color: var(--text-primary); font-family: "Fira Code", monospace; outline: none; position: relative; z-index: 1; height: 30px; box-sizing: border-box }
.ab-float-input::-webkit-outer-spin-button,
.ab-float-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.ab-float-label { position: absolute; left: 10px; top: 7px; font-size: 12px; font-weight: 400; color: var(--text-muted); pointer-events: none; transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: left top; background: rgba(248, 250, 252, 1); padding: 0 3px; z-index: 2; border-radius: 3px; white-space: nowrap }
.ab-float-input:focus ~ .ab-float-label,
.ab-float-input:not(:placeholder-shown) ~ .ab-float-label { top: -7px; left: 7px; font-size: 9px; font-weight: 600; color: var(--accent-blue); letter-spacing: 0.2px }
/* ── Eye Toggle ──────────────────────────────────────────────────── */
.gl-float-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 6px 8px; font-size: 14px; border-radius: 8px; transition: all 0.25s ease; z-index: 3 }
.gl-float-eye:hover { color: var(--accent-blue); background: rgba(59, 130, 246, 0.06); transform: translateY(-50%) scale(1.1); text-shadow: 0 0 8px rgba(59, 130, 246, 0.4) }
.gl-float-eye i { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) }
.gl-float-eye:active i { transform: scale(0.85) }
/* ── Login Dialog Footer ─────────────────────────────────────────── */
.game-login-dialog-footer { padding: 14px 22px 22px; display: flex; gap: 10px; position: relative; z-index: 1 }
.gl-btn-login { flex: 1; padding: 10px 14px; border: none; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(135deg, #06b6d4, #3b82f6); color: white; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25), 0 0 0 1px rgba(59, 130, 246, 0.1); display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 0.2px }
.gl-btn-login:hover { box-shadow: 0 8px 32px rgba(59, 130, 246, 0.35), 0 0 0 1px rgba(59, 130, 246, 0.15); transform: translateY(-2px) }
.gl-btn-login:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 12px rgba(59, 130, 246, 0.2) }
.gl-btn-login:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none }
.gl-btn-login i { font-size: 12px; transition: transform 0.3s ease }
.gl-btn-login:hover i { transform: translateX(2px) }
.gl-btn-daftar { flex: 1; padding: 10px 14px; border: 1.5px solid rgba(0, 0, 0, 0.08); border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: rgba(255, 255, 255, 0.7); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; gap: 8px }
.gl-btn-daftar:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(59, 130, 246, 0.04); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1) }
.gl-btn-daftar:active { transform: translateY(0) scale(0.98) }
.gl-btn-daftar i { font-size: 12px; transition: transform 0.3s ease }
.gl-btn-daftar:hover i { transform: scale(1.1) }
/* ── TOAST ───────────────────────────────────────────────────────── */
.toast-container { position: fixed; bottom: 18px; right: 0; z-index: 99999; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px; pointer-events: none }
.toast { background: white; border-radius: 6px 0 0 6px; padding: 10px 14px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--accent-blue), 0 0 8px rgba(59, 130, 246, 0.4), 0 0 20px rgba(6, 182, 212, 0.2); display: flex; align-items: flex-start; gap: 8px; font-size: 11px; font-weight: 500; color: var(--text-primary); max-width: 80vw; width: max-content; transform: translateX(120%); opacity: 0; transition: all 0.3s ease; pointer-events: auto }
.toast-msg { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; line-height: 1.5 }
.toast.show { transform: translateX(0); opacity: 1 }
.toast.hide { transform: translateX(120%); opacity: 0 }
.toast i { font-size: 16px }
.toast-success i { color: #10b981 }
.toast-error i { color: #ef4444 }
.toast-info i { color: var(--accent-blue) }
.toast-warning i { color: #f59e0b }
/* ── PROFILE POPUP ───────────────────────────────────────────────── */
.profile-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99990; visibility: hidden; transition: all 0.3s ease; background: rgba(0, 0, 0, 0.5) }
.profile-popup-overlay.show { visibility: visible }
.profile-popup-container { position: fixed; width: 260px; max-height: calc(100vh - 100px); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 16px; border: 1.5px solid rgba(59, 130, 246, 0.15); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(59, 130, 246, 0.08); opacity: 0; transform: scale(0.97); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 99991; overflow: hidden }
.profile-popup-overlay.show .profile-popup-container { opacity: 1; transform: scale(1) }
.profile-popup-banner { background: linear-gradient(135deg, var(--accent-neon), var(--accent-blue)); padding: 24px 20px 18px; text-align: center; position: relative; overflow: hidden }
.profile-popup-banner::before { content: ""; position: absolute; top: -30%; right: -20%; width: 120px; height: 120px; background: rgba(255, 255, 255, 0.08); border-radius: 50% }
.profile-popup-banner::after { content: ""; position: absolute; bottom: -40%; left: -10%; width: 100px; height: 100px; background: rgba(255, 255, 255, 0.06); border-radius: 50% }
.profile-popup-close { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.8); font-size: 12px; cursor: pointer; transition: all 0.2s; z-index: 1 }
.profile-popup-close:hover { background: rgba(255, 255, 255, 0.3); color: white }
.profile-popup-avatar-wrap { position: relative; display: inline-block; margin-bottom: 8px }
.profile-popup-avatar { width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: white; border: 2px solid rgba(255, 255, 255, 0.3); position: relative; z-index: 1 }
.profile-popup-avatar-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.15); animation: profileRingPulse 2s ease-in-out infinite }
@keyframes profileRingPulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}
.profile-popup-username {
font-size: 16px; font-weight: 700; color: white; letter-spacing: 0.5px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) }
.profile-popup-stats { padding: 10px 10px; background: rgba(59, 130, 246, 0.03); border-bottom: 1px solid rgba(59, 130, 246, 0.08); display: flex; justify-content: center; align-items: center; gap: 10px }
.profile-stat-item { flex: 1; text-align: center }
.profile-stat-divider { width: 1px; height: 28px; background: rgba(59, 130, 246, 0.15); flex-shrink: 0 }
.profile-stat-value { font-size: 18px; font-weight: 800; color: var(--accent-blue); line-height: 1.2 }
.profile-stat-label { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px }
.profile-stat-label i { font-size: 8px; margin-right: 2px }
.profile-stat-member .profile-stat-value { font-size: 16px }
.profile-stat-member .profile-stat-label { color: var(--accent-blue) }
.profile-popup-details { padding: 6px 14px }
.profile-detail-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 10px }
.profile-detail-row:not(:last-child) { border-bottom: 1px solid rgba(59, 130, 246, 0.05) }
.profile-detail-icon { width: 30px; height: 30px; background: linear-gradient( 135deg, rgba(6, 182, 212, 0.06), rgba(59, 130, 246, 0.06) ); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--accent-blue); font-size: 12px; flex-shrink: 0; border: 1px solid rgba(59, 130, 246, 0.08) }
.profile-detail-content { flex: 1; min-width: 0 }
.profile-detail-label { font-size: 9px; color: var(--text-muted); margin-bottom: 1px; text-transform: uppercase; letter-spacing: 0.5px }
.profile-detail-value { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.profile-popup-actions { display: flex; gap: 6px; padding: 8px 14px; border-bottom: 1px solid rgba(59, 130, 246, 0.05) }
.profile-action-btn { flex: 1; padding: 7px 6px; border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.25s; display: flex; align-items: center; justify-content: center; gap: 4px; border: none }
.profile-action-btn i { font-size: 10px }
.profile-action-btn.vip-btn { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2) }
.profile-action-btn.vip-btn:hover { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) }
.profile-action-btn.pwd-btn { background: linear-gradient(135deg, var(--accent-blue), #3b82f6); color: white; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) }
.profile-action-btn.pwd-btn:hover { box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35) }
.profile-popup-logout { width: calc(100% - 28px); margin: 10px 14px 14px; padding: 10px; border: none; border-radius: 10px; background: rgba(239, 68, 68, 0.12); color: #ef4444; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.25s; display: flex; align-items: center; justify-content: center; gap: 6px }
.profile-popup-logout:hover { background: rgba(239, 68, 68, 0.25); transform: translateY(-1px) }
/* ── HOME PAGE ───────────────────────────────────────────────────── */
.home-page { display: flex; flex-direction: column; height: 100%; position: relative }
.home-tabs-sticky { position: sticky; top: 0; z-index: 2; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 12px 10px 0 }
.home-tabs { display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none }
.home-tabs::-webkit-scrollbar { display: none }
.home-tab { padding: 6px 12px; border: 1.5px solid rgba(59, 130, 246, 0.12); background: transparent; color: var(--text-muted); font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; position: relative }
.home-tab + .home-tab { margin-left: -1.5px }
.home-tab:first-child { border-radius: 5px 0 0 5px }
.home-tab:last-child { border-radius: 0 5px 5px 0 }
.home-tab.active { background: var(--accent-blue); border-color: var(--accent-blue); color: white; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25); z-index: 1; font-weight: 700 }
.home-tab:hover:not(.active) { color: var(--text-secondary); background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.25) }
.home-tab-content { display: none; flex-direction: column; flex: 1; overflow-y: auto; padding: 0 }
.home-tab-content.active { display: flex }
.home-tab-content .empty-state { flex: 1 }
.home-info-list { display: flex; flex-direction: column; gap: 10px; padding: 12px 10px; flex: 1 }
.home-info-card { background: white; border-radius: 12px; padding: 16px; border: 1px solid rgba(59, 130, 246, 0.12); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(59, 130, 246, 0.06), 0 0 20px rgba(59, 130, 246, 0.06); transition: all 0.25s }
.home-info-card:hover { border-color: rgba(59, 130, 246, 0.25); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(59, 130, 246, 0.12), 0 0 32px rgba(59, 130, 246, 0.12) }
.home-info-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px }
.home-info-badge { font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px }
.home-info-badge.update { background: rgba(59, 130, 246, 0.1); color: var(--accent-blue) }
.home-info-badge.new { background: rgba(16, 185, 129, 0.1); color: #10b981 }
.home-info-badge.fix { background: rgba(245, 158, 11, 0.1); color: #f59e0b }
.home-info-badge.default { background: rgba(139, 92, 246, 0.1); color: #8b5cf6 }
.home-info-date { font-size: 9px; color: var(--text-muted) }
.home-info-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px }
.home-info-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.6; overflow: hidden; max-height: 36px; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative }
.home-info-desc::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 18px; background: linear-gradient(to bottom, transparent, white); pointer-events: none; transition: opacity 0.3s }
.home-info-card.expanded .home-info-desc { max-height: 500px }
.home-info-card.expanded .home-info-desc::after { opacity: 0 }
/* ── HOME — FAB (admin only) ─────────────────────────────────────── */
.home-info-fab { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #06b6d4, #3b82f6); color: white; border: none; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4); cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) }
.home-info-fab:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 8px 32px rgba(59, 130, 246, 0.5) }
.home-info-fab:active { transform: scale(0.95) }
.home-fab-wrap { position: absolute; bottom: 24px; right: 16px; z-index: 10 }
.home-fab-popup { display: none; position: absolute; bottom: 52px; right: 0; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); overflow: hidden; min-width: 180px }
.home-fab-popup.show { display: block }
.home-fab-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; border: none; background: none; font-size: 12px; font-weight: 600; color: var(--text-primary); cursor: pointer; text-align: left; transition: background 0.15s }
.home-fab-option:hover { background: rgba(59, 130, 246, 0.06) }
.home-fab-option i { font-size: 14px; width: 18px; text-align: center }
.home-fab-option:first-child { border-bottom: 1px solid rgba(0, 0, 0, 0.04) }
.home-fab-option[data-action="info"] i { color: #06b6d4 }
.home-fab-option[data-action="broadcast"] i { color: #8b5cf6 }
/* ── ADD INFO DIALOG ─────────────────────────────────────────────── */
.info-type-chips { display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 12px }
.info-type-chips::-webkit-scrollbar { display: none }
.info-type-chip { padding: 6px 12px; border: 1.5px solid rgba(59, 130, 246, 0.12); background: transparent; color: var(--text-muted); font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; position: relative }
.info-type-chip + .info-type-chip { margin-left: -1.5px }
.info-type-chip:first-child { border-radius: 5px 0 0 5px }
.info-type-chip:last-child { border-radius: 0 5px 5px 0 }
.info-type-chip.active { background: var(--accent-blue); border-color: var(--accent-blue); color: white; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25); z-index: 1; font-weight: 700 }
.info-type-chip:hover:not(.active) { color: var(--text-secondary); background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.25) }
.info-type-chip.custom { border-style: dashed }
.info-type-chip.custom.active { border-style: solid }
.info-custom-type-input { display: none; margin-top: -8px; margin-bottom: 16px }
.info-custom-type-input.show { display: block }
.gl-float-group textarea.gl-float-input { font-family: "Inter", sans-serif; resize: vertical; min-height: 80px; line-height: 1.5; padding-top: 16px }
/* ── RECHARGE / TOPUP ────────────────────────────────────────────── */
.recharge-page { display: flex; flex-direction: column; flex: 1; overflow: hidden }
.recharge-scroll { flex: 1; overflow-y: auto; padding: 12px }
.recharge-section { margin-bottom: 20px }
.recharge-section:last-child { margin-bottom: 0 }
.recharge-section-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid rgba(59, 130, 246, 0.08) }
.recharge-section-title i { font-size: 16px }
.recharge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.recharge-card { background: white; border-radius: 10px; padding: 10px 12px; cursor: pointer; border: 1.5px solid rgba(59, 130, 246, 0.08); border-left-width: 3px; transition: all 0.25s; box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.04), 0 0 20px rgba(59, 130, 246, 0.04), 0 1px 4px rgba(0, 0, 0, 0.02); position: relative }
.recharge-card[data-type="coin"] { border-left-color: #f59e0b }
.recharge-card[data-type="masa"] { border-left-color: #3b82f6 }
.recharge-card:hover { border-color: rgba(59, 130, 246, 0.2); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.08), 0 0 24px rgba(59, 130, 246, 0.08) }
.recharge-card.selected { border-color: rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.06); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2), 0 0 20px rgba(59, 130, 246, 0.1) }
.recharge-card.selected[data-type="coin"] { border-left-color: #d97706 }
.recharge-card.selected[data-type="masa"] { border-left-color: #2563eb }
.recharge-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px }
.recharge-card-top-left { display: flex; align-items: center; gap: 6px }
.recharge-card-top-left i { font-size: 13px; color: var(--text-muted) }
.recharge-card[data-type="coin"] .recharge-card-top-left i { color: #f59e0b }
.recharge-card[data-type="masa"] .recharge-card-top-left i { color: #3b82f6 }
.recharge-card-top-right { display: flex; align-items: center; gap: 4px }
.recharge-card-label { font-size: 12px; font-weight: 600; color: var(--text-primary) }
.recharge-card.selected .recharge-card-label { color: var(--accent-blue) }
.recharge-card-price-row { display: flex; align-items: baseline; gap: 6px }
.recharge-card-price { font-size: 10px; font-weight: 700; color: var(--text-primary) }
.recharge-card.selected .recharge-card-price { color: var(--accent-blue) }
.recharge-card-original { font-size: 9px; font-weight: 500; color: var(--text-muted); text-decoration: line-through }
.recharge-card-badge { font-size: 8px; font-weight: 700; color: white; background: linear-gradient(135deg, #ef4444, #dc2626); padding: 2px 5px; border-radius: 4px; line-height: 1.2; text-transform: uppercase }
.recharge-card-badge.vip { background: linear-gradient(135deg, #8b5cf6, #6366f1) }
.recharge-info { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(59, 130, 246, 0.1) }
.recharge-info-divider { height: 1px; background: rgba(59, 130, 246, 0.08); margin: 12px 0 }
.recharge-info-title { font-size: 13px; font-weight: 700; color: var(--accent-blue); margin-bottom: 4px; display: flex; align-items: center; gap: 5px }
.recharge-info-title i { font-size: 11px; color: var(--accent-blue) }
.recharge-info-text { font-size: 12px; color: var(--text-primary); line-height: 1.6 }
.recharge-info-text strong { color: #dc2626; font-weight: 700 }
.recharge-checkout-bar { flex-shrink: 0; background: white; border-top: 2px solid var(--accent-blue); padding: 10px 14px; display: none; align-items: center; justify-content: space-between; gap: 12px; z-index: 100 }
.recharge-checkout-bar.show { display: flex }
.recharge-checkout-left { flex: 1; min-width: 0 }
.recharge-checkout-items { font-size: 10px; color: var(--text-muted); font-weight: 500; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.recharge-checkout-items i { font-size: 9px; margin-right: 4px; color: var(--accent-blue) }
.recharge-checkout-total { font-size: 14px; font-weight: 800; color: var(--text-primary) }
.recharge-checkout-bar.show .recharge-checkout-total { color: var(--accent-blue) }
.recharge-checkout-btn { padding: 8px 20px; border: none; border-radius: 10px; background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; white-space: nowrap; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) }
.recharge-checkout-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45) }
.recharge-checkout-btn:active { transform: translateY(0) }
/* ── UPGRADE VIP PAGE ────────────────────────────────────────────── */
.uv-page { display: flex; flex-direction: column; flex: 1; overflow: hidden }
.uv-hero { position: relative; padding: 28px 16px 24px; text-align: center; overflow: hidden; background: linear-gradient( 145deg, #f59e0b 0%, #d97706 35%, #b45309 70%, #92400e 100% ) }
.uv-hero::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, transparent, rgba(255, 215, 0, 0.6), rgba(255, 255, 255, 0.4), rgba(255, 215, 0, 0.6), transparent ) }
.uv-hero-particles span { position: absolute; width: 4px; height: 4px; background: rgba(255, 255, 255, 0.25); border-radius: 50%; animation: uvFloat 6s ease-in-out infinite }
.uv-hero-particles span:nth-child(1) { left: 12%; top: 20%; animation-delay: 0s; animation-duration: 5s }
.uv-hero-particles span:nth-child(2) { left: 80%; top: 15%; animation-delay: 1s; animation-duration: 7s; width: 3px; height: 3px }
.uv-hero-particles span:nth-child(3) { left: 25%; top: 70%; animation-delay: 2s; animation-duration: 6s; width: 5px; height: 5px }
.uv-hero-particles span:nth-child(4) { left: 70%; top: 65%; animation-delay: 0.5s; animation-duration: 5.5s }
.uv-hero-particles span:nth-child(5) { left: 45%; top: 10%; animation-delay: 1.5s; animation-duration: 8s; width: 3px; height: 3px }
.uv-hero-particles span:nth-child(6) { left: 90%; top: 45%; animation-delay: 3s; animation-duration: 6.5s; width: 5px; height: 5px }
@keyframes uvFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.25;
  }
  50% {
    transform: translateY(-12px) scale(1.3);
    opacity: 0.5;
  }
}
.uv-hero-content {
position: relative; z-index: 1 }
.uv-crown-wrap { position: relative; display: inline-block; margin-bottom: 10px }
.uv-crown-ring { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255, 215, 0, 0.2); animation: uvRingPulse 2.5s ease-in-out infinite }
@keyframes uvRingPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.12);
    opacity: 0;
  }
}
.uv-crown-icon {
width: 50px; height: 50px; border-radius: 50%; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.2), rgba(255, 215, 0, 0.12) ); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, 0.3); box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18), 0 0 44px rgba(255, 215, 0, 0.2); animation: uvCrownFloat 3.5s ease-in-out infinite; position: relative }
@keyframes uvCrownFloat {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 6px 28px rgba(0, 0, 0, 0.18),
      0 0 44px rgba(255, 215, 0, 0.2);
  }
  50% {
    transform: translateY(-5px);
    box-shadow:
      0 10px 36px rgba(0, 0, 0, 0.22),
      0 0 56px rgba(255, 215, 0, 0.3);
  }
}
.uv-crown-icon i {
font-size: 22px; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 24px rgba(255, 215, 0, 0.35) }
.uv-hero-title { font-size: 18px; font-weight: 900; color: #fff; margin: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); letter-spacing: 2px }
.uv-hero-sub { font-size: 12px; color: rgba(255, 255, 255, 0.85); margin: 6px 0 0; font-weight: 500; letter-spacing: 0.3px }
.uv-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 10px; margin-top: 10px }
.uv-section { background: #fff; border: 1px solid rgba(59, 130, 246, 0.08); border-radius: 14px; padding: 16px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03) }
.uv-section-title { font-size: 14px; font-weight: 800; color: var(--accent-blue); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; padding-bottom: 10px; border-bottom: 2px solid rgba(59, 130, 246, 0.06) }
.uv-section-title i { font-size: 15px; color: #f59e0b }
.uv-benefit { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; transition: background 0.2s, box-shadow 0.2s; margin-bottom: 4px }
.uv-benefit:last-child { margin-bottom: 0 }
.uv-benefit:hover { background: rgba(59, 130, 246, 0.03); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06) }
.uv-benefit-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.vi-blue { background: linear-gradient( 135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.06) ); color: #3b82f6 }
.vi-amber { background: linear-gradient( 135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.06) ); color: #f59e0b }
.vi-purple { background: linear-gradient( 135deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.06) ); color: #8b5cf6 }
.vi-green { background: linear-gradient( 135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.06) ); color: #10b981 }
.vi-cyan { background: linear-gradient( 135deg, rgba(6, 182, 212, 0.12), rgba(6, 182, 212, 0.06) ); color: #06b6d4 }
.vi-gold { background: linear-gradient( 135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.08) ); color: #d97706 }
.uv-benefit-icon i { font-size: 14px }
.uv-benefit-body { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.uv-benefit-body strong { font-size: 13px; font-weight: 700; color: #1e293b }
.uv-benefit-body span { font-size: 11px; color: #94a3b8; line-height: 1.3 }
.uv-footer { display: flex; flex-direction: column; gap: 8px; margin-top: auto }
.uv-summary { background: #fff; border: 1px solid rgba(59, 130, 246, 0.08); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px }
.uv-summary-row { display: flex; align-items: center; justify-content: space-between }
.uv-summary-label { font-size: 11px; color: #94a3b8; font-weight: 500 }
.uv-summary-price { font-size: 13px; font-weight: 800; color: #1e293b }
.uv-summary-val { font-size: 12px; font-weight: 700 }
.uv-sv-gold { color: #d97706 }
.uv-sv-green { color: #10b981 }
.uv-upgrade-btn { width: 100%; padding: 10px; border: none; border-radius: 10px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; letter-spacing: 0.3px; transition: all 0.25s; box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3); position: relative; overflow: hidden }
.uv-upgrade-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.15), transparent ); transition: none }
.uv-upgrade-btn:hover:not(.disabled)::before { animation: uvShimmer 0.7s ease }
@keyframes uvShimmer {
  100% {
    left: 120%;
  }
}

.uv-upgrade-btn:hover:not(.disabled) { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(245, 158, 11, 0.45) }
.uv-upgrade-btn:active:not(.disabled) { transform: translateY(0) }
.uv-upgrade-btn.disabled { background: linear-gradient(135deg, #cbd5e1, #94a3b8); cursor: not-allowed; box-shadow: none; opacity: 0.75 }
.uv-upgrade-btn.disabled::before { display: none }
.uv-upgrade-btn i { font-size: 12px }
.uv-already-card { background: linear-gradient( 135deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.04) ); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 14px; padding: 28px 16px; text-align: center }
.uv-already-icon { font-size: 44px; color: #10b981; margin-bottom: 10px; animation: uvCheckPop 0.6s ease-out }
@keyframes uvCheckPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.uv-already-text {
font-size: 15px; font-weight: 700; color: #10b981; margin-bottom: 4px }
.uv-already-sub { font-size: 12px; color: #94a3b8 }
.server-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px }
.server-card { background: linear-gradient( 135deg, rgba(59, 130, 246, 0.08), rgba(6, 182, 212, 0.05) ); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.3s ease; position: relative; box-shadow: 0 0 8px rgba(59, 130, 246, 0.1), inset 0 0 12px rgba(59, 130, 246, 0.03) }
.server-card:hover { border-color: var(--accent-blue); box-shadow: 0 0 12px rgba(59, 130, 246, 0.3), 0 0 24px rgba(59, 130, 246, 0.15), inset 0 0 16px rgba(59, 130, 246, 0.05); transform: translateY(-2px) }
.server-card.active { border-color: var(--accent-blue); box-shadow: 0 0 16px rgba(59, 130, 246, 0.4), 0 0 32px rgba(59, 130, 246, 0.2), inset 0 0 20px rgba(59, 130, 246, 0.06) }
.server-card.soon { opacity: 0.55; cursor: default; border-style: dashed; border-color: rgba(100, 116, 139, 0.3); box-shadow: none; background: linear-gradient( 135deg, rgba(100, 116, 139, 0.06), rgba(100, 116, 139, 0.03) ) }
.server-card.soon:hover { transform: none; box-shadow: none }
.server-card.ready { border-color: rgba(16, 185, 129, 0.3); box-shadow: 0 0 8px rgba(16, 185, 129, 0.15) }
.server-card-thumb { position: relative; width: 100%; aspect-ratio: 1/1; background: linear-gradient( 135deg, rgba(59, 130, 246, 0.06), rgba(6, 182, 212, 0.04) ); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 8px }
.server-card.soon .server-card-thumb { background: linear-gradient( 135deg, rgba(100, 116, 139, 0.06), rgba(100, 116, 139, 0.03) ) }
.server-card-thumb img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(59, 130, 246, 0.2)); transition: all 0.3s ease }
.server-card.soon .server-card-thumb img { filter: none }
.server-card:hover .server-card-thumb img { filter: drop-shadow(0 4px 16px rgba(59, 130, 246, 0.4)); transform: scale(1.05) }
.server-card-info { padding: 6px; text-align: center; border-top: 1px solid rgba(59, 130, 246, 0.1); background: rgba(59, 130, 246, 0.04) }
.server-card.soon .server-card-info { border-top-color: rgba(100, 116, 139, 0.1); background: rgba(100, 116, 139, 0.04) }
.server-card-name { font-size: 10px; font-weight: 700; color: var(--accent-blue); display: flex; align-items: center; justify-content: center; gap: 4px; text-shadow: 0 0 8px rgba(59, 130, 246, 0.3) }
.server-card.soon .server-card-name { color: var(--text-muted); text-shadow: none }
.server-card-name i { color: var(--accent-blue); font-size: 10px; text-shadow: 0 0 6px rgba(59, 130, 246, 0.4) }
.card-badge { position: absolute; top: 4px; left: 4px; font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px; z-index: 2 }
.card-badge-ready { background: rgba(16, 185, 129, 0.85); color: #fff }
.card-badge-soon { background: rgba(100, 116, 139, 0.7); color: #fff }
/* ── SETTINGS PAGE ───────────────────────────────────────────────── */
.settings-page { display: flex; flex-direction: column; height: 100% }
.settings-back-btn { border: none; background: transparent; cursor: pointer; color: rgba(255, 255, 255, 0.85); transition: all 0.2s; font-size: 16px; flex-shrink: 0 }
.settings-back-btn:hover { color: white }
.settings-save-btn { border: none; background: white; color: var(--accent-blue); padding: 6px 12px; border-radius: 6px; font-size: 10px; font-weight: 700; cursor: pointer; transition: all 0.2s }
.settings-save-btn:hover { background: rgba(255, 255, 255, 0.85) }
.cus1-autofill-btn { border: none; background: var(--accent-blue); color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 9px; font-weight: 700; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 3px }
.cus1-autofill-btn i { font-size: 9px }
.cus1-autofill-btn:hover { background: #2563eb }
.settings-body { flex: 1; padding: 5px; overflow-y: auto }
.settings-page .panel-header { position: sticky; top: 0; z-index: 1 }
.settings-card { background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(72, 116, 187, 0.274); border-radius: 5px; padding: 8px; margin-bottom: 6px; box-shadow: 0 0 8px rgba(59, 130, 246, 0.1) }
.settings-card-title { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px }
.settings-card-title i { font-size: 11px; opacity: 0.6 }
.settings-game-tabs { display: flex; gap: 0; margin-bottom: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none }
.settings-game-tabs::-webkit-scrollbar { display: none }
.settings-game-tab { padding: 6px 12px; border: 1.5px solid rgba(59, 130, 246, 0.12); background: transparent; color: var(--text-muted); font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; position: relative }
.settings-game-tab + .settings-game-tab { margin-left: -1.5px }
.settings-game-tab:first-child { border-radius: 5px 0 0 5px }
.settings-game-tab:last-child { border-radius: 0 5px 5px 0 }
.settings-game-tab.active { background: var(--accent-blue); border-color: var(--accent-blue); color: white; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25); z-index: 1; font-weight: 700 }
.settings-game-tab:hover:not(.active) { color: var(--text-secondary); background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.25) }
.settings-mode-tab, .settings-tipe-tab, .settings-predik-tab, .settings-pola-tab, .az-mode-tab, .az-tipe-tab,
.settings-predik-tab-rng { padding: 5px 10px; border: 1.5px solid rgba(59, 130, 246, 0.12); background: transparent; color: var(--text-muted); font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); letter-spacing: 0.6px; white-space: nowrap; position: relative }
.settings-mode-tab + .settings-mode-tab, .settings-tipe-tab + .settings-tipe-tab, .settings-predik-tab + .settings-predik-tab, .settings-pola-tab + .settings-pola-tab, .az-mode-tab + .az-mode-tab, .az-tipe-tab + .az-tipe-tab,
.settings-predik-tab-rng + .settings-predik-tab-rng { margin-left: -1.5px }
.settings-mode-tab:first-child, .settings-tipe-tab:first-child, .settings-predik-tab:first-child, .settings-pola-tab:first-child, .az-mode-tab:first-child, .az-tipe-tab:first-child,
.settings-predik-tab-rng:first-child { border-radius: 5px 0 0 5px }
.settings-mode-tab:last-child, .settings-tipe-tab:last-child, .settings-predik-tab:last-child, .settings-pola-tab:last-child, .az-mode-tab:last-child, .az-tipe-tab:last-child,
.settings-predik-tab-rng:last-child { border-radius: 0 5px 5px 0 }
.settings-mode-tab.active, .settings-tipe-tab.active, .settings-predik-tab.active, .settings-pola-tab.active, .az-mode-tab.active, .az-tipe-tab.active,
.settings-predik-tab-rng.active { background: var(--accent-blue); border-color: var(--accent-blue); color: white; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25); z-index: 1; font-weight: 700 }
.settings-mode-tab:hover:not(.active), .settings-tipe-tab:hover:not(.active), .settings-predik-tab:hover:not(.active), .settings-pola-tab:hover:not(.active), .az-mode-tab:hover:not(.active), .az-tipe-tab:hover:not(.active),
.settings-predik-tab-rng:hover:not(.active) { color: var(--text-secondary); background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.25) }
.settings-autobet-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(59, 130, 246, 0.08) }
.settings-autobet-grid { display: flex; flex-direction: column; gap: 10px }
.settings-autobet-row { display: flex; gap: 8px }
.settings-autobet-row > .ab-float-group { flex: 1; min-width: 0 }
.settings-ai-row,
.settings-parlay-row { display: flex; align-items: center; justify-content: space-between }
.settings-ai-label { font-size: 12px; font-weight: 600; color: var(--text-primary) }
.settings-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0 }
.settings-switch input { opacity: 0; width: 0; height: 0 }
.settings-switch-slider { position: absolute; cursor: pointer; inset: 0; background: #cbd5e1; border-radius: 22px; transition: all 0.25s }
.settings-switch-slider::before { content: ""; position: absolute; left: 2px; bottom: 2px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: all 0.25s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) }
.settings-switch input:checked + .settings-switch-slider { background: var(--accent-blue); box-shadow: 0 0 8px rgba(59, 130, 246, 0.35) }
.settings-switch input:checked + .settings-switch-slider::before { transform: translateX(16px) }
/* ── Small Switch (Auto Repeat CUS PRVT) ─────────────────────────── */
.settings-switch-sm { position: relative; display: inline-block; width: 28px; height: 16px; flex-shrink: 0 }
.settings-switch-sm input { opacity: 0; width: 0; height: 0 }
.settings-switch-sm .settings-switch-sm-slider { position: absolute; cursor: pointer; inset: 0; background: #cbd5e1; border-radius: 16px; transition: all 0.25s }
.settings-switch-sm .settings-switch-sm-slider::before { content: ""; position: absolute; left: 2px; bottom: 2px; width: 12px; height: 12px; background: white; border-radius: 50%; transition: all 0.25s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) }
.settings-switch-sm input:checked + .settings-switch-sm-slider { background: var(--accent-blue); box-shadow: 0 0 8px rgba(59, 130, 246, 0.35) }
.settings-switch-sm input:checked + .settings-switch-sm-slider::before { transform: translateX(12px) }
/* ── AUTO REVERSE ────────────────────────────────────────────────── */
.ar-top-row { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; padding: 6px 8px; background: rgba(59, 130, 246, 0.04); border-radius: 5px }
.ar-cb-wrap { position: relative; display: inline-flex; align-items: center; gap: 4px; cursor: pointer }
.ar-cb-wrap input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0 }
.ar-cb-label { font-size: 11px; font-weight: 600; color: var(--text-primary); cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 5px }
.ar-cb-label::before { content: ""; display: inline-block; width: 14px; height: 14px; border: 1.5px solid #cbd5e1; border-radius: 3px; background: white; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0 }
.ar-cb-wrap input:checked + .ar-cb-label::before { background: var(--accent-blue); border-color: var(--accent-blue); box-shadow: 0 0 6px rgba(59, 130, 246, 0.35) }
.ar-cb-wrap input:checked + .ar-cb-label::after { content: "✓"; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: white; line-height: 1 }
.ar-cb-sm .ar-cb-label { font-size: 10px; gap: 4px }
.ar-cb-sm .ar-cb-label::before { width: 12px; height: 12px; border-radius: 2px }
.ar-cb-sm input:checked + .ar-cb-label::after { left: 2px; font-size: 9px }
.ar-inputs-row { display: flex; align-items: center; gap: 5px; padding: 6px 8px; background: rgba(255, 255, 255, 0.5); border-radius: 4px; flex-wrap: wrap }
.ar-inputs-row.ar-inputs-nowrap { flex-wrap: nowrap }
.ar-cb-col { display: flex; flex-direction: column; gap: 2px; padding: 3px 5px }
.ar-float-sm { flex: 0 0 72px }
.ar-float-sm .ab-float-input { padding: 4px 6px; height: 30px }
/* ── APP WRAPPER WITH BOTTOM NAV ─────────────────────────────────── */
.has-bot-nav .main-layout { height: calc(100vh - 32px - var(--bottom-nav-height)) }
.has-bot-nav .panel { height: calc(100vh - 42px - var(--bottom-nav-height)) }
/* ── BOT BOTTOM NAV ──────────────────────────────────────────────── */
.bot-bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 500px; max-width: 100%; z-index: 60; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--border-glass); box-shadow: 0 -4px 24px rgba(59, 130, 246, 0.08); display: flex; align-items: stretch }
.bot-nav-inner { display: flex; align-items: center; gap: 8px; padding: 0 12px; flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none }
.bot-nav-inner::-webkit-scrollbar { display: none }
.bot-nav-item { display: inline-flex; align-items: center; justify-content: center; padding: 10px 10px; cursor: pointer; transition: all 0.2s; color: var(--text-muted); position: relative; flex-shrink: 0 }
.bot-nav-item i { font-size: 18px; transition: all 0.2s }
.bot-nav-item:hover { color: var(--accent-blue) }
.bot-nav-item.active { color: var(--accent-blue) }
.bot-nav-item.active::after { content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 2.5px; background: linear-gradient(90deg, var(--accent-neon), var(--accent-blue)); border-radius: 0 0 4px 4px; box-shadow: 0 1px 8px rgba(59, 130, 246, 0.4) }
.bot-nav-item.active i { text-shadow: 0 0 6px rgba(59, 130, 246, 0.4) }
.bot-nav-img { width: 22px; height: 22px; object-fit: contain; filter: grayscale(0.6); opacity: 0.5; transition: all 0.2s }
.bot-nav-item:hover .bot-nav-img { filter: grayscale(0); opacity: 0.8 }
.bot-nav-item.active .bot-nav-img { filter: grayscale(0); opacity: 1; filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.4)) }
.bot-nav-close { flex: none; width: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); border-left: 1px solid var(--border-glass); transition: all 0.2s }
.bot-nav-close:hover { color: #ef4444 }
.bot-nav-close i { font-size: 14px }
/* ── 24H BOT — MODULE ────────────────────────────────────────────── */
._24hb-wrap { display: flex; flex-direction: column; flex: 1; overflow-y: auto; min-height: 0 }
/* ── Hero Banner ─────────────────────────────────────────────────── */
._24hb-hero { background: linear-gradient( 135deg, #0b1121 0%, #1a2332 40%, #0f1a2e 70%, #0b1121 100% ); padding: 40px 28px 36px; text-align: center; position: relative; overflow: hidden }
._24hb-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 600px 400px at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 60% ), radial-gradient( ellipse 500px 300px at 80% 70%, rgba(6, 182, 212, 0.1) 0%, transparent 50% ), radial-gradient( ellipse 300px 200px at 50% 10%, rgba(16, 185, 129, 0.06) 0%, transparent 50% ); pointer-events: none }
._24hb-hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(59, 130, 246, 0.3), rgba(6, 182, 212, 0.3), transparent ) }
._24hb-hero-icon { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #06b6d4); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 12px 32px rgba(59, 130, 246, 0.35), 0 0 0 4px rgba(59, 130, 246, 0.12); position: relative; transition: transform 0.3s ease; overflow: hidden }
._24hb-hero-icon:hover { transform: scale(1.05) rotate(-3deg) }
._24hb-hero-icon i { font-size: 30px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) }
._24hb-hero-title { font-size: 24px; font-weight: 900; color: #fff; letter-spacing: -0.5px; margin-bottom: 4px; position: relative; background: linear-gradient(135deg, #fff 60%, rgba(6, 182, 212, 0.8)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
._24hb-hero-subtitle { font-size: 13px; font-weight: 600; color: rgba(6, 182, 212, 0.7); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; position: relative }
._24hb-hero-desc { font-size: 13px; color: rgba(255, 255, 255, 0.5); line-height: 1.7; max-width: 380px; margin: 0 auto; position: relative }
._24hb-hero-desc strong { color: rgba(255, 255, 255, 0.75); font-weight: 600 }
/* ── Content Area ────────────────────────────────────────────────── */
._24hb-body { padding: 24px 16px 28px; display: flex; flex-direction: column; gap: 18px; max-width: 500px; width: 100%; margin: 0 auto }
._24hb-section-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; padding-left: 2px; margin-bottom: 2px }
/* ── RECHARGE ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ LOG GAME PAGE ── */
.log-page { display: flex; flex-direction: column; height: 100% }
.log-page .panel-header { position: sticky; top: 0; z-index: 1 }
.log-header-right { display: flex; align-items: center; gap: 6px }
.log-clear-btn { width: 30px; height: 30px; border: none; background: rgba(255, 255, 255, 0.15); border-radius: 6px; color: white; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s }
.log-clear-btn:hover { background: rgba(239, 68, 68, 0.3); transform: scale(1.05) }
.log-body { flex: 1; overflow-y: auto; padding: 0; display: flex; flex-direction: column }
.log-server-info { padding: 6px 12px; font-size: 10px; font-weight: 600; color: var(--text-muted); background: rgba(59, 130, 246, 0.04); border-bottom: 1px solid var(--border-glass); display: flex; align-items: center; gap: 6px }
.log-server-info i { font-size: 9px; color: var(--accent-blue) }
.log-list { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto }
.log-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; color: var(--text-muted); gap: 8px; min-height: 200px; padding: 40px 20px }
.log-empty i { font-size: 40px; opacity: 0.25; background: linear-gradient(135deg, var(--accent-neon), var(--accent-blue)); -webkit-background-clip: text; background-clip: text; color: transparent }
.log-empty p { font-size: 13px; font-weight: 700; color: var(--text-muted) }
.log-empty span { font-size: 11px; color: var(--text-muted); opacity: 0.6 }
.log-row { padding: 5px 12px; border-bottom: 1px solid rgba(59, 130, 246, 0.06); transition: background 0.2s }
.log-row:nth-child(even) { background: rgba(59, 130, 246, 0.02) }
.log-row:hover { background: rgba(6, 182, 212, 0.04) }
.log-line { display: flex; align-items: center; gap: 10px; padding: 1px 0 }
.log-label { flex-shrink: 0; width: 58px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px }
.log-msg { flex: 1; font-size: 12px; font-weight: 600; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.log-time { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--text-muted) }
.log-detail { font-size: 12px; font-weight: 500; color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
/* ── BOT — WRAP / HEADER (shared WINGO + HILO) ───────────────────── */
.bot-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0 }
.bot-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 40%, #1d4ed8 100%); position: relative; overflow: hidden }
.bot-header::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent-neon), var(--accent-blue)); box-shadow: 0 0 8px rgba(59, 130, 246, 0.4) }
.bot-header-left { display: flex; align-items: center; gap: 12px }
.bot-logo { width: 32px; height: 32px; flex-shrink: 0; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center }
.bot-logo img { width: 100%; height: 100%; object-fit: contain }
.bot-info { display: flex; flex-direction: column; gap: 2px }
.bot-title { font-size: 14px; font-weight: 800; color: white; letter-spacing: 1px; margin: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) }
.bot-server { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.75); display: flex; align-items: center; gap: 5px }
.bot-header-right { display: flex; align-items: center; gap: 8px }
.bot-btn { width: 30px; height: 30px; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); font-size: 12px }
.bot-btn-play { background: rgba(16, 185, 129, 0.85); color: white }
.bot-btn-play:hover { background: rgba(16, 185, 129, 1); transform: scale(1.08); box-shadow: 0 2px 12px rgba(16, 185, 129, 0.5) }
.bot-btn-play i { margin: 0; font-size: 13px }
.bot-btn-play.running { background: rgba(239, 68, 68, 0.85) }
.bot-btn-play.running:hover { background: rgba(239, 68, 68, 1); box-shadow: 0 2px 12px rgba(239, 68, 68, 0.5) }
.bot-btn-history { background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.85) }
.bot-btn-history:hover { background: rgba(255, 255, 255, 0.3); color: white; transform: scale(1.08); box-shadow: 0 2px 12px rgba(255, 255, 255, 0.2) }
.bot-btn:active { transform: scale(0.95) }
/* ── BOT — TARGET BAR ────────────────────────────────────────────── */
.bot-target-bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; background: linear-gradient( 135deg, rgba(59, 130, 246, 0.06), rgba(6, 182, 212, 0.04) ); border-bottom: 1px solid rgba(59, 130, 246, 0.1); flex-shrink: 0; gap: 6px }
.bot-target-item { font-size: 10px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 4px; white-space: nowrap }
.bot-target-item i { font-size: 10px }
.bot-target-item.modal { color: var(--accent-blue) }
.bot-target-item.modal i { color: var(--accent-blue) }
.bot-target-right { display: flex; align-items: center; gap: 4px }
.bot-target-chip { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px }
.bot-target-chip i { font-size: 9px }
.bot-target-chip.profit { background: rgba(16, 185, 129, 0.1); color: #10b981 }
.bot-target-chip.profit.negative { background: rgba(239, 68, 68, 0.1); color: #ef4444 }
.bot-target-chip.target { background: rgba(0, 0, 0, 0.06); color: #1e293b }
.bot-target-chip.balance { background: rgba(59, 130, 246, 0.1); color: var(--accent-blue) }
/* ── BOT — CONTENT ───────────────────────────────────────────────── */
.bot-content { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; overflow: hidden }
.bot-list { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto }
.bot-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; color: var(--text-muted); gap: 8px; min-height: 100px }
.bot-empty i { font-size: 36px; opacity: 0.3 }
.bot-empty p { font-size: 12px; font-weight: 600 }
/* ── BOT — ROW ───────────────────────────────────────────────────── */
.bot-row { display: flex; width: 100%; border-bottom: 1px solid rgba(59, 130, 246, 0.08); align-items: stretch }
.bot-row:last-child { border-bottom: none }
.bot-row:nth-child(even) { background: rgba(59, 130, 246, 0.03) }
.bot-row:hover { background: rgba(6, 182, 212, 0.05) }
/* ── BOT — STATS ─────────────────────────────────────────────────── */
.bot-stats { display: flex; border-top: 1.5px solid rgba(59, 130, 246, 0.25); background: linear-gradient( 180deg, rgba(59, 130, 246, 0.06), rgba(6, 182, 212, 0.03) ); padding: 5px 4px }
.bot-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative }
.bot-stat + .bot-stat::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: rgba(59, 130, 246, 0.2) }
.bot-stat-label { font-size: 7px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px }
.bot-stat-value { font-size: 12px; font-weight: 800; color: var(--text-primary); line-height: 1; font-family: var(--font-mono) }
.bot-stat-win { color: #10b981; text-shadow: 0 0 12px rgba(16, 185, 129, 0.4) }
.bot-stat-los { color: #ef4444; text-shadow: 0 0 12px rgba(239, 68, 68, 0.4) }
/* ── BOT — CELL ──────────────────────────────────────────────────── */
.bot-cell { padding: 5px 4px 3px 4px; font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center; line-height: 1.3; font-family: "Inter", "Segoe UI", sans-serif; text-align: center }
.bot-cell-period { text-align: left; font-weight: 600; justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 1px; padding-left: 6px }
.bot-period-id { font-size: 11px; font-weight: 600; color: var(--text-primary) }
.bot-period-time { font-size: 8px; font-weight: 600; color: var(--text-muted); letter-spacing: 1px; font-family: var(--font-mono); display: flex; align-items: center; gap: 3px }
.bot-w-30 { width: 28%; flex-shrink: 0 }
.bot-w-26 { width: 26%; flex-shrink: 0 }
.bot-w-18 { width: 18%; flex-shrink: 0 }
.bot-w-14 { width: 14%; flex-shrink: 0 }
.bot-w-13 { width: 13%; flex-shrink: 0 }
/* ── BOT — PREDICT MODE ──────────────────────────────────────────── */
.bot-predict-mode { font-size: 9px; font-weight: 600; color: var(--text-muted); letter-spacing: 1px; font-family: var(--font-mono) }
.bot-mode-ikuti { color: #10b981 }
.bot-mode-lawan { color: #ef4444 }
.bot-mode-skip { color: #94a3b8; font-size: 12px; font-weight: 700 }
.bot-mode-bet { color: #1e293b; font-weight: 700 }
/* ── BOT — STATUS ────────────────────────────────────────────────── */
.bot-status { font-size: 10px; font-weight: 600; padding: 3px 5px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; letter-spacing: 0.5px; height: 28px }
.bot-status-win { background: linear-gradient(135deg, #10b981, #059669); color: #fff }
.bot-status-jp { background: linear-gradient(135deg, #a855f7, #10b981, #059669); background-size: 200% 200%; color: #fff; animation: jpShimmer 2s ease-in-out infinite; position: relative; overflow: hidden }
.bot-status-jp::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.15), transparent ); transform: translateX(-100%); animation: jpSweep 2s ease-in-out infinite }
@keyframes jpShimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes jpSweep {
0% { transform: translateX(-100%) }
60% { transform: translateX(100%) }
100% { transform: translateX(100%) }
}
.bot-status-lose { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff }
.bot-status-wait { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff }
.bot-status-skip { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff }
.bot-result-wait { background: #94a3b8; color: #fff }
/* ── BOT — BET ───────────────────────────────────────────────────── */
.bot-bet-btn { background: linear-gradient(135deg, #06b6d4, #3b82f6); border: none; border-radius: 4px; color: white; font-size: 10px; font-weight: 600; padding: 3px 6px; min-width: 38px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; letter-spacing: 0.5px; text-align: center }
.bot-bet-text { font-size: 9px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; min-height: 28px; min-width: 42px }
.bot-bet-text i { color: #10b981; font-size: 14px }
.bot-bet-text .bet-text-none { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 1px; opacity: 0.6 }
/* ── WINGO — GAME SPECIFIC ───────────────────────────────────────── */
.wg-predict-besar { background: linear-gradient(to bottom, #1d4ed8, #2563eb) }
.wg-predict-kecil { background: linear-gradient(to bottom, #0ea5e9, #0284c7) }
.wg-predict-merah { background: linear-gradient(to bottom, #ef4444, #dc2626) }
.wg-predict-hijau { background: linear-gradient(to bottom, #10b981, #059669) }
.wg-predict-km { background: linear-gradient(to bottom, #38bdf8, #ef4444) }
.wg-predict-kh { background: linear-gradient(to bottom, #38bdf8, #10b981) }
.wg-predict-bm { background: linear-gradient(to bottom, #3b82f6, #ef4444) }
.wg-predict-bh { background: linear-gradient(to bottom, #3b82f6, #10b981) }
.wg-predict-combo-box { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px 5px; border-radius: 4px; line-height: 1.2; gap: 1px; color: #fff; min-width: 60px; min-height: 28px }
.wg-predict-combo-text { font-size: 11px; font-weight: 700; color: #fff }
.wg-predict-combo-mode { font-size: 8px; font-weight: 600; font-family: var(--font-mono); letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.85) }
.wg-result { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff }
.wg-result-0 { background: linear-gradient(135deg, #a855f7, #ef4444) }
.wg-result-5 { background: linear-gradient(135deg, #a855f7, #10b981) }
.wg-result-even { background: #ef4444 }
.wg-result-odd { background: #10b981 }
.wg-result.bot-result-wait { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff }
/* ── HILO — GAME SPECIFIC ────────────────────────────────────────── */
.hl-predict-hitam { background: linear-gradient(to bottom, #1a1a1a, #000000) }
.hl-predict-merah { background: linear-gradient(to bottom, #ef4444, #dc2626) }
.hl-predict-number { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff }
.hl-predict-joker { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff }
.hl-result { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; font-weight: 700; font-size: 12px; color: #fff }
.hl-result.hl-spades { background: #1a1a1a }
.hl-result.hl-hearts { background: #ef4444 }
.hl-result.hl-joker { background: #22c55e; font-size: 14px; font-weight: 400 }
.hl-result.bot-result-wait { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; background: #94a3b8; color: #fff; font-weight: 700; font-size: 12px }
/* ── ROULETTE predict ────────────────────────────────────────────── */
.rg-predict-merah { background: linear-gradient(to bottom, #ef4444, #dc2626) }
.rg-predict-hitam { background: linear-gradient(to bottom, #1a1a1a, #000000) }
.rg-predict-joker { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff }
/* ── ROULETTE result ─────────────────────────────────────────────── */
.rg-result { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; font-weight: 700; font-size: 12px; color: #fff }
.rg-result.rg-result-0 { background: #22c55e; font-size: 14px; font-weight: 400 }
.rg-result.rg-result-merah { background: #ef4444 }
.rg-result.rg-result-hitam { background: #1a1a1a }
.rg-result.bot-result-wait { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; background: #94a3b8; color: #fff; font-weight: 700; font-size: 12px }
/* ── CRASH ──────────────────────────────────────────────────────── */
.crash-result { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; font-weight: 700; font-size: 12px; color: #fff }
.crash-result.bot-result-wait { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; background: #94a3b8; color: #fff; font-weight: 700; font-size: 12px }
/* ── SUPPORT — CHAT ──────────────────────────────────────────────── */
.sup-wrap { display: flex; flex-direction: column; height: 100% }
.hidden { display: none !important }
.sup-chat { display: flex; flex-direction: column; height: 100%; position: relative }
/* ── Welcome Screen ──────────────────────────────────────────────── */
.sup-welcome { display: flex; align-items: center; justify-content: center; height: 100%; padding: 32px 24px }
.sup-welcome-content { text-align: center; max-width: 320px }
.sup-welcome-icon { width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(135deg, var(--accent-neon), var(--accent-blue)); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: 0 12px 32px rgba(59, 130, 246, 0.3); animation: supIconFloat 3s ease-in-out infinite }
@keyframes supIconFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.sup-welcome-icon i {
font-size: 30px; color: white }
.sup-welcome-title { font-size: 20px; font-weight: 800; color: var(--text-primary); margin-bottom: 10px }
.sup-welcome-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 28px }
.sup-start-btn { padding: 14px 32px; border: none; border-radius: 14px; font-size: 14px; font-weight: 700; cursor: pointer; background: linear-gradient(135deg, var(--accent-neon), var(--accent-blue)); color: white; box-shadow: 0 6px 24px rgba(59, 130, 246, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 8px }
.sup-start-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4) }
.sup-start-btn:active { transform: translateY(0) scale(0.98) }
.sup-start-btn i { font-size: 15px }
/* ── Chat Header ─────────────────────────────────────────────────── */
.sup-chat-header { display: flex; align-items: center; padding: 12px 16px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 40%, #1d4ed8 100%); position: sticky; top: 0; z-index: 5 }
.sup-chat-header::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent-neon), var(--accent-blue)); box-shadow: 0 0 8px rgba(59, 130, 246, 0.4) }
.sup-chat-header-left { display: flex; align-items: center; gap: 12px }
.sup-chat-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.3) }
.sup-chat-info { display: flex; flex-direction: column; gap: 2px }
.sup-chat-name { font-size: 14px; font-weight: 700; color: white }
.sup-chat-status { font-size: 11px; color: rgba(255, 255, 255, 0.7); display: flex; align-items: center; gap: 5px; margin-top: 1px }
.sup-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.5); animation: supPulse 1.5s ease-in-out infinite }
@keyframes supPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}
/* ── Chat Area ───────────────────────────────────────────────────── */
.sup-chat-area { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 6px; background: rgba(248, 250, 252, 0.5); min-height: 0 }
.sup-chat-date { text-align: center; font-size: 10px; font-weight: 600; color: var(--text-muted); padding: 4px 12px; background: rgba(0, 0, 0, 0.04); border-radius: 10px; align-self: center; margin: 6px 0 }
/* ── Messages ────────────────────────────────────────────────────── */
.sup-msg { display: flex; max-width: 78%; animation: supMsgIn 0.3s ease }
@keyframes supMsgIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.sup-msg-admin {
align-self: flex-start }
.sup-msg-user { align-self: flex-end }
.sup-msg-bubble { padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.5 }
.sup-msg-admin .sup-msg-bubble { background: white; color: var(--text-primary); border-bottom-left-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) }
.sup-msg-user .sup-msg-bubble { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; border-bottom-right-radius: 4px; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) }
.sup-msg-text { word-break: break-word }
.sup-msg-image { max-width: 120px; max-height: 120px; border-radius: 6px; display: block; margin-bottom: 4px; object-fit: cover; cursor: pointer }
.sup-msg-image-link { display: inline-block; text-decoration: none; margin-bottom: 4px }
.sup-msg-image-fallback { display: inline-block; padding: 8px 14px; background: rgba(0, 0, 0, 0.05); border-radius: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; margin-bottom: 4px }
.sup-msg-image-fallback:hover { background: rgba(0, 0, 0, 0.1) }
.sup-msg-time { font-size: 9px; color: var(--text-muted); margin-top: 4px; text-align: right }
.sup-msg-user .sup-msg-time { color: rgba(255, 255, 255, 0.6) }
/* ── Input Area ──────────────────────────────────────────────────── */
.sup-input-area { padding: 6px 8px; border-top: 1px solid var(--border-glass); background: white; position: sticky; bottom: 0; z-index: 5; max-width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 4px }
.sup-input-area > * { min-width: 0 }
.sup-input-wrapper { flex: 1; display: flex; align-items: flex-end; gap: 6px; background: rgba(248, 250, 252, 0.9); border: 1.5px solid var(--accent-blue); border-radius: 7px; padding: 3px 3px 3px 4px; transition: border-color 0.25s ease, box-shadow 0.25s ease; box-sizing: border-box; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.08), 0 0 10px rgba(59, 130, 246, 0.06) }
.sup-input-wrapper:focus-within { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 0 14px rgba(59, 130, 246, 0.12) }
.sup-attach-text { width: 100%; font-size: 10px; font-weight: 600; color: var(--accent-blue); cursor: pointer; padding: 2px 8px 4px; user-select: none; transition: opacity 0.2s }
.sup-attach-text:hover { opacity: 0.7 }
.sup-input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 13px; color: var(--text-primary); outline: none; padding: 8px 4px; resize: none; overflow-y: auto; line-height: 1.4; max-height: 100px; font-family: inherit }
.sup-input::placeholder { color: var(--text-muted) }
.sup-send-btn { width: 38px; height: 38px; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--accent-neon), var(--accent-blue)); color: white; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; flex-shrink: 0; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) }
.sup-send-btn:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) }
.sup-send-btn:active { transform: scale(0.95) }
.sup-scroll-btn { position: absolute; bottom: 85px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--accent-neon), var(--accent-blue)); color: white; font-size: 13px; cursor: pointer; box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35); z-index: 10; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease }
.sup-scroll-btn.show { opacity: 0.75; visibility: visible }
.sup-scroll-btn:hover { transform: scale(1.1) }
.sup-pending-image { display: none; align-items: center; gap: 6px; padding: 8px 14px; background: rgba(59, 130, 246, 0.06); border-top: 1px solid rgba(59, 130, 246, 0.1); flex-shrink: 0 }
.sup-pending-image i { font-size: 12px; color: var(--accent-blue); flex-shrink: 0 }
.sup-pending-image span { flex: 1; font-size: 11px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sup-pending-image button { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 4px; font-size: 11px; flex-shrink: 0; transition: color 0.2s }
.sup-pending-image button:hover { color: #ef4444 }
.sup-chat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 40px 32px; text-align: center; animation: fadeIn 0.6s ease }
.sup-chat-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient( 135deg, rgba(6, 182, 212, 0.12), rgba(59, 130, 246, 0.1) ); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; animation: supIconFloat 3s ease-in-out infinite }
.sup-chat-empty-icon i { font-size: 26px; color: #3b82f6; opacity: 0.6 }
.sup-chat-empty-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px }
.sup-chat-empty-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; max-width: 200px }
/* ── POLA CUSTOM SECTIONS (CUS SRV / CUS PRVT) ───────────────────── */
.pola-cus1-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 6px }
.pola-cus2-wrap { margin-top: 10px }
.pola-label { font-size: 10px; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px }
.pola-textarea { width: 100%; min-height: 60px; border: 1px solid rgba(72, 116, 187, 0.4); border-radius: 5px; padding: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); font-family: monospace; background: rgba(255, 255, 255, 0.8); resize: vertical; outline: none; transition: border-color 0.2s; line-height: 1.5 }
.pola-textarea:focus { border-color: var(--accent-blue) }
.pola-cus2-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px }
.pola-char-count { font-size: 9px; font-weight: 600; color: var(--text-muted) }
.pola-char-count span { font-weight: 700; color: var(--accent-blue) }
/* ── POLA RNG/VIP WRAP ───────────────────────────────────────────── */
.pola-rng-vip-wrap { margin-top: 10px }
/* ── BOTTOM SHEET BET DIALOG ─────────────────────────────────────── */
.bottom-sheet-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 99998; display: flex; align-items: flex-end; justify-content: center }
.bottom-sheet { width: 100%; max-width: 500px; background: #fff; border-radius: 4px 4px 0 0; box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15); transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); padding: 0 20px 24px }
.bottom-sheet.open { transform: translateY(0) }
.bottom-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 4px; position: relative }
.bottom-sheet-handle { width: 36px; height: 4px; background: #d1d5db; border-radius: 4px; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); top: 8px }
.bottom-sheet-title { font-size: 15px; font-weight: 700; color: var(--text-primary) }
.payment-sheet { padding: 0 16px 24px }
.payment-methods-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px }
.payment-method-item { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid rgba(0, 0, 0, 0.12); border-radius: 14px; cursor: pointer; transition: all 0.2s; background: #f8fafc }
.payment-method-item:hover { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08) }
.payment-method-item:active { transform: scale(0.98) }
.payment-method-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px }
.payment-method-item[data-type="otomatis"] .payment-method-icon { background: rgba(6, 182, 212, 0.1); color: var(--accent-neon) }
.payment-method-item[data-type="manual"] .payment-method-icon { background: rgba(59, 130, 246, 0.1); color: var(--accent-blue) }
.payment-method-body { flex: 1; min-width: 0 }
.payment-method-name { font-size: 13px; font-weight: 700; color: var(--text-primary) }
.payment-method-desc { font-size: 10px; color: var(--text-muted); margin-top: 1px }
.payment-method-arrow { font-size: 12px; color: var(--text-muted); flex-shrink: 0 }
.payment-method-price { font-size: 11px; font-weight: 700; color: var(--accent-blue); background: rgba(59, 130, 246, 0.08); padding: 4px 10px; border-radius: 8px; white-space: nowrap; flex-shrink: 0 }
/* ── PAYMENT QR VIEW ─────────────────────────────────────────────── */
.payment-qr-view { margin-top: 12px }
.payment-qr-back { display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--accent-blue); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; transition: opacity 0.2s; margin-right: auto }
.payment-qr-back:hover { opacity: 0.7 }
.payment-qr-card { background: #f8fafc; border: 1.5px solid rgba(0, 0, 0, 0.1); border-radius: 16px; padding: 18px 16px }
.payment-qr-header { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px }
.payment-qr-header i { font-size: 16px; color: var(--accent-blue) }
.payment-qr-img-wrap { display: flex; justify-content: center; margin-bottom: 16px }
.payment-qr-img { width: 200px; height: 200px; object-fit: cover; border-radius: 12px; border: 2px solid rgba(0, 0, 0, 0.06) }
.payment-qr-details { display: flex; flex-direction: column; gap: 0; background: white; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.08); overflow: hidden; margin-bottom: 12px }
.payment-qr-detail-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px }
.payment-qr-detail-row + .payment-qr-detail-row { border-top: 1px solid rgba(0, 0, 0, 0.06) }
.payment-qr-detail-label { font-size: 11px; color: var(--text-muted); font-weight: 500 }
.payment-qr-detail-value { font-size: 12px; font-weight: 700; color: var(--text-primary) }
.payment-qr-price { color: var(--accent-blue); font-size: 14px }
.payment-qr-badge { font-size: 10px; font-weight: 700; color: #f59e0b; background: rgba(245, 158, 11, 0.1); padding: 3px 8px; border-radius: 6px }
.payment-qr-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: rgba(59, 130, 246, 0.04); border-radius: 10px; font-size: 10px; color: var(--text-muted); line-height: 1.5 }
.payment-qr-note i { color: var(--accent-blue); margin-top: 1px; flex-shrink: 0 }
.payment-qr-note strong { color: var(--accent-blue) }
/* ── PAYMENT PROCESS BTN (sticky) ────────────────────────────────── */
.payment-process-btn { display: none; align-items: center; justify-content: center; gap: 8px; width: calc(100% + 32px); margin: 14px -16px -24px; padding: 14px 20px; border: none; border-radius: 14px 14px 0 0; background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 -4px 20px rgba(59, 130, 246, 0.3); position: sticky; bottom: 0; z-index: 2 }
.payment-process-btn:hover { box-shadow: 0 -6px 28px rgba(59, 130, 246, 0.5) }
.payment-process-btn:active { transform: scale(0.98) }
.payment-process-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none }
.payment-sheet.qr-mode { padding-bottom: 0 }
.bet-close-btn { background: none; border: none; font-size: 24px; color: #9ca3af; cursor: pointer; padding: 4px; line-height: 1; margin-left: auto; z-index: 1; transition: color 0.2s }
.bet-close-btn:hover { color: #ef4444 }
/* ── ADMIN PANEL (GOPANEL) ───────────────────────────────────────── */
.gp-page { display: flex; flex-direction: column; flex: 1; overflow: hidden }
.gp-scroll { flex: 1; overflow-y: auto; padding: 6px }
.gp-content-scroll { flex: 1; overflow-y: auto; padding: 6px }
.gp-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 40px 20px; color: var(--text-muted); font-size: 12px; font-weight: 600 }
/* ── Tab Header — Toggle Tabs ────────────────────────────────────── */
.gp-tab-header { display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0; background: transparent; border-bottom: none; flex-shrink: 0 }
.gp-tab-header::-webkit-scrollbar { display: none }
.gp-tab { padding: 6px 12px; border: 1.5px solid rgba(59, 130, 246, 0.12); background: transparent; color: var(--text-muted); font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 5px; letter-spacing: 0.5px; white-space: nowrap; position: relative }
.gp-tab + .gp-tab { margin-left: -1.5px }
.gp-tab:first-child { border-radius: 5px 0 0 5px }
.gp-tab:last-child { border-radius: 0 5px 5px 0 }
.gp-tab i { font-size: 11px }
.gp-tab:hover { color: var(--text-secondary); background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.25) }
.gp-tab.active { background: var(--accent-blue); border-color: var(--accent-blue); color: white; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25); z-index: 1; font-weight: 700 }
/* ── Search Row ──────────────────────────────────────────────────── */
.gp-search-row { margin-bottom: 6px }
.gp-search-input-wrap { position: relative; display: flex; align-items: center }
.gp-search-icon { position: absolute; left: 10px; font-size: 12px; color: var(--text-muted); pointer-events: none }
.gp-search-input { width: 100%; padding: 8px 12px 8px 30px; border: 1.5px solid rgba(59, 130, 246, 0.15); border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--text-primary); background: rgba(255, 255, 255, 0.8); outline: none; transition: border-color 0.2s }
.gp-search-input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08) }
.gp-search-input::placeholder { color: var(--text-muted); font-weight: 400 }
.gp-search-clear { position: absolute; right: 6px; width: 22px; height: 22px; border: none; background: rgba(0, 0, 0, 0.06); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--text-muted); transition: all 0.2s }
.gp-search-clear:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444 }
/* ── User Status Badges ──────────────────────────────────────────── */
.gp-badge { font-size: 8px; font-weight: 700; padding: 2px 5px; border-radius: 3px; display: inline-flex; align-items: center; gap: 3px }
.gp-badge i { font-size: 7px }
.gp-badge-vip { background: linear-gradient( 135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.1) ); color: #d97706 }
.gp-badge-reg { background: rgba(100, 116, 139, 0.1); color: #64748b }
.gp-badge-admin { background: rgba(59, 130, 246, 0.1); color: var(--accent-blue) }
.gp-badge-active { background: rgba(16, 185, 129, 0.12); color: #10b981 }
.gp-badge-lock { background: rgba(245, 158, 11, 0.12); color: #f59e0b }
.gp-badge-banned { background: rgba(239, 68, 68, 0.12); color: #ef4444 }
/* ── Topup Cards ─────────────────────────────────────────────────── */
.gp-topup-list { display: flex; flex-direction: column; gap: 4px }
.gp-topup-card { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(59, 130, 246, 0.1); border-radius: 8px; padding: 8px 10px; margin-bottom: 5px; transition: all 0.2s }
.gp-topup-card:hover { border-color: rgba(59, 130, 246, 0.25); box-shadow: 0 2px 12px rgba(59, 130, 246, 0.08) }
.gp-topup-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px }
.gp-topup-user { font-size: 13px; font-weight: 700; color: var(--accent-blue); display: flex; align-items: center; gap: 6px }
.gp-topup-user i { font-size: 14px }
.gp-topup-body { padding: 2px 0 4px }
.gp-topup-label { font-size: 12px; font-weight: 600; color: var(--text-primary) }
.gp-topup-price { font-size: 14px; font-weight: 800; color: #d97706; margin-top: 2px; font-family: var(--font-mono) }
.gp-topup-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0 6px; border-bottom: 1px solid rgba(59, 130, 246, 0.06); font-size: 10px; color: var(--text-muted) }
.gp-topup-meta i { font-size: 9px }
.gp-topup-actions { display: flex; gap: 4px; padding-top: 6px }
.gp-topup-actions .gp-act-btn { flex: 1 }
/* ── User action buttons (horizontal) ────────────────────────────── */
.gp-stat-active .gp-stat-value { color: #10b981 }
.gp-stat-vip .gp-stat-value { color: #d97706; font-size: 13px }
/* ── User action buttons (horizontal) ────────────────────────────── */
.gp-row-actions-h { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 3px }
.gp-btn-sm { width: 24px; height: 24px; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; transition: all 0.2s }
.gp-btn-sm:hover { transform: scale(1.12) }
.gp-btn-sm-coin { background: rgba(245, 158, 11, 0.12); color: #d97706 }
.gp-btn-sm-coin:hover { background: #d97706; color: white }
.gp-btn-sm-active { background: rgba(16, 185, 129, 0.12); color: #10b981 }
.gp-btn-sm-active:hover { background: #10b981; color: white }
.gp-btn-sm-lock { background: rgba(245, 158, 11, 0.12); color: #f59e0b }
.gp-btn-sm-lock:hover { background: #f59e0b; color: white }
.gp-btn-sm-ban { background: rgba(239, 68, 68, 0.12); color: #ef4444 }
.gp-btn-sm-ban:hover { background: #ef4444; color: white }
/* ── Stats Row ───────────────────────────────────────────────────── */
.gp-stats-row { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap }
.gp-stat-card { flex: 1; min-width: 60px; padding: 8px 4px; border-radius: 6px; text-align: center; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(59, 130, 246, 0.1) }
.gp-stat-value { font-size: 13px; font-weight: 800; color: var(--text-primary); line-height: 1.2 }
.gp-stat-label { font-size: 7px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px }
.gp-stat-pending .gp-stat-value { color: #f59e0b }
.gp-stat-confirmed .gp-stat-value { color: #10b981 }
.gp-stat-rejected .gp-stat-value { color: #ef4444 }
.gp-stat-revenue .gp-stat-value { font-size: 11px; color: #8b5cf6 }
/* ── Filter Row ──────────────────────────────────────────────────── */
.gp-filter-row { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap }
.gp-filter-chip { padding: 5px 8px; border: 1.5px solid rgba(0, 0, 0, 0.08); border-radius: 6px; background: rgba(255, 255, 255, 0.7); font-size: 9px; font-weight: 700; cursor: pointer; transition: all 0.2s; color: var(--text-secondary) }
.gp-filter-chip:hover { border-color: var(--accent-blue); color: var(--accent-blue) }
.gp-filter-chip.active { background: var(--accent-blue); color: white; border-color: var(--accent-blue); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) }
.gp-filter-count { font-weight: 600; opacity: 0.7 }
.gp-filter-chip.active .gp-filter-count { opacity: 0.9 }
/* ── Table ───────────────────────────────────────────────────────── */
.gp-table-wrap { flex: 1; overflow-y: auto }
.gp-table { display: flex; flex-direction: column; gap: 4px }
.gp-row { display: flex; align-items: stretch; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(59, 130, 246, 0.08); border-radius: 6px; padding: 6px 8px; transition: all 0.2s; gap: 6px }
.gp-row:hover { border-color: rgba(59, 130, 246, 0.2); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06) }
.gp-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.gp-row-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.gp-row-user { font-size: 10px; font-weight: 700; color: var(--accent-blue); display: flex; align-items: center; gap: 3px }
.gp-row-user i { font-size: 9px }
.gp-row-mid { display: flex; align-items: center; gap: 6px }
.gp-row-label { font-size: 11px; font-weight: 600; color: var(--text-primary) }
.gp-row-price { font-size: 10px; font-weight: 700; color: #f59e0b; margin-left: auto }
.gp-row-bot { display: flex; align-items: center; gap: 6px }
.gp-row-date { font-size: 9px; color: var(--text-muted); display: flex; align-items: center; gap: 3px }
.gp-row-date i { font-size: 8px }
.gp-row-actions { display: flex; flex-direction: column; gap: 3px; justify-content: center; flex-shrink: 0 }
/* ── Status Badges ───────────────────────────────────────────────── */
.gp-status { font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap }
.gp-status i { font-size: 7px }
.gp-status-pending { background: rgba(245, 158, 11, 0.12); color: #f59e0b }
.gp-status-confirmed { background: rgba(16, 185, 129, 0.12); color: #10b981 }
.gp-status-rejected { background: rgba(239, 68, 68, 0.12); color: #ef4444 }
/* ── Type Badges ─────────────────────────────────────────────────── */
.gp-type { font-size: 8px; font-weight: 700; padding: 2px 5px; border-radius: 3px; display: inline-flex; align-items: center; gap: 3px }
.gp-type i { font-size: 7px }
.gp-type-coin { background: rgba(245, 158, 11, 0.1); color: #d97706 }
.gp-type-masa { background: rgba(59, 130, 246, 0.1); color: var(--accent-blue) }
/* ── Action Buttons ──────────────────────────────────────────────── */
.gp-btn { width: 26px; height: 26px; border: none; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; transition: all 0.2s }
.gp-btn-approve { background: rgba(16, 185, 129, 0.12); color: #10b981 }
.gp-btn-approve:hover { background: #10b981; color: white; transform: scale(1.1) }
.gp-btn-reject { background: rgba(239, 68, 68, 0.12); color: #ef4444 }
.gp-btn-reject:hover { background: #ef4444; color: white; transform: scale(1.1) }
/* ── User Cards ──────────────────────────────────────────────────── */
.gp-user-card { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(59, 130, 246, 0.1); border-radius: 8px; padding: 8px 10px; margin-bottom: 5px; transition: all 0.2s }
.gp-user-card:hover { border-color: rgba(59, 130, 246, 0.25); box-shadow: 0 2px 12px rgba(59, 130, 246, 0.08) }
.gp-user-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; flex-wrap: wrap }
.gp-user-name { font-size: 13px; font-weight: 700; color: var(--accent-blue); display: flex; align-items: center; gap: 6px }
.gp-user-name i { font-size: 14px }
.gp-user-badges { display: flex; gap: 4px; flex-wrap: wrap }
.gp-user-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 3px 0 6px; border-bottom: 1px solid rgba(59, 130, 246, 0.06); margin-bottom: 6px }
.gp-meta-item { font-size: 10px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 3px }
.gp-meta-item i { font-size: 9px }
.gp-user-actions { display: flex; gap: 4px; flex-wrap: wrap }
.gp-act-btn { padding: 4px 8px; border: none; border-radius: 5px; font-size: 9px; font-weight: 700; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 4px }
.gp-act-btn:hover { transform: translateY(-1px) }
.gp-act-btn:active { transform: scale(0.96) }
.gp-act-btn i { font-size: 9px }
.gp-act-info { background: rgba(59, 130, 246, 0.1); color: var(--accent-blue) }
.gp-act-info:hover { background: var(--accent-blue); color: white }
.gp-act-coin { background: rgba(245, 158, 11, 0.1); color: #d97706 }
.gp-act-coin:hover { background: #d97706; color: white }
.gp-act-sub { background: rgba(139, 92, 246, 0.1); color: #8b5cf6 }
.gp-act-sub:hover { background: #8b5cf6; color: white }
.gp-act-member { background: rgba(245, 158, 11, 0.1); color: #f59e0b }
.gp-act-member:hover { background: #f59e0b; color: white }
.gp-act-active { background: rgba(16, 185, 129, 0.1); color: #10b981 }
.gp-act-active:hover { background: #10b981; color: white }
.gp-act-lock { background: rgba(245, 158, 11, 0.1); color: #f59e0b }
.gp-act-lock:hover { background: #f59e0b; color: white }
.gp-act-ban { background: rgba(239, 68, 68, 0.1); color: #ef4444 }
.gp-act-ban:hover { background: #ef4444; color: white }
/* ── Detail Dialog Grid ──────────────────────────────────────────── */
.gp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.gp-detail-item { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; background: rgba(59, 130, 246, 0.03); border-radius: 4px }
.gp-detail-full { grid-column: 1 / -1 }
.gp-detail-label { font-size: 9px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px }
.gp-detail-value { font-size: 12px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono) }
.gp-detail-eye { position: absolute; right: 6px; bottom: 6px; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px 6px; font-size: 13px; border-radius: 4px; transition: all 0.2s; z-index: 2; line-height: 1 }
.gp-detail-eye:hover { color: var(--accent-blue); background: rgba(59, 130, 246, 0.08) }
/* ── Empty State ─────────────────────────────────────────────────── */
.gp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: var(--text-muted); gap: 8px }
.gp-empty i { font-size: 36px; opacity: 0.3 }
.gp-empty p { font-size: 12px; font-weight: 600 }
/* ── LOGIN PAGE ──────────────────────────────────────────────────── */
.login-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 40px 24px; background: linear-gradient( 180deg, rgba(240, 244, 248, 0.8) 0%, rgba(226, 232, 240, 0.4) 100% ) }
.login-brand { text-align: center; margin-bottom: 36px }
.login-logo { width: 72px; height: 72px; border-radius: 20px; margin-bottom: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08) }
.login-title { font-size: 26px; font-weight: 800; margin: 0 0 4px; background: linear-gradient(135deg, var(--accent-neon), var(--accent-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 2px }
.login-subtitle { font-size: 13px; color: var(--text-muted); margin: 0 }
.login-form { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 14px }
.login-tabs { display: flex; width: 100%; max-width: 320px; margin-bottom: 24px; background: rgba(248, 250, 252, 0.6); border-radius: 12px; padding: 3px; position: relative }
.login-tab { flex: 1; text-align: center; padding: 9px 0; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 10px; letter-spacing: 0.3px }
.login-tab.active { color: #fff; background: linear-gradient(135deg, #06b6d4, #3b82f6); box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25) }
.login-find-account { text-align: center; margin-top: 8px; font-size: 12px; color: #64748b; cursor: pointer; transition: color 0.2s }
.login-find-account:hover { color: #3b82f6 }
.login-find-account i { margin-right: 4px }
.find-account-desc { font-size: 13px; color: #64748b; line-height: 1.6; margin-bottom: 16px; text-align: center }
.find-account-btn { width: 100%; padding: 10px; border: none; border-radius: 10px; background: linear-gradient(135deg, #06b6d4, #3b82f6); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s }
.find-account-btn:hover { box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3); transform: translateY(-1px) }
.find-account-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none }
.find-account-loading { text-align: center; padding: 16px; color: #64748b; font-size: 13px }
.find-account-result-box { margin-top: 14px; border: 1.5px solid #10b981; border-radius: 10px; padding: 12px; background: rgba(16, 185, 129, 0.04) }
.find-account-result-title { font-size: 13px; font-weight: 700; color: #10b981; margin-bottom: 8px }
.find-account-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(16, 185, 129, 0.1) }
.find-account-item:last-child { border-bottom: none }
.find-account-name { font-size: 14px; font-weight: 600; color: #1e293b }
.find-account-reset-btn { padding: 5px 10px; border: 1.5px solid #3b82f6; border-radius: 6px; background: rgba(59, 130, 246, 0.06); color: #3b82f6; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap }
.find-account-reset-btn:hover { background: #3b82f6; color: #fff }
.find-account-reset-btn i { margin-right: 3px }
.find-account-not-found { text-align: center; padding: 16px; color: #94a3b8; font-size: 13px }
.find-account-new-pw { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 10px 14px; background: #f1f5f9; border-radius: 8px; border: 1.5px dashed #cbd5e1 }
.find-account-new-pw span { font-size: 18px; font-weight: 700; color: #1e293b; letter-spacing: 2px; font-family: monospace }
.find-account-copy-btn { width: 34px; height: 34px; border: none; border-radius: 8px; background: linear-gradient(135deg, #06b6d4, #3b82f6); color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s }
.find-account-copy-btn:hover { box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); transform: scale(1.05) }
.bet-section { margin-top: 18px }
.bet-section-title { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px }
.bet-amount-row { display: flex; gap: 4px; margin-bottom: 10px }
.bet-amount-btn { flex: 1; padding: 6px 4px; border: 1.5px solid #e2e8f0; border-radius: 4px; background: #fff; color: #1e293b; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s; text-align: center }
.bet-amount-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(59, 130, 246, 0.04) }
.bet-amount-btn.active { border-color: var(--accent-blue); background: rgba(59, 130, 246, 0.1); color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) }
.bet-amount-btn.allin { border-color: #f59e0b; color: #f59e0b }
.bet-amount-btn.allin.active { background: rgba(245, 158, 11, 0.1); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) }
.bet-input-row { display: flex; gap: 6px; align-items: center; margin-bottom: 10px }
.bet-amount-input { flex: 1; min-width: 0; padding: 8px 10px; border: 1.5px solid #e2e8f0; border-radius: 4px; font-size: 14px; font-weight: 700; color: #1e293b; outline: none; transition: border-color 0.2s; font-family: "Fira Code", monospace; text-align: center }
.bet-amount-input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08) }
.bet-multiplier-group { display: flex; gap: 4px; flex-shrink: 0 }
.bet-multiplier-btn { padding: 10px 10px; border: 1.5px solid #e2e8f0; border-radius: 4px; background: #fff; color: #64748b; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; min-width: 42px; text-align: center }
.bet-multiplier-btn:hover { border-color: var(--accent-neon); color: var(--accent-neon) }
.bet-multiplier-btn.active { border-color: var(--accent-neon); background: rgba(6, 182, 212, 0.08); color: var(--accent-neon) }
.bet-summary { text-align: left; font-size: 9px; color: #94a3b8; font-weight: 600; padding: 6px 2px 14px }
.bet-summary span { color: var(--text-primary); font-weight: 700 }
.bet-action-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px }
.bet-action-grid.bet-grid-hilo { grid-template-columns: repeat(6, 1fr) }
.bet-btn-wide { grid-column: span 2 }
.bet-btn-span-2 { grid-column: span 2 }
.bet-btn-span-3 { grid-column: span 3 }
.bet-action-btn { flex: 1; padding: 10px 8px; border: none; border-radius: 4px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.25s; display: flex; align-items: center; justify-content: center; letter-spacing: 0.3px }
.bet-action-btn:active { transform: scale(0.97) }
.bet-action-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none }
.bot-bet-btn-kecil { background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #fff; box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3) }
.bot-bet-btn-kecil:hover { box-shadow: 0 6px 24px rgba(56, 189, 248, 0.45); transform: translateY(-1px) }
.bot-bet-btn-besar { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3) }
.bot-bet-btn-besar:hover { box-shadow: 0 6px 24px rgba(59, 130, 246, 0.45); transform: translateY(-1px) }
.bot-bet-btn-merah { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) }
.bot-bet-btn-merah:hover { box-shadow: 0 6px 24px rgba(239, 68, 68, 0.45); transform: translateY(-1px) }
.bot-bet-btn-hitam { background: linear-gradient(135deg, #1e293b, #0f172a); color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) }
.bot-bet-btn-hitam:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); transform: translateY(-1px) }
.bot-bet-btn-angka { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3) }
.bot-bet-btn-angka:hover { box-shadow: 0 6px 24px rgba(102, 126, 234, 0.45); transform: translateY(-1px) }
.bot-bet-btn-jqka { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3) }
.bot-bet-btn-jqka:hover { box-shadow: 0 6px 24px rgba(245, 158, 11, 0.45); transform: translateY(-1px) }
.bot-bet-btn-hijau { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3) }
.bot-bet-btn-hijau:hover { box-shadow: 0 6px 24px rgba(16, 185, 129, 0.45); transform: translateY(-1px) }
.bot-bet-btn-joker { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3) }
.bot-bet-btn-joker:hover { box-shadow: 0 6px 24px rgba(16, 185, 129, 0.45); transform: translateY(-1px) }
.bot-bet-btn-km { background: linear-gradient(135deg, #38bdf8, #ef4444); color: #fff; box-shadow: 0 4px 16px rgba(180, 120, 180, 0.3); font-size: 10px; padding: 8px 4px }
.bot-bet-btn-km:hover { box-shadow: 0 6px 24px rgba(180, 120, 180, 0.45); transform: translateY(-1px) }
.bot-bet-btn-kh { background: linear-gradient(135deg, #38bdf8, #10b981); color: #fff; box-shadow: 0 4px 16px rgba(80, 180, 200, 0.3); font-size: 10px; padding: 8px 4px }
.bot-bet-btn-kh:hover { box-shadow: 0 6px 24px rgba(80, 180, 200, 0.45); transform: translateY(-1px) }
.bot-bet-btn-bm { background: linear-gradient(135deg, #3b82f6, #ef4444); color: #fff; box-shadow: 0 4px 16px rgba(160, 100, 180, 0.3); font-size: 10px; padding: 8px 4px }
.bot-bet-btn-bm:hover { box-shadow: 0 6px 24px rgba(160, 100, 180, 0.45); transform: translateY(-1px) }
.bot-bet-btn-bh { background: linear-gradient(135deg, #3b82f6, #10b981); color: #fff; box-shadow: 0 4px 16px rgba(60, 160, 180, 0.3); font-size: 10px; padding: 8px 4px }
.bot-bet-btn-bh:hover { box-shadow: 0 6px 24px rgba(60, 160, 180, 0.45); transform: translateY(-1px) }
/* ── ANALYZ — CUS2 LOSSTREAK ANALYZER ────────────────────────────── */
.az-wrap { max-width: 100%; margin: 0; padding: 12px; overflow-y: auto; flex: 1; min-height: 0 }
.az-header { margin-bottom: 12px }
.az-subtitle { color: var(--text-muted); font-size: 11px; line-height: 1.4 }
.az-card { background: #ffffff; border: 1px solid #dde4ef; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(26, 58, 120, 0.05) }
.az-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.3px }
.az-input-row { display: flex; gap: 6px; align-items: stretch }
.az-input-field { flex: 1 }
.az-input-row button { height: 38px; white-space: nowrap; padding: 0 16px }
.az-input { width: 100%; padding: 8px 10px; border: 1.5px solid #dde4ef; border-radius: 8px; font-size: 12px; font-family: var(--font-mono); outline: none; transition: border-color 0.15s; height: 38px }
.az-input:focus { border-color: var(--accent-blue) }
.az-btn { background: var(--accent-blue); color: #fff; border: none; padding: 0 18px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.15s; height: 38px; line-height: 38px }
.az-btn:hover { background: #2563eb }
.az-btn:disabled { opacity: 0.6; cursor: not-allowed }
.az-checkbox-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--text-muted) }
.az-error-box { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; padding: 8px 12px; border-radius: 8px; font-size: 11px; margin-top: 10px; display: none }
.az-result-title { font-size: 13px; margin-bottom: 8px; color: var(--accent-blue); margin-top: 0; font-weight: 800 }
.az-legend { display: flex; gap: 8px; flex-wrap: wrap; font-size: 10px; color: var(--text-muted); margin-top: 6px }
.az-legend span { display: flex; align-items: center; gap: 4px }
.az-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0 }
.az-dot-angka { background: #1a6fd4 }
.az-dot-jqka { background: #f59e0b }
.az-dot-hitam { background: #1e293b }
.az-dot-merah { background: #dc2626 }
.az-dot-joker { background: #16a34a }
.az-table-scroll { max-height: 360px; overflow-y: auto; margin-top: 10px; border: 1px solid #e2e8f0; border-radius: 6px }
.az-table { width: 100%; border-collapse: collapse; font-size: 11px; background: #ffffff }
.az-table th,
.az-table td { padding: 5px 4px; text-align: left; border-bottom: 1px solid #e2e8f0; white-space: nowrap }
.az-table th { background: #f8fafc; font-weight: 700; color: var(--text-muted); text-transform: uppercase; font-size: 9px; letter-spacing: 0.4px; position: sticky; top: 0; z-index: 1 }
.az-table th:first-child,
.az-table td:first-child { padding-left: 6px }
.az-table th:last-child,
.az-table td:last-child { padding-right: 6px }
.az-table tr.az-win .az-status { color: #16a34a; font-weight: 700 }
.az-table tr.az-lose .az-status { color: #dc2626; font-weight: 700 }
.az-table tr.az-highlight { background: #fef2f2 }
.az-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; color: #fff; line-height: 1.6 }
.az-badge-angka { background: #1a6fd4 }
.az-badge-jqka { background: #f59e0b }
.az-badge-joker { background: #16a34a }
.az-badge-b { background: #1e293b }
.az-badge-r { background: #dc2626 }
.az-badge-besar { background: linear-gradient(to bottom, #1d4ed8, #2563eb) }
.az-badge-kecil { background: linear-gradient(to bottom, #0ea5e9, #0284c7) }
/* ── WINGO Result Badges (bulat) ─────────────────────────────────── */
.wg-result-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 700; color: white }
.wg-result-badge-0 { background: linear-gradient(135deg, #a855f7, #ef4444) }
.wg-result-badge-5 { background: linear-gradient(135deg, #a855f7, #10b981) }
.wg-result-badge-even { background: #ef4444 }
.wg-result-badge-odd { background: #10b981 }
.az-detail-stats { display: flex; border-top: 1.5px solid #e2e8f0; background: #f8fafc; border-radius: 0 0 10px 10px; margin-top: -1px; padding: 6px 2px }
.az-detail-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; position: relative; min-width: 0 }
.az-detail-stat + .az-detail-stat::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 1px; background: #e2e8f0 }
.az-detail-stat-val { font-size: 12px; font-weight: 800; color: var(--text-primary); line-height: 1; font-family: var(--font-mono) }
.az-detail-stat-win { color: #16a34a }
.az-detail-stat-lose { color: #dc2626 }
.az-detail-stat-lbl { font-size: 7px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100% }
.az-tabs { display: flex; gap: 0; margin-bottom: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none }
.az-tabs::-webkit-scrollbar { display: none }
.az-tab-server,
.az-tab-game { padding: 6px 12px; border: 1.5px solid rgba(59, 130, 246, 0.12); background: transparent; color: var(--text-muted); font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; position: relative }
.az-tab-server + .az-tab-server,
.az-tab-game + .az-tab-game { margin-left: -1.5px }
.az-tab-server:first-child,
.az-tab-game:first-child { border-radius: 5px 0 0 5px }
.az-tab-server:last-child,
.az-tab-game:last-child { border-radius: 0 5px 5px 0 }
.az-tab-server.active,
.az-tab-game.active { background: var(--accent-blue); border-color: var(--accent-blue); color: white; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25); z-index: 1; font-weight: 700 }
.az-tab-server:hover:not(.active),
.az-tab-game:hover:not(.active) { color: var(--text-secondary); background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.25) }
.az-game-tabs-wrap { margin-top: 6px }
.az-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); margin-top: 20px }
.az-empty i { font-size: 24px; margin-bottom: 8px; display: block; opacity: 0.5 }
.az-empty p { font-size: 13px; font-weight: 600 }
.az-hidden { display: none }
.az-m0 { margin: 0 }
.az-mt8 { margin-top: 8px }
.az-mb8 { margin-bottom: 8px }
.az-hidden-mt8 { display: none; margin-top: 8px }
.az-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px }
.az-row-between { display: flex; align-items: center; justify-content: space-between }
.az-label-sm { color: #64748b; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap }
.az-label-block { display: block; margin-bottom: 3px; white-space: normal }
.az-label-md { font-weight: 600; font-size: 13px; color: #1e293b }
.az-btn-block { width: 100%; margin-top: 10px }
.az-tabs-grow { margin-bottom: 0; flex: 1 }
/* ── CUS SRV Analyzer ────────────────────────────────────────────── */
.az-cussrv-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px }
.az-textarea { width: 100%; padding: 8px 10px; border: 1.5px solid #dde4ef; border-radius: 8px; font-size: 13px; font-family: var(--font-mono); outline: none; transition: border-color 0.15s; resize: vertical; min-height: 60px; line-height: 1.5 }
.az-textarea:focus { border-color: var(--accent-blue) }
.az-btn-sm { height: 26px !important; line-height: 26px !important; padding: 0 10px !important; font-size: 10px !important; background: #64748b !important }
.az-btn-sm:hover { background: #475569 !important }
/* ── PROFIL PAGE ─────────────────────────────────────────────────── */
.profil-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto }
.profil-wrap .panel-header { position: sticky; top: 0; z-index: 1 }
/* ── Empty State ─────────────────────────────────────────────────── */
.profil-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 40px 24px; text-align: center; gap: 12px }
.profil-empty-icon { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #94a3b8, #64748b); display: flex; align-items: center; justify-content: center; margin-bottom: 8px }
.profil-empty-icon i { font-size: 30px; color: white }
.profil-empty h3 { font-size: 16px; font-weight: 700; color: var(--text-primary) }
.profil-empty p { font-size: 13px; color: var(--text-muted); line-height: 1.6; max-width: 280px }
/* ── Loading ─────────────────────────────────────────────────────── */
.profil-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 14px; padding: 40px }
.profil-spinner { width: 40px; height: 40px; border: 3px solid rgba(59, 130, 246, 0.15); border-top-color: var(--accent-blue); border-radius: 50%; animation: profilSpin 0.8s linear infinite }
@keyframes profilSpin {
  to {
    transform: rotate(360deg);
  }
}
.profil-loading p {
font-size: 13px; font-weight: 600; color: var(--text-muted) }
/* ── Hero Banner ─────────────────────────────────────────────────── */
.profil-hero { position: relative; overflow: hidden; padding: 8px 16px 24px; text-align: center; background: linear-gradient( 135deg, #0b1121 0%, #1a2332 40%, #0f1a2e 70%, #0b1121 100% ) }
.profil-hero-bg { position: absolute; inset: 0; background: radial-gradient( ellipse 400px 300px at 30% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 60% ), radial-gradient( ellipse 300px 200px at 70% 60%, rgba(6, 182, 212, 0.1) 0%, transparent 50% ), radial-gradient( ellipse 200px 150px at 50% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 50% ); pointer-events: none }
.profil-hero-shine { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(59, 130, 246, 0.4), rgba(6, 182, 212, 0.4), transparent ); pointer-events: none }
.profil-hero-top { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px }
.profil-server-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); padding: 3px 8px; border-radius: 4px }
.profil-logout-btn { background: none; border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.6); font-size: 11px; padding: 4px 10px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all 0.2s }
.profil-logout-btn:hover { background: rgba(255, 255, 255, 0.08); color: #f87171; border-color: rgba(248, 113, 113, 0.3) }
.profil-avatar-wrap { position: relative; display: inline-block; margin-bottom: 14px }
.profil-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #06b6d4); display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3), 0 0 0 4px rgba(59, 130, 246, 0.12); position: relative; overflow: hidden; transition: transform 0.3s ease }
.profil-avatar:hover { transform: scale(1.05) }
.profil-avatar i { font-size: 32px; color: white }
.profil-level { position: absolute; bottom: -2px; right: -2px; background: linear-gradient(135deg, #f59e0b, #d97706); color: white; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 10px; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35); letter-spacing: 0.5px }
.profil-nickname { font-size: 20px; font-weight: 800; color: white; margin: 0 0 6px; position: relative; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); letter-spacing: -0.3px }
/* ── Stats Grid ──────────────────────────────────────────────────── */
.profil-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 12px; margin: 12px 0 8px }
.profil-stat-card { background: white; border-radius: 12px; border-top: 3px solid; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); overflow: visible; display: flex; flex-direction: column; align-items: center; padding: 10px 6px; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease }
.profil-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08) }
.profil-stat-card:nth-child(1) { border-top-color: #06b6d4 }
.profil-stat-card:nth-child(2) { border-top-color: #f59e0b }
.profil-stat-card:nth-child(3) { border-top-color: #10b981 }
.profil-stat-full { grid-column: 1 / -1; border-top-color: #10b981 !important }
.profil-stat-info { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100% }
.profil-stat-value { font-size: 13px; font-weight: 800; color: var(--text-primary); font-family: var(--font-mono); letter-spacing: -0.3px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: block }
.profil-stat-label { font-size: 8px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 3px }
.profil-stat-refresh { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: none; background: rgba(0, 0, 0, 0.04); border-radius: 50%; cursor: pointer; color: var(--text-muted); font-size: 8px; transition: all 0.25s ease; padding: 0 }
.profil-stat-refresh:hover { background: rgba(59, 130, 246, 0.12); color: var(--accent-blue); transform: rotate(180deg) }
.profil-stat-refresh:active { transform: rotate(180deg) scale(0.9) }
/* ── Detail Card ─────────────────────────────────────────────────── */
.profil-detail-card { margin: 8px 12px 16px; background: white; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.04); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); overflow: hidden }
.profil-detail-title { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; background: linear-gradient(180deg, rgba(59, 130, 246, 0.04), transparent); border-bottom: 1px solid rgba(0, 0, 0, 0.04) }
.profil-detail-title i { font-size: 12px; color: var(--accent-blue) }
.profil-eye-btn { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 13px; padding: 4px 6px; border-radius: 6px; transition: all 0.2s; display: flex; align-items: center }
.profil-eye-btn:hover { color: var(--accent-blue); background: rgba(59, 130, 246, 0.08) }
.profil-sensor { filter: blur(6px); user-select: none; transition: filter 0.25s ease }
/* ── Action Buttons (Deposit / Penarikan) ────────────────────────── */
.profil-action-row { display: flex; gap: 8px; padding: 0 12px; margin-bottom: 8px }
.profil-action-btn { flex: 1; padding: 10px 12px; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.25s ease; letter-spacing: 0.3px }
.profil-action-btn:active { transform: scale(0.97) }
.profil-btn-tarik { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; box-shadow: 0 4px 16px rgba(6, 182, 212, 0.25) }
.profil-btn-tarik:hover { box-shadow: 0 6px 24px rgba(6, 182, 212, 0.4); transform: translateY(-1px) }
.profil-btn-depo { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25) }
.profil-btn-depo:hover { box-shadow: 0 6px 24px rgba(16, 185, 129, 0.4); transform: translateY(-1px) }
/* ── History Section ─────────────────────────────────────────────── */
.profil-history-card { margin: 8px 12px 16px; background: white; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.04); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); overflow: hidden }
.profil-history-tabs { display: flex; border-bottom: 1px solid rgba(0, 0, 0, 0.06) }
.profil-history-tab { flex: 1; padding: 10px 8px; border: none; background: transparent; color: var(--text-muted); font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s; position: relative; text-transform: uppercase; letter-spacing: 0.3px }
.profil-history-tab:hover { color: var(--text-primary); background: rgba(0, 0, 0, 0.02) }
.profil-history-tab.active { color: var(--accent-blue) }
.profil-history-tab.active::after { content: ""; position: absolute; bottom: 0; left: 20%; right: 20%; height: 2.5px; background: linear-gradient(90deg, var(--accent-neon), var(--accent-blue)); border-radius: 2px 2px 0 0 }
.profil-history-content { padding: 0 }
.profil-game-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.04) }
.profil-game-tab { padding: 5px 14px; border: 1.5px solid rgba(0, 0, 0, 0.08); border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 10px; font-weight: 700; cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.5px }
.profil-game-tab:hover { border-color: var(--accent-blue); color: var(--accent-blue) }
.profil-game-tab.active { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) }
.profil-history-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px; gap: 8px; color: var(--text-muted) }
.profil-history-empty i { font-size: 28px; opacity: 0.3 }
.profil-history-empty p { font-size: 12px; font-weight: 600 }
/* ── Withdraw Orders ─────────────────────────────────────────────── */
.wd-list { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px }
.wd-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px }
.wd-loading p { font-size: 11px; font-weight: 600; color: var(--text-muted) }
.wd-item { background: white; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; border: 1px solid rgba(0, 0, 0, 0.04) }
.wd-item-row { display: flex; justify-content: space-between; align-items: center }
.wd-order { font-size: 9px; font-weight: 600; color: var(--text-muted); font-family: monospace; letter-spacing: -0.2px }
.wd-bank { font-size: 9px; font-weight: 700; color: var(--text-primary) }
.wd-amount { font-size: 9px; font-weight: 800; color: var(--text-primary); font-family: var(--font-mono) }
.wd-status { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 3px }
.wd-status-1 { color: #10b981; background: rgba(16, 185, 129, 0.08) }
.wd-status-0 { color: #f59e0b; background: rgba(245, 158, 11, 0.08) }
/* ── Deposit Dialog ──────────────────────────────────────────────── */
.deposit-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); z-index: 20000; display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) }
.deposit-card { background: #ffffff; border-radius: 20px 20px 0 0; width: 100%; max-width: 420px; max-height: 90vh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15) }
.deposit-card.open { transform: translateY(0) }
.deposit-card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; flex-shrink: 0 }
.deposit-card-header-left { display: flex; align-items: center; gap: 14px }
.deposit-card-header-icon-wrap { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient( 135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.06) ); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(16, 185, 129, 0.15) }
.deposit-card-header-icon { font-size: 16px; color: #10b981 }
.deposit-card-title { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.2 }
.deposit-card-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-weight: 500 }
.deposit-close-btn { width: 32px; height: 32px; border: none; background: #f1f5f9; border-radius: 10px; color: #94a3b8; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; line-height: 1 }
.deposit-close-btn:hover { background: #fee2e2; color: #ef4444 }
.deposit-card-body { padding: 4px 16px 20px; overflow-y: auto; flex: 1 }
.deposit-card-body::-webkit-scrollbar { width: 4px }
.deposit-card-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px }
/* ── Form Section ────────────────────────────────────────────────── */
.deposit-form-section { display: block }
.deposit-form-section.hidden { display: none }
.deposit-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px }
.deposit-label i { color: var(--accent-blue); font-size: 12px }
.deposit-input-row { display: flex; gap: 10px; align-items: flex-start }
.deposit-input-flex-wrap { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.deposit-input-relative { position: relative; display: flex; align-items: center }
.deposit-currency-prefix { position: absolute; left: 12px; font-size: 12px; font-weight: 700; color: var(--text-muted); pointer-events: none; z-index: 1 }
.deposit-input-relative input { width: 100%; padding: 10px 12px 10px 36px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--text-primary); background: #f8fafc; outline: none; transition: all 0.25s; font-family: var(--font-mono) }
.deposit-input-relative input:focus { border-color: var(--accent-blue); background: #fff; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) }
.deposit-input-relative input::placeholder { color: #94a3b8; font-weight: 500; font-family: "Inter", sans-serif }
.deposit-amount-error { display: none; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #ef4444; padding: 6px 10px; background: rgba(239, 68, 68, 0.06); border-radius: 8px }
.deposit-amount-error.show { display: flex }
.deposit-amount-error i { font-size: 11px }
.deposit-submit-btn { padding: 10px 14px; background: linear-gradient(135deg, var(--accent-blue), #2563eb); border: none; border-radius: 10px; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.25s; white-space: nowrap; flex-shrink: 0; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 100px }
.deposit-submit-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) }
.deposit-submit-btn:active:not(:disabled) { transform: scale(0.97) }
.deposit-submit-btn:disabled { background: #cbd5e1; color: #f1f5f9; cursor: not-allowed; box-shadow: none }
/* ── Withdraw Dialog (Penarikan) ─────────────────────────────────── */
.wd-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 16px; background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(37, 99, 235, 0.04)); border: 1px solid rgba(59, 130, 246, 0.15); border-radius: 12px }
.wd-balance-label { font-size: 12px; font-weight: 600; color: var(--text-secondary) }
.wd-balance-value { font-size: 16px; font-weight: 800; color: var(--accent-blue); font-family: var(--font-mono) }
.wd-bank-select-wrap { margin-bottom: 16px; position: relative }
.wd-select { width: 100%; padding: 11px 12px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--text-primary); background: #f8fafc; outline: none; transition: all 0.25s; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center }
.wd-select:focus { border-color: var(--accent-blue); background-color: #fff; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) }
/* Custom popup select (replaces native <select>) */
.wd-select.custom { position: relative; display: flex; align-items: center; justify-content: space-between; user-select: none }
.wd-select.custom .wd-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 20px }
.wd-select.custom .wd-select-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(0deg); transition: transform 0.2s; pointer-events: none; font-size: 10px; color: #94a3b8 }
.wd-select.custom.open .wd-select-caret { transform: translateY(-50%) rotate(180deg) }
.wd-select-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 9999; max-height: 220px; overflow-y: auto; background: #fff; border: 2px solid #e2e8f0; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 4px; display: none }
.wd-select-menu.open { display: block }
.wd-select-opt { padding: 10px 12px; font-size: 12px; font-weight: 600; color: var(--text-primary); border-radius: 7px; cursor: pointer; transition: background 0.15s }
.wd-select-opt:hover { background: #f1f5f9 }
.wd-select-opt.selected { background: rgba(59,130,246,0.1); color: var(--accent-blue) }
.wd-select-opt.disabled { color: var(--text-muted); cursor: default }
/* ── Quick Chips ─────────────────────────────────────────────────── */
.deposit-chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap }
.deposit-chip-btn { padding: 6px 12px; border: 1.5px solid #e2e8f0; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: all 0.25s }
.deposit-chip-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: #f8faff }
.deposit-chip-btn.active { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) }
.deposit-chip-btn:active { transform: scale(0.95) }
/* ── Info Box ────────────────────────────────────────────────────── */
.deposit-info-box { display: flex; align-items: flex-start; gap: 10px; background: linear-gradient( 135deg, rgba(59, 130, 246, 0.04), rgba(59, 130, 246, 0.02) ); border: 1px solid rgba(59, 130, 246, 0.12); border-radius: 10px; padding: 10px 12px; margin-top: 14px }
.deposit-info-icon { font-size: 12px; color: var(--accent-blue); margin-top: 1px; flex-shrink: 0 }
.deposit-info-text { font-size: 12px; color: var(--text-secondary); line-height: 1.5 }
.deposit-info-text strong { color: var(--text-primary); font-weight: 600 }
/* ── Iframe Section ──────────────────────────────────────────────── */
.deposit-iframe-section { display: none; flex-direction: column; gap: 0 }
.deposit-iframe-section.show { display: flex }
.deposit-iframe-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px }
.deposit-iframe-title { font-size: 12px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px }
.deposit-iframe-title i { color: var(--accent-blue) }
.deposit-back-btn { background: none; border: none; color: var(--accent-blue); font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 8px; transition: all 0.2s }
.deposit-back-btn:hover { background: rgba(59, 130, 246, 0.06) }
.deposit-back-btn:active { transform: scale(0.96) }
.deposit-amount-badge { display: flex; align-items: center; gap: 6px; background: #f1f5f9; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px }
.deposit-badge-label { font-size: 11px; font-weight: 600; color: var(--text-muted) }
.deposit-badge-value { font-size: 12px; font-weight: 800; color: var(--text-primary); font-family: var(--font-mono) }
.deposit-iframe-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; gap: 12px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0 }
.deposit-iframe-loader.hidden { display: none }
.deposit-loader-icon { font-size: 28px; color: var(--accent-neon) }
.deposit-loader-text { font-size: 12px; font-weight: 600; color: var(--text-muted) }
#depositIframe { width: 100%; height: 460px; max-height: 60vh; border: none; border-radius: 12px; background: #f8fafc; display: none }
#depositIframe.show { display: block }
.deposit-footer-text { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--text-muted); margin-top: 10px; padding: 8px 0 }
.deposit-footer-text i { color: var(--accent-blue) }
.profil-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.03); transition: background 0.2s }
.profil-detail-row:last-child { border-bottom: none }
.profil-detail-row:hover { background: rgba(59, 130, 246, 0.02) }
.profil-detail-key { font-size: 12px; font-weight: 600; color: var(--text-muted) }
.profil-detail-val { font-size: 12px; font-weight: 700; color: var(--text-primary); text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono) }
/* ── BET HISTORY — PROFIL ────────────────────────────────────────── */
.bh-list { min-width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 2px }
.bh-item { background: white; border-radius: 4px; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; border: 2px solid rgba(0, 0, 0, 0.04) }
.bh-item:last-child { margin-bottom: 0 }
.bh-row { display: flex; align-items: center; justify-content: space-between; gap: 6px }
.bh-period { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-primary) }
.bh-time { font-size: 10px; color: var(--text-muted); font-weight: 500 }
.bh-result { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0 }
.bh-result-0 { background: linear-gradient(135deg, #a855f7, #ef4444) }
.bh-result-5 { background: linear-gradient(135deg, #a855f7, #10b981) }
.bh-result-even { background: #ef4444 }
.bh-result-odd { background: #10b981 }
.bh-result-hijau { background: linear-gradient(to bottom, #10b981, #059669) }
.bh-result-wait { background: #94a3b8 }
.bh-amount { font-family: var(--font-mono); font-size: 12px; font-weight: 700 }
.bh-amount-plus { color: #10b981 }
.bh-amount-minus { color: #ef4444 }
.bh-gametype { font-size: 9px; font-weight: 500; color: var(--accent-blue); letter-spacing: 0.5px }
.bh-stuff { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 800; color: #fff; line-height: 1.6; min-width: 28px; text-align: center }
.bh-stuff-spades { background: #1e293b }
.bh-stuff-hearts { background: #ef4444 }
.bh-stuff-joker { background: #059669 }
.bh-betlabel { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; color: #fff; min-width: 52px; text-align: center }
.bh-betlabel-merah { background: #ef4444 }
.bh-betlabel-hitam { background: #1e293b }
.bh-betlabel-angka { background: linear-gradient(135deg, #667eea, #764ba2) }
.bh-betlabel-jqka { background: linear-gradient(135deg, #f59e0b, #d97706) }
.bh-betlabel-joker { background: #059669 }
.bh-result-badge-kecil { background: linear-gradient(to bottom, #0ea5e9, #0284c7); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; min-width: 52px; text-align: center; display: inline-block }
.bh-result-badge-besar { background: linear-gradient(to bottom, #1d4ed8, #2563eb); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; min-width: 52px; text-align: center; display: inline-block }
.bh-result-badge-merah { background: linear-gradient(to bottom, #ef4444, #dc2626); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; min-width: 52px; text-align: center; display: inline-block }
.bh-result-badge-hijau { background: linear-gradient(to bottom, #10b981, #059669); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; min-width: 52px; text-align: center; display: inline-block }
.bh-result-badge-km { background: linear-gradient(135deg, #38bdf8, #ef4444); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; min-width: 52px; text-align: center; display: inline-block }
.bh-result-badge-kh { background: linear-gradient(135deg, #38bdf8, #10b981); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; min-width: 52px; text-align: center; display: inline-block }
.bh-result-badge-bm { background: linear-gradient(135deg, #3b82f6, #ef4444); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; min-width: 52px; text-align: center; display: inline-block }
.bh-result-badge-bh { background: linear-gradient(135deg, #3b82f6, #10b981); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; min-width: 52px; text-align: center; display: inline-block }
/* ── RESPONSIVE — max-width 485px ────────────────────────────────── */
@media (max-width: 485px) {
  .sidebar { width: 58px; min-width: 58px }
  .sidebar.hidden { display: none }
  .sidebar .nav-item { flex-direction: column; gap: 4px; font-size: 8px; padding: 8px 4px; border-left: none; border-radius: 10px; letter-spacing: 0.5px }
  .sidebar-toggle { left: calc(58px - 13px); padding: 8px 4px }
  .sidebar.hidden ~ .sidebar-toggle { left: 5px; padding: 8px 4px }
  .sidebar .nav-item i { width: auto; font-size: 16px }
  .sidebar .nav-item.active { border-left: none; background: none; color: var(--accent-blue); box-shadow: none; transform: none }
  .sidebar .nav-item:hover { background: none; transform: none }
  ._24hb-hero-title { font-size: 20px }
  ._24hb-body { padding: 20px 14px 24px }
  .server-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 6px }
}

/* ── Admin Conversations List ────────────────────────────────────── */
.sup-chat-area.sup-admin-list { padding: 0; gap: 0 }
.sup-admin-conv-item { display: flex !important; align-items: center; gap: 8px; padding: 8px; cursor: pointer; border-bottom: 1px solid #eef2f6; background: #fff }
.sup-admin-conv-item:last-child { border-bottom: none }
.sup-admin-conv-item:hover { background: #f8fafc }
.sup-admin-conv-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #06b6d4, #3b82f6); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; color: #fff; box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2) }
.sup-admin-conv-content { flex: 1; min-width: 0 }
.sup-admin-conv-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px }
.sup-admin-conv-name { font-size: 14px; font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sup-admin-conv-time { font-size: 10px; color: #94a3b8; white-space: nowrap; margin-left: 8px; flex-shrink: 0 }
.sup-admin-conv-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.sup-admin-conv-msg { flex: 1; font-size: 12px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sup-admin-unread-badge { background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; flex-shrink: 0 }
/* ── Admin Empty State ───────────────────────────────────────────── */
.sup-admin-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 60px 32px; text-align: center }
.sup-admin-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient( 135deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.08) ); display: flex; align-items: center; justify-content: center; margin-bottom: 16px }
.sup-admin-empty-icon i { font-size: 28px; color: #3b82f6; opacity: 0.5 }
.sup-admin-empty-title { font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 4px }
.sup-admin-empty-desc { font-size: 12px; color: #94a3b8; line-height: 1.5; max-width: 220px }
/* ── Admin Back Button ───────────────────────────────────────────── */
.sup-admin-back-btn { background: rgba(255, 255, 255, 0.15); border: none; color: #fff; font-size: 16px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: 8px; transition: all 0.2s ease }
.sup-admin-back-btn:hover { background: rgba(255, 255, 255, 0.25) }
.sup-admin-delete-btn { background: rgba(255, 255, 255, 0.15); border: none; color: #fff; font-size: 15px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-left: auto; transition: all 0.2s ease }
.sup-admin-delete-btn:hover { background: rgba(239, 68, 68, 0.4) }
/* ── TARGET PROFIT DIALOG ────────────────────────────────────────── */
.target-dialog-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); display: flex; align-items: center; justify-content: center; z-index: 99999; opacity: 0; transition: opacity 0.3s ease }
.target-dialog-overlay.active { opacity: 1 }
.target-dialog-card { max-width: 420px; width: 90%; background: #fff; border-radius: 24px; border: 1px solid var(--border-glass); animation: target-card-in 0.5s ease; position: relative; overflow: visible; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); transform: scale(0.9); transition: transform 0.3s ease }
.target-dialog-overlay.active .target-dialog-card { transform: scale(1) }
.target-dialog-card::before { content: ""; position: absolute; inset: -2px; border-radius: 26px; background: linear-gradient(45deg, #06b6d4, #3b82f6, #60a5fa, #06b6d4); background-size: 400% 400%; animation: target-glow-pulse 2s ease infinite; z-index: -1; opacity: 0.5 }
.target-dialog-body { text-align: center; padding: 32px 28px; position: relative }
.target-dialog-icon { width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #1a1a2e, #0f0f1a); border: 2px solid rgba(255, 215, 0, 0.4); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; animation: target-star-pulse 1.2s ease infinite; box-shadow: 0 0 40px rgba(255, 215, 0, 0.25), 0 0 80px rgba(255, 215, 0, 0.1), inset 0 0 30px rgba(255, 215, 0, 0.1) }
.target-dialog-icon i { font-size: 38px; color: #ffd700; text-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4) }
.target-dialog-title { font-size: 22px; margin-bottom: 4px; color: #1e293b; font-weight: 800; letter-spacing: 0.5px }
.target-dialog-subtitle { font-size: 14px; color: #3b82f6; font-weight: 700; margin-bottom: 22px; letter-spacing: 0.3px }
.target-dialog-info { background: #f8fafc; border-radius: 14px; padding: 18px; margin-bottom: 22px; text-align: left }
.target-dialog-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #e2e8f0 }
.target-dialog-row:last-child { border-bottom: none }
.target-dialog-label { color: #94a3b8; font-size: 13px }
.target-dialog-value { color: #1e293b; font-weight: 600; font-size: 14px }
.target-dialog-value.black { color: #1e293b; font-weight: 700 }
.target-dialog-value.blue { color: #3b82f6; font-weight: 700 }
.target-dialog-value.green { color: #10b981; font-weight: 700 }
.target-dialog-btn { background: linear-gradient(135deg, #06b6d4, #3b82f6); color: #fff; font-weight: 700; padding: 12px 48px; border: none; border-radius: 12px; cursor: pointer; font-size: 14px; transition: all 0.25s ease; letter-spacing: 0.3px; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3) }
.target-dialog-btn:hover { transform: scale(1.05); box-shadow: 0 6px 30px rgba(59, 130, 246, 0.45) }
.target-dialog-autowd { background: #fff7ed; border: 1px solid rgba(249, 115, 22, 0.25); border-radius: 12px; padding: 12px 14px; margin-bottom: 20px; font-size: 13px; line-height: 1.5; color: #475569; text-align: left }
.target-dialog-autowd b { color: #0f172a; font-weight: 800 }
/* ── Confetti ────────────────────────────────────────────────────── */
.confetti-piece { position: fixed; top: -10px; z-index: 100000; pointer-events: none; animation: confetti-fall linear forwards }
@keyframes confetti-fall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}
/* ── Fireworks ───────────────────────────────────────────────────── */
.firework-rocket { position: fixed; width: 4px; height: 14px; border-radius: 2px; pointer-events: none; z-index: 100001 }
.firework-burst { position: fixed; width: 5px; height: 5px; border-radius: 50%; pointer-events: none; z-index: 100002; animation: particle-burst 0.8s ease-out forwards }
@keyframes particle-burst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0);
    opacity: 0;
  }
}
/* ── Animations ──────────────────────────────────────────────────── */

@keyframes target-card-in {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes target-star-pulse { 
    0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(255, 215, 0, 0.2), 0 0 60px rgba(255, 215, 0, 0.1) }
    50% { transform: scale(1.18); box-shadow: 0 0 60px rgba(255, 215, 0, 0.45), 0 0 120px rgba(255, 215, 0, 0.25), 0 0 180px rgba(255, 215, 0, 0.1) }
}
@keyframes target-glow-pulse {
  0%,
  100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.2), 0 0 40px rgba(59, 130, 246, 0.1); }
  50% { box-shadow: 0 0 40px rgba(6, 182, 212, 0.35), 0 0 80px rgba(59, 130, 246, 0.2); }
}
.bot-stat-target { border-left: 2px solid #3b82f6; background: rgba(59, 130, 246, 0.06) }

/* ── CALCULATOR PAGE (symbol rain + table + info only) ───────────── */
.calc-symbols { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 }
.calc-symbols span { position: absolute; top: -30px; color: rgba(255, 255, 255, 0.15); font-family: "Fira Code", monospace; font-weight: 700; animation: calcRain linear infinite; text-shadow: 0 0 8px rgba(255, 255, 255, 0.15) }
.calc-symbols span:nth-child(3n) { color: rgba(255, 255, 255, 0.25); text-shadow: 0 0 12px rgba(255, 255, 255, 0.25) }
.calc-symbols span:nth-child(5n) { color: rgba(255, 215, 0, 0.2); text-shadow: 0 0 10px rgba(255, 215, 0, 0.2) }
.calc-error { padding: 24px; text-align: center; color: #ef4444; font-weight: 600; font-size: 13px }

@keyframes calcRain {
  0% {
    transform: translateY(-30px) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 0.7;
  }
  85% {
    opacity: 0.25;
  }
  100% {
    transform: translateY(250px) rotate(180deg);
    opacity: 0;
  }
}