/* ═══════════════════════════════════════════════════════════════
   OmniaCoin™ Dashboard · Elite Design System
   S4.2-S4.5 + Wishlist + QN Searches
   Target: Top 1% Fintech Dashboard (Binance/Revolut/Bloomberg)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. CSS Variables ─────────────────────────────────────────── */
:root {
  --d-bg: #060a10;
  --d-bg2: #0b1018;
  --d-card: rgba(12,18,28,0.85);
  --d-card-hover: rgba(16,24,38,0.92);
  --d-glass: rgba(255,255,255,0.025);
  --d-border: rgba(255,255,255,0.06);
  --d-border-hover: rgba(0,255,136,0.18);
  --d-green: #00ff88;
  --d-green-dim: rgba(0,255,136,0.10);
  --d-green-mid: rgba(0,255,136,0.20);
  --d-red: #ff4757;
  --d-red-dim: rgba(255,71,87,0.10);
  --d-blue: #4da6ff;
  --d-blue-dim: rgba(77,166,255,0.10);
  --d-purple: #a855f7;
  --d-purple-dim: rgba(168,85,247,0.10);
  --d-orange: #f59e0b;
  --d-orange-dim: rgba(245,158,11,0.10);
  --d-cyan: #06d6d4;
  --d-cyan-dim: rgba(6,214,212,0.10);
  --d-text: #e8edf2;
  --d-muted: #8b95a5;
  --d-dim: #4a5568;
  --d-sidebar-w: 260px;
  --d-topbar-h: 64px;
  --d-radius: 14px;
  --d-radius-sm: 10px;
  --d-radius-xs: 6px;
  --d-transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  --d-font-display: 'Rajdhani',sans-serif;
  --d-font-body: 'Outfit',sans-serif;
  --d-font-mono: 'JetBrains Mono',monospace;
}

/* ── 2. Base Reset ────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--d-bg);
  color:var(--d-text);
  font-family:var(--d-font-body);
  min-height:100vh;
  overflow-x:hidden;
  font-size:14px;
  line-height:1.6;
}
a{color:var(--d-green);text-decoration:none;transition:var(--d-transition)}
a:hover{opacity:0.85}
button{font-family:var(--d-font-body);cursor:pointer}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.14)}

/* ── 3. Layout: Sidebar + Main ────────────────────────────────── */
.d-layout{
  display:flex;
  min-height:100vh;
  padding-top:var(--d-topbar-h);
}

/* ── 3a. Sidebar ──────────────────────────────────────────────── */
.d-sidebar{
  position:fixed;
  left:0;top:var(--d-topbar-h);
  width:var(--d-sidebar-w);
  height:calc(100vh - var(--d-topbar-h));
  background:var(--d-bg2);
  border-right:1px solid var(--d-border);
  overflow-y:auto;
  z-index:100;
  display:flex;
  flex-direction:column;
  padding:20px 0;
  transition:transform 0.3s ease;
}
.d-sidebar-section{
  padding:0 16px;
  margin-bottom:20px;
}
.d-sidebar-label{
  font-family:var(--d-font-mono);
  font-size:10px;
  color:var(--d-dim);
  text-transform:uppercase;
  letter-spacing:1.5px;
  padding:0 12px;
  margin-bottom:8px;
}
.d-sidebar-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  border-radius:var(--d-radius-sm);
  color:var(--d-muted);
  font-size:13px;font-weight:500;
  cursor:pointer;
  transition:var(--d-transition);
  border:1px solid transparent;
  position:relative;
}
.d-sidebar-item:hover{
  background:rgba(255,255,255,0.03);
  color:var(--d-text);
}
.d-sidebar-item.active{
  background:var(--d-green-dim);
  color:var(--d-green);
  border-color:var(--d-green-mid);
}
.d-sidebar-item .icon{font-size:18px;width:24px;text-align:center;flex-shrink:0}
.d-sidebar-item .badge{
  margin-left:auto;
  background:var(--d-red);
  color:#fff;
  font-size:10px;font-weight:700;
  padding:1px 6px;
  border-radius:10px;
  min-width:18px;text-align:center;
}
.d-sidebar-item .badge-new{
  margin-left:auto;
  background:var(--d-blue-dim);
  color:var(--d-blue);
  font-size:9px;font-weight:700;
  padding:2px 6px;
  border-radius:4px;
  letter-spacing:0.5px;
}
.d-sidebar-divider{
  height:1px;
  background:var(--d-border);
  margin:12px 16px;
}

