:root {
  --bg: #07111f;
  --bg-2: #0c1a2d;
  --sidebar: rgba(7, 17, 31, 0.92);
  --panel: rgba(248, 243, 232, 0.88);
  --panel-strong: rgba(255, 250, 242, 0.95);
  --text: #142033;
  --text-soft: #46546b;
  --ink-light: #eef4ff;
  --gold: #d5ad62;
  --gold-2: #f4cf84;
  --line: rgba(255,255,255,0.08);
  --shadow: 0 20px 60px rgba(0,0,0,0.28);
  --glow: 0 0 0 1px rgba(213,173,98,0.24), 0 0 32px rgba(213,173,98,0.12);
  --radius: 24px;
  --radius-sm: 18px;
  --speed: 260ms;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, system-ui, sans-serif; background: radial-gradient(circle at top, #132646 0%, var(--bg) 45%, #050b14 100%); color: var(--ink-light); }
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 85%);
  pointer-events: none;
}
.ambient {
  position: fixed;
  border-radius: 999px;
  filter: blur(28px);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
  animation: drift 16s ease-in-out infinite;
}
.ambient-a {
  width: 340px; height: 340px; left: 6%; top: 8%;
  background: radial-gradient(circle, rgba(213,173,98,0.58), transparent 68%);
}
.ambient-b {
  width: 420px; height: 420px; right: 8%; bottom: 10%;
  background: radial-gradient(circle, rgba(93,160,255,0.42), transparent 68%);
  animation-delay: -6s;
}
@keyframes drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(24px,-18px,0) scale(1.08); }
}
button, input, textarea { font: inherit; }
button { cursor: pointer; border: 0; }
textarea, input {
  width: 100%; border: 1px solid rgba(20,32,51,0.12); border-radius: 18px; background: rgba(255,255,255,0.72);
  color: var(--text); padding: 16px 18px; outline: none; transition: border-color var(--speed), box-shadow var(--speed), transform var(--speed);
}
textarea { min-height: 220px; resize: vertical; }
textarea:focus, input:focus { border-color: rgba(213,173,98,0.75); box-shadow: 0 0 0 4px rgba(213,173,98,0.14); }
.app-shell {
  position: relative;
  z-index: 1;
  height: 100vh; display: grid; grid-template-columns: 270px minmax(0, 1fr); grid-template-rows: 1fr; gap: 18px; padding: 18px;
  padding-right: 18px;
  transition: padding-right 0.32s cubic-bezier(0.4,0,0.2,1),
              grid-template-columns 0.28s cubic-bezier(0.4,0,0.2,1),
              gap 0.28s,
              padding-left 0.28s;
}
body.lex-open .app-shell {
  padding-right: 438px; /* 420px sidebar + 18px gap */
}
body.nav-collapsed .app-shell {
  grid-template-columns: 0 minmax(0, 1fr);
  gap: 0;
  padding-left: 18px;
}
.glass {
  background: rgba(8, 19, 35, 0.74); backdrop-filter: blur(20px); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.glass-soft {
  background: linear-gradient(180deg, var(--panel-strong), var(--panel)); color: var(--text); border: 1px solid rgba(255,255,255,0.42); box-shadow: 0 14px 40px rgba(0,0,0,0.12);
}
/* ── Sidebar Progress Stats ── */
.sb-progress {
  flex-shrink: 0;
  padding: 10px 10px 8px;
  border-top: 1px solid rgba(213,173,98,0.10);
  margin-top: 4px;
}
.sb-progress-label {
  font-size: 0.60rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.28);
  margin-bottom: 7px;
}
.sb-progress-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 6px 4px;
}
.sb-stat-icon { font-size: 0.85rem; line-height: 1; }
.sb-stat strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.1;
}
.sb-stat span {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
  line-height: 1.2;
}

/* ══════════════════════════════════════════════════════
   XP TOAST & MODALS
══════════════════════════════════════════════════════ */
.xp-toast {
  position: fixed;
  pointer-events: none;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  z-index: 9999;
  animation: xpFloat 1.3s ease-out forwards;
}
@keyframes xpFloat {
  0%   { opacity: 1;   transform: translateY(0)    scale(1); }
  55%  { opacity: 1;   transform: translateY(-34px) scale(1.18); }
  100% { opacity: 0;   transform: translateY(-62px) scale(0.88); }
}

#xp-modal-overlay {
  position: fixed; inset: 0; z-index: 9997;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  animation: xpFadeIn 0.25s ease;
}
@keyframes xpFadeIn { from { opacity: 0; } to { opacity: 1; } }

.xp-modal-card {
  background: linear-gradient(160deg, rgba(18,32,54,0.98) 0%, rgba(8,16,30,0.98) 100%);
  border: 1px solid rgba(213,173,98,0.35);
  border-radius: 20px;
  padding: 36px 44px;
  text-align: center;
  max-width: 360px;
  animation: xpPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(213,173,98,0.08);
}
@keyframes xpPopIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
.xp-modal-icon { font-size: 2.8rem; margin-bottom: 10px; }
.xp-modal-title { font-size: 1.25rem; font-weight: 700; color: var(--gold); margin-bottom: 8px; }
.xp-modal-body { font-size: 0.88rem; color: rgba(238,244,255,0.72); line-height: 1.5; margin-bottom: 20px; }
.xp-modal-close { min-width: 120px; }

/* ══════════════════════════════════════════════════════
   SIDEBAR — XP / LEVEL BLOCK
══════════════════════════════════════════════════════ */
/* Sidebar user block */
.sidebar-xp {
  padding: 10px 10px 6px;
  flex-shrink: 0;
  border-top: 1px solid rgba(213,173,98,0.10);
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sidebar-xp-toprow {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sidebar-xp-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sidebar-xp-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sb-level-badge {
  font-size: 0.62rem; font-weight: 700; color: var(--gold);
  letter-spacing: 0.04em; opacity: 0.85;
}
.sb-xp-track-row {
  display: flex; align-items: center; gap: 7px;
}
.sb-xp-bar-wrap {
  flex: 1; height: 5px; background: rgba(255,255,255,0.07);
  border-radius: 10px; overflow: hidden;
}
.sb-xp-bar {
  height: 100%; background: var(--gold);
  border-radius: 10px;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.sb-daily-bar {
  height: 100%; background: var(--gold);
  border-radius: 10px;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.sb-xp-nums {
  font-size: 0.6rem; color: rgba(255,255,255,0.38);
  white-space: nowrap; flex-shrink: 0;
}
.sb-daily-nums { color: rgba(255,255,255,0.30); }
.sb-badge-shelf {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-top: 2px;
}
.sb-badge-icon {
  font-size: 1rem; cursor: default;
  transition: transform 0.15s;
}
.sb-badge-icon:hover { transform: scale(1.3); }

.sidebar-user-info { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sidebar-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(213,173,98,0.30), rgba(213,173,98,0.12));
  border: 1px solid rgba(213,173,98,0.30);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: var(--gold);
  text-transform: uppercase;
}
.sidebar-user-name {
  font-size: 0.78rem; font-weight: 500; color: rgba(238,244,255,0.70);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px;
}
.sidebar-logout-btn {
  background: none; border: 1px solid rgba(213,173,98,0.15); border-radius: 8px;
  padding: 5px 7px; cursor: pointer; color: rgba(238,244,255,0.40);
  display: flex; align-items: center; transition: color 0.18s, border-color 0.18s, background 0.18s;
  flex-shrink: 0;
}
.sidebar-logout-btn:hover { color: var(--gold); border-color: rgba(213,173,98,0.40); background: rgba(213,173,98,0.06); }

/* Sidebar — sticky so it follows the viewport while main content scrolls */
.sidebar {
  border-radius: 28px; padding: 18px; position: sticky; top: 18px;
  height: calc(100vh - 36px); overflow: hidden;
  display: flex; flex-direction: column;
  transition: width 0.28s cubic-bezier(0.4,0,0.2,1),
              min-width 0.28s cubic-bezier(0.4,0,0.2,1),
              padding 0.28s cubic-bezier(0.4,0,0.2,1),
              opacity 0.22s;
}
body.nav-collapsed .sidebar {
  width: 0;
  min-width: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
}

/* Nav toggle button: gold when open, muted when collapsed */
.nav-toggle-btn { flex-shrink: 0; }
body.nav-collapsed .nav-toggle-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.45);
}

/* Topbar left side: hamburger + title */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(213,173,98,0.14), transparent 18%, transparent 80%, rgba(83,144,255,0.14)); pointer-events: none; z-index: 0;
}
.sidebar > * { position: relative; z-index: 1; }
.brand-block { display: flex; gap: 10px; align-items: center; padding: 8px 6px 20px; flex-shrink: 0; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #081323; background: linear-gradient(135deg, var(--gold), var(--gold-2)); font-size: 1.2rem; box-shadow: var(--glow);
}
.brand-block h1 { margin: 0; font-family: "Cormorant Garamond", serif; font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.brand-block p { margin: 0; color: rgba(238,244,255,0.66); font-size: 0.70rem; }
/* Nav scrolls if content overflows, pushes chat + footer down */
.nav { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }

.nav-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  margin: 14px 0 2px 16px;
  pointer-events: none;
}
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,0.03); color: var(--ink-light); transition: transform var(--speed), background var(--speed), box-shadow var(--speed), border-color var(--speed); border: 1px solid transparent; flex-shrink: 0;
}
/* Vivid emoji icons on nav items */
.nav-item > span:first-child {
  font-size: 1.18rem;
  line-height: 1;
  flex-shrink: 0;
  filter: saturate(1.2) drop-shadow(0 1px 3px rgba(0,0,0,0.35));
  transition: transform 0.18s, filter 0.18s;
}
.nav-item:hover > span:first-child,
.nav-item.active > span:first-child {
  transform: scale(1.15);
  filter: saturate(1.5) drop-shadow(0 2px 6px rgba(213,173,98,0.35));
}
.nav-item:hover { transform: translateX(4px); background: rgba(255,255,255,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
.nav-item.active { background: linear-gradient(135deg, rgba(213,173,98,0.18), rgba(99,176,255,0.16)); border-color: rgba(213,173,98,0.28); box-shadow: var(--glow); }
.sidebar-footer { padding: 14px; border-radius: 18px; color: var(--text); flex-shrink: 0; margin-top: 8px; }
.tiny-label, .eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; }
.eyebrow { color: var(--text-soft); }
.status-pill { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; background: rgba(14,24,38,0.06); padding: 8px 12px; border-radius: 999px; font-size: 0.92rem; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff8f6b; box-shadow: 0 0 14px #ff8f6b; }
.status-pill.connected .status-dot { background: #67e0a3; box-shadow: 0 0 14px #67e0a3; }
.workspace { min-width: 0; display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow: hidden; }
.topbar { border-radius: 20px; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; }
.topbar h2 { margin: 0; font-size: 1.5rem; font-family: "Cormorant Garamond", serif; line-height: 1.1; }
.topbar-actions { display: flex; gap: 10px; }
.gold-btn, .ghost-btn {
  padding: 12px 16px; border-radius: 16px; transition: transform var(--speed), box-shadow var(--speed), background var(--speed); font-weight: 600;
}
.gold-btn { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #081323; box-shadow: var(--glow); }
.ghost-btn { background: rgba(8,19,35,0.06); color: var(--text); border: 1px solid rgba(8,19,35,0.08); }
.gold-btn:hover, .ghost-btn:hover { transform: translateY(-2px); }
.view-stack { position: relative; min-height: 0; flex: 1; overflow: hidden; }
.view {
  display: none; animation: viewIn 420ms cubic-bezier(.2,.8,.2,1);
}
.view.active { display: block; height: 100%; overflow-y: auto; }
.view.is-switching {
  animation: viewOut 220ms ease;
}
@keyframes viewOut {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translateY(-10px) scale(.992); filter: blur(6px); }
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.dashboard-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; padding-bottom: 72px; }
.settings-grid  { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; padding-bottom: 72px; }
.hero-card, .panel, .metric-card { border-radius: var(--radius); padding: 22px; }
.hero-card { grid-column: span 8; background: linear-gradient(135deg, rgba(10,28,54,0.96), rgba(20,45,79,0.92)); color: white; border: 1px solid rgba(213,173,98,0.22); box-shadow: var(--shadow), var(--glow); position: relative; overflow: hidden; }
.hero-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(213,173,98,0.22), transparent 30%), radial-gradient(circle at bottom left, rgba(101,177,255,0.18), transparent 36%); }
.hero-card > * { position: relative; z-index: 1; }
.hero-card h3 { font-family: "Cormorant Garamond", serif; font-size: 2.3rem; margin: 10px 0; }
.hero-card p { max-width: 60ch; color: rgba(255,255,255,0.8); }
.hero-actions, .inline-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.metric-card { grid-column: span 4; display: flex; flex-direction: column; justify-content: center; min-height: 128px; }
.hero-card + .metric-card { grid-column: span 4; }
.metric-card strong { font-size: 2.6rem; margin-top: 8px; line-height: 1; }
.metric-due-sub { font-size: 0.78rem; color: var(--gold); margin-top: 4px; font-weight: 600; letter-spacing: 0.04em; }
.metric-link { cursor: pointer; transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed); }
.metric-link:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,0.13); border-color: rgba(213,173,98,0.38); }
.dashboard-notes { grid-column: span 12; }
.dashboard-feed { grid-column: span 5; }
.panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; }
.panel-head h4 { margin: 0; font-size: 1.2rem; }
.panel-head span { color: var(--text-soft); font-size: 0.9rem; }
/* Dashboard: tighter panel headers */
.dashboard-grid .panel-head { margin-bottom: 10px; }
.dashboard-grid .panel-head h4 { font-size: 0.88rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.dashboard-grid .panel { padding: 16px; }
.panel-head-actions { margin-left: auto; flex-shrink: 0; }
.ghost-btn-xs { padding: 5px 10px; font-size: 0.78rem; border-radius: 10px; font-weight: 500; }
.workflow-list { margin: 0; padding-left: 18px; color: var(--text-soft); line-height: 1.8; }
.two-col-layout, .three-col-layout { display: grid; gap: 18px; }
.two-col-layout { grid-template-columns: 1.05fr 1.2fr; }
.three-col-layout { grid-template-columns: 1fr 1fr 0.95fr; }
.preset-row, .quick-prompts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.preset-chip, .quick-prompt {
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(13,24,40,0.06);
  color: var(--text);
  border: 1px solid rgba(13,24,40,0.08);
  transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed), background var(--speed);
}
.preset-chip.active, .preset-chip:hover, .quick-prompt:hover {
  transform: translateY(-1px);
  border-color: rgba(213,173,98,0.34);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  background: rgba(213,173,98,0.1);
}
.quick-prompt { font-size: 0.9rem; }
.chat-messages { height: 430px; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; scroll-behavior: smooth; }
.chat-message { animation: msgIn 220ms ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.msg-role { font-size: 0.72rem; letter-spacing: 0.12em; margin-bottom: 6px; color: var(--text-soft); }
.msg-bubble { background: rgba(13,24,40,0.06); border: 1px solid rgba(13,24,40,0.08); border-radius: 18px; padding: 14px 16px; line-height: 1.65; }
.chat-message.user .msg-bubble { background: rgba(213,173,98,0.12); }

/* ── Markdown rendering inside chat bubbles ── */
.md-body p  { margin: 0 0 .7em; }
.md-body p:last-child { margin-bottom: 0; }
.md-body h2.md-h2 { font-size: 1.1rem; font-weight: 700; margin: .9em 0 .4em; color: var(--gold, #d4a74f); }
.md-body h3.md-h3 { font-size: 1rem;   font-weight: 700; margin: .8em 0 .3em; color: var(--gold, #d4a74f); }
.md-body h4.md-h4 { font-size: .95rem; font-weight: 700; margin: .7em 0 .25em; color: rgba(213,173,98,.8); }
.md-body strong { font-weight: 700; color: inherit; }
.md-body em     { font-style: italic; }
.md-body code.md-code { background: rgba(255,255,255,.1); border-radius: 4px; padding: 1px 5px; font-family: "SF Mono", "Fira Code", monospace; font-size: .85em; }
.md-body ul.md-ul, .md-body ol.md-ol { margin: .4em 0 .7em 1.2em; padding: 0; display: flex; flex-direction: column; gap: .25em; }
.md-body ul.md-ul { list-style: disc; }
.md-body ol.md-ol { list-style: decimal; }
.md-body li { line-height: 1.55; }
.md-body hr.md-hr { border: none; border-top: 1px solid rgba(255,255,255,.12); margin: .8em 0; }
.chat-message.typing .msg-bubble {
  position: relative;
  overflow: hidden;
}
.chat-message.typing .msg-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.1s linear infinite;
}
@keyframes shimmer {
  to { transform: translateX(100%); }
}
.chat-input-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 14px; align-items: end; }
.chat-input-row textarea { min-height: 88px; }
.card-list { display: flex; flex-direction: column; gap: 10px; max-height: 540px; overflow: auto; }
.flashcard-item, .brief-item {
  background: rgba(13,24,40,0.05); border: 1px solid rgba(13,24,40,0.08); border-radius: 18px; padding: 14px; transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
}
.flashcard-item:hover, .brief-item:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 16px 30px rgba(0,0,0,0.08); border-color: rgba(213,173,98,0.4); }
.flashcard-item h5, .brief-item h5 { margin: 0 0 8px; font-size: 1rem; }
.flashcard-item p, .brief-item p { margin: 0; color: var(--text-soft); line-height: 1.55; }
.item-meta {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-soft);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
@keyframes pulseOrb {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
button:disabled, .gold-btn:disabled, .ghost-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.outline-toolbar {
  margin-top: -4px;
  margin-bottom: 12px;
}
.rich-output {
  min-height: 430px; border-radius: 18px; padding: 18px; background: rgba(13,24,40,0.05); border: 1px solid rgba(13,24,40,0.08); white-space: pre-wrap; line-height: 1.7; overflow: auto;
}
.rich-output.rendered h1,
.rich-output.rendered h2,
.rich-output.rendered h3 {
  font-family: "Cormorant Garamond", serif;
  margin: 0 0 10px;
}
.rich-output.rendered h1 { font-size: 2rem; }
.rich-output.rendered h2 { font-size: 1.5rem; margin-top: 18px; }
.rich-output.rendered h3 { font-size: 1.22rem; margin-top: 14px; }
.rich-output.rendered ul { padding-left: 20px; }
.rich-output.rendered li { margin-bottom: 8px; }
.empty-output { color: var(--text-soft); display: grid; place-items: center; }
.full-panel textarea { min-height: 65vh; }
.field-label { display: block; margin: 8px 0 8px; font-size: 0.86rem; color: var(--text-soft); }
.settings-copy { color: var(--text-soft); line-height: 1.75; }
.settings-grid > .panel { grid-column: span 6; }
.settings-input { width: 100%; padding: 8px 10px; border-radius: 7px; border: 1px solid rgba(213,173,98,0.2); background: rgba(255,255,255,0.04); color: var(--text); font-size: 0.92rem; box-sizing: border-box; }
.settings-input:focus { outline: none; border-color: rgba(213,173,98,0.5); }
.settings-row { display: flex; flex-direction: column; gap: 6px; }
.settings-hint { font-size: 0.8rem; color: var(--text-soft); margin: 4px 0 0; }
.settings-hint a { color: var(--gold); }

/* ── AI Style Profile upload section ── */
.sp-style-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-style-header { display: flex; flex-direction: column; gap: 3px; }
.sp-style-hint { font-size: 0.76rem; color: rgba(255,255,255,0.35); margin: 0; }
.sp-style-upload-row { display: flex; gap: 8px; align-items: center; }
.sp-upload-btn { font-size: 0.78rem !important; padding: 6px 12px !important; }
.sp-clear-btn  { font-size: 0.78rem !important; padding: 6px 12px !important; color: rgba(255,100,100,0.75) !important; border-color: rgba(255,100,100,0.25) !important; }
.sp-clear-btn:hover { background: rgba(255,100,100,0.08) !important; }
.sp-paste-area { min-height: 80px !important; font-size: 0.8rem !important; resize: vertical; }
.sp-analyze-btn { align-self: flex-start; font-size: 0.8rem !important; padding: 8px 16px !important; }
.sp-style-result {
  display: none;
  padding: 10px 12px;
  background: rgba(213,173,98,0.06);
  border: 1px solid rgba(213,173,98,0.2);
  border-radius: 8px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
}
.sp-style-result--visible { display: block; }
.sp-style-badge {
  font-size: 0.72rem;
  color: var(--gold);
  margin-bottom: 5px;
  font-weight: 600;
}
.settings-value { font-size: 0.92rem; color: var(--text); margin: 0; }
.settings-toggle-group { display: flex; gap: 6px; }
.settings-toggle-btn { padding: 6px 16px; border-radius: 6px; border: 1px solid rgba(213,173,98,0.25); background: transparent; color: var(--text-soft); cursor: pointer; font-size: 0.88rem; transition: all 0.15s; }
.settings-toggle-btn.active { background: rgba(213,173,98,0.15); border-color: rgba(213,173,98,0.6); color: var(--gold); }
.danger-btn { border-color: rgba(220,80,80,0.4) !important; color: #e06060 !important; }
.danger-btn:hover { background: rgba(220,80,80,0.1) !important; }
.full-width { width: 100%; margin-top: 12px; }
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(18px); opacity: 0; padding: 12px 16px; border-radius: 999px; background: rgba(8,19,35,0.92); color: white; border: 1px solid rgba(213,173,98,0.28); box-shadow: var(--shadow); pointer-events: none; transition: opacity var(--speed), transform var(--speed); z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; min-height: auto; }
  .sidebar-footer { position: static; margin-top: 18px; }
  .two-col-layout, .three-col-layout, .dashboard-grid, .settings-grid { grid-template-columns: 1fr; }
  .hero-card, .metric-card, .dashboard-notes, .dashboard-feed, .settings-grid > .panel { grid-column: auto; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .chat-input-row { grid-template-columns: 1fr; }
  .preset-row, .quick-prompts, .inline-actions, .topbar-actions { width: 100%; }
}

/* ═══════════════════════════════════════════
   BRIEFS — section viewer
═══════════════════════════════════════════ */

/* Brief item in library: div needs pointer + cursor */
.brief-item { cursor: pointer; }

/* Selected state */
.brief-item.selected {
  border-color: rgba(213,173,98,0.52);
  background: rgba(213,173,98,0.09);
  box-shadow: 0 10px 26px rgba(213,173,98,0.12);
}

/* Per-item delete row */
.brief-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.brief-item-del {
  font-size: 0.76rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(192,57,43,0.06);
  color: #b03020;
  border: 1px solid rgba(192,57,43,0.14);
  cursor: pointer;
  transition: background var(--speed), border-color var(--speed);
}
.brief-item-del:hover {
  background: rgba(192,57,43,0.13);
  border-color: rgba(192,57,43,0.32);
}

/* Toolbar delete buttons (briefs + outlines) */
.brief-delete-btn, .outline-del-btn {
  color: #b03020;
  border-color: rgba(192,57,43,0.16);
}
.brief-delete-btn:hover, .outline-del-btn:hover {
  background: rgba(192,57,43,0.08);
  border-color: rgba(192,57,43,0.34);
}

/* Toolbar spacing */
.brief-toolbar { margin-bottom: 12px; }

/* Viewer title — truncate long case names */
#brief-viewer-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 26ch;
  cursor: default;
}
.brief-viewer-head {
  min-width: 0; /* allow text-overflow inside flex child */
}
.brief-viewer-sub {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.brief-anchor {
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
}
.brief-anchor:hover {
  color: var(--gold, #d4a843);
}

/* ─── Manual brief write tab ─── */
.brief-write-hint {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  margin: 0 0 10px 0;
}
.brief-manual-textarea {
  min-height: 320px;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ─── Structured brief sections ─── */
.brief-section {
  margin-bottom: 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(13,24,40,0.09);
}
.brief-section:last-child { margin-bottom: 0; }

.brief-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brief-sec-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: inline-grid;
  place-items: center;
  font-size: 0.78rem;
  flex-shrink: 0;
  background: rgba(0,0,0,0.07);
}

.brief-section-body {
  padding: 12px 16px 14px;
  line-height: 1.72;
  background: rgba(13,24,40,0.025);
  font-size: 0.95rem;
  color: var(--text);
}
.brief-section-body p  { margin: 0 0 9px; }
.brief-section-body p:last-child { margin-bottom: 0; }
.brief-section-body ul { padding-left: 20px; margin: 0 0 4px; }
.brief-section-body li { margin-bottom: 5px; }
.brief-section-body strong { font-weight: 700; }
.brief-section-body em { font-style: italic; color: var(--text-soft); }

/* Section colour variants */
.brief-sec-casename { border-color: rgba(213,173,98,0.32); }
.brief-sec-casename .brief-section-head { background: rgba(213,173,98,0.16); color: #6b4800; }

.brief-sec-facts { border-color: rgba(80,150,255,0.28); }
.brief-sec-facts .brief-section-head { background: rgba(80,150,255,0.11); color: #0a3f72; }

.brief-sec-issue { border-color: rgba(255,148,50,0.28); }
.brief-sec-issue .brief-section-head { background: rgba(255,148,50,0.12); color: #6b3200; }

.brief-sec-rule { border-color: rgba(60,190,120,0.28); }
.brief-sec-rule .brief-section-head { background: rgba(60,190,120,0.11); color: #0a4828; }

.brief-sec-analysis { border-color: rgba(155,90,250,0.26); }
.brief-sec-analysis .brief-section-head { background: rgba(155,90,250,0.10); color: #3c0a6e; }

.brief-sec-holding { border-color: rgba(230,70,70,0.26); }
.brief-sec-holding .brief-section-head { background: rgba(230,70,70,0.10); color: #6e0a0a; }

.brief-sec-why { border-color: rgba(80,180,200,0.26); }
.brief-sec-why .brief-section-head { background: rgba(80,180,200,0.10); color: #0a3c4c; }

.brief-sec-other { border-color: rgba(13,24,40,0.10); }
.brief-sec-other .brief-section-head { background: rgba(13,24,40,0.06); color: var(--text-soft); }

/* Text before first section heading */
.brief-intro {
  padding: 4px 0 12px;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ─── Brief generating loader ─── */
.brief-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  gap: 18px;
  color: var(--text-soft);
  font-size: 0.92rem;
}
.brief-gen-orb {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,250,220,0.95), rgba(213,173,98,0.65), rgba(13,24,40,0.08));
  box-shadow: 0 0 0 1px rgba(213,173,98,0.18), 0 0 28px rgba(213,173,98,0.2);
  animation: pulseOrb 1.5s ease-in-out infinite;
}

/* ─── Brief error state ─── */
.brief-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 10px;
  text-align: center;
  padding: 24px;
}
.brief-error-title {
  font-weight: 700;
  color: #b03020;
  font-size: 1rem;
}
.brief-error-detail {
  font-size: 0.84rem;
  color: var(--text-soft);
  max-width: 38ch;
  line-height: 1.6;
}

/* ─── Brief count label ─── */
#brief-count-label { color: var(--text-soft); font-size: 0.88rem; }

/* ─── Brief output: less padding when rendered ─── */
#brief-output.rendered { padding: 14px; }


/* ═══════════════════════════════════════════
   FLASHCARDS — review workflow
═══════════════════════════════════════════ */

/* Review controls row */
/* ── Deck tree ── */
.deck-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
  max-height: 220px;
  overflow-y: auto;
}
.deck-tree::-webkit-scrollbar { width: 4px; }
.deck-tree::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

.deck-tree-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  transition: background var(--speed), border-color var(--speed), color var(--speed);
  font-size: 0.81rem;
}
.deck-tree-row:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.07); }
.deck-tree-row.active { background: rgba(213,173,98,0.11); border-color: rgba(213,173,98,0.3); color: var(--gold); }
.deck-tree-child { font-size: 0.78rem; color: var(--text-soft); }
.deck-tree-child.active { color: var(--gold); }

.deck-tree-icon  { font-size: 0.75rem; opacity: 0.42; flex-shrink: 0; }
.deck-tree-branch { font-size: 0.7rem; opacity: 0.3; flex-shrink: 0; }
.deck-tree-name  { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-tree-count { font-size: 0.69rem; opacity: 0.48; flex-shrink: 0; }

.deck-tree-actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--speed);
}
.deck-tree-row:hover .deck-tree-actions { opacity: 1; }

.deck-tree-btn {
  font-size: 0.68rem;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--speed), color var(--speed), border-color var(--speed);
}
.deck-tree-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.deck-add-sub { color: rgba(213,173,98,0.8); border-color: rgba(213,173,98,0.18); }
.deck-add-sub:hover { background: rgba(213,173,98,0.1); color: var(--gold); }
.deck-tree-del:hover { background: rgba(192,57,43,0.12); color: #c0392b; border-color: rgba(192,57,43,0.28); }

/* Inline create row inside the tree */
.deck-create-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px;
}
.deck-name-input {
  flex: 1;
  min-height: unset;
  height: 28px;
  padding: 4px 8px;
  font-size: 0.79rem;
  border-radius: 8px;
  resize: none;
}

/* Inline rename inside a tree row */
.deck-inline-rename {
  flex: 1;
  min-height: unset;
  height: 20px;
  padding: 2px 5px;
  font-size: 0.81rem;
  font-weight: 500;
  border-radius: 5px;
  resize: none;
  background: rgba(213,173,98,0.1);
  border: 1.5px solid rgba(213,173,98,0.42);
  color: var(--gold);
}

/* Deck meta row */
.fc-deck-meta-row {
  font-size: 0.79rem;
  color: var(--text-soft);
  margin-bottom: 8px;
}

/* Move-to-deck select on each card */
.fc-deck-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text-soft);
  font-size: 0.72rem;
  padding: 3px 8px;
  cursor: pointer;
  max-width: 110px;
  transition: border-color var(--speed), background var(--speed);
}
.fc-deck-select:hover { border-color: rgba(213,173,98,0.35); background: rgba(213,173,98,0.06); }
.fc-deck-select:focus { border-color: rgba(213,173,98,0.6); outline: none; }
.fc-deck-select option { background: #0d1828; color: var(--text); }

.fc-review-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.fc-review-btn {
  flex: 1;
  padding: 10px 12px;
  font-size: 0.88rem;
}

/* Due bar */
.fc-due-bar {
  margin-bottom: 10px;
  font-size: 0.8rem;
  color: var(--text-soft);
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fc-due-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(213,173,98,0.13);
  border: 1px solid rgba(213,173,98,0.28);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b4800;
}
.fc-due-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(213,173,98,0.7);
}

