/* ============================================================
   DiploMate — Study Material Styles
   ============================================================ */

/* ── Study layout ─────────────────────────────────────────── */
.study-page { min-height:100vh; background:var(--navy-darkest); display:flex; }

/* ── Study sidebar ────────────────────────────────────────── */
.study-sidebar { width:272px; flex-shrink:0; background:var(--navy-mid); border-right:1px solid var(--navy-border-2); position:fixed; top:0; left:0; bottom:0; z-index:100; display:flex; flex-direction:column; overflow:hidden; transition:transform var(--transition); }
.study-sidebar-top { padding:16px 16px 12px; border-bottom:1px solid var(--navy-border-2); flex-shrink:0; }
.study-back { display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--text-muted); text-decoration:none; margin-bottom:12px; transition:var(--transition); }
.study-back:hover { color:var(--mint); }
.study-branch-label { font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--mint); margin-bottom:4px; }
.study-branch-name { font-family:var(--font-display); font-size:0.95rem; font-weight:700; }
.study-prog-bar { height:3px; background:var(--navy-border-2); border-radius:2px; margin-top:10px; overflow:hidden; }
.study-prog-fill { height:100%; background:var(--mint); border-radius:2px; transition:width 0.6s ease; }
.study-prog-label { font-size:0.68rem; color:var(--text-muted); margin-top:4px; }
.study-chapter-nav { flex:1; overflow-y:auto; padding:8px 8px; }
.study-chapter-nav::-webkit-scrollbar { width:3px; }
.study-chapter-nav::-webkit-scrollbar-thumb { background:var(--navy-border); border-radius:2px; }
.section-group { margin-bottom:6px; }
.section-title { font-size:0.63rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); padding:8px 10px 4px; }
.ch-nav-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; font-size:0.81rem; color:var(--text-secondary); cursor:pointer; transition:var(--transition); text-decoration:none; margin-bottom:1px; }
.ch-nav-item:hover { background:var(--white-08); color:var(--text-primary); }
.ch-nav-item.active { background:var(--mint-dim); color:var(--mint); font-weight:600; }
.ch-nav-item.locked { opacity:0.45; cursor:not-allowed; }
.ch-nav-item.locked:hover { background:none; color:var(--text-secondary); }
.ch-nav-num { width:22px; height:22px; border-radius:6px; background:var(--navy-light); display:flex; align-items:center; justify-content:center; font-size:0.66rem; font-weight:700; flex-shrink:0; color:var(--text-muted); }
.ch-nav-item.active .ch-nav-num { background:var(--mint); color:var(--navy-darkest); }
.ch-nav-item.free .ch-nav-num { border:1px solid rgba(125,216,164,0.3); }
.ch-nav-text { flex:1; line-height:1.3; font-size:0.79rem; }
.ch-nav-icon { font-size:0.72rem; flex-shrink:0; }

/* ── Study main ───────────────────────────────────────────── */
.study-main { flex:1; margin-left:272px; min-height:100vh; display:flex; flex-direction:column; }
.study-topbar { height:54px; border-bottom:1px solid var(--navy-border-2); display:flex; align-items:center; justify-content:space-between; padding:0 24px; background:rgba(11,25,41,0.85); backdrop-filter:blur(12px); position:sticky; top:0; z-index:50; flex-shrink:0; }
.study-topbar-left { display:flex; align-items:center; gap:10px; }
.study-sidebar-toggle { background:none; border:none; color:var(--text-primary); font-size:1.2rem; cursor:pointer; padding:4px; display:none; }
.study-chapter-badge { font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius:100px; background:var(--mint-dim); color:var(--mint); border:1px solid rgba(125,216,164,0.2); }
.study-topbar-title { font-size:0.86rem; font-weight:600; color:var(--text-primary); }
.study-topbar-actions { display:flex; align-items:center; gap:8px; }
.study-action-btn { display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; font-size:0.78rem; font-weight:600; border:1px solid var(--navy-border); background:var(--navy-mid); color:var(--text-secondary); cursor:pointer; transition:var(--transition); text-decoration:none; }
.study-action-btn:hover { border-color:var(--mint); color:var(--mint); }
.study-action-btn.active { color:var(--mint); border-color:var(--mint); background:var(--mint-dim); }

/* ── Notes body ───────────────────────────────────────────── */
.notes-body { flex:1; max-width:800px; margin:0 auto; padding:36px 32px 80px; width:100%; }
.chapter-header { margin-bottom:32px; padding-bottom:20px; border-bottom:1px solid var(--navy-border-2); }
.chapter-label { font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--mint); margin-bottom:10px; }
.chapter-title { font-family:var(--font-display); font-size:1.9rem; font-weight:800; line-height:1.2; margin-bottom:12px; }
.chapter-meta { display:flex; gap:16px; flex-wrap:wrap; }
.chapter-meta-item { display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--text-muted); }
.chapter-meta-dot { color:var(--mint); }