/* User card in sidebar */
.d-sidebar-user{
  padding:16px;
  margin:0 12px 16px;
  background:var(--d-glass);
  border:1px solid var(--d-border);
  border-radius:var(--d-radius);
  display:flex;align-items:center;gap:12px;
}
.d-sidebar-avatar{
  width:40px;height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--d-green),#00cc6a);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;color:var(--d-bg);
  flex-shrink:0;
  overflow:hidden;
}
.d-sidebar-avatar img{width:100%;height:100%;object-fit:cover}
.d-sidebar-user-info{overflow:hidden}
.d-sidebar-user-info .name{
  font-size:13px;font-weight:600;
  color:var(--d-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.d-sidebar-user-info .level{
  font-size:11px;color:var(--d-muted);
  display:flex;align-items:center;gap:4px;
}

/* ── 3b. Main Content ─────────────────────────────────────────── */
.d-main{
  margin-left:var(--d-sidebar-w);
  flex:1;
  padding:24px 28px 80px;
  min-height:calc(100vh - var(--d-topbar-h));
}

/* ── 4. Quick Stats Bar ───────────────────────────────────────── */
.d-quickstats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-bottom:28px;
}
.d-qstat{
  background:var(--d-card);
  border:1px solid var(--d-border);
  border-radius:var(--d-radius);
  padding:18px 20px;
  position:relative;
  overflow:hidden;
  transition:var(--d-transition);
}
.d-qstat:hover{border-color:var(--d-border-hover)}
.d-qstat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--d-green),transparent);
  opacity:0;transition:opacity 0.3s;
}
.d-qstat:hover::before{opacity:1}
.d-qstat-label{
  font-size:11px;color:var(--d-muted);
  text-transform:uppercase;letter-spacing:0.5px;
  margin-bottom:6px;
  display:flex;align-items:center;gap:6px;
}
.d-qstat-value{
  font-family:var(--d-font-display);
  font-size:26px;font-weight:700;
  line-height:1.1;
}
.d-qstat-value.green{color:var(--d-green)}
.d-qstat-value.blue{color:var(--d-blue)}
.d-qstat-value.purple{color:var(--d-purple)}
.d-qstat-value.orange{color:var(--d-orange)}
.d-qstat-sub{
  font-size:11px;color:var(--d-muted);
  margin-top:4px;
}

/* ── 5. Section Container ─────────────────────────────────────── */
.d-section{display:none}
.d-section.active{display:block;animation:dFadeIn 0.3s ease}
@keyframes dFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.d-section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
  flex-wrap:wrap;gap:12px;
}
.d-section-title{
  font-family:var(--d-font-display);
  font-size:22px;font-weight:700;
  display:flex;align-items:center;gap:10px;
}
.d-section-actions{
  display:flex;gap:8px;
}

/* ── 6. Card System ───────────────────────────────────────────── */
.d-card{
  background:var(--d-card);
  border:1px solid var(--d-border);
  border-radius:var(--d-radius);
  padding:24px;
  margin-bottom:16px;
  transition:var(--d-transition);
}
.d-card:hover{border-color:var(--d-border-hover)}
.d-card-title{
  font-size:15px;font-weight:600;
  margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.d-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}

/* ── 7. Buttons ───────────────────────────────────────────────── */
.d-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;
  border-radius:var(--d-radius-xs);
  font-size:13px;font-weight:600;
  border:none;
  transition:var(--d-transition);
}
.d-btn-primary{
  background:linear-gradient(135deg,var(--d-green),#00cc6a);
  color:var(--d-bg);
}
.d-btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,255,136,0.25)}
.d-btn-secondary{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--d-border);
  color:var(--d-text);
}
.d-btn-secondary:hover{border-color:var(--d-green);color:var(--d-green)}
.d-btn-sm{padding:6px 12px;font-size:12px}
.d-btn-icon{
  width:34px;height:34px;
  padding:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--d-border);
  border-radius:var(--d-radius-xs);
  color:var(--d-muted);
  transition:var(--d-transition);
}
.d-btn-icon:hover{border-color:var(--d-green);color:var(--d-green)}

/* ── 8. Wallet Section (S4.2) ─────────────────────────────────── */
.d-wallet-chart{
  height:220px;
  background:var(--d-glass);
  border:1px solid var(--d-border);
  border-radius:var(--d-radius);
  overflow:hidden;
  margin-bottom:20px;
  position:relative;
}
.d-wallet-chart canvas{width:100%!important;height:200px!important;display:block}
.d-wallet-chart .empty{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  color:var(--d-dim);font-size:13px;gap:8px;
}