/* Card item enhancements */
.flashcard-item {
  position: relative;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.flashcard-item.selected {
  border-color: rgba(213,173,98,0.5);
  background: rgba(213,173,98,0.08);
  box-shadow: 0 8px 22px rgba(213,173,98,0.1);
}
.flashcard-item.is-due::after {
  content: "Due";
  position: absolute;
  top: 10px; right: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6b4800;
  background: rgba(213,173,98,0.18);
  border: 1px solid rgba(213,173,98,0.3);
  border-radius: 999px;
  padding: 2px 8px;
}
.fc-type-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(13,24,40,0.06);
  border: 1px solid rgba(13,24,40,0.09);
  color: var(--text-soft);
  margin-top: 6px;
}
.fc-sr-meta {
  font-size: 0.74rem;
  color: var(--text-soft);
  margin-top: 4px;
}

/* Deck meta label */
#fc-deck-meta { font-size: 0.88rem; color: var(--text-soft); }

/* Generating loader */
.fc-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 0 10px;
  color: var(--text-soft);
  font-size: 0.9rem;
}
.fc-gen-orb {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,250,220,0.95), rgba(213,173,98,0.65), transparent);
  box-shadow: 0 0 0 1px rgba(213,173,98,0.18), 0 0 24px rgba(213,173,98,0.22);
  animation: pulseOrb 1.4s ease-in-out infinite;
}

/* Review panel layout */
.fc-review-panel {
  display: flex;
  flex-direction: column;
}

/* ── Idle state ── */
.fc-idle {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 380px;
  color: var(--text-soft);
  text-align: center;
  padding: 24px;
}
.fc-idle p { max-width: 32ch; line-height: 1.7; font-size: 0.92rem; }
.fc-idle-orb {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,250,220,0.9), rgba(213,173,98,0.55), rgba(13,24,40,0.1));
  box-shadow: 0 0 0 1px rgba(213,173,98,0.18), 0 0 36px rgba(213,173,98,0.22);
  animation: pulseOrb 3.2s ease-in-out infinite;
}

/* ── 3-D flip card ── */
.fc-card-scene {
  perspective: 1000px;
  width: 100%;
  min-height: 220px;
  margin-bottom: 12px;
  cursor: pointer;
}
.fc-card {
  display: grid;
  width: 100%;
  min-height: 220px;
  transform-style: preserve-3d;
  transition: transform 0.52s cubic-bezier(.4,0,.2,1);
  border-radius: 22px;
}
.fc-card.flipped {
  transform: rotateY(180deg);
}
.fc-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  border-radius: 22px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(13,24,40,0.09);
  word-break: break-word;
  overflow-wrap: break-word;
}
.fc-face-front {
  background: linear-gradient(160deg, rgba(12,27,52,0.97), rgba(7,17,35,0.99));
  color: var(--ink-light);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(213,173,98,0.14);
}
.fc-face-back {
  background: linear-gradient(160deg, rgba(8,32,18,0.97), rgba(5,20,12,0.99));
  color: var(--ink-light);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(60,190,120,0.18);
  transform: rotateY(180deg);
}
.fc-face .tiny-label { color: rgba(238,244,255,0.52); }
.fc-face-back .tiny-label { color: rgba(100,255,160,0.5); }
.fc-card-text {
  flex: 1;
  font-size: 1.02rem;
  line-height: 1.65;
  display: block;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.fc-type-badge {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: rgba(213,173,98,0.18);
  color: rgba(255,220,120,0.85);
  border: 1px solid rgba(213,173,98,0.22);
  border-radius: 999px;
  padding: 2px 9px;
  margin-top: auto;
}

/* Flip hint button */
.fc-flip-hint {
  display: block;
  width: 100%;
  padding: 10px;
  background: rgba(13,24,40,0.05);
  border: 1px dashed rgba(13,24,40,0.14);
  border-radius: 14px;
  color: var(--text-soft);
  font-size: 0.86rem;
  text-align: center;
  transition: background var(--speed), border-color var(--speed), transform var(--speed);
  margin-bottom: 14px;
  cursor: pointer;
}
.fc-flip-hint:hover {
  background: rgba(213,173,98,0.07);
  border-color: rgba(213,173,98,0.3);
  transform: translateY(-1px);
}
.fc-flip-hint.hidden { display: none; }

/* ── Rating buttons ── */
.fc-ratings {
  animation: viewIn 280ms cubic-bezier(.2,.8,.2,1);
}
.fc-ratings-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-soft);
  text-align: center;
  margin-bottom: 10px;
}
.fc-rating-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.fc-rate-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 6px;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1.5px solid transparent;
  transition: transform var(--speed), box-shadow var(--speed), background var(--speed), border-color var(--speed);
}
.fc-rate-btn span { font-size: 1.1rem; }
.fc-rate-btn kbd {
  display: block;
  font-size: 0.64rem;
  font-family: inherit;
  opacity: 0.48;
  background: rgba(0,0,0,0.08);
  border-radius: 4px;
  padding: 1px 5px;
  margin-top: -2px;
  letter-spacing: 0;
}
.fc-flip-hint kbd {
  display: inline-block;
  font-size: 0.72em;
  font-family: inherit;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 5px;
  padding: 1px 6px;
  margin: 0 2px;
  vertical-align: middle;
}
.fc-rate-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }

.fc-rate-again {
  background: rgba(192,57,43,0.09);
  color: #901a0a;
  border-color: rgba(192,57,43,0.2);
}
.fc-rate-again:hover { background: rgba(192,57,43,0.16); border-color: rgba(192,57,43,0.38); }

.fc-rate-hard {
  background: rgba(230,140,0,0.09);
  color: #7a4500;
  border-color: rgba(230,140,0,0.2);
}
.fc-rate-hard:hover { background: rgba(230,140,0,0.17); border-color: rgba(230,140,0,0.36); }

.fc-rate-good {
  background: rgba(40,160,100,0.09);
  color: #0a5a30;
  border-color: rgba(40,160,100,0.2);
}
.fc-rate-good:hover { background: rgba(40,160,100,0.17); border-color: rgba(40,160,100,0.36); }

.fc-rate-easy {
  background: rgba(80,140,255,0.09);
  color: #0a2e72;
  border-color: rgba(80,140,255,0.2);
}
.fc-rate-easy:hover { background: rgba(80,140,255,0.16); border-color: rgba(80,140,255,0.36); }

/* Progress label */
.fc-progress-label {
  font-size: 0.82rem;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* ── Session complete ── */
.fc-complete {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 380px;
  text-align: center;
  padding: 24px;
  animation: viewIn 380ms cubic-bezier(.2,.8,.2,1);
}
.fc-complete h5 {
  margin: 0;
  font-size: 1.4rem;
  font-family: "Cormorant Garamond", serif;
}
.fc-complete p {
  color: var(--text-soft);
  font-size: 0.92rem;
  max-width: 36ch;
  line-height: 1.65;
  margin: 0;
}
.fc-complete-orb {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(200,255,220,0.9), rgba(40,190,100,0.55), rgba(5,20,10,0.1));
  box-shadow: 0 0 0 1px rgba(40,190,100,0.22), 0 0 38px rgba(40,190,100,0.28);
  animation: pulseOrb 2.8s ease-in-out infinite;
}

/* ═══════════════════════════════════════════
   DECK PICKER MODAL
═══════════════════════════════════════════ */

.deck-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(4, 10, 20, 0.72);
  backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: viewIn 180ms ease;
}

.deck-picker-modal {
  width: min(440px, 92vw);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 88vh;
  overflow: hidden;
}

.deck-picker-head h4 { margin: 0 0 3px; font-size: 1.18rem; }
.deck-picker-head span { font-size: 0.88rem; color: var(--text-soft); }

.deck-picker-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 2px;
}
.deck-picker-list::-webkit-scrollbar { width: 4px; }
.deck-picker-list::-webkit-scrollbar-thumb { background: rgba(13,24,40,0.14); border-radius: 4px; }

.deck-picker-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--speed), border-color var(--speed);
  font-size: 0.88rem;
  color: var(--text);
  user-select: none;
}
.deck-picker-option:hover {
  background: rgba(213,173,98,0.07);
  border-color: rgba(213,173,98,0.18);
}
.deck-picker-option.selected {
  background: rgba(213,173,98,0.13);
  border-color: rgba(213,173,98,0.42);
}
.deck-picker-option-icon { font-size: 0.72rem; opacity: 0.38; flex-shrink: 0; }
.deck-picker-option-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-picker-option-count { font-size: 0.72rem; color: var(--text-soft); flex-shrink: 0; }

.deck-picker-divider {
  border: none;
  border-top: 1px solid rgba(13,24,40,0.1);
  margin: 0;
}

/* New-deck inline row inside picker */
.deck-picker-new-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.deck-picker-new-row .deck-name-input {
  height: 34px;
  min-height: unset;
  padding: 6px 12px;
  font-size: 0.86rem;
  border-radius: 10px;
}

/* Add-sub button on each picker deck row */
.deck-picker-add-sub {
  font-size: 0.66rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid rgba(213,173,98,0.2);
  background: rgba(213,173,98,0.06);
  color: rgba(213,173,98,0.72);
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--speed), background var(--speed), color var(--speed), border-color var(--speed);
}
.deck-picker-option:hover .deck-picker-add-sub { opacity: 1; }
.deck-picker-add-sub:hover {
  background: rgba(213,173,98,0.15);
  color: var(--gold);
  border-color: rgba(213,173,98,0.42);
}

/* Inline sub-deck create row inside picker list */
.deck-picker-sub-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px;
  margin: 2px 0;
}
.deck-picker-sub-row .deck-name-input {
  height: 30px;
  min-height: unset;
  padding: 4px 10px;
  font-size: 0.82rem;
  border-radius: 8px;
}

.deck-picker-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

/* ── Create Flashcard Tab Switcher ────────────────────────── */
.fc-create-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0;
}

.fc-create-tab {
  padding: 8px 18px;
  border-radius: 10px 10px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  background: transparent;
  cursor: pointer;
  transition: color var(--speed), background var(--speed), border-color var(--speed);
  position: relative;
  bottom: -1px;
}
.fc-create-tab:hover {
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.04);
}
.fc-create-tab.active {
  color: var(--gold);
  background: rgba(213,173,98,0.07);
  border-color: rgba(255,255,255,0.08);
  border-bottom-color: var(--panel-bg, #1a1a24);
}

.fc-create-section {
  display: block;
}
.fc-create-section.gen-preview-panel {
  min-height: 520px;
}

.fc-tab-desc {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.45);
  margin: 0 0 14px;
  line-height: 1.5;
}

/* ── FC Library Import ── */
.fc-import-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  flex-wrap: wrap;
}
.fc-import-label {
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-right: 2px;
}
.fc-lib-btn {
  font-size: .78rem !important;
  padding: 4px 12px !important;
}

/* Picker dropdown */
.fc-lib-picker {
  margin-top: 10px;
  background: var(--panel-bg, rgba(20,20,35,.97));
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.fc-lib-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
}
.fc-lib-picker-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .9rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color .15s;
}
.fc-lib-picker-close:hover { color: var(--text); }
.fc-lib-picker-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fc-lib-picker-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .13s;
}
.fc-lib-picker-item:hover { background: rgba(255,255,255,.07); }
.fc-lib-picker-name {
  font-size: .86rem;
  font-weight: 600;
  color: var(--text);
}
.fc-lib-picker-preview {
  font-size: .74rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-lib-picker-empty {
  padding: 12px 10px;
  font-size: .84rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Manual / Upload blocks ───────────────────────────────── */
.fc-manual-block {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fc-manual-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.fc-subsec-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: 0 0 12px;
}

.fc-manual-block input[type="text"],
.fc-manual-block textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.87rem;
  padding: 9px 12px;
  resize: vertical;
  transition: border-color var(--speed);
  box-sizing: border-box;
  margin-bottom: 8px;
}
.fc-manual-block input[type="text"]:focus,
.fc-manual-block textarea:focus {
  outline: none;
  border-color: rgba(213,173,98,0.45);
  box-shadow: 0 0 0 2px rgba(213,173,98,0.1);
}

/* ── Card format selector ─────────────────────────────────── */
.fc-fmt-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.fc-fmt-btn {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--speed);
}
.fc-fmt-btn:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.08); }
.fc-fmt-btn.active {
  background: rgba(213,173,98,0.15);
  border-color: rgba(213,173,98,0.4);
  color: var(--gold);
}

/* ── Multiple choice options ──────────────────────────────── */
.fc-mc-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 8px;
}
.fc-mc-opt-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fc-mc-opt-row input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  flex-shrink: 0;
  cursor: pointer;
}
.fc-mc-letter {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  width: 16px;
  flex-shrink: 0;
  text-align: center;
}
.fc-mc-opt-text {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.84rem;
  padding: 6px 10px;
  transition: border-color var(--speed);
  box-sizing: border-box;
}
.fc-mc-opt-text:focus {
  outline: none;
  border-color: rgba(213,173,98,0.4);
}
.fc-mc-opt-row:has(input[type="radio"]:checked) .fc-mc-opt-text {
  border-color: rgba(126,232,162,0.4);
  background: rgba(126,232,162,0.05);
}
.fc-mc-hint {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
  margin: 4px 0 0;
}

/* ── Field labels (front / back indicators) ──────────────── */
.fc-field-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
}
.fc-field-side {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(213,173,98,0.6);
  background: rgba(213,173,98,0.08);
  border: 1px solid rgba(213,173,98,0.2);
  border-radius: 999px;
  padding: 1px 7px;
  text-transform: uppercase;
}

/* textarea inside MC / Cloze forms */
#fc-mc-explanation,
#fc-cloze-text,
#fc-cloze-answer,
#fc-cloze-question {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.87rem;
  padding: 9px 12px;
  resize: vertical;
  transition: border-color var(--speed);
  box-sizing: border-box;
  margin-bottom: 4px;
}
#fc-mc-explanation:focus,
#fc-cloze-text:focus,
#fc-cloze-answer:focus,
#fc-cloze-question:focus {
  outline: none;
  border-color: rgba(213,173,98,0.45);
  box-shadow: 0 0 0 2px rgba(213,173,98,0.1);
}

/* ── Cloze gap button ─────────────────────────────────────── */
.fc-cloze-gap-btn {
  margin-top: 6px;
  font-size: 0.82rem;
}

