/* ============================================
   FEMOOLEE - MAIN STYLESHEET
   Dark + Emerald Green Theme
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-brands/css/uicons-brands.css');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-solid-rounded/css/uicons-solid-rounded.css');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-rounded/css/uicons-regular-rounded.css');

:root {
  --orange-primary:    #059669;
  --orange-light:      #10b981;
  --orange-bright:     #34d399;
  --orange-dark:       #064e3b;
  --orange-deeper:     #065f46;
  --orange-soft:       #0e1a10;
  --orange-glow:       rgba(5,150,105,0.12);
  --bg-primary:        #080f0a;
  --bg-secondary:      #0e1a10;
  --bg-card:           rgba(255,255,255,0.04);
  --bg-card-hover:     rgba(255,255,255,0.08);
  --glass:             rgba(255,255,255,0.06);
  --glass-strong:      rgba(255,255,255,0.10);
  --glass-border:      rgba(255,255,255,0.10);
  --glass-border-soft: rgba(255,255,255,0.06);
  --glass-shadow:      0 8px 32px rgba(0,0,0,0.40);
  --text-primary:      #f1f5f9;
  --text-muted:        #94a3b8;
  --text-dim:          #64748b;
  --text-on-orange:    #ffffff;
  --green:             #22c55e;
  --red:               #ef4444;
  --blue:              #2563eb;
  --border:            rgba(255,255,255,0.08);
  --border-hard:       rgba(255,255,255,0.18);
  --shadow:            0 8px 32px rgba(0,0,0,0.40);
  --shadow-strong:     0 16px 48px rgba(0,0,0,0.55);
  --radius:            16px;
  --radius-sm:         10px;
  --radius-xs:         6px;
  --transition:        all 0.25s cubic-bezier(0.4,0,0.2,1);
  /* compat aliases */
  --blue-primary:  #059669;
  --blue-light:    #10b981;
  --blue-bright:   #34d399;
  --blue-dark:     #064e3b;
  --blue-deeper:   #065f46;
  --accent:        #6ee7b7;
  --orange:        #f97316;
  --card-bg:       rgba(255,255,255,0.06);
  --text:          #f1f5f9;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(5,150,105,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(6,95,70,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 60% 30%, rgba(52,211,153,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

h1,h2,h3,h4,h5,h6 { font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--text-primary); line-height:1.3; }
a { color:var(--orange-primary); text-decoration:none; transition:var(--transition); }
a:hover { color:var(--orange-deeper); }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--orange-soft); }
::-webkit-scrollbar-thumb { background:var(--orange-bright); border-radius:99px; }

/* ── GLASS CARD ── */
.card {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(5,150,105,0.35),transparent);
  pointer-events:none;
}
.card:hover { background:var(--glass-strong); border-color:var(--border-hard); box-shadow:var(--shadow-strong); transform:translateY(-1px); }

/* ── STAT CARD ── */
.stat-card {
  background:var(--glass); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border); border-radius:var(--radius); padding:18px 16px;
  box-shadow:var(--glass-shadow); transition:var(--transition); position:relative; overflow:hidden;
}
.stat-card::after { content:''; position:absolute; bottom:0; right:0; width:80px; height:80px; background:radial-gradient(circle,var(--orange-glow) 0%,transparent 70%); pointer-events:none; }
.stat-card:hover { border-color:var(--border-hard); box-shadow:var(--shadow-strong); transform:translateY(-2px); }
.stat-card.clickable { cursor:pointer; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 22px; border-radius:var(--radius-sm);
  font-family:'Nunito',sans-serif; font-weight:700; font-size:14px;
  cursor:pointer; border:none; transition:var(--transition); white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,transparent 60%); pointer-events:none; }