.d-wallet-breakdown{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:20px;
  align-items:center;
}
.d-wallet-donut{
  width:160px;height:160px;
  position:relative;
}
.d-wallet-donut canvas{width:100%!important;height:100%!important}
.d-wallet-donut-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;
}
.d-wallet-donut-center .total{
  font-family:var(--d-font-display);
  font-size:22px;font-weight:700;color:var(--d-green);
}
.d-wallet-donut-center .label{font-size:10px;color:var(--d-muted)}
.d-wallet-legend{display:flex;flex-direction:column;gap:10px}
.d-wallet-legend-item{
  display:flex;align-items:center;gap:10px;
  font-size:13px;
}
.d-wallet-legend-dot{
  width:10px;height:10px;border-radius:3px;flex-shrink:0;
}
.d-wallet-legend-label{color:var(--d-muted);flex:1}
.d-wallet-legend-value{font-weight:600;font-family:var(--d-font-mono);font-size:12px}

/* Transaction Table */
.d-tx-filters{
  display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;
}
.d-tx-filter{
  padding:5px 14px;
  border-radius:20px;
  font-size:12px;font-weight:500;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--d-border);
  color:var(--d-muted);
  cursor:pointer;
  transition:var(--d-transition);
}
.d-tx-filter:hover,.d-tx-filter.active{
  border-color:var(--d-green);color:var(--d-green);
  background:var(--d-green-dim);
}
.d-tx-table{width:100%;border-collapse:collapse}
.d-tx-table th{
  text-align:left;font-size:10px;text-transform:uppercase;
  letter-spacing:0.8px;color:var(--d-dim);
  padding:10px 12px;
  border-bottom:1px solid var(--d-border);
  font-family:var(--d-font-mono);
}
.d-tx-table td{
  padding:12px;font-size:13px;
  border-bottom:1px solid rgba(255,255,255,0.03);
  transition:background 0.15s;
}
.d-tx-table tr:hover td{background:rgba(255,255,255,0.015)}
.d-tx-table .tx-icon{
  width:32px;height:32px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  flex-shrink:0;
}
.d-tx-table .tx-icon.credit{background:var(--d-green-dim)}
.d-tx-table .tx-icon.debit{background:var(--d-red-dim)}
.d-tx-table .tx-icon.reward{background:var(--d-orange-dim)}
.d-tx-table .tx-amount{font-weight:600;font-family:var(--d-font-mono);font-size:13px}
.d-tx-table .tx-amount.positive{color:var(--d-green)}
.d-tx-table .tx-amount.negative{color:var(--d-red)}
.d-tx-table .tx-date{color:var(--d-muted);font-size:12px}
.d-tx-table .tx-desc{color:var(--d-muted);font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 9. Referral Section (S4.3) ───────────────────────────────── */
.d-ref-code-box{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  background:var(--d-glass);
  border:1px solid var(--d-border);
  border-radius:var(--d-radius);
  margin-bottom:20px;
}
.d-ref-code{
  font-family:var(--d-font-mono);
  font-size:18px;font-weight:700;
  color:var(--d-green);
  letter-spacing:2px;
  flex:1;
}
.d-ref-link{
  font-size:12px;color:var(--d-muted);
  word-break:break-all;
}
.d-ref-share-btns{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-bottom:20px;
}
.d-ref-share-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;
  border-radius:var(--d-radius-xs);
  font-size:12px;font-weight:600;
  border:1px solid var(--d-border);
  background:rgba(255,255,255,0.02);
  color:var(--d-text);
  cursor:pointer;
  transition:var(--d-transition);
}
.d-ref-share-btn:hover{background:rgba(255,255,255,0.06);transform:translateY(-1px)}
.d-ref-share-btn.whatsapp:hover{border-color:#25D366;color:#25D366}
.d-ref-share-btn.telegram:hover{border-color:#0088cc;color:#0088cc}
.d-ref-share-btn.x:hover{border-color:#e8edf2;color:#e8edf2}
.d-ref-share-btn.copy:hover{border-color:var(--d-green);color:var(--d-green)}

.d-ref-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  margin-bottom:20px;
}
.d-ref-stat{
  background:var(--d-glass);
  border:1px solid var(--d-border);
  border-radius:var(--d-radius-sm);
  padding:16px;
  text-align:center;
}
.d-ref-stat-value{
  font-family:var(--d-font-display);
  font-size:24px;font-weight:700;
}
.d-ref-stat-label{font-size:11px;color:var(--d-muted);margin-top:2px}

/* Tier System */
.d-ref-tiers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
}
.d-ref-tier{
  padding:16px;
  border-radius:var(--d-radius-sm);
  border:1px solid var(--d-border);
  background:var(--d-glass);
  text-align:center;
  opacity:0.5;
  transition:var(--d-transition);
}
.d-ref-tier.active{opacity:1;border-color:var(--d-green-mid);background:var(--d-green-dim)}
.d-ref-tier.next{opacity:0.75;border-style:dashed}
.d-ref-tier-icon{font-size:28px;margin-bottom:6px}
.d-ref-tier-name{font-weight:600;font-size:14px;margin-bottom:2px}
.d-ref-tier-req{font-size:11px;color:var(--d-muted)}
.d-ref-tier-reward{font-size:12px;color:var(--d-green);font-weight:600;margin-top:4px}

/* ── 10. Rewards Section (S4.4) ───────────────────────────────── */
.d-rewards-checkin{
  text-align:center;
  padding:28px;
  background:linear-gradient(135deg,var(--d-green-dim),rgba(0,204,106,0.04));
  border:1px solid var(--d-green-mid);
  border-radius:var(--d-radius);
  margin-bottom:24px;
}
.d-rewards-checkin h3{font-size:18px;margin-bottom:6px}
.d-rewards-checkin p{font-size:13px;color:var(--d-muted);margin-bottom:16px}
.d-rewards-checkin .d-btn-primary{font-size:16px;padding:14px 40px;border-radius:var(--d-radius-sm)}
.d-rewards-checkin.done{
  background:var(--d-glass);
  border-color:var(--d-border);
}
.d-rewards-checkin.done h3{color:var(--d-green)}

/* Streak Calendar */
.d-streak-calendar{
  display:flex;gap:6px;justify-content:center;
  margin-bottom:24px;flex-wrap:wrap;
}
.d-streak-day{
  width:48px;height:56px;
  border-radius:var(--d-radius-xs);
  border:1px solid var(--d-border);
  background:var(--d-glass);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  font-size:10px;color:var(--d-muted);
  gap:2px;
  transition:var(--d-transition);
}
.d-streak-day .day-icon{font-size:16px}
.d-streak-day .day-label{font-size:9px;font-weight:600;text-transform:uppercase}
.d-streak-day.completed{
  background:var(--d-green-dim);
  border-color:var(--d-green-mid);
  color:var(--d-green);
}
.d-streak-day.today{
  border-color:var(--d-orange);
  box-shadow:0 0 12px rgba(245,158,11,0.15);
}

/* Badge System */
.d-badges-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
}
.d-badge-card{
  padding:16px;
  border-radius:var(--d-radius-sm);
  border:1px solid var(--d-border);
  background:var(--d-glass);
  text-align:center;
  transition:var(--d-transition);
}
.d-badge-card:hover{border-color:var(--d-border-hover);transform:translateY(-2px)}
.d-badge-card.locked{opacity:0.35;filter:grayscale(1)}
.d-badge-card .badge-icon{font-size:32px;margin-bottom:8px}
.d-badge-card .badge-name{font-size:12px;font-weight:600;margin-bottom:2px}
.d-badge-card .badge-desc{font-size:10px;color:var(--d-muted)}
.d-badge-card .badge-date{font-size:9px;color:var(--d-dim);margin-top:4px;font-family:var(--d-font-mono)}

