@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #07080f;
  --bg2: #0f111a;
  --bg3: #161824;
  --border: rgba(255, 255, 255, 0.08);
  --text: #e2e8f0;
  --text-strong: #ffffff;
  --text-soft: #94a3b8;
  --sub: #cbd5e1;
  --muted: #64748b;
  --col: #f59e0b;
  --col-accent: #7c3aed;
  --shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}

body.light, html.light {
  --bg: #f8fafc;
  --bg2: #ffffff;
  --bg3: #f1f5f9;
  --border: rgba(15, 23, 42, 0.12);
  --text: #1e293b;
  --text-strong: #0f172a;
  --text-soft: #334155;
  --sub: #334155;
  --muted: #64748b;
  --col: #d97706;
  --col-accent: #6d28d9;
  --shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
}
body.light .topbar, html.light .topbar { background: #ffffff; border-bottom-color: rgba(15, 23, 42, 0.1); }
body.light .sidebar, html.light .sidebar { background: #ffffff; border-right-color: rgba(15, 23, 42, 0.1); }
body.light .panel, html.light .panel, body.light .vocab-daily-card, body.light .section-card, body.light .continue-card, body.light .stat-grid article {
  background: #ffffff !important; border-color: rgba(15, 23, 42, 0.12) !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
body.light .task-list, html.light .task-list li, body.light .path-card { background: #f8fafc !important; border-color: rgba(15, 23, 42, 0.08) !important; color: #1e293b !important; }
body.light .nav-item, html.light .nav-item { color: #334155 !important; }
body.light .nav-item, html.light .nav-item:hover, body.light .nav-item, html.light .nav-item.active { background: rgba(217, 119, 6, 0.12) !important; color: #d97706 !important; }


* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; min-height: 100vh; overflow-x: hidden; line-height: 1.5; }

/* ===== APP LAYOUT ===== */
.app, .app-shell { display: flex; min-height: 100vh; background: var(--bg); color: var(--text); position: relative; }

/* ===== SIDEBAR ===== */
.sidebar, .side-nav {
  width: 245px; background: var(--bg2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 60; position: fixed;
  left: 0; top: 0; bottom: 0; transform: translateX(0);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1); overflow-y: auto;
}
.sidebar.hidden { transform: translateX(-100%); }

.sidebar-logo, .brand {
  padding: 18px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.brand-logo { max-width: 160px; width: 100%; height: auto; display: block; }
.sidebar-nav, .side-nav nav { padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }

.nav-item, .side-nav nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px;
  color: var(--sub); text-decoration: none; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.2s ease; border: 1px solid transparent;
}
.nav-item:hover, .nav-item.active, .side-nav nav a:hover, .side-nav nav a.active {
  background: rgba(245, 158, 11, 0.12); color: var(--col); border-color: rgba(245, 158, 11, 0.2);
}

.sign-out { margin-top: auto; padding: 12px 16px; color: var(--muted); text-decoration: none; font-size: 12px; font-family: monospace; }

/* ===== MAIN CONTAINER ===== */
.main, .dashboard-main {
  flex: 1; display: flex; flex-direction: column; margin-left: 245px;
  min-height: 100vh; width: calc(100% - 245px); transition: all 0.3s ease;
}
.main.full { margin-left: 0; width: 100%; }

.topbar {
  height: 64px; background: var(--bg2); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 24px; gap: 16px; z-index: 50; flex-shrink: 0;
  position: sticky; top: 0;
}
.toggle-btn { background: transparent; border: none; color: var(--text-strong); font-size: 22px; cursor: pointer; display: flex; align-items: center; }

.topbar-info { flex: 1; min-width: 0; }
.topbar-title { font-size: 16px; font-weight: 800; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-sub { font-size: 11px; color: var(--muted); font-family: monospace; }

.streak-pill {
  display: flex; align-items: center; gap: 6px; background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25); padding: 6px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 700; color: var(--col);
}
.quote-pill {
  background: rgba(124, 58, 237, 0.12); border: 1px solid rgba(124, 58, 237, 0.3);
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; color: #a78bfa;
  cursor: pointer; transition: transform 0.2s;
}
.quote-pill:hover { transform: scale(1.04); }

.scroll-area { flex: 1; overflow-y: auto; padding: 28px 24px; }
.page-inner { max-width: 1040px; margin: 0 auto; width: 100%; }

/* ===== DASHBOARD FULL WIDTH BANNER & CARDS ===== */
.dash-header { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-start; }
.dash-header h1 { font-size: 26px; font-weight: 900; color: var(--text-strong); line-height: 1.2; }
.eyebrow { font-size: 10px; letter-spacing: 2px; color: var(--col); font-family: monospace; text-transform: uppercase; margin-bottom: 4px; }

.continue-card {
  background: linear-gradient(135deg, rgba(15, 17, 26, 0.96), rgba(22, 24, 36, 0.98)),
              url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 24 24" fill="none" stroke="rgba(245,158,11,0.22)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2z"/><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>');
  background-size: cover, 180px 180px; background-position: center, right bottom; background-repeat: no-repeat, no-repeat;
  border: 1px solid var(--border); border-radius: 20px; padding: 32px 28px;
  display: flex; gap: 24px; align-items: center; margin-bottom: 24px;
  position: relative; overflow: hidden; box-shadow: var(--shadow); width: 100%;
}
body.light .continue-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.96)),
              url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 24 24" fill="none" stroke="rgba(217,119,6,0.22)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2z"/><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>');
  background-size: cover, 180px 180px; background-position: center, right bottom; background-repeat: no-repeat, no-repeat;
}
.continue-card h2 { font-size: 18px; font-weight: 800; color: var(--text-strong); margin-bottom: 6px; }
.continue-card p { font-size: 13px; color: var(--sub); line-height: 1.5; max-width: 600px; }

.progress-dial {
  width: 90px; height: 90px; border-radius: 50%;
  background: conic-gradient(var(--col) var(--progress, 0%), var(--bg3) 0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; border: 3px solid var(--bg2); flex-shrink: 0;
}
.progress-dial strong { font-size: 18px; font-weight: 900; color: var(--text-strong); }
.progress-dial span { font-size: 9px; color: var(--muted); font-family: monospace; text-transform: uppercase; }

.primary-button {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg,#7c3aed,#f59e0b); color: #fff;
  padding: 11px 22px; border-radius: 10px; text-decoration: none;
  font-weight: 800; font-size: 13px; margin-top: 14px; font-family: monospace;
}

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-grid article { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 22px; text-align: center; }
.stat-grid article strong { font-size: 24px; font-weight: 900; color: var(--col); display: block; margin-bottom: 2px; }
.stat-grid article span { font-size: 11px; color: var(--muted); font-family: monospace; }

.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 24px 26px; }
.panel-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.panel-title h2 { font-size: 16px; font-weight: 800; color: var(--text-strong); }

.task-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.task-list li { display: flex; align-items: center; gap: 12px; background: var(--bg3); padding: 12px 16px; border-radius: 12px; font-size: 13px; color: var(--text); }
.task-list li i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.task-list li i.done { background: rgba(34,197,94,0.2); border-color: #22C55E; color: #22C55E; }
.task-list li time { margin-left: auto; font-size: 11px; color: var(--muted); font-family: monospace; }

.path-card { display: flex; align-items: center; gap: 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; text-decoration: none; color: var(--text); margin-bottom: 10px; transition: border-color 0.2s; }
.path-card:hover { border-color: var(--col); }
.path-card span b { display: block; font-size: 14px; color: var(--text-strong); }
.path-card span small { font-size: 11px; color: var(--muted); }
.path-card em { margin-left: auto; color: var(--col); font-style: normal; font-size: 16px; }

/* ===== CALLIGRAPHIC QURANIC BANNER ===== */
.quran-banner-premium {
  background: linear-gradient(135deg, rgba(15, 17, 26, 0.98), rgba(20, 24, 40, 0.95));
  border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 20px; padding: 24px;
  margin-bottom: 24px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.4); position: relative;
}
.quran-arabic {
  font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade', serif; font-size: 26px; font-weight: 700;
  color: #f59e0b; margin-bottom: 8px; line-height: 1.6; direction: rtl;
}
.quran-translation { font-size: 14px; font-weight: 600; color: var(--text-strong); margin-bottom: 10px; line-height: 1.5; }
.quran-badge { display: inline-block; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); color: var(--col); font-size: 11px; font-family: monospace; font-weight: 700; padding: 4px 12px; border-radius: 12px; }

/* ===== VOCABULARY DAILY CARD ===== */
.vocab-daily-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 18px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.vocab-header { display: flex; justify-content: space-between; align-items: center; }
.vocab-word { font-size: 18px; font-weight: 800; color: var(--col); }
.vocab-phonetic { font-size: 12px; font-family: monospace; color: var(--muted); margin-left: 8px; }
.vocab-meaning { font-size: 14px; color: var(--text-strong); font-weight: 600; }
.vocab-example { font-size: 13px; color: var(--sub); font-style: italic; background: var(--bg3); padding: 8px 12px; border-radius: 10px; border-left: 3px solid var(--col-accent); }

/* ===== AUTHENTIC AUTH & LOGIN PAGE STYLES ===== */
.auth-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--bg); color: var(--text);
  padding: 20px; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