.btn-primary { background:linear-gradient(135deg,var(--orange-primary),var(--orange-deeper)); color:#fff; box-shadow:0 4px 20px rgba(5,150,105,0.38); }
.btn-primary:hover { background:linear-gradient(135deg,var(--orange-deeper),var(--orange-dark)); box-shadow:0 6px 28px rgba(5,150,105,0.52); transform:translateY(-1px); color:#fff; }
.btn-outline { background:transparent; border:1.5px solid var(--orange-primary); color:var(--orange-primary); }
.btn-outline:hover { background:var(--orange-primary); color:#fff; }
.btn-glass { background:var(--glass); border:1px solid var(--glass-border); color:var(--text-primary); backdrop-filter:blur(10px); }
.btn-glass:hover { background:rgba(5,150,105,0.07); border-color:var(--orange-primary); color:var(--orange-primary); }
.btn-success { background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff; box-shadow:0 4px 16px rgba(34,197,94,0.28); }
.btn-danger  { background:linear-gradient(135deg,#dc2626,#ef4444); color:#fff; box-shadow:0 4px 16px rgba(239,68,68,0.28); }
.btn-sm { padding:7px 14px; font-size:13px; }
.btn-lg { padding:13px 32px; font-size:15px; }
.btn-block { width:100%; }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none !important; }

/* ── FORMS ── */
.form-group { margin-bottom:18px; }
.form-label { display:block; color:var(--text-muted); font-size:13px; font-weight:700; margin-bottom:7px; letter-spacing:0.3px; }
.form-control {
  width:100%; background:rgba(14,26,16,0.82); backdrop-filter:blur(10px);
  border:1.5px solid var(--glass-border); border-radius:var(--radius-sm);
  padding:11px 14px; color:var(--text-primary);
  font-family:'Nunito',sans-serif; font-size:14px; transition:var(--transition); outline:none;
}
.form-control:focus { border-color:var(--orange-primary); background:rgba(14,26,16,0.92); box-shadow:0 0 0 3px rgba(5,150,105,0.10); }
.form-control::placeholder { color:var(--text-dim); }
select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:80px; }
.form-hint { display:block; font-size:12px; color:var(--text-dim); margin-top:5px; }

.input-group { position:relative; }
.input-group .form-control { padding-left:42px; }
.input-group .form-control.has-right { padding-right:42px; }
.input-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--orange-primary); font-size:15px; pointer-events:none; display:flex; align-items:center; }
.input-icon-right { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-dim); font-size:15px; cursor:pointer; display:flex; align-items:center; }

/* ── NAVBAR ── */
.navbar {
  position:sticky; top:0; z-index:800;
  background:rgba(14,26,16,0.84); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--glass-border);
  padding:0 20px; height:60px;
  display:flex; align-items:center; gap:16px;
  box-shadow:0 2px 20px rgba(5,150,105,0.07);
}
.navbar-brand {
  display:flex; align-items:center; gap:10px;
  font-family:'Space Grotesk',sans-serif; font-weight:900; font-size:18px;
  color:var(--orange-primary) !important; text-decoration:none; letter-spacing:-0.5px; flex-shrink:0;
}
.navbar-brand img { height:32px; width:auto; border-radius:8px; }
.navbar-nav { list-style:none; display:flex; align-items:center; gap:4px; margin-left:auto; }
.navbar-nav li { display:flex; }
.nav-link { display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--radius-sm); color:var(--text-muted); font-weight:600; font-size:13.5px; transition:var(--transition); }
.nav-link:hover, .nav-link.active { color:var(--orange-primary); background:var(--orange-glow); }
.d-mobile { display:none; }

