/* ============================================================
   Study Helper v2 — Complete Stylesheet (Mobile-First)
   ============================================================ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  --primary:       #4A90E2;
  --primary-dark:  #357ABD;
  --primary-light: #EBF4FF;
  --secondary:     #2ECC71;
  --danger:        #E74C3C;
  --warning:       #F39C12;
  --info:          #3498DB;
  --dark:          #2C3E50;
  --gray:          #7F8C8D;
  --light:         #ECF0F1;
  --white:         #FFFFFF;
  --bg:            #F5F7FA;
  --card:          #FFFFFF;
  --text:          #2C3E50;
  --text-muted:    #7F8C8D;
  --border:        #E2E8F0;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.08);
  --shadow-md:     0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:     0 10px 24px rgba(0,0,0,.14);
  --radius-sm:     6px;
  --radius:        10px;
  --radius-lg:     16px;
  --nav-height:    64px;
  --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem;
  --sp-4: 2rem;  --sp-5: 3rem;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}
a { text-decoration:none; color:inherit; transition:all .2s; }
img { max-width:100%; height:auto; display:block; }
button { font-family:inherit; }

/* ── Typography ───────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-weight:600; line-height:1.3; color:var(--dark); }
h1 { font-size:clamp(1.5rem, 4vw, 2.25rem); }
h2 { font-size:clamp(1.25rem, 3vw, 1.875rem); }
h3 { font-size:clamp(1.1rem, 2.5vw, 1.5rem); }
p  { margin-bottom:var(--sp-2); }

/* ── Layout ───────────────────────────────────────────────── */
.main-content { min-height:calc(100vh - 120px); padding-top:var(--nav-height); }
.page-container { max-width:1280px; margin:0 auto; padding:var(--sp-3) var(--sp-2); }
.container      { max-width:1200px; margin:0 auto; padding:0 var(--sp-2); }

/* ── Nav Overlay (mobile) ─────────────────────────────────── */
.nav-overlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  z-index:998;
  backdrop-filter:blur(2px);
}
.nav-overlay.active { display:block; }

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  background:var(--white);
  box-shadow:var(--shadow-md);
  position:fixed; top:0; left:0; right:0;
  z-index:999;
  height:var(--nav-height);
}
.nav-container {
  max-width:1280px; margin:0 auto;
  padding:0 var(--sp-2);
  display:flex; align-items:center;
  height:100%; gap:var(--sp-2);
}
.nav-brand a {
  display:flex; align-items:center; gap:.5rem;
  font-size:1.25rem; font-weight:700;
  color:var(--primary);
}
.nav-brand i { font-size:1.4rem; }

/* Desktop nav links */
.nav-menu {
  display:none;
  list-style:none;
  align-items:center;
  gap:.25rem;
  margin-left:auto;
}
.nav-menu a {
  display:flex; align-items:center; gap:.4rem;
  padding:.45rem .8rem;
  border-radius:var(--radius-sm);
  color:var(--text); font-size:.9rem; font-weight:500;
  white-space:nowrap;
}
.nav-menu a:hover, .nav-menu a.active {
  background:var(--primary-light);
  color:var(--primary);
}
.nav-menu .mobile-only, .nav-divider-mobile { display:none; }

