@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --primary: #6C5CE7;
    --primary-light: #A29BFE;
    --primary-dark: #5A4BD1;
    --accent: #00CEC9;
    --accent-light: #81ECEC;
    --gold: #FDCB6E;
    --gold-dark: #E17055;
    --silver: #B2BEC3;
    --diamond: #74B9FF;
    --success: #00B894;
    --warning: #FDCB6E;
    --danger: #FF7675;
    --bg: #F8F9FE;
    --card: #FFFFFF;
    --text: #2D3436;
    --text-light: #636E72;
    --border: #E8ECF4;
    --sidebar-bg: #2D3436;
    --sidebar-text: #DFE6E9;
    --shadow: 0 2px 20px rgba(108,92,231,0.08);
    --shadow-hover: 0 8px 30px rgba(108,92,231,0.15);
    --radius: 16px;
    --radius-sm: 10px;
}
body { font-family:'Tajawal',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }

body.dark-mode {
    --bg: #111827;
    --card: #1F2937;
    --text: #F3F4F6;
    --text-light: #9CA3AF;
    --border: #374151;
    --sidebar-bg: #0F172A;
    --sidebar-text: #D1D5DB;
    --shadow: 0 2px 20px rgba(0,0,0,0.4);
    --shadow-hover: 0 8px 30px rgba(0,0,0,0.5);
}
body.dark-mode .login-container { background:rgba(31,41,55,0.97); }
body.dark-mode .login-container h1, body.dark-mode .login-container p { color:var(--text); }
body.dark-mode .login-page { background:linear-gradient(135deg,#1E1B4B 0%,#312E81 50%,#134E4A 100%); }
body.dark-mode .form-group input, body.dark-mode .form-group select, body.dark-mode .form-group textarea { background:#111827; color:var(--text); border-color:var(--border); }
body.dark-mode .form-group input:focus, body.dark-mode .form-group select:focus, body.dark-mode .form-group textarea:focus { background:#1F2937; border-color:var(--primary-light); }
body.dark-mode .form-group input::placeholder { color:#6B7280; }
body.dark-mode .form-group label { color:var(--text); }
body.dark-mode .modal { background:var(--card); color:var(--text); }
body.dark-mode .modal h3 { color:var(--text); }
body.dark-mode .stat-card { color:white; }
body.dark-mode .stat-card .stat-label { color:rgba(255,255,255,0.85); }
body.dark-mode .bottom-nav { background:var(--card); border-color:var(--border); }
body.dark-mode .bottom-nav-item { color:var(--text-light); }
body.dark-mode .bottom-nav-item.active { color:var(--primary-light); }
body.dark-mode .top-marketer-chip { background:var(--card); border-color:var(--border); color:var(--text); }
body.dark-mode .top-marketer-chip .chip-name { color:var(--text); }
body.dark-mode .top-marketer-chip .chip-badge { color:var(--text-light); }
body.dark-mode .admin-card { background:var(--card); color:var(--text); }
body.dark-mode .config-row label { color:var(--text); }
body.dark-mode .config-row input, body.dark-mode .config-row textarea { background:#111827; color:var(--text); border-color:var(--border); }
body.dark-mode .login-error { background:#2A1A1A; color:#FCA5A5; }
body.dark-mode .card { background:var(--card); color:var(--text); border-color:var(--border); }
body.dark-mode .card-title { color:var(--text); }
body.dark-mode .page-header h2 { color:var(--text); }
body.dark-mode .page-header p { color:var(--text-light); }
body.dark-mode .balance-amount { color:var(--text); }
body.dark-mode table th, body.dark-mode table td { color:var(--text); }
body.dark-mode .task-card { background:var(--card); border-color:var(--border); color:var(--text); }
body.dark-mode .claim-btn { color:#1F2937; }
body.dark-mode .nav-item { color:var(--sidebar-text); }
body.dark-mode .sidebar-user-name { color:var(--text); }
body.dark-mode .countdown-display { color:var(--text-light); }
body.dark-mode .countdown-display span { color:var(--text); }
body.dark-mode #pwRules li { color:var(--text-light); }
body.dark-mode .progress-bar { background:var(--border); }
body.dark-mode .form-hint { color:var(--text-light); }
body.dark-mode a { color:var(--primary-light); }
body.dark-mode .config-row { background:#111827; }
body.dark-mode .btn-outline { border-color:var(--border); color:var(--primary-light); }
body.dark-mode [style*="background:#F8F9FE"], body.dark-mode [style*="background:#FAFBFF"] { background:#111827 !important; }
body.dark-mode [style*="background:white"] { background:var(--card) !important; }
body.dark-mode [style*="color:#2D3436"] { color:var(--text) !important; }
body.dark-mode [style*="color:#636E72"], body.dark-mode [style*="color:#999"] { color:var(--text-light) !important; }
body.dark-mode [style*="color:#C0392B"] { color:#FCA5A5 !important; }
body.dark-mode [style*="background:#FFF5F5"] { background:#2A1A1A !important; }
body.dark-mode [style*="background:#FFE8E8"] { background:#2A1A1A !important; }
body.dark-mode [style*="background:#F5F5F5"] { background:#111827 !important; }
body.dark-mode [style*="background:linear-gradient(135deg,#FFF5F5"] { background:linear-gradient(135deg,#2A1A1A,#2A1A1A) !important; }
body.dark-mode [style*="background:linear-gradient(135deg,#FFFCF0"] { background:linear-gradient(135deg,#2A2510,#2A2510) !important; }
body.dark-mode [style*="border:1px solid #FFD0D0"] { border-color:#5C2A2A !important; }
body.dark-mode .sidebar-footer { border-color:var(--border); }
body.dark-mode select option { background:var(--card); color:var(--text); }
body.dark-mode .form-error { color:#FCA5A5; }
body.dark-mode .login-role-switch { color:var(--text-light); }
body.dark-mode .login-role-switch a { color:var(--primary-light); }

/* LOGIN */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#6C5CE7 0%,#A29BFE 50%,#00CEC9 100%); position:relative; overflow:hidden; }
.login-page::before { content:''; position:absolute; width:600px; height:600px; background:rgba(255,255,255,0.05); border-radius:50%; top:-200px; left:-200px; }
.login-page::after { content:''; position:absolute; width:400px; height:400px; background:rgba(255,255,255,0.05); border-radius:50%; bottom:-100px; right:-100px; }
.login-container { background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); border-radius:24px; padding:50px 40px; width:420px; max-width:90%; box-shadow:0 25px 60px rgba(0,0,0,0.15); position:relative; z-index:1; text-align:center; }
.login-logo { width:80px; height:80px; background:linear-gradient(135deg,var(--primary),var(--accent)); border-radius:20px; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; font-size:36px; color:white; box-shadow:0 10px 30px rgba(108,92,231,0.3); }
.login-container h1 { font-size:26px; font-weight:800; margin-bottom:8px; }
.login-container p { color:var(--text-light); margin-bottom:32px; font-size:15px; }
.form-group { margin-bottom:20px; text-align:right; }
.form-group label { display:block; margin-bottom:8px; font-weight:500; font-size:14px; }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:14px 18px; border:2px solid var(--border); border-radius:var(--radius-sm); font-family:'Tajawal',sans-serif; font-size:15px; transition:all 0.3s; background:#FAFBFF; color:var(--text); }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--primary); background:white; box-shadow:0 0 0 4px rgba(108,92,231,0.1); }
.form-hint { font-size:12px; color:var(--text-light); margin-top:6px; }
.form-error { font-size:12px; color:var(--danger); margin-top:6px; display:none; }
.form-error.show { display:block; }
.input-wrapper { position:relative; }
.input-wrapper .toggle-pass { position:absolute; left:14px; top:50%; transform:translateY(-50%); cursor:pointer; font-size:18px; color:var(--text-light); background:none; border:none; padding:4px; }

.btn { padding:14px 28px; border:none; border-radius:var(--radius-sm); font-family:'Tajawal',sans-serif; font-size:15px; font-weight:700; cursor:pointer; transition:all 0.3s; display:inline-flex; align-items:center; gap:8px; }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:white; width:100%; justify-content:center; padding:16px; font-size:16px; box-shadow:0 4px 15px rgba(108,92,231,0.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(108,92,231,0.4); }
.btn-success { background:linear-gradient(135deg,var(--success),#00A885); color:white; }
.btn-danger { background:linear-gradient(135deg,var(--danger),#E06665); color:white; }
.btn-outline { background:transparent; border:2px solid var(--primary); color:var(--primary); }
.btn-outline:hover { background:var(--primary); color:white; }
.btn-sm { padding:8px 16px; font-size:13px; border-radius:8px; }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none !important; }
.login-error { background:#FFF0F0; color:var(--danger); padding:12px; border-radius:8px; margin-bottom:16px; font-size:14px; display:none; }
.login-role-switch { margin-top:20px; font-size:14px; color:var(--text-light); }
.login-role-switch a { color:var(--primary); cursor:pointer; font-weight:700; text-decoration:none; }

/* DASHBOARD */
.dashboard { display:none; min-height:100vh; }
.sidebar { position:fixed; right:0; top:0; width:260px; height:100vh; background:var(--sidebar-bg); padding:24px 0; z-index:100; display:flex; flex-direction:column; }
.sidebar-header { padding:0 24px 24px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:16px; }
.sidebar-logo { display:flex; align-items:center; gap:12px; }
.sidebar-logo-icon { width:42px; height:42px; background:linear-gradient(135deg,var(--primary),var(--accent)); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; color:white; }
.sidebar-logo-text { color:white; font-size:18px; font-weight:700; }
.sidebar-user { padding:16px 24px; margin:0 12px 16px; background:rgba(255,255,255,0.05); border-radius:12px; }
.sidebar-user-name { color:white; font-weight:700; font-size:15px; margin-bottom:4px; }
.sidebar-user-level { font-size:12px; padding:3px 10px; border-radius:20px; display:inline-block; font-weight:700; }
.level-bronze { background:linear-gradient(135deg,#CD7F32,#A0522D); color:white; }
.level-silver { background:linear-gradient(135deg,#B2BEC3,#DFE6E9); color:#2D3436; }
.level-gold { background:linear-gradient(135deg,#FDCB6E,#E17055); color:#2D3436; }
.level-diamond { background:linear-gradient(135deg,#74B9FF,#A29BFE); color:white; }
.sidebar-nav { flex:1; padding:0 12px; }
.nav-item { display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:10px; color:var(--sidebar-text); cursor:pointer; transition:all 0.2s; margin-bottom:4px; font-size:14px; font-weight:500; }
.nav-item:hover { background:rgba(255,255,255,0.08); }
.nav-item.active { background:var(--primary); color:white; font-weight:700; }
.nav-item .nav-icon { width:22px; text-align:center; font-size:18px; }
.nav-divider { height:1px; background:rgba(255,255,255,0.08); margin:12px 16px; }
.sidebar-footer { padding:16px 24px; border-top:1px solid rgba(255,255,255,0.08); }
.logout-btn { display:flex; align-items:center; gap:10px; color:var(--danger); cursor:pointer; font-size:14px; font-weight:500; padding:10px 0; }
.main-content { margin-right:260px; padding:32px; min-height:100vh; }
.page-header { margin-bottom:28px; }
.page-header h2 { font-size:26px; font-weight:800; margin-bottom:6px; }
.page-header p { color:var(--text-light); font-size:14px; }

.card { background:var(--card); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); border:1px solid var(--border); transition:all 0.3s; }
.card:hover { box-shadow:var(--shadow-hover); }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.card-title { font-size:17px; font-weight:700; display:flex; align-items:center; gap:10px; }
.card-title .icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-bottom:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }

.task-card { background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); border:1px solid var(--border); transition:all 0.3s; margin-bottom:16px; position:relative; }
.task-card:hover { box-shadow:var(--shadow-hover); }
.task-card.locked { opacity:0.6; }
.task-card.locked::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.3); border-radius:var(--radius); z-index:2; }
.task-status { display:inline-block; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700; margin-bottom:10px; }
.status-active { background:#E8FFF3; color:var(--success); }
.status-pending { background:#FFF8E1; color:#F39C12; }
.status-review { background:#EBF0FF; color:var(--primary); }
.status-done { background:#E8FFF3; color:var(--success); }
.status-rejected { background:#FFEBEE; color:var(--danger); }
.status-locked { background:#F5F5F5; color:#999; }
.task-title { font-weight:700; font-size:17px; margin-bottom:6px; }
.task-desc { font-size:13px; color:var(--text-light); margin-bottom:12px; }
.task-meta { display:flex; gap:16px; font-size:13px; color:var(--text-light); margin-bottom:12px; }
.task-actions { display:flex; gap:8px; margin-top:12px; }
.rejection-box { background:#FFF0F0; padding:12px 16px; border-radius:10px; margin-top:12px; font-size:13px; color:var(--danger); }

.resource-card { background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); border:1px solid var(--border); display:flex; align-items:center; gap:16px; transition:all 0.3s; cursor:pointer; }
.resource-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.resource-icon { width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.resource-info h4 { font-size:15px; font-weight:700; margin-bottom:4px; }
.resource-info p { font-size:13px; color:var(--text-light); }

.stat-card { background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); border:1px solid var(--border); position:relative; overflow:hidden; }
.stat-card .stat-label { font-size:13px; color:var(--text-light); font-weight:600; }
.stat-card .stat-value { font-size:28px; font-weight:800; margin-top:4px; }
.stat-card .stat-icon { position:absolute; top:16px; left:16px; font-size:28px; opacity:0.15; }
.stat-card.purple .stat-value { color:var(--primary); }
.stat-card.green .stat-value { color:var(--success); }
.stat-card.orange .stat-value { color:#E17055; }
.stat-card.blue .stat-value { color:#0984E3; }
.balance-amount { font-size:36px; font-weight:800; color:var(--success); }
.balance-amount span { font-size:16px; font-weight:600; }

.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.admin-card { background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); border:1px solid var(--border); margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; }
.admin-user-info { display:flex; align-items:center; gap:14px; }
.admin-avatar { width:45px; height:45px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:18px; }
.admin-actions { display:flex; gap:8px; flex-wrap:wrap; }

.section { display:none; }
.section.active { display:block; }

.progress-container { margin-top:12px; }
.progress-label { display:flex; justify-content:space-between; font-size:12px; color:var(--text-light); margin-bottom:6px; }
.progress-bar { height:8px; background:var(--border); border-radius:8px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:8px; transition:width 0.5s; }
.progress-fill.full { background:linear-gradient(90deg,var(--success),#00CEC9); }

.config-row { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#F8F9FE; border-radius:10px; margin-bottom:8px; }
.config-row label { flex:1; font-size:14px; font-weight:600; }
.config-row input[type="number"] { width:100px; padding:8px 12px; border:2px solid var(--border); border-radius:8px; font-family:'Tajawal',sans-serif; font-size:14px; text-align:center; }
.config-row input[type="url"] { flex:2; padding:8px 12px; border:2px solid var(--border); border-radius:8px; font-family:'Tajawal',sans-serif; font-size:13px; direction:ltr; text-align:left; }

/* Loading + Animations */
.btn.loading .btn-text { visibility:hidden; }
.btn .spinner { display:none; }
.btn.loading .spinner { display:inline-block; width:18px; height:18px; border:2px solid rgba(255,255,255,0.3); border-top-color:white; border-radius:50%; animation:spin 0.6s linear infinite; position:absolute; }
@keyframes spin { to { transform:rotate(360deg); } }
.login-page.fade-out { animation:fadeOutOverlay 0.4s ease-out both; }

.toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); background:#2D3436; color:white; padding:14px 28px; border-radius:12px; font-size:14px; font-weight:600; z-index:99999; opacity:0; transition:all 0.3s; pointer-events:none; max-width:90vw; text-align:center; }
.toast.show { opacity:1; animation:toastIn 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.toast.success { background:var(--success); }
.toast.error { background:var(--danger); }
.toast.warning { background:#E17055; }
@keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(20px) scale(0.9); } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }

@keyframes fadeIn { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInScale { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
.fade-in { animation:fadeIn 0.4s ease-out both; }
.fade-in-delay-1 { animation:fadeIn 0.4s ease-out 0.08s both; }
.fade-in-delay-2 { animation:fadeIn 0.4s ease-out 0.16s both; }
.fade-in-delay-3 { animation:fadeIn 0.4s ease-out 0.24s both; }

.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:500; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.section.active { animation:fadeIn 0.35s ease-out both; }

.dashboard.slide-in { animation:fadeInOpacity 0.5s ease-out both; }
@keyframes fadeInOpacity { from { opacity:0; } to { opacity:1; } }

.modal-overlay.show { animation:fadeInOverlay 0.25s ease-out both; }
.modal-overlay.show .modal { animation:fadeInScale 0.3s cubic-bezier(0.34,1.56,0.64,1) both; }
.modal-overlay.closing { animation:fadeOutOverlay 0.2s ease-out both; }
.modal-overlay.closing .modal { animation:fadeOutScale 0.2s ease-out both; }
@keyframes fadeInOverlay { from { opacity:0; } to { opacity:1; } }
@keyframes fadeOutOverlay { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOutScale { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(0.95); } }
.modal { background:white; border-radius:var(--radius); padding:32px; width:480px; max-width:90%; max-height:90vh; overflow-y:auto; }
.modal h3 { font-size:20px; font-weight:800; margin-bottom:20px; }
.modal-actions { display:flex; gap:12px; margin-top:20px; }

.login-container { animation:fadeInScale 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }

.task-card, .stat-card, .admin-card { transition:all 0.3s cubic-bezier(0.4,0,0.2,1); }

.countdown-text { font-size:13px; color:var(--text-light); padding:8px 0; }
.countdown-text.ready { color:var(--success); font-weight:700; }
.countdown-display { font-size:12px; color:var(--text-light); padding:4px 0; font-weight:500; }
.countdown-display span { display:inline-block; margin-right:4px; }
.claim-btn { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:white; border:none; padding:8px 16px; border-radius:8px; font-family:'Tajawal',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.3s; }
.claim-btn:hover { transform:scale(1.05); box-shadow:0 4px 12px rgba(253,203,110,0.4); }
.claim-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.fly-number { position:fixed; z-index:9999; font-size:24px; font-weight:900; color:#00b894; pointer-events:none; text-shadow:0 0 10px rgba(0,184,148,0.5), 0 0 20px rgba(0,184,148,0.3); white-space:nowrap; }
@keyframes floatUp { 0% { opacity:1; transform:translateY(0) scale(1); } 40% { opacity:1; transform:translateY(-30px) scale(1.3); } 100% { opacity:0; transform:translateY(-70px) scale(0.8); } }
.coin-particle { position:fixed; z-index:9998; font-size:22px; pointer-events:none; }
@keyframes coinFly { 0% { opacity:1; transform:translate(0,0) scale(1) rotate(0deg); } 50% { opacity:1; transform:translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5 - 40px)) scale(1.3) rotate(180deg); } 100% { opacity:0; transform:translate(var(--dx), var(--dy)) scale(0.3) rotate(360deg); } }
@keyframes claimPulse { 0% { transform:scale(1); } 30% { transform:scale(1.12); filter:brightness(1.3); box-shadow:0 0 30px rgba(0,184,148,0.6); } 60% { transform:scale(0.97); } 100% { transform:scale(1); filter:brightness(1); } }
.balance-claimed { animation:claimPulse 0.8s ease-out; }
.claim-flash { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,184,148,0.08); z-index:9990; pointer-events:none; animation:flashFade 0.4s ease-out forwards; }
@keyframes flashFade { 0% { opacity:1; } 100% { opacity:0; } }

/* Analytics filter buttons */
.analytics-filter { flex:1; min-width:max-content; padding:10px 16px; text-align:center; font-size:12px; font-weight:700; cursor:pointer; border-radius:10px; color:var(--text-light); transition:all 0.25s; white-space:nowrap; border:none; background:none; font-family:'Tajawal',sans-serif; }
.analytics-filter:hover { color:var(--text); background:var(--bg); }
.analytics-filter.active { background:var(--primary); color:white; box-shadow:0 2px 8px rgba(108,92,231,0.3); }
.level-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.level-bar-label { font-size:12px; font-weight:600; min-width:60px; }
.level-bar-track { flex:1; height:24px; background:var(--bg); border-radius:8px; overflow:hidden; position:relative; }
.level-bar-fill { height:100%; border-radius:8px; transition:width 0.5s ease; display:flex; align-items:center; justify-content:flex-end; padding:0 8px; font-size:11px; font-weight:700; color:white; min-width:fit-content; }
.level-bar-count { font-size:12px; font-weight:700; min-width:30px; text-align:left; }

.top-marketer-chip { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:8px 14px; box-shadow:var(--shadow); }
.top-marketer-avatar { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:14px; }
.top-marketer-chip .chip-name { font-weight:700; font-size:13px; }
.top-marketer-chip .chip-badge { font-size:11px; }

.help-tooltip { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--border); color:var(--text-light); font-size:11px; font-weight:700; cursor:pointer; margin-right:6px; flex-shrink:0; }
.tooltip-popup { display:none; position:fixed; background:var(--sidebar-bg); color:white; padding:16px 18px; border-radius:12px; font-size:13px; font-weight:400; line-height:1.8; width:280px; max-width:85vw; z-index:10000; box-shadow:0 8px 30px rgba(0,0,0,0.35); }
.tooltip-popup.show { display:block; animation:tooltipFadeIn 0.2s ease-out; }
@keyframes tooltipFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.tooltip-popup a { color:var(--accent-light); text-decoration:none; display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-weight:600; font-size:12px; }
.tooltip-popup a:hover { text-decoration:underline; }
body.dark-mode .help-tooltip { background:var(--border); }
body.dark-mode .tooltip-popup { background:#0F0F23; }

/* Bottom Nav (Instagram style) - Safari safe area fix */
.bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:white; border-top:1px solid var(--border); z-index:200; padding:6px 0 calc(env(safe-area-inset-bottom, 8px) + 8px); box-shadow:0 -2px 10px rgba(0,0,0,0.06); -webkit-transform:translateZ(0); transform:translateZ(0); }
.bottom-nav { justify-content:space-around; align-items:center; }
.bottom-nav-item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 8px; cursor:pointer; font-size:10px; color:var(--text-light); transition:all 0.2s; border-radius:8px; min-width:56px; }
.bottom-nav-item.active { color:var(--primary); font-weight:700; }
.bottom-nav-icon { font-size:20px; line-height:1; }

@media (max-width:1024px) { .grid-4,.grid-3 { grid-template-columns:1fr 1fr; } }
@media (max-width:768px) {
    .sidebar { display:none; }
    .bottom-nav { display:flex; }
    .main-content { margin-right:0; padding:16px 16px 100px; }
    .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
    .balance-amount { font-size:28px; }
    .page-header h2 { font-size:20px; }
    .admin-card { flex-direction:column; align-items:stretch; }
    .admin-card > div:last-child { text-align:right; }
}

#pwRules { list-style:none; font-size:12px; color:var(--text-light); margin-top:8px; }
#pwRules li::before { content:'✗ '; color:var(--danger); }
#pwRules li.valid::before { content:'✓ '; color:var(--success); }
#pwRules li.valid { color:var(--success); }