/* ── BOTTOM NAV ── */
.bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:900;
  background:rgba(14,26,16,0.90); backdrop-filter:blur(28px) saturate(200%); -webkit-backdrop-filter:blur(28px) saturate(200%);
  border-top:1px solid var(--glass-border);
  box-shadow:0 -4px 24px rgba(5,150,105,0.08);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.bottom-nav-inner {
  display:flex; align-items:center; justify-content:space-around;
  height:62px; max-width:480px; margin:0 auto; padding:0 8px;
}
.bottom-nav-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:8px 16px; border-radius:var(--radius-sm);
  color:var(--text-dim); font-size:10px; font-weight:700; letter-spacing:0.3px;
  transition:var(--transition); text-decoration:none; min-width:60px; position:relative;
}
.bottom-nav-item i { font-size:20px; transition:var(--transition); }
.bottom-nav-item:hover, .bottom-nav-item.active { color:var(--orange-primary); }
.bottom-nav-item.active::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:28px; height:3px; background:var(--orange-primary); border-radius:0 0 4px 4px;
}
.bottom-nav-item.active i { filter:drop-shadow(0 2px 6px rgba(5,150,105,0.45)); }

/* ── PAGE LAYOUT ── */
.page-wrapper { position:relative; z-index:1; padding:16px 16px 90px; }
.container { max-width:900px; margin:0 auto; width:100%; }
.section { padding:40px 20px; }

/* ── ADS SLIDER (Image format) ── */
.ads-slider {
  position:relative; border-radius:var(--radius); overflow:hidden; margin-bottom:18px;
  background:var(--glass); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow);
  aspect-ratio:2.8/1; min-height:120px;
}
.ads-track { display:flex; height:100%; transition:transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.ad-slide { flex:0 0 100%; position:relative; display:block; text-decoration:none; cursor:pointer; overflow:hidden; height:100%; }
.ad-slide img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease; }
.ad-slide:hover img { transform:scale(1.02); }
.ad-slide-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,0,0,0.18) 0%,transparent 60%); pointer-events:none; }
.ad-slide-text { position:absolute; bottom:14px; left:16px; right:16px; z-index:2; }
.ad-slide-text h4 { font-size:13px; font-weight:800; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.4); margin-bottom:2px; }
.ad-slide-text p { font-size:11px; color:rgba(255,255,255,0.85); text-shadow:0 1px 3px rgba(0,0,0,0.3); }
.ads-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:5; }
.ads-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; transition:var(--transition); }
.ads-dot.active { background:#fff; width:20px; border-radius:3px; }
.ads-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; background:rgba(255,255,255,0.75); backdrop-filter:blur(8px); border:none; border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--orange-primary); font-size:13px; transition:var(--transition); box-shadow:0 2px 10px rgba(0,0,0,0.12); }
.ads-arrow:hover { background:#fff; box-shadow:0 4px 14px rgba(5,150,105,0.2); }
.ads-arrow.prev { left:10px; }
.ads-arrow.next { right:10px; }

/* ── LOGO COMPONENT ── */
.brand-logo { display:inline-flex; align-items:center; gap:10px; }
.brand-logo-icon {
  width:40px; height:40px; background:linear-gradient(135deg,var(--orange-primary),var(--orange-deeper));
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:20px; box-shadow:0 4px 16px rgba(5,150,105,0.38); color:#fff; font-weight:900;
  font-family:'Space Grotesk',sans-serif; letter-spacing:-1px;
}
.brand-logo-text { font-family:'Space Grotesk',sans-serif; font-weight:900; font-size:20px; color:var(--orange-primary); letter-spacing:-0.5px; }
.brand-logo-sub { font-size:9px; color:var(--text-dim); font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-top:-3px; line-height:1; }

/* ── REFERRAL CARD ── */
.referral-card {
  background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border); border-radius:var(--radius); padding:20px; position:relative; overflow:hidden;
}
.referral-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--orange-primary),var(--orange-bright)); }
.referral-code-box {
  background:rgba(14,26,16,0.88); border:1.5px dashed var(--orange-primary); border-radius:var(--radius-sm);
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:10px;
}
.referral-code-text { font-family:'Space Grotesk',monospace; font-weight:800; font-size:16px; color:var(--orange-primary); letter-spacing:2px; }
.referral-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.referral-stat { background:rgba(5,150,105,0.06); border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:12px; text-align:center; }
.referral-stat-value { font-size:20px; font-weight:900; color:var(--orange-primary); }
.referral-stat-label { font-size:11px; color:var(--text-dim); margin-top:2px; font-weight:600; }