/* ── Formatting toolbar ───────────────────────────────────── */
.fc-format-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin: 14px 0;
  flex-wrap: wrap;
}
.fc-fmt-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fc-fmt-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.fc-size-btns {
  display: flex;
  gap: 4px;
}
.fc-size-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.45);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--speed);
}
.fc-size-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
.fc-size-btn.active {
  background: rgba(213,173,98,0.15);
  border-color: rgba(213,173,98,0.4);
  color: var(--gold);
}
.fc-style-btns {
  display: flex;
  gap: 4px;
}
.fc-style-btn {
  width: 30px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.45);
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--speed);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-style-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
.fc-style-btn.active {
  background: rgba(213,173,98,0.15);
  border-color: rgba(213,173,98,0.4);
  color: var(--gold);
}
.fc-color-swatches {
  display: flex;
  gap: 6px;
  align-items: center;
}
.fc-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--speed), border-color var(--speed);
  padding: 0;
}
.fc-swatch[data-color=""] {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
}
.fc-swatch:hover { transform: scale(1.2); }
.fc-swatch.active { border-color: rgba(255,255,255,0.9); transform: scale(1.15); }

.fc-manual-actions {
  gap: 8px;
  flex-wrap: wrap;
}

.fc-manual-actions select {
  flex: 1;
  min-width: 120px;
  height: 36px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.84rem;
  padding: 0 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='rgba(180,160,120,0.7)' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.fc-manual-actions select:focus {
  outline: none;
  border-color: rgba(213,173,98,0.45);
}

/* ── Flashcard inline edit state ─────────────────────────── */
.flashcard-item-edit-btn {
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--speed), color var(--speed), border-color var(--speed);
}
.flashcard-item-edit-btn:hover {
  background: rgba(213,173,98,0.1);
  color: var(--gold);
  border-color: rgba(213,173,98,0.3);
}

.flashcard-item.editing {
  background: rgba(213,173,98,0.04);
  border-color: rgba(213,173,98,0.3);
}

.fc-edit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.fc-edit-form input[type="text"],
.fc-edit-form textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 8px 11px;
  resize: vertical;
  transition: border-color var(--speed);
  box-sizing: border-box;
}
.fc-edit-form input[type="text"]:focus,
.fc-edit-form textarea:focus {
  outline: none;
  border-color: rgba(213,173,98,0.45);
  box-shadow: 0 0 0 2px rgba(213,173,98,0.08);
}

.fc-edit-form select {
  height: 34px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.83rem;
  padding: 0 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='rgba(180,160,120,0.7)' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.fc-edit-form select:focus { outline: none; border-color: rgba(213,173,98,0.45); }

.fc-edit-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}
.fc-edit-actions .ghost-btn {
  font-size: 0.8rem;
  padding: 5px 12px;
}
.fc-edit-actions .gold-btn {
  font-size: 0.8rem;
  padding: 5px 14px;
}

/* ── Outline / Brief inline editor ──────────────────────── */
.viewer-edit-toolbar {
  gap: 8px;
  margin-bottom: 4px;
}

.viewer-raw-editor {
  width: 100%;
  flex: 1;
  min-height: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(213,173,98,0.3);
  border-radius: 12px;
  color: var(--text);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.82rem;
  line-height: 1.65;
  padding: 14px 16px;
  resize: none;
  transition: border-color var(--speed), box-shadow var(--speed);
  box-sizing: border-box;
  display: block;
  overflow-y: auto;
}
.viewer-raw-editor:focus {
  outline: none;
  border-color: rgba(213,173,98,0.55);
  box-shadow: 0 0 0 3px rgba(213,173,98,0.1);
}

/* ═══════════════════════════════════════════════════════
   SUB-NAVIGATION (sidebar)
   ═══════════════════════════════════════════════════════ */

.nav-sub {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 4px 0;
  padding-left: 14px;
  border-left: 1px solid rgba(213,173,98,0.18);
  margin-left: 20px;
}
.nav-sub.open { display: flex; }

.nav-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.52);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--speed), color var(--speed);
  text-align: left;
  width: 100%;
}
.nav-sub-item span:first-child {
  font-size: 0.92rem;
  opacity: 0.85;
  flex-shrink: 0;
  filter: saturate(1.1);
  transition: transform 0.15s;
}
.nav-sub-item:hover span:first-child { transform: scale(1.1); }
.nav-sub-item:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
}
.nav-sub-item.active {
  background: rgba(213,173,98,0.12);
  color: var(--gold);
}


/* ═══════════════════════════════════════════════════════
   SECTION HUB (landing page for each section)
   ═══════════════════════════════════════════════════════ */

.section-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 32px;
  text-align: center;
  gap: 36px;
}

.hub-intro h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px 0;
  letter-spacing: 0.01em;
}
.hub-intro p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.52);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.6;
}

.hub-grid,
.hub-grid-2,
.hub-grid-3,
.hub-grid-2x2 {
  display: grid;
  gap: 20px;
  width: 100%;
}
.hub-grid   { grid-template-columns: repeat(3, 1fr); max-width: 760px; }
.hub-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
.hub-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 760px; }
.hub-grid-2x2 { grid-template-columns: repeat(2, 1fr); max-width: 520px; }

.hub-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  padding: 32px 24px 28px;
  cursor: pointer;
  transition: background var(--speed), border-color var(--speed), transform 0.18s ease, box-shadow 0.18s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hub-card:hover {
  background: rgba(213,173,98,0.07);
  border-color: rgba(213,173,98,0.32);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
}
.hub-card-icon {
  font-size: 2rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.85;
}
.hub-card h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.hub-card p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.55;
  margin: 0;
}


/* ═══════════════════════════════════════════════════════
   SUB-VIEW CONTAINERS & LAYOUTS
   ═══════════════════════════════════════════════════════ */

.subview {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}

.subview-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  margin-bottom: 16px;
  border: none;
  background: rgba(255,255,255,0.04);
  border-radius: 9px;
  color: rgba(255,255,255,0.5);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--speed), color var(--speed);
  align-self: flex-start;
  flex-shrink: 0;
}
.subview-back:hover {
  background: rgba(213,173,98,0.1);
  color: var(--gold);
}

/* Single centered panel (generator views) */
.subview-single {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 680px;
  width: 100%;
  align-self: flex-start;
  transition: max-width 0.25s ease;
}
.subview-single.gen-preview-open {
  max-width: 920px;
}
.subview-single .panel {
  flex: 1;
  min-height: 0;
}

/* ── Generator split-right preview panel ─────────────────────────────────── */
.gen-split-right {
  width: 520px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
}
.gen-preview-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.gen-preview-panel .panel-head {
  flex-shrink: 0;
}
.gen-preview-head-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.gen-preview-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 2px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(213,173,98,0.18) transparent;
}
.gen-preview-empty {
  color: rgba(255,255,255,0.25);
  font-size: 0.82rem;
  text-align: center;
  padding: 60px 24px;
  line-height: 1.7;
}
.gen-preview-textarea {
  flex: 1;
  min-height: 320px;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(213,173,98,0.30);
  border-radius: 10px;
  color: rgba(232,236,240,0.88);
  font-size: 0.79rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  line-height: 1.6;
  padding: 14px;
  resize: vertical;
  outline: none;
}
.gen-preview-textarea:focus { border-color: rgba(213,173,98,0.50); }
.gen-preview-edit-actions {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .gen-split-right { width: 420px; }
}
@media (max-width: 900px) {
  .gen-split-right { width: 100%; position: static; }
}

/* also remove the old per-section min-height override */
.fc-create-section.gen-preview-panel { min-height: unset; }

/* Full-width panel (decks view) */
.subview-wide {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.subview-wide .panel {
  flex: 1;
  min-height: 0;
}

/* Centered panel (review view) */
.subview-centered {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
}
.subview-centered .panel {
  flex: 1;
  min-height: 0;
  max-width: 640px;
  width: 100%;
}

/* ── Create Flashcard split layout ───────────────────────── */
.subview-split {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.fc-split-left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.fc-split-left .panel {
  flex: 1;
  min-height: 0;
}
.fc-split-right {
  width: 420px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
}
.fc-preview-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fc-preview-panel #fc-preview-scene {
  cursor: pointer;
}
.fc-preview-hint {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}
.fc-preview-hint strong {
  color: rgba(255,255,255,0.5);
}
@media (max-width: 900px) {
  .subview-split { flex-direction: column; }
  .fc-split-right { width: 100%; position: static; }
}

/* Two-col layout (library + viewer) */
.subview-two-col {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--gap);
}
.subview-two-col .panel {
  min-height: 0;
}

@media (max-width: 860px) {
  .subview-two-col {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .hub-grid { grid-template-columns: 1fr; max-width: 320px; }
  .hub-grid-2 { grid-template-columns: 1fr; max-width: 320px; }
  .hub-grid-2x2 { grid-template-columns: 1fr; max-width: 320px; }
  .hub-grid-3 { grid-template-columns: 1fr; max-width: 320px; }
}

/* ═══════════════════════════════════════════════════════
   FILE IMPORT / UPLOAD
   ═══════════════════════════════════════════════════════ */

.import-section {
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 12px;
}

.import-toggle {
  width: 100%;
  text-align: left;
  font-size: 0.84rem;
  padding: 7px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.1);
  transition: background var(--speed), color var(--speed), border-color var(--speed);
}
.import-toggle:hover {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.82);
}
.import-toggle.open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: rgba(255,255,255,0.15);
}

.import-form {
  border: 1px solid rgba(255,255,255,0.1);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 10px;
  background: rgba(255,255,255,0.02);
}

.import-dropzone {
  border: 1.5px dashed rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--speed), background var(--speed);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.import-dropzone:hover,
.import-dropzone.drag-over {
  border-color: rgba(213,173,98,0.5);
  background: rgba(213,173,98,0.05);
}
.import-dropzone.drag-over {
  border-style: solid;
}

.import-dropzone-icon {
  font-size: 1.6rem;
  color: rgba(255,255,255,0.3);
  line-height: 1;
  margin-bottom: 2px;
}
.import-dropzone p {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
.import-dropzone p strong {
  color: rgba(255,255,255,0.82);
  font-weight: 500;
}
.import-hint {
  font-size: 0.76rem !important;
  color: rgba(255,255,255,0.32) !important;
  margin-top: 2px !important;
}

.import-browse-link {
  color: var(--gold);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(213,173,98,0.4);
  text-underline-offset: 2px;
}
.import-browse-link:hover { color: #e8c76a; }

/* ═══════════════════════════════════════════════════════
   CHAT CONTEXT PANEL — tabs + file browser
   ═══════════════════════════════════════════════════════ */

/* Context panel stretches to fill column and scrolls internally */
/* ── Full-page Chat Layout ─────────────────────────────── */
#view-chatbot {
  position: relative;
  padding: 0;
  overflow: hidden;
  height: 100%;
}
#view-chatbot.active {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow-y: hidden;
}

.chat-fullpage {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.chat-fullpage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  gap: 12px;
}
.chat-fullpage-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.chat-fullpage-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Context toggle button */
.ctx-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.ctx-toggle-btn:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.18); }
/* Active = sidebar open (default) */
.ctx-toggle-btn { background: rgba(213,173,98,0.10); border-color: rgba(213,173,98,0.35); color: var(--gold); }
#view-chatbot.ctx-collapsed .ctx-toggle-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.45); }

#view-chatbot .current-session-title {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

#view-chatbot .chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 28px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-behavior: smooth;
}
#view-chatbot .chat-message {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}

.chat-fullpage-input {
  flex-shrink: 0;
  padding: 12px 32px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.chat-attach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 920px;
  margin: 0 auto 8px;
}
.chat-attach-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(213,173,98,0.12);
  border: 1px solid rgba(213,173,98,0.3);
  border-radius: 20px;
  padding: 3px 10px 3px 8px;
  font-size: 0.75rem;
  color: var(--gold);
  max-width: 200px;
}
.chat-attach-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attach-chip-remove {
  background: none; border: none; cursor: pointer;
  color: rgba(213,173,98,0.6); font-size: 0.85rem; line-height: 1;
  padding: 0; flex-shrink: 0;
}
.chat-attach-chip-remove:hover { color: var(--gold); }
.chat-input-wrap {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  transition: border-color 0.2s;
  display: flex;
  flex-direction: column;
}
.chat-input-wrap:focus-within { border-color: rgba(213,173,98,0.45); }
.chat-input-wrap #chat-input {
  width: 100%;
  padding: 14px 16px 8px;
  background: transparent;
  border: none;
  resize: none;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.6;
  min-height: 52px;
  max-height: 200px;
  outline: none;
}
.chat-input-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 10px;
}
/* ── Transcribe btn (left, mic icon — dictate to text box) ── */
.chat-transcribe-btn {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.68);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chat-transcribe-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.30);
  color: #fff;
}
.chat-transcribe-btn.recording {
  background: rgba(192,57,43,0.22);
  border-color: rgba(192,57,43,0.75);
  color: #e74c3c;
  animation: mic-pulse 1s ease-in-out infinite;
}
/* ── Voice-mode btn (left, headphones icon — live conversation) ── */
.chat-voice-btn {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(101,177,255,0.10);
  border: 1px solid rgba(101,177,255,0.28);
  color: rgba(101,177,255,0.80);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.chat-voice-btn:hover {
  background: rgba(101,177,255,0.18);
  border-color: rgba(101,177,255,0.50);
  color: #65b1ff;
}
.chat-voice-btn.active,
.chat-voice-btn.voice-active {
  background: rgba(101,177,255,0.22);
  border-color: rgba(101,177,255,0.65);
  color: #65b1ff;
  animation: voice-pulse 1.5s ease-in-out infinite;
}
.sb-voice-mode-btn.voice-active {
  background: rgba(101,177,255,0.20) !important;
  border-color: rgba(101,177,255,0.65) !important;
  color: #65b1ff !important;
  animation: voice-pulse 1.5s ease-in-out infinite;
}
.chat-voice-btn.recording {
  background: rgba(192,57,43,0.22);
  border-color: rgba(192,57,43,0.75);
  color: #e74c3c;
  animation: mic-pulse 1s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(101,177,255,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(101,177,255,0); }
}
/* Attach + send stay on right */
.chat-attach-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.chat-attach-btn:hover {
  background: rgba(213,173,98,0.12);
  border-color: rgba(213,173,98,0.35);
  color: var(--gold);
}
.chat-send-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: 0;
}
.chat-fullpage-hint {
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.22);
  margin: 8px auto 0;
  max-width: 920px;
}

/* ── Context Sidebar (permanent, side-by-side with chat) ── */

.ctx-sidebar {
  width: 300px;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 18px 20px;
  border-right: 1px solid rgba(213,173,98,0.13);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(10,20,38,0.98) 0%, rgba(6,12,24,0.98) 100%);
  overflow: hidden;
  transition: width 0.28s cubic-bezier(0.4,0,0.2,1), padding 0.28s;
}

/* Collapsed state — toggle button hides the sidebar */
#view-chatbot.ctx-collapsed .ctx-sidebar {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.ctx-sidebar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 14px;
  flex-shrink: 0;
}
.ctx-drawer-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  flex: 1;
  white-space: nowrap;
}
.ctx-drawer-sub {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
}

/* Keep existing context-panel for legacy compat */
.context-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.context-panel .panel-head { flex-shrink: 0; }

/* Main tab strip */
.ctx-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 4px;
  flex-shrink: 0;
}
.ctx-tab {
  flex: 1;
  padding: 7px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.45);
  font-size: 0.84rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--speed), color var(--speed);
}
.ctx-tab:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.72); }
.ctx-tab.active {
  background: rgba(213,173,98,0.13);
  color: var(--gold);
  border: 1px solid rgba(213,173,98,0.28);
}

/* Tab panels */
.ctx-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 10px;
}

/* Sessions panel */
.sessions-toolbar {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.sessions-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}
.sess-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  gap: 2px 8px;
  position: relative;
}
.sess-item:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
.sess-item.active {
  background: rgba(213,173,98,0.1);
  border-color: rgba(213,173,98,0.35);
}
.sess-item-title {
  font-size: 0.83rem;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  grid-column: 1;
  grid-row: 1;
}
.sess-item.active .sess-item-title { color: var(--gold); }
.sess-item-meta {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  grid-column: 1;
  grid-row: 2;
}
.sess-actions {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.15s;
}
.sess-item:hover .sess-actions { opacity: 1; }
.sess-rename, .sess-delete {
  font-size: 0.75rem;
  padding: 2px 5px;
  line-height: 1;
}
.sess-rename:hover { color: var(--gold) !important; border-color: rgba(213,173,98,0.4) !important; }
.sess-delete:hover { color: #e06060 !important; border-color: rgba(220,80,80,0.4) !important; }
.sess-rename-input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(213,173,98,0.45);
  border-radius: 5px;
  color: var(--gold);
  font-size: 0.83rem;
  font-weight: 500;
  font-family: inherit;
  padding: 2px 6px;
  outline: none;
  grid-column: 1; grid-row: 1;
}
.sess-project { display: flex; flex-direction: column; gap: 3px; }
.sess-project-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 0.15s;
}
.sess-project-head:hover { background: rgba(255,255,255,0.08); }
.sess-proj-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sess-proj-name { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.75); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-proj-count { font-size: 0.72rem; color: rgba(255,255,255,0.35); flex-shrink: 0; }
.sess-proj-new, .sess-proj-ren, .sess-proj-del { padding: 1px 6px; font-size: 0.75rem; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.sess-project-head:hover .sess-proj-new,
.sess-project-head:hover .sess-proj-ren,
.sess-project-head:hover .sess-proj-del { opacity: 1; }
.sess-proj-ren:hover { color: var(--gold) !important; border-color: rgba(213,173,98,0.4) !important; }
.sess-proj-del:hover { color: #e06060 !important; border-color: rgba(220,80,80,0.4) !important; }
.sess-project-body { padding-left: 12px; display: flex; flex-direction: column; gap: 3px; }
.sess-project-body.collapsed { display: none; }
.sess-empty { font-size: 0.8rem; color: rgba(255,255,255,0.28); padding: 8px 4px; }
/* Drag-and-drop */
.sess-item[draggable] { cursor: grab; }
.sess-item.dragging { opacity: 0.4; }
.sess-loose-zone { display: flex; flex-direction: column; gap: 3px; min-height: 24px; border-radius: 6px; transition: background 0.15s; }
.sess-loose-zone.drag-over,
[data-drop-proj].drag-over > .sess-project-body { background: rgba(213,173,98,0.08); outline: 1px dashed rgba(213,173,98,0.4); border-radius: 6px; }
.sess-drop-hint { font-size: 0.72rem; color: rgba(255,255,255,0.22); padding: 5px 4px; font-style: italic; }

/* Session title in chat header */
.session-title-row { display: flex; flex-direction: column; gap: 2px; }
.session-title-row h4 { margin: 0; }
.current-session-title {
  font-size: 0.75rem;
  color: rgba(213,173,98,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* File-type sub-tabs */
.ctx-type-tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.ctx-type-tab {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.11);
  background: transparent;
  color: rgba(255,255,255,0.44);
  font-size: 0.80rem;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--speed), color var(--speed), border-color var(--speed);
}
.ctx-type-tab:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); }
.ctx-type-tab.active {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.24);
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}

/* File list */
.ctx-file-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 80px;
  max-height: 340px;
  padding-right: 2px;
}
.ctx-file-list::-webkit-scrollbar { width: 4px; }
.ctx-file-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }

.ctx-empty {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.32);
  text-align: center;
  padding: 24px 12px;
  margin: 0;
}

.ctx-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background var(--speed), border-color var(--speed);
  flex-shrink: 0;
}
.ctx-file-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}
.ctx-file-item.selected {
  background: rgba(213,173,98,0.08);
  border-color: rgba(213,173,98,0.38);
}
.ctx-file-item-sub {
  margin-left: 14px;
  border-left: 2px solid rgba(255,255,255,0.08);
  border-radius: 0 10px 10px 0;
}
.ctx-file-item-sub.selected { border-left-color: rgba(213,173,98,0.4); }

.ctx-item-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: var(--gold);
  flex-shrink: 0;
  background: rgba(255,255,255,0.03);
  transition: border-color var(--speed), background var(--speed);
}
.ctx-file-item.selected .ctx-item-check {
  background: rgba(213,173,98,0.18);
  border-color: rgba(213,173,98,0.5);
}

.ctx-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ctx-item-title {
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctx-file-item.selected .ctx-item-title { color: rgba(255,255,255,0.95); }
.ctx-item-meta {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.32);
}

/* Folder item in sessions list */
.ctx-folder-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 3px;
  background: rgba(255,255,255,0.02);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
}
.ctx-folder-icon { font-size: 0.9rem; flex-shrink: 0; }
.ctx-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Load bar (bottom of file browser) */
.ctx-load-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(213,173,98,0.06);
  border: 1px solid rgba(213,173,98,0.2);
  border-radius: 10px;
  flex-shrink: 0;
}
#ctx-sel-count {
  font-size: 0.80rem;
  color: rgba(255,255,255,0.55);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctx-load-bar .gold-btn {
  padding: 6px 14px;
  font-size: 0.82rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Custom Input — file upload drop zone ── */
.ctx-upload-zone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1.5px dashed rgba(255,255,255,0.14);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--speed), background var(--speed);
  flex-shrink: 0;
}
.ctx-upload-zone:hover,
.ctx-upload-zone.drag-over {
  border-color: rgba(213,173,98,0.45);
  background: rgba(213,173,98,0.04);
}
.ctx-upload-zone.drag-over { border-style: solid; }

.ctx-upload-icon {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.28);
  line-height: 1;
  flex-shrink: 0;
}
.ctx-upload-text {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.5;
}
.ctx-upload-text .import-hint {
  font-size: 0.76rem !important;
  color: rgba(255,255,255,0.28) !important;
  margin: 0 !important;
  display: inline;
}

/* Uploaded file status rows */
#ctx-upload-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ctx-upload-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 0.80rem;
  animation: ctxFadeIn 0.18s ease;
}
@keyframes ctxFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.ctx-upload-loading {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.45);
}
.ctx-upload-done {
  background: rgba(80,200,120,0.07);
  border: 1px solid rgba(80,200,120,0.2);
  color: rgba(255,255,255,0.7);
}
.ctx-upload-error {
  background: rgba(220,80,80,0.07);
  border: 1px solid rgba(220,80,80,0.2);
  color: rgba(255,255,255,0.5);
}