.auth-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 24px; padding: 36px 28px; max-width: 440px; width: 100%;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}
.auth-copy { font-size: 13px; color: var(--sub); margin-bottom: 24px; line-height: 1.5; }
.auth-form label { font-size: 11px; font-family: monospace; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; display: block; }
.auth-form input { width: 100%; background: var(--bg3); border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--text); font-family: inherit; font-size: 14px; outline: none; margin-bottom: 16px; transition: border-color 0.2s; }
.auth-form input:focus { border-color: var(--col); }
.auth-form button { width: 100%; padding: 14px; border-radius: 12px; border: none; background: linear-gradient(135deg,#7c3aed,#f59e0b); color: #fff; font-weight: 800; font-size: 14px; font-family: monospace; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.auth-form button:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4); }
.form-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #EF4444; border-radius: 10px; padding: 10px 14px; font-size: 12px; margin-bottom: 16px; }

/* ===== MOBILE BOTTOM NAVIGATION BAR ===== */
.mobile-bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 64px;
  background: rgba(13, 15, 26, 0.96); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border); z-index: 100;
  justify-content: space-around; align-items: center; padding: 0 6px;
}
body.light .mobile-bottom-nav { background: rgba(255, 255, 255, 0.96); }

.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; border: none; color: var(--muted); font-size: 10px; font-weight: 700;
  font-family: monospace; transition: color 0.2s; min-width: 56px; padding: 6px 0; cursor: pointer;
}
.bottom-nav-item .nav-icon { font-size: 20px; line-height: 1; }
.bottom-nav-item.active { color: var(--col); }