/* ── WALLET CARD ── */
.wallet-card {
  background:linear-gradient(135deg,var(--orange-primary) 0%,var(--orange-deeper) 60%,var(--orange-dark) 100%);
  border-radius:var(--radius); padding:22px 20px; color:#fff; position:relative; overflow:hidden;
  box-shadow:0 8px 32px rgba(5,150,105,0.35);
}
.wallet-card::before { content:''; position:absolute; top:-50%; right:-30%; width:200px; height:200px; background:rgba(255,255,255,0.08); border-radius:50%; pointer-events:none; }
.wallet-card::after { content:''; position:absolute; bottom:-40%; left:-20%; width:160px; height:160px; background:rgba(255,255,255,0.05); border-radius:50%; pointer-events:none; }
.wallet-label { font-size:12px; font-weight:600; opacity:0.8; letter-spacing:0.5px; text-transform:uppercase; }
.wallet-balance { font-size:32px; font-weight:900; font-family:'Space Grotesk',sans-serif; margin:4px 0 14px; letter-spacing:-1px; }

/* ── PROFILE HERO ── */
.profile-hero {
  background:linear-gradient(135deg,var(--orange-primary),var(--orange-deeper));
  border-radius:var(--radius); padding:28px 22px; color:#fff; position:relative; overflow:hidden;
  text-align:center; box-shadow:0 8px 32px rgba(5,150,105,0.28);
}
.profile-hero::before { content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px; background:rgba(255,255,255,0.07); border-radius:50%; }
.profile-avatar-ring {
  display:inline-flex; align-items:center; justify-content:center;
  width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,0.20);
  backdrop-filter:blur(10px); border:3px solid rgba(255,255,255,0.50);
  font-size:32px; font-weight:900; margin-bottom:12px; box-shadow:0 4px 20px rgba(0,0,0,0.15);
}

/* ── ALERTS ── */
.alert { padding:12px 16px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:10px; margin-bottom:16px; backdrop-filter:blur(10px); }
.alert-success { background:rgba(34,197,94,0.10); border:1px solid rgba(34,197,94,0.22); color:#16a34a; }
.alert-danger  { background:rgba(239,68,68,0.10); border:1px solid rgba(239,68,68,0.22); color:#dc2626; }
.alert-warning { background:rgba(5,150,105,0.10); border:1px solid rgba(5,150,105,0.22); color:var(--orange-deeper); }
.alert-info    { background:rgba(37,99,235,0.07);  border:1px solid rgba(37,99,235,0.18);  color:#60a5fa; }

/* ── BADGES ── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:700; letter-spacing:0.2px; }
.badge-success { background:rgba(34,197,94,0.12); color:#16a34a; border:1px solid rgba(34,197,94,0.20); }
.badge-danger  { background:rgba(239,68,68,0.12); color:#dc2626; border:1px solid rgba(239,68,68,0.20); }
.badge-warning { background:rgba(5,150,105,0.12); color:var(--orange-primary); border:1px solid rgba(5,150,105,0.20); }
.badge-muted   { background:rgba(148,163,184,0.10); color:var(--text-muted); border:1px solid rgba(148,163,184,0.15); }
.badge-blue    { background:rgba(5,150,105,0.10); color:var(--orange-primary); border:1px solid rgba(5,150,105,0.18); }
.badge-orange  { background:rgba(5,150,105,0.12); color:var(--orange-primary); border:1px solid rgba(5,150,105,0.20); }

/* ── MODALS ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.32); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:2000; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.modal-overlay.active { opacity:1; pointer-events:all; }
.modal-box { background:rgba(14,26,16,0.92); backdrop-filter:blur(30px) saturate(200%); -webkit-backdrop-filter:blur(30px) saturate(200%); border:1px solid var(--glass-border); border-radius:var(--radius) var(--radius) 0 0; padding:20px 20px 32px; width:100%; max-width:500px; max-height:90vh; overflow-y:auto; box-shadow:0 -8px 40px rgba(5,150,105,0.10); transform:translateY(40px); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.modal-overlay.active .modal-box { transform:translateY(0); }
.modal-handle { width:40px; height:4px; background:var(--glass-border); border-radius:2px; margin:0 auto 18px; }
.modal-title { font-size:16px; font-weight:800; margin-bottom:16px; color:var(--text-primary); }

/* ── CAT GRID ── */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.cat-card { background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--glass-border); border-radius:var(--radius); padding:18px 12px; text-align:center; cursor:pointer; transition:var(--transition); position:relative; overflow:hidden; }
.cat-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(5,150,105,0.04) 0%,transparent 60%); pointer-events:none; }
.cat-card:hover { border-color:var(--orange-primary); background:rgba(5,150,105,0.05); transform:translateY(-3px); box-shadow:0 8px 24px rgba(5,150,105,0.14); }
.cat-icon { font-size:28px; display:block; margin-bottom:8px; }
.cat-name { font-size:12px; font-weight:700; color:var(--text-primary); }
.cat-count { font-size:11px; color:var(--text-dim); margin-top:3px; }

