/* Global modern scrollbar */

/* ── Subscription Page ── */
.fn-subscription-page { min-height: 100vh; }
.fn-sub-wrap { max-width: 520px; margin: 0 auto; padding: 36px 20px 60px; display: flex; flex-direction: column; gap: 20px; }
.fn-sub-loading { color: var(--fn-text-muted, rgba(255,255,255,0.45)); padding: 40px; text-align: center; }
.fn-sub-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 24px 22px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.fn-sub-card-premium { border-color: rgba(245,197,66,0.2); background: rgba(245,197,66,0.04); }
.fn-sub-card-cta { border-color: rgba(99,179,255,0.2); background: rgba(99,179,255,0.04); }
.fn-sub-card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.fn-sub-icon { font-size: 2rem; }
.fn-sub-plan-name { font-size: 1.2rem; font-weight: 700; color: var(--fn-text, #e6eef9); }
.fn-sub-status-badge {
  display: inline-block; margin-top: 4px;
  font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 20px; letter-spacing: 0.5px; text-transform: uppercase;
}
.fn-sub-status-badge.active { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.fn-sub-status-badge.inactive { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.1); }
.fn-sub-status-badge.cancelling { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.fn-sub-cancel-notice { margin: 12px 0 4px; padding: 10px 14px; border-radius: 10px; background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.25); font-size: 0.85rem; color: #fbbf24; line-height: 1.5; }
.fn-sub-cancel-notice strong { color: #fde68a; }
.fn-sub-cancel-btn { margin-top: 14px; width: 100%; padding: 9px 0; border-radius: 10px; border: 1px solid rgba(248,113,113,0.4); background: rgba(248,113,113,0.08); color: #f87171; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.fn-sub-cancel-btn:hover { background: rgba(248,113,113,0.18); }
.fn-sub-cancel-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fn-sub-reactivate-btn { margin-top: 14px; }
body.light .fn-sub-cancel-notice { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); color: #b45309; }
body.light .fn-sub-cancel-notice strong { color: #92400e; }
body.light .fn-sub-cancel-btn { border-color: rgba(220,38,38,0.3); background: rgba(220,38,38,0.05); color: #dc2626; }
body.light .fn-sub-cancel-btn:hover { background: rgba(220,38,38,0.1); }
.fn-sub-free-msg { font-size: 0.9rem; color: rgba(255,255,255,0.55); margin: 0; line-height: 1.5; }
.fn-sub-free-msg strong { color: rgba(255,255,255,0.8); }
.fn-sub-cd-heading { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255,255,255,0.35); margin-bottom: 10px; }
.fn-sub-countdown { display: flex; align-items: center; gap: 6px; }
.fn-sub-cd-item { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 10px 16px; min-width: 60px; }
.fn-sub-cd-num { font-size: 1.6rem; font-weight: 700; color: var(--fn-accent, #63b3ff); line-height: 1; }
.fn-sub-cd-label { font-size: 10px; color: rgba(255,255,255,0.45); text-transform: uppercase; margin-top: 4px; letter-spacing: 0.5px; }
.fn-sub-cd-sep { font-size: 1.4rem; font-weight: 300; color: rgba(255,255,255,0.25); align-self: flex-start; margin-top: 8px; }
.fn-sub-expired { color: rgba(255,255,255,0.35); font-size: 0.9rem; }
.fn-sub-section-title { font-size: 1rem; font-weight: 700; color: var(--fn-text, #e6eef9); margin-bottom: 8px; }
.fn-sub-hint { font-size: 0.87rem; color: rgba(255,255,255,0.5); margin: 0 0 18px; line-height: 1.5; }
.fn-sub-hint strong { color: rgba(255,255,255,0.75); }
.fn-sub-benefits-list { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-direction: column; gap: 8px; }
.fn-sub-benefits-list li { font-size: 0.9rem; color: rgba(255,255,255,0.65); }
.fn-sub-plan-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.fn-sub-plan-btn {
  flex: 1; min-width: 130px; padding: 11px 18px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; color: var(--fn-text, #e6eef9); font-size: 0.87rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.fn-sub-plan-btn:hover { background: rgba(255,255,255,0.1); }
.fn-sub-plan-btn-primary { background: rgba(99,179,255,0.18); border-color: rgba(99,179,255,0.4); color: #7ec8ff; }
.fn-sub-plan-btn-primary:hover { background: rgba(99,179,255,0.28); }
.fn-sub-ref-row { margin-bottom: 14px; }
.fn-sub-ref-code-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.fn-sub-ref-code-wrap { display: flex; align-items: center; gap: 10px; }
.fn-sub-ref-code {
  font-family: 'Courier New', monospace; font-size: 1.4rem; font-weight: 700;
  letter-spacing: 4px; color: #f5c542;
  background: rgba(245,197,66,0.08); border: 1px dashed rgba(245,197,66,0.3);
  border-radius: 10px; padding: 8px 16px;
}
.fn-sub-copy-btn {
  padding: 7px 14px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; color: rgba(255,255,255,0.6); font-size: 0.82rem; cursor: pointer;
  transition: background 0.15s; white-space: nowrap;
}
.fn-sub-copy-btn:hover { background: rgba(255,255,255,0.12); }
.fn-sub-rewards-earned { font-size: 0.9rem; color: rgba(255,255,255,0.55); }
.fn-sub-rewards-earned strong { color: #f5c542; }
.fn-sub-used-code { margin-top: 8px; font-size: 0.85rem; color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fn-sub-ref-code-sm { font-size: 0.82rem; padding: 2px 8px; letter-spacing: 0.08em; }
/* Light mode overrides */
body.light .fn-sub-card { background: #fff; border-color: rgba(0,0,0,0.15); box-shadow: 0 2px 16px rgba(0,0,0,0.07); }
body.light .fn-sub-card-premium { border-color: rgba(180,83,9,0.2); background: rgba(180,83,9,0.03); }
body.light .fn-sub-card-cta { border-color: rgba(37,99,235,0.15); background: rgba(37,99,235,0.03); }
body.light .fn-sub-plan-name { color: #1a2236; }
body.light .fn-sub-free-msg { color: rgba(0,0,0,0.55); }
body.light .fn-sub-free-msg strong { color: rgba(0,0,0,0.8); }
body.light .fn-sub-hint { color: rgba(0,0,0,0.5); }
body.light .fn-sub-hint strong { color: rgba(0,0,0,0.7); }
body.light .fn-sub-section-title { color: #1a2236; }
body.light .fn-sub-cd-num { color: #2563eb; }
body.light .fn-sub-cd-item { background: rgba(37,99,235,0.06); }
body.light .fn-sub-cd-label { color: rgba(0,0,0,0.4); }
body.light .fn-sub-cd-heading { color: rgba(0,0,0,0.35); }
body.light .fn-sub-plan-btn { background: #f0f4f8; border-color: #d1d9e0; color: #1a2236; }
body.light .fn-sub-plan-btn:hover { background: #e2e8f0; }
body.light .fn-sub-plan-btn-primary { background: rgba(37,99,235,0.1); border-color: rgba(37,99,235,0.3); color: #2563eb; }
body.light .fn-sub-ref-code { color: #2563eb; background: rgba(37,99,235,0.07); border-color: rgba(37,99,235,0.25); }
body.light .fn-sub-copy-btn { background: #f0f4f8; border-color: #d1d9e0; color: #555; }
body.light .fn-sub-rewards-earned { color: rgba(0,0,0,0.5); }
body.light .fn-sub-rewards-earned strong { color: #b45309; }
body.light .fn-sub-benefits-list li { color: rgba(0,0,0,0.6); }
body.light .fn-sub-status-badge.inactive { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.45); border-color: rgba(0,0,0,0.1); }

/* ── Freemium — locked nav items ── */
.fn-nav-locked { opacity: 0.55; }
.fn-nav-lock-badge { margin-left: auto; font-size: 11px; opacity: 0.7; pointer-events: none; }

/* ── Annotate Clear Confirm Modal ────────────────────────────── */
#anConfirmModal {
  display: none;
  position: fixed; inset: 0; z-index: 99999;
  align-items: center; justify-content: center;
}
.an-confirm-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
}
.an-confirm-box {
  position: relative; z-index: 1;
  background: #1a2236;
  border-radius: 14px;
  padding: 28px 32px 20px;
  min-width: 280px;
  max-width: 360px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  color: #e8eaf6;
  text-align: center;
}
body.light-mode .an-confirm-box {
  background: #fff;
  color: #1a2236;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}
.an-confirm-msg {
  font-size: 1rem;
  margin: 0 0 22px;
  line-height: 1.5;
}
.an-confirm-btns {
  display: flex; gap: 12px; justify-content: center;
}
.an-confirm-cancel, .an-confirm-ok {
  flex: 1; padding: 9px 0; border-radius: 8px;
  font-size: 0.95rem; font-weight: 600; cursor: pointer; border: none;
  transition: background 0.15s;
}
.an-confirm-cancel {
  background: rgba(255,255,255,0.08); color: #aab;
}
body.light-mode .an-confirm-cancel {
  background: #e8eaf6; color: #555;
}
.an-confirm-cancel:hover { background: rgba(255,255,255,0.14); }
body.light-mode .an-confirm-cancel:hover { background: #d0d3e8; }
.an-confirm-ok {
  background: #e53935; color: #fff;
}
.an-confirm-ok:hover { background: #c62828; }

/* ── Paywall Modal ── */
.fn-paywall-backdrop {
  position: fixed; inset: 0; z-index: 9999999;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.fn-paywall-backdrop.visible { opacity: 1; pointer-events: auto; }
.fn-paywall-backdrop.hidden { display: none; }
.fn-paywall-modal {
  position: relative;
  background: #0d1526;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 36px 28px 28px;
  max-width: 380px; width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  transform: translateY(8px); transition: transform 0.2s;
  text-align: center;
}
.fn-paywall-backdrop.visible .fn-paywall-modal { transform: translateY(0); }
.fn-paywall-close {
  position: absolute; top: 14px; right: 16px;
  background: transparent; border: none; color: rgba(255,255,255,0.4);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px;
  border-radius: 8px; transition: color 0.15s;
}
.fn-paywall-close:hover { color: rgba(255,255,255,0.8); }
.fn-paywall-star { font-size: 2.8rem; margin-bottom: 8px; }
.fn-paywall-title { font-size: 1.4rem; font-weight: 800; color: #e6eef9; margin: 0 0 8px; }
.fn-paywall-feature-name { font-size: 0.87rem; color: rgba(255,255,255,0.5); margin: 0 0 18px; min-height: 20px; }
.fn-paywall-list {
  list-style: none; padding: 0; margin: 0 0 24px;
  text-align: left; display: flex; flex-direction: column; gap: 8px;
}
.fn-paywall-list li { font-size: 0.9rem; color: rgba(255,255,255,0.7); }
.fn-paywall-subscribe-btn {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #2b7cff, #7c3aed);
  border: none; border-radius: 14px;
  color: #fff; font-size: 1rem; font-weight: 700;
  cursor: pointer; letter-spacing: 0.3px;
  box-shadow: 0 6px 24px rgba(43,124,255,0.35);
  transition: filter 0.15s;
}
.fn-paywall-subscribe-btn:hover { filter: brightness(1.1); }
.fn-paywall-note { font-size: 11px; color: rgba(255,255,255,0.3); margin: 12px 0 0; }
/* Light mode paywall */
body.light .fn-paywall-backdrop { background: rgba(0,0,0,0.5); }
body.light .fn-paywall-modal { background: #fff; border-color: rgba(0,0,0,0.15); box-shadow: 0 24px 80px rgba(0,0,0,0.2); }
body.light .fn-paywall-title { color: #1a2236; }
body.light .fn-paywall-feature-name { color: rgba(0,0,0,0.45); }
body.light .fn-paywall-list li { color: rgba(0,0,0,0.7); }
body.light .fn-paywall-close { color: rgba(0,0,0,0.35); }
body.light .fn-paywall-close:hover { color: rgba(0,0,0,0.7); }
body.light .fn-paywall-note { color: rgba(0,0,0,0.3); }

/* Markdown rendered inside AI chat bubbles */
.ai-md h1,.ai-md h2,.ai-md h3{margin:.4em 0 .2em;font-weight:700;line-height:1.2;}
.ai-md h1{font-size:1.15em;}.ai-md h2{font-size:1.05em;}.ai-md h3{font-size:.97em;}
.ai-md p{margin:.3em 0;}
.ai-md ul,.ai-md ol{margin:.3em 0;padding-left:1.4em;}
.ai-md li{margin:.15em 0;}
.ai-md code{background:rgba(0,0,0,0.25);border-radius:4px;padding:1px 5px;font-size:.9em;font-family:monospace;}
.ai-md pre{background:rgba(0,0,0,0.3);border-radius:6px;padding:8px;overflow-x:auto;margin:.4em 0;}
.ai-md pre code{background:none;padding:0;}
.ai-md strong{font-weight:700;}.ai-md em{font-style:italic;}
.ai-md blockquote{border-left:3px solid rgba(255,255,255,0.4);margin:.3em 0;padding-left:.6em;opacity:.85;}

*{
	scrollbar-width:thin;
	scrollbar-color:rgba(99,179,255,0.2) transparent;
}
*::-webkit-scrollbar{
	width:6px;
	height:6px;
}
*::-webkit-scrollbar-track{
	background:transparent;
}
*::-webkit-scrollbar-thumb{
	background:rgba(99,179,255,0.2);
	border-radius:999px;
}
*::-webkit-scrollbar-thumb:hover{
	background:rgba(99,179,255,0.4);
}

.notesModeSwitch{
	display:flex;
	align-items:center;
	gap:6px;
	padding:4px;
	border-radius:12px;
	border:1px solid rgba(255,255,255,0.12);
	background:rgba(255,255,255,0.04);
}
body.light .notesModeSwitch{border-color:rgba(0,0,0,0.12);background:rgba(0,0,0,0.04)}
.notesModeBtn{
	padding:6px 12px;
	border-radius:9px;
	border:1px solid transparent;
	background:transparent;
	color:inherit;
	font-size:12px;
	font-weight:700;
	cursor:pointer;
	transition:background .15s,border-color .15s,transform .12s;
}
.notesModeBtn:hover{background:rgba(255,255,255,0.08)}
.notesModeBtn.active{background:rgba(78,161,255,0.2);border-color:rgba(78,161,255,0.4);color:#9ad0ff}
body.light .notesModeBtn.active{background:rgba(78,161,255,0.15);color:#1567be}
/* Countdown page styles to match To-Do List */
.countdownHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.countdownFilters {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}
.countdownList {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.countdownItem {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border-radius: 14px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08);
}
.countdownTitle {
	font-weight: 700;
}
.countdownMeta {
	font-size: 12px;
	color: #b9c2cc;
	margin-top: 4px;
}
.countdownActions {
	display: flex;
	gap: 8px;
}
.countdownEmpty {
	color: #9aa3ad;
	font-size: 12px;
	padding: 16px 0;
	text-align: center;
}

/* ── Countdown Page (Premium Redesign) ── */
.cdPage { padding: 24px 20px 40px; max-width: 780px; margin: 0 auto; }
.cdHeader { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.cdTitle { font-size: 22px; font-weight: 700; color: #f1f5f9; margin: 0 0 2px; }
.cdSubtitle { font-size: 13px; color: #64748b; }
.cdAddBtn { padding: 10px 20px; border-radius: 999px; background: linear-gradient(135deg,#4ea1ff,#7c6bff); color: #fff; font-weight: 700; font-size: 14px; border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: opacity .15s; }
.cdAddBtn:hover { opacity: .85; }
.cdFilterBar { display: flex; align-items: center; gap: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 0 4px; margin-bottom: 20px; overflow-x: auto; }
.cdFilterGroup { display: flex; align-items: center; gap: 8px; padding: 10px 14px; flex-shrink: 0; }
.cdFilterLabel { font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.cdFilterSelect { background: transparent; border: none; color: #cbd5e1; font-size: 13px; outline: none; cursor: pointer; }
.cdFilterSelect option { background: #1e2330; }
.cdFilterDivider { width: 1px; height: 20px; background: rgba(255,255,255,0.06); flex-shrink: 0; }
.cdList { display: flex; flex-direction: column; gap: 12px; }
/* Empty state */
.cdEmpty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; }
.cdEmptyIcon { font-size: 54px; margin-bottom: 14px; opacity: .7; }
.cdEmptyTitle { font-size: 18px; font-weight: 700; color: #e2e8f0; margin-bottom: 6px; }
.cdEmptySubtitle { font-size: 14px; color: #64748b; margin-bottom: 24px; }
/* Card */
.cdCard { position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 16px; overflow: hidden; transition: transform .15s, box-shadow .15s; cursor: default; }
.cdCard:hover { transform: translateY(-1px); box-shadow: 0 4px 24px rgba(0,0,0,.25); }
.cdCardLeft { display: flex; gap: 14px; align-items: flex-start; }
.cdCardUrgencyBar { width: 4px; border-radius: 4px; flex-shrink: 0; margin-top: 2px; min-height: 36px; align-self: stretch; }
.cdCardBody { flex: 1; min-width: 0; }
.cdCardTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cdCardTitle { font-size: 15px; font-weight: 700; color: #f1f5f9; line-height: 1.3; }
.cdCardDays { font-size: 22px; font-weight: 800; flex-shrink: 0; line-height: 1; }
.cdCardMeta { font-size: 12px; color: #64748b; margin: 4px 0 10px; }
.cdCardProgressTrack { height: 4px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.cdCardProgressBar { height: 100%; border-radius: 4px; transition: width .6s ease; }
.cdCardActions { display: flex; gap: 8px; margin-top: 12px; }
.cdCardActionBtn { padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #94a3b8; cursor: pointer; transition: all .15s; }
.cdCardActionBtn:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }
.cdCardActionBtn.cdDoneBtn { border-color: rgba(34,197,94,0.3); color: #4ade80; }
.cdCardActionBtn.cdDoneBtn:hover { background: rgba(34,197,94,0.12); }
.cdCardActionBtn.cdDeleteBtn { border-color: rgba(239,68,68,0.3); color: #f87171; }
.cdCardActionBtn.cdDeleteBtn:hover { background: rgba(239,68,68,0.12); }
/* Urgency colors */
.cdUrgencyRed { background: #ef4444; }
.cdUrgencyOrange { background: #f97316; }
.cdUrgencyYellow { background: #eab308; }
.cdUrgencyGreen { background: #22c55e; }
.cdDaysRed { color: #f87171; }
.cdDaysOrange { color: #fb923c; }
.cdDaysYellow { color: #facc15; }
.cdDaysGreen { color: #4ade80; }
/* Modal */
.cdModal { position: fixed; inset: 0; z-index: 100010; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cdModal.hidden { display: none !important; }
.cdModalBackdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.cdModalSheet { position: relative; z-index: 1; background: #141820; border-radius: 20px; padding: 28px 24px 24px; width: 100%; max-width: 480px; box-shadow: 0 24px 64px rgba(0,0,0,.5); }
.cdModalHandle { display: none; }
.cdModalTitle { font-size: 18px; font-weight: 700; color: #f1f5f9; margin: 0 0 16px; }
.cdModalField { margin-bottom: 14px; }
.cdModalLabel { display: block; font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.cdModalInput { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 12px; color: #e2e8f0; font-size: 14px; box-sizing: border-box; outline: none; transition: border-color .15s; }
.cdModalInput:focus { border-color: rgba(78,161,255,.5); }
.cdModalInput option { background: #1e2330; }
.cdModalActions { display: flex; gap: 10px; margin-top: 20px; }
.cdModalCancel { flex: 1; padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #94a3b8; font-weight: 600; cursor: pointer; }
.cdModalSave { flex: 2; padding: 12px; border-radius: 12px; background: linear-gradient(135deg,#4ea1ff,#7c6bff); border: none; color: #fff; font-weight: 700; cursor: pointer; transition: opacity .15s; }
.cdModalSave:hover { opacity: .85; }
/* Home grid button entrance animation */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes homeBtnIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.homeGrid .homeBtn {
  animation: homeBtnIn 0.35s cubic-bezier(0.22,1,0.36,1) both;
}
.homeGrid .homeBtn:nth-child(1)  { animation-delay: 0.00s; }
.homeGrid .homeBtn:nth-child(2)  { animation-delay: 0.04s; }
.homeGrid .homeBtn:nth-child(3)  { animation-delay: 0.08s; }
.homeGrid .homeBtn:nth-child(4)  { animation-delay: 0.12s; }
.homeGrid .homeBtn:nth-child(5)  { animation-delay: 0.16s; }
.homeGrid .homeBtn:nth-child(6)  { animation-delay: 0.20s; }
.homeGrid .homeBtn:nth-child(7)  { animation-delay: 0.24s; }
.homeGrid .homeBtn:nth-child(8)  { animation-delay: 0.28s; }
.homeGrid .homeBtn:nth-child(9)  { animation-delay: 0.32s; }
.homeGrid .homeBtn:nth-child(10) { animation-delay: 0.36s; }
.homeGrid .homeBtn:nth-child(11) { animation-delay: 0.40s; }

/* Decks Table (Anki-style) */
.deckTable {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: rgba(255,255,255,0.025);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 20px;
	box-shadow: 0 2px 16px rgba(0,0,0,0.2);
}
.deckTable th, .deckTable td {
	padding: 9px 14px;
	font-size: 13px;
	color: var(--text);
	border-bottom: 1px solid rgba(255,255,255,0.055);
}
.deckTable th {
	background: rgba(255,255,255,0.04);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.deckTable tr {
	background: transparent;
	transition: background .1s;
}
.deckTable tr:hover td {
	background: rgba(255,255,255,0.025);
}
.deckTable tr:nth-child(even) {
	background: rgba(255,255,255,0.012);
}
.deckTable tr:last-child td {
	border-bottom: none;
}
.deckTable input[type="text"], .deckTable input[type="input"], .deckTable input {
	background: rgba(255,255,255,0.07);
	color: var(--text);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 7px;
	padding: 4px 9px;
	font-size: 12px;
	outline: none;
	transition: border-color .15s;
}
.deckTable input:focus {
	border-color: rgba(78,161,255,0.5);
}
.deckTable button {
	margin: 1px 2px;
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(255,255,255,0.07);
	color: var(--text);
	border: 1px solid rgba(255,255,255,0.1);
	box-shadow: none;
	transition: background 0.12s, color 0.12s, border-color .12s;
	white-space: nowrap;
}
.deckTable button:hover {
	background: var(--accent, #2563eb);
	color: #fff;
	border-color: transparent;
}
/* Make the card-specific notes textarea large like the old canvas */
#noteCardText {
	width: 100%;
	min-height: 240px;
	height: 240px;
	resize: vertical;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 6px;
	background: var(--card);
	color: #fff;
	font-size: 15px;
	padding: 8px;
	box-sizing: border-box;
}
/* Ensure noteCanvas does not block input above it */
#noteCanvas {
	position: relative;
	z-index: 1;
	pointer-events: auto;
}
/* Ensure noteText textarea is always enabled and above canvas */
#noteText {
	position: relative;
	z-index: 2;
	pointer-events: auto;
	background: var(--card);
	color: #fff;
}
/* Make note/drawing area buttons match pill style */
#notesArea .controls button {
	background: var(--pill) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 22px !important;
	box-shadow: 0 6px 14px rgba(0,0,0,0.6) !important;
	padding: 8px 14px !important;
	font-weight: 600;
	transition: background .12s, color .12s;
}
/* Ensure note/drawing area buttons invert to white on hover */
#notesArea .controls button:hover, #notesArea .controls button:focus {
	background: #fff !important;
	color: #000 !important;
	transform: translateY(-2px);
}
:root{
  --bg:#070708;--card:#0e1113;--accent:#4ea1ff;--pill:#2b2f33;
  --text:#e6eef9;--text-muted:#9aa3ad;--text-secondary:#b9c2cc;
  --header-bg:#000;--input-bg:rgba(255,255,255,0.03);--input-border:rgba(255,255,255,0.06);
  --section-border:rgba(255,255,255,0.03);--section-shadow:rgba(0,0,0,0.6);
  --modal-shadow:rgba(0,0,0,0.6);--dot-color:rgba(255,255,255,0.06);
}
body.dark{
  --bg:#070708;--card:#0e1113;--accent:#4ea1ff;--pill:#2b2f33;
  --text:#e6eef9;--text-muted:#9aa3ad;--text-secondary:#b9c2cc;
  --header-bg:#000;--input-bg:rgba(255,255,255,0.03);--input-border:rgba(255,255,255,0.06);
  --section-border:rgba(255,255,255,0.03);--section-shadow:rgba(0,0,0,0.6);
  --modal-shadow:rgba(0,0,0,0.6);--dot-color:rgba(255,255,255,0.06);
}

/* === DASHBOARD REDESIGN === */

/* ── Container ─────────────────────────────────── */
#progress {
  max-width: 1100px !important;
  width: 100%;
  box-sizing: border-box;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 32px 36px !important;
}
body.light #progress { background: #F5F5F7 !important; }
body:not(.light) #progress { background: transparent !important; }

/* ── Page header ────────────────────────────────── */
.dashHeader { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; }
.dashTitle { font-size:24px; font-weight:800; color:#0f172a; letter-spacing:-.3px; }
.dashSubtitle { font-size:13px; color:#64748b; margin-top:4px; }
.dashHeaderRight { display:flex; gap:10px; align-items:center; }

.subjectPillsBar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.subjectPill { background:#f1f5f9; border:1.5px solid #e2e8f0; border-radius:20px; padding:7px 18px; font-size:13px; font-weight:500; color:#475569; cursor:pointer; transition:all .15s; }
.subjectPill.active { background:#1e293b; border-color:#1e293b; color:#fff; font-weight:600; }
.subjectPill:hover:not(.active) { background:#e2e8f0; border-color:#cbd5e1; color:#1e293b; }

.dashTabs { margin-bottom:24px; }
.dashTabsInner { display:inline-flex; background:#f1f5f9; border-radius:12px; padding:4px; gap:2px; }
.dashTab { background:none; border:none; border-radius:9px; padding:9px 20px; font-size:13px; font-weight:500; color:#64748b; cursor:pointer; transition:all .2s; }
.dashTab.active { background:#fff; color:#1e293b; font-weight:700; box-shadow:0 1px 6px rgba(0,0,0,0.1); }
.dashTab:hover:not(.active) { color:#1e293b; }

.dashTabView { display:flex; flex-direction:column; gap:16px; }
.dashTabView.hidden { display:none; }

/* Section labels — extra spacing before secondary sections */
.dashSectionLabel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:#94a3b8; padding:0 2px; }
.dashTabView > .dashSectionLabel:not(:first-child) { margin-top:12px; }

.dashCard { background:#fff; border-radius:16px; border:1px solid #e8ecf1; box-shadow:0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04); padding:24px; }
.dashCardHeader { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.dashCardTitle { font-size:14px; font-weight:700; color:#1e293b; }
.dashCardMeta { font-size:12px; color:#94a3b8; }

/* 4-column equal metric row */
.statCardsGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:900px) { .statCardsGrid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px) { .statCardsGrid { grid-template-columns:1fr; } }
.statCard { background:#fff; border-radius:14px; border:1px solid #e8ecf1; box-shadow:0 1px 4px rgba(0,0,0,0.06); padding:22px; display:flex; flex-direction:column; min-height:112px; }
.statCard .scValue { font-size:30px; font-weight:800; color:#1e293b; line-height:1; flex:1; }
.statCard .scLabel { font-size:12px; font-weight:600; color:#475569; margin-top:auto; padding-top:12px; }
.statCard .scNote { font-size:11px; color:#94a3b8; margin-top:3px; }

.dashChartWrap { position:relative; width:100%; display:block; overflow:hidden; }

.mockHistoryList { display:flex; flex-direction:column; gap:10px; }
.mockChartsSection { display:flex; flex-direction:column; gap:16px; margin-top:16px; }
.mockHistoryRow { display:flex; align-items:center; gap:12px; padding:14px 16px; background:#f8fafc; border-radius:12px; border:1px solid #e8ecf1; }
.mockHistoryRow .mhName { font-size:14px; font-weight:600; color:#1e293b; flex:1; }
.mockHistoryRow .mhDate { font-size:12px; color:#94a3b8; margin-top:2px; }
.mockHistoryRow .mhScore { font-size:16px; font-weight:800; color:#1e293b; min-width:52px; text-align:right; }
.mockHistoryRow .mhDel { background:none; border:none; color:#cbd5e1; font-size:15px; cursor:pointer; padding:4px 6px; border-radius:6px; transition:color .12s; }
.mockHistoryRow .mhDel:hover { color:#ef4444; }

.paperDefRow { display:flex; align-items:center; gap:10px; padding:12px 14px; background:#f8fafc; border-radius:12px; border:1px solid #e8ecf1; margin-bottom:8px; }
.paperDefIdx { width:26px; height:26px; border-radius:50%; background:#e2e8f0; color:#334155; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.paperDefNameInput { flex:1; background:#fff; border:1.5px solid #e2e8f0; border-radius:8px; padding:8px 12px; color:#1e293b; font-size:13px; outline:none; transition:border-color .15s; }
.paperDefNameInput:focus { border-color:#94a3b8; }
.paperDefDel { background:none; border:none; color:#cbd5e1; cursor:pointer; font-size:15px; padding:4px 6px; border-radius:6px; }
.paperDefDel:hover { color:#ef4444; background:#fef2f2; }

.paperDashCard { background:#fff; border-radius:16px; border:1px solid #e8ecf1; box-shadow:0 2px 12px rgba(0,0,0,0.05); padding:24px; margin-bottom:20px; }
.paperDashCardHeader { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.paperDashTitle { font-size:15px; font-weight:700; color:#1e293b; }
.paperMiniStats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.paperMiniStat { background:#f8fafc; border-radius:10px; padding:14px; text-align:center; border:1px solid #e8ecf1; }
.paperMiniStat .pmValue { font-size:22px; font-weight:800; color:#1e293b; }
.paperMiniStat .pmLabel { font-size:11px; color:#94a3b8; margin-top:4px; }
.paperScoreList { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.paperScoreRow { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#f8fafc; border-radius:10px; border:1px solid #e8ecf1; }
.paperScoreRow .psDate { font-size:12px; color:#94a3b8; flex:1; }
.paperScoreRow .psNotes { font-size:12px; color:#64748b; flex:2; font-style:italic; }
.paperScoreRow .psScore { font-size:15px; font-weight:700; color:#1e293b; }
.paperScoreRow .psDel { background:none; border:none; color:#cbd5e1; cursor:pointer; font-size:14px; padding:3px 5px; border-radius:5px; }
.paperScoreRow .psDel:hover { color:#ef4444; }

.paperAddScoreForm { background:#f8fafc; border-radius:12px; border:1px solid #e2e8f0; padding:16px; margin-top:14px; display:flex; flex-direction:column; gap:12px; }
.paperAddScoreForm .psfRow { display:flex; gap:10px; flex-wrap:wrap; }
.paperAddScoreForm .psfInput { flex:1; min-width:120px; background:#fff; border:1.5px solid #e2e8f0; border-radius:8px; padding:9px 12px; font-size:13px; color:#1e293b; outline:none; }
.paperAddScoreForm .psfInput:focus { border-color:#94a3b8; }

.btnPrimary { background:#1e293b; color:#fff; border:none; border-radius:10px; padding:10px 20px; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; }
.btnPrimary:hover { background:#0f172a; }
.btnSecondary { background:#f1f5f9; color:#475569; border:1.5px solid #e2e8f0; border-radius:10px; padding:8px 16px; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.btnSecondary:hover { background:#e2e8f0; color:#1e293b; }

/* Progress section: constrained width matching other sections */

body:not(.light) .dashTitle { color:var(--text); }
body:not(.light) .dashSubtitle { color:var(--text-muted); }
body:not(.light) .dashSectionLabel { color:var(--text-muted); opacity:.8; }
body:not(.light) .dashCard { background:var(--card); border-color:var(--section-border); box-shadow:0 2px 16px rgba(0,0,0,0.5); }
body:not(.light) .dashCardTitle { color:var(--text); }
body:not(.light) .dashCardMeta { color:var(--text-muted); }
body:not(.light) .statCard { background:rgba(255,255,255,0.03); border-color:var(--section-border); box-shadow:none; }
body:not(.light) .statCard .scValue { color:var(--text); }
body:not(.light) .statCard .scLabel { color:var(--text-secondary); }
body:not(.light) .statCard .scNote { color:var(--text-muted); }
body:not(.light) .subjectPill { background:transparent; border-color:rgba(255,255,255,0.2); color:var(--text-muted); }
body:not(.light) .subjectPill.active { background:var(--text); border-color:var(--text); color:var(--bg); }
body:not(.light) .subjectPill:hover:not(.active) { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.35); color:var(--text); }
body:not(.light) .dashTabsInner { background:rgba(255,255,255,0.03); border:1px solid var(--section-border); }
body:not(.light) .dashTab { color:var(--text-muted); }
body:not(.light) .dashTab.active { background:rgba(255,255,255,0.08); color:var(--text); box-shadow:none; }
body:not(.light) .dashTab:hover:not(.active) { color:var(--text); }
body:not(.light) .mockHistoryRow { background:rgba(255,255,255,0.025); border-color:var(--section-border); }
body:not(.light) .mockHistoryRow .mhName { color:var(--text); }
body:not(.light) .mockHistoryRow .mhDate { color:var(--text-muted); }
body:not(.light) .mockHistoryRow .mhScore { color:var(--text); }
body:not(.light) .paperDefRow { background:rgba(255,255,255,0.025); border-color:var(--section-border); }
body:not(.light) .paperDefIdx { background:rgba(255,255,255,0.07); color:var(--text); }
body:not(.light) .paperDefNameInput { background:var(--input-bg); border-color:var(--input-border); color:var(--text); }
body:not(.light) .paperDashCard { background:var(--card); border-color:var(--section-border); box-shadow:0 2px 16px rgba(0,0,0,0.5); }
body:not(.light) .paperDashTitle { color:var(--text); }
body:not(.light) .paperMiniStat { background:rgba(255,255,255,0.03); }
body:not(.light) .paperMiniStat .pmValue { color:var(--text); }
body:not(.light) .paperMiniStat .pmLabel { color:var(--text-muted); }
body:not(.light) .paperScoreRow { background:rgba(255,255,255,0.025); border-color:var(--section-border); }
body:not(.light) .paperScoreRow .psScore { color:var(--text); }
body:not(.light) .paperScoreRow .psDate { color:var(--text-muted); }
body:not(.light) .paperScoreRow .psNotes { color:var(--text-secondary); }
body:not(.light) .paperAddScoreForm { background:rgba(255,255,255,0.025); border-color:var(--section-border); }
body:not(.light) .paperAddScoreForm .psfInput { background:var(--input-bg); border-color:var(--input-border); color:var(--text); }
body:not(.light) .btnPrimary { background:var(--text); color:var(--bg); }
body:not(.light) .btnPrimary:hover { background:#fff; }
body:not(.light) .btnSecondary { background:rgba(255,255,255,0.05); color:var(--text-muted); border-color:var(--section-border); }
body:not(.light) .btnSecondary:hover { background:rgba(255,255,255,0.09); color:var(--text); }
body:not(.light) #addMockBtn { background:rgba(255,255,255,0.07); color:var(--text); border:1.5px solid rgba(255,255,255,0.15); }
body:not(.light) #addMockBtn:hover { background:rgba(255,255,255,0.12); }

body.light{
  --bg:#F8F9FB;--card:#FFFFFF;--accent:#2563eb;--pill:#2563eb;
  --text:#0f172a;--text-muted:#64748b;--text-secondary:#334155;
  --header-bg:#ffffff;--input-bg:#f1f5f9;--input-border:rgba(0,0,0,0.1);
  --section-border:rgba(0,0,0,0.13);--section-shadow:rgba(0,0,0,0.04);
  --modal-shadow:rgba(0,0,0,0.12);--dot-color:rgba(0,0,0,0.03);
  /* fn- overrides for light mode */
  --fn-bg:#F8F9FB;--fn-surface:#FFFFFF;--fn-surface-2:#f1f5f9;
  --fn-sidebar-bg:#FFFFFF;--fn-glass:rgba(0,0,0,0.03);--fn-glass-hover:rgba(0,0,0,0.06);
  --fn-border:rgba(0,0,0,0.13);--fn-border-strong:rgba(0,0,0,0.22);
  --fn-accent:#2563eb;--fn-accent-dim:rgba(37,99,235,0.1);--fn-accent-glow:rgba(37,99,235,0.12);
  --fn-text:#0f172a;--fn-text-2:#334155;--fn-muted:#94a3b8;
}
*{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif}
html{background:var(--fn-bg);min-height:100%}
body.light { color-scheme: light; }
body.light ~ html, html:has(body.light) { background: #F8F9FB; }
body.light::before { display: none; }
body.light::after { display: none; }
body{margin:0;background:var(--bg);color:var(--text);zoom:0.82;min-height:calc(100vh / 0.82)}
/* Preserve monospace for code blocks */
code,pre,kbd,samp{font-family:"SF Mono","Fira Code",ui-monospace,monospace}
/* User-written content keeps a readable system font without forcing SF */
.notesTextArea,.notesPreview,textarea{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif}
.hidden{display:none}
body::before{
	content:"";
	position:fixed;
	inset:0;
	background:
		radial-gradient(circle at 1px 1px, var(--dot-color) 1px, transparent 0) 0 0/22px 22px,
		radial-gradient(circle at 1px 1px, var(--dot-color) 1px, transparent 0) 11px 11px/22px 22px;
	pointer-events:none;
	z-index:0;
}
body::after{
	content:"";
	position:fixed;
	inset:0;
	background:
		radial-gradient(520px 520px at 8% 12%, rgba(255,255,255,0.06), rgba(255,255,255,0) 70%),
		radial-gradient(420px 420px at 92% 78%, rgba(255,255,255,0.04), rgba(255,255,255,0) 70%);
	pointer-events:none;
	z-index:0;
}
main, header, .modal{position:relative;z-index:1}

/* Navigation fallback (anchor/hash) */
.section{display:none;width:100%;max-width:1100px;box-sizing:border-box}
#home{display:block}
.section:target{display:block !important}
header{background:var(--header-bg);color:#fff;padding:20px 16px}
header h1{margin:0;color:#fff}
header button,
#addDeckBtn,
#addMockBtn,
#exitReviewBtn {
	background: var(--pill) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 22px !important;
	box-shadow: 0 6px 14px rgba(0,0,0,0.6) !important;
	padding: 8px 14px !important;
	font-weight: 600;
	transition: background .12s, color .12s;
}
main{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px;width:100%;box-sizing:border-box}
main.showing-mindmap { padding: 0; align-items: stretch; gap: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; }
section{background:var(--card);padding:12px;border-radius:8px;border:1px solid var(--section-border);box-shadow:0 6px 20px var(--section-shadow);width:100%;max-width:1100px}
.row{display:flex;gap:8px;margin-top:8px}
input,textarea,select{font-size:14px;padding:8px;border-radius:6px;border:1px solid var(--input-border);background:var(--input-bg);color:inherit}
select option{background:var(--card);color:var(--text)}
button{background:var(--pill);color:#fff;border:none;cursor:pointer;border-radius:999px;padding:10px 18px;box-shadow:0 8px 20px rgba(0,0,0,0.12);font-weight:600;transition:all 140ms ease}
.secondary{background:var(--pill);color:#fff}
button:hover, button:focus{background:#fff;color:#000;box-shadow:0 12px 28px rgba(0,0,0,0.14);transform:translateY(-2px)}
.toast{
	position:fixed;
	left:50%;
	bottom:24px;
	transform:translateX(-50%) translateY(12px);
	background:rgba(20,22,24,0.95);
	color:#e6eef9;
	border:1px solid rgba(255,255,255,0.12);
	border-radius:999px;
	padding:8px 16px;
	box-shadow:0 12px 28px rgba(0,0,0,0.45);
	font-size:13px;
	opacity:0;
	pointer-events:none;
	transition:opacity 140ms ease, transform 140ms ease;
	z-index:1200;
}

.toast.show{
	opacity:1;
	transform:translateX(-50%) translateY(0);
}
.deck{display:flex;justify-content:space-between;padding:8px;border-bottom:1px solid #f0f0f0}
.card{padding:8px;border-bottom:1px solid #f0f0f0}
.controls{display:flex;gap:8px;margin-top:8px}

/* accordion/nesting */
/* Deck/Topic/Chapter outline hierarchy */
.deckHeader {
	font-weight: 900;
	font-size: 1.5em;
	margin: 8px 0 4px 0;
}
.topic {
	display: flex;
	flex-direction: column;
	margin-top: 8px;
	margin-left: 32px;
}
.topic > div:first-child {
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: 2px;
}
.chapter {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: 48px;
	font-weight: normal;
	font-size: 1em;
}

/* modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3));padding:16px;overflow-y:auto}
.modal.hidden{display:none}
.modal-content{background:var(--card);padding:16px;border-radius:10px;width:480px;max-width:92%;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.modal-content input,.modal-content textarea{width:100%;margin-top:8px}
.secondary{background:var(--pill);color:#fff}

.confirmModalContent{
	width:min(520px, 92vw);
}

/* analytics */
#analytics{margin-top:12px}
#overallGraph, #chapterGraph{margin-top:8px}
.bar{height:18px;background:linear-gradient(90deg,var(--accent),#4ea1ff);border-radius:6px}
.barLabel{font-size:13px;margin-bottom:6px}
.insight{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-left:4px solid rgba(255,255,255,0.03);padding:12px;margin-top:8px;border-radius:8px;color:#dfe7ef}
.muted{color:#9aa3ad;font-size:13px}

/* notes */
#notesArea{margin-top:12px}
#noteText{width:100%;border:1px solid #ddd;padding:8px;border-radius:6px}
#noteCanvas{width:100%;max-width:100%;height:auto;border-radius:6px}

/* import mapping modal */
.importDeckRow{border:1px solid #eee;padding:8px;border-radius:6px;margin-bottom:8px}
.importTopicRow{padding:6px 6px;margin-left:8px}
.smallInput{width:220px}

/* Home page */
.home{grid-column:1/-1}
.homeMain{display:flex;gap:18px;align-items:flex-start}
.homeGrid{
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 18px;
	width: 360px;
	padding: 16px;
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.06);
	box-shadow: 0 16px 40px rgba(0,0,0,0.55);
	backdrop-filter: blur(6px);
	position: relative;
	z-index: 5;
	min-height: 400px;
	max-height: none;
	overflow: visible !important;
}
.homeBtn{
	padding:18px 20px;
	background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
	color:#fff;
	border-radius:14px;
	border:1px solid rgba(255,255,255,0.08);
	font-size:18px;
	cursor:pointer;
	min-height:60px;
	box-shadow:0 10px 24px rgba(0,0,0,0.6);
	font-weight:700;
	letter-spacing:0.2px;
	transition:transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
	position:relative;
	z-index:10;
	pointer-events:auto !important;
}

.homeHeatmapHeader{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:10px;
}

.homeMonthControls{
	display:flex;
	align-items:center;
	gap:8px;
	margin-left:0;
}

.smallBtn{
	padding:6px 10px;
	border-radius:10px;
	font-size:14px;
}

.calendarHeatmap{
	gap:10px;
	margin-top:12px;
	margin-left:0;
	width:fit-content;
	height:auto;
}

.calendarHeatmap .heatCell{
	width:42px;
	height:42px;
	border-radius:4px;
	background:rgba(255,255,255,0.10);
	border:1px solid rgba(255,255,255,0.18);
	position:relative;
	font-weight:400;
	font-size:11px;
	display:flex;
	align-items:flex-start;
	justify-content:flex-start;
	padding:4px;
}

.calendarHeatmap .heatCell.empty{
	background:rgba(255,255,255,0.02);
	border-color:rgba(255,255,255,0.06);
}

/* Activity level colours for the calendar heatmap */
.calendarHeatmap .heatCell.level-1 { background:rgba(58,123,255,0.20); border-color:rgba(58,123,255,0.35); }
.calendarHeatmap .heatCell.level-2 { background:rgba(58,123,255,0.45); border-color:rgba(58,123,255,0.55); }
.calendarHeatmap .heatCell.level-3 { background:rgba(58,123,255,0.75); border-color:rgba(58,123,255,0.85); }
.calendarHeatmap .heatCell.level-4 { background:#3A7BFF; border-color:#3A7BFF; }
.calendarHeatmap .heatCell.level-5 { background:#3A7BFF; border-color:#3A7BFF; box-shadow:0 0 8px rgba(58,123,255,0.6); }

.calendarHeatmap .heatDayLabel{
	color:#e6eef9;
	transform:none;
}

.weekdayRow{
	display:grid;
	grid-template-columns:repeat(7, 42px);
	gap:4px;
	margin-top:6px;
	margin-left:0;
	color:#b9c2cc;
	font-size:12px;
	letter-spacing:0.2px;
	text-transform:uppercase;
	width:fit-content;
}

.weekdayRow span{
	text-align:center;
}

.weekdayRow span:last-child{
	transform:translateX(3px);
}
.homeBtn:hover{
	transform:translateY(-3px);
	box-shadow:0 16px 34px rgba(0,0,0,0.7);
}
.homeCharts{display:flex;gap:12px;margin-top:6px;flex:1;align-items:flex-start}
.homeHeatmapColumn{
	display:flex;
	flex-direction:column;
	gap:8px;
	flex:1;
}
# Mind Map full-width overrides
# Corrected and strengthened selectors to ensure the mind-map section stretches
# Use high specificity and !important where necessary
# (this block was added by assistant to expand the whiteboard)
# Note: keep comments using valid CSS syntax
/* Mind Map full-width overrides */
#mind-map{
	display:block !important;
	width:100% !important;
	max-width: none !important;
	margin:0 !important;
	padding-left: 40px !important;
	padding-right: 40px !important;
	align-self: stretch !important;
	box-sizing: border-box !important;
}
main > #mind-map { align-self: stretch !important; width:100% !important; }
#mind-map > div { width:100% !important; max-width:none !important }
#mind-map aside { width:260px !important; }
#mind-map .muted { color: #9aa3ad }
#mind-map canvas#whiteboardCanvas { width:100% !important; height:100% !important; display:block }
#
/* Hide legacy fullscreen mind-map modals to prevent old editor from appearing */
#mindMapEditorModal, #mindMapNodeModal, #mindMapStyleModal, #mindMapModal {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}
.homeHeatmapTitle{
	margin:0;
	font-weight:700;
	color:#e6eef9;
}
.homeTodoMini{
	padding:18px;
	border-radius:16px;
	background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
	border:1px solid rgba(255,255,255,0.06);
	box-shadow:0 12px 30px rgba(0,0,0,0.45);
	backdrop-filter: blur(6px);
	min-height:260px;
	width:100%;
}
.homeTodoHeader{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin-bottom:10px;
}
.homeTodoHeader h4{
	margin:0;
	font-size:14px;
	letter-spacing:0.2px;
}
.homeTodoList{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.homeTodoItem{
	padding:10px 12px;
	border-radius:12px;
	background:rgba(255,255,255,0.04);
	border:1px solid rgba(255,255,255,0.06);
}
.homeTodoTitle{
	font-weight:700;
	font-size:13px;
	color:#e6eef9;
}
.homeTodoMeta{
	margin-top:4px;
	font-size:11px;
	color:#9aa3ad;
}
.homeTodoEmpty{
	color:#9aa3ad;
	font-size:12px;
}
.homeCharts #homeHeatmapWrap{
	flex:1;
	padding:24px 24px 32px;
	min-height:420px;
	border-radius:18px;
	background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
	border:1px solid rgba(255,255,255,0.06);
	box-shadow:0 16px 40px rgba(0,0,0,0.55);
	backdrop-filter: blur(6px);
}
.homeCharts #homeGraphs{display:flex;flex-direction:column;gap:12px;flex:1}
.homeCharts canvas{width:100%;background:transparent;height:140px}

/* Countdown mini-list on the right column */
.homeCountdownMini{
	padding:20px;
	border-radius:16px;
	background:linear-gradient(180deg, rgba(20,20,20,0.6), rgba(10,10,10,0.4));
	border:1px solid rgba(255,255,255,0.04);
	box-shadow:0 18px 50px rgba(0,0,0,0.6);
	color:#e6eef9;
	min-height:220px;
	width:100%;
}
.homeCountdownMini h4{margin:0;font-size:14px;margin-bottom:8px}
.homeCountdownItem{font-size:14px;color:#e6eef9;display:flex;justify-content:space-between;align-items:center}
.homeCountdownTitle{font-weight:700}
.homeCountdownLabel{font-weight:800;font-size:13px}
.homeCountdownLabel.dead{color:#ffb3b3}

.flashAiCard{
	max-width:1100px;
	width:100%;
	margin:0 auto;
	padding:18px;
	border-radius:16px;
	background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
	border:1px solid rgba(255,255,255,0.06);
	box-shadow:0 16px 40px rgba(0,0,0,0.55);
}
.flashAiHeader{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:16px;
	margin-bottom:12px;
}
.flashAiHeader h4{
	margin:0 0 6px 0;
}
.flashAiControls{
	display:flex;
	align-items:center;
	gap:8px;
}
.flashAiActions{
	display:flex;
	gap:8px;
	margin-top:10px;
}
.flashAiResponse{
	margin-top:12px;
	padding:12px;
	border-radius:12px;
	background:rgba(0,0,0,0.35);
	border:1px solid rgba(255,255,255,0.06);
	min-height:120px;
	white-space:pre-wrap;
}
.flashAiError{
	margin-top:8px;
	color:#ffb3b3;
	font-size:12px;
	min-height:16px;
}

.cardsMiniCalendar{
	display:grid;
	grid-template-columns:repeat(7, 1fr);
	gap:10px;
	align-items:end;
	padding:10px 6px 4px 6px;
	border-radius:12px;
	background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border:1px solid rgba(255,255,255,0.05);
	min-height:140px;
}

.cardsMiniCol{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
}

.cardsMiniBarWrap{
	width:100%;
	max-width:46px;
	height:90px;
	display:flex;
	align-items:flex-end;
	justify-content:center;
}

.cardsMiniBar{
	width:100%;
	border-radius:999px;
	background:linear-gradient(180deg, #5ad9ff, #1fa9ff);
	box-shadow:0 10px 20px rgba(0,0,0,0.35);
	min-height:8px;
}

.cardsMiniValue{
	font-size:12px;
	color:#dfe7ef;
	min-height:14px;
}

.cardsMiniLabel{
	font-size:11px;
	letter-spacing:0.4px;
	color:#8f98a3;
}

.cardsMiniStats{
	margin-top:10px;
	display:grid;
	grid-template-columns:repeat(2, minmax(0,1fr));
	gap:8px;
}

.cardsMiniStat{
	background:rgba(255,255,255,0.04);
	border:1px solid rgba(255,255,255,0.08);
	border-radius:12px;
	padding:8px 10px;
	font-size:12px;
	color:#dfe7ef;
}

.cardsMiniStat span{
	display:flex;
	align-items:center;
	justify-content:space-between;
	color:#8f98a3;
	font-size:11px;
}

.streakIcon{
	font-size:32px !important;
	line-height:1;
	margin-left:8px;
}

.progressScopeRow{
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
}

.progressSessionsNav{
	align-items:center;
	justify-content:flex-end;
	gap:10px;
	margin-top:6px;
}

.progressSessionsNav .muted{
	min-width:160px;
	text-align:center;
}

.progressInline{
	display:flex;
	align-items:center;
	gap:8px;
}

#progress:not(.showProgressSubjectSelect) #progressSubjectWrap{
	display:none !important;
}

/* ── Annotate Page ── */
#annotate {
  max-width: none !important;
  width: 100% !important;
  align-self: stretch;
  padding: 0;
  height: calc(100vh / 0.82 - 56px);
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}
main.showing-annotate {
  padding: 0 !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  flex: 1 !important;
  min-height: 0 !important;
}
main.showing-annotate #annotate {
  width: 100% !important;
  max-width: none !important;
  flex: 1 !important;
  height: 100% !important;
}
.anPage {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.anSidebar {
  width: 200px;
  min-width: 160px;
  background: #0b1120;
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  gap: 10px;
  overflow-y: auto;
}
.anSidebarTitle {
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 2px 0;
}
.anImportBtn {
  display: block;
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: background 0.15s;
  box-sizing: border-box;
}
.anImportBtn:hover { background: #2563eb; }
.anLibraryList { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; }
.anLibraryItem {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s, color 0.12s;
  line-height: 1.4;
}
.anLibraryItem:hover { background: rgba(255,255,255,0.05); color: #cbd5e1; }
.anLibraryItem.active { background: rgba(37,99,235,0.15); color: #60a5fa; font-weight: 600; }
.anLibraryItemDate { font-size: 10px; color: #475569; display: block; margin-top: 2px; }
.anMain {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #080e1a;
  position: relative;
}
.anEmpty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  font-size: 14px;
  text-align: center;
  padding: 32px;
}
.anToolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: #0b1120;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.anDocTitle {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 4px;
}
.anToolbarGroup { display: flex; align-items: center; gap: 4px; }
.anToolBtn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #94a3b8;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.anToolBtn:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }
.anToolBtn.anToolActive { background: #1d4ed8; color: #fff; border-color: #2563eb; }
.anToolBtnDanger { color: #fca5a5; }
.anToolBtnDanger:hover { background: rgba(239,68,68,0.15); color: #f87171; }
/* Preset pen buttons */
.anPresetBtn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px !important;
  padding: 5px 8px !important;
}
.anPresetDot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.3);
}
/* Preset config popover */
#anPresetPopover {
  display: none;
  position: fixed;
  z-index: 99990;
  flex-direction: column;
  gap: 10px;
  background: #1e2d45;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  min-width: 180px;
}
body.light-mode #anPresetPopover { background: #fff; border-color: #ddd; box-shadow: 0 6px 24px rgba(0,0,0,0.18); }
.an-preset-popover-title {
  font-size: 13px; font-weight: 600; color: #e2e8f0; margin-bottom: 2px;
}
body.light-mode .an-preset-popover-title { color: #1a2236; }
.an-preset-label {
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.an-preset-label input[type="color"] { width: 32px; height: 26px; border: none; background: none; cursor: pointer; padding: 0; }
.an-preset-label input[type="range"] { cursor: pointer; }
body.light-mode .an-preset-label { color: #555; }


#anViewer {
  width: 100%;
  flex: 1;
  min-height: 0;
}
.anCanvasWrap {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  gap: 16px;
  background: #1a2030;
}
.anPageBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.anPageLabel {
  font-size: 11px;
  color: #475569;
  letter-spacing: 0.04em;
}
.anCanvasStack {
  position: relative;
  display: inline-block;
  line-height: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  border-radius: 4px;
}
.anPdfCanvas {
  display: block;
  border-radius: 4px;
}
.anDrawCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  border-radius: 4px;
}

/* ── Mind Map ── */
#mind-map {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  max-width: none;
  width: 100%;
  align-self: stretch;
}
.mmPage {
  display: flex;
  flex: 1;
  height: 100%;
  overflow: hidden;
}
/* Sidebar */
.mmSidebar {
  width: 200px;
  min-width: 160px;
  background: #0b1120;
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  padding: 16px 12px 16px 12px;
  gap: 10px;
  overflow-y: auto;
}
.mmSidebar h3 {
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 2px 0;
}
.mmNewBtn {
  background: #1d4ed8 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: center !important;
  transition: background 0.15s !important;
}
.mmNewBtn:hover { background: #2563eb !important; }
.mmList {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.mmListRow {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s, color 0.12s;
}
.mmListRow:hover { background: rgba(255,255,255,0.05); color: #cbd5e1; }
.mmListRow.active { background: rgba(37,99,235,0.15); color: #60a5fa; font-weight: 600; }
.mmListEmpty { font-size: 12px; color: #334155; padding: 6px 4px; line-height: 1.6; }
/* Main canvas area */
.mmMain {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #080e1a;
  position: relative;
}
/* Toolbar */
.mmToolbar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: #0b1120;
  flex-wrap: wrap;
  min-height: 48px;
}
.mmPageTitle {
  font-weight: 700;
  font-size: 14px;
  color: #e2e8f0;
  margin-right: 8px;
  flex-shrink: 0;
}
.mmToolbarGroup {
  display: flex;
  align-items: center;
  gap: 4px;
  border-right: 1px solid rgba(255,255,255,0.08);
  padding-right: 8px;
  margin-right: 0;
}
.mmToolbarRight {
  margin-left: auto;
  border-right: none;
  padding-right: 0;
}
.mmToolBtn {
  font-size: 12px !important;
  padding: 5px 10px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  transition: background 0.12s, color 0.12s !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}
.mmToolBtn:hover { background: rgba(255,255,255,0.10) !important; color: #e2e8f0 !important; }
.mmToolBtnPrimary { background: rgba(37,99,235,0.18) !important; border-color: rgba(37,99,235,0.4) !important; color: #60a5fa !important; }
.mmToolBtnPrimary:hover { background: rgba(37,99,235,0.32) !important; color: #93c5fd !important; }
.mmToolBtnDanger { background: rgba(220,38,38,0.10) !important; border-color: rgba(220,38,38,0.25) !important; color: #fca5a5 !important; }
.mmToolBtnDanger:hover { background: rgba(220,38,38,0.22) !important; color: #fecaca !important; }
.mmZoomBtn { width: 30px !important; text-align: center !important; padding: 5px 6px !important; font-size: 16px !important; font-weight: 700 !important; }
.mmSelectedLabel {
  font-size: 11px;
  color: #475569;
  margin-left: 8px;
  font-style: italic;
  white-space: nowrap;
}
/* Canvas */
.mmCanvasWrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: radial-gradient(ellipse at 50% 45%, rgba(30,58,138,0.12) 0%, #080e1a 65%);
  cursor: default;
}
.mmEmpty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e293b;
  font-size: 15px;
  font-weight: 500;
  pointer-events: none;
  letter-spacing: 0.02em;
}
.mmSvg {
  width: 100%;
  height: 100%;
  display: block;
  min-height: 500px;
}
/* Inline edit input */
.mmInlineEdit {
  position: absolute;
  z-index: 100;
  background: #1e3a5f;
  border: 2px solid #4e9cf5;
  border-radius: 999px;
  color: #e2e8f0;
  text-align: center;
  padding: 0 12px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(78,156,245,0.3);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  box-sizing: border-box;
  transition: box-shadow 0.15s;
}
.mmInlineEdit:focus { box-shadow: 0 0 0 4px rgba(78,156,245,0.5); }
/* Rename modal */
.mmRenameModal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.mmRenameModal.hidden { display: none !important; }
.mmRenameModalInner {
  background: #111827;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 24px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.mmRenameModalInner h3 { margin: 0; font-size: 15px; color: #e2e8f0; }
.mmRenameModalInner input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #e2e8f0;
  font-size: 14px;
  outline: none;
}
.mmRenameModalInner input:focus { border-color: #4e9cf5; }
.mmRenameActions { display: flex; gap: 8px; justify-content: flex-end; }

/* Delete confirm overlay */
.mmDeleteConfirm {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  animation: mmFadeIn 0.15s ease;
}
@keyframes mmFadeIn { from{opacity:0} to{opacity:1} }
.mmDeleteConfirmInner {
  background: #111827;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 22px 24px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7);
}
.mmDeleteConfirmTitle {
  font-size: 15px;
  font-weight: 700;
  color: #e2e8f0;
}
.mmDeleteConfirmMsg {
  font-size: 13px;
  color: #64748b;
}
.mmDeleteConfirmBtns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}


#progress.showProgressSubjectSelect #progressSubjectWrap{
	display:flex;
}

.progressScopeRow select{
	min-width:160px;
}

.flashcardModal{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,0.72);
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	pointer-events:none;
	transition:opacity 160ms ease;
	z-index:1100;
}

.flashcardModal.show{
	opacity:1;
	pointer-events:auto;
}

.flashcardModal.hidden{
	display:none;
}

.flashcardModalContent{
	width:min(980px, 92vw);
	min-height:60vh;
	max-height:86vh;
	background:linear-gradient(180deg, rgba(20,22,24,0.98), rgba(14,16,18,0.98));
	border:1px solid rgba(255,255,255,0.08);
	border-radius:20px;
	padding:20px 22px 24px 22px;
	box-shadow:0 18px 48px rgba(0,0,0,0.7);
	transform:translateY(12px) scale(0.98);
	transition:transform 180ms ease;
	display:flex;
	flex-direction:column;
	gap:14px;
	overflow:auto;
}

.flashcardModal.show .flashcardModalContent{
	transform:translateY(0) scale(1);
}

.flashcardModalHeader{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}

.flashcardModalTitle{
	font-size:22px;
	font-weight:800;
	letter-spacing:0.3px;
}

.flashcardQuestion{
	font-size:20px;
	font-weight:700;
	padding:16px 18px;
	border-radius:14px;
	background:rgba(255,255,255,0.04);
	border:1px solid rgba(255,255,255,0.08);
}

.flashcardAnswer{
	font-size:18px;
	padding:14px 16px;
	border-radius:12px;
	background:rgba(255,255,255,0.03);
	border:1px solid rgba(255,255,255,0.06);
}

.flashcardRevealBtn{
	align-self:flex-start;
}

.flashcardActions{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}

.flashcardRate{
	min-width:140px;
	text-align:left;
	padding:10px 14px;
	display:flex;
	flex-direction:column;
	gap:4px;
}

.flashcardRateTitle{
	font-weight:700;
	font-size:14px;
}

.flashcardRateMeta{
	font-size:12px;
	color:#b9c2cc;
}

.notesHeader{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}

/* When a drawing panel is fullscreen, hide the page header
   so the whiteboard can use the space. */
.fullscreen-draw header{ display:none !important }
.fullscreen-draw .notesHeader{ display:none !important }
.fullscreen-draw #notesBreadcrumb{ display:none !important }
.fullscreen-draw .notesHeaderActions{ display:none !important }

/* Make the fullscreen draw panel use flex layout and let the canvas
   grow to fill the viewport so content isn't zoomed, just more area */
.drawPanel.fullscreen{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
	background:rgba(10,10,10,0.98);
	z-index:2147483000;
	border-radius:0;
	margin:0;
  padding:8px 0 0 0 !important;
	display:flex;
	flex-direction:column;
}

/* Column mode: move the panel into a left column, keeping the rest of the page visible */
.column-draw .drawPanel.column-mode,
.drawPanel.column-mode{
	position:fixed;
	top:110px; /* leave space for top header/controls */
	/* anchor column to right side by default so it docks beside the notes card */
	right:16px;
	left:auto;
	width:640px;
	max-width: calc(100vw - 120px);
	height:calc(100vh - 140px);
	z-index:1200;
	border-radius:12px;
	padding:12px;
}

/* Inline column mode: keep the panel inside the notes/whiteboard card and expand it in-place */
.drawPanel.column-mode-inline{
	position:relative !important;
	left:auto !important;
	right:auto !important;
	transform:none !important;
	width:100% !important;
	max-width:none !important;
	height:auto !important;
	margin:0 !important;
	padding:12px !important;
}

.drawPanel.column-mode-inline .drawCanvas{
	width:100% !important;
	height:60vh !important;
	display:block !important;
}

/* When inline column mode is active, make the whiteboard card take the available width */
.column-draw #notesContent > .whiteboard-card{
	width: calc(100% - 32px) !important;
	max-width: none !important;
	margin: 0 auto 8px auto !important;
}

/* Make draw toolbar buttons match notes/header pill style when in column mode */
.column-draw .drawTools .drawToolBtn,
.column-draw .drawTools .drawAction,
.drawPanel.column-mode .drawTools .drawToolBtn,
.drawPanel.column-mode .drawTools .drawAction{
	background: var(--pill) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 22px !important;
	box-shadow: 0 6px 14px rgba(0,0,0,0.6) !important;
	padding: 8px 14px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
}

/* When in column mode, keep the toolbar arranged horizontally and centered */
.drawPanel.column-mode .drawTools{
	display:flex !important;
	flex-wrap:wrap !important;
	gap:8px !important;
	justify-content:center !important;
	align-items:center !important;
	margin-bottom:8px !important;
}

/* When in column mode, hide unrelated sections to declutter */
.column-draw #notesContent > .notesSectionCard:not(.whiteboard-card){
	display:none !important;
}

.notesHeaderActions{
	display:flex;
	gap:10px;
}

.notesGrid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
	gap:12px;
	margin-top:16px;
}

.notesCard{
	padding:14px;
	border-radius:14px;
	background:rgba(255,255,255,0.03);
	border:1px solid rgba(255,255,255,0.08);
	display:flex;
	flex-direction:column;
	gap:10px;
	position:relative;
}

.notesCardTitle{
	font-weight:700;
	font-size:16px;
	display:flex;
	align-items:center;
	gap:8px;
}

.deleteIconBtn{
	width:28px;
	height:28px;
	border-radius:50%;
	padding:0;
	line-height:1;
	font-size:16px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}

.notesDeleteBtn{
	position:absolute;
	top:10px;
	right:10px;
}

.deckTable .deleteIconBtn{
	margin-left:6px;
}

.dragHandle {
  cursor: grab;
  color: rgba(255,255,255,0.3);
  font-size: 14px;
  padding: 0 4px;
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
}
.dragHandle:active { cursor: grabbing; }
body.light .dragHandle { color: rgba(0,0,0,0.25); }
tr.deck-row.drag-over td { border-top: 2px solid #4ea1ff; }
tr.deck-row.dragging { opacity: 0.4; }

.notesColorDot{
	width:12px;
	height:12px;
	border-radius:50%;
	background:#4ea1ff;
	box-shadow:0 0 0 2px rgba(255,255,255,0.08);
	flex:0 0 auto;
}

.notesRow{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}

.notesList{
	display:flex;
	flex-direction:column;
	gap:10px;
	margin-top:12px;
}

.notesChapterHeader{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}

.notesSectionCard{
	padding:14px;
	border-radius:14px;
	background:rgba(255,255,255,0.03);
	border:1px solid rgba(255,255,255,0.08);
	margin-top:12px;
	width:100%;
	box-sizing:border-box;
}

/* Tab pill toggle for notes chapter view */
.notesTabBar{
	margin-bottom:4px;
	width:100%;
}
.notesTabPill{
	display:inline-flex;
	background:rgba(255,255,255,0.06);
	border-radius:999px;
	padding:3px;
	gap:2px;
}
.notesTabBtn{
	background:transparent;
	border:none;
	color:rgba(255,255,255,0.55);
	font-size:13px;
	font-weight:500;
	padding:6px 18px;
	border-radius:999px;
	cursor:pointer;
	transition:background 0.18s, color 0.18s;
}
.notesTabBtn:hover{
	color:#fff;
	background:rgba(255,255,255,0.1);
}
.notesTabBtn.active{
	background:#fff;
	color:#111;
}

/* Text notes textarea */
.notesTextArea{
	width:100%;
	min-height:520px;
	background:rgba(0,0,0,0.25);
	border:1px solid rgba(255,255,255,0.1);
	color:#e6eef9;
	border-radius:10px;
	padding:14px 16px;
	font-size:14px;
	line-height:1.7;
	resize:vertical;
	box-sizing:border-box;
	font-family:inherit;
	margin-top:10px;
	scrollbar-width:thin;
	scrollbar-color:rgba(99,179,255,0.25) transparent;
}
.notesTextArea:focus{
	outline:none;
	border-color:rgba(99,179,255,0.4);
}
.notesTextArea::-webkit-scrollbar{
	width:6px;
}
.notesTextArea::-webkit-scrollbar-track{
	background:transparent;
}
.notesTextArea::-webkit-scrollbar-thumb{
	background:rgba(99,179,255,0.25);
	border-radius:999px;
}
.notesTextArea::-webkit-scrollbar-thumb:hover{
	background:rgba(99,179,255,0.45);
}

.notesTextarea{
	width:100%;
	min-height:160px;
	background:rgba(0,0,0,0.25);
	border:1px solid rgba(255,255,255,0.08);
	color:#fff;
	border-radius:10px;
	padding:10px;
	font-size:14px;
	resize:vertical;
}

.drawPanel{
	margin-top:10px;
	background:rgba(0,0,0,0.2);
	border:1px solid rgba(255,255,255,0.08);
	border-radius:12px;
	padding:10px;
	display:flex;
	flex-direction:column;
}

.drawPanel.fullscreen{
	position:fixed;
	inset:0;
	background:rgba(10,10,10,0.98);
	z-index:1200;
	border-radius:0;
	margin:0;
  padding:8px 0 0 0 !important;
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
}

.drawTools{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	align-items:center;
	margin-bottom:8px;
}

.drawToolBtn,
.drawAction{
	padding:6px 12px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,0.1);
	background:rgba(255,255,255,0.04);
	color:#fff;
	font-weight:600;
	font-size:12px;
}

.drawAction.exitFullscreen{ background:#ff6b6b; border-color:rgba(255,255,255,0.06); }
.drawAction.exitFullscreen:hover{ transform:none; background:#ff4d4d }

.drawToolBtn.active{
	background:#fff;
	color:#000;
}

.drawColor{
	width:34px;
	height:28px;
	padding:0;
	border-radius:8px;
	border:1px solid rgba(255,255,255,0.2);
	background:transparent;
}

.drawSize{
	width:120px;
}

.drawCanvas{
	width:100%;
	height:300px;
	border-radius:10px;
	background:#0b0d0f;
	flex:1 1 auto;
}

.drawPanel.fullscreen .drawCanvas{
	/* Reserve space for the controls (approx 120px) then fill remaining viewport */
  height: calc(100vh - 110px);
  width: 100vw !important;
	border-radius:12px;
	display:block;
}

.drawPanel.fullscreen .drawTools{
  padding:0 8px;
}

/* Hide other notes/card sections when whiteboard is fullscreen */
.fullscreen-draw #notesContent > .notesSectionCard:not(.whiteboard-card){
	display:none !important;
}

/* Make the whiteboard card expand to full width in fullscreen */
.fullscreen-draw #notesContent > .whiteboard-card{
	width:100%;
	margin:0 auto 8px auto;
	max-width:none;
}


.drawPanel{
	position:relative;
}

.bubbleLayer{
	position:absolute;
	left:0;
	right:0;
	top:54px;
	bottom:0;
	pointer-events:auto;
}

.textBubble{
	position:absolute;
	background:#ffffff;
	color:#111111;
	border-radius:12px;
	padding:6px 8px 8px 8px;
	min-width:160px;
	min-height:90px;
	box-shadow:0 12px 26px rgba(0,0,0,0.35);
	border:1px solid rgba(0,0,0,0.08);
	resize:both;
	overflow:hidden;
	pointer-events:auto;
}

.textBubble .bubbleHandle{
	font-size:10px;
	color:#6b6f75;
	text-align:right;
	cursor:move;
	user-select:none;
	margin-bottom:2px;
}

.textBubble .bubbleContent{
	font-size:13px;
	line-height:1.4;
	outline:none;
	white-space:pre-wrap;
}
.textBubble .bubbleDeleteBtn{
	position:absolute;
	right:6px;
	top:6px;
	background:transparent;
	border:none;
	color:#fff;
	font-size:16px;
	cursor:pointer;
	padding:2px 6px;
}
.textBubble .bubbleDeleteBtn:hover{ color:#ff8080 }
.notesCardList{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
	gap:10px;
	margin-top:8px;
}

.notesCardItem{
	padding:10px;
	border-radius:12px;
	border:1px solid rgba(255,255,255,0.08);
	background:rgba(255,255,255,0.03);
	display:flex;
	flex-direction:column;
	gap:8px;
	cursor:pointer;
}

.notesCardThumb{
	width:100%;
	height:120px;
	border-radius:10px;
	background:#0b0d0f;
}

/* ── Notes Redesign: Search + Accordion + Recents ──────────────────────── */
.notesSearchWrap{margin:14px 0 12px;}
.notesSearchInput{
	width:100%;box-sizing:border-box;
	padding:11px 16px 11px 40px;
	border-radius:12px;
	border:1px solid rgba(255,255,255,0.1);
	background:rgba(255,255,255,0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff66' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.242 1.656a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E") no-repeat 12px center;
	color:inherit;font-size:15px;
	transition:border-color .2s,background .2s;
}
.notesSearchInput:focus{outline:none;border-color:rgba(78,161,255,.5);background-color:rgba(255,255,255,.08)}
body.light .notesSearchInput{background-color:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:#1a1a2e}
body.light .notesSearchInput:focus{background-color:rgba(0,0,0,.07);border-color:rgba(78,161,255,.6)}

.notesRecentSection{margin-bottom:18px;}
.notesRecentLabel{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:8px;}
body.light .notesRecentLabel{color:rgba(0,0,0,.4);}
.notesRecentChips{display:flex;flex-wrap:wrap;gap:8px;}
.notesRecentChip{
	display:flex;flex-direction:column;align-items:flex-start;
	padding:8px 12px;border-radius:10px;
	border-left:3px solid #4ea1ff;
	border-top:1px solid rgba(255,255,255,.07);
	border-right:1px solid rgba(255,255,255,.07);
	border-bottom:1px solid rgba(255,255,255,.07);
	background:rgba(255,255,255,.04);
	cursor:pointer;transition:background .15s,transform .1s;text-align:left;max-width:210px;
}
.notesRecentChip:hover{background:rgba(255,255,255,.09);transform:translateY(-1px);}
body.light .notesRecentChip{background:rgba(0,0,0,.03);border-top-color:rgba(0,0,0,.08);border-right-color:rgba(0,0,0,.08);border-bottom-color:rgba(0,0,0,.08);}
body.light .notesRecentChip:hover{background:rgba(0,0,0,.07);}
.notesRecentChipPath{font-size:10px;color:rgba(255,255,255,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;display:block;}
.notesRecentChipName{font-size:13px;font-weight:600;color:rgba(255,255,255,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;display:block;}
body.light .notesRecentChipPath{color:rgba(0,0,0,.45);}
body.light .notesRecentChipName{color:rgba(0,0,0,.85);}

.notesEmpty{margin-top:24px;font-size:14px;}

/* Accordion container */
.notesAccordion{display:flex;flex-direction:column;gap:8px;}

/* Subject block */
.notesAccBlock{
	border-radius:14px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.08);
	overflow:hidden;
	transition:box-shadow .2s;
}
.notesAccBlock:hover{box-shadow:0 4px 22px rgba(0,0,0,.35);}
body.light .notesAccBlock{background:rgba(0,0,0,.025);border-color:rgba(0,0,0,.1);}
body.light .notesAccBlock:hover{box-shadow:0 4px 20px rgba(0,0,0,.1);}

/* Subject row header */
.notesAccSubjectHeader{
	display:flex;align-items:center;justify-content:space-between;
	padding:12px 14px 12px 0;
	border-left:3px solid var(--acc-color,#4ea1ff);
	background:rgba(255,255,255,.02);
	gap:6px;
}
.notesAccSubjectHeader:hover .notesAccMainClick{background:rgba(255,255,255,.03);}
.notesAccMainClick{
	display:flex;align-items:center;gap:10px;
	flex:1;padding:2px 8px 2px 14px;cursor:pointer;user-select:none;
	border-radius:8px;transition:background .15s;
}
.notesAccColorDot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.notesAccTitle{font-weight:600;font-size:15px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notesAccMeta{font-size:12px;color:rgba(255,255,255,.32);white-space:nowrap;flex-shrink:0;}
body.light .notesAccMeta{color:rgba(0,0,0,.38);}
.notesAccChevron{font-size:11px;color:rgba(255,255,255,.35);transition:transform .2s;flex-shrink:0;}
.notesAccChevron.open{transform:rotate(0deg);}
body.light .notesAccChevron{color:rgba(0,0,0,.35);}

/* Action buttons strip */
.notesAccBtns{display:flex;align-items:center;gap:2px;padding-right:6px;flex-shrink:0;}
.notesAccIconBtn{
	width:30px;height:30px;border-radius:8px;padding:0;font-size:13px;
	display:inline-flex;align-items:center;justify-content:center;
	background:transparent;border:none;cursor:pointer;
	color:rgba(255,255,255,.45);transition:background .15s,color .15s;
}
.notesAccIconBtn:hover{background:rgba(255,255,255,.1);color:#fff;}
.notesAccIconBtnDel:hover{background:rgba(255,80,80,.15);color:#ff8080;}
body.light .notesAccIconBtn{color:rgba(0,0,0,.45);}
body.light .notesAccIconBtn:hover{background:rgba(0,0,0,.08);color:#000;}
body.light .notesAccIconBtnDel:hover{background:rgba(200,0,0,.08);color:#c00;}

/* Expandable panel with smooth animation */
.notesAccExpandable{
	max-height:0;overflow:hidden;
	transition:max-height .28s cubic-bezier(.4,0,.2,1);
}
.notesAccExpandable.open{max-height:9999px;}

/* Topic block (inside subject expandable) */
.notesAccTopicBlock{
	border-top:1px solid rgba(255,255,255,.06);
}
body.light .notesAccTopicBlock{border-top-color:rgba(0,0,0,.07);}
.notesAccTopicHeader{
	display:flex;align-items:center;justify-content:space-between;
	padding:9px 14px 9px 24px;gap:6px;
	background:rgba(255,255,255,.015);
	transition:background .15s;
}
.notesAccTopicHeader:hover{background:rgba(255,255,255,.04);}
body.light .notesAccTopicHeader{background:rgba(0,0,0,.01);}
body.light .notesAccTopicHeader:hover{background:rgba(0,0,0,.04);}
.notesAccTopicHeader .notesAccMainClick{padding-left:4px;}
.notesAccTopicIcon,.notesAccChapterIcon{font-size:14px;flex-shrink:0;}

/* Chapter row (inside topic expandable) */
.notesAccChaptersWrap{padding-left:8px;}
.notesAccChapterRow{
	display:flex;align-items:center;justify-content:space-between;
	padding:8px 14px 8px 40px;gap:8px;
	border-top:1px solid rgba(255,255,255,.04);
	transition:background .15s;
}
.notesAccChapterRow:hover{background:rgba(255,255,255,.04);}
body.light .notesAccChapterRow{border-top-color:rgba(0,0,0,.05);}
body.light .notesAccChapterRow:hover{background:rgba(0,0,0,.04);}
.notesAccChapterMain{display:flex;align-items:center;gap:8px;flex:1;cursor:default;}
.notesAccChapterTitle{font-size:14px;font-weight:500;}
.notesAccOpenBtn{
	padding:5px 14px;border-radius:8px;font-size:13px;font-weight:600;
	background:rgba(78,161,255,.15);color:#4ea1ff;border:1px solid rgba(78,161,255,.25);
	cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;
}
.notesAccOpenBtn:hover{background:rgba(78,161,255,.28);color:#90c8ff;}
body.light .notesAccOpenBtn{background:rgba(78,161,255,.12);color:#1a6fcc;border-color:rgba(78,161,255,.3);}
body.light .notesAccOpenBtn:hover{background:rgba(78,161,255,.22);color:#0d5aad;}

/* Inline add form (shown inside expandable) */
.notesInlineAddForm{
	display:flex;align-items:center;gap:8px;
	padding:10px 14px 10px 40px;
	border-top:1px solid rgba(255,255,255,.06);
	background:rgba(255,255,255,.03);
	animation:fadeInDown .15s ease;
}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.notesInlineInput{
	flex:1;padding:7px 12px;border-radius:8px;
	border:1px solid rgba(255,255,255,.12);
	background:rgba(255,255,255,.07);color:inherit;font-size:14px;
}
.notesInlineInput:focus{outline:none;border-color:rgba(78,161,255,.5);}
body.light .notesInlineInput{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:#1a1a2e;}
.notesInlineAddBtn{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;}
.notesInlineCancelBtn{padding:7px 10px;border-radius:8px;font-size:13px;cursor:pointer;}

/* ── Chapter Page Redesign ──────────────────────────────────────────────── */
.chapPage{display:flex;flex-direction:column;gap:14px;padding-bottom:80px;/* space for FAB */}

/* Section card */
.chapSection{
	border-radius:16px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.08);
	overflow:hidden;
	transition:box-shadow .2s;
}
body.light .chapSection{background:rgba(0,0,0,.025);border-color:rgba(0,0,0,.09);}
.chapSection:hover{box-shadow:0 6px 28px rgba(0,0,0,.35);}
body.light .chapSection:hover{box-shadow:0 4px 22px rgba(0,0,0,.1);}

/* Section header */
.chapSectionHeader{
	display:flex;align-items:center;justify-content:space-between;
	padding:12px 16px;gap:8px;
	border-bottom:1px solid rgba(255,255,255,.06);
	cursor:pointer;user-select:none;
	transition:background .15s;
}
.chapSectionHeader:hover{background:rgba(255,255,255,.03);}
body.light .chapSectionHeader{border-bottom-color:rgba(0,0,0,.07);}
body.light .chapSectionHeader:hover{background:rgba(0,0,0,.03);}
.chapSectionTitleRow{display:flex;align-items:center;gap:8px;flex:1;}
.chapSectionIcon{font-size:16px;line-height:1;}
.chapSectionTitle{font-weight:700;font-size:15px;}
.chapSectionBadge{
	font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;
	background:rgba(255,255,255,.1);color:rgba(255,255,255,.65);
}
body.light .chapSectionBadge{background:rgba(0,0,0,.07);color:rgba(0,0,0,.55);}
.chapSectionChevron{font-size:11px;color:rgba(255,255,255,.3);transition:transform .22s;margin-left:4px;}
body.light .chapSectionChevron{color:rgba(0,0,0,.3);}
.chapSectionChevron.open{transform:rotate(90deg);}
.chapSectionActions{display:flex;align-items:center;gap:6px;}
.chapSecBtn{
	padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;
	border:1px solid rgba(255,255,255,.15);
	background:rgba(255,255,255,.07);cursor:pointer;
	transition:background .15s,border-color .15s;white-space:nowrap;
}
.chapSecBtn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);}
body.light .chapSecBtn{border-color:rgba(0,0,0,.12);background:rgba(0,0,0,.04);}
body.light .chapSecBtn:hover{background:rgba(0,0,0,.09);}

/* Section expandable body */
.chapSectionBody{
	max-height:0;overflow:hidden;
	transition:max-height .3s cubic-bezier(.4,0,.2,1),padding .2s;
	padding:0 16px;
}
.chapSectionBody.open{max-height:3000px;padding:14px 16px;}
.chapSectionBody.openForced{max-height:none;overflow:visible;padding:14px 16px;}

/* Whiteboard collapsed preview */
.chapWbCollapsedRow{
	display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;
	transition:background .15s;
}
.chapWbCollapsedRow:hover{background:rgba(255,255,255,.04);}
body.light .chapWbCollapsedRow:hover{background:rgba(0,0,0,.04);}
.chapWbThumb{
	width:80px;height:56px;border-radius:8px;
	border:1px solid rgba(255,255,255,.12);
	background:#0b0d10;flex-shrink:0;
	object-fit:cover;
}
body.light .chapWbThumb{background:#f0f2f5;border-color:rgba(0,0,0,.1);}
.chapWbThumbInfo{flex:1;}
.chapWbThumbTitle{font-weight:600;font-size:14px;margin-bottom:3px;}
.chapWbThumbMeta{font-size:12px;color:rgba(255,255,255,.4);}
body.light .chapWbThumbMeta{color:rgba(0,0,0,.4);}
.chapWbOpenBtn{
	padding:7px 16px;border-radius:10px;font-size:13px;font-weight:700;
	background:rgba(78,161,255,.18);color:#4ea1ff;
	border:1px solid rgba(78,161,255,.3);cursor:pointer;
	transition:background .15s;white-space:nowrap;
}
.chapWbOpenBtn:hover{background:rgba(78,161,255,.32);color:#90c8ff;}
body.light .chapWbOpenBtn{background:rgba(78,161,255,.1);color:#1a6fcc;border-color:rgba(78,161,255,.25);}

/* Whiteboard expanded nav bar */
.chapWbNav{
	display:flex;align-items:center;flex-wrap:wrap;gap:6px;
	padding:10px 16px;
	border-bottom:1px solid rgba(255,255,255,.06);
}
body.light .chapWbNav{border-bottom-color:rgba(0,0,0,.07);}

.chapWbPanel .drawPanel{min-height:560px}
.chapWbPanel .drawCanvas{
  width:100% !important;
  height:clamp(420px, 64vh, 780px) !important;
  min-height:420px;
}

/* Empty state */
.chapEmpty{
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	padding:32px 16px;gap:10px;
	color:rgba(255,255,255,.35);text-align:center;
}
body.light .chapEmpty{color:rgba(0,0,0,.38);}
.chapEmptyIcon{font-size:32px;opacity:.5;}
.chapEmptyText{font-size:14px;font-weight:500;}
.chapEmptyHint{font-size:12px;opacity:.7;}

/* Card/note grid */
.chapItemGrid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
	gap:10px;
	margin-top:0;
}
.chapItem{
	border-radius:12px;
	border:1px solid rgba(255,255,255,.08);
	background:rgba(255,255,255,.04);
	padding:10px;cursor:pointer;
	transition:background .15s,transform .12s,box-shadow .15s;
	display:flex;flex-direction:column;gap:8px;
}
.chapItem:hover{background:rgba(255,255,255,.09);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.4);}
body.light .chapItem{background:rgba(0,0,0,.025);border-color:rgba(0,0,0,.09);}
body.light .chapItem:hover{background:rgba(0,0,0,.07);box-shadow:0 6px 18px rgba(0,0,0,.1);}
.chapItemTitle{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chapItemCanvas{width:100%;height:80px;border-radius:8px;background:rgba(0,0,0,.3);display:block;}

/* Text notes section */
.chapTextArea{
	width:100%;box-sizing:border-box;
	min-height:220px;resize:vertical;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.1);
	border-radius:10px;padding:12px 14px;
	font-size:14px;line-height:1.7;color:inherit;
	font-family:inherit;transition:border-color .2s;
}
.chapTextArea:focus{outline:none;border-color:rgba(78,161,255,.5);}
body.light .chapTextArea{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.1);}

.typedNotesShell{display:flex;flex-direction:column;gap:10px}
.typedNotesToolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.typedNotesEditor{
  width:100%;
  min-height:420px;
  max-height:68vh;
  overflow:auto;
  background:rgba(0,0,0,0.26);
  border:1px solid rgba(255,255,255,0.12);
  color:#e6eef9;
  border-radius:12px;
  padding:14px 16px;
  font-size:14px;
  line-height:1.7;
  box-sizing:border-box;
  outline:none;
}
.typedNotesEditor:empty:before{content:attr(data-placeholder);color:rgba(255,255,255,0.35)}
.typedNotesEditor:focus{border-color:rgba(78,161,255,0.48)}
.typedNotesEditor img{max-width:100%;height:auto;border-radius:8px;display:block;margin:0}
/* Markdown-rendered content inside editor */
.typedNotesEditor h1,.typedNotesEditor h2{font-size:1.25em;font-weight:700;margin:1.1em 0 .4em;color:#e6eef9;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:.25em}
.typedNotesEditor h3{font-size:1.08em;font-weight:700;margin:.9em 0 .3em;color:#9ad0ff}
.typedNotesEditor h4{font-size:.97em;font-weight:700;margin:.7em 0 .25em;color:#b9c2cc}
.typedNotesEditor p{margin:.35em 0}
.typedNotesEditor ul,.typedNotesEditor ol{margin:.3em 0 .3em 1.4em;padding:0}
.typedNotesEditor li{margin:.2em 0}
.typedNotesEditor strong{font-weight:700;color:#fff}
.typedNotesEditor em{font-style:italic}
.typedNotesEditor code{background:rgba(0,0,0,0.35);border-radius:4px;padding:1px 5px;font-size:.9em;font-family:monospace}
.typedNotesEditor pre{background:rgba(0,0,0,0.4);border-radius:8px;padding:10px;overflow-x:auto;margin:.5em 0}
.typedNotesEditor blockquote{border-left:3px solid rgba(78,161,255,0.5);margin:.4em 0;padding-left:.8em;color:#9aa3ad}
body.light .typedNotesEditor h1,body.light .typedNotesEditor h2{color:#1A1A2E;border-bottom-color:rgba(0,0,0,0.1)}
body.light .typedNotesEditor h3{color:#1567cc}
body.light .typedNotesEditor h4{color:#4A5568}
body.light .typedNotesEditor strong{color:#000}
body.light .typedNotesEditor code{background:rgba(0,0,0,0.07)}
body.light .typedNotesEditor pre{background:rgba(0,0,0,0.05)}
body.light .typedNotesEditor blockquote{border-left-color:rgba(58,123,255,0.4);color:#6b7280}
.typedImageWrap{
  position:relative;
  display:inline-block;
  max-width:100%;
  margin:8px 0;
  border-radius:10px;
  overflow:hidden;
  border:1px solid transparent;
}
.typedImageWrap.active{border-color:rgba(78,161,255,0.5)}
.typedImageDelete{
  position:absolute;
  top:6px;
  right:6px;
  width:24px;
  height:24px;
  border-radius:999px;
  border:none;
  background:rgba(12,18,33,0.8);
  color:#fff;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease;
}
.typedImageWrap:hover .typedImageDelete,
.typedImageWrap.active .typedImageDelete{
  opacity:1;
  pointer-events:auto;
}
.typedImageDelete:hover{background:rgba(220,53,69,0.92)}
body.light .typedNotesEditor{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.12);color:#1a1a2e}
body.light .typedNotesEditor:empty:before{color:rgba(0,0,0,0.35)}
.typedNotesHint{font-size:12px;color:rgba(255,255,255,0.45)}
body.light .typedNotesHint{color:rgba(0,0,0,0.45)}

/* AI Expand box */
.typedAiExpandBox{
  border:1.5px solid rgba(78,161,255,0.4);
  border-radius:12px;
  background:rgba(78,161,255,0.07);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  animation:fadeInDown .18s ease;
}
.typedAiExpandBox.hidden{display:none}
.typedAiExpandHeader{display:flex;align-items:center;justify-content:space-between}
.typedAiExpandTitle{font-size:13px;font-weight:700;color:#9ad0ff}
.typedAiExpandClose{background:none;border:none;color:rgba(255,255,255,0.45);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:6px;line-height:1}
.typedAiExpandClose:hover{color:#fff;background:rgba(255,255,255,0.08)}
.typedAiExpandInput{background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.1);border-radius:8px;color:inherit;font-size:13px;padding:9px 12px;resize:vertical;outline:none;font-family:inherit;transition:border-color .15s}
.typedAiExpandInput:focus{border-color:rgba(78,161,255,0.55);background:rgba(255,255,255,0.09)}
.typedAiExpandActions{display:flex;align-items:center;gap:12px}
.typedAiExpandStatus{font-size:12px;color:rgba(255,255,255,0.6)}
body.light .typedAiExpandBox{background:rgba(58,123,255,0.06);border-color:rgba(58,123,255,0.3)}
body.light .typedAiExpandTitle{color:#1567cc}
body.light .typedAiExpandInput{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.12);color:#1a1a2e}
body.light .typedAiExpandInput:focus{border-color:rgba(58,123,255,0.5)}
body.light .typedAiExpandClose{color:rgba(0,0,0,0.4)}
body.light .typedAiExpandClose:hover{color:#000;background:rgba(0,0,0,0.06)}
body.light .typedAiExpandStatus{color:rgba(0,0,0,0.55)}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

.typedNotesFsExit{
  position:fixed;
  top:12px;
  right:12px;
  z-index:2147483647;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(13,24,43,0.85);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.typedNotesFsExit:hover{background:rgba(239,68,68,0.9)}

.typedNotesShell:fullscreen{background:#0f1724;padding:14px;box-sizing:border-box;overflow:auto}
.typedNotesShell:fullscreen .typedNotesEditor{max-height:none;min-height:calc(100vh - 120px)}

.drawPanel:fullscreen,
.drawPanel:-webkit-full-screen{
  position:fixed !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  margin:0 !important;
  padding:8px 0 0 0 !important;
  background:rgba(10,10,10,0.98);
  z-index:2147483600 !important;
}

.drawPanel:fullscreen .drawCanvas,
.drawPanel:-webkit-full-screen .drawCanvas{
  width:100vw !important;
  height:calc(100vh - 110px) !important;
  max-width:none !important;
  display:block !important;
}

.drawPanel:fullscreen .drawTools,
.drawPanel:-webkit-full-screen .drawTools{
  padding:0 8px !important;
}

@media (max-width: 760px){
  .notesModeSwitch{width:100%;justify-content:stretch}
  .notesModeBtn{flex:1}
  .typedNotesEditor{min-height:320px;max-height:none}
}

/* Floating Action Button */
.chapFabWrap{
	position:fixed;right:24px;bottom:28px;z-index:999;
	display:flex;flex-direction:column-reverse;align-items:flex-end;gap:10px;
}
.chapFab{
	width:52px;height:52px;border-radius:50%;
	background:linear-gradient(135deg,#4ea1ff,#7c5cfc);
	color:#fff;font-size:24px;font-weight:300;
	box-shadow:0 6px 24px rgba(78,161,255,.45);
	border:none;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	transition:transform .2s,box-shadow .2s;
	line-height:1;
}
.chapFab:hover{transform:scale(1.08);box-shadow:0 8px 32px rgba(78,161,255,.65);}
.chapFab.open{transform:rotate(45deg);}
.chapFabMenu{
	display:flex;flex-direction:column;gap:8px;
	animation:fabMenuIn .18s ease;
}
@keyframes fabMenuIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.chapFabItem{
	display:flex;align-items:center;gap:10px;
	background:rgba(30,35,48,.95);
	border:1px solid rgba(255,255,255,.12);
	border-radius:12px;padding:9px 14px;
	cursor:pointer;white-space:nowrap;
	font-size:14px;font-weight:600;color:#e8f0fe;
	box-shadow:0 4px 16px rgba(0,0,0,.5);
	transition:background .15s;
}
.chapFabItem:hover{background:rgba(50,60,80,.98);}
body.light .chapFabItem{background:rgba(250,251,255,.97);border-color:rgba(0,0,0,.1);color:#1a2540;box-shadow:0 4px 14px rgba(0,0,0,.12);}
body.light .chapFabItem:hover{background:#f0f4ff;}
.chapFabItemIcon{font-size:16px;width:22px;text-align:center;}

.noteEditModal{
	width:min(980px, 94vw);
	max-height:calc(100vh - 32px);
	overflow-y:auto;
}

#noteEditModal,
#noteCardModal{
	align-items:flex-start;
}

.noteEditModal .drawCanvas{
	height:clamp(220px, 35vh, 360px);
	min-height:220px;
}

.noteModalHeader{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}

/* ═══ TODO KANBAN ══════════════════════════════════════════════════════════════ */

.todoKanbanHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.todoKanbanFilterSelect {
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
}

.todoKanbanBoard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
  height: calc(100vh - 180px);
  overflow: hidden;
}

.todoKanbanCol {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
}

.todoKanbanColHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.todoKanbanColHeaderOverdue { background: rgba(255,80,80,0.12); color: #ff7070; }
.todoKanbanColHeaderTodo    { background: rgba(90,120,255,0.12); color: #8fa8ff; }
.todoKanbanColHeaderInProgress { background: rgba(255,180,50,0.12); color: #ffcd5a; }
.todoKanbanColHeaderDone    { background: rgba(60,210,120,0.12); color: #5ee89b; }

.todoKanbanCount {
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
}

.todoKanbanList {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.todoKanbanEmpty {
  font-size: 12px;
  color: var(--fn-muted, #666);
  text-align: center;
  padding: 24px 8px;
  opacity: 0.6;
}

.todoKanbanCard {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.todoKanbanCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.todoKanbanCard.todoKanbanCardDone {
  opacity: 0.55;
}

.todoKanbanCardTitle {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
}

.todoKanbanCardDesc {
  font-size: 12px;
  color: var(--fn-muted, #888);
  line-height: 1.4;
}

.todoKanbanCardMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.todoKanbanSubjectTag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.todoKanbanDue {
  font-size: 11px;
  color: var(--fn-muted, #888);
}

.todoKanbanCardActions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.todoKanbanBtn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: none;
  height: auto;
  min-width: unset;
}

.todoKanbanBtn:hover { background: rgba(255,255,255,0.14); }
.todoKanbanBtnProgress { border-color: rgba(255,180,50,0.4); color: #ffcd5a; }
.todoKanbanBtnDone     { border-color: rgba(60,210,120,0.4); color: #5ee89b; }
.todoKanbanBtnDelete   { border-color: rgba(255,80,80,0.3); color: #ff7070; margin-left: auto; }

@media (max-width: 900px) {
  .todoKanbanBoard { grid-template-columns: repeat(2, 1fr); height: auto; }
}
@media (max-width: 600px) {
  .todoKanbanBoard { grid-template-columns: 1fr; }
}

.todoModalContent{
	width:min(560px, 92vw);
}

/* ═══ TIMETABLE ═══════════════════════════════════════════════════════════════ */

/* Section full-height */
#timetable.section{
  flex-direction:column;
  height:100%;
  overflow:hidden;
  padding:0;
}

/* Top bar ------------------------------------------------------------------- */
.ttTopBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px 10px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  flex-shrink:0;
}
.ttTitle{
  font-size:1.1rem;
  font-weight:700;
}
.ttRangeLabel{
  font-size:12px;
  color:var(--text-muted);
  margin-top:2px;
}
.ttTopCenter{
  display:flex;
  align-items:center;
  gap:8px;
}
.ttNavBtn{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  padding:4px 12px;
  font-size:1.1rem;
  cursor:pointer;
  color:var(--text);
  line-height:1.4;
  transition:background .15s;
}
.ttNavBtn:hover{ background:rgba(255,255,255,0.12); }
.ttWeekLabel{
  font-weight:700;
  font-size:0.95rem;
  min-width:200px;
  text-align:center;
}
.ttTodayBtn{
  font-size:12px;
  padding:4px 10px;
  border-radius:8px;
  border:1px solid rgba(78,161,255,0.4);
  background:rgba(78,161,255,0.1);
  color:#4ea1ff;
  cursor:pointer;
  font-weight:600;
  transition:background .15s;
}
.ttTodayBtn:hover{ background:rgba(78,161,255,0.2); }
.ttTopRight{
  display:flex;
  align-items:center;
  gap:8px;
}
.ttViewToggle{
  display:flex;
  gap:4px;
}
.ttSmallBtn{
  font-size:12px;
  padding:5px 12px;
  border-radius:8px;
  font-weight:600;
}

/* Stats bar ----------------------------------------------------------------- */
.ttStatsBar{
  display:flex;
  gap:10px;
  padding:8px 18px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  flex-shrink:0;
  flex-wrap:wrap;
  align-items:center;
}
.ttStatChip{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
}
.ttStatChip .ttStatDot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.ttStatTotal{
  color:var(--text-muted);
  font-size:12px;
  margin-left:auto;
}

/* Main layout --------------------------------------------------------------- */
.timetableLayout{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:0;
  flex:1;
  overflow:hidden;
  min-height:0;
}

/* Sidebar ------------------------------------------------------------------- */
.timetableSidebar{
  border-right:1px solid rgba(255,255,255,0.07);
  padding:14px 12px;
  overflow-y:auto;
  background:rgba(255,255,255,0.015);
}
.timetableSidebar .sidebarTitle{
  font-weight:700;
  font-size:13px;
  margin-bottom:4px;
}
.ttSidebarHint{
  font-size:11px;
  color:var(--text-muted);
  margin-bottom:10px;
}
.timetableSubjects{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.ttSubjectChip{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
  font-size:13px;
  font-weight:600;
  cursor:grab;
  user-select:none;
  display:flex;
  align-items:center;
  gap:6px;
  transition:background .15s;
}
.ttSubjectChip:hover{ background:rgba(255,255,255,0.08); }
.ttSubjectChip:active{ cursor:grabbing; }

/* Grid area ----------------------------------------------------------------- */
.ttGridArea{
  overflow:auto;
  position:relative;
}

/* Week table ---------------------------------------------------------------- */
.timetableGridWrap{
  min-width:0;
}
.ttTable{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.ttTable th{
  position:sticky;
  top:0;
  z-index:10;
  height:44px;
  padding:6px 4px;
  font-size:12px;
  font-weight:700;
  text-align:center;
  background:#181a1b;
  border-bottom:2px solid rgba(255,255,255,0.1);
  border-right:1px solid rgba(255,255,255,0.06);
  white-space:nowrap;
}
.ttTable th.ttToday{
  background:#1a2a3a;
  color:#4ea1ff;
  border-bottom-color:#4ea1ff;
}
.ttTimeCol{
  position:sticky;
  left:0;
  z-index:20;
  width:64px;
  background:#181a1b;
}
.ttTimeTh{
  position:sticky;
  top:0;
  left:0;
  z-index:30 !important;
  background:#181a1b !important;
}
.ttCell{
  height:44px;
  min-width:100px;
  vertical-align:top;
  border:1px solid rgba(255,255,255,0.05);
  padding:2px;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
  transition:background .1s;
}
.ttCell:hover{
  background:rgba(255,255,255,0.035);
}
.ttCell.ttTodayCell{
  background:rgba(78,161,255,0.04);
}
.ttCell.ttTodayCell:hover{
  background:rgba(78,161,255,0.08);
}
.ttCell.dragOver{
  background:rgba(78,161,255,0.15);
  outline:2px solid rgba(78,161,255,0.5);
  outline-offset:-2px;
}
.ttTimeCell{
  height:44px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:4px 8px 0 0;
  font-size:11px;
  color:var(--text-muted);
  box-sizing:border-box;
  background:#181a1b;
  border-right:1px solid rgba(255,255,255,0.07);
  user-select:none;
  position:sticky;
  left:0;
  z-index:5;
}
.ttTimeCell.ttHour{
  font-weight:600;
  color:var(--text);
  font-size:12px;
}

/* Current time line */
.ttNowLine{
  position:absolute;
  left:0; right:0;
  height:2px;
  background:#f05;
  z-index:15;
  pointer-events:none;
}
.ttNowLine::before{
  content:'';
  position:absolute;
  left:-1px;
  top:-4px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#f05;
}

/* Session blocks ------------------------------------------------------------ */
.ttBlock{
  position:absolute;
  left:3px;
  right:3px;
  top:2px;
  border-radius:7px;
  padding:4px 7px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  z-index:2;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
  display:flex;
  flex-direction:column;
  gap:1px;
  border-left:4px solid rgba(0,0,0,0.2);
  transition:filter .1s;
}
.ttBlock:hover{ filter:brightness(1.1); }
.ttBlock.revision{ background:#ffd166; color:#1a1200; }
.ttBlock.free    { background:#68d391; color:#0a2012; }
.ttBlock.other   { background:#76e4f7; color:#041e22; }
.ttBlockTitle{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px;
}
.ttBlock small{
  font-size:10px;
  opacity:0.75;
}
.ttBlockRecur{
  font-size:9px;
  opacity:0.65;
  margin-top:1px;
}

/* Month view ---------------------------------------------------------------- */
.timetableMonth{
  padding:14px;
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px;
}
.ttMonthHeader{
  font-size:11px;
  font-weight:700;
  text-align:center;
  padding:5px 4px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.ttMonthCell{
  padding:7px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.025);
  min-height:80px;
  font-size:12px;
  cursor:pointer;
  transition:background .1s;
}
.ttMonthCell:hover{ background:rgba(255,255,255,0.05); }
.ttMonthCell.ttMonthToday{
  border-color:#4ea1ff;
  background:rgba(78,161,255,0.07);
}
.ttMonthDay{
  font-weight:700;
  display:block;
  margin-bottom:4px;
  font-size:13px;
}
.ttMonthCell.empty{
  background:transparent;
  border-color:transparent;
  pointer-events:none;
}
.ttMonthDot{
  font-size:11px;
  padding:2px 6px;
  border-radius:5px;
  margin-bottom:3px;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:600;
}
.ttMonthDot.revision{ background:#ffd166; color:#1a1200; }
.ttMonthDot.free    { background:#68d391; color:#0a2012; }
.ttMonthDot.other   { background:#76e4f7; color:#041e22; }

/* Modal --------------------------------------------------------------------- */
.timetableModalContent{
  width:min(560px, 94vw);
}
.ttModalGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 16px;
  margin-top:12px;
}
.ttModalField{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.ttModalFieldFull{
  grid-column:1/-1;
}
.ttLabel{
  font-size:11px;
  font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width:900px){
  .timetableLayout{
    grid-template-columns:1fr;
  }
  .timetableSidebar{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,0.07);
    max-height:130px;
  }
  .timetableSubjects{
    flex-direction:row;
    flex-wrap:wrap;
  }
  .ttTopBar{
    flex-wrap:wrap;
  }
  .ttWeekLabel{
    min-width:120px;
  }
}
@media (max-width:600px){
  .ttModalGrid{
    grid-template-columns:1fr;
  }
  .ttTable th{ font-size:10px; }
}


/* Home section wash */
#home{
	position:relative;
	overflow-x:hidden;
	background:transparent;
}


/* Staggered reveal for home buttons */
.homeGrid .homeBtn{animation:homeRise 420ms ease forwards;opacity:0;transform:translateY(10px)}
.homeGrid .homeBtn:nth-child(1){animation-delay:40ms}
.homeGrid .homeBtn:nth-child(2){animation-delay:90ms}
.homeGrid .homeBtn:nth-child(3){animation-delay:140ms}
.homeGrid .homeBtn:nth-child(4){animation-delay:190ms}
.homeGrid .homeBtn:nth-child(5){animation-delay:240ms}
.homeGrid .homeBtn:nth-child(6){animation-delay:290ms}
.homeGrid .homeBtn:nth-child(7){animation-delay:340ms}
.homeGrid .homeBtn:nth-child(8){animation-delay:390ms}
.homeGrid .homeBtn:nth-child(9){animation-delay:440ms}
.homeGrid .homeBtn:nth-child(10){animation-delay:490ms}
.homeGrid .homeBtn:nth-child(11){animation-delay:540ms}

@keyframes homeRise{
	to{opacity:1;transform:translateY(0)}
}
#home{position:relative;overflow-x:hidden}
#home > *{position:relative;z-index:1}

/* Decks header layout */
/* ===== FLASHCARDS PAGE — DARK ACADEMIC REDESIGN ===== */

/* Page layout */
#decks {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
  gap: 0;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
}

/* ── Page header ── */
.fcHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.fcHeaderLeft {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.fcTitle {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}
.fcHeaderStats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fcStatChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
}
.fcStatNum {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.fcStatLabel {
  font-size: 11px;
  color: var(--text-muted);
}
.fcStatChip.fcStatNew .fcStatNum { color: #4ea1ff; }
.fcStatChip.fcStatDue .fcStatNum { color: #f87171; }
.fcHeaderRight {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fcSearchInput {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  width: 220px;
  transition: border-color .15s, background .15s;
}
.fcSearchInput:focus {
  border-color: rgba(58,123,255,0.5);
  background: rgba(255,255,255,0.07);
}
#decks button#addDeckBtn {
  background: linear-gradient(135deg, #3a7bff, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s;
  box-shadow: 0 2px 12px rgba(58,123,255,0.3);
}
#decks button#addDeckBtn:hover { filter: brightness(1.12); }

/* ── Two-column layout ── */
.fcLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 24px;
  align-items: start;
  width: 100%;
}

/* Left panel */
.fcLeft {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ── Subject card ── */
.fcSubjectCard {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.fcSubjectCard:hover {
  box-shadow: 0 4px 28px rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.13);
}
.fcSubjectHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px 13px 16px;
  gap: 12px;
}
.fcSubjectHeaderLeft {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.fcColorDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fcToggleBtn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  padding: 2px 3px !important;
  font-size: 10px !important;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity .1s;
}
.fcToggleBtn:hover { opacity: 1 !important; }
.fcSubjectTitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fcSubjectHeaderRight {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

/* ── Badges ── */
.fcBadge {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  color: var(--text-muted);
  min-width: 22px;
  text-align: center;
}
.fcBadge.fcBadgeNew { background: rgba(58,123,255,0.15); color: #4ea1ff; }
.fcBadge.fcBadgeDue { background: rgba(248,113,113,0.15); color: #f87171; }

/* ── Study buttons ── */
.fcStudyBtn {
  background: linear-gradient(135deg, #3a7bff, #1d4ed8) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 13px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap;
  transition: filter .12s;
  box-shadow: 0 2px 8px rgba(58,123,255,0.25);
}
.fcStudyBtn:hover { filter: brightness(1.14) !important; }
.fcStudyBtnSm {
  background: rgba(58,123,255,0.12) !important;
  color: #4ea1ff !important;
  border: 1px solid rgba(58,123,255,0.25) !important;
  border-radius: 7px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.fcStudyBtnSm:hover {
  background: rgba(58,123,255,0.28) !important;
  color: #fff !important;
  border-color: rgba(58,123,255,0.5) !important;
}

/* ── 3-dot menu button ── */
.fcMenuBtn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 7px !important;
  color: var(--text-muted) !important;
  padding: 3px 9px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background .1s, color .1s;
  line-height: 1;
  letter-spacing: 1px;
}
.fcMenuBtn:hover {
  background: rgba(255,255,255,0.09) !important;
  color: var(--text) !important;
}

/* ── Dropdown ── */
.fcDropdown {
  position: fixed;
  background: #1c1c20;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 11px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  z-index: 9999;
  min-width: 170px;
  overflow: hidden;
  animation: fcDropIn .1s ease;
}
@keyframes fcDropIn {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.fcDropItem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background .08s;
  white-space: nowrap;
}
.fcDropItem:hover { background: rgba(255,255,255,0.07); }
.fcDropItem.fcDropDanger { color: #f87171; }
.fcDropItem.fcDropDanger:hover { background: rgba(248,113,113,0.1); }
.fcDropIcon { font-size: 13px; width: 16px; text-align: center; opacity: 0.75; }
.fcDropDivider { height: 1px; background: rgba(255,255,255,0.07); margin: 3px 0; }

/* ── Subject body (accordion) ── */
.fcSubjectBody {
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Inline add form ── */
.fcInlineForm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.fcInlineInput {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
  min-width: 0;
}
.fcInlineInput:focus { border-color: rgba(58,123,255,0.55); }
.fcInlineSave {
  background: linear-gradient(135deg,#3a7bff,#1d4ed8) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
.fcInlineCancel {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  color: var(--text-muted) !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* ── Topic row ── */
.fcTopicRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 10px 28px;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background .1s;
}
.fcTopicRow:last-child { border-bottom: none; }
.fcTopicRow:hover { background: rgba(255,255,255,0.025); }
.fcRowLeft {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.fcRowRight {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.fcDragHandle {
  color: var(--text-muted);
  opacity: 0.35;
  cursor: grab;
  font-size: 14px;
  padding: 0 1px;
  flex-shrink: 0;
  transition: opacity .1s;
}
.fcDragHandle:hover { opacity: 0.8; }
.fcTopicTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Topic body ── */
.fcTopicBody {
  background: rgba(0,0,0,0.08);
}

/* ── Chapter row ── */
.fcChapterRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 8px 52px;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background .1s;
}
.fcChapterRow:last-child { border-bottom: none; }
.fcChapterRow:hover { background: rgba(255,255,255,0.02); }
.fcChapterTitle {
  font-size: 12px;
  font-weight: 500;
  color: rgba(var(--text-rgb, 223,231,239), 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fcChapterRow:hover .fcChapterTitle { color: var(--text); }

/* Drag-over highlight */
.fcTopicRow.drag-over,
.fcChapterRow.drag-over { background: rgba(58,123,255,0.08) !important; }
.fcTopicRow.dragging,
.fcChapterRow.dragging { opacity: 0.45; }

/* Drag position indicators: before / into / after */
.fcChapterRow.drag-before { box-shadow: 0 -2px 0 0 #4ea1ff inset; }
.fcChapterRow.drag-after  { box-shadow: 0 2px 0 0 #4ea1ff; }
.fcChapterRow.drag-into   { background: rgba(78,161,255,0.15) !important; border-radius: 6px; outline: 1.5px dashed #4ea1ff; }

/* Subject card drag handle */
.fcSubjectDragHandle {
  color: rgba(255,255,255,0.25);
  cursor: grab;
  font-size: 16px;
  padding: 0 4px;
  user-select: none;
  flex-shrink: 0;
}
.fcSubjectDragHandle:hover { color: rgba(255,255,255,0.6); }

/* Subject card drag states */
.fcSubjectCard.dragging { opacity: 0.45; }
.fcSubjectCard.drag-deck-before { box-shadow: 0 -3px 0 0 #a78bfa; }
.fcSubjectCard.drag-deck-after  { box-shadow: 0 3px 0 0 #a78bfa; }
.fcSubjectCard.drag-deck-into   { outline: 2px dashed #a78bfa; background: rgba(167,139,250,0.08) !important; }

/* ── Right panel ── */
.fcRight {
  position: sticky;
  top: 16px;
}
.fcActivityCard {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 20px;
}
.fcActivityTitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin: 0 0 14px;
}

/* Override mini calendar inside deck panel */
#decks .cardsMiniCalendar {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 18px;
  min-height: 110px;
  gap: 6px;
}
#decks .cardsMiniBarWrap {
  height: 70px;
}
#decks .cardsMiniBar {
  background: rgba(58,123,255,0.35);
  border-radius: 4px 4px 0 0;
  width: 100%;
  min-height: 4px;
  box-shadow: none;
}
#decks .cardsMiniBar:hover { background: rgba(58,123,255,0.75); }
#decks .cardsMiniValue {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  min-height: 12px;
}
#decks .cardsMiniLabel {
  font-size: 10px;
  color: var(--text-muted);
}
#decks .cardsMiniStats {
  gap: 8px;
  margin-top: 0;
}
#decks .cardsMiniStat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 10px 11px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
#decks .cardsMiniStat span {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Empty state */
.fcEmptyState {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── Light mode overrides ── */
body.light #decks { background: transparent; }
body.light .fcSubjectCard {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
body.light .fcSubjectCard:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  border-color: rgba(0,0,0,0.12);
}
body.light .fcSubjectBody { border-top-color: rgba(0,0,0,0.06); }
body.light .fcTopicRow { border-bottom-color: rgba(0,0,0,0.05); }
body.light .fcTopicRow:hover { background: rgba(0,0,0,0.02); }
body.light .fcTopicBody { background: rgba(0,0,0,0.02); }
body.light .fcChapterRow { border-bottom-color: rgba(0,0,0,0.04); }
body.light .fcChapterRow:hover { background: rgba(0,0,0,0.015); }
body.light .fcChapterTitle { color: #64748b; }
body.light .fcChapterRow:hover .fcChapterTitle { color: #1e293b; }
body.light .fcDropdown { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
body.light .fcDropItem { color: #1e293b; }
body.light .fcDropItem:hover { background: #f8fafc; }
body.light .fcStatChip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.16); }
body.light .fcBadge { background: rgba(0,0,0,0.06); color: #64748b; }
body.light .fcMenuBtn { border-color: rgba(0,0,0,0.1) !important; color: #64748b !important; }
body.light .fcMenuBtn:hover { background: rgba(0,0,0,0.05) !important; color: #1e293b !important; }
body.light .fcActivityCard { background: #fff; border-color: rgba(0,0,0,0.16); }
body.light #decks .cardsMiniBar { background: rgba(37,99,235,0.35); }
body.light #decks .cardsMiniBar:hover { background: rgba(37,99,235,0.7); }
body.light #decks .cardsMiniStat { background: #f8fafc; border-color: rgba(0,0,0,0.15); color: #1e293b; }
body.light .fcInlineInput { background: #f8fafc; border-color: rgba(0,0,0,0.12); color: #1e293b; }
body.light .fcToggleBtn { color: #94a3b8 !important; }

@media (max-width:900px){
	.homeMain{flex-direction:column}
	.homeGrid{width:100%}
	.homeCharts{display:block}
	.homeCharts canvas{width:100%;margin-top:12px}
}

/* Dashboard styles */
.dashboard{background:transparent;padding:0}
.reviewHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.reviewTitle{font-size:20px;font-weight:700;letter-spacing:0.2px}
.reviewHeader .subjectButtons{margin-top:8px}
.reviewTabsBar{
	display:flex;
	gap:10px;
	margin:10px 0 16px 0;
	padding:6px;
	border-radius:999px;
	background:rgba(255,255,255,0.03);
	border:1px solid rgba(255,255,255,0.06);
}
.dashboardTabs .tab{background:transparent;color:#dfe7ef;border:none;border-radius:999px;padding:8px 16px;transition:all 140ms}
.dashboardTabs .tab.active{background:#fff;color:#000;box-shadow:0 10px 22px rgba(0,0,0,0.18)}
.dashboardTabs .tab:hover{background:#fff;color:#000;transform:translateY(-2px)}
.reviewSessionCard{margin:8px 0 16px 0;padding:12px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03)}
.reviewSessionCard .controls{justify-content:flex-end}
.chartHeader, .cardHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px}
.settingsCard{padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03)}
/* ── Timer Page ─────────────────────────────────────────────────────────── */
.timerPageHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.timerFocusToggle{padding:8px 16px;border-radius:20px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);color:#9aa3ad;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.timerFocusToggle:hover,.timerFocusToggle.active{background:rgba(78,161,255,0.15);border-color:#4ea1ff;color:#4ea1ff}
.timerPresets{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.timerPresetPill{padding:9px 20px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);color:#94a3b8;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s}
.timerPresetPill:hover{background:rgba(78,161,255,0.12);border-color:rgba(78,161,255,0.4);color:#7dd3fc}
.timerPresetPill.active{background:linear-gradient(135deg,rgba(78,161,255,0.2),rgba(124,107,255,0.2));border-color:#4ea1ff;color:#4ea1ff;font-weight:700}
.timerCard{background:linear-gradient(160deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.01) 100%);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:36px 28px 0;box-shadow:0 20px 60px rgba(0,0,0,0.45);margin-bottom:16px;position:relative;overflow:hidden}
.timerCardStatus{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:1.5px;text-align:center;margin-bottom:12px}
.timerDisplay{font-size:72px;font-weight:800;letter-spacing:2px;text-align:center;color:#f1f5f9;font-variant-numeric:tabular-nums;line-height:1;margin-bottom:10px}
.timerMotivation{font-size:13px;color:#475569;text-align:center;margin-bottom:28px;min-height:18px;transition:color .4s}
.timerProgressTrack{height:4px;background:rgba(255,255,255,0.06);border-radius:0 0 20px 20px;overflow:hidden;margin:0 -28px}
.timerProgressBar{height:100%;width:0%;background:linear-gradient(90deg,#4ea1ff,#7c6bff);border-radius:0 2px 2px 0;transition:width .4s linear}
.timerActions{display:flex;gap:12px;justify-content:center;align-items:center;margin-bottom:12px}
.timerActionPrimary{padding:14px 40px;border-radius:14px;background:linear-gradient(135deg,#4ea1ff,#7c6bff);border:none;color:#fff;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(78,161,255,0.35);transition:all .2s;letter-spacing:.3px}
.timerActionPrimary:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(78,161,255,0.45)}
.timerActionSecondary{padding:14px 20px;border-radius:14px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);color:#94a3b8;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;min-width:100px}
.timerActionSecondary:hover{background:rgba(255,255,255,0.1);color:#cbd5e1}
.timerDoneRow{display:flex;justify-content:center;margin-bottom:24px}
.timerDoneBtn{padding:10px 32px;border-radius:999px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:#64748b;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.timerDoneBtn:hover{border-color:rgba(100,116,139,0.4);color:#94a3b8}
.timerStatCards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.timerStatCard{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:14px 10px;text-align:center;transition:transform .15s,background .15s}
.timerStatCard:hover{background:rgba(255,255,255,0.055);transform:translateY(-1px)}
.timerStatCardStreak{border-color:rgba(251,146,60,0.25);background:rgba(251,146,60,0.04)}
.timerStatValue{font-size:20px;font-weight:800;color:#e2e8f0;line-height:1}
.timerStatLabel{font-size:10px;color:#475569;margin-top:5px;font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.timerChartCard{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:16px;margin-bottom:16px}
.timerChartHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.timerChartWrap{height:160px}
#timerChart{width:100%;height:100%}
.timerRange{display:flex;gap:6px;background:rgba(255,255,255,0.04);border-radius:10px;padding:3px}
.timerRangeBtn{padding:6px 14px;border-radius:8px;border:none;background:transparent;color:#64748b;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.timerRangeBtn.active{background:rgba(78,161,255,0.18);color:#4ea1ff}
.timerSheetOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:99998;display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px)}
.timerSheet{background:#0f1724;border:1px solid rgba(255,255,255,0.1);border-radius:24px 24px 0 0;padding:20px 24px 36px;width:100%;max-width:480px;animation:sheetUp .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.timerSheetHandle{width:40px;height:4px;background:rgba(255,255,255,0.15);border-radius:2px;margin:0 auto 20px}
.timerSheetTitle{font-size:18px;font-weight:700;color:#e6eef9;text-align:center;margin-bottom:24px}
.timerSheetPickers{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:28px}
.timerSheetPickerWrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.timerSheetLabel{font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.8px}
.timerSheetInput{width:100px;padding:16px 12px;border-radius:12px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);color:#e6eef9;font-size:32px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.timerSheetInput:focus{outline:none;border-color:#4ea1ff}
.timerSheetPickerDiv{font-size:32px;font-weight:800;color:#4ea1ff;margin-top:18px}
.timerSheetBtns{display:flex;gap:12px}
.timerSheetCancelBtn{flex:1;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:#64748b;font-size:15px;font-weight:600;cursor:pointer}
.timerSheetSaveBtn{flex:2;padding:14px;border-radius:12px;border:none;background:linear-gradient(135deg,#4ea1ff,#7c6bff);color:#fff;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(78,161,255,0.3)}
.timerSummaryOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:99999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.timerSummaryCard{background:linear-gradient(180deg,#0f1724,#0d1525);border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:36px 32px;max-width:340px;width:90%;text-align:center;box-shadow:0 40px 80px rgba(0,0,0,0.6);animation:summaryPop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes summaryPop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.timerSummaryIcon{font-size:48px;margin-bottom:12px}
.timerSummaryTitle{font-size:22px;font-weight:800;color:#e6eef9;margin-bottom:20px}
.timerSummaryStats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.timerSummaryStat{background:rgba(255,255,255,0.05);border-radius:12px;padding:14px 10px}
.timerSummaryStatVal{font-size:20px;font-weight:800;color:#4ea1ff}
.timerSummaryStatLbl{font-size:11px;color:#64748b;margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
.timerSummaryCloseBtn{padding:14px 40px;background:linear-gradient(135deg,#4ea1ff,#7c6bff);border:none;border-radius:999px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(78,161,255,0.3)}
.timerSummaryCloseBtn:hover{transform:scale(1.04)}
body.timerFocusMode #timer .timerStatCards,body.timerFocusMode #timer .timerChartCard{opacity:0;pointer-events:none;height:0;overflow:hidden;margin:0;padding:0}
body.timerFocusMode #timer .timerPageHeader h2{opacity:0}
body.timerFocusMode #timer .timerCard{margin-top:20px}
#timer select{background:#0f1113;color:#e6eef9;border:1px solid rgba(255,255,255,0.12)}
#timer option{background:#0f1113;color:#e6eef9}
.subjectButtons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.subjectBtn{padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);color:#dfe7ef;font-weight:700;font-size:12px;letter-spacing:0.4px}
.subjectBtn.active{background:#fff;color:#000;box-shadow:0 10px 22px rgba(0,0,0,0.18)}
.subjectManageList{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.subjectManageRow{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)}
.subjectManageName{font-weight:600;color:#dfe7ef}
.subjectDeleteBtn{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:#ffb3b3;font-weight:700}
.subjectDeleteBtn:hover{background:#fff;color:#000}
/* ===== SCIENTIFIC CALCULATOR PAGE ===== */
#calculator.section{max-width:1100px;width:100%;margin:0 auto}
/* Page header */
.calcPageHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.calcPageTitle{display:flex;align-items:center;gap:10px}
.calcModeTabs{display:flex;gap:3px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:4px}
.calcModeTab{padding:6px 14px;border-radius:7px;border:none;background:transparent;color:rgba(255,255,255,0.45);font-weight:600;font-size:13px;cursor:pointer;transition:all 0.15s;font-family:'Inter',sans-serif}
.calcModeTab.active{background:rgba(255,255,255,0.1);color:#fff}
.calcModeTab:hover:not(.active){color:rgba(255,255,255,0.75)}
/* Two-column layout */
.calcPageLayout{display:grid;grid-template-columns:1fr 230px;gap:16px;align-items:start}
/* Calculator Panel */
.calculator{width:100%;padding:20px;border-radius:16px;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.07);box-shadow:0 24px 64px rgba(0,0,0,0.6);backdrop-filter:blur(8px)}
.calcMainPanel{width:100%}
/* Display */
.calcDisplayWrap{background:rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px 18px;margin-bottom:14px;min-height:84px}
.calcDisplay{font-family:'JetBrains Mono',monospace;font-size:22px;color:#fff;min-height:34px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;outline:none;letter-spacing:0.2px;cursor:text}
.calcLiveResult{font-family:'JetBrains Mono',monospace;font-size:13px;color:rgba(255,255,255,0.32);margin-top:6px;min-height:16px;letter-spacing:0.1px}
.calcCaret{display:inline-block;width:2px;height:1.2em;background:#3A7BFF;vertical-align:middle;margin:0 1px;animation:calcCaretBlink 1s step-start infinite}
@keyframes calcCaretBlink{50%{opacity:0.15}}
/* Controls row */
.calcControlsRow{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px;flex-wrap:wrap}
.calcAngleGroup{display:flex;gap:3px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:9px;padding:3px}
.calcMemGroup{display:flex;gap:4px}
/* Button grid */
.calcGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.calcNote{margin-top:10px;font-size:11px;min-height:16px;color:rgba(255,255,255,0.35);font-family:'JetBrains Mono',monospace}
/* Base button */
.calcBtn{padding:11px 6px;border-radius:10px;border:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.05);color:#dde4ed;font-weight:600;font-size:13px;cursor:pointer;transition:background 0.1s,transform 0.1s,box-shadow 0.1s;font-family:'Inter',sans-serif;line-height:1.2}
.calcBtn:hover{background:rgba(255,255,255,0.11);border-color:rgba(255,255,255,0.13);transform:translateY(-1px)}
.calcBtn:active{transform:translateY(0);background:rgba(255,255,255,0.17)}
.calcBtn:focus{outline:none;box-shadow:0 0 0 2px rgba(58,123,255,0.45)}
/* Variants */
.calcFnBtn{color:#7EB8FF;background:rgba(58,123,255,0.07);border-color:rgba(58,123,255,0.15)}
.calcFnBtn:hover{background:rgba(58,123,255,0.16)}
.calcConstBtn{color:#C4AAFF;background:rgba(167,139,250,0.07);border-color:rgba(167,139,250,0.15)}
.calcConstBtn:hover{background:rgba(167,139,250,0.16)}
.calcNumBtn{background:rgba(255,255,255,0.065)}
.calcOpBtn{color:#FFB84D;background:rgba(255,179,71,0.07);border-color:rgba(255,179,71,0.15)}
.calcOpBtn:hover{background:rgba(255,179,71,0.16)}
.calcClearBtn{color:#FF7070;background:rgba(255,80,80,0.08);border-color:rgba(255,80,80,0.18)}
.calcClearBtn:hover{background:rgba(255,80,80,0.18)}
.calcBackBtn{color:#e0e6ef}
.calcEqualBtn{background:#3A7BFF !important;border-color:#3A7BFF !important;color:#fff !important;font-size:17px;font-weight:700}
.calcEqualBtn:hover{background:#4E8AFF !important;box-shadow:0 4px 18px rgba(58,123,255,0.45);transform:translateY(-1px)}
.calcMemBtn{font-size:11px;padding:7px 9px;color:rgba(255,255,255,0.45);background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.06)}
.calcMemBtn:hover{color:#fff;background:rgba(255,255,255,0.1)}
.calcModeBtn{background:transparent;font-size:11px;letter-spacing:0.6px;padding:5px 10px;font-weight:700;color:rgba(255,255,255,0.4);border:none;border-radius:6px;cursor:pointer}
.calcModeBtn.active{background:rgba(255,255,255,0.12);color:#fff}
.calcModeBtn.active:focus{background:rgba(255,255,255,0.12);color:#fff}
.calcModeBtn:focus{outline:none}
.calcSpan2{grid-column:span 2}
.calcSpacer{visibility:hidden;pointer-events:none}
.calcHeader{display:none}
/* Fraction display */
.calcDisplay .fraction,.graphEqPreview .fraction{display:inline-flex;flex-direction:column;align-items:stretch;line-height:1;width:max-content;vertical-align:middle}
.calcDisplay .fraction .num,.graphEqPreview .fraction .num{padding:0 6px;text-align:center;white-space:nowrap}
.calcDisplay .fraction .den,.graphEqPreview .fraction .den{border-top:1px solid rgba(255,255,255,0.5);padding:2px 6px 0;text-align:center;white-space:nowrap}
/* History Panel */
.calcHistoryPanel{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.07);border-radius:16px;padding:16px;max-height:600px;display:flex;flex-direction:column;overflow:hidden}
.calcHistoryHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.calcHistoryHeader span{font-weight:600;font-size:14px;color:rgba(255,255,255,0.65)}
.calcHistoryClearBtn{background:none;border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.38);font-size:11px;padding:4px 10px;border-radius:6px;cursor:pointer;font-family:'Inter',sans-serif}
.calcHistoryClearBtn:hover{color:#fff;border-color:rgba(255,255,255,0.25)}
.calcHistoryList{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.calcHistoryList::-webkit-scrollbar{width:4px}
.calcHistoryList::-webkit-scrollbar-track{background:transparent}
.calcHistoryList::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:4px}
.calcHistoryEmpty{font-size:12px;text-align:center;padding:28px 8px}
.calcHistoryItem{padding:10px 12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;cursor:pointer;transition:background 0.12s}
.calcHistoryItem:hover{background:rgba(255,255,255,0.08)}
.calcHistoryExpr{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,0.42);word-break:break-all;margin-bottom:3px}
.calcHistoryResult{font-family:'JetBrains Mono',monospace;font-size:15px;color:#fff;font-weight:600}
.graphsCard{max-width:820px;width:100%;margin:0 auto;padding:16px;border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.06);box-shadow:0 16px 40px rgba(0,0,0,0.55)}
.graphRow{align-items:center;flex-wrap:wrap;row-gap:8px}
.graphRow > button{min-width:96px}
.graphRow .graphAngle{flex-wrap:wrap}
.graphRow .graphZoom{flex-wrap:wrap}
.graphAngle{display:flex;gap:8px}
.graphAngle .calcModeBtn{min-width:56px}
.graphZoom{display:flex;gap:8px;flex-wrap:wrap}
.graphEqList{display:flex;flex-direction:column;gap:8px;margin:10px 0 8px 0}
.graphEqItem{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:8px}
.graphEqItem input{min-height:44px;font-size:15px}
.graphEqPreview{font-size:14px;color:#cfd6df;margin-top:4px}
.calcDisplay .fraction,
.graphEqPreview .fraction{display:inline-flex;flex-direction:column;align-items:stretch;line-height:1;width:max-content;vertical-align:middle}
.calcDisplay .fraction .num,
.graphEqPreview .fraction .num{padding:0 6px;text-align:center;white-space:nowrap}
.calcDisplay .fraction .den,
.graphEqPreview .fraction .den{border-top:1px solid rgba(255,255,255,0.5);padding:2px 6px 0 6px;text-align:center;white-space:nowrap}
.graphEqModes{display:flex;gap:6px;flex-wrap:wrap}
.graphEqModes .calcModeBtn{min-width:56px}
.graphKeypad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0 4px 0}
.graphKeyBtn{padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.06);color:#fff;font-weight:700}
.graphKeyBtn[data-action="back"]{grid-column:1 / -1}
.graphExtraRow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0}
.calcExtraGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.graphEqItem input{flex:1}
.graphEqColor{width:14px;height:14px;border-radius:50%;flex:0 0 14px}
.graphCanvasWrap{position:relative}
#graphCanvas{width:100%;height:auto;margin-top:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.08);background:rgba(0,0,0,0.35)}
/* ===== POLYNOMIAL SOLVER ===== */
.polyCard{margin-top:24px;padding:24px;border-radius:16px;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.07);box-shadow:0 24px 64px rgba(0,0,0,0.6)}
.polyCardHeader{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.polyCardTitle{display:flex;align-items:center;gap:14px}
.polyCardIcon{width:42px;height:42px;background:rgba(167,139,250,0.1);border:1px solid rgba(167,139,250,0.2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-style:italic;color:#C4AAFF;font-family:'JetBrains Mono',monospace;flex-shrink:0}
.polyExportBtns{display:flex;gap:6px;flex-wrap:wrap}
.polyExportBtn{font-size:12px;padding:8px 12px;background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.55);border-color:rgba(255,255,255,0.08)}
.polyExportBtn:hover{color:#fff;background:rgba(255,255,255,0.1)}
.polyBody{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.polySolverLeft{display:flex;flex-direction:column;gap:14px}
.polyRoots{display:none}
.polyRow{align-items:center;display:flex;gap:10px}
.polyRow label{font-size:13px;color:rgba(255,255,255,0.55);min-width:60px;font-family:'Inter',sans-serif}
.polyRow select{background:rgba(255,255,255,0.05);color:#e6eef9;border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:8px 12px;font-size:13px}
.polyRow option{background:#1A1A1C;color:#e6eef9}
.polyCoeffInputs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.polyCoeffInputs .coeffField{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:8px 12px}
.polyCoeffInputs .coeffField label{font-size:12px;color:rgba(255,255,255,0.42);font-family:'JetBrains Mono',monospace;min-width:36px}
.polyCoeffInputs .coeffField input{flex:1;min-height:34px;font-size:14px;font-family:'JetBrains Mono',monospace;background:transparent;border:none;color:#fff;outline:none}
.polyCoeffInputs .coeffField input::placeholder{color:rgba(255,255,255,0.18)}
.polyCoeffInputs .coeffField input.invalid{color:#ff6b6b}
.polyActions{display:flex;gap:8px}
.polyPrimaryBtn{background:#3A7BFF;border:1px solid #3A7BFF;color:#fff;padding:10px 22px;border-radius:10px;font-weight:700;cursor:pointer;font-size:14px;font-family:'Inter',sans-serif;transition:all 0.15s}
.polyPrimaryBtn:hover{background:#4E8AFF;box-shadow:0 4px 18px rgba(58,123,255,0.4);transform:translateY(-1px)}
.polyRootsOutput{font-family:'JetBrains Mono',monospace;font-size:13px;white-space:pre-wrap;color:rgba(255,255,255,0.75);line-height:1.9}
.polyRootsOutput .fraction{display:inline-flex;flex-direction:column;align-items:stretch;line-height:1;width:max-content;vertical-align:middle}
.polyRootsOutput .fraction .num{padding:0 6px;text-align:center;white-space:nowrap}
.polyRootsOutput .fraction .den{border-top:1px solid rgba(255,255,255,0.5);padding:2px 6px 0;text-align:center;white-space:nowrap}
.polySolverRight{display:flex;flex-direction:column;gap:8px}
.polyGraphLabel{font-size:12px;margin-bottom:4px}
.polyGraphCanvas{width:100%;border-radius:12px;background:rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.07);display:block}
.polyGraphEmpty{font-size:13px;text-align:center;padding:60px 20px;background:rgba(0,0,0,0.2);border-radius:12px;border:1px solid rgba(255,255,255,0.06)}
/* ===== ADDITIONAL TOOLS SECTION ===== */
.additionalToolsSection{margin-top:24px}
.additionalToolsHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.toolsGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.toolCard{text-align:left;padding:18px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);cursor:pointer;transition:all 0.15s;display:flex;flex-direction:column;gap:8px;font-family:'Inter',sans-serif}
.toolCard:hover{background:rgba(255,255,255,0.07);border-color:rgba(58,123,255,0.35);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,0.35)}
.toolCardIcon{width:40px;height:40px;background:rgba(255,255,255,0.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;color:#7EB8FF;font-weight:700;font-size:15px;flex-shrink:0}
.toolCardTitle{font-weight:600;font-size:14px;color:#e8edf2}
.toolCardDesc{font-size:12px;color:rgba(255,255,255,0.38);line-height:1.4}
/* Responsive */
@media(max-width:860px){
  .calcPageLayout{grid-template-columns:1fr}
  .calcHistoryPanel{display:none}
  .polyBody{grid-template-columns:1fr}
  .toolsGrid{grid-template-columns:repeat(2,1fr)}
  .calcModeTabs{overflow-x:auto}
  .calcGrid{grid-template-columns:repeat(4,1fr)}
  .calcEqualBtn{grid-column:span 1}
}

/* ===== CALC TOOL MODAL ===== */
.calcToolModal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px}
.calcToolModal.hidden{display:none}
.calcToolModalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,0.72);backdrop-filter:blur(6px)}
.calcToolModalContent{position:relative;z-index:1;width:100%;max-width:780px;max-height:90vh;background:#111114;border:1px solid rgba(255,255,255,0.1);border-radius:18px;box-shadow:0 32px 80px rgba(0,0,0,0.8);display:flex;flex-direction:column;overflow:hidden}
.calcToolModalHeader{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 14px;border-bottom:1px solid rgba(255,255,255,0.07)}
.calcToolModalTitleRow{display:flex;align-items:center;gap:12px}
.calcToolModalIcon{width:36px;height:36px;background:rgba(58,123,255,0.12);border:1px solid rgba(58,123,255,0.2);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;font-family:'JetBrains Mono',monospace;color:#7EB8FF;font-weight:700;flex-shrink:0}
.calcToolModalTitle{margin:0;font-size:17px;font-weight:700}
.calcToolModalClose{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.55);width:32px;height:32px;border-radius:8px;font-size:18px;line-height:1;cursor:pointer;transition:all 0.15s;font-family:sans-serif}
.calcToolModalClose:hover{background:rgba(255,255,255,0.14);color:#fff}
.calcToolModalBody{overflow-y:auto;padding:22px;flex:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.12) transparent}
.calcToolModalBody::-webkit-scrollbar{width:5px}
.calcToolModalBody::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:4px}
/* Tool action button */
.toolActionBtn{padding:10px 18px;border-radius:10px;background:#3A7BFF;border:none;color:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:all 0.15s;font-family:'Inter',sans-serif}
.toolActionBtn:hover{background:#4E8AFF;box-shadow:0 4px 16px rgba(58,123,255,0.4);transform:translateY(-1px)}
.toolActionBtn.secondary{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);color:#cdd5df}
.toolActionBtn.secondary:hover{background:rgba(255,255,255,0.13)}
.toolResultBox{margin-top:16px;padding:16px;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.08);border-radius:12px;font-family:'JetBrains Mono',monospace;font-size:14px;color:#e8edf2;min-height:48px;white-space:pre-wrap;line-height:1.7}
.toolLabel{font-size:12px;color:rgba(255,255,255,0.45);margin-bottom:5px;font-family:'Inter',sans-serif;font-weight:500}
.toolRow{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.toolInput{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:9px;padding:9px 13px;color:#fff;font-size:14px;font-family:'JetBrains Mono',monospace;outline:none;transition:border-color 0.15s;width:100%}
.toolInput:focus{border-color:rgba(58,123,255,0.5);background:rgba(58,123,255,0.04)}
.toolInput::placeholder{color:rgba(255,255,255,0.2)}
.toolSelect{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:9px;padding:9px 13px;color:#e6eef9;font-size:13px;font-family:'Inter',sans-serif;outline:none;cursor:pointer}
.toolSelect option{background:#111114;color:#e6eef9}
.toolDivider{height:1px;background:rgba(255,255,255,0.07);margin:16px 0}
.toolSection{margin-bottom:18px}
.toolSectionTitle{font-size:13px;font-weight:600;color:rgba(255,255,255,0.55);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px}
/* Matrix grid */
.matrixGrid{display:inline-grid;gap:6px;border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:12px;background:rgba(255,255,255,0.02)}
.matrixGrid input{width:60px;text-align:center;padding:7px 4px;font-family:'JetBrains Mono',monospace;font-size:13px}
.matrixLabel{font-size:13px;font-weight:700;color:rgba(255,255,255,0.5);margin-bottom:6px}
.matrixPair{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;margin-bottom:16px}
.matrixResultGrid{display:inline-grid;gap:6px;border:1px solid rgba(58,123,255,0.25);border-radius:10px;padding:12px;background:rgba(58,123,255,0.05)}
.matrixResultGrid span{width:60px;height:30px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:13px;color:#7EB8FF}
.matOpsRow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
/* Unit converter */
.unitConverterGrid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-bottom:14px}
.unitArrow{color:rgba(255,255,255,0.35);font-size:20px;text-align:center}
.unitValueWrap{display:flex;flex-direction:column;gap:6px}
/* Equation solver */
.eqRow{display:grid;grid-template-columns:repeat(3,1fr) auto repeat(3,1fr) auto 1fr;gap:8px;align-items:center;margin-bottom:10px}
.eqSep{color:rgba(255,255,255,0.4);text-align:center;font-size:15px}
.eqResultItem{padding:10px 14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:9px;font-family:'JetBrains Mono',monospace;font-size:14px}
/* Stats panel */
.statsResultsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.statsResultCard{padding:12px 14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:10px}
.statsResultLabel{font-size:11px;color:rgba(255,255,255,0.38);font-family:'Inter',sans-serif;margin-bottom:3px}
.statsResultValue{font-family:'JetBrains Mono',monospace;font-size:16px;color:#e8edf2;font-weight:600}
/* Programmer mode */
.progBaseDisplay{background:rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px 16px;margin-bottom:10px}
.progBaseLine{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.progBaseLine:last-child{border-bottom:none}
.progBaseTag{font-size:11px;color:rgba(255,255,255,0.3);font-family:'Inter',sans-serif;min-width:36px}
.progBaseValue{font-family:'JetBrains Mono',monospace;font-size:14px;color:#e8edf2;word-break:break-all;text-align:right;flex:1;padding-left:12px}
.progGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}
.progHexBtn{color:#C4AAFF}
.progBitBtn{color:#7EB8FF}
.calcModeBasic .calcGrid{grid-template-columns:repeat(4,1fr)}
/* Derivative/Integral/Limit shared */
.calcuToolExprWrap{position:relative;margin-bottom:16px}
.calcuToolExprWrap label{display:block;font-size:12px;color:rgba(255,255,255,0.45);margin-bottom:6px}
.calcuToolExprWrap .toolInput{font-size:16px;padding:12px 14px}
.stepsPanel{margin-top:14px;padding:14px 16px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.07);border-radius:12px}
.stepsPanel .stepLine{padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.05);font-family:'JetBrains Mono',monospace;font-size:13px;color:rgba(255,255,255,0.7);line-height:1.6}
.stepsPanel .stepLine:last-child{border-bottom:none;color:#7EB8FF}
/* Simplifier */
.simplifyOutput{font-family:'JetBrains Mono',monospace;font-size:18px;color:#7EB8FF;padding:14px 0 4px}
.simplifySteps{font-size:13px;color:rgba(255,255,255,0.5);margin-top:6px;line-height:1.8}
/* Error / info state in result box */
.toolResultBox.error{border-color:rgba(255,80,80,0.3);color:#ff8888}
.toolResultBox.success{border-color:rgba(58,123,255,0.3);color:#7EB8FF}
@media(max-width:560px){
  .calcToolModalContent{max-height:100vh;border-radius:0}
  .matrixPair{gap:14px}
  .statsResultsGrid{grid-template-columns:repeat(2,1fr)}
  .eqRow{grid-template-columns:repeat(3,1fr);gap:5px}
  .unitConverterGrid{grid-template-columns:1fr}
  .unitArrow{transform:rotate(90deg)}
}
.mockSetupContent{width:640px;max-width:94%}
.mockSectionHeader{display:flex;align-items:center;justify-content:space-between;margin:12px 0 8px 0;font-weight:600}
.papersRow{display:grid;grid-template-columns:1fr 90px 90px 28px;gap:8px;align-items:center;margin-bottom:8px}
.papersRow input{margin:0}
.papersRow .removePaper{background:rgba(255,255,255,0.06);color:#fff;border:none;border-radius:8px;padding:6px 8px;cursor:pointer}
.boundaryPresets{display:flex;gap:8px;margin:6px 0 10px 0}
.boundaryPresets .boundaryBtn{padding:6px 12px;border-radius:999px;background:var(--pill);color:#fff;border:none}
.boundaryPresets .boundaryBtn.active{background:#fff;color:#000}
.boundaryGrid{display:grid;grid-template-columns:36px 1fr 36px 1fr;gap:8px;align-items:center}
.statCards{display:flex;gap:12px;margin-bottom:12px}
.statCard{flex:1;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:16px;border-radius:12px;color:#e6eef9;box-shadow:0 8px 24px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.02);transition:background-color 140ms ease}
.statCard .value{font-size:20px;font-weight:700}
.statCard .label{font-size:12px;color:var(--accent);margin-top:6px}
.bigChartCard{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:14px;border-radius:12px;margin-bottom:12px;border:1px solid rgba(255,255,255,0.02);box-shadow:0 8px 24px rgba(0,0,0,0.6)}
.bigChartCard canvas,
#progressMainChart,
#topicProgressChart,
#sessionProgressChart,
#overallChart{
	width:100% !important;
	display:block;
}
.paperAnalyticsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
.paperCard{padding:12px;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 20px rgba(0,0,0,0.5)}
.paperCardHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.paperCardTitle{font-weight:700}
.paperCardAvg{font-size:12px;color:#9aa3ad}
.paperCardList{margin-top:6px;display:flex;flex-direction:column;gap:4px;font-size:12px;color:#cfd6df}
.paperCardList span{display:flex;justify-content:space-between;gap:8px}
.paperScoresTableWrap{margin-top:12px}
.paperScoresTitle{font-weight:700;margin-bottom:6px}
.paperScoresTable{display:grid;gap:8px}
.paperScoresRow{display:grid;grid-template-columns:140px repeat(auto-fit,minmax(160px,1fr));gap:8px;align-items:stretch}
.paperScoresHead{font-size:12px;color:#9aa3ad;font-weight:700}
.paperScoresCell{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px}
.paperScoresCell .paperMeta{font-size:11px;color:#9aa3ad;display:flex;justify-content:space-between;gap:8px}
.paperScoresInputs{display:flex;gap:6px}
.paperScoresInputs input{width:100%;min-height:34px;font-size:13px}
.paperScoresInputs span{align-self:center;color:#9aa3ad}
@media (max-width:900px){
	.paperAnalyticsGrid{grid-template-columns:1fr}
}
.largeInfo{height:120px;border-radius:12px;padding:12px;margin-bottom:12px;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.005));border:1px solid rgba(255,255,255,0.02)}
.largeInfo.blurred{backdrop-filter: blur(6px)}
.consistencyCard{padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));border:1px solid rgba(255,255,255,0.02)}

.statCard:hover, .bigChartCard:hover, .largeInfo:hover, .consistencyCard:hover, section:hover{background:rgba(255,255,255,0.04)}
.progressHeatmap{display:grid;gap:4px;margin-top:10px;height:110px}
/* When used as a calendar month view, height must be auto */
.fnCalMonthView .progressHeatmap { height: auto !important; overflow: visible !important; }
.progressHeatmap .heatCell{width:12px;height:12px;border-radius:3px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);transition:background-color 120ms}
.progressHeatmap.calendarHeatmap .heatCell{
	width:42px;
	height:42px;
	border-radius:4px;
	background:rgba(255,255,255,0.10);
	border:1px solid rgba(255,255,255,0.18);
}
.progressHeatmap.calendarHeatmap .heatCell.empty{
	background:rgba(255,255,255,0.06);
	border:1px solid rgba(255,255,255,0.12);
}
.progressHeatmap.calendarHeatmap .heatCell.level-1 { background:rgba(79,142,255,0.18) !important; border-color:rgba(79,142,255,0.28) !important; }
.progressHeatmap.calendarHeatmap .heatCell.level-2 { background:rgba(79,142,255,0.4) !important; border-color:rgba(79,142,255,0.52) !important; }
.progressHeatmap.calendarHeatmap .heatCell.level-3 { background:rgba(79,142,255,0.68) !important; border-color:rgba(79,142,255,0.78) !important; }
.progressHeatmap.calendarHeatmap .heatCell.level-4 { background:linear-gradient(135deg,rgba(79,142,255,0.9),rgba(124,92,252,0.8)) !important; border-color:rgba(79,142,255,0.8) !important; }
.progressHeatmap.calendarHeatmap .heatCell.level-5 { background:linear-gradient(135deg,#4F8EFF,#7C5CFC) !important; border-color:#4F8EFF !important; box-shadow:0 0 14px rgba(79,142,255,0.5) !important; }
/* Heatmap activity levels: blue scale */
.heatCell.level-1 { background:rgba(58,123,255,0.20); border-color:rgba(58,123,255,0.35); }
.heatCell.level-2 { background:rgba(58,123,255,0.45); border-color:rgba(58,123,255,0.55); }
.heatCell.level-3 { background:rgba(58,123,255,0.75); border-color:rgba(58,123,255,0.85); }
.heatCell.level-4 { background:#3A7BFF; border-color:#3A7BFF; }
.heatCell.level-5 { background:#3A7BFF; border-color:#3A7BFF; box-shadow:0 0 8px rgba(58,123,255,0.6); }
.heatCell:hover { filter:brightness(1.2); }
.heatCell.heatRed.level-1 { background:rgba(58,123,255,0.20); border-color:rgba(58,123,255,0.35); }
.heatCell.heatRed.level-2 { background:rgba(58,123,255,0.45); border-color:rgba(58,123,255,0.55); }
.heatCell.heatRed.level-3 { background:rgba(58,123,255,0.75); border-color:rgba(58,123,255,0.85); }
.heatCell.heatRed.level-4 { background:#3A7BFF; border-color:#3A7BFF; }


#noteCanvas,
#notesModalCanvas,
canvas.noteCanvas,
canvas#noteCanvas,
canvas#notesModalCanvas {
	background: var(--card) !important;
	border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Paper chooser modal styles */
#paperChooserModal .modalContent { padding: 16px }
#paperChooserModal input[type="radio"], #paperChooserModal input[type="checkbox"] { margin-right:8px }

/* When drawPanel has lines, ensure canvas background shows clearly */
.drawPanel.lines canvas{ background-image: repeating-linear-gradient(transparent, transparent 26px, rgba(255,255,255,0.03) 27px); }
.drawPanel.grid canvas{ background-image: linear-gradient(transparent, transparent); }

/* Inline text editor styling for canvas text tool */
.inlineTextEditor{ color: #fff; caret-color: #fff; border-radius:4px; font-family: Arial, sans-serif; }
.inlineTextEditor:focus{ box-shadow: 0 0 0 2px rgba(255,255,255,0.04); }
/* Hover controls shown when pointer is over a text item in the drawing canvas */
.textHoverBtn{ display:flex; gap:6px; background: rgba(0,0,0,0.24); padding:6px; border-radius:6px; border:1px solid rgba(255,255,255,0.04); }
.textHoverBtn.hidden{ display:none }
.textHoverBtn{ z-index:2147483647; box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
.textHoverBtn button{ background:var(--pill); color:#fff; border:none; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:13px }
.textHoverBtn button.textMoveBtn{ background:rgba(255,255,255,0.04) }
.textHoverBtn button.textDeleteBtn{ background:rgba(255,80,80,0.9) }

/* Text action modal (mobile-friendly) */
.textActionModal{ position:fixed; left:0; top:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); z-index:2147484000 }
.textActionModal .textActionContent{ background:var(--card); padding:18px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.6); display:flex; gap:8px }
.textActionModal .textActionContent button{ padding:8px 12px; border-radius:8px; border:none; background:var(--pill); color:#fff; cursor:pointer }
.textActionModal .textActionContent button.secondary{ background:rgba(255,255,255,0.06); color:#fff }
@media (max-width:900px){
	.homeCharts{flex-direction:column}
	.homeCharts #homeHeatmapWrap{order:0}
	.homeCharts #homeGraphs{order:1}
	.homeCharts canvas{height:120px}
	.progressHeatmap{height:90px}
}

@media (max-width:700px){
	.statCards{flex-direction:column}
	.statCard{width:100%}
	.progressHeatmap{grid-template-columns:repeat(26,8px);gap:3px;height:84px}
	.progressHeatmap .heatCell{width:8px;height:8px;border-radius:2px}
}

/* floating home button */
.floatingHome{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;border:none;box-shadow:0 8px 20px rgba(43,109,246,0.18);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.floatingHome.hidden{display:none}
.floatingHome:active{transform:scale(0.98)}

/* batch duplicates modal */
.duplicateRow{padding:8px;border-bottom:1px solid #f4f4f4;display:flex;align-items:center;justify-content:space-between}
.dupTitle{font-size:14px}
.dupChoices{display:flex;gap:8px}
.dupChoices button{padding:8px 14px;font-size:13px;border-radius:999px;background:var(--pill);color:#fff;border:none;box-shadow:0 6px 14px rgba(0,0,0,0.6);transition:all 120ms}
.dupChoices button.secondary{background:rgba(255,255,255,0.04);color:#fff}

/* ensure small control buttons match global pill style */
/* Add Deck and Add Mock: always pill grey */
#addDeckBtn, #addMockBtn {
	background: var(--pill) !important;
	color: #fff !important;
	box-shadow: 0 6px 14px rgba(0,0,0,0.6) !important;
}

.controls button, .modal .controls button, .dashboardHeader button, .importDeckRow button{padding:8px 14px;border-radius:999px;background:var(--pill);color:#fff;border:none;box-shadow:0 6px 14px rgba(0,0,0,0.6);transition:all 120ms}
.controls button:hover, .modal .controls button:hover, .dashboardHeader button:hover, .importDeckRow button:hover{background:#fff;color:#000;transform:translateY(-2px)}
/* keep Add Mock white */
#addMockBtn{background:#fff;color:#000}

/* Enforce dark default for header, tabs and small controls (overrides global white button) */

/* Dashboard tabs: force pill style, white on hover/active */
.dashboardTabs .tab {
	background: var(--pill) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 22px !important;
	box-shadow: 0 6px 14px rgba(0,0,0,0.6) !important;
	padding: 8px 14px !important;
	font-weight: 600;
	transition: background .12s, color .12s;
}
.dashboardTabs .tab.active,
.dashboardTabs .tab:active,
.dashboardTabs .tab:focus {
	background: var(--pill) !important;
	color: #fff !important;
	box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important;
}
.dashboardTabs .tab:hover {
	background: #fff !important;
	color: #000 !important;
	transform: translateY(-2px);
}


/* ensure hover makes them white */
.homeBtn:hover, #addMockBtn:hover, #addDeckBtn:hover, #addDeckBtn:focus { background:#fff !important; color:#000 !important; transform:translateY(-2px); }

/* ── Mock form layout ──────────────────────────────────────── */
.mockFormGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:520px){.mockFormGrid{grid-template-columns:1fr}}
.mockFormField{display:flex;flex-direction:column}
.mockFormSection{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.05)}
.mockSectionTitle{font-size:12px;font-weight:600;color:#8ca0b8;margin-bottom:6px}
.mockChapterList{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.mockChapterList div{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.04);border-radius:8px;padding:5px 10px;font-size:12px}
.mockChapterList div button{background:none;border:none;color:#e05050;cursor:pointer;font-size:13px;padding:0 4px}

/* ── Mock history list ─────────────────────────────────────── */
.mockHistoryItems{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}
.mockHistoryRow{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,0.03);border-radius:10px;border:1px solid rgba(255,255,255,0.04)}
.mockHistoryMeta{display:flex;gap:10px;align-items:center;flex:1;min-width:0}
.mockHistoryDate{font-size:12px;color:#8ca0b8;white-space:nowrap}
.mockHistorySubject{font-size:12px;color:#c8deff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mockHistoryScore{font-size:16px;font-weight:700;color:#4ea1ff;min-width:48px;text-align:right}
.mockDeleteBtn{background:none !important;border:none !important;color:#e05050 !important;cursor:pointer;padding:4px 8px !important;border-radius:6px !important;font-size:13px;box-shadow:none !important;transition:color .12s}
.mockDeleteBtn:hover{color:#ff8080 !important;background:rgba(224,80,80,0.12) !important}

/* Target mock form buttons (row) to match pill style */
#tab-mocks .row > button,
#mockForm .row > button,
#mockForm .row > #addChapterScoreBtn,
#tab-mocks #addChapterScoreBtn {
	background: var(--pill) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 22px !important;
	padding: 8px 14px !important;
	box-shadow: 0 6px 14px rgba(0,0,0,0.6) !important;
	transition: background .12s ease, color .12s ease !important;
}

#tab-mocks .row > button:hover,
#mockForm .row > button:hover,
#tab-mocks #addChapterScoreBtn:hover,
#mockForm #addChapterScoreBtn:hover {
	background: #fff !important;
	color: #000 !important;
}

/* =====================================================
   ADD MOCK MODAL
   ===================================================== */
.modalOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:999;display:flex;align-items:center;justify-content:center;padding:16px}
.modalOverlay.hidden{display:none}
.modalCard{background:#1a2535;border-radius:18px;border:1px solid rgba(255,255,255,0.08);width:100%;max-width:480px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,0.55)}
.modalHeader{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 16px;border-bottom:1px solid rgba(255,255,255,0.07)}
.modalTitle{font-size:17px;font-weight:700;color:#e8f0fe}
.modalClose{background:none;border:none;color:#6b7e97;font-size:18px;cursor:pointer;padding:4px 6px;border-radius:6px;transition:color .12s}
.modalClose:hover{color:#e8f0fe}
.modalBody{padding:20px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.modalField{display:flex;flex-direction:column;gap:6px}
.modalLabel{font-size:12px;font-weight:600;color:#8ca0b8;text-transform:uppercase;letter-spacing:.04em}
.modalInput{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:10px 12px;color:#e8f0fe;font-size:14px;outline:none;transition:border-color .15s}
.modalInput:focus{border-color:rgba(99,165,255,0.55)}
.modalSection{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.06)}
.modalSectionHeader{display:flex;align-items:center;justify-content:space-between}
.modalSectionTitle{font-size:13px;font-weight:700;color:#c7d8ef}
.modalAddPaperBtn{font-size:12px !important;padding:6px 12px !important}
.amPapersList{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.amPaperRow{display:flex;gap:8px;align-items:center}
.amPaperRow .amPaperName{flex:1;min-width:0}
.amPaperRow .amPaperScore{width:70px}
.amPaperRow .amPaperDel{background:none;border:none;color:#e05050;cursor:pointer;font-size:16px;padding:4px 6px;border-radius:6px;flex-shrink:0}
.amPaperRow .amPaperDel:hover{background:rgba(224,80,80,0.12)}
.amPresets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.amPresetBtn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:6px 14px;color:#8ca0b8;font-size:12px;cursor:pointer;transition:all .15s}
.amPresetBtn.active,.amPresetBtn:hover{background:rgba(99,165,255,0.18);border-color:rgba(99,165,255,0.45);color:#a8c8ff}
.amBoundaryRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.amBoundaryField{display:flex;flex-direction:column;gap:6px}
.modalFooter{display:flex;gap:10px;padding:16px 22px;border-top:1px solid rgba(255,255,255,0.07);justify-content:flex-end}
/* light mode modal */
body.light .modalCard{background:#fff;border-color:#e2e8f0}
body.light .modalHeader{border-bottom-color:#e2e8f0}
body.light .modalTitle{color:#0f172a}
body.light .modalClose{color:#94a3b8}
body.light .modalClose:hover{color:#0f172a}
body.light .modalInput{background:#f8fafc;border-color:#cbd5e1;color:#0f172a}
body.light .modalLabel{color:#64748b}
body.light .modalSectionTitle{color:#334155}
body.light .modalSection{border-top-color:#e2e8f0}
body.light .amPresetBtn{background:#f1f5f9;border-color:#cbd5e1;color:#64748b}
body.light .amPresetBtn.active,body.light .amPresetBtn:hover{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}
body.light .modalFooter{border-top-color:#e2e8f0}
body.light .modalOverlay{background:rgba(0,0,0,0.4)}

/* Papers definition management */
.paperDefsList{display:flex;flex-direction:column;gap:8px}
.paperDefRow{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,0.04);border-radius:10px;border:1px solid rgba(255,255,255,0.06)}
.paperDefIdx{width:22px;height:22px;border-radius:50%;background:rgba(99,165,255,0.2);color:#4ea1ff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.paperDefNameInput{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:7px 10px;color:#e8f0fe;font-size:13px;outline:none;transition:border-color .15s}
.paperDefNameInput:focus{border-color:rgba(99,165,255,0.5)}
.paperDefDel{background:none;border:none;color:#e05050;cursor:pointer;font-size:15px;padding:4px 6px;border-radius:6px;flex-shrink:0;transition:color .12s}
.paperDefDel:hover{color:#ff8080;background:rgba(224,80,80,0.12)}
/* Paper score row in Add Mock modal */
.amPaperRow{display:flex;align-items:center;gap:10px}
.amPaperLabel{flex:1;font-size:13px;color:#c7d8ef;font-weight:500}
.amPaperRow .amPaperScore{width:80px;text-align:right}
/* light mode */
body.light .paperDefRow{background:#f8fafc;border-color:#e2e8f0}
body.light .paperDefNameInput{background:#fff;border-color:#cbd5e1;color:#0f172a}
body.light .amPaperLabel{color:#334155}



/* Header — darker, with strong shadow to separate from content */
body.light header{
  background: #0f172a;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  padding: 22px 28px;
  margin-bottom: 8px;
}

/* Main content area — more breathing room */
body.light main{
  padding: 28px 20px;
  gap: 20px;
}

/* Sections / cards — white on off-white, consistent border + shadow + padding */
body.light section{
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  padding: 24px;
  border-radius: 12px;
}

/* Modals */
body.light .modal-content,
body.light .textActionModal .textActionContent{
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--section-border);
  box-shadow: 0 8px 32px var(--modal-shadow);
}
body.light .modal-content label,
body.light .modal-content h2,
body.light .modal-content h3,
body.light .modal-content p,
body.light .modal-content span{
  color: var(--text);
}

/* Typography */
body.light h2, body.light h3{
  color: #111827;
  font-weight: 700;
}
body.light h4{
  color: #1f2937;
  font-weight: 600;
}
body.light label, body.light p, body.light span,
body.light td, body.light th, body.light li{
  color: var(--text);
}
body.light .countdownMeta,
body.light .countdownEmpty,
body.light .muted{
  color: var(--text-muted);
}

/* Countdown items */
body.light .countdownItem{
  background: #F9F9FB;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* Toast */
body.light .toast{
  background: rgba(17,24,39,0.94);
  color: #fff;
  border-color: rgba(0,0,0,0.12);
}


/* Tables (deckTable still used in other places) */
body.light .deckTable{
  background: #fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
body.light .deckTable th,
body.light .deckTable td{
  color: var(--text);
  border-color: rgba(0,0,0,0.06);
}
body.light .deckTable th{
  background: #f8f9fb;
  font-weight: 700;
  color: #64748b;
}
body.light .deckTable tr:hover td{
  background: #f1f5f9;
}
body.light .deckTable tr:nth-child(even){
  background: #fafbfc;
}
body.light .deckTable input,
body.light .deckTable select{
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--input-border);
}
body.light .deckCountBadge{
  background:rgba(0,0,0,0.07);
  color:#475569;
}
body.light .deckCountBadge.hasDue{
  background:rgba(239,68,68,0.1);
  color:#dc2626;
}
body.light .deckCountBadge.hasNew{
  background:rgba(37,99,235,0.1);
  color:#2563eb;
}
body.light #decks .deckSidePane{
  background:#fff;
  border-color:rgba(0,0,0,0.09);
}

/* Text areas */
body.light #noteCardText,
body.light #noteText{
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
}

/* Form inputs */
body.light input, body.light textarea, body.light select{
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
}
body.light select option{
  background: #fff;
  color: var(--text);
}

/* Buttons — base: soft grey, extra padding, subtle shadow */
body.light button{
  background: #E8E8EC;
  color: #111827;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.06);
  padding: 11px 22px;
  border: none;
}
body.light button:hover, body.light button:focus{
  background: #0f172a;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

/* Accent buttons keep colour */
body.light #addMockBtn,
body.light #addDeckBtn,
body.light .dashboardTabs .tab.active{
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
body.light #addMockBtn:hover,
body.light #addDeckBtn:hover,
body.light #addDeckBtn:focus{
  background: #1d4ed8 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(37,99,235,0.35) !important;
}
body.light .dashboardTabs .tab{
  background: #e4e4e7;
  color: #111827;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body.light .dashboardTabs .tab:hover{
  background: #111827 !important;
  color: #fff !important;
}

body.light .statCard .label{
  color: var(--accent);
}

/* Dot overlay — very subtle */
body.light::before{
  background:
    radial-gradient(circle at 1px 1px, var(--dot-color) 1px, transparent 0) 0 0/22px 22px,
    radial-gradient(circle at 1px 1px, var(--dot-color) 1px, transparent 0) 11px 11px/22px 22px;
}
body.light::after{
  background: none;
}

/* ---- Home page panels ---- */
body.light .homeGrid{
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  border-radius: 16px;
  backdrop-filter: none;
  padding: 20px;
}

/* Nav buttons — lighter grey, clearly subordinate to white cards */
body.light .homeBtn{
  background: #ECECEF;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  font-weight: 600;
  padding: 20px 22px;
}
body.light .homeBtn:hover{
  background: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(37,99,235,0.28) !important;
  transform: translateY(-2px);
}

/* Heatmap panel */
body.light .homeCharts #homeHeatmapWrap{
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  border-radius: 16px;
  backdrop-filter: none;
  padding: 24px 24px 32px;
}

/* Calendar heatmap cells */
body.light .calendarHeatmap .heatCell{
  background: #F0F0F3;
  border: 1px solid rgba(0,0,0,0.09);
  color: var(--text);
}
body.light .calendarHeatmap .heatCell.empty{
  background: #F7F7F9;
  border-color: rgba(0,0,0,0.05);
}
body.light .calendarHeatmap .heatDayLabel{
  color: var(--text);
}
body.light .calendarHeatmap .heatCell.level-1 { background:rgba(58,123,255,0.20) !important; border-color:rgba(58,123,255,0.35) !important; }
body.light .calendarHeatmap .heatCell.level-2 { background:rgba(58,123,255,0.45) !important; border-color:rgba(58,123,255,0.55) !important; }
body.light .calendarHeatmap .heatCell.level-3 { background:rgba(58,123,255,0.75) !important; border-color:rgba(58,123,255,0.85) !important; }
body.light .calendarHeatmap .heatCell.level-4 { background:#3A7BFF !important; border-color:#3A7BFF !important; }
body.light .calendarHeatmap .heatCell.level-5 { background:#3A7BFF !important; border-color:#3A7BFF !important; box-shadow:0 0 8px rgba(58,123,255,0.5) !important; }
body.light .weekdayRow{
  color: var(--text-muted);
}

/* Progress heatmap cells */
body.light .progressHeatmap .heatCell{
  background: #e8e8ec;
  border: 1px solid rgba(0,0,0,0.07);
}
body.light .heatCell.level-1 { background:rgba(58,123,255,0.20) !important; border-color:rgba(58,123,255,0.35) !important; }
body.light .heatCell.level-2 { background:rgba(58,123,255,0.45) !important; border-color:rgba(58,123,255,0.55) !important; }
body.light .heatCell.level-3 { background:rgba(58,123,255,0.75) !important; border-color:rgba(58,123,255,0.85) !important; }
body.light .heatCell.level-4 { background:#3A7BFF !important; border-color:#3A7BFF !important; }
body.light .heatCell.level-5 { background:#3A7BFF !important; border-color:#3A7BFF !important; box-shadow:0 0 8px rgba(58,123,255,0.5) !important; }
body.light .heatCell:hover { filter:brightness(0.9); }

/* Countdown mini card */
body.light .homeCountdownMini{
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  border-radius: 16px;
  color: var(--text);
  backdrop-filter: none;
  padding: 22px;
}
body.light .homeCountdownItem{
  color: var(--text);
}

/* To-do mini card */
body.light .homeTodoMini{
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  border-radius: 16px;
  backdrop-filter: none;
  padding: 22px;
}
body.light .homeTodoItem{
  background: #F5F5F7;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px;
  padding: 10px 14px;
}
body.light .homeTodoTitle{
  color: #111827;
  font-weight: 600;
}
body.light .homeTodoMeta{
  color: var(--text-muted);
}
body.light .homeTodoEmpty{
  color: var(--text-muted);
}

/* Insight blocks */
body.light .insight{
  background: rgba(37,99,235,0.04);
  border-left-color: rgba(37,99,235,0.35);
  color: var(--text);
}

/* ---- Timetable (light mode) ---- */
body.light .ttTable th{
  background: #ECECEF;
  border-color: rgba(0,0,0,0.1);
  color: var(--text);
}
body.light .ttTimeTh,
body.light .ttTimeCell{
  background: #f4f4f6;
  color: var(--text-muted);
  border-right-color: rgba(0,0,0,0.1);
}
body.light .ttCell{
  background: #F9F9FB;
  border-color: rgba(0,0,0,0.07);
}
body.light .ttCell:hover{
  background: #ECECEF;
}
body.light .ttCell.ttTodayCell{
  background: rgba(37,99,235,0.04);
}
body.light .ttCell.dragOver{
  background: rgba(37,99,235,0.08);
  outline-color: rgba(37,99,235,0.5);
}
body.light .timetableSidebar{
  background: #f4f4f6;
  border-right-color: rgba(0,0,0,0.1);
  color: var(--text);
}
body.light .ttSubjectChip{
  background: #fff;
  border-color: rgba(0,0,0,0.1);
  color: var(--text);
}
body.light .ttTopBar{
  border-bottom-color: rgba(0,0,0,0.1);
}
body.light .ttStatsBar{
  border-bottom-color: rgba(0,0,0,0.08);
}
body.light .ttWeekLabel{
  color: var(--text);
}
body.light .ttMonthCell{
  background: #f4f4f6;
  border-color: rgba(0,0,0,0.08);
  color: var(--text);
}
body.light .ttMonthHeader{
  color: var(--text-muted);
}
body.light .ttMonthCell.ttMonthToday{
  border-color: var(--accent);
  background: rgba(37,99,235,0.06);
}

/* ═══════════════════════════════════════════════
   FLASHNOTES PREMIUM DASHBOARD — v3
═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Colour palette — deep navy/violet */
  --fn-bg: #080B14;
  --fn-bg-2: #0D1120;
  --fn-surface: rgba(255,255,255,0.045);
  --fn-surface-2: rgba(255,255,255,0.07);
  --fn-sidebar-bg: rgba(8,11,20,0.96);
  --fn-glass: rgba(255,255,255,0.05);
  --fn-glass-hover: rgba(255,255,255,0.08);
  --fn-border: rgba(255,255,255,0.08);
  --fn-border-strong: rgba(255,255,255,0.15);

  /* Accents — electric blue / violet */
  --fn-accent: #4F8EFF;
  --fn-accent-2: #7C5CFC;
  --fn-accent-dim: rgba(79,142,255,0.18);
  --fn-accent-glow: rgba(79,142,255,0.32);
  --fn-violet: #7C5CFC;
  --fn-violet-dim: rgba(124,92,252,0.18);
  --fn-mint: #2DD4BF;
  --fn-mint-dim: rgba(45,212,191,0.15);
  --fn-warn: #FB923C;
  --fn-warn-dim: rgba(251,146,60,0.15);
  --fn-err: #F87171;
  --fn-err-dim: rgba(248,113,113,0.15);
  --fn-gold: #FBBF24;

  /* Text */
  --fn-text: #F0F4FF;
  --fn-text-2: #A8B4CC;
  --fn-muted: #5A6478;

  /* Layout */
  --fn-sidebar-w: 228px;
  --fn-sidebar-w-collapsed: 62px;
  --fn-topbar-h: 56px;
  --fn-radius: 16px;
  --fn-radius-sm: 10px;
  --fn-transition: 220ms cubic-bezier(0.4,0,0.2,1);

  /* Fonts */
  --fn-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fn-mono: 'JetBrains Mono', 'Fira Mono', monospace;
}

/* App shell */
#appShell {
  display: flex;
  min-height: calc(100vh / 0.82);
  background: #070B18;
  background-image:
    radial-gradient(ellipse 90% 70% at 15% -10%, rgba(56,108,255,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 85% 110%, rgba(110,72,230,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(15,24,50,0.8) 0%, transparent 100%);
  font-family: var(--fn-font);
  position: relative;
}

/* ── Animated background orbs (dark mode only) ── */
body:not(.light) #appShell::before {
  content: '';
  position: fixed;
  top: -20%;
  left: -5%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(ellipse, rgba(56,108,255,0.09) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: orbDrift 20s ease-in-out infinite alternate;
}
body:not(.light) #appShell::after {
  content: '';
  position: fixed;
  bottom: -15%;
  right: -5%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(ellipse, rgba(110,72,230,0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: orbDrift 26s ease-in-out infinite alternate-reverse;
}
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(3%, 4%) scale(1.05); }
  66%  { transform: translate(-2%, 2%) scale(0.98); }
  100% { transform: translate(2%, -3%) scale(1.03); }
}

/* Subtle diagonal light streak across dashboard */
body:not(.light) .fnDashboard::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, transparent 35%, rgba(79,142,255,0.018) 48%, transparent 58%),
    linear-gradient(72deg,  transparent 40%, rgba(124,92,252,0.014) 52%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.fnDashboard { position: relative; z-index: 1; }
.fnMetricRow, .fnDashGrid, .fnQuickActions { position: relative; z-index: 1; }
@keyframes fnDashSpin { to { transform: rotate(360deg); } }

/* ── Sidebar ───────────────────────────────────── */
#fnSidebar {
  width: var(--fn-sidebar-w);
  height: 100vh;
  min-height: 100%;
  background: rgba(7,11,24,0.88);
  border-right: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  display: flex;
  flex-direction: column;
  padding: 16px 10px;
  gap: 4px;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: width var(--fn-transition);
  overflow: hidden;
}

.fnSidebarTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 16px;
  border-bottom: 1px solid var(--fn-border);
  margin-bottom: 8px;
}

.fnLogo {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.fnLogoIcon { font-size: 22px; flex-shrink: 0; }
.fnLogoText {
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.55) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  transition: opacity var(--fn-transition);
  letter-spacing: -0.01em;
}

.fnSidebarToggle {
  background: none !important;
  border: none !important;
  color: var(--fn-muted) !important;
  font-size: 18px !important;
  padding: 4px !important;
  box-shadow: none !important;
  cursor: pointer;
  border-radius: 8px !important;
  transition: color var(--fn-transition), transform var(--fn-transition) !important;
  flex-shrink: 0;
}
.fnSidebarToggle:hover { color: var(--fn-text) !important; background: var(--fn-glass) !important; transform: none !important; }

.fnNavSection {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.fnNavLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fn-muted);
  padding: 4px 10px 6px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--fn-transition);
}

.fnNavItem {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 12px !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.65) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  cursor: pointer;
  width: 100%;
  text-align: left;
  box-shadow: none !important;
  transition: background var(--fn-transition), color var(--fn-transition) !important;
  white-space: nowrap;
  overflow: hidden;
}
.fnNavItem:hover {
  background: rgba(255,255,255,0.065) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}
.fnNavItemActive {
  background: linear-gradient(135deg, rgba(79,142,255,0.2), rgba(124,92,252,0.14)) !important;
  color: #6BAAFF !important;
  box-shadow: inset 0 0 0 1px rgba(79,142,255,0.25) !important;
}
.fnNavItemActive:hover { background: linear-gradient(135deg, rgba(79,142,255,0.22), rgba(124,92,252,0.16)) !important; }

.fnNavIcon { font-size: 18px; flex-shrink: 0; }
.fnNavText { transition: opacity var(--fn-transition); white-space: nowrap; }

.fnNavItemSmall {
  font-size: 12px !important;
  padding: 7px 10px !important;
}

.fnSidebarBottom {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--fn-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.fnNavScroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.fnNavScroll::-webkit-scrollbar { width: 4px; }
.fnNavScroll::-webkit-scrollbar-track { background: transparent; }
.fnNavScroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

.fnUserChip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--fn-glass);
  border: 1px solid var(--fn-border);
  overflow: hidden;
}
.fnUserAvatar { font-size: 16px; flex-shrink: 0; }
.fnUserName {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Collapsed sidebar */
#appShell.fnSidebarCollapsed #fnSidebar,
#fnSidebar.fnSidebarCollapsed {
  width: var(--fn-sidebar-w-collapsed);
}
#appShell.fnSidebarCollapsed #fnContent,
#fnSidebar.fnSidebarCollapsed ~ #fnContent {
  margin-left: var(--fn-sidebar-w-collapsed);
}
#appShell.fnSidebarCollapsed .fnLogoText,
#appShell.fnSidebarCollapsed .fnNavText,
#appShell.fnSidebarCollapsed .fnNavLabel,
#appShell.fnSidebarCollapsed .fnUserName,
#fnSidebar.fnSidebarCollapsed .fnLogoText,
#fnSidebar.fnSidebarCollapsed .fnNavText,
#fnSidebar.fnSidebarCollapsed .fnNavLabel,
#fnSidebar.fnSidebarCollapsed .fnUserName { opacity: 0; pointer-events: none; }
#appShell.fnSidebarCollapsed .fnSidebarToggle,
#fnSidebar.fnSidebarCollapsed .fnSidebarToggle { transform: rotate(180deg); }

/* ── Content area ──────────────────────────────── */
#fnContent {
  margin-left: var(--fn-sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh / 0.82);
  transition: margin-left var(--fn-transition);
}

/* ── Top bar ───────────────────────────────────── */
#fnTopBar {
  height: var(--fn-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: rgba(15,15,16,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--fn-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
#fnPageTitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--fn-text);
  letter-spacing: -0.01em;
}
#fnTopBarRight {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fnDueBanner {
  font-size: 12px;
  color: var(--fn-muted);
}

/* Override main so it sits flush under topbar */
#fnContent main {
  padding: 24px;
  gap: 0;
  align-items: stretch;
}
#fnContent .section { max-width: none; }

/* ── Dashboard ─────────────────────────────────── */
.fnDashboard {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  min-height: 100vh;
}

/* ── STAT CARDS (3-col) ─────────────────────────── */
.fnStatRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fnStatCard {
  position: relative;
  overflow: hidden;
  background: var(--fn-surface);
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius);
  padding: 22px 22px 18px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: box-shadow var(--fn-transition), border-color var(--fn-transition), transform var(--fn-transition);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.fnStatCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Coloured glow blobs per card */
.fnStatCardBg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--fn-transition);
}
.fnStatCard:hover .fnStatCardBg { opacity: 1; }
.fnStatCard--tasks .fnStatCardBg  { background: radial-gradient(ellipse at 80% 20%, rgba(58,123,255,0.12) 0%, transparent 70%); }
.fnStatCard--cards .fnStatCardBg  { background: radial-gradient(ellipse at 80% 20%, rgba(79,227,193,0.12) 0%, transparent 70%); }
.fnStatCard--streak .fnStatCardBg { background: radial-gradient(ellipse at 80% 20%, rgba(255,184,77,0.12) 0%, transparent 70%); }

/* Coloured left border accent */
.fnStatCard--tasks  { border-left: 3px solid var(--fn-accent); }
.fnStatCard--cards  { border-left: 3px solid var(--fn-mint); }
.fnStatCard--streak { border-left: 3px solid var(--fn-warn); }

.fnStatCardInner { position: relative; }
.fnStatCardTop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.fnStatCardTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--fn-text-2);
  letter-spacing: 0.01em;
}
.fnStatIconWrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fnStatIconWrap--blue { background: var(--fn-accent-dim); color: var(--fn-accent); }
.fnStatIconWrap--mint { background: var(--fn-mint-dim); color: var(--fn-mint); }
.fnStatIconWrap--warn { background: var(--fn-warn-dim); color: var(--fn-warn); }

.fnStatCardNum {
  font-family: var(--fn-mono);
  font-size: 38px;
  font-weight: 600;
  color: var(--fn-text);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.fnStatCardSub {
  font-size: 12px;
  color: var(--fn-muted);
  font-weight: 400;
}

/* ── CALENDAR SECTION (full-width) ──────────────── */
.fnCalendarSection { width: 100%; }

/* Glass card */
.fnGlassCard {
  background: var(--fn-surface);
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius);
  padding: 20px 22px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.fnCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.fnCardTitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--fn-text);
  letter-spacing: 0.01em;
}
.fnCardSub {
  font-size: 12px;
  color: var(--fn-muted);
  margin-top: 2px;
}

.fnIconBtn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--fn-border) !important;
  color: var(--fn-text-2) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background var(--fn-transition) !important;
  line-height: 1.4 !important;
}
.fnIconBtn:hover { background: rgba(255,255,255,0.12) !important; transform: none !important; }

.fnMonthLabel {
  font-family: var(--fn-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--fn-text);
  min-width: 100px;
  text-align: center;
}

.fnChipBtn {
  background: var(--fn-accent-dim) !important;
  border: 1px solid rgba(58,123,255,0.3) !important;
  color: var(--fn-accent) !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
  transition: background var(--fn-transition), box-shadow var(--fn-transition) !important;
}
.fnChipBtn:hover {
  background: rgba(58,123,255,0.26) !important;
  box-shadow: 0 0 12px rgba(58,123,255,0.2) !important;
  transform: none !important;
}

/* ── NEW DASHBOARD LAYOUT ──────────────────────────── */

/* ── 4 Metric Cards Row ──────────────────────────── */
.fnMetricRow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.fnMetricCard {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 26px 24px 22px;
  border: none;
  outline: none;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: transform 250ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 250ms ease;
  cursor: default;
  background: rgba(255,255,255,0.04);
  /* Shadow only downward — no top/right glow */
  box-shadow: 0 10px 36px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.18);
}
/* Remove the top-left sheen that was bleeding onto top/right edges */
.fnMetricCard::after { display: none; }
.fnMetricCard:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* Per-card gradient backgrounds — gradient runs bottom-left to top-right
   but card color only shows on bottom/left; top fades to match background */
.fnMetricCard--blue {
  background: linear-gradient(200deg, transparent 0%, rgba(56,108,255,0.28) 100%);
  box-shadow: 0 10px 36px rgba(56,108,255,0.18), 0 2px 8px rgba(0,0,0,0.2);
}
.fnMetricCard--blue:hover { box-shadow: 0 20px 60px rgba(56,108,255,0.26); }

.fnMetricCard--violet {
  background: linear-gradient(200deg, transparent 0%, rgba(110,72,230,0.28) 100%);
  box-shadow: 0 10px 36px rgba(110,72,230,0.2), 0 2px 8px rgba(0,0,0,0.2);
}
.fnMetricCard--violet:hover { box-shadow: 0 20px 60px rgba(110,72,230,0.32); }

.fnMetricCard--amber {
  background: linear-gradient(200deg, transparent 0%, rgba(234,88,12,0.26) 100%);
  box-shadow: 0 10px 36px rgba(234,88,12,0.16), 0 2px 8px rgba(0,0,0,0.2);
}
.fnMetricCard--amber:hover { box-shadow: 0 20px 60px rgba(234,88,12,0.28); }

.fnMetricCard--mint {
  background: linear-gradient(200deg, transparent 0%, rgba(16,180,150,0.26) 100%);
  box-shadow: 0 10px 36px rgba(16,180,150,0.16), 0 2px 8px rgba(0,0,0,0.2);
}
.fnMetricCard--mint:hover { box-shadow: 0 20px 60px rgba(16,180,150,0.28); }

/* Glow blobs — moved to bottom-left so they don't leak onto top/right edges */
.fnMetricGlow {
  position: absolute;
  bottom: -30%;
  left: -15%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.35;
}
.fnMetricGlow--blue   { background: #4F8EFF; }
.fnMetricGlow--violet { background: #7C5CFC; }
.fnMetricGlow--amber  { background: #FB923C; }
.fnMetricGlow--mint   { background: #2DD4BF; }

.fnMetricIcon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.fnMetricCard--blue   .fnMetricIcon { background: rgba(79,142,255,0.18); color: #7BB5FF; border: 1px solid rgba(79,142,255,0.25); }
.fnMetricCard--violet .fnMetricIcon { background: rgba(124,92,252,0.18); color: #A98AFF; border: 1px solid rgba(124,92,252,0.25); }
.fnMetricCard--amber  .fnMetricIcon { background: rgba(251,146,60,0.18);  color: #FDBA74; border: 1px solid rgba(251,146,60,0.25); }
.fnMetricCard--mint   .fnMetricIcon { background: rgba(45,212,191,0.18);  color: #5EEAD4; border: 1px solid rgba(45,212,191,0.25); }

.fnMetricNum {
  font-size: 44px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.fnMetricLabel {
  font-size: 15px;
  color: rgba(200,215,255,0.55);
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}

/* Light mode metric cards */
body.light .fnMetricCard {
  background: #fff;
  border-color: rgba(0,0,0,0.13);
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}
body.light .fnMetricCard::after { display: none; }
body.light .fnMetricCard:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.1); }
body.light .fnMetricGlow { opacity: 0.1; }
body.light .fnMetricCard--blue   { background: linear-gradient(145deg,rgba(79,142,255,0.06) 0%,#fff 60%); border-top: 2px solid #4F8EFF; }
body.light .fnMetricCard--violet { background: linear-gradient(145deg,rgba(124,92,252,0.06) 0%,#fff 60%); border-top: 2px solid #7C5CFC; }
body.light .fnMetricCard--amber  { background: linear-gradient(145deg,rgba(251,146,60,0.06) 0%,#fff 60%);  border-top: 2px solid #FB923C; }
body.light .fnMetricCard--mint   { background: linear-gradient(145deg,rgba(45,212,191,0.06) 0%,#fff 60%);  border-top: 2px solid #2DD4BF; }
body.light .fnMetricNum { color: #0f172a; text-shadow: none; }
body.light .fnMetricLabel { color: #64748b; }
body.light .fnMetricCard--blue   .fnMetricIcon { background: rgba(79,142,255,0.1); border-color: rgba(79,142,255,0.2); }
body.light .fnMetricCard--violet .fnMetricIcon { background: rgba(124,92,252,0.1); border-color: rgba(124,92,252,0.2); }
body.light .fnMetricCard--amber  .fnMetricIcon { background: rgba(251,146,60,0.1);  border-color: rgba(251,146,60,0.2); }
body.light .fnMetricCard--mint   .fnMetricIcon { background: rgba(45,212,191,0.1);  border-color: rgba(45,212,191,0.2); }

@media (max-width: 900px) { .fnMetricRow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .fnMetricRow { grid-template-columns: 1fr 1fr; } }

/* Today Overview Bar */
.fnTodayBar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--fn-surface);
  border: 1px solid var(--fn-border);
  border-radius: 16px;
  padding: 14px 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 8px rgba(0,0,0,0.18);
  margin-bottom: 18px;
}
.fnTodayBarItem {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  padding: 4px 16px;
}
.fnTodayBarItem:first-child { padding-left: 0; }
.fnTodayBarItem:last-child { padding-right: 0; }
.fnTodayBarDivider {
  width: 1px;
  height: 32px;
  background: var(--fn-border);
  flex-shrink: 0;
}
.fnTodayBarIcon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fnTodayBarIcon--blue { background: rgba(37,99,235,0.12); color: #3b82f6; }
.fnTodayBarIcon--mint { background: rgba(16,185,129,0.12); color: #10b981; }
.fnTodayBarIcon--amber { background: rgba(245,158,11,0.12); color: #f59e0b; }
.fnTodayBarText { display: flex; flex-direction: column; gap: 1px; }
.fnTodayBarNum {
  font-size: 26px;
  font-weight: 700;
  color: var(--fn-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fnTodayBarLabel {
  font-size: 13px;
  color: var(--fn-muted);
  letter-spacing: 0.01em;
}

/* Main grid */
.fnDashGrid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
  margin-bottom: 18px;
}
.fnDashLeft {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Section containers (borderless, spacing-based) */
.fnDashSection {
  background: rgba(255,255,255,0.032);
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 20px;
  padding: 22px 24px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.07);
  margin-bottom: 12px;
}
.fnDashSection:last-child { margin-bottom: 0; }
.fnDashSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.fnDashSectionTitle {
  font-size: 15px;
  font-weight: 700;
  color: rgba(220,235,255,0.9);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 14px;
}
.fnDashPill {
  font-size: 13px;
  font-weight: 600;
  color: #7BB5FF;
  background: rgba(79,142,255,0.12);
  border: 1px solid rgba(79,142,255,0.2);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fnDashPill:hover { background: rgba(79,142,255,0.2); border-color: rgba(79,142,255,0.35); }

/* Level section specific */
.fnLevelSection .fnLevelRow { margin-bottom: 10px; }

/* Right column side cards */
.fnDashRightCol {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fnDashSideCard {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 18px 20px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: box-shadow 0.22s, border-color 0.22s, transform 0.22s;
}
.fnDashSideCard:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.42); border-color: rgba(79,142,255,0.15); transform: translateY(-2px); }
.fnDashSideCardLabel {
  font-size: 13px;
  font-weight: 700;
  color: rgba(160,185,230,0.45);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Todo list in dashboard */
.fnDashTodoList { display: flex; flex-direction: column; gap: 8px; }
.fnDashTodoList .homeTodoItem {
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.038);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 0.15s, border-color 0.15s;
}
.fnDashTodoList .homeTodoItem:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(79,142,255,0.18);
}

/* Responsive */
@media (max-width: 860px) {
  .fnDashGrid { grid-template-columns: 1fr; }
  .fnTodayBar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fnTodayBarDivider { width: 100%; height: 1px; }
  .fnTodayBarItem { padding: 0; }
}

/* Light mode overrides for new components */
body.light .fnTodayBar { box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
body.light .fnDashSection {
  background: #fff;
  border-color: rgba(0,0,0,0.13);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
body.light .fnDashSection .fnDashSectionTitle { color: #0f172a; font-size: 14px; text-transform: none; letter-spacing: 0.01em; }
body.light .fnDashSideCard {
  background: #fff;
  border-color: rgba(0,0,0,0.13);
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
}
body.light .fnDashSideCard:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.09); border-color: rgba(79,142,255,0.25); transform: translateY(-2px); }
body.light .fnDashSideCardLabel { color: #94a3b8; }
body.light .fnDashPill { color: #2563eb; background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.18); }
body.light .fnDashPill:hover { background: rgba(37,99,235,0.14); }
body.light .fnTodayBarIcon--blue { background: rgba(37,99,235,0.09); }
body.light .fnTodayBarIcon--mint { background: rgba(16,185,129,0.09); }
body.light .fnTodayBarIcon--amber { background: rgba(245,158,11,0.09); }
body.light .fnDashTodoList .homeTodoItem { background: #f8fafc; border-color: rgba(0,0,0,0.1); }
body.light .fnDashTodoList .homeTodoItem:hover { border-color: rgba(37,99,235,0.22); background: rgba(37,99,235,0.04); }

/* ── BOTTOM TWO COLUMNS ──────────────────────────── */
.fnDashBottom {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: stretch;
}

.fnTodoCard {
  display: flex;
  flex-direction: column;
}

.fnTodoCard .homeTodoList {
  flex: 1;
}

.fnDashRightCol {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Recommended Practice card ── */
.fnRecCard { border-left: 3px solid var(--fn-accent) !important; }
.fnRecMain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.fnRecSubject {
  font-family: var(--fn-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--fn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.fnRecBadge {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--fn-accent-dim);
  color: var(--fn-accent);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* ── Countdown mini ── */
.fnCountdownMini { display: flex; flex-direction: column; gap: 7px; }
.fnCountdownItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.038);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 0.15s, border-color 0.15s;
  gap: 8px;
}
.fnCountdownItem:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(79,142,255,0.2);
}
.fnCountdownTitle {
  font-size: 15px;
  color: var(--fn-text-2);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.fnCountdownDays {
  font-family: var(--fn-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--fn-accent);
  flex-shrink: 0;
  background: var(--fn-accent-dim);
  padding: 2px 8px;
  border-radius: 10px;
}

/* ── QUICK ACTIONS BAR ──────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   UNIFIED BOTTOM BAR
   ═══════════════════════════════════════════════════════════ */
.fnBottomBar {
  position: relative;
  margin-top: 16px;
}

/* ── Tools drawer ───────────────────────────────────────── */
.fnToolsDrawer {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  padding: 14px 20px;
  background: rgba(8,12,26,0.82);
  border: 1px solid rgba(255,255,255,0.07);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.28);
  /* collapsed */
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1),
              opacity 0.25s ease,
              transform 0.28s cubic-bezier(0.4,0,0.2,1),
              padding 0.28s ease;
  pointer-events: none;
}
.fnToolsDrawer.open {
  max-height: 160px;
  padding-top: 14px;
  padding-bottom: 14px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Main bar ───────────────────────────────────────────── */
.fnBBarInner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 20px;
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.fnToolsDrawer.open + .fnBBarInner {
  border-radius: 0 0 20px 20px;
  border-top-color: rgba(255,255,255,0.03);
}

/* ── Groups ─────────────────────────────────────────────── */
.fnBBarGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.fnBBarGroup--right {
  flex: 0 0 auto;
  align-items: flex-end;
}
.fnBBarCat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(160,185,230,0.35);
  padding-left: 2px;
}
.fnBBarBtns {
  display: flex;
  gap: 8px;
}
.fnBBarDivider {
  width: 1px;
  height: 52px;
  background: rgba(255,255,255,0.06);
  margin: 0 20px;
  flex-shrink: 0;
  align-self: center;
}

/* ── Buttons (shared) ───────────────────────────────────── */
.fnBBarBtn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,0.032) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  color: rgba(190,210,255,0.55) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  font-family: var(--fn-font) !important;
  letter-spacing: 0.03em !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  white-space: nowrap;
  min-width: 62px;
}
.fnBBarIcon {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  stroke: currentColor;
}
.fnBBarText {
  line-height: 1;
  font-size: 10px;
  font-family: var(--fn-font);
}
.fnBBarBtn:hover {
  background: rgba(79,142,255,0.1) !important;
  border-color: rgba(79,142,255,0.25) !important;
  color: #7BB5FF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(79,142,255,0.14) !important;
}
.fnBBarBtn:active {
  transform: translateY(0px) !important;
}

/* ── Core (larger) buttons ──────────────────────────────── */
.fnBBarBtn--core {
  padding: 12px 20px !important;
  min-width: 80px;
  border-radius: 16px !important;
  color: rgba(210,225,255,0.7) !important;
  font-size: 10.5px !important;
}
.fnBBarBtn--core .fnBBarIcon {
  width: 22px;
  height: 22px;
}
.fnBBarBtn--core:hover {
  box-shadow: 0 6px 22px rgba(79,142,255,0.18) !important;
}

/* AI button glows violet */
.fnBBarBtn--ai:hover {
  background: rgba(124,92,252,0.12) !important;
  border-color: rgba(124,92,252,0.3) !important;
  color: #A78BFA !important;
  box-shadow: 0 6px 22px rgba(124,92,252,0.2) !important;
}

/* ── Tools toggle button ────────────────────────────────── */
.fnBBarToolsToggle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
  color: rgba(170,195,240,0.5) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: var(--fn-font) !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s !important;
  white-space: nowrap;
}
.fnBBarToolsToggle .fnBBarIcon {
  width: 16px; height: 16px;
  opacity: 0.6;
}
.fnBBarArrow {
  width: 12px; height: 12px;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  opacity: 0.5;
}
.fnBBarToolsToggle:hover {
  background: rgba(79,142,255,0.08) !important;
  border-color: rgba(79,142,255,0.2) !important;
  color: #7BB5FF !important;
  box-shadow: 0 4px 16px rgba(79,142,255,0.1) !important;
}
.fnBBarToolsToggle[aria-expanded="true"] {
  background: rgba(79,142,255,0.1) !important;
  border-color: rgba(79,142,255,0.22) !important;
  color: #7BB5FF !important;
}
.fnBBarToolsToggle[aria-expanded="true"] .fnBBarArrow {
  transform: rotate(180deg);
}

/* Placeholder cards (empty state) */
.fnPlaceholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  color: var(--fn-muted);
  text-align: center;
}
.fnPlaceholderIcon { font-size: 28px; opacity: 0.5; }
.fnPlaceholderText { font-size: 12px; font-weight: 500; color: var(--fn-muted); }
.fnPlaceholderSub  { font-size: 11px; color: var(--fn-muted); opacity: 0.7; }

/* ═══════════════════════════════════════════════════════════
   GAMIFICATION — Level Card, XP Bar, Challenges, Goals
   ═══════════════════════════════════════════════════════════ */

/* Level card on home */
.fnLevelCard { margin-bottom: 16px; }
.fnLevelRow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fnLevelBadge {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, rgba(245,197,66,0.18), rgba(245,127,32,0.18));
  border: 1px solid rgba(245,197,66,0.35);
  border-radius: 20px; padding: 6px 18px;
  font-size: 15px; font-weight: 800; color: #f5c542;
  letter-spacing: 0.02em;
}
.fnXpTotalLabel { font-size: 12px; color: var(--fn-muted); }

.fnXpBarWrap { display: flex; flex-direction: column; gap: 6px; }
.fnXpBar {
  height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}
.fnXpBarFill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #4F8EFF, #7C5CFC);
  box-shadow: 0 0 12px rgba(79,142,255,0.5);
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.fnXpBarLabel { font-size: 11px; color: var(--fn-muted); }

/* XP toast notification */
.xpToast {
  position: fixed; bottom: 80px; right: 20px; z-index: 99999;
  background: linear-gradient(135deg, #1a2535, #0f1724);
  border: 1px solid rgba(78,161,255,0.4);
  border-radius: 12px; padding: 10px 18px;
  font-size: 14px; font-weight: 700; color: #4ea1ff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.xpToast.xpToastVisible { opacity: 1; transform: translateY(0); }

/* Level up banner */
.levelUpBanner {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-20px);
  z-index: 99999;
  background: linear-gradient(135deg, rgba(245,197,66,0.95), rgba(245,127,32,0.95));
  border-radius: 14px; padding: 12px 28px;
  font-size: 16px; font-weight: 800; color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  opacity: 0; transition: opacity 0.4s, transform 0.4s;
  pointer-events: none; white-space: nowrap;
}
.levelUpBanner.levelUpBannerVisible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Challenge complete animation */
.challengeCompleteAnim {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-20px);
  z-index: 99998;
  background: linear-gradient(135deg, rgba(52,211,153,0.95), rgba(16,185,129,0.95));
  border-radius: 14px; padding: 12px 28px;
  font-size: 15px; font-weight: 800; color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  opacity: 0; transition: opacity 0.4s, transform 0.4s;
  pointer-events: none; white-space: nowrap;
}
.challengeCompleteAnim.challengeCompleteAnimVisible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Challenges page */
.chResetLabel {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--fn-muted);
  margin: 12px 0 16px;
}
.chChallengeGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; margin-bottom: 24px;
}
.chCard {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px; padding: 16px 18px;
  transition: border-color 0.15s, background 0.15s;
}
.chCard:hover { background: rgba(255,255,255,0.05); border-color: rgba(78,161,255,0.3); }
.chCardDone {
  background: rgba(52,211,153,0.05) !important;
  border-color: rgba(52,211,153,0.25) !important;
  opacity: 0.65;
}
.chCardReady {
  border-color: rgba(245,197,66,0.5) !important;
  background: rgba(245,197,66,0.06) !important;
  box-shadow: 0 0 0 1px rgba(245,197,66,0.2);
}
.chCardTop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.chCardTitle { font-size: 14px; font-weight: 700; color: var(--fn-text); }
.chCardXP {
  font-size: 12px; font-weight: 700; padding: 2px 10px;
  background: rgba(78,161,255,0.12); border: 1px solid rgba(78,161,255,0.25);
  border-radius: 20px; color: #4ea1ff; white-space: nowrap;
}
.chCardXPDone { background: rgba(52,211,153,0.12) !important; border-color: rgba(52,211,153,0.3) !important; color: #34d399 !important; }
.chCardDesc { font-size: 12px; color: var(--fn-muted); margin-bottom: 12px; line-height: 1.4; }
.chProgressWrap { display: flex; flex-direction: column; gap: 4px; }
.chProgressBar {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.07); overflow: hidden;
}
.chProgressFill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #4ea1ff, #7c6bff);
  transition: width 0.4s ease;
}
.chProgressFillGreen { background: linear-gradient(90deg, #34d399, #10b981) !important; }
.chProgressFillReady { background: linear-gradient(90deg, #f5c542, #f59e0b) !important; }
.chProgressLabel { font-size: 11px; color: var(--fn-muted); }
.chCollectBtn {
  margin-top: 12px; width: 100%; padding: 9px 16px;
  background: linear-gradient(135deg, #f5c542, #f59e0b);
  border: none; border-radius: 10px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #1a1a1a;
  transition: opacity 0.15s, transform 0.1s;
}
.chCollectBtn:hover { opacity: 0.9; transform: translateY(-1px); }
.chCollectBtn:active { transform: translateY(0); }
.chCollectDone {
  margin-top: 10px; text-align: center;
  font-size: 12px; color: #34d399; font-weight: 600;
}
.chCountdownVal {
  font-weight: 700; color: #4ea1ff; font-variant-numeric: tabular-nums;
}
.chResetLabel {
  font-size: 11px; color: var(--fn-muted); margin-bottom: 14px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.chEmptyState {
  padding: 32px 16px; text-align: center;
  font-size: 13px; color: var(--fn-muted);
}

/* Goal cards */
.goalCard {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 14px 16px;
  margin-bottom: 10px;
}
.goalCardDone {
  background: rgba(52,211,153,0.04) !important;
  border-color: rgba(52,211,153,0.2) !important;
}
.goalCardTop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.goalCardSubject { font-size: 14px; font-weight: 700; color: var(--fn-text); display: flex; align-items: center; gap: 8px; }
.goalTypeBadge {
  font-size: 10px; font-weight: 600;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 2px 6px; color: var(--fn-muted);
}
.goalCardXp {
  font-size: 12px; font-weight: 700; padding: 2px 10px;
  background: rgba(245,197,66,0.12); border: 1px solid rgba(245,197,66,0.25);
  border-radius: 20px; color: #f5c542; white-space: nowrap;
}
.goalCardScores { font-size: 12px; color: var(--fn-muted); margin-bottom: 10px; display: flex; gap: 16px; }
.goalCardScores b { color: var(--fn-text); }

/* Light mode adjustments */
body.light .chCard { background: #fff; border-color: rgba(0,0,0,0.15); }
body.light .chCard:hover { background: #f8faff; border-color: rgba(58,123,255,0.3); }
body.light .chCardDone { background: rgba(16,185,129,0.04) !important; border-color: rgba(16,185,129,0.2) !important; }
body.light .chCardTitle { color: #0f172a; }
body.light .chCardDesc { color: #64748b; }
body.light .chProgressBar { background: rgba(0,0,0,0.08); }
body.light .goalCard { background: #fff; border-color: rgba(0,0,0,0.15); }
body.light .goalCardDone { background: rgba(16,185,129,0.04) !important; border-color: rgba(16,185,129,0.2) !important; }
body.light .goalCardSubject { color: #0f172a; }
body.light .goalCardScores { color: #64748b; }
body.light .goalCardScores b { color: #0f172a; }
body.light .fnLevelBadge { background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(99,102,241,0.1)); }
body.light .fnXpBar { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.14); }
body.light .xpToast { background: #fff; border-color: rgba(78,161,255,0.4); color: #2563eb; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }


/* Override old header when sidebar is present */
#appShell header { display: none; }
/* Keep non-home sections looking consistent */
#fnContent .section:not(#home) {
  padding: 0;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
/* Full-width sections — no max-width constraint */
.fullscreen-draw #notes {
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
}

.fullscreen-draw #notesContent,
.fullscreen-draw #notesContent > .whiteboard-card,
.fullscreen-draw #notesContent .chapWbPanel,
.fullscreen-draw #notesContent .chapWbPanel .drawPanel {
  width: 100% !important;
  max-width: none !important;
}

/* Hide AI overlay elements so they don't block whiteboard interaction in fullscreen */
.fullscreen-draw #forcedAiOverlay,
.fullscreen-draw #aiAssistantPanel {
  display: none !important;
}

#fnContent #mind-map {
  max-width: none !important;
  margin: 0 !important;
}

/* Graphs — full bleed like Desmos */
#fnContent #graphs {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1;
  min-height: 0;
}
#fnContent main.showing-graphs {
  padding: 0 !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#fnContent main.showing-graphs #graphs {
  display: flex !important;
  flex: 1;
  min-height: 0;
}
.dmWrap { height: 100%; flex: 1; min-height: 0; display: flex; flex-direction: row; }
.dmCanvasWrap { flex: 1; min-height: 0; }

#fnContent main.showing-timetable {
  padding: 0 !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#fnContent main.showing-timetable #timetable {
  display: flex !important;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

#fnContent main.showing-annotate {
  padding: 0 !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#fnContent main.showing-annotate #annotate {
  display: flex !important;
  flex: 1;
  height: 100% !important;
  min-height: 0;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 1024px) {
  .fnDashBottom { grid-template-columns: 1fr 280px; }
  .fnToolsDrawer { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 900px) {
  .fnStatRow { grid-template-columns: repeat(2, 1fr); }
  .fnDashBottom { grid-template-columns: 1fr; }
  #fnSidebar { width: var(--fn-sidebar-w-collapsed); }
  #fnContent { margin-left: var(--fn-sidebar-w-collapsed); }
  .fnNavText, .fnNavLabel, .fnLogoText, .fnUserName { opacity: 0; pointer-events: none; }
  .fnBBarBtns { gap: 6px; }
  .fnBBarBtn--core { padding: 10px 14px !important; min-width: 70px; }
  .fnBBarDivider { margin: 0 12px; }
}
@media (max-width: 600px) {
  .fnStatRow { grid-template-columns: 1fr 1fr; }
  .fnBBarInner { padding: 12px 14px; }
  .fnBBarBtn--core { padding: 10px 10px !important; min-width: 58px; font-size: 9.5px !important; }
  .fnBBarBtn--core .fnBBarIcon { width: 19px; height: 19px; }
  .fnToolsDrawer { grid-template-columns: repeat(4, 1fr); padding: 12px 14px; }
  #fnContent main { padding: 12px; }
}

/* ── Light mode app shell overrides ──────────── */
body.light #appShell { background: #F8F9FB; }
body.light #fnSidebar { background: #ffffff; border-right: 1px solid rgba(0,0,0,0.07); }
body.light #fnTopBar { background: rgba(255,255,255,0.95); border-bottom: 1px solid rgba(0,0,0,0.07); backdrop-filter: blur(8px); }
body.light .fnNavItem { color: #475569 !important; }
body.light .fnNavItem:hover { background: #f1f5f9 !important; color: #0f172a !important; }
body.light .fnNavItemActive { background: rgba(37,99,235,0.09) !important; color: #2563eb !important; box-shadow: inset 0 0 0 1px rgba(37,99,235,0.18) !important; }
body.light .fnNavItemActive:hover { background: rgba(37,99,235,0.14) !important; }
body.light .fnNavLabel { color: #94a3b8; font-size: 10px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; }
body.light .fnUserName { color: #334155; }
body.light .fnUserChip { background: #f8fafc; border-color: rgba(0,0,0,0.16); }
body.light .fnSidebarToggle { color: #94a3b8 !important; }
body.light .fnSidebarToggle:hover { color: #0f172a !important; background: #f1f5f9 !important; }
body.light .fnLogoText { background: linear-gradient(135deg,#0f172a 0%,#2563eb 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
body.light .fnSidebarTop { border-bottom-color: rgba(0,0,0,0.07); }
body.light .fnSidebarBottom { border-top-color: rgba(0,0,0,0.07); }
body.light #fnPageTitle { color: #0f172a; }
body.light .fnDueBanner { color: #64748b; }
/* Quick-action cards */
body.light .fnQuickCard { background: #fff; border-color: rgba(0,0,0,0.15); box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
body.light .fnQuickCard:hover { background: #f8fafc; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
body.light .fnQuickLabel { color: #0f172a; }
/* Stat cards */
body.light .fnStatCard { background: #fff; border-color: rgba(0,0,0,0.15); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
body.light .fnStatValue { color: #0f172a; }
body.light .fnStatLabel { color: #64748b; }
/* Dashboard cards */
body.light .fnCard { background: #fff; border-color: rgba(0,0,0,0.15); box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
body.light .fnCardTitle { color: #0f172a; }
/* Glass cards */
body.light .fnGlassCard { background: #fff; border-color: rgba(0,0,0,0.15); box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
/* Quick actions bar */
body.light .fnBBarInner {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
body.light .fnToolsDrawer {
  background: rgba(255,255,255,0.97);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
}
body.light .fnBBarBtn {
  background: #f8fafc !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #64748b !important;
}
body.light .fnBBarBtn--core { color: #334155 !important; }
body.light .fnBBarBtn:hover {
  background: rgba(37,99,235,0.06) !important;
  border-color: rgba(37,99,235,0.2) !important;
  color: #2563eb !important;
  box-shadow: 0 4px 14px rgba(37,99,235,0.1) !important;
}
body.light .fnBBarBtn--ai:hover {
  background: rgba(124,58,237,0.07) !important;
  border-color: rgba(124,58,237,0.22) !important;
  color: #7c3aed !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.12) !important;
}
body.light .fnBBarToolsToggle {
  background: #f1f5f9 !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #64748b !important;
}
body.light .fnBBarToolsToggle:hover {
  background: rgba(37,99,235,0.05) !important;
  border-color: rgba(37,99,235,0.18) !important;
  color: #2563eb !important;
}
body.light .fnBBarToolsToggle[aria-expanded="true"] {
  background: rgba(37,99,235,0.08) !important;
  border-color: rgba(37,99,235,0.22) !important;
  color: #2563eb !important;
}
body.light .fnBBarDivider { background: rgba(0,0,0,0.08); }
body.light .fnBBarCat { color: #b0bec5; }
body.light .fnQuickDivider { background: rgba(0,0,0,0.06); }
/* Icon buttons */
body.light .fnIconBtn { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.1) !important; color: #4A5568 !important; }
body.light .fnIconBtn:hover { background: rgba(0,0,0,0.09) !important; }
/* Chip buttons */
body.light .fnChipBtn { background: rgba(37,99,235,0.08) !important; border-color: rgba(37,99,235,0.25) !important; color: #2563eb !important; }
body.light .fnChipBtn:hover { background: rgba(37,99,235,0.14) !important; box-shadow: 0 0 10px rgba(37,99,235,0.12) !important; }
/* Countdown items */
body.light .fnCountdownItem { background: #f8fafc; border-color: rgba(0,0,0,0.1); }
body.light .fnCountdownItem:hover { background: rgba(37,99,235,0.04); border-color: rgba(37,99,235,0.2); }
body.light .fnCountdownTitle { color: #1e293b; }
/* Card text */
body.light .fnStatCardTitle { color: #64748b; }
body.light .fnStatCardNum { color: #0f172a; }
body.light .fnStatCardSub { color: #94a3b8; }
body.light .fnCardSub { color: #64748b; }
body.light .fnRecSubject { color: #0f172a; }
/* Month label */
body.light .fnMonthLabel { color: #0f172a; }


/* ═══════════════════════════════════════════════
   PREMIUM CALENDAR COMPONENT
═══════════════════════════════════════════════ */

/* Card header */
.fnCalHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.fnCalTitle {
  font-size: 17px;
  font-weight: 600;
  color: var(--fn-text);
  letter-spacing: -0.01em;
}
.fnCalMiniStats {
  font-size: 11px;
  color: rgba(160,185,230,0.45);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.fnCalHeaderRight {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Segmented control */
.fnCalSegControl {
  display: flex;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.fnCalSegGroup {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 3px;
}
body.light .fnCalSegGroup {
  background: #f1f5f9;
  border-color: rgba(0,0,0,0.1);
}
body.light .fnCalSegBtn:not(.fnCalSegBtnActive):hover {
  background: rgba(0,0,0,0.06) !important;
  color: #0f172a !important;
}
.fnCalSegBtn {
  padding: 4px 14px !important;
  border-radius: 9px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(160,185,230,0.45) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: var(--fn-font) !important;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s !important;
  box-shadow: none !important;
  letter-spacing: 0.02em;
}
.fnCalSegBtnActive {
  background: rgba(79,142,255,0.18) !important;
  color: #7BB5FF !important;
  box-shadow: 0 2px 8px rgba(79,142,255,0.2) !important;
}
.fnCalSegBtn:not(.fnCalSegBtnActive):hover {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(200,220,255,0.7) !important;
}

/* Month nav */
.fnCalMonthNav {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-bottom: 4px;
}
.fnCalNavBtn {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(160,185,230,0.6) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background 0.15s, color 0.15s !important;
  line-height: 1 !important;
}
.fnCalNavBtn:hover { background: rgba(79,142,255,0.12) !important; color: #7BB5FF !important; transform: none !important; }
.fnCalMonthLabel {
  font-size: 12px;
  font-weight: 600;
  color: rgba(200,220,255,0.75);
  min-width: 110px;
  text-align: center;
  font-family: var(--fn-font);
  letter-spacing: 0.01em;
}

/* ── WEEK VIEW ────────────────────────────────── */
.fnCalWeekView { width: 100%; }
.fnCalWeekRow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.fnCalWeekCell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 6px 11px;
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.34,1.56,0.64,1);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.fnCalWeekCell::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.fnCalWeekCell:hover {
  background: rgba(255,255,255,0.048);
  transform: translateY(-2px);
  border-color: rgba(79,142,255,0.12);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.fnCalWeekDayName {
  font-family: var(--fn-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(160,185,230,0.4);
  line-height: 1;
}
.fnCalWeekDate {
  font-family: var(--fn-font);
  font-size: 15px;
  font-weight: 500;
  color: rgba(200,220,255,0.85);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Today highlight */
.fnCalWeekCellToday {
  border-color: rgba(79,142,255,0.38) !important;
  background: rgba(79,142,255,0.1) !important;
  box-shadow: 0 0 0 1px rgba(79,142,255,0.18), 0 4px 24px rgba(79,142,255,0.18) !important;
  transform: translateY(-2px);
}
.fnCalWeekCellToday .fnCalWeekDate {
  color: #7BB5FF;
  font-weight: 700;
}
.fnCalWeekCellToday .fnCalWeekDayName {
  color: rgba(123,181,255,0.65);
}

/* Activity level backgrounds — blue→violet gradient for high activity */
.fnCalWeekCell.wl0 { background: rgba(255,255,255,0.022) !important; border-color: transparent !important; }
.fnCalWeekCell.wl1 { background: rgba(79,142,255,0.14) !important; border-color: rgba(79,142,255,0.2) !important; }
.fnCalWeekCell.wl2 { background: rgba(79,142,255,0.32) !important; border-color: rgba(79,142,255,0.42) !important; }
.fnCalWeekCell.wl3 { background: rgba(79,142,255,0.58) !important; border-color: rgba(79,142,255,0.65) !important; }
.fnCalWeekCell.wl4 { background: linear-gradient(135deg,rgba(79,142,255,0.85),rgba(124,92,252,0.75)) !important; border-color: rgba(79,142,255,0.7) !important; }
.fnCalWeekCell.wl5 { background: linear-gradient(135deg,#4F8EFF,#7C5CFC) !important; border-color: rgba(79,142,255,0.8) !important; box-shadow: 0 0 20px rgba(79,142,255,0.45) !important; }
.fnCalWeekCell.wl0.fnCalWeekCellToday { background: rgba(79,142,255,0.09) !important; }

/* Light mode overrides for week cells */
body.light .fnCalWeekCell { background: #f8fafc; border-color: rgba(0,0,0,0.09); }
body.light .fnCalWeekCell::before { background: none; }
body.light .fnCalWeekCell:hover { background: #eef2ff; border-color: rgba(37,99,235,0.18); box-shadow: 0 4px 12px rgba(37,99,235,0.08); }
body.light .fnCalWeekCell.wl0 { background: #f8fafc !important; border-color: rgba(0,0,0,0.09) !important; }
body.light .fnCalWeekCell.wl0.fnCalWeekCellToday { background: rgba(37,99,235,0.07) !important; border-color: rgba(37,99,235,0.35) !important; }
body.light .fnCalWeekCellToday { border-color: rgba(37,99,235,0.45) !important; box-shadow: 0 0 0 1px rgba(37,99,235,0.2), 0 4px 20px rgba(37,99,235,0.1) !important; }
body.light .fnCalWeekDayName { color: #94a3b8; }
body.light .fnCalWeekDate { color: #1e293b; }
body.light .fnCalWeekCellToday .fnCalWeekDate { color: #2563eb; }
body.light .fnCalWeekDot--0 { background: rgba(0,0,0,0.12); }

/* Activity dot */
.fnCalWeekDot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transition: background 200ms ease, box-shadow 200ms ease;
  flex-shrink: 0;
}
.fnCalWeekDot--0 { background: rgba(255,255,255,0.08); }
.fnCalWeekDot--1 { background: rgba(79,142,255,0.5); }
.fnCalWeekDot--2 { background: rgba(79,142,255,0.8); }
.fnCalWeekDot--3 { background: #4F8EFF; box-shadow: 0 0 5px rgba(79,142,255,0.6); }
.fnCalWeekDot--4 { background: #7C5CFC; box-shadow: 0 0 7px rgba(124,92,252,0.75); }
.fnCalWeekDot--5 { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.7); }
.fnCalWeekCellToday .fnCalWeekDot { background: #fff !important; box-shadow: 0 0 6px rgba(255,255,255,0.65) !important; }

/* Card count label */
.fnCalWeekCount {
  font-family: var(--fn-font);
  font-size: 9px;
  font-weight: 500;
  color: rgba(160,185,230,0.35);
  line-height: 1;
}
.fnCalWeekCell.wl1 .fnCalWeekCount { color: rgba(79,142,255,0.8); }
.fnCalWeekCell.wl2 .fnCalWeekCount,
.fnCalWeekCell.wl3 .fnCalWeekCount { color: rgba(255,255,255,0.75); }
.fnCalWeekCell.wl4 .fnCalWeekCount,
.fnCalWeekCell.wl5 .fnCalWeekCount { color: rgba(255,255,255,0.92); }
.fnCalWeekCellToday .fnCalWeekCount { color: rgba(255,255,255,0.85); }

/* ── MONTH VIEW ───────────────────────────────── */
.fnCalMonthView { width: 100%; display: flex; flex-direction: column; gap: 8px; }

/* Wrapper holding header + grid */
.fnCalMonthWrapper { width: 100%; display: flex; flex-direction: column; gap: 5px; }

/* Day name header row */
.fnCalMonthHeader {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  width: 100%;
}
.fnCalMonthHeaderCell {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(160,185,230,0.4);
  padding: 4px 0;
}

/* Day cells grid */
.fnCalMonthGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  width: 100%;
}

/* Individual month day cell */
.fnCalMonthCell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 200ms ease, transform 180ms cubic-bezier(0.34,1.56,0.64,1), border-color 200ms ease, box-shadow 200ms ease;
  cursor: default;
  min-height: 60px;
}
.fnCalMonthCell:hover {
  transform: scale(1.05);
  border-color: rgba(79,142,255,0.3);
  box-shadow: 0 4px 14px rgba(79,142,255,0.15);
  z-index: 2;
}
.fnCalMonthCellEmpty {
  background: transparent !important;
  border-color: transparent !important;
  pointer-events: none;
}
.fnCalMonthNum {
  font-family: var(--fn-font);
  font-size: 13px;
  font-weight: 500;
  color: rgba(200,220,255,0.85);
  line-height: 1;
}
.fnCalMonthCount {
  font-size: 8px;
  font-weight: 600;
  color: rgba(79,142,255,0.85);
  line-height: 1;
}

/* Activity levels */
.fnCalMonthCellLv0 { background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.07); }
.fnCalMonthCellLv1 { background: rgba(79,142,255,0.14); border-color: rgba(79,142,255,0.2); }
.fnCalMonthCellLv1 .fnCalMonthCount { color: rgba(255,255,255,0.9); }
.fnCalMonthCellLv2 { background: rgba(79,142,255,0.32); border-color: rgba(79,142,255,0.42); }
.fnCalMonthCellLv2 .fnCalMonthNum, .fnCalMonthCellLv2 .fnCalMonthCount { color: #fff; }
.fnCalMonthCellLv3 { background: rgba(79,142,255,0.58); border-color: rgba(79,142,255,0.65); }
.fnCalMonthCellLv3 .fnCalMonthNum, .fnCalMonthCellLv3 .fnCalMonthCount { color: #fff; }
.fnCalMonthCellLv4 { background: linear-gradient(135deg,rgba(79,142,255,0.85),rgba(124,92,252,0.75)); border-color: rgba(79,142,255,0.7); }
.fnCalMonthCellLv4 .fnCalMonthNum, .fnCalMonthCellLv4 .fnCalMonthCount { color: #fff; }
.fnCalMonthCellLv5 { background: linear-gradient(135deg,#4F8EFF,#7C5CFC); border-color: rgba(79,142,255,0.8); box-shadow: 0 0 16px rgba(79,142,255,0.4); }
.fnCalMonthCellLv5 .fnCalMonthNum, .fnCalMonthCellLv5 .fnCalMonthCount { color: #fff; }

/* Today highlight */
.fnCalMonthCellToday {
  border-color: rgba(79,142,255,0.45) !important;
  box-shadow: 0 0 0 2px #4F8EFF, 0 0 16px rgba(79,142,255,0.3) !important;
}
.fnCalMonthCellToday .fnCalMonthNum { color: #7BB5FF; font-weight: 700; }

/* Week nav — same style as month nav */
#calWeekNav { margin-bottom: 6px; }

/* Study Activity section — enough padding so full month calendar is visible */
.fnStudyActivitySection { padding-bottom: 28px; }

/* Light mode */
body.light .fnCalMonthHeaderCell { color: #94a3b8; }
body.light .fnCalMonthCell { background: #f1f5f9; border-color: rgba(0,0,0,0.1); }
body.light .fnCalMonthCell:hover { border-color: rgba(37,99,235,0.3); }
body.light .fnCalMonthCellEmpty { background: transparent !important; border-color: transparent !important; }
body.light .fnCalMonthNum { color: #1e293b; }
body.light .fnCalMonthCellToday { border-color: rgba(37,99,235,0.5) !important; box-shadow: 0 0 0 2px #2563eb, 0 0 14px rgba(37,99,235,0.2) !important; }
body.light .fnCalMonthCellToday .fnCalMonthNum { color: #2563eb; }

/* ── Month heatmap: compact square cells ── */
.fnCalendarCard #homeHeatmapWrap {
  min-height: unset !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.fnCalendarCard .weekdayRow {
  grid-template-columns: repeat(7, 1fr) !important;
  width: 100% !important;
  gap: 4px !important;
}
.fnCalendarCard .weekdayRow span {
  text-align: center;
  color: var(--fn-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fnCalendarCard .weekdayRow span:last-child { transform: none !important; }
.fnCalendarCard .progressHeatmap.calendarHeatmap {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
  width: 100% !important;
  height: auto !important;
  margin-top: 0 !important;
}

/* Light mode for month cells (fnMonthCell inherits fnCalWeekCell light overrides) */
body.light .fnCalMonthDayLabels span { color: #94a3b8; }
.fnCalendarCard .homeMonthControls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fnCalendarCard #homeMonthPicker { display: none; }
.fnCalendarCard #homeGraphs { display: none !important; }

/* ── Dashboard homeTodoMini override ── */
.fnDashboard #homeTodoMini {
  min-height: unset !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.fnDashboard .homeTodoHeader { display: none; }

/* ── Month controls alignment ── */
.fnCardHeader .homeMonthControls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fnIconBtn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Hide duplicate month picker input ── */
#homeMonthPicker { display: none; }

/* ── Sidebar bottom ── */
.fnSidebarBottom .fnNavItemSmall {
  justify-content: center !important;
  font-size: 11px !important;
  padding: 6px 8px !important;
  text-align: center !important;
}

/* ── Recommended Practice dropdown ── */
.recPracticeDropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  top: auto;
  left: 0;
  right: 0;
  min-width: 260px;
  background: var(--fn-surface-2);
  border: 1px solid var(--fn-border-strong);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
  z-index: 200;
  padding: 10px 0;
  max-height: 320px;
  overflow-y: auto;
}
.recPracticeDropdown .rpDropHeader {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fn-muted);
  padding: 4px 14px 8px;
  border-bottom: 1px solid var(--fn-border);
  margin-bottom: 4px;
}
.recPracticeDropdown .rpItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  gap: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.recPracticeDropdown .rpItem:hover { background: rgba(255,255,255,0.05); }
.recPracticeDropdown .rpItemName {
  font-size: 13px;
  color: var(--fn-text);
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recPracticeDropdown .rpItemBadge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.rpBadgeOverdue   { background: var(--fn-err-dim); color: #f87171; }
.rpBadgeDueToday  { background: var(--fn-warn-dim); color: var(--fn-warn); }
.rpBadgeUpcoming  { background: var(--fn-accent-dim); color: var(--fn-accent); }
.rpBadgeNever     { background: rgba(148,163,184,0.1); color: var(--fn-muted); }