.floating-practice-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #f59e0b); border: 3px solid var(--bg2);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4); transform: translateY(-14px);
  transition: transform 0.2s; cursor: pointer;
}
.floating-practice-btn:active { transform: translateY(-10px) scale(0.95); }

@media (max-width: 640px) {
  .mobile-bottom-nav { display: flex; }
  .scroll-area, .dashboard-main { padding-bottom: 84px !important; margin-left: 0 !important; width: 100% !important; }
  .stat-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .continue-card { flex-direction: column; text-align: center; }
  .side-nav, .sidebar {
    display: flex !important; position: fixed !important;
    top: 0; bottom: 0; left: 0; width: 260px !important;
    z-index: 200 !important; transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
  }
  .sidebar.show, .side-nav.show { transform: translateX(0) !important; }
  .sidebar-overlay.show, #overlay.show {
    display: block !important; position: fixed; inset: 0;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    z-index: 190 !important;
  }
}


/* ==========================================
 * FLUTE-FREE PERFECT MOBILE RESPONSIVE FIX
 * Fixes right-shifted page content and 245px left gap on mobile view
 * ========================================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.app {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  position: relative;
}

@media (max-width: 991px) {
  .main, .dashboard-main, .scroll-area {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding-bottom: 84px !important;
  }
  
  .sidebar, .side-nav {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 270px !important;
    max-width: 80vw !important;
    z-index: 9999 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.7) !important;
  }

  .sidebar.show, .side-nav.show {
    transform: translateX(0) !important;
  }

  .sidebar-overlay, #overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.75) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 9990 !important;
  }

  .sidebar-overlay.show, #overlay.show {
    display: block !important;
  }

  .mobile-bottom-nav {
    display: flex !important;
    z-index: 9980 !important;
  }
}