/* User button (desktop) */
.nav-user { position:relative; margin-left:var(--sp-2); }
.desktop-only { display:none !important; }
.user-btn {
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .75rem;
  border:2px solid var(--border);
  border-radius:var(--radius);
  background:transparent;
  cursor:pointer;
  font-size:.9rem; font-weight:500;
  transition:all .2s;
}
.user-btn:hover { border-color:var(--primary); background:var(--primary-light); }
.user-avatar {
  width:30px; height:30px;
  background:var(--primary);
  color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; flex-shrink:0;
}
.user-name { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chevron { font-size:.7rem; transition:transform .2s; }
.user-btn[aria-expanded="true"] .chevron { transform:rotate(180deg); }

/* Dropdown */
.user-dropdown {
  display:none;
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  min-width:200px;
  overflow:hidden;
  z-index:1001;
}
.nav-user.open > .user-dropdown,
.user-dropdown.open { display:block !important; }
.dropdown-header {
  padding:var(--sp-2);
  background:var(--primary-light);
  border-bottom:1px solid var(--border);
}
.dropdown-header strong { display:block; font-size:.95rem; }
.dropdown-header small { color:var(--text-muted); font-size:.8rem; }
.user-dropdown a {
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem var(--sp-2);
  font-size:.9rem; color:var(--text);
  transition:background .15s;
}
.user-dropdown a:hover { background:var(--bg); }
.user-dropdown hr { border:none; border-top:1px solid var(--border); margin:0; }
.logout-link { color:var(--danger) !important; }
.logout-link:hover { background:#fff5f5 !important; }

/* Hamburger */
.hamburger {
  display:flex; flex-direction:column; justify-content:center;
  gap:5px; width:40px; height:40px;
  background:none; border:none; cursor:pointer;
  padding:4px; margin-left:auto; border-radius:var(--radius-sm);
  transition:background .2s;
}
.hamburger:hover { background:var(--bg); }
.hamburger span {
  display:block; width:22px; height:2.5px;
  background:var(--dark); border-radius:3px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  transform-origin:center;
}
.hamburger.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

/* ── Mobile Nav (Slide-in) ────────────────────────────────── */
@media (max-width: 767px) {
  .nav-menu {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    position:fixed;
    top:0; right:-280px;
    width:280px; height:100%;
    background:var(--white);
    box-shadow:var(--shadow-lg);
    z-index:1000;
    padding:var(--nav-height) 0 var(--sp-3);
    overflow-y:auto;
    transition:right .3s cubic-bezier(.4,0,.2,1);
  }
  .nav-menu.open { right:0; }
  .nav-menu li a {
    padding:.85rem var(--sp-3);
    font-size:1rem;
    border-radius:0;
    border-left:3px solid transparent;
  }
  .nav-menu li a:hover,
  .nav-menu li a.active {
    background:var(--primary-light);
    border-left-color:var(--primary);
    color:var(--primary);
  }
  .nav-menu .mobile-only { display:list-item; }
  .nav-divider-mobile {
    display:block;
    border-top:1px solid var(--border);
    margin:var(--sp-2) 0;
  }
  .mobile-logout { color:var(--danger) !important; }
  .desktop-only { display:none !important; }
  .hamburger { display:flex; }
}

/* ── Desktop Nav ──────────────────────────────────────────── */
@media (min-width: 768px) {
  .nav-menu { display:flex; }
  .hamburger { display:none !important; }
  .desktop-only { display:flex !important; }
}

/* Lock body scroll when mobile menu is open */
body.nav-open { overflow: hidden; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.65rem 1.25rem;
  border:2px solid transparent;
  border-radius:var(--radius);
  font-size:.95rem; font-weight:500;
  cursor:pointer; white-space:nowrap;
  transition:all .2s;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); box-shadow:0 4px 12px rgba(74,144,226,.35); }
.btn-outline { background:transparent; color:var(--primary); border-color:var(--primary); }
.btn-outline:hover { background:var(--primary); color:#fff; }
.btn-danger  { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover { background:#c0392b; }
.btn-success { background:var(--secondary); color:#fff; border-color:var(--secondary); }
.btn-ghost   { background:transparent; color:var(--gray); border-color:var(--border); }
.btn-ghost:hover { background:var(--bg); }
.btn-sm   { padding:.4rem .85rem; font-size:.85rem; }
.btn-lg   { padding:.85rem 1.75rem; font-size:1.05rem; }
.btn-block{ width:100%; justify-content:center; }
.btn-white{ background:#fff; color:var(--primary); }
.btn-white:hover { background:var(--light); }
.btn-icon { width:36px; height:36px; padding:0; justify-content:center; border-radius:50%; border:none; }

/* ── Forms ────────────────────────────────────────────────── */
.form-group { margin-bottom:var(--sp-3); }
.form-group label {
  display:flex; align-items:center; gap:.4rem;
  margin-bottom:.4rem;
  font-weight:500; font-size:.9rem;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group select,
.form-group textarea {
  width:100%;
  padding:.7rem 1rem;
  border:2px solid var(--border);
  border-radius:var(--radius);
  font-size:1rem; font-family:inherit;
  color:var(--text);
  background:var(--white);
  transition:border-color .2s, box-shadow .2s;
  appearance:none; -webkit-appearance:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(74,144,226,.15);
}
.form-group textarea { resize:vertical; min-height:130px; }
.form-group small { display:block; margin-top:.3rem; color:var(--text-muted); font-size:.82rem; }
.form-row { display:grid; grid-template-columns:1fr; gap:var(--sp-2); }
@media(min-width:640px){ .form-row { grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); } }
.form-actions { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3); }

/* File input */
.form-group input[type="file"] {
  padding:.5rem;
  cursor:pointer;
}

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
  display:flex; align-items:center; gap:.6rem;
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius);
  margin-bottom:var(--sp-3);
  font-size:.95rem;
}
.alert-success { background:#d4edda; color:#155724; border-left:4px solid var(--secondary); }
.alert-error   { background:#f8d7da; color:#721c24; border-left:4px solid var(--danger); }
.alert-info    { background:#d1ecf1; color:#0c5460; border-left:4px solid var(--info); }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:var(--sp-3);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
}

/* ── Page Header ──────────────────────────────────────────── */
.page-header {
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  justify-content:space-between; align-items:flex-start;
  margin-bottom:var(--sp-3);
  padding-bottom:var(--sp-3);
  border-bottom:2px solid var(--border);
}
.page-header h1 { margin:0; display:flex; align-items:center; gap:.5rem; }
.page-header p { color:var(--text-muted); margin:0; font-size:.9rem; }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  background:var(--dark); color:#fff;
  padding:var(--sp-3); text-align:center;
  margin-top:var(--sp-5);
}
.footer p { margin:.3rem 0; font-size:.9rem; }
.footer .fa-heart { color:var(--danger); }

/* ────────────────────────────────────────────────────────────
   LANDING PAGE
   ─────────────────────────────────────────────────────────── */
.landing-page { background:linear-gradient(135deg,#667eea,#764ba2); }
.landing-nav {
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  padding:var(--sp-2) 0;
  box-shadow:var(--shadow-md);
}
.nav-actions { display:flex; gap:var(--sp-2); }
.hero {
  display:grid; grid-template-columns:1fr;
  gap:var(--sp-4); align-items:center;
  padding:var(--sp-5) var(--sp-3);
  text-align:center;
}
@media(min-width:768px){
  .hero { grid-template-columns:1fr 1fr; text-align:left; }
  .hero-buttons { justify-content:flex-start; }
}
.hero-content h1 { font-size:clamp(2rem,5vw,3.5rem); color:#fff; margin-bottom:var(--sp-2); }
.hero-subtitle { font-size:1.1rem; color:rgba(255,255,255,.88); margin-bottom:var(--sp-3); }
.hero-buttons { display:flex; gap:var(--sp-2); flex-wrap:wrap; justify-content:center; }
.hero-image { font-size:10rem; color:rgba(255,255,255,.15); text-align:center; display:none; }
@media(min-width:768px){ .hero-image { display:block; } }
.features { padding:var(--sp-5) 0; background:#fff; }
.section-title { text-align:center; margin-bottom:var(--sp-4); }
.features-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:var(--sp-3);
  max-width:1200px; margin:0 auto; padding:0 var(--sp-2);
}
.feature-card {
  text-align:center; padding:var(--sp-3);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  transition:all .3s;
}
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.feature-icon { font-size:2.5rem; color:var(--primary); margin-bottom:var(--sp-2); }
.cta { background:linear-gradient(135deg,#667eea,#764ba2); padding:var(--sp-5) var(--sp-2); text-align:center; }
.cta h2 { font-size:clamp(1.5rem,4vw,2.5rem); color:#fff; margin-bottom:.5rem; }
.cta p { color:rgba(255,255,255,.88); margin-bottom:var(--sp-3); }
.landing-footer { background:var(--dark); color:#fff; padding:var(--sp-3); text-align:center; }

/* ────────────────────────────────────────────────────────────
   AUTH PAGES
   ─────────────────────────────────────────────────────────── */
.auth-page {
  background:linear-gradient(135deg,#667eea,#764ba2);
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-3);
}
.auth-box {
  background:#fff;
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,5vw,2.5rem);
  width:100%; max-width:440px;
  box-shadow:var(--shadow-lg);
}
.auth-header { text-align:center; margin-bottom:var(--sp-3); }
.auth-header i { font-size:3.5rem; color:var(--primary); margin-bottom:.5rem; display:block; }
.auth-header h1 { font-size:1.75rem; margin-bottom:.25rem; }
.auth-header p { color:var(--text-muted); }
.auth-footer {
  text-align:center; padding-top:var(--sp-2);
  border-top:1px solid var(--border);
  margin-top:var(--sp-2);
}
.auth-footer a { color:var(--primary); font-weight:500; }
.auth-footer p { margin:.3rem 0; font-size:.9rem; }

/* ────────────────────────────────────────────────────────────
   DASHBOARD
   ─────────────────────────────────────────────────────────── */
.dashboard-container { max-width:1280px; margin:0 auto; padding:var(--sp-3) var(--sp-2); }
.stats-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--sp-2);
  margin-bottom:var(--sp-3);
}
@media(min-width:900px){ .stats-grid { grid-template-columns:repeat(4,1fr); } }
.stat-card {
  background:var(--card); border-radius:var(--radius-lg);
  padding:var(--sp-2); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:var(--sp-2);
  border:1px solid var(--border);
}
.stat-icon {
  width:52px; height:52px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:#fff; flex-shrink:0;
}
.stat-info h3 { font-size:1.5rem; margin:0; }
.stat-info p  { color:var(--text-muted); margin:0; font-size:.82rem; }
.dashboard-grid {
  display:grid; grid-template-columns:1fr;
  gap:var(--sp-3); margin-bottom:var(--sp-3);
}
@media(min-width:900px){ .dashboard-grid { grid-template-columns:1fr 1fr; } }
.dashboard-section {
  background:var(--card); border-radius:var(--radius-lg);
  padding:var(--sp-3); box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
}
.section-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--sp-2);
  padding-bottom:var(--sp-2);
  border-bottom:2px solid var(--border);
}
.section-header h2 { margin:0; font-size:1.05rem; display:flex; align-items:center; gap:.4rem; }
.notes-list, .exams-list { display:flex; flex-direction:column; gap:.6rem; }
.note-item {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:.75rem var(--sp-2); background:var(--bg);
  border-radius:var(--radius); transition:background .2s;
}
.note-item:hover { background:var(--light); }
.note-subject-badge {
  width:44px; height:44px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1rem; flex-shrink:0;
}
.note-content-dash { flex:1; min-width:0; }
.note-content-dash h4 { margin:0; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note-meta { display:flex; gap:var(--sp-2); font-size:.78rem; color:var(--text-muted); margin:.2rem 0 0; }
.exam-item { display:flex; align-items:center; gap:var(--sp-2); padding:.75rem; background:var(--bg); border-radius:var(--radius); }
.exam-date {
  width:52px; height:52px; background:var(--primary); color:#fff;
  border-radius:var(--radius); display:flex; flex-direction:column;
  align-items:center; justify-content:center; flex-shrink:0;
}
.exam-date .day   { font-size:1.3rem; font-weight:700; line-height:1; }
.exam-date .month { font-size:.7rem; text-transform:uppercase; }
.exam-info h4 { margin:0; font-size:.9rem; }
.exam-info p  { margin:.2rem 0 0; color:var(--text-muted); font-size:.8rem; }
.exam-countdown { font-weight:700; color:var(--danger); font-size:.82rem; }
.empty-state { text-align:center; padding:var(--sp-4) var(--sp-2); color:var(--text-muted); }
.empty-state i { font-size:3.5rem; opacity:.3; margin-bottom:var(--sp-2); display:block; }
.empty-state p { margin-bottom:var(--sp-2); }
.view-all-link { display:block; text-align:center; margin-top:var(--sp-2); color:var(--primary); font-size:.9rem; font-weight:500; }
.quick-actions { background:var(--card); border-radius:var(--radius-lg); padding:var(--sp-3); box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.quick-actions h2 { font-size:1.05rem; margin-bottom:var(--sp-2); display:flex; align-items:center; gap:.4rem; }
.actions-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-2); }
@media(min-width:640px){ .actions-grid { grid-template-columns:repeat(4,1fr); } }
.action-card {
  padding:var(--sp-2); background:var(--bg); border-radius:var(--radius);
  text-align:center; transition:all .2s; cursor:pointer;
  border:1px solid var(--border);
}
.action-card:hover { background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.action-card i  { font-size:1.6rem; margin-bottom:.4rem; display:block; }
.action-card h3 { font-size:.9rem; margin-bottom:.2rem; }
.action-card p  { font-size:.78rem; margin:0; opacity:.8; }

/* ────────────────────────────────────────────────────────────
   NOTES PAGE
   ─────────────────────────────────────────────────────────── */
.filters-section {
  background:var(--card); padding:var(--sp-2);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  margin-bottom:var(--sp-3); border:1px solid var(--border);
}
.filters-form {
  display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center;
}
.search-wrap { display:flex; gap:.4rem; flex:1; min-width:200px; }
.search-input {
  flex:1; padding:.65rem 1rem;
  border:2px solid var(--border); border-radius:var(--radius);
  font-size:.95rem; min-width:0;
  transition:border-color .2s;
}
.search-input:focus { outline:none; border-color:var(--primary); }
.filter-select {
  padding:.65rem 1rem; border:2px solid var(--border);
  border-radius:var(--radius); font-size:.95rem;
  background:var(--white); min-width:160px;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237F8C8D' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center;
  padding-right:2rem; cursor:pointer;
}

/* Notes grid */
.notes-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-2);
}
@media(min-width:640px)  { .notes-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px) { .notes-grid { grid-template-columns:repeat(3,1fr); } }

.note-card {
  background:var(--card); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); border:1px solid var(--border);
  display:flex; flex-direction:column;
  transition:box-shadow .2s, transform .2s;
  overflow:hidden;
}
.note-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.note-card-header {
  padding:.65rem var(--sp-2);
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--border);
}
.note-badge {
  padding:.25rem .65rem; border-radius:20px;
  color:#fff; font-size:.75rem; font-weight:500;
}
.visibility-badge {
  display:flex; align-items:center; gap:.25rem;
  padding:.2rem .5rem; background:var(--info); color:#fff;
  border-radius:12px; font-size:.72rem;
}
.note-card-body { padding:var(--sp-2); flex:1; }
.note-card-body h3 { font-size:1rem; margin-bottom:.5rem; }
.note-excerpt { color:var(--text-muted); font-size:.87rem; line-height:1.5; margin-bottom:.5rem; }
.note-attachment {
  margin-top:.5rem; padding:.4rem .65rem;
  background:var(--bg); border-radius:var(--radius-sm);
  font-size:.8rem; color:var(--text-muted);
  display:flex; align-items:center; gap:.3rem;
}
.note-card-footer {
  padding:.75rem var(--sp-2);
  border-top:1px solid var(--border);
  display:flex; gap:.5rem; flex-wrap:wrap;
}
.note-card-footer .btn { flex:1; justify-content:center; min-width:80px; }

/* Note view page */
.note-view-container { max-width:860px; margin:0 auto; padding:var(--sp-3) var(--sp-2); }
.note-view-meta {
  display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center;
  margin-bottom:var(--sp-3);
}
.note-view-header {
  background:var(--card); border-radius:var(--radius-lg);
  padding:var(--sp-3); box-shadow:var(--shadow-sm);
  border:1px solid var(--border); margin-bottom:var(--sp-3);
}
.note-view-header h1 { font-size:clamp(1.25rem,3vw,1.8rem); margin-bottom:var(--sp-2); }
.note-view-body {
  background:var(--card); border-radius:var(--radius-lg);
  padding:var(--sp-3) clamp(var(--sp-2), 4vw, var(--sp-5));
  box-shadow:var(--shadow-sm); border:1px solid var(--border);
}
/* Rendered markdown styles */
.note-rendered h1,.note-rendered h2,.note-rendered h3,
.note-rendered h4,.note-rendered h5,.note-rendered h6 {
  margin: 1.25em 0 .5em;
  color:var(--dark);
}
.note-rendered h1 { font-size:1.7rem; border-bottom:2px solid var(--border); padding-bottom:.3em; }
.note-rendered h2 { font-size:1.4rem; border-bottom:1px solid var(--border); padding-bottom:.25em; }
.note-rendered h3 { font-size:1.15rem; }
.note-rendered p  { margin-bottom:.9em; line-height:1.75; }
.note-rendered ul,.note-rendered ol { padding-left:1.4em; margin-bottom:.9em; }
.note-rendered li { margin-bottom:.3em; }
.note-rendered blockquote {
  border-left:4px solid var(--primary); margin:1em 0;
  padding:.5em var(--sp-2); background:var(--primary-light);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text-muted); font-style:italic;
}
.note-rendered code {
  background:#f4f4f5; color:#d63031;
  padding:.15em .4em; border-radius:4px;
  font-family:'Courier New',monospace; font-size:.88em;
}
.note-rendered pre {
  background:#1e1e2e; color:#cdd6f4;
  padding:var(--sp-2); border-radius:var(--radius);
  overflow-x:auto; margin:1em 0;
}
.note-rendered pre code { background:transparent; color:inherit; padding:0; }
.note-rendered table { width:100%; border-collapse:collapse; margin:1em 0; font-size:.9rem; }
.note-rendered th,.note-rendered td { border:1px solid var(--border); padding:.5rem .75rem; }
.note-rendered th { background:var(--bg); font-weight:600; }
.note-rendered tr:nth-child(even) { background:var(--bg); }
.note-rendered a { color:var(--primary); text-decoration:underline; }
.note-rendered img { max-width:100%; border-radius:var(--radius); margin:1em 0; }
.note-rendered hr { border:none; border-top:2px solid var(--border); margin:1.5em 0; }

/* Share banner */
.share-banner {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  background:linear-gradient(135deg,var(--primary),#667eea);
  border-radius:var(--radius-lg); color:#fff; margin-bottom:var(--sp-3);
}
.share-url-box {
  display:flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.15);
  border-radius:var(--radius); padding:.4rem .75rem;
  flex:1; min-width:0; max-width:500px;
}
.share-url-box input {
  background:transparent; border:none; color:#fff;
  font-size:.85rem; flex:1; min-width:0; outline:none;
}

/* Form pages */
.form-container {
  background:var(--card); border-radius:var(--radius-lg);
  padding:clamp(var(--sp-2), 4vw, var(--sp-4));
  box-shadow:var(--shadow-sm); border:1px solid var(--border);
}
.current-file {
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  padding:var(--sp-2); background:var(--bg);
  border-radius:var(--radius); margin-bottom:var(--sp-2);
  font-size:.9rem;
}

/* EasyMDE toolbar fix for mobile */
.EasyMDEContainer .editor-toolbar { flex-wrap:wrap !important; }
.EasyMDEContainer .editor-toolbar button { font-size:1rem !important; }
.CodeMirror { border-radius:0 0 var(--radius) var(--radius) !important; font-size:.95rem !important; }
.editor-preview, .editor-preview-side {
  font-family:inherit !important;
  padding:var(--sp-3) !important;
}
/* Apply same note-rendered styles inside preview */
.editor-preview h1,.editor-preview-side h1 { border-bottom:2px solid var(--border); }
.editor-preview pre,.editor-preview-side pre { background:#1e1e2e; color:#cdd6f4; padding:var(--sp-2); border-radius:var(--radius); }
.editor-preview code,.editor-preview-side code { background:#f4f4f5; color:#d63031; padding:.15em .4em; border-radius:4px; }
.editor-preview blockquote,.editor-preview-side blockquote { border-left:4px solid var(--primary); padding:.5em var(--sp-2); background:var(--primary-light); color:var(--text-muted); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.editor-preview table,.editor-preview-side table { width:100%; border-collapse:collapse; }
.editor-preview th,.editor-preview td,.editor-preview-side th,.editor-preview-side td { border:1px solid var(--border); padding:.5rem .75rem; }
.editor-preview tr:nth-child(even),.editor-preview-side tr:nth-child(even) { background:var(--bg); }

/* ────────────────────────────────────────────────────────────
   EXAMS PAGE
   ─────────────────────────────────────────────────────────── */
.exam-container { display:grid; grid-template-columns:1fr; gap:var(--sp-3); }
@media(min-width:900px){ .exam-container { grid-template-columns:340px 1fr; } }
.add-exam-section {
  background:var(--card); padding:var(--sp-3);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
}
.add-exam-section h2 { font-size:1.05rem; margin-bottom:var(--sp-2); }
.exams-lists { display:flex; flex-direction:column; gap:var(--sp-3); }
.upcoming-exams,.past-exams {
  background:var(--card); padding:var(--sp-3);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
}
.upcoming-exams h2,.past-exams h2 { font-size:1.05rem; margin-bottom:var(--sp-2); display:flex; align-items:center; gap:.4rem; }
.exams-timeline { display:flex; flex-direction:column; gap:var(--sp-2); }
.exam-card {
  padding:var(--sp-2); border-radius:var(--radius);
  background:var(--bg); border:1px solid var(--border);
  transition:background .2s;
}
.exam-card:hover { background:var(--light); }
.exam-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.5rem; }
.exam-header h3 { margin:0; font-size:1rem; }
.exam-subject {
  display:inline-block; padding:.2rem .6rem;
  border-radius:12px; color:#fff; font-size:.73rem; margin-top:.3rem;
}
.exam-details { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.exam-info-row { display:flex; gap:var(--sp-2); font-size:.82rem; color:var(--text-muted); flex-wrap:wrap; }
.countdown-urgent { color:var(--danger); font-weight:700; font-size:.85rem; }
.countdown-soon   { color:var(--warning); font-weight:700; font-size:.85rem; }
.countdown-normal { color:var(--secondary); font-weight:700; font-size:.85rem; }
.exam-notes {
  margin-top:.6rem; padding:.5rem .75rem;
  background:var(--white); border-radius:var(--radius-sm);
  font-size:.85rem; color:var(--text-muted);
}
.past-exams-list { display:flex; flex-direction:column; gap:.5rem; }
.past-exam-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:.65rem var(--sp-2); background:var(--bg); border-radius:var(--radius-sm);
  font-size:.9rem;
}
.exam-subject-small {
  display:inline-block; padding:.1rem .45rem;
  background:var(--primary); color:#fff;
  border-radius:8px; font-size:.72rem; margin-left:.4rem;
}

/* ────────────────────────────────────────────────────────────
   TIMER PAGE
   ─────────────────────────────────────────────────────────── */
.timer-container { display:grid; grid-template-columns:1fr; gap:var(--sp-3); }
@media(min-width:900px){ .timer-container { grid-template-columns:2fr 1fr; } }
.timer-main {
  background:var(--card); border-radius:var(--radius-lg);
  padding:clamp(var(--sp-2), 5vw, var(--sp-5));
  box-shadow:var(--shadow-sm); border:1px solid var(--border);
  text-align:center;
}
.timer-mode-selector { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--sp-3); justify-content:center; }
.mode-btn {
  padding:.5rem 1rem; border:2px solid var(--border);
  background:transparent; border-radius:var(--radius);
  cursor:pointer; transition:all .2s;
  display:flex; align-items:center; gap:.35rem;
  font-size:.85rem; white-space:nowrap;
}
.mode-btn:hover  { border-color:var(--primary); background:var(--primary-light); }
.mode-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.timer-display { margin:var(--sp-3) 0; }
.timer-circle { position:relative; display:inline-block; }
.timer-svg {
  transform:rotate(-90deg);
  width:clamp(200px,60vw,300px);
  height:clamp(200px,60vw,300px);
}
.timer-bg     { fill:none; stroke:var(--border); stroke-width:10; }
.timer-progress { fill:none; stroke:var(--primary); stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.timer-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.timer-time  { font-size:clamp(2.5rem,10vw,4rem); font-weight:700; color:var(--dark); line-height:1; }
.timer-label { font-size:.9rem; color:var(--text-muted); margin-top:.3rem; }
.timer-controls { display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; margin:var(--sp-3) 0; }
.timer-settings { margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:2px solid var(--border); }
.setting-group { margin-bottom:var(--sp-2); }
.setting-group label { display:flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.9rem; }
.setting-group select { max-width:260px; }
.timer-sidebar { display:flex; flex-direction:column; gap:var(--sp-3); }
.session-info,.pomodoro-tips,.tips-box {
  background:var(--card); padding:var(--sp-3);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
}
.session-info h3,.pomodoro-tips h3,.tips-box h4 { font-size:1rem; margin-bottom:var(--sp-2); display:flex; align-items:center; gap:.4rem; }
.progress-stats { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
.stat-item { text-align:center; padding:var(--sp-2); background:var(--bg); border-radius:var(--radius); }
.stat-value { display:block; font-size:2rem; font-weight:700; color:var(--primary); }
.stat-label { display:block; font-size:.8rem; color:var(--text-muted); margin-top:.2rem; }
.pomodoro-tips ul { list-style:none; padding:0; }
.pomodoro-tips li { padding:.6rem 0; border-bottom:1px solid var(--border); font-size:.9rem; }
.pomodoro-tips li:last-child { border-bottom:none; }
.tips-box p { margin:.5rem 0; font-size:.88rem; }
.timer-notification {
  position:fixed; top:80px; right:-400px;
  background:var(--white); padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  z-index:1000; max-width:280px;
  transition:right .3s ease;
  border-left:4px solid var(--primary);
}
.timer-notification.show { right:var(--sp-2); }

/* ────────────────────────────────────────────────────────────
   SUBJECTS PAGE
   ─────────────────────────────────────────────────────────── */
.subjects-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:var(--sp-3);
}
.subject-card {
  background:var(--card); padding:var(--sp-3);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  text-align:center; transition:all .2s;
  border:1px solid var(--border);
}
.subject-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.subject-icon {
  width:70px; height:70px; margin:0 auto var(--sp-2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem;
}
.subject-stats { margin-bottom:var(--sp-2); padding:.4rem; background:var(--bg); border-radius:var(--radius-sm); font-size:.85rem; }

/* ────────────────────────────────────────────────────────────
   PROFILE PAGE
   ─────────────────────────────────────────────────────────── */
.profile-container { display:grid; grid-template-columns:1fr; gap:var(--sp-3); }
@media(min-width:900px){ .profile-container { grid-template-columns:300px 1fr; } }
.profile-sidebar {
  background:var(--card); padding:var(--sp-3);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  text-align:center; border:1px solid var(--border); height:fit-content;
}
.profile-avatar { font-size:6rem; color:var(--primary); margin-bottom:var(--sp-2); line-height:1; }
.profile-sidebar h2 { margin-bottom:.25rem; }
.profile-email { color:var(--text-muted); margin-bottom:var(--sp-2); font-size:.9rem; }
.profile-badge { display:inline-block; padding:.35rem .9rem; background:var(--primary); color:#fff; border-radius:20px; font-size:.82rem; margin-bottom:var(--sp-3); }
.profile-stats { display:flex; flex-direction:column; gap:var(--sp-2); margin:var(--sp-2) 0; padding:var(--sp-2) 0; border-top:2px solid var(--border); border-bottom:2px solid var(--border); }
.profile-stats .stat { display:flex; align-items:center; gap:var(--sp-2); padding:.65rem; background:var(--bg); border-radius:var(--radius); }
.profile-stats .stat i { font-size:1.25rem; color:var(--primary); }
.profile-info { font-size:.85rem; color:var(--text-muted); }
.profile-main { display:flex; flex-direction:column; gap:var(--sp-3); }
.profile-section { background:var(--card); padding:var(--sp-3); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.profile-section h3 { font-size:1rem; margin-bottom:var(--sp-2); padding-bottom:var(--sp-2); border-bottom:2px solid var(--border); display:flex; align-items:center; gap:.4rem; }
.info-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:var(--sp-2); }
.info-item { padding:var(--sp-2); background:var(--bg); border-radius:var(--radius); }
.info-label { display:block; font-size:.78rem; color:var(--text-muted); margin-bottom:.25rem; }
.info-value { display:block; font-weight:600; }

/* ── Responsive tweaks ────────────────────────────────────── */
@media(max-width:480px){
  .page-container { padding:var(--sp-2) var(--sp-1); }
  .dashboard-container { padding:var(--sp-2) var(--sp-1); }
  .stats-grid { grid-template-columns:1fr 1fr; gap:var(--sp-1); }
  .stat-card { padding:var(--sp-1) var(--sp-2); }
  .stat-icon { width:42px; height:42px; font-size:1.25rem; }
  .stat-info h3 { font-size:1.25rem; }
  .note-card-footer { flex-direction:column; }
  .note-card-footer .btn { width:100%; }
  .timer-controls { flex-direction:column; align-items:center; }
  .timer-controls .btn { width:100%; max-width:260px; }
  .mode-btn { font-size:.78rem; padding:.4rem .7rem; }
  h1 { font-size:1.35rem; }
}

/* ── Utility ──────────────────────────────────────────────── */
.text-muted { color:var(--text-muted); }
.text-primary { color:var(--primary); }
.text-danger  { color:var(--danger); }
.mt-1 { margin-top:var(--sp-1); }
.mt-2 { margin-top:var(--sp-2); }
.mb-2 { margin-bottom:var(--sp-2); }
.d-flex { display:flex; }
.align-center { align-items:center; }
.gap-1 { gap:var(--sp-1); }
.gap-2 { gap:var(--sp-2); }
.w-100 { width:100%; }
.form-control {
  width:100%; padding:.65rem 1rem;
  border:2px solid var(--border); border-radius:var(--radius);
  font-size:.95rem; font-family:inherit; background:var(--white);
}
.form-control:focus { outline:none; border-color:var(--primary); }

/* ── Bengali + Note Rendered Typography ───────────────────── */
.note-rendered,
.note-rendered p,
.note-rendered li,
.note-rendered blockquote {
  font-family: 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.02rem;
  line-height: 1.9;
  color: var(--text);
}
.note-rendered h1 { font-size: 1.7rem; margin: 1.4rem 0 .6rem; border-bottom: 2px solid var(--border); padding-bottom: .35rem; }
.note-rendered h2 { font-size: 1.35rem; margin: 1.2rem 0 .5rem; }
.note-rendered h3 { font-size: 1.1rem;  margin: 1rem 0 .4rem; }
.note-rendered blockquote {
  border-left: 4px solid var(--primary);
  background: var(--primary-light);
  padding: .75rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1rem 0;
  color: var(--dark);
}
.note-rendered code {
  background: #f1f3f5;
  border-radius: 4px;
  padding: .15em .4em;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: .88em;
  color: #c0392b;
}
.note-rendered pre {
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-size: .88rem;
  margin: 1rem 0;
}
.note-rendered pre code { background:none; color:inherit; padding:0; }
.note-rendered table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.93rem; }
.note-rendered th { background: var(--primary); color:#fff; padding:.6rem .8rem; text-align:left; }
.note-rendered td { padding:.55rem .8rem; border-bottom:1px solid var(--border); }
.note-rendered tr:nth-child(even) td { background: var(--bg); }
.note-rendered img { border-radius:var(--radius); max-width:100%; margin:1rem auto; display:block; box-shadow:var(--shadow-md); }
.note-rendered hr { border:none; border-top:2px solid var(--border); margin:1.5rem 0; }
/* Highlighted text ==...== (processed by DOMPurify-safe span if future plugin added) */
.note-rendered mark { background: #fff176; padding:.1em .25em; border-radius:3px; }

/* Math placeholder style — will render when KaTeX is integrated */
.note-rendered .math-inline,
.note-rendered .math-block { font-style:italic; color:var(--primary); }

/* ── Editor Bengali font ──────────────────────────────────── */
.EasyMDEContainer .CodeMirror {
  font-family: 'Noto Sans Bengali', 'SolaimanLipi', monospace;
  font-size: 1rem;
  line-height: 1.85;
}

/* ── KaTeX math display in notes ──────────────────────────── */
.note-rendered .katex-display {
  overflow-x: auto;
  padding: .5rem 0;
  margin: .75rem 0;
}
.note-rendered .katex { font-size: 1.1em; }

/* ── Quill rendered content in view/share ─────────────────── */
.ql-editor { font-family: 'Noto Sans Bengali', -apple-system, sans-serif; font-size: 1rem; line-height: 1.85; }
.note-rendered.ql-editor { padding: 0 !important; border: none !important; }
.note-rendered h1, .note-rendered h2, .note-rendered h3 { margin: 1.2rem 0 .5rem; font-weight: 700; }
.note-rendered blockquote {
    border-left: 4px solid var(--primary);
    background: var(--primary-light);
    padding: .75rem 1rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 1rem 0;
}
.note-rendered pre.ql-syntax {
    background: #1e1e2e; color: #cdd6f4;
    border-radius: var(--radius); padding: 1rem 1.2rem;
    overflow-x: auto; font-size: .88rem; margin: 1rem 0;
}
.note-rendered img { max-width: 100%; border-radius: var(--radius); margin: .75rem 0; }
.note-rendered .ql-formula { background: #f5f7ff; padding: 2px 8px; border-radius: 4px; color: var(--primary); }
.note-rendered ol, .note-rendered ul { padding-left: 1.5rem; margin: .5rem 0; }
.note-rendered li { margin-bottom: .2rem; }
/* KaTeX display */
.note-rendered .katex-display { overflow-x: auto; padding: .5rem 0; }