.ctx-upload-fname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.ctx-upload-status {
  flex-shrink: 0;
  margin-left: 10px;
  font-size: 0.75rem;
  opacity: 0.7;
}
.ctx-upload-done .ctx-upload-status { color: #5dc888; opacity: 1; }

/* Profile badge inside hub card title */
.hub-profile-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(213,173,98,0.18);
  border: 1px solid rgba(213,173,98,0.4);
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gold);
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════
   STYLE PROFILE — SETUP UI
   ═══════════════════════════════════════════════════════ */

/* Current profile status bar */
.profile-status {
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
}
.profile-status-empty {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.45);
}
.profile-status-active {
  background: rgba(213,173,98,0.07);
  border: 1px solid rgba(213,173,98,0.25);
  color: rgba(255,255,255,0.82);
  flex-direction: column;
  gap: 10px;
}
.profile-status-icon {
  font-size: 1rem;
  opacity: 0.7;
  flex-shrink: 0;
}
.profile-status-active .profile-status-icon {
  color: var(--gold);
  opacity: 1;
}
.profile-status-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.profile-status-head strong {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.9);
}
.profile-preview-box {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.07);
  white-space: pre-wrap;
}

/* Mode toggle (Questions / Analyze) */
.profile-mode-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}
.profile-mode-btn {
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.14);
  background: transparent;
  color: rgba(255,255,255,0.5);
  font-size: 0.84rem;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--speed), color var(--speed), border-color var(--speed);
}
.profile-mode-btn:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
}
.profile-mode-btn.active {
  background: rgba(213,173,98,0.12);
  border-color: rgba(213,173,98,0.4);
  color: var(--gold);
  font-weight: 500;
}

/* ── Questionnaire ── */
.questionnaire {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.q-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin: 0 0 10px 0;
}
.q-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.q-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--speed), border-color var(--speed), transform 80ms;
  min-width: 130px;
  flex: 1 1 130px;
  max-width: 220px;
  text-align: left;
}
.q-option:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.22);
}
.q-option.selected {
  background: rgba(213,173,98,0.10);
  border-color: rgba(213,173,98,0.45);
}
.q-opt-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
}
.q-option.selected .q-opt-label {
  color: var(--gold);
}
.q-opt-desc {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.4;
}
.q-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.q-hint {
  font-size: 0.80rem;
  color: rgba(255,255,255,0.35);
}

/* ── Analyze uploader ── */
.analyze-uploader {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.analyze-intro {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.55);
  margin: 0;
  line-height: 1.6;
}
.analyze-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -4px 0 2px;
}
.analyze-chip {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  gap: 5px;
}
.analyze-chip-ocr {
  border-color: rgba(213,173,98,0.25);
  color: rgba(213,173,98,0.8);
  background: rgba(213,173,98,0.07);
}
.analyze-chip-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(213,173,98,0.2);
  color: var(--gold);
  padding: 1px 5px;
  border-radius: 4px;
}
.analyze-dropzone {
  margin-top: 4px;
}
.analyze-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.analyze-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}
.analyze-file-name {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analyze-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.55);
}

/* ── Generator Style Link ── */
.gen-style-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(213, 173, 98, 0.1);
  border: 1px solid rgba(213, 173, 98, 0.25);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--speed);
  margin-left: auto;
}
.gen-style-link:hover {
  background: rgba(213, 173, 98, 0.2);
  border-color: rgba(213, 173, 98, 0.5);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR CHAT WIDGET
   ═══════════════════════════════════════════════════════ */

.sidebar-chat { display: none; }

/* ── Floating toggle pill — bottom-right corner ── */
.sb-chat-toggle {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid rgba(213,173,98,0.4);
  background: linear-gradient(135deg, rgba(20,32,54,0.96), rgba(10,18,34,0.98));
  color: rgba(255,255,255,0.88);
  font-size: 0.88rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05) inset;
  backdrop-filter: blur(16px);
  transition: background var(--speed), border-color var(--speed), box-shadow var(--speed), transform var(--speed);
}
.sb-chat-toggle:hover {
  background: linear-gradient(135deg, rgba(30,46,74,0.97), rgba(14,24,44,0.99));
  border-color: rgba(213,173,98,0.65);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 18px rgba(213,173,98,0.12);
  transform: translateY(-2px);
}
.sb-chat-toggle.open {
  display: none;
}
.sb-toggle-icon { color: var(--gold); font-size: 1rem; flex-shrink: 0; }
.sb-toggle-label { white-space: nowrap; }
.sb-toggle-chevron {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.45);
  transition: transform 0.25s ease;
}
.sb-chat-toggle.open .sb-toggle-chevron { transform: rotate(180deg); }


/* ── Full-height right sidebar chat panel ── */
.lex-right-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  z-index: 599;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(10,20,38,0.98) 0%, rgba(6,12,24,0.99) 100%);
  border-left: 1px solid rgba(213,173,98,0.22);
  box-shadow: -18px 0 60px rgba(0,0,0,0.55);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
}
.lex-right-sidebar.open {
  transform: translateX(0);
}

/* Header */
.lex-rs-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.lex-rs-title {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.03em;
}
.lex-rs-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--speed), color var(--speed), border-color var(--speed);
  flex-shrink: 0;
}
.lex-rs-close:hover {
  background: rgba(255,80,80,0.15);
  border-color: rgba(255,80,80,0.35);
  color: rgba(255,160,160,0.9);
}

/* History + New Chat icon buttons in sidebar header */
.sb-history-btn, .sb-new-chat-btn {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.sb-history-btn:hover, .sb-new-chat-btn:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.2);
}
.sb-history-btn.active {
  background: rgba(213,173,98,0.15);
  border-color: rgba(213,173,98,0.45);
  color: var(--gold);
}

/* Sessions drawer inside sidebar */
.sb-sessions-drawer {
  position: absolute;
  top: 61px; /* below header */
  left: 0; right: 0; bottom: 0;
  background: var(--bg);
  z-index: 10;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.sb-sessions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.sb-sess-actions { display: flex; gap: 6px; }
.sb-sessions-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
}
.sb-sess-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  gap: 1px 6px;
  transition: background 0.15s, border-color 0.15s;
}
.sb-sess-item:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); }
.sb-sess-item.active { background: rgba(213,173,98,0.1); border-color: rgba(213,173,98,0.3); }
.sb-sess-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  grid-column: 1; grid-row: 1;
}
.sb-sess-item.active .sb-sess-title { color: var(--gold); }
.sb-sess-meta {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  grid-column: 1; grid-row: 2;
}
.sb-sess-actions {
  grid-column: 2; grid-row: 1 / 3;
  align-self: center;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.15s;
}
.sb-sess-item:hover .sb-sess-actions { opacity: 1; }
.sb-sess-ren, .sb-sess-del {
  font-size: 0.68rem;
  padding: 2px 5px;
  line-height: 1;
}
.sb-sess-ren:hover { color: var(--gold) !important; border-color: rgba(213,173,98,0.4) !important; }
.sb-sess-del:hover { color: #e06060 !important; border-color: rgba(220,80,80,0.4) !important; }
.sb-sess-rename-input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(213,173,98,0.45);
  border-radius: 5px;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  padding: 2px 6px;
  outline: none;
  grid-column: 1; grid-row: 1;
}

/* ── Custom confirm modal ─────────────────────────────────── */
#lex-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lex-confirm-modal .lcm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 20, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#lex-confirm-modal .lcm-card {
  position: relative;
  z-index: 1;
  background: rgba(13, 24, 40, 0.92);
  border: 1px solid rgba(213, 173, 98, 0.22);
  border-radius: 14px;
  padding: 24px 28px 20px;
  width: min(340px, 90vw);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(213,173,98,0.08);
  animation: lcmIn 0.18s ease-out;
}
@keyframes lcmIn {
  from { opacity: 0; transform: scale(0.94) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
#lex-confirm-modal .lcm-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text, #e8ecf0);
  margin: 0 0 6px;
}
#lex-confirm-modal .lcm-sub {
  font-size: 0.82rem;
  color: rgba(232,236,240,0.52);
  margin: 0 0 20px;
}
#lex-confirm-modal .lcm-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
#lex-confirm-modal .lcm-btn {
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
#lex-confirm-modal .lcm-cancel {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(232,236,240,0.72);
}
#lex-confirm-modal .lcm-cancel:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text, #e8ecf0);
}
#lex-confirm-modal .lcm-confirm {
  background: rgba(200, 60, 60, 0.18);
  border-color: rgba(220, 80, 80, 0.4);
  color: #e07070;
}
#lex-confirm-modal .lcm-confirm:hover, #lex-confirm-modal .lcm-confirm:focus {
  background: rgba(220, 60, 60, 0.32);
  border-color: rgba(220, 80, 80, 0.7);
  color: #f09090;
  outline: none;
}
.sb-proj { display: flex; flex-direction: column; gap: 2px; }
.sb-proj-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
  transition: background 0.15s;
}
.sb-proj-head:hover { background: rgba(255,255,255,0.08); }
.sb-proj-name { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.7); flex: 1; }
.sb-proj-count { font-size: 0.7rem; color: rgba(255,255,255,0.3); }
.sb-proj-add { padding: 1px 6px; font-size: 0.75rem; }
.sb-proj-body { padding-left: 10px; display: flex; flex-direction: column; gap: 2px; }
.sb-proj-body.collapsed { display: none; }

/* Voice mode button (header) */
.sb-voice-mode-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.55);
  font-size: 0.72rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background var(--speed), border-color var(--speed), color var(--speed);
}
.sb-voice-mode-btn:hover {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
}
.sb-voice-mode-btn.active {
  background: rgba(213,173,98,0.18);
  border-color: rgba(213,173,98,0.5);
  color: var(--gold);
}
.sb-vmbtn-icon { font-size: 0.9rem; }

/* Mic button (input row) */
.sb-mic-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background var(--speed), border-color var(--speed), color var(--speed), box-shadow var(--speed);
}
.sb-mic-btn:hover {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.9);
}
.sb-mic-btn.listening {
  background: rgba(220,60,60,0.18);
  border-color: rgba(220,60,60,0.55);
  color: #f87171;
  box-shadow: 0 0 0 3px rgba(220,60,60,0.15);
  animation: micPulse 1.4s infinite ease-in-out;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(220,60,60,0.15); }
  50%       { box-shadow: 0 0 0 7px rgba(220,60,60,0.05); }
}

/* Voice status bar */
.sb-voice-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: rgba(213,173,98,0.07);
  border-top: 1px solid rgba(213,173,98,0.14);
  border-bottom: 1px solid rgba(213,173,98,0.14);
  flex-shrink: 0;
}
.sb-voice-status[data-state="listening"] { background: rgba(220,60,60,0.08); border-color: rgba(220,60,60,0.18); }
.sb-voice-status[data-state="speaking"]      { background: rgba(213,173,98,0.10); border-color: rgba(213,173,98,0.22); }
.sb-voice-status[data-state="transcribing"]  { background: rgba(100,160,255,0.08); border-color: rgba(100,160,255,0.2); }

/* Animated wave bars */
.sb-vs-waves {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
}
.sb-vs-waves span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--gold);
  animation: vsWave 1s ease-in-out infinite;
}
[data-state="listening"] .sb-vs-waves span { background: #f87171; }
.sb-vs-waves span:nth-child(1) { animation-delay: 0s;    height: 6px;  }
.sb-vs-waves span:nth-child(2) { animation-delay: 0.15s; height: 12px; }
.sb-vs-waves span:nth-child(3) { animation-delay: 0.3s;  height: 18px; }
.sb-vs-waves span:nth-child(4) { animation-delay: 0.15s; height: 12px; }
.sb-vs-waves span:nth-child(5) { animation-delay: 0s;    height: 6px;  }
@keyframes vsWave {
  0%, 100% { transform: scaleY(0.4); opacity: 0.6; }
  50%       { transform: scaleY(1);   opacity: 1; }
}

.sb-vs-label {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.03em;
}
.sb-vs-stop {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: rgba(255,255,255,0.45);
  font-size: 0.65rem;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color var(--speed), border-color var(--speed);
}
.sb-vs-stop:hover { color: #f87171; border-color: rgba(220,60,60,0.4); }

/* Messages area — fills all available space */
.sb-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.sb-chat-messages::-webkit-scrollbar { width: 3px; }
.sb-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }

/* Message bubbles */
.sb-msg { display: flex; }
.sb-msg-user { justify-content: flex-end; }
.sb-msg-assistant { justify-content: flex-start; }

.sb-bubble {
  max-width: 86%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.83rem;
  line-height: 1.6;
  word-break: break-word;
}
.sb-msg-user .sb-bubble {
  background: rgba(213,173,98,0.14);
  border: 1px solid rgba(213,173,98,0.28);
  color: rgba(255,255,255,0.88);
  border-bottom-right-radius: 4px;
}
.sb-msg-assistant .sb-bubble {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.78);
  border-bottom-left-radius: 4px;
}

.sb-speak-btn {
  display: inline-block;
  margin-left: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8em;
  opacity: 0.4;
  padding: 0;
  vertical-align: middle;
  transition: opacity 0.15s;
}
.sb-speak-btn:hover { opacity: 1; }

/* Chatbot tab speak + mic buttons */
.chat-speak-btn {
  display: inline-block;
  margin-left: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8em;
  opacity: 0.4;
  padding: 0;
  vertical-align: middle;
  transition: opacity 0.15s;
}
.chat-speak-btn:hover { opacity: 1; }

@keyframes mic-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Typing indicator */
.sb-typing .sb-bubble {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
}
.sb-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  animation: sbPulse 1.2s infinite ease-in-out;
  display: inline-block;
}
.sb-dot:nth-child(2) { animation-delay: 0.2s; }
.sb-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes sbPulse {
  0%, 80%, 100% { transform: scale(0.75); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Selected-text context strip */
.sb-sel-ctx {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 14px;
  margin: 0 14px 8px;
  border-radius: 10px;
  background: rgba(213,173,98,0.08);
  border: 1px solid rgba(213,173,98,0.25);
  flex-shrink: 0;
}
.sb-sel-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  white-space: nowrap;
  padding-top: 1px;
}
.sb-sel-preview {
  flex: 1;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.sb-sel-clear {
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--speed);
}
.sb-sel-clear:hover { color: rgba(255,100,100,0.8); }

/* Selected-text badge inside a sent bubble */
.sb-sel-badge {
  font-size: 0.73rem;
  color: rgba(213,173,98,0.75);
  border-left: 2px solid rgba(213,173,98,0.45);
  padding-left: 7px;
  margin-bottom: 5px;
  font-style: italic;
  line-height: 1.4;
  word-break: break-word;
}

/* Input row */
.sb-chat-input-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  padding: 12px 16px 20px;
  align-items: flex-end;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.sb-chat-input {
  min-height: 40px;
  max-height: 120px;
  resize: none;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: var(--ink-light);
  font-size: 0.83rem;
  font-family: inherit;
  padding: 10px 12px;
  line-height: 1.4;
  transition: border-color var(--speed);
  overflow-y: auto;
}
.sb-chat-input:focus {
  outline: none;
  border-color: rgba(213,173,98,0.55);
  box-shadow: 0 0 0 3px rgba(213,173,98,0.1);
}
.sb-chat-send {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(213,173,98,0.35);
  background: rgba(213,173,98,0.12);
  color: var(--gold);
  font-size: 1.05rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background var(--speed), border-color var(--speed);
}
.sb-chat-send:hover {
  background: rgba(213,173,98,0.22);
  border-color: rgba(213,173,98,0.6);
}


/* ── Issue Spotter ─────────────────────────────────────────────────────────── */
.is-page { display: flex; flex-direction: column; gap: 16px; }

/* Issue Spotter tab bar */
.is-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: 0;
  margin-bottom: 4px;
}
.is-page .is-tab {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 20px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-muted) !important;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.is-page .is-tab:hover  { color: var(--text) !important; }
.is-page .is-tab.active { color: var(--gold, #d4a74f) !important; border-bottom: 2px solid var(--gold, #d4a74f) !important; }

.is-top-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items: start;
}
.is-left-col, .is-right-col { display: flex; flex-direction: column; gap: 0; }

.is-output-area {
  min-height: 180px;
  line-height: 1.7;
  font-size: .92rem;
  color: var(--text);
  padding: 4px 0;
  overflow-y: auto;
}
.is-output-area.is-placeholder { color: var(--text-muted); font-style: italic; }
.is-output-area p  { margin: 0 0 10px; }
.is-output-area ul { margin: 4px 0 10px; padding-left: 18px; }
.is-output-area li { margin-bottom: 4px; }
.is-output-area strong { color: var(--gold, #d4a74f); }
.is-output-area em { color: var(--text-muted); font-style: normal; font-size: .88em; }

.is-task       { background: rgba(255,255,255,.05); border-left: 2px solid var(--gold,#d4a74f); padding: 8px 12px; border-radius: 4px; margin-top: 10px; }
.is-hint-label { font-size: .85rem; color: var(--text-muted); margin: 10px 0 4px; }
.is-sec-head   { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 12px 0 4px; }
.is-score-line { font-size: 1rem; margin-bottom: 10px; }
.is-caught li  { color: #6fcf97; }
.is-missed li  { color: #eb5757; }
.is-over li    { color: #f2c94c; }
.is-tip        { background: rgba(255,255,255,.05); padding: 8px 12px; border-radius: 4px; font-size: .88rem; margin-top: 8px; }
.is-retry      { font-style: italic; color: var(--text-muted); font-size: .88rem; }

.is-bottom-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.is-stats-row   { display: flex; gap: 20px; padding: 4px 0; }
.is-stat        { display: flex; flex-direction: column; gap: 2px; }
.is-stat span   { font-size: .8rem; color: var(--text-muted); }
.is-stat strong { font-size: 1.4rem; font-weight: 700; }

.is-weak-item    { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .88rem; }
.is-weak-item em { color: var(--text-muted); font-style: normal; }
.is-muted-note   { color: var(--text-muted); font-size: .88rem; font-style: italic; margin: 0; }

.is-hist-btn {
  display: block; width: 100%; text-align: left;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: var(--text); padding: 10px 12px; border-radius: 8px; margin-bottom: 6px;
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .15s;
}
.is-hist-btn:hover { background: rgba(255,255,255,.09); }
.is-hist-btn small { display: block; font-weight: 400; color: var(--text-muted); margin-top: 3px; font-size: .8rem; }

@media (max-width: 1100px) {
  .is-top-grid    { grid-template-columns: 1fr; }
  .is-bottom-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .is-bottom-grid { grid-template-columns: 1fr; }
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════
   DASHBOARD — Due-Today Card
══════════════════════════════════════════════════════ */
.db-due-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: linear-gradient(135deg, rgba(20,45,79,.95), rgba(10,28,54,.95));
  border: 1px solid rgba(213,173,98,.28);
}
.db-due-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold, #d4a74f);
  font-weight: 600;
}
.db-due-count {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-variant-numeric: slashed-zero tabular-nums;
}
.db-due-sub {
  font-size: .82rem;
  color: rgba(255,255,255,.55);
}
.db-review-btn {
  padding: 7px 16px;
  font-size: .84rem;
  flex-shrink: 0;
}
/* Cards Due row inside Progress widget */
.db-cards-due-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.db-cards-due-info {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.65);
  flex-wrap: wrap;
}
.db-cards-due-icon { font-size: 1rem; }
.db-cards-due-label { font-weight: 600; color: rgba(255,255,255,0.82); }
.db-cards-due-count {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  min-width: 20px;
}
.db-cards-week { font-size: 0.75rem; color: rgba(255,255,255,0.35); }

/* ══════════════════════════════════════════════════════
   DASHBOARD — To-Do Panel
══════════════════════════════════════════════════════ */
.db-todo {
  grid-column: span 8;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.db-todo .panel-head { margin-bottom: 12px; }
.db-todo-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.db-todo-input-row input {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--text);
  font: inherit;
  font-size: .88rem;
}
.db-todo-input-row input:focus { outline: none; border-color: var(--gold,.8); }
.db-add-btn {
  padding: 7px 14px;
  font-size: 1.1rem;
  border-radius: 8px;
  font-weight: 700;
  min-width: 36px;
}
.db-todo-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.db-filter-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 4px 12px;
  font: inherit;
  font-size: .78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.db-filter-btn:hover { background: rgba(255,255,255,.1); color: var(--text); }
.db-filter-btn.active {
  background: rgba(213,173,98,.15);
  border-color: var(--gold, #d4a74f);
  color: var(--gold, #d4a74f);
}
.db-todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
  max-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.db-todo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  transition: background .15s;
}
.db-todo-item:hover { background: rgba(255,255,255,.08); }
.db-todo-item.done .db-todo-text {
  text-decoration: line-through;
  color: var(--text-muted);
}
.db-todo-check {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  color: transparent;
}
.db-todo-item.done .db-todo-check {
  background: var(--gold, #d4a74f);
  border-color: var(--gold, #d4a74f);
  color: #000;
}
.db-todo-text { flex: 1; font-size: .88rem; }
.db-todo-del {
  background: none;
  border: none;
  color: rgba(255,255,255,.25);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 2px;
  line-height: 1;
  transition: color .15s;
}
.db-todo-del:hover { color: #eb5757; }
.db-empty {
  color: var(--text-muted);
  font-size: .84rem;
  font-style: italic;
  padding: 12px 0;
  text-align: center;
}
.db-past-sep {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  padding: 8px 0 4px;
  opacity: .6;
}

/* ══════════════════════════════════════════════════════
   DASHBOARD — Due Today Panel
══════════════════════════════════════════════════════ */
.db-due-today-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

/* Today header */
.db-due-today-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.db-due-today-date {
  font-size: 0.92rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
}
.db-due-today-badge {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 20px;
  background: transparent;
  color: transparent;
}
.db-due-today-badge--has {
  background: rgba(213,173,98,0.15);
  color: var(--gold);
  border: 1px solid rgba(213,173,98,0.3);
}

/* Scrollable body */
.db-due-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.db-due-section {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.28);
  margin: 10px 4px 4px;
}
.db-due-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px;
  border-radius: 7px;
  transition: background 0.1s;
}
.db-due-item:hover { background: rgba(255,255,255,0.04); }
.db-due-bullet { font-size: 0.82rem; flex-shrink: 0; }
.db-due-check {
  flex-shrink: 0;
  accent-color: var(--gold);
  cursor: pointer;
  width: 15px; height: 15px;
}
.db-due-text {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.82);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-due-text--done {
  text-decoration: line-through;
  opacity: 0.4;
}
.db-due-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  color: rgba(255,255,255,0.3);
  font-size: 0.85rem;
  text-align: center;
}
.db-due-empty-icon { font-size: 1.6rem; }

/* Cards Due row inside Due Today widget */
.db-due-cards-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 4px;
  flex-shrink: 0;
}
.db-due-cards-info {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}
.db-due-cards-label { font-weight: 600; color: rgba(255,255,255,0.82); }
.db-due-cards-count { font-size: 1.05rem; font-weight: 700; color: var(--gold); }
.db-due-cards-week  { font-size: 0.75rem; color: rgba(255,255,255,0.3); }
.db-due-cards-btn   { font-size: 0.78rem; padding: 5px 12px; white-space: nowrap; }

/* Upcoming section */
.db-upcoming-section {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 10px 14px 14px;
  flex-shrink: 0;
  max-height: 180px;
  overflow-y: auto;
}
.db-upcoming-title {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.28);
  margin-bottom: 8px;
}
.db-upcoming-day-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold);
  margin: 8px 0 3px;
}
.db-upcoming-item {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  padding: 2px 6px;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════
   DASHBOARD — Calendar Panel (kept for compatibility)
══════════════════════════════════════════════════════ */
.db-calendar {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.db-calendar .panel-head { margin-bottom: 10px; }
.db-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.db-cal-arrow {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: var(--text);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background .15s;
}
.db-cal-arrow:hover { background: rgba(255,255,255,.14); }
.db-cal-title {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .03em;
}
.db-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 14px;
}
.db-cal-lbl {
  text-align: center;
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 4px 0;
}
.db-cal-day {
  position: relative;
  text-align: center;
  font-size: .82rem;
  padding: 5px 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
  color: var(--text-soft);
}
.db-cal-day:not(.empty):hover { background: rgba(255,255,255,.06); }
.db-cal-day.today {
  background: rgba(213,173,98,.18);
  color: var(--gold, #d4a74f);
  font-weight: 700;
}
.db-cal-day.has-event { color: var(--text); cursor: pointer; }
.db-cal-day.has-event:hover { background: rgba(255,255,255,.07); }
.db-cal-day.other-month { opacity: .3; }
.db-cal-day.empty { pointer-events: none; }
.db-cal-dot {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold, #d4a74f);
}
.db-cal-dot.type-class   { background: #65b1ff; }
.db-cal-dot.type-exam    { background: #eb5757; }
.db-cal-dot.type-deadline{ background: #f2c94c; }
.db-cal-dot.type-other   { background: rgba(255,255,255,.4); }

/* Event add row */
.db-event-add-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 0 8px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.db-event-add-row select,
.db-event-add-row input[type="date"],
.db-event-add-row input[type="text"] {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  padding: 6px 10px;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
}
.db-event-add-row select { color-scheme: dark; }
.db-event-add-row input[type="date"] { width: 138px; }
.db-event-add-row input[type="text"] { flex: 1; min-width: 100px; }
.db-event-add-row select:focus,
.db-event-add-row input:focus { outline: none; border-color: rgba(213,173,98,.6); }

/* Event list */
.db-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.db-event-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}
.db-event-item.past { opacity: .5; }
.db-event-icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.db-event-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.db-event-name { font-size: .86rem; font-weight: 600; }
.db-event-when { font-size: .76rem; color: var(--text-muted); }
.db-event-del {
  background: none;
  border: none;
  color: rgba(255,255,255,.2);
  cursor: pointer;
  font-size: .95rem;
  padding: 0 2px;
  transition: color .15s;
}
.db-event-del:hover { color: #eb5757; }

/* ══════════════════════════════════════════════════════
   STUDY PLANNER
══════════════════════════════════════════════════════ */
#view-planner.active { overflow: hidden; }

.planner-layout {
  display: flex;
  flex-direction: row;
  gap: 0;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Profile panel ── */
.planner-profile-panel {
  border-radius: var(--radius);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 270px;
  min-width: 270px;
  flex-shrink: 0;
  margin-right: 16px;
  transition: width 0.28s cubic-bezier(0.4,0,0.2,1),
              min-width 0.28s cubic-bezier(0.4,0,0.2,1),
              margin-right 0.28s cubic-bezier(0.4,0,0.2,1),
              opacity 0.22s;
}

/* Panel collapsed — driven by class on #view-planner (mirrors ctx-collapsed pattern) */
#view-planner.panel-collapsed .planner-profile-panel {
  width: 0;
  min-width: 0;
  margin-right: 0;
  overflow: hidden;
  opacity: 0;
}

/* Toggle button: active (panel open) = gold, collapsed = muted — mirrors ctx-toggle-btn */
.planner-panel-toggle { /* gold when open */ }
#view-planner.panel-collapsed .planner-panel-toggle {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.45);
}

/* Tab strip */
.planner-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.planner-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,0.42);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 11px 4px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-align: center;
  white-space: nowrap;
}
.planner-tab:hover { color: rgba(255,255,255,0.70); }
.planner-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Tab panels */
.planner-tab-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(213,173,98,0.18) transparent;
}
.planner-tab-panel.active { display: flex; }

.planner-save-btn { padding: 5px 14px; font-size: 0.78rem; }

.planner-field { display: flex; flex-direction: column; gap: 6px; }
.planner-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.38);
}

.planner-btn-group { display: flex; gap: 5px; flex-wrap: wrap; }
.planner-opt-priority {
  opacity: 0.6;
  font-size: 0.9em;
  font-weight: bold;
}
.planner-opt-btn {
  flex: 1;
  padding: 6px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.50);
  cursor: pointer;
  font-size: 0.76rem;
  transition: all 0.15s;
  text-align: center;
  white-space: nowrap;
}
.planner-opt-btn.active {
  background: rgba(213,173,98,0.15);
  border-color: rgba(213,173,98,0.45);
  color: var(--gold);
}
.planner-opt-btn:hover:not(.active) {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
}

.planner-course-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.planner-course-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 9px;
  background: rgba(255,255,255,0.04);
  border-radius: 7px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75);
}
.planner-course-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planner-course-actions {
  display: flex; align-items: center; gap: 3px; flex-shrink: 0;
  opacity: 0; transition: opacity 0.14s;
}
.planner-course-item:hover .planner-course-actions { opacity: 1; }
.planner-course-edit-btn {
  width: 22px; height: 22px; border-radius: 5px;
  background: transparent; border: 1px solid transparent;
  color: rgba(232,236,240,0.40); font-size: 0.75rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.13s;
}
.planner-course-edit-btn:hover {
  background: rgba(213,173,98,0.12); border-color: rgba(213,173,98,0.30);
  color: rgba(213,173,98,0.90);
}
.planner-course-edit-input {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(213,173,98,0.45);
  border-radius: 5px;
  color: #e8ecf0; font-size: 0.8rem;
  padding: 2px 7px; outline: none;
}
input[type="range"] { width: 100%; accent-color: var(--gold); cursor: pointer; }