/* Typography */
.notes-content h2 { font-family:var(--font-display); font-size:1.2rem; font-weight:700; margin:36px 0 14px; color:var(--text-primary); display:flex; align-items:center; gap:10px; }
.notes-content h2::after { content:''; flex:1; height:1px; background:var(--navy-border-2); }
.notes-content h3 { font-size:0.98rem; font-weight:700; margin:22px 0 10px; color:var(--mint); }
.notes-content p { font-size:0.9rem; line-height:1.8; color:var(--text-secondary); margin-bottom:12px; }
.notes-content ul, .notes-content ol { padding-left:20px; margin-bottom:14px; }
.notes-content li { font-size:0.88rem; line-height:1.8; color:var(--text-secondary); margin-bottom:4px; }
.notes-content strong { color:var(--text-primary); font-weight:600; }

/* Formula card */
.formula-card { background:var(--navy-mid); border:1px solid rgba(125,216,164,0.22); border-left:3px solid var(--mint); border-radius:var(--radius-md); padding:16px 18px; margin:18px 0; position:relative; }
.formula-label { font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--mint); margin-bottom:8px; }
.formula-eq { font-size:1.25rem; font-weight:700; color:var(--text-primary); margin-bottom:6px; letter-spacing:0.02em; }
.formula-eq .v { color:var(--mint); font-style:italic; }
.formula-desc { font-size:0.8rem; color:var(--text-secondary); line-height:1.6; }
.formula-copy { position:absolute; top:10px; right:10px; background:var(--navy-light); border:1px solid var(--navy-border); border-radius:6px; padding:3px 9px; font-size:0.7rem; color:var(--text-muted); cursor:pointer; transition:var(--transition); }
.formula-copy:hover { border-color:var(--mint); color:var(--mint); }