/* ── 11. Services Section (S4.5) ──────────────────────────────── */
.d-services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.d-service-card{
  padding:20px;
  border-radius:var(--d-radius);
  border:1px solid var(--d-border);
  background:var(--d-card);
  position:relative;
  overflow:hidden;
  transition:var(--d-transition);
}
.d-service-card:hover{border-color:var(--d-border-hover)}
.d-service-card.locked{
  opacity:0.6;
}
.d-service-card.locked::after{
  content:'';position:absolute;inset:0;
  background:rgba(6,10,16,0.5);
  backdrop-filter:blur(2px);
  z-index:1;
}
.d-service-card .lock-overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  color:var(--d-muted);
  gap:6px;
}
.d-service-card .lock-overlay .lock-icon{font-size:28px}
.d-service-card .lock-overlay .lock-price{
  font-size:13px;font-weight:600;color:var(--d-orange);
}
.d-service-card .lock-overlay .lock-btn{
  margin-top:4px;
  padding:6px 18px;
  background:var(--d-green);color:var(--d-bg);
  border:none;border-radius:var(--d-radius-xs);
  font-weight:600;font-size:12px;cursor:pointer;
}
.d-service-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.d-service-icon{
  width:42px;height:42px;
  border-radius:var(--d-radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  flex-shrink:0;
}
.d-service-info{flex:1}
.d-service-name{font-size:14px;font-weight:600}
.d-service-uses{font-size:11px;color:var(--d-muted)}
.d-service-stats{
  display:flex;gap:16px;
  font-size:12px;color:var(--d-muted);
  margin-bottom:12px;
}
.d-service-stats span{display:flex;align-items:center;gap:4px}

/* ── 12. Wishlist Section ─────────────────────────────────────── */
.d-wishlist-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}
.d-wishlist-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  border-radius:var(--d-radius-sm);
  border:1px solid var(--d-border);
  background:var(--d-card);
  transition:var(--d-transition);
  cursor:pointer;
}
.d-wishlist-item:hover{border-color:var(--d-border-hover);background:var(--d-card-hover)}
.d-wishlist-item .wl-icon{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;
  background:var(--d-glass);
  border:1px solid var(--d-border);
  flex-shrink:0;overflow:hidden;
}
.d-wishlist-item .wl-icon img{width:100%;height:100%;object-fit:cover}
.d-wishlist-item .wl-info{flex:1;overflow:hidden}
.d-wishlist-item .wl-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-wishlist-item .wl-symbol{font-size:11px;color:var(--d-muted);font-family:var(--d-font-mono)}
.d-wishlist-item .wl-price{text-align:right}
.d-wishlist-item .wl-price-val{font-size:13px;font-weight:600;font-family:var(--d-font-mono)}
.d-wishlist-item .wl-change{font-size:11px;font-weight:600}
.d-wishlist-item .wl-change.up{color:var(--d-green)}
.d-wishlist-item .wl-change.down{color:var(--d-red)}
.d-wishlist-item .wl-remove{
  color:var(--d-dim);font-size:16px;cursor:pointer;padding:4px;
  transition:var(--d-transition);
}
.d-wishlist-item .wl-remove:hover{color:var(--d-red)}