/* ── Planner main area ── */
.planner-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.planner-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.planner-week-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  min-width: 150px;
  text-align: center;
}

/* Stale-plan banner */
.planner-stale-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin-bottom: 2px;
  background: rgba(213,173,98,0.10);
  border: 1px solid rgba(213,173,98,0.28);
  border-radius: 10px;
  flex-shrink: 0;
  animation: planner-stale-in 0.25s ease;
}
@keyframes planner-stale-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.planner-stale-icon { font-size: 0.95rem; flex-shrink: 0; }
.planner-stale-msg  { flex: 1; font-size: 0.75rem; color: rgba(213,173,98,0.90); line-height: 1.35; }
.planner-stale-regen {
  flex-shrink: 0;
  background: rgba(213,173,98,0.16); border: 1px solid rgba(213,173,98,0.40);
  color: var(--gold); font-size: 0.72rem; font-weight: 600;
  border-radius: 7px; padding: 4px 11px; cursor: pointer; white-space: nowrap;
  transition: background 0.13s;
}
.planner-stale-regen:hover { background: rgba(213,173,98,0.28); }
.planner-stale-dismiss {
  flex-shrink: 0; width: 20px; height: 20px;
  background: transparent; border: none;
  color: rgba(213,173,98,0.50); font-size: 0.75rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: color 0.13s;
}
.planner-stale-dismiss:hover { color: rgba(213,173,98,0.90); }

/* Scrollable days list */
.planner-days {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(213,173,98,0.18) transparent;
  padding-right: 4px;
}

/* Individual day card */
.planner-day {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.planner-today {
  border-color: rgba(213,173,98,0.25);
  background: rgba(213,173,98,0.04);
}

.planner-day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.planner-today .planner-day-head {
  background: rgba(213,173,98,0.06);
  border-bottom-color: rgba(213,173,98,0.12);
}

.planner-day-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.planner-day-name {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
}
.planner-today-badge {
  font-size: 0.6rem;
  background: rgba(213,173,98,0.18);
  color: var(--gold);
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.planner-day-date { font-size: 0.8rem; color: rgba(255,255,255,0.65); }
.planner-day-total { font-size: 0.72rem; color: var(--gold); margin-left: 4px; }

.planner-day-add {
  background: transparent;
  border: 1px solid rgba(213,173,98,0.22);
  border-radius: 6px;
  color: rgba(213,173,98,0.65);
  font-size: 0.72rem;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.planner-day-add:hover { background: rgba(213,173,98,0.10); color: var(--gold); border-color: rgba(213,173,98,0.4); }

.planner-day-tasks {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px;
}

.planner-empty-day {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.22);
  padding: 6px 4px;
  font-style: italic;
}

/* Task row */
.planner-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  transition: background 0.12s;
}
.planner-task:hover { background: rgba(255,255,255,0.05); }
.planner-task.done { opacity: 0.4; }
.planner-task.done .planner-task-desc { text-decoration: line-through; }

.planner-task-check {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.22);
  background: transparent;
  color: var(--gold);
  font-size: 0.65rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.planner-task-check.checked { border-color: var(--gold); background: rgba(213,173,98,0.18); }

.planner-task-icon { font-size: 0.85rem; flex-shrink: 0; }

.planner-task-body {
  flex: 1; display: flex; align-items: baseline; gap: 6px; min-width: 0;
}
.planner-task-subject {
  font-size: 0.78rem; font-weight: 600; color: var(--gold);
  white-space: nowrap; flex-shrink: 0;
}
.planner-task-desc {
  font-size: 0.78rem; color: rgba(255,255,255,0.62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.planner-task-dur {
  font-size: 0.68rem; color: rgba(255,255,255,0.28);
  flex-shrink: 0; white-space: nowrap;
}

.planner-task-edit, .planner-task-del {
  opacity: 0;
  background: transparent; border: none;
  font-size: 0.75rem; cursor: pointer; padding: 2px 4px;
  transition: opacity 0.12s, color 0.12s;
  flex-shrink: 0;
}
.planner-task:hover .planner-task-edit,
.planner-task:hover .planner-task-del { opacity: 1; }
.planner-task-edit { color: rgba(255,255,255,0.40); }
.planner-task-edit:hover { color: #fff; }
.planner-task-del  { color: rgba(255,255,255,0.30); }
.planner-task-del:hover  { color: #eb5757; }

/* ══════════════════════════════════════════════
   FULL MONTH CALENDAR
══════════════════════════════════════════════ */
.planner-days {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pcal-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}
.pcal-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: rgba(255,255,255,0.03);
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(255,255,255,0.07);
  border-bottom: none;
  flex-shrink: 0;
}
.pcal-hdr {
  text-align: center;
  padding: 9px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.06em;
}
.pcal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(80px, 1fr);
  flex: 1;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 0 0 10px 10px;
  gap: 1px;
  background: rgba(255,255,255,0.04);
}
.pcal-cell {
  background: rgba(12,18,34,0.85);
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 80px;
  cursor: default;
  transition: background 0.12s;
  overflow: hidden;
}
.pcal-cell--empty {
  background: rgba(0,0,0,0.2);
}
.pcal-cell--today {
  background: rgba(213,173,98,0.07);
  outline: 1px solid rgba(213,173,98,0.28);
  outline-offset: -1px;
}
.pcal-cell--blocked { background: rgba(235,87,87,0.04); }
.pcal-cell--off { opacity: 0.5; }
.pcal-cell:not(.pcal-cell--empty):hover { background: rgba(255,255,255,0.04); }
.pcal-date {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  line-height: 1;
  margin-bottom: 2px;
}
.pcal-cell--today .pcal-date {
  color: var(--gold);
  background: rgba(213,173,98,0.15);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcal-exam-chip {
  font-size: 0.63rem;
  background: rgba(235,87,87,0.20);
  border: 1px solid rgba(235,87,87,0.35);
  border-radius: 3px;
  padding: 1px 5px;
  color: #ff8080;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcal-task {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.55);
  overflow: hidden;
}
.pcal-task-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  opacity: 0.7;
}
.pcal-task--done .pcal-task-dot { background: rgba(255,255,255,0.2); }
.pcal-task--done .pcal-task-text { text-decoration: line-through; opacity: 0.4; }
.pcal-task-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcal-more {
  font-size: 0.60rem;
  color: rgba(255,255,255,0.25);
  margin-top: 1px;
}

/* planner collapsible chevron */
.planner-section-chev {
  font-size: 0.65rem;
  opacity: 0.45;
  margin-left: auto;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   CHAT SESSIONS LIST (shared chatbot + sidebar)
══════════════════════════════════════════════ */
.sess-root-drop { min-height: 30px; }
.sess-folder {
  margin-bottom: 3px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.07);
  transition: border-color 0.15s, background 0.15s;
}
.sess-folder.drag-over {
  border-color: rgba(213,173,98,0.5);
  background: rgba(213,173,98,0.06);
}
.sess-folder-head {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; cursor: pointer;
  background: rgba(255,255,255,0.02);
  font-size: 0.82rem; color: rgba(255,255,255,0.55);
  border-radius: 7px;
  transition: background 0.12s;
}
.sess-folder-head:hover { background: rgba(255,255,255,0.05); }
.sess-folder-chevron { font-size: 0.68rem; opacity: 0.5; flex-shrink: 0; }
.sess-folder-icon { font-size: 0.85rem; flex-shrink: 0; }
.sess-folder-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-folder-count {
  font-size: 0.63rem; color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.07); border-radius: 10px;
  padding: 1px 6px; flex-shrink: 0;
}
.sess-folder-del {
  opacity: 0; background: transparent; border: none;
  color: rgba(255,255,255,0.3); cursor: pointer;
  font-size: 0.72rem; padding: 1px 5px;
  transition: opacity 0.1s, color 0.1s; flex-shrink: 0;
}
.sess-folder-head:hover .sess-folder-del { opacity: 1; }
.sess-folder-del:hover { color: #eb5757; }
.sess-folder-children { padding: 3px 0 4px 10px; }

.sess-item {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 7px; cursor: pointer;
  font-size: 0.82rem; color: rgba(255,255,255,0.65);
  transition: background 0.12s;
}
.sess-item:hover { background: rgba(255,255,255,0.05); }
.sess-item--active { background: rgba(213,173,98,0.10); color: rgba(255,255,255,0.92); }
.sess-item--indented { padding-left: 8px; }
.sess-item-icon { font-size: 0.75rem; opacity: 0.38; flex-shrink: 0; }
.sess-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-item-del {
  opacity: 0; background: transparent; border: none;
  color: rgba(255,255,255,0.28); cursor: pointer;
  font-size: 0.72rem; padding: 1px 5px;
  transition: opacity 0.1s, color 0.1s; flex-shrink: 0;
}
.sess-item:hover .sess-item-del { opacity: 1; }
.sess-item-del:hover { color: #eb5757; }
.sess-item.dragging { opacity: 0.35; background: rgba(213,173,98,0.06); }
.sess-rename-input {
  flex: 1; background: rgba(255,255,255,0.09);
  border: 1px solid rgba(213,173,98,0.45);
  border-radius: 4px; color: #fff; padding: 2px 6px;
  font-size: 0.82rem; outline: none; min-width: 0; min-height: auto;
}

/* ══════════════════════════════════════════════
   PLANNER DAY MODAL
══════════════════════════════════════════════ */
.planner-day-modal {
  position: fixed; inset: 0; z-index: 1100;
  display: none; align-items: center; justify-content: center;
}
.planner-day-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
}
.planner-day-modal-panel {
  position: relative; z-index: 1;
  width: 500px; max-width: 94vw; max-height: 80vh;
  display: flex; flex-direction: column;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow: 0 24px 72px rgba(0,0,0,0.7);
  background: #0d1525;
  overflow: hidden;
}
.planner-day-modal-hdr {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.planner-day-modal-hdr h4 { flex: 1; margin: 0; font-size: 1rem; font-weight: 700; }
.planner-day-modal-body {
  flex: 1; overflow-y: auto; padding: 12px 20px;
  display: flex; flex-direction: column; gap: 2px;
}
/* ── Add-sections accordion ── */
.pdm-add-sections {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column;
}
.pdm-add-section { border-bottom: 1px solid rgba(255,255,255,0.06); }
.pdm-add-section:last-child { border-bottom: none; }
.pdm-add-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 20px; background: transparent; border: none;
  color: rgba(255,255,255,0.55); font-size: 0.85rem; cursor: pointer;
  text-align: left; transition: background 0.12s, color 0.12s;
}
.pdm-add-toggle:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.85); }
.pdm-add-toggle.active { color: var(--gold); background: rgba(213,173,98,0.06); }
.pdm-add-chev { font-size: 0.65rem; opacity: 0.6; width: 10px; flex-shrink: 0; transition: transform 0.15s; }
.pdm-add-form {
  display: none; flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: 8px; padding: 4px 20px 14px;
}
.pdm-add-form.open { display: flex; }
.pdm-add-inp {
  flex: 1; min-width: 0; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
  color: #fff; padding: 8px 12px; font-size: 0.85rem; outline: none; min-height: auto;
}
.pdm-add-inp:focus { border-color: rgba(213,173,98,0.5); }
.pdm-add-inp--sm { flex: 0 0 130px; }
.pdm-add-btn { flex-shrink: 0; }
.pdm-time-badge {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 600;
  background: rgba(97,168,235,0.14); border: 1px solid rgba(97,168,235,0.28);
  border-radius: 5px; padding: 2px 7px; color: #7ec8ff;
}
.pdm-pages { font-size: 0.75rem; color: rgba(255,255,255,0.38); margin-left: 4px; }

.pdm-section-title {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  color: rgba(255,255,255,0.28); letter-spacing: 0.08em;
  margin: 10px 0 4px;
}
.pdm-exam-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.pdm-exam-chip {
  background: rgba(235,87,87,0.14); border: 1px solid rgba(235,87,87,0.28);
  border-radius: 6px; padding: 5px 10px; color: #ff8080; font-size: 0.82rem; flex: 1;
}
.pdm-task-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px; border-radius: 7px;
  transition: background 0.1s;
}
.pdm-task-item:hover { background: rgba(255,255,255,0.03); }
.pdm-task-check { flex-shrink: 0; accent-color: var(--gold); cursor: pointer; width: 16px; height: 16px; }
.pdm-task-text { flex: 1; font-size: 0.85rem; color: rgba(255,255,255,0.82); cursor: text; }
.pdm-task-text.done { text-decoration: line-through; opacity: 0.42; }
.pdm-edit-input {
  flex: 1; background: rgba(255,255,255,0.09);
  border: 1px solid rgba(213,173,98,0.4); border-radius: 4px;
  color: #fff; padding: 3px 7px; font-size: 0.85rem; outline: none; min-height: auto;
}
.pdm-del-btn {
  opacity: 0; background: transparent; border: none;
  color: rgba(255,255,255,0.25); cursor: pointer;
  font-size: 0.72rem; padding: 2px 5px;
  transition: opacity 0.1s, color 0.1s; flex-shrink: 0;
}
.pdm-task-item:hover .pdm-del-btn,
.pdm-exam-item:hover .pdm-del-btn { opacity: 1; }
.pdm-del-btn:hover { color: #eb5757; }
.pdm-empty {
  font-size: 0.82rem; color: rgba(255,255,255,0.28);
  padding: 20px 0; text-align: center;
}

/* ── Syllabus upload zone ── */
.planner-hint-text {
  font-size: 0.70rem; color: rgba(255,255,255,0.30); margin: 0 0 6px; line-height: 1.5;
}
.planner-syllabus-drop {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border: 1.5px dashed rgba(255,255,255,0.14);
  border-radius: 10px;
  transition: border-color 0.2s, background 0.2s;
}
.planner-syllabus-drop.drag-over {
  border-color: rgba(213,173,98,0.50); background: rgba(213,173,98,0.06);
}
.planner-upload-btn {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px; color: rgba(255,255,255,0.70);
  font-size: 0.76rem; padding: 5px 12px; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.planner-upload-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); color: #fff; }
.planner-drop-or { font-size: 0.70rem; color: rgba(255,255,255,0.25); }
.planner-paste-link {
  background: transparent; border: none; color: rgba(213,173,98,0.70);
  font-size: 0.76rem; cursor: pointer; padding: 0;
  text-decoration: underline; transition: color 0.15s;
}
.planner-paste-link:hover { color: var(--gold); }
.planner-syllabus-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.planner-syl-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; background: rgba(255,255,255,0.04); border-radius: 7px;
}
.planner-syl-icon { font-size: 0.85rem; flex-shrink: 0; }
.planner-syl-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.planner-syl-name { font-size: 0.78rem; color: rgba(255,255,255,0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-syl-meta { font-size: 0.65rem; color: rgba(255,255,255,0.30); }

/* Course assignment dropdown on syllabus rows */
.planner-syl-course-sel {
  font-size: 0.70rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: rgba(213,173,98,0.82);
  padding: 2px 5px;
  cursor: pointer;
  max-width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
.planner-syl-course-sel:focus { border-color: rgba(213,173,98,0.45); }
.planner-syl-course-sel option { background: #0d1828; color: #e8ecf0; }

/* ── Exam dates ──────────────────────────────────────────────────────────── */
.planner-exam-add-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 5px;
  margin-bottom: 8px;
}
.planner-exam-add-row input[type="date"],
.planner-exam-add-row select,
.planner-exam-add-row input[type="text"] {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  color: rgba(232,236,240,0.85);
  font-size: 0.75rem;
  padding: 5px 8px;
  outline: none;
  min-width: 0;
  transition: border-color 0.14s;
  color-scheme: dark;
}
.planner-exam-add-row input:focus,
.planner-exam-add-row select:focus { border-color: rgba(213,173,98,0.40); }
.planner-exam-add-row select option { background: #0d1828; color: #e8ecf0; }

.planner-exam-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.planner-exam-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  border-left: 2px solid rgba(213,173,98,0.35);
  transition: opacity 0.2s;
}
.planner-exam-item--past { opacity: 0.45; border-left-color: rgba(255,255,255,0.15); }
.planner-exam-item:hover .planner-course-actions { opacity: 1; }

.planner-exam-info { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }

.planner-exam-badge {
  min-width: 34px; text-align: center;
  padding: 2px 6px; border-radius: 99px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.02em;
  background: rgba(213,173,98,0.14); color: rgba(213,173,98,0.90);
  border: 1px solid rgba(213,173,98,0.28);
  flex-shrink: 0;
}
.planner-exam-badge--past  { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.38); border-color: rgba(255,255,255,0.15); }
.planner-exam-badge--today { background: rgba(213,173,98,0.30); color: #e8b84b; border-color: rgba(213,173,98,0.55); }
.planner-exam-badge--soon  { background: rgba(220,80,60,0.15);  color: #f08070; border-color: rgba(220,80,60,0.30); }

.planner-exam-details { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.planner-exam-date    { font-size: 0.78rem; color: rgba(232,236,240,0.80); white-space: nowrap; }
.planner-exam-tags    { display: flex; gap: 4px; flex-wrap: wrap; }
.planner-exam-course-tag {
  font-size: 0.62rem; padding: 1px 6px; border-radius: 99px;
  background: rgba(100,140,220,0.15); color: rgba(140,180,255,0.85);
  border: 1px solid rgba(100,140,220,0.25);
}
.planner-exam-type {
  font-size: 0.62rem; padding: 1px 6px; border-radius: 99px;
  background: rgba(255,255,255,0.07); color: rgba(232,236,240,0.55);
  border: 1px solid rgba(255,255,255,0.12);
}

/* University calendar status bar */
.planner-ucal-status {
  display: flex; align-items: center; gap: 7px;
  margin-top: 8px; padding: 6px 10px;
  background: rgba(213,173,98,0.07);
  border: 1px solid rgba(213,173,98,0.18);
  border-radius: 8px;
}
.planner-ucal-icon { font-size: 0.95rem; flex-shrink: 0; }
.planner-ucal-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.planner-ucal-name { font-size: 0.74rem; color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-ucal-count { font-size: 0.63rem; color: rgba(213,173,98,0.60); }

/* Learning days toggle row */
.planner-days-grid {
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px;
}
.planner-day-toggle {
  flex: 1; min-width: 36px;
  padding: 5px 4px;
  border-radius: 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(232,236,240,0.45);
  font-size: 0.68rem; font-weight: 600;
  cursor: pointer; transition: all 0.14s;
  text-align: center;
}
.planner-day-toggle:hover {
  background: rgba(213,173,98,0.10);
  border-color: rgba(213,173,98,0.30);
  color: rgba(213,173,98,0.80);
}
.planner-day-toggle.active {
  background: rgba(213,173,98,0.15);
  border-color: rgba(213,173,98,0.50);
  color: #D5AD62;
  font-weight: 700;
}

/* Adjust Plan modal overlay */
#adjust-plan-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4,10,20,0.70);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: lcmIn 0.18s ease-out;
}
#adjust-plan-modal .lcm-card {
  position: relative;
  background: rgba(13,24,40,0.94);
  border: 1px solid rgba(213,173,98,0.24);
  border-radius: 14px;
  padding: 26px 28px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(213,173,98,0.08);
}
#adjust-plan-modal .lcm-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e8ecf0;
  margin: 0 0 4px;
}
#adjust-plan-modal .lcm-subtitle {
  font-size: 0.80rem;
  color: rgba(232,236,240,0.48);
  margin: 0;
  line-height: 1.5;
}
#adjust-plan-modal .lcm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* Adjust Plan modal */
.planner-adjust-card {
  width: 480px;
  max-width: 92vw;
}
.planner-adjust-textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(213,173,98,0.22);
  border-radius: 10px;
  color: #e8ecf0;
  font-size: 0.875rem;
  line-height: 1.55;
  padding: 12px 14px;
  margin: 14px 0 4px;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.planner-adjust-textarea:focus {
  outline: none;
  border-color: rgba(213,173,98,0.55);
  box-shadow: 0 0 0 3px rgba(213,173,98,0.10);
}
.planner-adjust-textarea::placeholder { color: rgba(232,236,240,0.30); }

/* Edit modal */
.planner-modal-card { width: 420px; max-width: 90vw; }
.planner-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}
.planner-edit-field { display: flex; flex-direction: column; gap: 5px; }
.planner-edit-field label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: rgba(255,255,255,0.35);
}
.planner-edit-field input[type="text"],
.planner-edit-field input[type="date"],
.planner-edit-field select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  font-size: 0.84rem;
  padding: 7px 10px;
  outline: none;
  min-height: unset;
  transition: border-color 0.15s;
}
.planner-edit-field input:focus,
.planner-edit-field select:focus { border-color: rgba(213,173,98,0.45); }