/* Info boxes */
.info-box { border-radius:var(--radius-md); padding:14px 16px; margin:18px 0; display:flex; gap:12px; }
.info-box.tip    { background:rgba(125,216,164,0.06); border:1px solid rgba(125,216,164,0.2); }
.info-box.warn   { background:rgba(245,158,11,0.06);  border:1px solid rgba(245,158,11,0.2); }
.info-box.exam   { background:rgba(59,130,246,0.06);  border:1px solid rgba(59,130,246,0.2); }
.info-box.memory { background:rgba(139,92,246,0.06);  border:1px solid rgba(139,92,246,0.2); }
.info-box-icon { font-size:1rem; flex-shrink:0; margin-top:1px; }
.info-box-title { font-size:0.78rem; font-weight:700; margin-bottom:4px; }
.info-box.tip  .info-box-title { color:var(--mint); }
.info-box.warn .info-box-title { color:#fbbf24; }
.info-box.exam .info-box-title { color:#60a5fa; }
.info-box.memory .info-box-title { color:#a78bfa; }
.info-box-text { font-size:0.83rem; color:var(--text-secondary); line-height:1.65; }

/* Table */
.notes-table { width:100%; border-collapse:collapse; margin:18px 0; font-size:0.84rem; }
.notes-table th { background:var(--navy-light); padding:10px 14px; text-align:left; font-weight:700; color:var(--mint); border-bottom:1px solid var(--navy-border-2); }
.notes-table td { padding:9px 14px; border-bottom:1px solid var(--navy-border-2); color:var(--text-secondary); }
.notes-table tr:last-child td { border-bottom:none; }
.notes-table tr:hover td { background:var(--mint-dim-2); }

/* Key points */
.key-points { background:var(--navy-mid); border:1px solid var(--navy-border-2); border-radius:var(--radius-lg); padding:18px 22px; margin:20px 0; }
.key-points-title { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--mint); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.key-points ul { padding-left:0; margin:0; }
.key-points li { list-style:none; padding:6px 0; border-bottom:1px solid var(--navy-border-2); display:flex; gap:10px; font-size:0.85rem; color:var(--text-secondary); }
.key-points li:last-child { border-bottom:none; }
.key-points li::before { content:'→'; color:var(--mint); flex-shrink:0; }

/* PYQ box */
.pyq-box { background:rgba(59,130,246,0.05); border:1px solid rgba(59,130,246,0.2); border-radius:var(--radius-lg); padding:18px 22px; margin:20px 0; }
.pyq-title { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#60a5fa; margin-bottom:14px; }
.pyq-item { padding:10px 0; border-bottom:1px solid rgba(59,130,246,0.1); }
.pyq-item:last-child { border-bottom:none; }
.pyq-q { font-size:0.87rem; color:var(--text-primary); margin-bottom:5px; font-weight:500; }
.pyq-meta { font-size:0.72rem; color:#60a5fa; opacity:0.8; }

/* Chapter nav arrows */
.ch-nav-arrows { display:flex; align-items:center; justify-content:space-between; padding:20px 32px; border-top:1px solid var(--navy-border-2); background:var(--navy-mid); flex-shrink:0; }
.nav-arrow { display:flex; align-items:center; gap:10px; padding:11px 18px; border-radius:10px; border:1px solid var(--navy-border); background:var(--navy-dark); color:var(--text-primary); text-decoration:none; font-size:0.84rem; font-weight:600; transition:var(--transition); }
.nav-arrow:hover { border-color:var(--mint); color:var(--mint); }
.nav-arrow.disabled { opacity:0.3; pointer-events:none; }
.nav-arrow-sub { font-size:0.7rem; color:var(--text-muted); font-weight:400; display:block; }

/* Paywall overlay */
.paywall-overlay { position:fixed; bottom:0; left:272px; right:0; height:55%; background:linear-gradient(to bottom,transparent 0%,var(--navy-darkest) 38%); display:flex; align-items:flex-end; justify-content:center; padding-bottom:50px; z-index:40; }
.paywall-card { background:var(--navy-mid); border:1.5px solid rgba(125,216,164,0.3); border-radius:var(--radius-xl); padding:28px 36px; text-align:center; max-width:460px; width:90%; box-shadow:0 -20px 60px rgba(0,0,0,0.4); }
.paywall-icon { font-size:2rem; margin-bottom:10px; }
.paywall-title { font-family:var(--font-display); font-size:1.35rem; font-weight:800; margin-bottom:8px; }
.paywall-sub { font-size:0.86rem; color:var(--text-secondary); margin-bottom:22px; line-height:1.6; }
.paywall-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Tools */
.tool-card { background:var(--navy-mid); border:1px solid var(--navy-border-2); border-radius:var(--radius-xl); padding:26px; margin-bottom:18px; }
.tool-card:hover { border-color:var(--mint); }
.tool-header { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.tool-icon { width:44px; height:44px; border-radius:12px; background:var(--mint-dim); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.tool-title { font-size:1rem; font-weight:700; }
.tool-subtitle { font-size:0.78rem; color:var(--text-muted); }
.tool-inputs { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:14px; }
.tool-field label { display:block; font-size:0.76rem; font-weight:600; color:var(--text-muted); margin-bottom:5px; }
.tool-input { width:100%; background:var(--navy-light); border:1.5px solid var(--navy-border); border-radius:8px; padding:9px 12px; font-size:0.92rem; color:var(--text-primary); font-family:var(--font-body); outline:none; transition:var(--transition); }
.tool-input:focus { border-color:var(--mint); }
.tool-select { width:100%; background:var(--navy-light); border:1.5px solid var(--navy-border); border-radius:8px; padding:9px 12px; font-size:0.86rem; color:var(--text-primary); font-family:var(--font-body); outline:none; cursor:pointer; }
.tool-result { background:var(--navy-light); border:1px solid rgba(125,216,164,0.2); border-radius:10px; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:6px; }
.tool-result-label { font-size:0.78rem; color:var(--text-muted); }
.tool-result-value { font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--mint); }
.tool-result-unit { font-size:0.82rem; color:var(--text-secondary); }

/* Formula sheet page */
.formula-sheet-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:28px; }
.fs-card { background:var(--navy-mid); border:1px solid var(--navy-border-2); border-radius:var(--radius-lg); padding:20px 22px; transition:var(--transition); }
.fs-card:hover { border-color:var(--mint); }
.fs-card.locked { opacity:0.5; }
.fs-topic { font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--mint); margin-bottom:8px; }
.fs-eq { font-size:1.5rem; font-weight:700; margin-bottom:5px; color:var(--text-primary); }
.fs-eq .v { color:var(--mint); font-style:italic; }
.fs-name { font-size:0.86rem; font-weight:600; margin-bottom:4px; }
.fs-where { font-size:0.78rem; color:var(--text-muted); line-height:1.6; }

/* Responsive */
@media (max-width:900px) {
  .study-sidebar { transform:translateX(-100%); }
  .study-sidebar.open { transform:translateX(0); }
  .study-main { margin-left:0; }
  .study-sidebar-toggle { display:block; }
  .paywall-overlay { left:0; }
  .formula-sheet-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .notes-body { padding:20px 16px 60px; }
  .ch-nav-arrows { padding:14px 16px; flex-direction:column; gap:10px; }
  .nav-arrow { width:100%; justify-content:center; }
  .tool-inputs { grid-template-columns:1fr; }
}