/* ── 13. QN Searches Section ──────────────────────────────────── */
.d-qn-list{display:flex;flex-direction:column;gap:10px}
.d-qn-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  border-radius:var(--d-radius-sm);
  border:1px solid var(--d-border);
  background:var(--d-card);
  transition:var(--d-transition);
}
.d-qn-item:hover{border-color:var(--d-border-hover)}
.d-qn-item .qn-score{
  width:48px;height:48px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--d-font-display);
  font-size:18px;font-weight:700;
  flex-shrink:0;
}
.d-qn-item .qn-score.bullish{background:var(--d-green-dim);color:var(--d-green);border:2px solid var(--d-green-mid)}
.d-qn-item .qn-score.bearish{background:var(--d-red-dim);color:var(--d-red);border:2px solid rgba(255,71,87,0.2)}
.d-qn-item .qn-score.neutral{background:var(--d-orange-dim);color:var(--d-orange);border:2px solid rgba(245,158,11,0.2)}
.d-qn-item .qn-info{flex:1}
.d-qn-item .qn-asset{font-size:14px;font-weight:600}
.d-qn-item .qn-meta{font-size:11px;color:var(--d-muted);display:flex;gap:12px}
.d-qn-item .qn-actions{display:flex;gap:6px}
.d-qn-item:hover .qn-asset{color:var(--d-accent, #00dca0)}

/* ── 13b. QN Detail Modal ─────────────────────────────────────── */
.qn-detail-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.78);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.qn-detail-overlay.open{opacity:1;pointer-events:all}
.qn-detail-modal{
  background:var(--d-card-bg, #0c1116);
  border:1px solid var(--d-border, rgba(255,255,255,0.06));
  border-radius:16px;width:100%;max-width:720px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.85);
  transform:translateY(12px) scale(.97);transition:transform .25s;
}
.qn-detail-overlay.open .qn-detail-modal{transform:none}
.qn-detail-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;border-bottom:1px solid var(--d-border, rgba(255,255,255,0.06));flex-shrink:0;
}
.qn-detail-modal-title{font-size:15px;font-weight:900;letter-spacing:.3px;display:flex;align-items:center;gap:10px}
.qn-detail-close{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--d-border);
  background:transparent;color:var(--d-muted);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.qn-detail-close:hover{border-color:#ff4757;color:#ff4757}
.qn-detail-modal-body{flex:1;overflow-y:auto;padding:24px}
.qn-detail-modal-body::-webkit-scrollbar{width:5px}
.qn-detail-modal-body::-webkit-scrollbar-track{background:transparent}
.qn-detail-modal-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}