/* ══════════════════════════════════════════════════════
   DASHBOARD — widget grid layout
══════════════════════════════════════════════════════ */
#view-dashboard.active {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Toolbar ── */
.db-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px;
  flex-shrink: 0;
}
.db-heading {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(232,236,240,0.45);
  margin: 0;
}
.db-customize-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.80rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 20px;
  transition: all 0.18s;
  border: 1px solid rgba(213,173,98,0.20) !important;
  color: rgba(232,236,240,0.70);
  background: rgba(213,173,98,0.06) !important;
}
.db-customize-btn:hover,
.db-customize-btn--active {
  background: rgba(213,173,98,0.14) !important;
  border-color: rgba(213,173,98,0.40) !important;
  color: var(--gold) !important;
  transform: none !important;
}

.db-3col {
  display: grid;
  grid-template-columns: 1fr 2fr;   /* tasks | calendar (2× wide) */
  gap: 14px;
  flex: 1;
  min-height: 0;
  padding: 6px 16px 16px;
  box-sizing: border-box;
}

/* Columns */
.db-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(213,173,98,0.18) transparent;
}

/* ── Right Sidebar zone (col-2) ── */
.db-col--right {
  min-width: 0;
}

/* ── Bottom Bar zone (col-3) — spans all columns ── */
#db-col-3 {
  grid-column: 1 / -1;
}
.db-col--bottom {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 0;
  overflow-y: visible;
  overflow-x: auto;
  padding: 0 16px 12px;
  flex-shrink: 0;
}
.db-col--bottom .db-widget {
  flex: 1;
  min-width: 260px;
}
.db-col--bottom .db-widget .panel {
  border-radius: 0 0 12px 12px;
}

/* ── Empty zone placeholders (visible only during customize mode) ── */
.db-zone-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 20px 12px;
  border: 2px dashed rgba(213,173,98,0.20);
  border-radius: 12px;
  text-align: center;
  pointer-events: none;
  flex-shrink: 0;
}
.db-zone-placeholder--wide {
  flex-direction: row;
  gap: 10px;
  padding: 14px 20px;
}
.db-zone-placeholder-icon {
  font-size: 1.3rem;
  opacity: 0.45;
}
.db-zone-placeholder-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(232,236,240,0.40);
  letter-spacing: 0.06em;
}
.db-zone-placeholder-hint {
  font-size: 0.70rem;
  color: rgba(232,236,240,0.25);
}

/* Show placeholders when customizing mode is active */
#db-widget-grid.db-customizing .db-zone-placeholder { display: flex; }
#db-widget-grid.db-customizing .db-drop-zone {
  min-height: 80px;
  border-radius: 12px;
  outline: 1px dashed rgba(213,173,98,0.12);
  outline-offset: 2px;
  transition: outline-color 0.2s;
}
#db-widget-grid.db-customizing .db-drop-zone--active,
#db-widget-grid.db-customizing .db-drop-zone:hover {
  outline-color: rgba(213,173,98,0.35);
  background: rgba(213,173,98,0.03);
}
.db-col > .panel,
.db-col > .db-widget { flex-shrink: 0; }

/* Exam column: scrolls naturally */
.db-col--exams {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(213,173,98,0.18) transparent;
}
.db-col--exams .db-calendar--fill {
  flex-shrink: 0;
}

/* ── Widget wrappers ── */
.db-widget {
  position: relative;
  border-radius: 12px;
  transition: box-shadow 0.18s, opacity 0.18s;
}
.db-widget--hidden { display: none !important; }

/* When a widget is the sole visible widget in its column — fills remaining height */
.db-widget--fill {
  flex: 1 !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.db-widget--fill > .panel {
  flex: 1;
  min-height: 0;
}

/* Drag handle bar at top of each widget */
.db-widget-handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px 4px 12px;
  cursor: grab;
  user-select: none;
  border-radius: 10px 10px 0 0;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s;
}
.db-widget-handle:hover { background: rgba(213,173,98,0.07); }
.db-widget-handle:active { cursor: grabbing; }
.db-widget-handle-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(232,236,240,0.45);
}
.db-widget-drag-icon {
  font-size: 1rem;
  color: rgba(232,236,240,0.22);
  line-height: 1;
  letter-spacing: -1px;
  transition: color 0.15s;
}
.db-widget-handle:hover .db-widget-drag-icon { color: rgba(213,173,98,0.55); }

/* Remove top border-radius from the panel inside a widget (handle does that) */
.db-widget .panel {
  border-radius: 0 0 12px 12px;
  border-top: none;
}

/* Dragging state */
.db-widget--dragging {
  opacity: 0.45;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

/* Drag-over target highlight */
.db-widget--drag-over > .db-widget-handle {
  background: rgba(213,173,98,0.14);
  border-bottom-color: rgba(213,173,98,0.35);
}

/* Drop zone column highlight */
.db-drop-zone--active {
  background: rgba(213,173,98,0.04);
  border-radius: 12px;
  outline: 2px dashed rgba(213,173,98,0.28);
  outline-offset: -4px;
}

/* Drop position indicator line */
.db-drop-indicator {
  height: 3px;
  background: linear-gradient(90deg, rgba(213,173,98,0.7), rgba(213,173,98,0.1));
  border-radius: 2px;
  margin: 2px 0;
  flex-shrink: 0;
  pointer-events: none;
  animation: dropIndicatorPulse 0.8s ease-in-out infinite alternate;
}
@keyframes dropIndicatorPulse {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/* ── Customize Drawer ── */
.db-customize-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 280px;
  background: rgba(8, 16, 30, 0.97);
  border-left: 1px solid rgba(213,173,98,0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 800;
  display: flex;
  flex-direction: column;
  padding: 0;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -12px 0 40px rgba(0,0,0,0.5);
}
.db-customize-drawer--open { transform: translateX(0); }

.db-customize-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.db-customize-title {
  display: flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(232,236,240,0.80);
}
.db-customize-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(232,236,240,0.55);
  cursor: pointer;
  font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  line-height: 1;
}
.db-customize-close:hover { background: rgba(220,60,60,0.18); border-color: rgba(220,60,60,0.35); color: #e07070; }

.db-customize-hint {
  font-size: 0.75rem;
  color: rgba(232,236,240,0.38);
  padding: 12px 18px 8px;
  margin: 0;
  line-height: 1.5;
  flex-shrink: 0;
}

/* ── Zone Map ── */
.db-zone-map {
  padding: 10px 14px 0;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 12px;
}
.db-zone-map-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.db-zone-map-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: default;
  transition: all 0.15s;
  flex: 1;
  min-height: 50px;
}
.db-zone-map-cell--sm  { flex: 1; }
.db-zone-map-cell--lg  { flex: 2.2; }
.db-zone-map-cell--full { flex: 1; min-height: 40px; }
.db-zone-map-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(232,236,240,0.55);
}
.db-zone-map-count {
  font-size: 0.62rem;
  color: rgba(232,236,240,0.30);
}
.db-zone-map-hint {
  font-size: 0.68rem;
  color: rgba(232,236,240,0.28);
  margin: 4px 0 0;
  text-align: center;
  line-height: 1.4;
}

/* ── Picker zone buttons (L / C / R / B) ── */
.db-picker-zone-btns {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.db-picker-zone-btn {
  font-size: 0.60rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(232,236,240,0.45);
  cursor: pointer;
  transition: all 0.14s;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.db-picker-zone-btn:hover {
  background: rgba(213,173,98,0.14);
  border-color: rgba(213,173,98,0.35);
  color: rgba(213,173,98,0.90);
}
.db-picker-zone-btn--active {
  background: rgba(213,173,98,0.18);
  border-color: rgba(213,173,98,0.50);
  color: #D5AD62;
  pointer-events: none;
}

/* Scrollable body wrapping picker + removed list */
.db-customize-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(213,173,98,0.18) transparent;
}

.db-widget-picker {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* Picker item */
.db-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  cursor: grab;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  user-select: none;
}
.db-picker-item:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); }
.db-picker-item--dragging { opacity: 0.40; }
.db-picker-item--over {
  background: rgba(213,173,98,0.10);
  border-color: rgba(213,173,98,0.35);
}
.db-picker-drag {
  font-size: 1rem;
  color: rgba(232,236,240,0.25);
  letter-spacing: -1px;
  flex-shrink: 0;
  cursor: grab;
}
.db-picker-label {
  flex: 1;
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(232,236,240,0.80);
}

/* Remove button inside picker row */
.db-picker-remove {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(232,236,240,0.35);
  cursor: pointer;
  font-size: 0.70rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.db-picker-remove:hover {
  background: rgba(220,60,60,0.18);
  border-color: rgba(220,60,60,0.40);
  color: #e07070;
}

/* Empty picker state */
.db-picker-empty {
  font-size: 0.78rem;
  color: rgba(232,236,240,0.35);
  padding: 10px 12px;
  text-align: center;
  font-style: italic;
}

/* Section labels inside the drawer */
.db-customize-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(232,236,240,0.30);
  padding: 10px 18px 4px;
  flex-shrink: 0;
}

/* Removed widgets list */
.db-widget-removed {
  list-style: none;
  margin: 0;
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.db-removed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(255,255,255,0.025);
  border: 1px dashed rgba(255,255,255,0.09);
}
.db-removed-label {
  font-size: 0.83rem;
  color: rgba(232,236,240,0.45);
}
.db-removed-restore {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(213,173,98,0.10);
  border: 1px solid rgba(213,173,98,0.28);
  color: var(--gold);
  cursor: pointer;
  transition: all 0.15s;
}
.db-removed-restore:hover {
  background: rgba(213,173,98,0.22);
  border-color: rgba(213,173,98,0.50);
}

/* Widget handle actions group (drag icon + remove btn) */
.db-widget-handle-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Remove × button on widget handle — fades in on hover */
.db-widget-remove-btn {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(232,236,240,0.25);
  cursor: pointer;
  font-size: 0.65rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
  line-height: 1;
  opacity: 0;
}
.db-widget-handle:hover .db-widget-remove-btn { opacity: 1; }
.db-widget-remove-btn:hover {
  background: rgba(220,60,60,0.18) !important;
  border-color: rgba(220,60,60,0.40) !important;
  color: #e07070 !important;
  opacity: 1 !important;
}

/* Toggle switch */
.db-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.db-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.db-toggle-track {
  width: 36px;
  height: 20px;
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  transition: background 0.2s, border-color 0.2s;
  position: relative;
  display: block;
}
.db-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(232,236,240,0.45);
  transition: transform 0.2s, background 0.2s;
}
.db-toggle-input:checked + .db-toggle-track {
  background: rgba(213,173,98,0.30);
  border-color: rgba(213,173,98,0.50);
}
.db-toggle-input:checked + .db-toggle-track .db-toggle-thumb {
  transform: translateX(16px);
  background: var(--gold);
}

/* Column section labels */
.db-col-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 5px 10px;
  border-radius: 7px;
  flex-shrink: 0;
}
.db-col-tasks    { background: rgba(101,177,255,0.08); color: #65b1ff; border: 1px solid rgba(101,177,255,0.18); }
.db-col-progress { background: rgba(103,224,163,0.08); color: #67e0a3; border: 1px solid rgba(103,224,163,0.18); }
.db-col-exams-lbl{ background: rgba(213,173,98,0.10);  color: var(--gold); border: 1px solid rgba(213,173,98,0.22); }

/* ── Unified Today Panel ── */
.db-today-panel {
  flex-shrink: 0;          /* grow with content; db-col handles scrolling */
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  padding: 16px !important;
}
/* Every direct child inside the today panel must not compress */
.db-today-panel > *,
.db-todo-list,
.db-reading-list {
  flex-shrink: 0;
}

/* Section headers inside Today panel */
.db-section-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.db-section-icon { font-size: 0.95rem; }
.db-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 1;
  white-space: nowrap;
}
.db-section-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(213,173,98,0.12);
  padding: 1px 8px;
  border-radius: 20px;
}
.db-section-meta {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
}

/* Cards row (due count + review button) */
.db-cards-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.db-cards-week {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.38);
}

/* Dividers between sections */
.db-task-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 12px 0;
  flex-shrink: 0;
}

/* ── Stats 2×2 grid ── */
.db-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Focus Timer — horizontal layout ── */
.db-pomo-inline {
  display: flex;
  align-items: center;
  gap: 16px;
}
.db-pomo-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Goals panel ── */
.db-goals { flex-shrink: 0; }
.db-goal-add-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.db-goal-add-row input { flex: 1; }
select#db-goal-freq {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  padding: 0 8px;
  cursor: pointer;
  flex-shrink: 0;
  width: 110px;
}
.db-goal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.db-goal-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 7px;
  transition: background 0.15s;
}
.db-goal-item:hover { background: rgba(255,255,255,0.03); }
.db-goal-item.done .db-goal-desc { opacity: 0.45; text-decoration: line-through; }
.db-goal-item.not-due { opacity: 0.45; }
.db-goal-check {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.22);
  background: transparent;
  color: var(--gold);
  font-size: 0.7rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.db-goal-check.checked {
  border-color: var(--gold);
  background: rgba(213,173,98,0.18);
}
.db-goal-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.db-goal-desc { font-size: 0.82rem; color: rgba(255,255,255,0.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-goal-freq { font-size: 0.65rem; color: rgba(255,255,255,0.32); }
.db-goal-del { opacity: 0; background: transparent; border: none; color: rgba(255,255,255,0.35); font-size: 0.75rem; cursor: pointer; transition: opacity 0.15s, color 0.15s; padding: 2px 4px; }
.db-goal-item:hover .db-goal-del { opacity: 1; }
.db-goal-del:hover { color: #eb5757; }

/* ── Sidebar goals progress row ── */
.sb-goals-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 0 2px;
}
.sb-goals-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.38);
  flex-shrink: 0;
}
.sb-goals-bar-wrap {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.sb-goals-bar {
  height: 100%;
  background: var(--gold);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.sb-goals-row strong {
  font-size: 0.7rem;
  color: var(--gold);
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
}

/* ── Calendar add inputs block (Reading + Task + Event) ── */
.db-cal-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
}
.db-cal-add-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 4px;
}

/* ── Next Exam banner inside calendar ── */
.db-exam-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, rgba(213,173,98,0.10) 0%, rgba(213,173,98,0.04) 100%);
  border: 1px solid rgba(213,173,98,0.22);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.db-exam-banner-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db-exam-banner-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--gold);
  opacity: 0.75;
}
.db-exam-banner .db-countdown-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
}
.db-exam-banner .db-countdown-date {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.38);
}
.db-exam-banner .db-countdown-days {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -1px;
}