/* ── STATS ROW ── */
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }

/* ── TOAST ── */
.toast-container { position:fixed; bottom:90px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:8px; max-width:320px; }
.toast { background:rgba(14,26,16,0.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:12px 16px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px; box-shadow:0 4px 20px rgba(5,150,105,0.10); animation:toastIn 0.3s ease; color:var(--text-primary); }
.toast.success { border-color:rgba(34,197,94,0.28); }
.toast.error   { border-color:rgba(239,68,68,0.28); }
.toast.warning { border-color:rgba(5,150,105,0.32); }
@keyframes toastIn { from { transform:translateX(120%); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* ── PWA BANNER ── */
.pwa-banner { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); z-index:1500; background:linear-gradient(135deg,var(--orange-primary),var(--orange-deeper)); border:1px solid rgba(5,150,105,0.3); border-radius:var(--radius); padding:14px 18px; width:calc(100% - 32px); max-width:400px; box-shadow:0 12px 40px rgba(5,150,105,0.38); display:none; animation:fadeUp 0.4s ease; }
.pwa-banner.show { display:flex; align-items:center; gap:12px; }
@keyframes fadeUp { from { opacity:0; transform:translateX(-50%) translateY(20px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.pwa-icon { font-size:30px; flex-shrink:0; }
.pwa-text { flex:1; }
.pwa-text strong { display:block; font-size:14px; color:#fff; }
.pwa-text span { font-size:12px; color:rgba(255,255,255,0.75); }
.pwa-actions { display:flex; gap:8px; flex-shrink:0; }

/* ── TICKETS/MESSAGES ── */
.ticket-item { background:var(--glass); backdrop-filter:blur(16px); border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:var(--transition); }
.ticket-item:hover { border-color:var(--orange-primary); background:rgba(5,150,105,0.04); }
.msg-bubble { max-width:80%; padding:10px 14px; border-radius:12px; font-size:13px; line-height:1.55; margin-bottom:8px; }
.msg-bubble.user  { background:var(--orange-primary); color:#fff; margin-left:auto; border-radius:12px 4px 12px 12px; }
.msg-bubble.admin { background:rgba(5,150,105,0.08); color:var(--text-primary); margin-right:auto; border-radius:4px 12px 12px 12px; border:1px solid var(--glass-border); }
.msg-meta { font-size:10px; color:var(--text-dim); margin-top:4px; }
.msg-list { display:flex; flex-direction:column; padding:12px 0; min-height:200px; max-height:380px; overflow-y:auto; }

/* ── SPINNER ── */
.spinner { width:22px; height:22px; border:2.5px solid rgba(5,150,105,0.18); border-top-color:var(--orange-primary); border-radius:50%; animation:spin 0.75s linear infinite; display:inline-block; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── TABLE ── */
.bb-table { width:100%; border-collapse:collapse; font-size:13px; }
.bb-table th { background:rgba(5,150,105,0.05); color:var(--orange-primary); padding:10px 12px; text-align:left; font-weight:700; border-bottom:1px solid var(--border); font-size:11px; letter-spacing:0.5px; text-transform:uppercase; }
.bb-table td { padding:12px; border-bottom:1px solid var(--border); color:var(--text-muted); vertical-align:middle; }
.bb-table tbody tr:hover td { background:rgba(5,150,105,0.025); }

/* ── SUPPORT FAB ── */
.support-fab { position:fixed; bottom:90px; right:16px; z-index:900; width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--orange-primary),var(--orange-deeper)); border:none; color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 24px rgba(5,150,105,0.42); transition:var(--transition); text-decoration:none; }
.support-fab:hover { transform:scale(1.1); box-shadow:0 8px 30px rgba(5,150,105,0.58); color:#fff; }

/* ── NOTIF DOT ── */
.notif-dot { position:absolute; top:-2px; right:-2px; width:8px; height:8px; background:var(--red); border-radius:50%; border:2px solid var(--bg-primary); animation:pulse 1.8s infinite; }
@keyframes pulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.3); opacity:0.7; } }

/* ── AVATAR ── */
.avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--orange-primary),var(--orange-dark)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#fff; flex-shrink:0; text-transform:uppercase; box-shadow:0 3px 10px rgba(5,150,105,0.32); }
.avatar-lg { width:70px; height:70px; font-size:26px; box-shadow:0 6px 20px rgba(5,150,105,0.32); }

/* ── CHANNEL LINKS ── */
.channel-links { display:flex; gap:10px; margin-top:16px; }
.channel-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; border-radius:var(--radius-sm); font-weight:700; font-size:13px; cursor:pointer; transition:var(--transition); border:none; text-decoration:none; }
.channel-btn.whatsapp { background:rgba(37,211,102,0.10); color:#22c55e; border:1px solid rgba(37,211,102,0.18); }
.channel-btn.whatsapp:hover { background:rgba(37,211,102,0.18); }
.channel-btn.telegram { background:rgba(41,182,246,0.10); color:#0284c7; border:1px solid rgba(41,182,246,0.18); }
.channel-btn.telegram:hover { background:rgba(41,182,246,0.18); }

/* ── MISC ── */
.page-header { padding:20px 0 12px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.page-header h2 { font-size:20px; color:var(--text-primary); }
.page-header p { font-size:13px; color:var(--text-muted); margin-top:3px; }
.empty-state { text-align:center; padding:50px 20px; color:var(--text-dim); }
.empty-state i { font-size:48px; display:block; margin-bottom:14px; color:var(--orange-bright); opacity:0.6; }
.empty-state p { font-size:14px; color:var(--text-dim); }
.copy-btn { background:rgba(5,150,105,0.10); border:1px solid var(--glass-border); color:var(--orange-primary); cursor:pointer; padding:6px 12px; border-radius:6px; font-size:13px; font-weight:700; transition:var(--transition); }
.copy-btn:hover { background:rgba(5,150,105,0.20); }
.divider { border:none; border-top:1px solid var(--border); margin:20px 0; }
.highlight-box { background:linear-gradient(135deg,rgba(5,150,105,0.07),rgba(6,95,70,0.03)); border:1px solid rgba(5,150,105,0.16); border-radius:var(--radius-sm); padding:14px 16px; }
.glass-section { background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--glass-border); border-radius:var(--radius); padding:20px; margin-bottom:16px; box-shadow:var(--glass-shadow); }
.gradient-text { background:linear-gradient(90deg,var(--orange-primary),var(--orange-bright),var(--orange-deeper)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── NOTIFICATION PANEL ── */
.notif-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.28); backdrop-filter:blur(3px); z-index:999; opacity:0; pointer-events:none; transition:opacity .25s; }
.notif-overlay.open { opacity:1; pointer-events:all; }
.notif-panel { position:fixed; top:0; right:0; bottom:0; width:min(360px,100vw); background:rgba(14,26,16,0.92); backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); border-left:1px solid var(--glass-border); z-index:1000; display:flex; flex-direction:column; box-shadow:-6px 0 40px rgba(5,150,105,0.10); transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); }
.notif-panel.open { transform:translateX(0); }
.notif-panel-header { display:flex; align-items:center; justify-content:space-between; padding:18px 16px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
.notif-panel-header h3 { font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--text-primary); }
.notif-unread-badge { background:var(--orange-primary); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; }
.notif-close-btn { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:18px; padding:4px 6px; border-radius:6px; transition:color .15s,background .15s; display:flex; align-items:center; }
.notif-close-btn:hover { color:var(--orange-primary); background:var(--orange-glow); }
.notif-actions { padding:8px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.notif-mark-all { background:none; border:none; cursor:pointer; color:var(--orange-primary); font-size:12px; font-weight:600; padding:4px 0; display:flex; align-items:center; gap:5px; transition:opacity .15s; }
.notif-mark-all:hover { opacity:.7; }
.notif-list { flex:1; overflow-y:auto; padding:6px 0; }
.notif-list::-webkit-scrollbar { width:3px; }
.notif-list::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:3px; }
.notif-item { display:flex; align-items:flex-start; gap:11px; padding:12px 16px; cursor:pointer; position:relative; border-bottom:1px solid rgba(5,150,105,0.05); transition:background .15s; }
.notif-item:hover { background:rgba(5,150,105,0.03); }
.notif-item.unread { background:rgba(5,150,105,0.06); }
.notif-item.unread:hover { background:rgba(5,150,105,0.10); }
.notif-item-icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
.notif-item-icon.warn  { background:rgba(5,150,105,0.12); color:var(--orange-primary); }
.notif-item-icon.info  { background:rgba(37,99,235,0.10); color:#60a5fa; }
.notif-item-icon.error { background:rgba(239,68,68,0.10); color:#ef4444; }
.notif-item-icon.ok    { background:rgba(34,197,94,0.10); color:#22c55e; }
.notif-item-body { flex:1; min-width:0; }
.notif-item-title { font-size:12px; font-weight:700; color:var(--text-primary); margin-bottom:2px; }
.notif-item-msg { font-size:12px; color:var(--text-muted); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-item.unread .notif-item-msg { color:var(--text-primary); }
.notif-item-time { font-size:10px; color:var(--text-dim); margin-top:3px; }
.notif-unread-dot { width:7px; height:7px; background:var(--orange-primary); border-radius:50%; position:absolute; top:14px; right:14px; }
.notif-empty { text-align:center; padding:60px 20px; color:var(--text-muted); }
.notif-empty i { font-size:32px; margin-bottom:10px; display:block; opacity:.4; }
.notif-empty p { font-size:13px; }
.notif-loading { text-align:center; padding:40px; color:var(--text-muted); font-size:13px; }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .bottom-nav { display:block; }
  .navbar-nav { display:none; }
  .d-mobile { display:flex; }
  .page-wrapper { padding-bottom:100px; }
  .cat-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .modal-box { max-height:85vh; }
  .wallet-balance { font-size:26px; }
}
@media (min-width:769px) { .pwa-banner { bottom:30px; } }

/* ── HAMBURGER — always pinned to far right corner of navbar ── */
.hamburger-btn {
  margin-left: auto !important; /* push to far right when nav is hidden */
  flex-shrink: 0;
}
/* On desktop where navbar-nav is visible, hamburger stays after it */
@media (min-width: 769px) {
  .navbar-nav + .hamburger-btn,
  .navbar-nav ~ .hamburger-btn {
    margin-left: 8px !important;
  }
}