/* Detail header */
.qn-detail-header{text-align:center;margin-bottom:20px}
.qn-detail-asset{font-size:28px;font-weight:900;letter-spacing:1px;margin-bottom:10px}
.qn-detail-pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.qn-pill{
  padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  white-space:nowrap;
}
.qn-pill.pill-cloud{background:rgba(0,220,160,.1);color:#00dca0;border-color:rgba(0,220,160,.25)}
.qn-pill.pill-local{background:rgba(245,158,11,.1);color:#f59e0b;border-color:rgba(245,158,11,.25)}

/* Score ring */
.qn-detail-score-wrap{padding:20px 0;text-align:center}

/* Indicator bars */
.qn-detail-block{margin-top:20px;padding:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:12px}
.qn-detail-block-title{font-size:13px;font-weight:800;margin-bottom:12px;letter-spacing:.3px}
.qn-ind-grid{display:flex;flex-direction:column;gap:8px}
.qn-ind-row{display:flex;align-items:center;gap:8px}
.qn-ind-label{width:70px;font-size:11px;font-weight:700;color:var(--d-muted);flex-shrink:0}
.qn-ind-bar{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.qn-ind-fill{height:100%;border-radius:3px;transition:width .4s ease}
.qn-ind-val{width:45px;text-align:right;font-size:11px;font-weight:700;flex-shrink:0}
.qn-ind-zone{font-size:9px;color:var(--d-muted);width:90px;text-align:right;flex-shrink:0}

/* Patterns */
.qn-patterns-grid{display:flex;flex-wrap:wrap;gap:6px}
.qn-pattern-tag{
  padding:4px 10px;border-radius:8px;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.qn-pattern-tag.bull{background:rgba(0,220,160,.08);border-color:rgba(0,220,160,.2);color:#00dca0}
.qn-pattern-tag.bear{background:rgba(255,71,87,.08);border-color:rgba(255,71,87,.2);color:#ff4757}

/* Backtest grid */
.qn-bt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px}
.qn-bt-stat{text-align:center;padding:12px;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid rgba(255,255,255,.05)}
.qn-bt-val{font-size:18px;font-weight:900;line-height:1.2}
.qn-bt-label{font-size:10px;color:var(--d-muted);font-weight:600;margin-top:4px;text-transform:uppercase;letter-spacing:.5px}

/* Action buttons */
.qn-detail-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.qn-act-btn{
  flex:1;min-width:180px;padding:12px 20px;border-radius:12px;font-size:13px;font-weight:800;
  cursor:pointer;transition:all .2s;text-align:center;border:none;
}
.qn-act-primary{
  background:linear-gradient(135deg,rgba(168,85,247,.2),rgba(77,166,255,.1));
  border:1px solid rgba(168,85,247,.35);color:#e0e0e0;
}
.qn-act-primary:hover{border-color:rgba(168,85,247,.6);transform:translateY(-1px);box-shadow:0 8px 24px rgba(168,85,247,.15)}
.qn-act-secondary{
  background:rgba(0,220,160,.06);border:1px solid rgba(0,220,160,.2);color:#e0e0e0;
}
.qn-act-secondary:hover{border-color:rgba(0,220,160,.5);transform:translateY(-1px)}

@media(max-width:600px){
  .qn-detail-modal{max-width:100%;max-height:95vh;border-radius:12px}
  .qn-detail-modal-body{padding:16px}
  .qn-detail-asset{font-size:22px}
  .qn-ind-zone{display:none}
  .qn-bt-grid{grid-template-columns:repeat(2,1fr)}
  .qn-detail-actions{flex-direction:column}
  .qn-act-btn{min-width:auto}
}

/* ── 14. Settings Section ─────────────────────────────────────── */
.d-settings-group{
  margin-bottom:24px;
}
.d-settings-group-title{
  font-size:13px;font-weight:600;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--d-border);
}
.d-settings-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.d-settings-row:last-child{border-bottom:none}
.d-settings-row .label{font-size:13px}
.d-settings-row .desc{font-size:11px;color:var(--d-muted)}
.d-toggle{
  position:relative;width:44px;height:24px;
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  cursor:pointer;transition:background 0.2s;
}
.d-toggle.active{background:var(--d-green)}
.d-toggle::after{
  content:'';position:absolute;
  top:2px;left:2px;
  width:20px;height:20px;
  border-radius:50%;
  background:white;
  transition:transform 0.2s;
}
.d-toggle.active::after{transform:translateX(20px)}

/* ── 15. Empty States ─────────────────────────────────────────── */
.d-empty{
  text-align:center;padding:48px 24px;
  color:var(--d-dim);
}
.d-empty .empty-icon{font-size:40px;margin-bottom:12px;opacity:0.5}
.d-empty .empty-text{font-size:14px;margin-bottom:6px;color:var(--d-muted)}
.d-empty .empty-sub{font-size:12px}

/* ── 16. Toast Notifications ──────────────────────────────────── */
.d-toast{
  position:fixed;bottom:24px;right:24px;
  padding:14px 20px;
  background:var(--d-bg2);
  border:1px solid var(--d-border);
  border-radius:var(--d-radius-sm);
  font-size:13px;
  display:flex;align-items:center;gap:10px;
  z-index:10000;
  transform:translateY(120%);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.d-toast.show{transform:translateY(0)}
.d-toast.success{border-left:3px solid var(--d-green)}
.d-toast.error{border-left:3px solid var(--d-red)}
.d-toast.info{border-left:3px solid var(--d-blue)}

/* ── 17. Loading / Skeleton ───────────────────────────────────── */
.d-loading{
  text-align:center;padding:80px 20px;
}
.d-loading .spinner{
  width:40px;height:40px;
  border:3px solid var(--d-border);
  border-top-color:var(--d-green);
  border-radius:50%;
  animation:dspin 0.7s linear infinite;
  margin:0 auto 16px;
}
@keyframes dspin{to{transform:rotate(360deg)}}

.d-skeleton{
  background:linear-gradient(90deg,rgba(255,255,255,0.03) 25%,rgba(255,255,255,0.06) 50%,rgba(255,255,255,0.03) 75%);
  background-size:200% 100%;
  animation:dShimmer 1.5s infinite;
  border-radius:var(--d-radius-xs);
}
@keyframes dShimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ── 18. Login Prompt ─────────────────────────────────────────── */
.d-login-prompt{
  text-align:center;padding:60px 20px;
  display:none;
}
.d-login-prompt h1{
  font-family:var(--d-font-display);
  font-size:32px;font-weight:700;margin-bottom:8px;
}
.d-login-prompt h1 span{color:var(--d-green)}
.d-login-prompt p{
  color:var(--d-muted);font-size:14px;
  margin-bottom:32px;max-width:480px;
  margin-left:auto;margin-right:auto;line-height:1.6;
}
.d-login-actions{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}
.d-login-or{color:var(--d-dim);font-size:12px;margin:16px 0 8px}

/* ── 19. CTA Purchase Banner ──────────────────────────────────── */
.d-cta-banner{
  background:linear-gradient(135deg,rgba(0,255,136,0.04),rgba(0,204,106,0.02));
  border:1px solid rgba(0,255,136,0.12);
  border-radius:var(--d-radius);
  padding:24px;
  text-align:center;
  margin-bottom:24px;
}
.d-cta-banner h3{font-size:17px;font-weight:600;margin-bottom:4px}
.d-cta-banner p{color:var(--d-muted);font-size:13px;margin-bottom:14px}

/* ── 20. Mobile Responsive ────────────────────────────────────── */
.d-mobile-toggle{
  display:none;
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  z-index:200;
  padding:10px 20px;
  background:var(--d-bg2);
  border:1px solid var(--d-border);
  border-radius:24px;
  color:var(--d-text);
  font-size:13px;font-weight:500;
  box-shadow:0 4px 24px rgba(0,0,0,0.5);
}
.d-mobile-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,0.5);
  z-index:99;
}

@media(max-width:900px){
  .d-sidebar{transform:translateX(-100%);width:280px}
  .d-sidebar.open{transform:translateX(0)}
  .d-main{margin-left:0;padding:16px 14px 100px}
  .d-mobile-toggle{display:flex;align-items:center;gap:6px}
  .d-mobile-overlay.show{display:block}
  .d-quickstats{grid-template-columns:repeat(2,1fr);gap:10px}
  .d-qstat{padding:14px}
  .d-qstat-value{font-size:20px}
  .d-wallet-breakdown{grid-template-columns:1fr;text-align:center}
  .d-wallet-donut{margin:0 auto}
  .d-ref-stats{grid-template-columns:repeat(2,1fr)}
  .d-streak-calendar{gap:4px}
  .d-streak-day{width:40px;height:48px}
  .d-badges-grid{grid-template-columns:repeat(2,1fr)}
  .d-services-grid{grid-template-columns:1fr}
  .d-wishlist-grid{grid-template-columns:1fr}
  .d-tx-table{font-size:12px}
  .d-tx-table th:nth-child(4),.d-tx-table td:nth-child(4){display:none}
  .d-section-title{font-size:18px}
}

@media(max-width:480px){
  .d-quickstats{grid-template-columns:1fr 1fr}
  .d-qstat-value{font-size:18px}
  .d-ref-share-btns{gap:6px}
  .d-ref-share-btn{padding:6px 10px;font-size:11px}
}
.d-admin-link{background:rgba(168,85,247,0.06)!important;border:1px solid rgba(168,85,247,0.12)!important;color:var(--d-purple)!important;position:relative;overflow:hidden}
.d-admin-link:hover{background:rgba(168,85,247,0.12)!important;border-color:rgba(168,85,247,0.25)!important;color:#c084fc!important;transform:translateX(2px)}
.d-admin-link::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#a855f7,#7c3aed);border-radius:0 2px 2px 0}
.d-admin-link::after{content:'';position:absolute;top:-50%;right:-50%;width:100%;height:200%;background:radial-gradient(circle,rgba(168,85,247,0.08) 0%,transparent 70%);opacity:0;transition:opacity 0.3s}
.d-admin-link:hover::after{opacity:1}
.d-admin-badge{margin-left:auto;background:rgba(168,85,247,0.15);color:#a855f7;font-family:var(--d-font-mono);font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:0.5px;text-transform:uppercase}
.d-admin-qstat{border-color:rgba(168,85,247,0.15)!important;position:relative}
.d-admin-qstat:hover{border-color:rgba(168,85,247,0.30)!important;background:rgba(168,85,247,0.06)!important}
.d-admin-qstat::before{background:linear-gradient(90deg,transparent,#a855f7,transparent)!important}
.d-admin-qstat:hover::before{opacity:1!important}


/* ════════════════════════════════════════════════════════════
   DASHBOARD v2.1 — MOBILE APP ELITE
   Safe-area · Touch targets · Micro-animations · Elite UX
════════════════════════════════════════════════════════════ */

/* ── Safe area + iOS notch support ── */
:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);
}

/* ── Sidebar: min touch target + active state polish ── */
.d-sidebar-item {
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  position: relative;
}
.d-sidebar-item.active {
  background: rgba(0,220,160,.09);
  color: #00dca0;
  border-left: 2px solid #00dca0;
}
.d-sidebar-item:active {
  transform: scale(0.98);
  background: rgba(255,255,255,.06);
}

/* ── Sidebar icon alignment ── */
.d-sidebar-item .icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Smooth scroll on main content ── */
.d-main {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── Quick stats: glass polish ── */
.d-qstat {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .18s ease, box-shadow .18s ease;
}
.d-qstat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* ── Cards: hover lift on desktop only ── */
@media (hover: hover) {
  .d-card:hover {
    border-color: rgba(255,255,255,.12);
    transform: translateY(-1px);
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
  }
  .d-service-card:not(.locked):hover {
    border-color: rgba(0,220,160,.2);
    transform: translateY(-2px);
  }
}

/* ── Buttons: min touch target ── */
.d-btn {
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.d-btn:active {
  transform: scale(0.97);
}

/* ── Section title spacing ── */
.d-section-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(6,10,16,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-radius: 0 0 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* ── Mobile: 900px breakpoint ── */
@media (max-width: 900px) {
  .d-main {
    padding: 0 12px calc(72px + var(--safe-bottom)) !important;
    padding-top: 12px !important;
  }
  .d-section-header {
    top: 0;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 0;
  }
  .d-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .d-qstat {
    padding: 12px 10px;
  }
  .d-qstat-value {
    font-size: 20px;
  }
  .d-sidebar {
    padding-bottom: calc(20px + var(--safe-bottom));
  }
  /* Mobile toggle pill — better position */
  .d-mobile-toggle {
    bottom: calc(16px + var(--safe-bottom));
    padding: 10px 20px;
  }
}

/* ── Small mobile: 480px ── */
@media (max-width: 480px) {
  .d-quickstats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .d-qstat-value {
    font-size: 18px;
  }
  .d-qstat-label {
    font-size: 10px;
  }
  .d-section-title {
    font-size: 18px;
  }
  .d-card {
    padding: 14px 12px;
    border-radius: 12px;
  }
  .d-card-title {
    font-size: 13px;
  }
}

/* ── Ultra small: 375px ── */
@media (max-width: 375px) {
  .d-quickstats {
    gap: 6px;
  }
  .d-qstat {
    padding: 10px 8px;
  }
  .d-qstat-value {
    font-size: 16px;
  }
  .d-section-title {
    font-size: 16px;
  }
  .d-main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ── CTA Banner mobile ── */
@media (max-width: 600px) {
  .d-cta-banner {
    padding: 16px 14px;
    border-radius: 12px;
  }
  .d-cta-banner h3 {
    font-size: 16px;
  }
  .d-cta-banner p {
    font-size: 12px;
  }
}

/* ── Service cards: 2-col on tablet ── */
@media (min-width: 481px) and (max-width: 900px) {
  #servicesGrid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Referral section mobile ── */
@media (max-width: 600px) {
  .d-ref-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .d-ref-code-box {
    flex-direction: column;
    gap: 8px;
  }
  .d-ref-code-box .d-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Sidebar swipe indicator on mobile ── */
@media (max-width: 900px) {
  .d-sidebar::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -4px;
    width: 4px;
    height: 40px;
    background: rgba(0,220,160,.35);
    border-radius: 0 4px 4px 0;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity .2s;
  }
  .d-sidebar.open::after { opacity: 1; }
}

/* ── Transactions table mobile ── */
@media (max-width: 600px) {
  .d-tx-table thead { display: none; }
  .d-tx-table tr {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .d-tx-table td {
    padding: 2px 4px;
    font-size: 12px;
  }
}

/* ── Academy section mobile ── */
@media (max-width: 600px) {
  .d-academy-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Skeleton pulse ── */
.d-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: dashSkeleton 1.4s ease infinite;
  border-radius: 6px;
}
@keyframes dashSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Body padding for bottom nav ── */
@media (max-width: 768px) {
  body { padding-bottom: calc(58px + var(--safe-bottom)) !important; }
}