/* ══════════════════════════════════════════════════════
   DASHBOARD — Stats Strip
══════════════════════════════════════════════════════ */
.db-stats-strip {
  display: flex;
  gap: 8px;
}
.db-stat-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: var(--radius);
  border: 1px solid rgba(213,173,98,0.13);
  transition: border-color .2s;
}
.db-stat-pill:hover { border-color: rgba(213,173,98,0.3); }
.db-stat-icon { font-size: 1.15rem; line-height: 1; }
.db-stat-body { display: flex; flex-direction: column; gap: 1px; }
.db-stat-body strong { font-size: 1.1rem; font-weight: 700; color: var(--gold, #d4a74f); line-height: 1; font-variant-numeric: slashed-zero tabular-nums; }
.db-stat-body span   { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ══════════════════════════════════════════════════════
   DASHBOARD — Exam Countdown
══════════════════════════════════════════════════════ */
.db-exam-countdown {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 110px;
  background: linear-gradient(135deg, rgba(213,173,98,0.10), rgba(10,28,54,0.9));
  border: 1px solid rgba(213,173,98,0.28) !important;
}
.db-countdown-days {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--gold, #d4a74f);
  line-height: 1;
  margin: 4px 0 3px;
  font-variant-numeric: slashed-zero tabular-nums;
}
.db-countdown-name {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.db-countdown-date { font-size: .74rem; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════
   DASHBOARD — Weak Topics
══════════════════════════════════════════════════════ */
.db-weak-topics { display: flex; flex-direction: column; gap: 0; }
.db-weak-list   { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.db-weak-item   { display: flex; align-items: center; gap: 8px; }
.db-weak-name   { font-size: .82rem; min-width: 120px; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-weak-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.db-weak-bar    { height: 100%; border-radius: 99px; transition: width .4s ease; }
.db-weak-pct    { font-size: .78rem; color: var(--text-muted); min-width: 32px; text-align: right; }
.db-weak-drill-row { margin-top: 8px; }
.db-weak-drill-link { background: none; border: none; color: var(--gold, #d4a74f); font-size: .82rem; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.db-weak-drill-link:hover { color: #f0d080; }

/* ══════════════════════════════════════════════════════
   DASHBOARD — Reading Tracker
══════════════════════════════════════════════════════ */
.db-reading { display: flex; flex-direction: column; gap: 0; }
.db-reading-reset-note { font-size: .7rem; color: var(--text-muted); opacity: .7; }
.db-reading-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 200px; }

/* ══════════════════════════════════════════════════════
   DASHBOARD — Pomodoro Timer
══════════════════════════════════════════════════════ */
.db-pomodoro { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.db-pomodoro .panel-head { width: 100%; }
.db-pomo-ring {
  position: relative;
  width: 90px;
  height: 90px;
}
.db-pomo-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.db-pomo-track    { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 7; }
.db-pomo-progress {
  fill: none;
  stroke: var(--gold, #d4a74f);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 263.9;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .8s linear, stroke .3s;
}
.db-pomo-time {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .03em;
}
.db-pomo-controls { display: flex; gap: 8px; }
.db-pomo-controls .gold-btn  { padding: 7px 18px; font-size: .85rem; }
.db-pomo-controls .ghost-btn { padding: 7px 14px; font-size: .85rem; }
.db-pomo-count { font-size: .78rem; color: var(--text-muted); }
.db-pomo-count span { color: var(--gold, #d4a74f); font-weight: 700; }

/* ══════════════════════════════════════════════════════
   DASHBOARD — Recently Visited
══════════════════════════════════════════════════════ */
.db-recent { display: flex; flex-direction: column; gap: 0; }
.db-recent-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.db-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.db-recent-item:hover { background: rgba(255,255,255,.07); }
.db-recent-icon  { font-size: 1rem; }
.db-recent-label { flex: 1; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-recent-time  { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }

/* ══════════════════════════════════════════════════════
   DASHBOARD — Notes panel
══════════════════════════════════════════════════════ */
.dashboard-notes textarea {
  width: 100%;
  min-height: 120px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font: inherit;
  font-size: .88rem;
  resize: vertical;
  box-sizing: border-box;
}
.dashboard-notes textarea:focus { outline: none; border-color: rgba(213,173,98,.5); }

/* ══════════════════════════════════════════════════════
   DASHBOARD — Responsive overrides
══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .db-stats-strip    { flex-wrap: wrap; }
  .db-stat-pill      { flex: 1 1 calc(50% - 7px); }
  .db-exam-countdown { grid-column: span 6; }
  .db-due-card       { grid-column: span 6; }
  .db-weak-topics    { grid-column: span 12; }
  .db-todo           { grid-column: span 12; }
  .db-reading        { grid-column: span 6; }
  .db-pomodoro       { grid-column: span 6; }
  .db-calendar       { grid-column: span 12; }
  .db-recent         { grid-column: span 12; }
}
@media (max-width: 700px) {
  .db-exam-countdown,
  .db-due-card,
  .db-reading,
  .db-pomodoro       { grid-column: span 12; }
  .db-stat-pill      { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════
   PERFORMANCE TRACKER
══════════════════════════════════════════════════════ */

/* ── Overview stat cards ── */
.perf-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.perf-stat-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.perf-stat-card.perf-stat-correct { border-color: rgba(111,207,151,.25); }
.perf-stat-card.perf-stat-again   { border-color: rgba(235,87,87,.22); }
.perf-stat-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  font-weight: 600;
}
.perf-stat-val {
  font-size: 2.6rem;
  font-weight: 700;
  font-family: "Cormorant Garamond", serif;
  line-height: 1;
}
.perf-stat-correct .perf-stat-val { color: #6fcf97; }
.perf-stat-again   .perf-stat-val { color: #eb5757; }
.perf-stat-pct {
  font-size: .78rem;
  color: var(--text-muted);
}

/* ── Main grid ── */
.perf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
.perf-topic-panel { grid-column: 1 / 2; }
.perf-weak-panel  { grid-column: 2 / 3; }
.perf-ai-panel    { grid-column: 1 / -1; }

/* ── Topic breakdown ── */
.perf-topic-list { display: flex; flex-direction: column; gap: 12px; }
.perf-topic-row  { display: flex; flex-direction: column; gap: 5px; }
.perf-topic-name { font-size: .88rem; font-weight: 600; color: var(--text); }
.perf-topic-bar-wrap {
  height: 7px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  overflow: hidden;
}
.perf-topic-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
}
.perf-bar-good { background: #6fcf97; }
.perf-bar-mid  { background: #f2c94c; }
.perf-bar-low  { background: #eb5757; }
.perf-topic-nums {
  display: flex;
  gap: 12px;
  font-size: .74rem;
}
.perf-num-correct { color: #6fcf97; }
.perf-num-again   { color: #eb5757; }
.perf-num-hard    { color: #f2c94c; }
.perf-num-total   { color: var(--text-muted); margin-left: auto; }

/* ── Weak points ── */
.perf-weak-sub {
  font-size: .78rem;
  color: var(--text-muted);
  margin-left: auto;
}
.perf-weak-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
}
.perf-weak-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: rgba(235,87,87,.07);
  border: 1px solid rgba(235,87,87,.15);
  border-radius: 7px;
}
.perf-weak-front {
  font-size: .86rem;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.perf-weak-meta {
  display: flex;
  gap: 8px;
  align-items: center;
}
.perf-weak-deck  { font-size: .74rem; color: var(--text-muted); }
.perf-weak-badge {
  font-size: .72rem;
  font-weight: 700;
  color: #eb5757;
  background: rgba(235,87,87,.15);
  border-radius: 10px;
  padding: 1px 7px;
}

/* ── AI Analysis ── */
.perf-ai-panel .panel-head { margin-bottom: 8px; }
.perf-ai-run-btn {
  margin-left: auto;
  padding: 6px 16px;
  font-size: .84rem;
}
.perf-ai-hint {
  font-size: .86rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 4px;
}
.perf-ai-output {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--text);
  padding-top: 6px;
}
.perf-ai-output h5 {
  font-size: 1rem;
  font-weight: 700;
  margin: 14px 0 4px;
  color: var(--gold, #d4a74f);
}
.perf-ai-output strong { color: var(--gold, #d4a74f); }
.perf-ai-step {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0;
}
.perf-ai-num {
  background: var(--gold, #d4a74f);
  color: #000;
  font-size: .72rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.perf-ai-bullet { margin: 4px 0; padding-left: 4px; }
.perf-ai-loading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  color: var(--text-muted);
  font-style: italic;
  font-size: .9rem;
}
.perf-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: .86rem;
  margin: 0;
  padding: 8px 0;
}

@media (max-width: 900px) {
  .perf-stats-row { grid-template-columns: repeat(2, 1fr); }
  .perf-grid      { grid-template-columns: 1fr; }
  .perf-topic-panel,
  .perf-weak-panel,
  .perf-ai-panel  { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════
   DESIGN SYSTEM V2  —  full dark-glass theme + animation layer
   All rules here override earlier declarations.
══════════════════════════════════════════════════════════════ */

/* ── Token overrides ─────────────────────────────────────── */
:root {
  --panel:        rgba(255,255,255,0.038);
  --panel-strong: rgba(255,255,255,0.065);
  --panel-bg:     rgba(12,22,40,0.94);
  --text:         #c8d8f0;
  --text-soft:    rgba(170,198,245,0.52);
  --text-muted:   rgba(140,172,225,0.40);
  --shadow:       0 24px 70px rgba(0,0,0,0.42);
  --glow:         0 0 0 1px rgba(213,173,98,0.22), 0 0 28px rgba(213,173,98,0.14);
  --radius:       20px;
  --speed:        220ms;
  --border-subtle: rgba(255,255,255,0.08);
  --border-gold:   rgba(213,173,98,0.30);
}

/* ── Body & page background ──────────────────────────────── */
html, body {
  color: #c8d8f0;
  background: radial-gradient(ellipse at 20% 0%, #152848 0%, #07111f 55%, #040c18 100%);
}

/* ── Dark-glass panel (replaces cream glass-soft) ────────── */
.glass-soft {
  background: linear-gradient(155deg,
    rgba(255,255,255,0.062) 0%,
    rgba(255,255,255,0.024) 100%);
  color: #c8d8f0;
  border: 1px solid rgba(255,255,255,0.085);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.07);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transition: border-color var(--speed), box-shadow var(--speed);
}
.glass-soft:hover {
  border-color: rgba(255,255,255,0.11);
}

/* ── Topbar ──────────────────────────────────────────────── */
.topbar {
  background: linear-gradient(155deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.085);
  box-shadow: 0 4px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  color: #eef4ff;
}
.topbar h2  { color: #eef4ff; }
.topbar .eyebrow { color: rgba(160,190,240,0.52); }

/* ── Sidebar footer ──────────────────────────────────────── */
.sidebar-footer {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.065);
  color: rgba(160,190,240,0.70);
}
.status-pill { background: rgba(255,255,255,0.05); color: rgba(170,200,245,0.80); }
#groq-status { color: rgba(160,190,240,0.65); }

/* ── Nav sub-items ───────────────────────────────────────── */
.nav-sub-item {
  padding: 7px 14px 7px 30px;
  border-radius: 10px;
  font-size: 0.84rem;
  color: rgba(160,190,240,0.60);
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--speed), background var(--speed);
}
.nav-sub-item:hover  { color: #c8d8f0; background: rgba(255,255,255,0.05); }
.nav-sub-item.active { color: var(--gold); background: rgba(213,173,98,0.08); }

/* gold left-bar on active nav item */
.nav-item { position: relative; overflow: hidden; }
.nav-item::after {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
  transform: scaleY(0);
  transition: transform 0.24s cubic-bezier(.4,0,.2,1);
}
.nav-item.active::after { transform: scaleY(1); }

/* ── Buttons ─────────────────────────────────────────────── */
.gold-btn {
  background: linear-gradient(135deg, #c49a3a, #e8be5c);
  color: #0a1520;
  border: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 20px rgba(213,173,98,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform var(--speed), box-shadow var(--speed), filter var(--speed);
}
.gold-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(213,173,98,0.46), inset 0 1px 0 rgba(255,255,255,0.24);
  filter: brightness(1.08);
}
.gold-btn:active  { transform: translateY(1px) scale(0.98); box-shadow: 0 2px 10px rgba(213,173,98,0.28); }
.gold-btn:disabled { opacity: 0.4; transform: none; filter: none; box-shadow: none; cursor: not-allowed; }

.ghost-btn {
  background: rgba(255,255,255,0.06);
  color: #c8d8f0;
  border: 1px solid rgba(255,255,255,0.10);
  transition: background var(--speed), border-color var(--speed), transform var(--speed), color var(--speed);
}
.ghost-btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(213,173,98,0.28);
  color: #eef4ff;
  transform: translateY(-1px);
}
.ghost-btn:active { transform: scale(0.97); }

/* ── Inputs & textareas ──────────────────────────────────── */
textarea,
input[type="text"],
input[type="date"],
input[type="search"],
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="color"]) {
  background: rgba(255,255,255,0.048);
  color: #c8d8f0;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
}
textarea::placeholder, input::placeholder { color: rgba(140,172,225,0.38); }
textarea:focus, input:focus {
  background: rgba(255,255,255,0.07);
  border-color: rgba(213,173,98,0.55);
  box-shadow: 0 0 0 3px rgba(213,173,98,0.12), 0 4px 16px rgba(0,0,0,0.18);
}

/* ── Select dropdowns ────────────────────────────────────── */
select {
  background: rgba(255,255,255,0.05);
  color: #c8d8f0;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 10px 14px;
  width: 100%;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a0bce0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  transition: border-color var(--speed), box-shadow var(--speed);
}
select:focus { border-color: rgba(213,173,98,0.50); box-shadow: 0 0 0 3px rgba(213,173,98,0.10); }
select option { background: #0d1e36; color: #c8d8f0; }

/* ── Panel head text ─────────────────────────────────────── */
.panel-head h4   { color: #d4e3f7; }
.panel-head span { color: rgba(160,190,240,0.55); font-size: 0.88rem; }
.field-label     { color: rgba(160,190,240,0.62); }
.settings-copy   { color: rgba(160,190,240,0.62); }

/* ── Metric cards ────────────────────────────────────────── */
.metric-card {
  background: linear-gradient(155deg, rgba(255,255,255,0.058), rgba(255,255,255,0.022));
  border: 1px solid rgba(255,255,255,0.085);
  color: #c8d8f0;
  box-shadow: 0 6px 28px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.07);
  backdrop-filter: blur(18px);
  transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed);
}
.metric-card:hover {
  transform: translateY(-3px);
  border-color: rgba(213,173,98,0.22);
  box-shadow: 0 16px 44px rgba(0,0,0,0.36), 0 0 0 1px rgba(213,173,98,0.12);
}
.metric-card strong { color: #eef4ff; font-size: 2.8rem; }
.metric-card .tiny-label { color: rgba(160,190,240,0.55); }

/* ── Hub cards — premium glass ───────────────────────────── */
.hub-card {
  background: linear-gradient(155deg, rgba(255,255,255,0.062) 0%, rgba(255,255,255,0.018) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 34px 26px 30px;
  box-shadow: 0 6px 26px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1), border-color 0.22s ease, box-shadow 0.22s ease;
}
.hub-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% -10%, rgba(213,173,98,0.14), transparent 65%);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.hub-card:hover::before { opacity: 1; }
.hub-card:hover {
  transform: translateY(-6px) scale(1.025);
  border-color: rgba(213,173,98,0.38);
  box-shadow:
    0 24px 56px rgba(0,0,0,0.40),
    0 0 0 1px rgba(213,173,98,0.18),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.hub-card:active { transform: translateY(-2px) scale(1.01); }
.hub-card h4 { color: #d4e3f7; font-size: 1.08rem; }
.hub-card p  { color: rgba(160,190,240,0.50); font-size: 0.83rem; }
.hub-card-icon {
  width: 54px; height: 54px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(213,173,98,0.20), rgba(213,173,98,0.06));
  border: 1px solid rgba(213,173,98,0.22);
  display: grid; place-items: center;
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 6px;
  box-shadow: 0 4px 14px rgba(213,173,98,0.15);
}
.hub-intro h3 { color: #d4e3f7; }
.hub-intro p  { color: rgba(160,190,240,0.52); }

/* ── Staggered hub card entrance ─────────────────────────── */
@keyframes hubCardIn {
  from { opacity: 0; transform: translateY(28px) scale(0.94); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0);   }
}
.hub-grid > .hub-card:nth-child(1) { animation: hubCardIn 0.44s cubic-bezier(.2,.8,.2,1) 0.05s both; }
.hub-grid > .hub-card:nth-child(2) { animation: hubCardIn 0.44s cubic-bezier(.2,.8,.2,1) 0.12s both; }
.hub-grid > .hub-card:nth-child(3) { animation: hubCardIn 0.44s cubic-bezier(.2,.8,.2,1) 0.19s both; }
.hub-grid > .hub-card:nth-child(4) { animation: hubCardIn 0.44s cubic-bezier(.2,.8,.2,1) 0.26s both; }
.hub-grid-2x2 > .hub-card:nth-child(1) { animation: hubCardIn 0.44s cubic-bezier(.2,.8,.2,1) 0.05s both; }
.hub-grid-2x2 > .hub-card:nth-child(2) { animation: hubCardIn 0.44s cubic-bezier(.2,.8,.2,1) 0.12s both; }
.hub-grid-2x2 > .hub-card:nth-child(3) { animation: hubCardIn 0.44s cubic-bezier(.2,.8,.2,1) 0.19s both; }
.hub-grid-2x2 > .hub-card:nth-child(4) { animation: hubCardIn 0.44s cubic-bezier(.2,.8,.2,1) 0.26s both; }
.hub-grid-3 > .hub-card:nth-child(1)   { animation: hubCardIn 0.44s cubic-bezier(.2,.8,.2,1) 0.05s both; }
.hub-grid-3 > .hub-card:nth-child(2)   { animation: hubCardIn 0.44s cubic-bezier(.2,.8,.2,1) 0.12s both; }
.hub-grid-3 > .hub-card:nth-child(3)   { animation: hubCardIn 0.44s cubic-bezier(.2,.8,.2,1) 0.19s both; }

/* ── Panel entrance animation ────────────────────────────── */
@keyframes panelIn {
  from { opacity: 0; transform: translateY(16px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.panel.glass-soft, article.panel.glass-soft {
  animation: panelIn 0.38s cubic-bezier(.2,.8,.2,1) both;
}

/* ── View transitions (enhanced) ────────────────────────── */
@keyframes viewIn {
  from { opacity: 0; transform: translateY(14px) scale(0.988); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);     filter: blur(0);   }
}

/* ── Library card items ──────────────────────────────────── */
.flashcard-item, .brief-item {
  background: rgba(255,255,255,0.034);
  border: 1px solid rgba(255,255,255,0.075);
  color: #c8d8f0;
  transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed), background var(--speed);
}
.flashcard-item h5, .brief-item h5 { color: #d4e3f7; }
.flashcard-item p,  .brief-item p  { color: rgba(160,190,240,0.58); }
.flashcard-item:hover, .brief-item:hover {
  background: rgba(255,255,255,0.055);
  border-color: rgba(213,173,98,0.28);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.24);
}

/* ── Rich output & empty states ──────────────────────────── */
.rich-output   { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); color: #c8d8f0; }
.empty-output  { color: rgba(140,172,225,0.42); }
.is-placeholder { color: rgba(140,172,225,0.42); }

/* ── Chat bubbles ────────────────────────────────────────── */
.msg-bubble { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #c8d8f0; }
.chat-message.user .msg-bubble { background: rgba(213,173,98,0.10); border-color: rgba(213,173,98,0.18); }
.msg-role { color: rgba(160,190,240,0.48); }

/* ── Preset chips ────────────────────────────────────────── */
.preset-chip, .quick-prompt {
  background: rgba(255,255,255,0.045);
  color: #c8d8f0;
  border: 1px solid rgba(255,255,255,0.08);
}
.preset-chip.active, .preset-chip:hover, .quick-prompt:hover {
  background: rgba(213,173,98,0.10);
  border-color: rgba(213,173,98,0.30);
  color: #eef4ff;
}

/* ── FC create tabs ──────────────────────────────────────── */
.fc-create-tabs { gap: 6px; }
.fc-create-tab {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(160,190,240,0.58) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px;
  padding: 7px 16px;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease !important;
}
.fc-create-tab:hover { color: #c8d8f0 !important; background: rgba(255,255,255,0.08) !important; }
.fc-create-tab.active {
  background: rgba(213,173,98,0.15) !important;
  color: #e0b860 !important;
  border-color: rgba(213,173,98,0.32) !important;
  box-shadow: 0 2px 12px rgba(213,173,98,0.14);
}

/* ── FC format buttons ───────────────────────────────────── */
.fc-fmt-btn {
  background: rgba(255,255,255,0.045) !important;
  color: rgba(160,190,240,0.58) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.18s ease;
}
.fc-fmt-btn.active, .fc-fmt-btn:hover {
  background: rgba(213,173,98,0.13) !important;
  color: #e0b860 !important;
  border-color: rgba(213,173,98,0.30) !important;
}

/* ── Subview back button ─────────────────────────────────── */
.subview-back {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(160,190,240,0.60) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.subview-back:hover { background: rgba(213,173,98,0.10) !important; color: var(--gold) !important; }

/* ── Deck tree ───────────────────────────────────────────── */
.deck-tree-folder, .deck-tree-deck { color: #c8d8f0; }

/* ── FC review card ──────────────────────────────────────── */
.fc-card-face { color: #c8d8f0; }

/* ── Scrollbars ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(213,173,98,0.38); }

/* ── Deck picker modal ───────────────────────────────────── */
.deck-picker-modal {
  background: rgba(12,22,40,0.97) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #c8d8f0;
}
.deck-picker-option { color: #c8d8f0; }
.deck-picker-option:hover { background: rgba(255,255,255,0.06); }
.deck-picker-option.selected { background: rgba(213,173,98,0.12); border-color: rgba(213,173,98,0.30); }
.deck-name-input { background: rgba(255,255,255,0.06) !important; color: #c8d8f0 !important; }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  background: rgba(14,26,46,0.97);
  border: 1px solid rgba(213,173,98,0.24);
  color: #eef4ff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.48);
}

/* ── Dashboard hero card ─────────────────────────────────── */
.hero-card { color: #eef4ff; }
.hero-card p { color: rgba(220,235,255,0.78); }

/* ── Issue Spotter output area ───────────────────────────── */
#is-hypo, #is-result { color: #c8d8f0; }

/* ── Smooth focus ring on interactive elements ───────────── */
button:focus-visible {
  outline: 2px solid rgba(213,173,98,0.60);
  outline-offset: 2px;
}

/* ── Inline fc-lib picker ────────────────────────────────── */
.fc-lib-picker {
  background: rgba(10,20,38,0.98) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.fc-lib-picker-head { color: #d4e3f7; }
.fc-lib-picker-item:hover { background: rgba(255,255,255,0.06) !important; }
.fc-lib-picker-name { color: #d4e3f7 !important; }
.fc-lib-picker-preview { color: rgba(140,172,225,0.50) !important; }
.fc-lib-picker-empty { color: rgba(140,172,225,0.50) !important; }

/* ── Floating "Ask Lex" selection popup ───────────────────── */
.lex-sel-popup {
  position: fixed;
  transform: translateX(-50%) translateY(-100%);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 12px;
  background: rgba(10,20,38,0.97);
  border: 1px solid rgba(213,173,98,0.36);
  border-radius: 22px;
  box-shadow:
    0 10px 36px rgba(0,0,0,0.52),
    0 0 0 1px rgba(213,173,98,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  pointer-events: auto;
  max-width: 320px;
  animation: lexPopupIn 0.18s cubic-bezier(.2,.8,.2,1) both;
  /* small downward arrow */
}
.lex-sel-popup::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(213,173,98,0.36);
}
/* When shown below the selection, flip arrow to top */
.lex-sel-popup.lex-sel-popup--below {
  transform: translateX(-50%) translateY(0);
}
.lex-sel-popup.lex-sel-popup--below::after {
  bottom: auto;
  top: -6px;
  border-top: none;
  border-bottom: 6px solid rgba(213,173,98,0.36);
}

@keyframes lexPopupIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-88%) scale(0.84); filter: blur(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(-100%) scale(1);   filter: blur(0);   }
}

.lex-sel-snippet {
  font-size: 0.74rem;
  color: rgba(160,190,240,0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  flex-shrink: 1;
  font-style: italic;
}

.lex-sel-ask-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #c49a3a, #e8be5c);
  color: #0a1520;
  border: none;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 0.80rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 10px rgba(213,173,98,0.30);
  transition: filter 0.14s, transform 0.14s, box-shadow 0.14s;
}
.lex-sel-ask-btn:hover {
  filter: brightness(1.10);
  transform: scale(1.04);
  box-shadow: 0 4px 18px rgba(213,173,98,0.48);
}
.lex-sel-ask-btn:active { transform: scale(0.97); }

/* ── Outline section jump nav ── */
.outline-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(13,24,40,0.08);
  margin-bottom: 18px;
}
.outline-jump-tab {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(213,173,98,0.10);
  border: 1px solid rgba(213,173,98,0.28);
  color: #6b4800;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.outline-jump-tab:hover {
  background: rgba(213,173,98,0.22);
  border-color: rgba(213,173,98,0.55);
  color: #4a3000;
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════
   MULTIPLE CHOICE
══════════════════════════════════════════════════════════ */

.mc-score-row {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.mc-score-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.78rem;
  color: var(--text-soft);
}
.mc-score-pill span:first-child {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.mc-score-correct span:first-child { color: #7ee8a2; }
.mc-score-wrong span:first-child   { color: #eb5757; }

.mc-topic-tag {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-transform: uppercase;
}

.mc-choice-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.mc-choice-btn:hover:not(:disabled) {
  background: rgba(213,173,98,0.1);
  border-color: rgba(213,173,98,0.35);
}
.mc-choice-btn:disabled { cursor: default; }
.mc-choice-btn.mc-choice-correct {
  background: rgba(126,232,162,0.12);
  border-color: rgba(126,232,162,0.45);
}
.mc-choice-btn.mc-choice-wrong {
  background: rgba(235,87,87,0.12);
  border-color: rgba(235,87,87,0.4);
}
.mc-choice-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(213,173,98,0.14);
  border: 1px solid rgba(213,173,98,0.25);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   ESSAYS
══════════════════════════════════════════════════════════ */

.essay-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.essay-grade-good {
  background: rgba(126,232,162,0.15);
  border-color: rgba(126,232,162,0.4);
  color: #7ee8a2;
}
.essay-grade-mid {
  background: rgba(213,173,98,0.15);
  border-color: rgba(213,173,98,0.4);
  color: var(--gold);
}
.essay-grade-low {
  background: rgba(235,87,87,0.12);
  border-color: rgba(235,87,87,0.35);
  color: #eb5757;
}

.essay-fb-grade {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.essay-fb-section {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 14px 0 4px;
}
.essay-fb-bullet {
  margin: 4px 0;
  color: var(--text-soft);
  font-size: 0.88rem;
}

.essay-lib-item { cursor: default; }
.essay-lib-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.essay-lib-date { font-size: 0.78rem; color: var(--text-soft); margin: 2px 0 0; }
.essay-lib-preview { font-size: 0.82rem; color: var(--text-soft); margin-bottom: 8px; }
.essay-lib-detail { margin-top: 14px; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 14px; }
.essay-lib-section { margin-bottom: 14px; font-size: 0.88rem; }
.essay-lib-section strong { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.essay-lib-section p { color: var(--text-soft); line-height: 1.6; }
.essay-lib-feedback { color: var(--text-soft); font-size: 0.85rem; line-height: 1.7; }

/* MC source tab toggle */
.mc-source-tabs {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.mc-source-tab {
  flex: 1;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.mc-source-tab.active {
  background: rgba(213,173,98,0.14);
  border-color: rgba(213,173,98,0.4);
  color: var(--gold);
  font-weight: 600;
}
.mc-official-tag {
  font-size: 0.72rem;
  color: var(--text-soft);
  opacity: 0.6;
  margin-top: 12px;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════
   RESPONSIVE DESIGN (MOBILE / TABLETS)
═══════════════════════════════════════════ */
.is-dual-pane { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

@media (max-width: 980px) {
  .db-3col { grid-template-columns: 1fr 1fr; }
}

/* ══ Mobile-only elements — hidden on desktop ═════════════════════════ */
.mobile-tab-bar  { display: none; }
.mobile-backdrop { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — phones & small tablets (≤ 768px)
   Design tokens for mobile dark surfaces:
     --m-bg:      #060d18   deep navy — page base
     --m-card:    #0c1928   card surface
     --m-card-2:  #101f34   elevated card
     --m-border:  rgba(213,173,98,0.14)   gold tint border
     --m-border2: rgba(255,255,255,0.07)  subtle separator
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ══════════════════════════════════════════════════
     PHASE 1 — VIEW FOUNDATION: solid backgrounds
     Without this, every view is transparent
  ══════════════════════════════════════════════════ */

  /* Core background: every surface gets a solid dark foundation */
  .workspace,
  .view-stack {
    background: #060d18 !important;
  }

  /* Every active view fills view-stack and scrolls itself */
  .view.active {
    background: #060d18 !important;
    position: absolute !important;
    inset: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px calc(74px + env(safe-area-inset-bottom, 0px)) 14px !important;
  }

  /* Chatbot view: no outer padding — manages its own scroll */
  #view-chatbot.active {
    background: #060d18 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Planner view: column layout, no outer padding */
  #view-planner.active {
    background: #060d18 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  /* ══════════════════════════════════════════════════
     PHASE 2 — SURFACE SYSTEM: replace glass morphism
     with opaque dark surfaces for mobile legibility
  ══════════════════════════════════════════════════ */

  /* Disable backdrop-filter everywhere on mobile — unreliable & slow */
  .glass,
  .glass-soft,
  .topbar,
  .sidebar,
  .ctx-sidebar,
  .lex-right-sidebar,
  .mobile-tab-bar,
  .panel,
  .db-widget article,
  .fc-card,
  .flashcard-item,
  .brief-item,
  .outline-item {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Dark glass → solid navy card */
  .glass {
    background: #0a1624 !important;
    border-color: rgba(213,173,98,0.14) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.45) !important;
  }

  /* Light glass-soft (cream) → solid dark navy card with gold border */
  .glass-soft,
  .panel.glass-soft,
  article.panel.glass-soft,
  .panel {
    background: #0c1928 !important;
    color: #eef4ff !important;
    border: 1px solid rgba(213,173,98,0.13) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
  }

  /* Widget articles inside dashboard cards */
  .db-widget article,
  .db-widget .panel {
    background: #0e1e32 !important;
    border: 1px solid rgba(213,173,98,0.10) !important;
  }

  /* ══════════════════════════════════════════════════
     PHASE 3 — TOPBAR: solid, always readable
  ══════════════════════════════════════════════════ */

  .topbar {
    background: #070e1c !important;
    border-bottom: 1px solid rgba(213,173,98,0.16) !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.5) !important;
    /* Layout */
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 14px !important;
    height: 54px !important;
    min-height: 54px !important;
    flex-shrink: 0 !important;
    gap: 10px !important;
  }
  .topbar h2 {
    color: #eef4ff !important;
    font-size: 1.05rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
  .topbar-left {
    flex: 1;
    min-width: 0;
    gap: 10px;
    overflow: hidden;
  }
  .topbar-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    flex-shrink: 0;
  }
  .topbar-actions .gold-btn,
  .topbar-actions .ghost-btn {
    padding: 7px 11px !important;
    font-size: 0.76rem !important;
    width: auto !important;
    border-radius: 10px !important;
  }
  /* Nav toggle button on mobile — always gold */
  .nav-toggle-btn {
    background: rgba(213,173,98,0.10) !important;
    border-color: rgba(213,173,98,0.28) !important;
    color: var(--gold) !important;
    flex-shrink: 0;
  }

  /* ══════════════════════════════════════════════════
     PHASE 4 — SIDEBAR DRAWER: fully solid
  ══════════════════════════════════════════════════ */

  .sidebar {
    /* Solid dark background — no see-through */
    background: #060c1a !important;
    border: none !important;
    border-right: 1px solid rgba(213,173,98,0.12) !important;
    box-shadow: 6px 0 48px rgba(0,0,0,0.7) !important;
    /* Drawer geometry */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: min(300px, 85vw) !important;
    max-width: min(300px, 85vw) !important;
    height: 100dvh !important;
    height: 100% !important;
    border-radius: 0 20px 20px 0 !important;
    transform: translateX(-105%) !important;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    z-index: 1001;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: env(safe-area-inset-top, 20px) 16px
             env(safe-area-inset-bottom, 20px) 16px !important;
    min-width: unset !important;
    opacity: 1 !important;
  }
  body.nav-collapsed .sidebar,
  body:not(.mobile-nav-open) .sidebar {
    transform: translateX(-105%) !important;
  }
  body.mobile-nav-open .sidebar {
    transform: translateX(0) !important;
  }

  /* Sidebar text & nav items on dark background */
  .sidebar .brand-mark { color: var(--gold) !important; }
  .sidebar h1 { color: #eef4ff !important; }
  .nav-item, .nav-sub-item {
    color: rgba(238,244,255,0.72) !important;
    min-height: 44px; /* touch target */
  }
  .nav-item.active {
    background: linear-gradient(135deg, rgba(213,173,98,0.18), rgba(99,176,255,0.14)) !important;
    color: #eef4ff !important;
  }
  .sidebar-user-name { color: rgba(238,244,255,0.70) !important; }

  /* ══════════════════════════════════════════════════
     PHASE 5 — LAYOUT SHELL
  ══════════════════════════════════════════════════ */

  .app-shell {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    height: 100vh !important;
    padding: 0 !important;
    gap: 0 !important;
    grid-template-columns: none !important;
    background: #060d18 !important;
  }
  body.lex-open .app-shell,
  body.nav-collapsed .app-shell {
    padding: 0 !important;
    gap: 0 !important;
    grid-template-columns: none !important;
  }
  .workspace {
    flex: 1 !important;
    min-width: 0 !important;
    height: 100dvh !important;
    height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 0 !important;
  }
  .view-stack {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* ══════════════════════════════════════════════════
     PHASE 6 — BOTTOM TAB BAR: elevated, solid
  ══════════════════════════════════════════════════ */

  .mobile-tab-bar {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #04090f !important;
    border-top: 1px solid rgba(213,173,98,0.20);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.55);
    z-index: 600;
    align-items: stretch;
  }
  .mobile-tab-btn {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    background: none;
    border: none;
    color: rgba(238,244,255,0.30);
    transition: color 0.18s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    padding: 7px 2px 2px;
    cursor: pointer;
    min-width: 0;
  }
  .mobile-tab-btn:active { transform: scale(0.86); }
  .mobile-tab-btn.active { color: var(--gold); }
  .mobile-tab-btn svg { flex-shrink: 0; }
  .mobile-tab-label {
    font-size: 0.57rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-top: 2px;
  }

  /* ══════════════════════════════════════════════════
     PHASE 7 — BACKDROP
  ══════════════════════════════════════════════════ */

  .mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.68);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  body.mobile-nav-open .mobile-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* ══════════════════════════════════════════════════
     PHASE 8 — STUDY BUDDY CHAT VIEW
  ══════════════════════════════════════════════════ */

  /* Context sidebar: solid overlay panel */
  .ctx-sidebar {
    background: #08121f !important;
    border-color: rgba(213,173,98,0.12) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(213,173,98,0.12) !important;
    z-index: 20;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
    transform: translateX(0);
  }
  #view-chatbot.ctx-collapsed .ctx-sidebar {
    transform: translateX(-100%) !important;
  }

  /* Chat container fills height */
  .chat-fullpage {
    background: #060d18 !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Chat header bar */
  .chat-fullpage-header {
    background: #070e1c !important;
    border-bottom: 1px solid rgba(213,173,98,0.10) !important;
    padding: 10px 14px !important;
    flex-shrink: 0;
  }

  /* Message area */
  #view-chatbot .chat-messages {
    background: #060d18 !important;
    height: auto !important;
    flex: 1 !important;
    padding: 14px 12px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Chat bubbles: legible on mobile */
  .chat-message.user .msg-bubble {
    background: rgba(213,173,98,0.14) !important;
    border: 1px solid rgba(213,173,98,0.22) !important;
    color: #eef4ff !important;
  }
  .chat-message.assistant .msg-bubble {
    background: #0c1928 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: #eef4ff !important;
  }

  /* Chat input bar: solid background */
  .chat-fullpage-input {
    background: #070e1c !important;
    border-top: 1px solid rgba(213,173,98,0.12) !important;
    padding: 10px 12px calc(68px + env(safe-area-inset-bottom, 0px)) 12px !important;
  }
  .chat-input-wrap {
    background: #0c1928 !important;
    border: 1px solid rgba(213,173,98,0.18) !important;
    border-radius: 14px !important;
    overflow: hidden;
  }
  .chat-input-wrap textarea {
    background: transparent !important;
    color: #eef4ff !important;
    font-size: 16px !important; /* prevents iOS zoom-on-focus */
    min-height: 52px !important;
    max-height: 130px;
    border: none !important;
    padding: 12px 14px !important;
  }

  /* ══════════════════════════════════════════════════
     PHASE 9 — ASK BUDDY PANEL: full screen
  ══════════════════════════════════════════════════ */

  .sb-chat-toggle {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
  }
  .lex-right-sidebar {
    width: 100% !important;
    background: #060d18 !important;
    border-radius: 0 !important;
    border-left: none !important;
  }
  .lex-rs-header {
    background: #070e1c !important;
    border-bottom: 1px solid rgba(213,173,98,0.14) !important;
  }
  .sb-chat-messages {
    background: #060d18 !important;
  }
  .sb-chat-input-row {
    background: #070e1c !important;
    border-top: 1px solid rgba(213,173,98,0.10) !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.lex-open .app-shell { padding-right: 0 !important; }

  /* ══════════════════════════════════════════════════
     PHASE 10 — DASHBOARD
  ══════════════════════════════════════════════════ */

  .db-3col { grid-template-columns: 1fr !important; gap: 12px !important; }
  .db-toolbar { padding-bottom: 8px; }
  .db-stats-strip { flex-wrap: wrap !important; gap: 8px !important; }
  .db-stat-pill {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 110px !important;
    background: #0c1928 !important;
    border: 1px solid rgba(213,173,98,0.12) !important;
  }
  .db-widget {
    background: #0a1624 !important;
    border: 1px solid rgba(213,173,98,0.10) !important;
    border-radius: 14px !important;
  }
  /* stat numbers visible on dark bg */
  .sb-stat strong { color: var(--gold) !important; }
  .sb-stat span { color: rgba(238,244,255,0.50) !important; }

  /* ══════════════════════════════════════════════════
     PHASE 11 — FLASHCARDS
  ══════════════════════════════════════════════════ */

  .fc-workspace { flex-direction: column !important; }
  .fc-sidebar {
    background: #0a1624 !important;
    border-bottom: 1px solid rgba(213,173,98,0.12) !important;
    border-right: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 200px;
    overflow-y: auto;
    padding-bottom: 12px;
    flex-shrink: 0;
  }
  .fc-split-right,
  .fc-main { width: 100% !important; position: static !important; flex: 1; }
  .flashcard-item {
    background: #0c1928 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #eef4ff !important;
  }

  /* Flashcard flip card — big on mobile */
  .fc-review-card {
    background: #0d1e34 !important;
    border: 1px solid rgba(213,173,98,0.20) !important;
    color: #eef4ff !important;
  }

  /* ══════════════════════════════════════════════════
     PHASE 12 — OUTLINES & CASE BRIEFS
  ══════════════════════════════════════════════════ */

  .outline-container,
  .brief-container { flex-direction: column !important; display: flex !important; }
  .outline-menu,
  .brief-menu {
    background: #09142200 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(213,173,98,0.12) !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 220px;
    overflow-y: auto;
    padding-bottom: 12px;
    flex-shrink: 0;
  }
  .outline-editor,
  .outline-content,
  .brief-editor,
  .brief-content {
    background: #060d18 !important;
    color: #eef4ff !important;
    width: 100% !important;
    position: static !important;
  }
  .brief-item,
  .outline-item {
    background: #0c1928 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: #eef4ff !important;
  }

  /* ══════════════════════════════════════════════════
     PHASE 13 — PLANNER
  ══════════════════════════════════════════════════ */

  .planner-layout {
    flex-direction: column !important;
    display: flex !important;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #060d18 !important;
  }
  .planner-profile-panel,
  #planner-profile-panel {
    background: #0a1624 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(213,173,98,0.12) !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0;
  }
  .planner-main,
  .planner-content {
    background: #060d18 !important;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
  /* Panel hidden by default on mobile (toggle reveals it) */
  #view-planner .planner-profile-panel    { max-height: 0; overflow: hidden; border-bottom: none; }
  #view-planner:not(.panel-collapsed) .planner-profile-panel { max-height: 300px; overflow-y: auto; border-bottom: 1px solid rgba(213,173,98,0.12); }

  /* ══════════════════════════════════════════════════
     PHASE 14 — SETTINGS & MISC VIEWS
  ══════════════════════════════════════════════════ */

  .settings-grid { grid-template-columns: 1fr !important; }
  /* Settings panels */
  .settings-grid > .panel,
  .settings-grid > .glass-soft {
    background: #0c1928 !important;
    border: 1px solid rgba(213,173,98,0.11) !important;
    color: #eef4ff !important;
  }
  /* Inputs on dark mobile background */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select {
    background: #0e1e32 !important;
    border-color: rgba(213,173,98,0.20) !important;
    color: #eef4ff !important;
    font-size: 16px !important; /* prevent iOS zoom */
    border-radius: 10px !important;
  }
  textarea {
    background: #0e1e32 !important;
    border-color: rgba(213,173,98,0.18) !important;
    color: #eef4ff !important;
    font-size: 16px !important;
    min-height: 100px !important;
  }
  input::placeholder, textarea::placeholder { color: rgba(238,244,255,0.35) !important; }

  /* ══════════════════════════════════════════════════
     PHASE 15 — MISC LAYOUTS, GRIDS, ROWS
  ══════════════════════════════════════════════════ */

  .subview-split,
  .subview-two-col,
  .is-dual-pane { flex-direction: column !important; display: flex !important; gap: 12px !important; }
  .gen-split-right { width: 100% !important; position: static !important; }

  .hub-grid, .hub-grid-2, .hub-grid-3, .hub-grid-2x2,
  .mc-grid, .fc-metrics,
  .is-top-grid, .is-bottom-grid,
  .perf-grid { grid-template-columns: 1fr !important; }
  .perf-stats-row { grid-template-columns: repeat(2, 1fr) !important; }

  .preset-row, .quick-prompts, .inline-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .preset-btn { font-size: 0.72rem !important; padding: 6px 10px !important; }

  /* ══════════════════════════════════════════════════
     PHASE 16 — MODALS: bottom-sheet style
  ══════════════════════════════════════════════════ */

  #deck-picker-overlay,
  #planner-day-modal,
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
    background: rgba(0,0,0,0.72) !important;
  }
  .modal-card,
  .planner-day-modal-card,
  .deck-picker-modal,
  .xp-modal-card {
    background: #0c1928 !important;
    border: 1px solid rgba(213,173,98,0.18) !important;
    color: #eef4ff !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    margin: 0 !important;
    max-height: 88dvh;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 -8px 48px rgba(0,0,0,0.65) !important;
  }
  /* Modal headings & labels */
  .modal-card h2,
  .modal-card h3,
  .planner-day-modal-card h2,
  .planner-day-modal-card h3 { color: #eef4ff !important; }

  /* ══════════════════════════════════════════════════
     PHASE 17 — TOAST & UTILITY
  ══════════════════════════════════════════════════ */

  .toast {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    background: #111f35 !important;
    color: #eef4ff !important;
    border: 1px solid rgba(213,173,98,0.20) !important;
  }

  /* Ambient orbs: tone down on mobile (save battery, reduce visual noise) */
  .ambient { opacity: 0.10 !important; }
  body::before { opacity: 0.3 !important; }
}

/* ═══════════════════════════════════════════
   PRINT / PDF EXPORT (8.5x11 PAPER)
═══════════════════════════════════════════ */
@media print {
  /* Aggressively hide all UI elements to isolate only the target document */
  .ambient, .sidebar, .topbar, .hub-grid, .hub-intro, .nav, .subview-back, .dashboard-grid, .ghost-btn, .gold-btn, .outline-menu, .brief-menu, .outline-toolbar, .brief-toolbar, .brief-item-actions, .settings-grid {
    display: none !important;
  }
  
  body, html, .app-shell, .workspace, .view-stack, .view, .subview {
    background: #fff !important;
    color: #000 !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  .glass, .glass-soft, .panel, .rich-output, .brief-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #000 !important;
  }

  .outline-container, .brief-container {
    display: block !important;
  }

  /* Reset specific app font overrides back to neutral or crisp print fonts */
  .rich-output, .brief-section-body {
    padding: 0 !important;
    font-size: 11pt !important;
  }
  h1, h2, h3, h4 { color: #000 !important; page-break-after: avoid; }
  .brief-section { margin-bottom: 20px !important; page-break-inside: avoid; }
  .brief-section-head { color: #000 !important; font-size: 10pt !important; background: transparent !important; padding: 0 !important; margin-bottom: 4px !important; border-bottom: 1px solid #ccc !important; }
  .brief-sec-icon { display: none !important; }
}

/* ── Voice Mode Overlay ───────────────────────────────────────────────────── */
.voice-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #040c18;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 52px 24px 48px;
  animation: voOverlayIn 0.35s cubic-bezier(.22,.68,0,1.2);
}
@keyframes voOverlayIn {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vo-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 60px;
}
.vo-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vo-close-btn {
  background: rgba(255,255,255,0.08);
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.vo-close-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Orb */
.vo-orb-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  margin-bottom: 40px;
}
.vo-orb {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%,
    rgba(213,173,98,1) 0%,
    rgba(213,173,98,0.55) 40%,
    rgba(213,173,98,0.15) 70%,
    transparent 100%);
  box-shadow:
    0 0 0 0 rgba(213,173,98,0.5),
    0 0 40px 8px rgba(213,173,98,0.12);
  transition: box-shadow 0.3s;
}

/* Listening state — slow outer ring pulse */
.vo-orb.listening {
  animation: orbListenPulse 2s ease-out infinite;
}
@keyframes orbListenPulse {
  0%   { box-shadow: 0 0 0 0   rgba(213,173,98,0.55), 0 0 40px 8px rgba(213,173,98,0.12); }
  60%  { box-shadow: 0 0 0 36px rgba(213,173,98,0),   0 0 40px 8px rgba(213,173,98,0.12); }
  100% { box-shadow: 0 0 0 0   rgba(213,173,98,0),    0 0 40px 8px rgba(213,173,98,0.12); }
}

/* Thinking state — gentle breathe */
.vo-orb.thinking {
  animation: orbThink 1.4s ease-in-out infinite alternate;
}
@keyframes orbThink {
  from { transform: scale(0.92); filter: brightness(0.8); }
  to   { transform: scale(1.04); filter: brightness(1.1); }
}

/* Speaking state — fast active pulse */
.vo-orb.speaking {
  animation: orbSpeak 0.65s ease-in-out infinite alternate;
}
@keyframes orbSpeak {
  from { transform: scale(1);    filter: brightness(1);   box-shadow: 0 0 0 0  rgba(213,173,98,0.4), 0 0 40px 8px rgba(213,173,98,0.2); }
  to   { transform: scale(1.18); filter: brightness(1.35);box-shadow: 0 0 0 24px rgba(213,173,98,0), 0 0 60px 16px rgba(213,173,98,0.3); }
}

.vo-status {
  font-size: 17px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.02em;
  margin-bottom: 56px;
  min-height: 26px;
}

.vo-end-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 32px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  margin-top: auto;
}
.vo-end-btn:hover {
  background: rgba(255,255,255,0.13);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}