:root {
  --font: "Inter", system-ui, sans-serif;
  --mono: "SF Mono", "Fira Code", Consolas, monospace;
  --r: 8px;
  --r2: 12px;
  --t: 0.15s ease;
  --habit-1: #d1f0d8;
  --habit-2: #82d99a;
  --habit-3: #3cba5e;
  --habit-4: #1a7f37;
}
[data-theme="light"] {
  --bg: #fff;
  --bg2: #f7f7f7;
  --sf: #fff;
  --cd: #fff;
  --ch: #fafafa;
  --bd: rgba(0, 0, 0, 0.06);
  --bm: rgba(0, 0, 0, 0.1);
  --bs: rgba(0, 0, 0, 0.16);
  --tx: #111;
  --t2: #555;
  --t3: #999;
  --t4: #bbb;
  --ib: #f5f5f5;
  --ol: rgba(0, 0, 0, 0.35);
  --sb: rgba(0, 0, 0, 0.1);
  --si: #fafafa;
  --sh: rgba(0, 0, 0, 0.03);
  --sa: rgba(0, 0, 0, 0.06);
  --tg: #f0f0f0;
  --tt: #777;
  --cb: #1e1e1e;
  --ct: #d4d4d4;
  --tp: #111;
  --tc: #fff;
  --as: rgba(0, 0, 0, 0.05);
  --ok: #2d8659;
  --wn: #8a6d00;
  --ng: #c0392b;
  --he: #eaeaea;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow2: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow3: 0 4px 16px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] {
  --bg: #111;
  --bg2: #1a1a1a;
  --sf: #1a1a1a;
  --cd: #1e1e1e;
  --ch: #252525;
  --bd: rgba(255, 255, 255, 0.06);
  --bm: rgba(255, 255, 255, 0.1);
  --bs: rgba(255, 255, 255, 0.16);
  --tx: #eee;
  --t2: #aaa;
  --t3: #666;
  --t4: #444;
  --ib: #222;
  --ol: rgba(0, 0, 0, 0.6);
  --sb: rgba(255, 255, 255, 0.1);
  --si: #161616;
  --sh: rgba(255, 255, 255, 0.03);
  --sa: rgba(255, 255, 255, 0.06);
  --tg: #2a2a2a;
  --tt: #888;
  --cb: #0d0d0d;
  --ct: #d4d4d4;
  --tp: #eee;
  --tc: #111;
  --as: rgba(255, 255, 255, 0.05);
  --ok: #4caf7d;
  --wn: #d4a53a;
  --ng: #e05a4f;
  --he: #2a2a2a;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow2: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow3: 0 4px 16px rgba(0, 0, 0, 0.4);
  --habit-1: #1a3d25;
  --habit-2: #1a6b35;
  --habit-3: #26a641;
  --habit-4: #39d353;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--tx);
  line-height: 1.6;
  min-height: 100vh;
}
::selection {
  background: var(--as);
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--sb);
  border-radius: 3px;
}
button {
  cursor: pointer;
  font-family: var(--font);
}
input,
textarea,
select {
  font-family: var(--font);
}

/* === LAYOUT === */
.app {
  display: flex;
  min-height: 100vh;
}
.side {
  width: 220px;
  background: var(--si);
  border-right: 1px solid var(--bd);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
  padding: 8px 0;
}
.side.collapsed {
  width: 48px;
}
.side.collapsed .side-h,
.side.collapsed .ns,
.side.collapsed .sf,
.side.collapsed #sidebarPinned,
.side.collapsed #sidebarFolders {
  display: none !important;
}
.side.collapsed > div {
  padding: 0 !important;
}
.side.collapsed .side-toggle {
  justify-content: center;
  padding: 8px 0;
  width: 48px;
}
.side.collapsed .side-toggle .tog-label {
  display: none;
}
.side-toggle {
  background: none;
  border: none;
  color: var(--t3);
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: all var(--t);
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}
.side-toggle:hover {
  background: var(--sh);
  color: var(--tx);
}
.side-h {
  padding: 16px 16px 10px;
}
.side-h h1 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.side-h .tl {
  font-size: 11px;
  color: var(--t3);
  margin-top: 1px;
}
.ns {
  padding: 4px 8px;
}
.ns-l {
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  padding: 10px 12px 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ni {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 6px;
  color: var(--t2);
  font-size: 13px;
  font-weight: 450;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: all var(--t);
}
.ni:hover {
  background: var(--sh);
  color: var(--tx);
}
.ni.ac {
  background: var(--sa);
  color: var(--tx);
  font-weight: 600;
}
.ni .ic {
  font-size: 14px;
  width: 20px;
  text-align: center;
  opacity: 0.6;
  flex-shrink: 0;
}
.ni .bg {
  margin-left: auto;
  background: var(--tx);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 18px;
}
.sf {
  margin-top: auto;
  padding: 8px;
  border-top: 1px solid var(--bd);
}
.mc {
  margin-left: 220px;
  flex: 1;
  padding: 32px;
  max-width: calc(900px + 220px + 64px);
  min-height: 100vh;
  transition: margin-left 0.2s ease;
}
.side.collapsed ~ .mc,
.app:has(.side.collapsed) .mc {
  margin-left: 48px;
}

.mt {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  background: var(--sf);
  border: 1px solid var(--bm);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 16px;
  color: var(--tx);
  line-height: 1;
}
.mo-ov {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--ol);
  z-index: 99;
}
@media (max-width: 768px) {
  .mt {
    display: block;
  }
  .side {
    transform: translateX(-100%);
    z-index: 150;
  }
  .side.open {
    transform: translateX(0);
  }
  .mo-ov.open {
    display: block;
  }
  .mc {
    margin-left: 0;
    padding: 56px 16px 32px;
  }
}

.vw {
  display: none;
  animation: fi 0.2s ease;
}
.vw.ac {
  display: block;
}
@keyframes fi {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === COMMON === */
.ph {
  margin-bottom: 24px;
}
.ph h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.pa {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.bt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--bm);
  background: var(--sf);
  color: var(--tx);
  transition: all var(--t);
  white-space: nowrap;
  line-height: 1.4;
}
.bt:hover {
  background: var(--ch);
  border-color: var(--bs);
}
.bp {
  background: var(--tx);
  border-color: var(--tx);
  color: var(--bg);
}
.bp:hover {
  opacity: 0.85;
}
.bk {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
.bk:hover {
  opacity: 0.9;
}
.bd {
  background: transparent;
  border-color: var(--bm);
  color: var(--ng);
}
.bd:hover {
  background: rgba(192, 57, 43, 0.06);
}
.bs2 {
  padding: 4px 10px;
  font-size: 12px;
}
.bl {
  padding: 10px 20px;
  font-size: 14px;
}
.bg2 {
  border-color: transparent;
  background: transparent;
}
.bg2:hover {
  background: var(--sh);
}
.fg {
  margin-bottom: 16px;
}
.fg label {
  display: block;
  font-size: 12px;
  font-weight: 550;
  color: var(--t2);
  margin-bottom: 4px;
}
.fi {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--bm);
  border-radius: 6px;
  background: var(--ib);
  color: var(--tx);
  font-size: 14px;
  line-height: 1.5;
  transition:
    border-color var(--t),
    box-shadow var(--t);
}
.fi:focus {
  outline: none;
  border-color: var(--t3);
  box-shadow: 0 0 0 3px var(--as);
}
textarea.fi {
  min-height: 80px;
  resize: vertical;
}
select.fi {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23999' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.fr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ck {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--t2);
}
.ck input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--tx);
}

/* === CARDS === */
.card {
  background: var(--cd);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: all var(--t);
}
.card:hover {
  border-color: var(--bm);
  box-shadow: var(--shadow2);
  transform: translateY(-1px);
}
.card-flat {
  background: var(--cd);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 20px;
  box-shadow: var(--shadow);
}
.cg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.sc {
  padding: 16px;
  text-align: left;
}
.sc .sv {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.sc .sl {
  font-size: 11px;
  color: var(--t3);
  margin-top: 4px;
  font-weight: 500;
}

/* === MODALS (kept for non-content workflows) === */
.ml-o {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--ol);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fi 0.12s ease;
}
.ml-o.open {
  display: flex;
}
.ml {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow3);
}
.ml-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bd);
}
.ml-h h3 {
  font-size: 15px;
  font-weight: 600;
}
.ml-x {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--t3);
  padding: 4px;
  border-radius: 4px;
}
.ml-x:hover {
  color: var(--tx);
  background: var(--sh);
}
.ml-b {
  padding: 20px;
}
.ml-f {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--bd);
}

/* === SUBJECT CARD === */
.sj {
  padding: 16px 20px;
  cursor: pointer;
  border-radius: var(--r2);
  border: 1px solid var(--bd);
  background: var(--sf);
  margin-bottom: 8px;
  box-shadow: var(--shadow);
  transition: all var(--t);
}
.sj:hover {
  background: var(--ch);
  border-color: var(--bm);
  box-shadow: var(--shadow2);
  transform: translateY(-1px);
}
.sn {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sp {
  font-size: 13px;
  color: var(--t2);
  margin-top: 2px;
}
.sm {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--t3);
  margin-top: 8px;
  flex-wrap: wrap;
}
.cb2 {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--tg);
  color: var(--tt);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sd {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.sd.due {
  background: var(--wn);
}
.sd.over {
  background: var(--ng);
}
.sd.up {
  background: var(--t3);
}
.sd.ok2 {
  background: var(--ok);
}
.pl {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--tg);
  color: var(--tt);
  font-weight: 450;
}
.ct {
  display: flex;
  gap: 3px;
  align-items: center;
}
.ct .cd2 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--bm);
}
.ct .cd2.c1,
.ct .cd2.c2 {
  background: var(--ng);
}
.ct .cd2.c3 {
  background: var(--wn);
}
.ct .cd2.c4,
.ct .cd2.c5 {
  background: var(--ok);
}
.pb {
  width: 100%;
  height: 4px;
  background: var(--bd);
  border-radius: 2px;
  overflow: hidden;
}
.pb .fl {
  height: 100%;
  border-radius: 2px;
  background: var(--tx);
  transition: width 0.4s ease;
}
.pb .fl.ok {
  background: var(--ok);
}

/* === DETAIL WORKSPACE === */
.ws-header {
  margin-bottom: 28px;
}
.ws-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ws-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ws-stat {
  font-size: 12px;
  color: var(--t2);
}
.ws-stat strong {
  color: var(--tx);
  font-weight: 600;
}
.ws-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Tabs - pill style */
.tab-bar {
  display: flex;
  gap: 4px;
  background: var(--bg2);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 28px;
  overflow-x: auto;
}
.tab-btn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--t3);
  background: none;
  border: none;
  border-radius: 6px;
  transition: all var(--t);
  white-space: nowrap;
  position: relative;
}
.tab-btn:hover {
  color: var(--t2);
}
.tab-btn.ac {
  background: var(--sf);
  color: var(--tx);
  font-weight: 600;
  box-shadow: var(--shadow);
}
.tab-btn .tab-count {
  font-size: 10px;
  color: var(--t4);
  margin-left: 4px;
  font-weight: 400;
}
.tab-content {
  animation: fi 0.2s ease;
}

/* === INLINE EDITOR === */
.inline-editor {
  border: 1px solid var(--bm);
  border-radius: var(--r2);
  background: var(--sf);
  overflow: visible;
  margin-bottom: 20px;
  box-shadow: var(--shadow2);
  animation: slideDown 0.2s ease;
  position: relative;
}
@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
  }
  to {
    opacity: 1;
    max-height: 800px;
    margin-bottom: 20px;
  }
}
.ie-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--bd);
  background: var(--bg2);
  flex-wrap: wrap;
}
.ie-toolbar button {
  background: none;
  border: none;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--t2);
  transition: all var(--t);
  font-family: var(--font);
  line-height: 1;
}
.ie-toolbar button:hover {
  background: var(--sh);
  color: var(--tx);
}
.ie-toolbar .sep {
  width: 1px;
  height: 18px;
  background: var(--bd);
  margin: 0 4px;
}
.ie-body {
  padding: 16px 20px;
}
.ie-body textarea {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--tx);
  font-size: 15px;
  line-height: 1.7;
  resize: none;
  outline: none;
  font-family: var(--font);
  min-height: 120px;
  overflow: hidden;
}
/* WYSIWYG editor */
.wysiwyg-editor {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--tx);
  font-size: 15px;
  line-height: 1.8;
  outline: none;
  font-family: var(--font);
  min-height: 150px;
  padding: 16px 20px;
  cursor: text;
}
.wysiwyg-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--t4);
}
.wysiwyg-editor h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 16px 0 8px;
  letter-spacing: -0.02em;
}
.wysiwyg-editor h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 14px 0 6px;
}
.wysiwyg-editor h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 12px 0 4px;
}
.wysiwyg-editor h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0 4px;
}
.wysiwyg-editor h5 {
  font-size: 14px;
  font-weight: 600;
  margin: 8px 0 3px;
  color: var(--t2);
}
.wysiwyg-editor h6 {
  font-size: 13px;
  font-weight: 600;
  margin: 8px 0 3px;
  color: var(--t3);
}
.wysiwyg-editor strong {
  font-weight: 600;
}
.wysiwyg-editor em {
  font-style: italic;
}
.wysiwyg-editor u {
  text-decoration: underline;
}
.wysiwyg-editor s,
.wysiwyg-editor strike {
  text-decoration: line-through;
  color: var(--t3);
}
.wysiwyg-editor mark {
  background: rgba(255, 230, 0, 0.3);
  padding: 1px 3px;
  border-radius: 2px;
}
.wysiwyg-editor ul,
.wysiwyg-editor ol {
  padding-left: 24px;
  margin: 8px 0;
}
.wysiwyg-editor li {
  margin: 4px 0;
}
.wysiwyg-editor blockquote {
  border-left: 3px solid var(--bm);
  padding-left: 16px;
  color: var(--t2);
  margin: 12px 0;
  font-style: italic;
}
.wysiwyg-editor code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--tg);
  padding: 2px 6px;
  border-radius: 4px;
}
.wysiwyg-editor hr {
  border: none;
  border-top: 1px solid var(--bd);
  margin: 16px 0;
}
.wysiwyg-editor table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}
.wysiwyg-editor th,
.wysiwyg-editor td {
  padding: 8px 12px;
  border: 1px solid var(--bd);
  text-align: left;
}
.wysiwyg-editor th {
  background: var(--bg2);
  font-weight: 600;
}
.wys-table-wrap {
  margin: 12px 0;
}
.wys-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}
.wys-table-wrap th,
.wys-table-wrap td {
  padding: 8px 12px;
  border: 1px solid var(--bd);
  text-align: left;
}
.wys-table-wrap th {
  background: var(--bg2);
  font-weight: 600;
}
.wys-table-wrap td[contenteditable] {
  cursor: text;
}
.wys-table-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.wys-table-actions button {
  background: var(--bg2);
  border: 1px solid var(--bd);
  color: var(--t2);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--t);
}
.wys-table-actions button:hover {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
}
.ie-toolbar-row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--bd);
  background: var(--bg2);
  flex-wrap: wrap;
}
.ie-toolbar-row button {
  background: none;
  border: none;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--t2);
  transition: all var(--t);
  font-family: var(--font);
  line-height: 1;
  cursor: pointer;
}
.ie-toolbar-row button:hover {
  background: var(--sh);
  color: var(--tx);
}
.ie-toolbar-row .sep {
  width: 1px;
  height: 18px;
  background: var(--bd);
  margin: 0 4px;
}
.ie-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--bd);
  background: var(--bg2);
}

/* Math dropdown */
.math-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--sf);
  border: 1px solid var(--bm);
  border-radius: var(--r2);
  padding: 12px;
  box-shadow: var(--shadow3);
  z-index: 50;
  display: none;
  min-width: 320px;
}
.math-dropdown.open {
  display: block;
}
.math-section {
  margin-bottom: 10px;
}
.math-section:last-child {
  margin-bottom: 0;
}
.math-section-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.math-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.math-sym {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid var(--bd);
  background: var(--bg2);
  font-size: 15px;
  cursor: pointer;
  transition: all var(--t);
  color: var(--tx);
}
.math-sym:hover {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
}
.katex-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--bm);
  border-radius: 6px;
  background: var(--ib);
  color: var(--tx);
  font-family: var(--mono);
  font-size: 13px;
  margin-top: 8px;
}
.katex-preview {
  padding: 12px;
  text-align: center;
  min-height: 40px;
  border: 1px dashed var(--bd);
  border-radius: 6px;
  margin-top: 8px;
  background: var(--bg2);
}
.katex-ref {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.katex-ref button {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--bd);
  background: var(--bg2);
  color: var(--t2);
  cursor: pointer;
  font-family: var(--mono);
}
.katex-ref button:hover {
  background: var(--tx);
  color: var(--bg);
}

/* === NOTE ENTRY (rendered) === */
.note-card {
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  background: var(--sf);
  padding: 20px 24px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  transition: all var(--t);
}
.note-card:hover {
  box-shadow: var(--shadow2);
}
.note-date {
  font-size: 11px;
  color: var(--t3);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.note-content {
  font-size: 15px;
  line-height: 1.75;
  color: var(--tx);
  max-width: 680px;
}
.note-content h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 24px 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.note-content h1:first-child,
.note-content h2:first-child,
.note-content h3:first-child {
  margin-top: 0;
}
.note-content h2 {
  font-size: 19px;
  font-weight: 650;
  margin: 20px 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--bd);
}
.note-content h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 16px 0 6px;
  color: var(--tx);
}
.note-content p {
  margin: 10px 0;
}
.note-content strong {
  font-weight: 650;
  color: var(--tx);
}
.note-content em {
  font-style: italic;
}
.note-content ul,
.note-content ol {
  padding-left: 22px;
  margin: 10px 0;
}
.note-content li {
  margin: 5px 0;
  padding-left: 2px;
}
.note-content li::marker {
  color: var(--t3);
}
.note-content blockquote {
  border-left: 3px solid var(--bm);
  padding: 4px 0 4px 16px;
  color: var(--t2);
  margin: 14px 0;
  font-style: italic;
  background: var(--bg2);
  border-radius: 0 6px 6px 0;
}
.note-content code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--tg);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--bd);
}
.note-content pre {
  background: var(--cb);
  color: var(--ct);
  padding: 16px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 14px 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid var(--bd);
}
.note-content pre code {
  background: none;
  border: none;
  padding: 0;
}
.note-content a {
  color: var(--ac, #3d5a80);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.note-content hr {
  border: none;
  border-top: 1px solid var(--bd);
  margin: 20px 0;
}
.note-content table {
  border-collapse: collapse;
  margin: 14px 0;
  width: 100%;
  font-size: 14px;
}
.note-content th,
.note-content td {
  border: 1px solid var(--bd);
  padding: 8px 12px;
  text-align: left;
}
.note-content th {
  background: var(--bg2);
  font-weight: 600;
}
.note-content img {
  max-width: 100%;
  border-radius: 8px;
  margin: 12px 0;
}
.note-content hr {
  border: none;
  border-top: 1px solid var(--bd);
  margin: 16px 0;
}
.note-content .katex-block {
  text-align: center;
  padding: 12px 0;
  overflow-x: auto;
}
/* Tables */
.note-content .md-table,
.live-preview-pane .md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}
.note-content .md-table th,
.live-preview-pane .md-table th {
  background: var(--bg2);
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--bd);
}
.note-content .md-table td,
.live-preview-pane .md-table td {
  padding: 8px 12px;
  border: 1px solid var(--bd);
}
.note-content .md-table tr:nth-child(even),
.live-preview-pane .md-table tr:nth-child(even) {
  background: var(--bg2);
}
/* Callout blocks */
.md-callout {
  border-radius: var(--r);
  padding: 14px 18px;
  margin: 12px 0;
  border-left: 4px solid var(--t3);
  background: var(--bg2);
}
.md-callout-tip {
  border-left-color: var(--ok);
  background: rgba(45, 134, 89, 0.06);
}
.md-callout-warning {
  border-left-color: var(--wn);
  background: rgba(138, 109, 0, 0.06);
}
.md-callout-note {
  border-left-color: var(--tx);
}
.md-callout-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
  color: var(--t2);
}
/* Collapsible */
.md-collapse {
  border: 1px solid var(--bd);
  border-radius: var(--r);
  margin: 10px 0;
  background: var(--bg2);
}
.md-collapse summary {
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.md-collapse summary::before {
  content: "▸";
  transition: transform 0.2s;
}
.md-collapse[open] summary::before {
  transform: rotate(90deg);
}
.md-collapse-body {
  padding: 10px 14px;
  border-top: 1px solid var(--bd);
  min-height: 40px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--t2);
}
/* Checkboxes */
.md-check {
  padding: 4px 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.md-check.checked {
  color: var(--t3);
}
.md-check .md-cb {
  font-size: 16px;
}

/* === FLASHCARD === */
.fc-container {
  perspective: 1000px;
  margin-bottom: 24px;
}
.fc-card-3d {
  width: 100%;
  position: relative;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  cursor: pointer;
}
.fc-card-3d.flipped .fc-front {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.fc-card-3d.flipped .fc-back {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}
.fc-front,
.fc-back {
  border-radius: var(--r2);
  border: 1px solid var(--bd);
  box-shadow: var(--shadow2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  transition: opacity 0.4s ease;
  min-height: 160px;
}
.fc-front {
  background: var(--sf);
  opacity: 1;
  position: relative;
}
.fc-back {
  background: var(--bg2);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.fc-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: absolute;
  top: 12px;
  left: 16px;
}
.fc-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.fc-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.fc-nav .fc-counter {
  font-size: 13px;
  color: var(--t3);
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}
.fc-flip-hint {
  font-size: 12px;
  color: var(--t4);
  margin-top: 16px;
}

/* Live preview pane */
.live-preview-pane {
  border-top: 1px solid var(--bd);
  padding: 16px 20px;
  background: var(--bg2);
  min-height: 60px;
  max-height: 300px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.7;
  border-radius: 0 0 var(--r2) var(--r2);
}
.live-preview-pane h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 12px 0 6px;
}
.live-preview-pane h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 10px 0 4px;
}
.live-preview-pane h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 8px 0 3px;
}
.live-preview-pane strong {
  font-weight: 600;
}
.live-preview-pane em {
  font-style: italic;
}
.live-preview-pane code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--tg);
  padding: 2px 6px;
  border-radius: 4px;
}
.live-preview-pane blockquote {
  border-left: 3px solid var(--bm);
  padding-left: 12px;
  color: var(--t2);
  margin: 8px 0;
}
.live-preview-pane ul {
  padding-left: 20px;
  margin: 6px 0;
}
.live-preview-pane li {
  margin: 3px 0;
}
.live-preview-pane hr {
  border: none;
  border-top: 1px solid var(--bd);
  margin: 12px 0;
}
.live-preview-pane .katex-block {
  text-align: center;
  padding: 8px 0;
  overflow-x: auto;
}

/* === CODE BLOCK === */
.code-container {
  border-radius: var(--r2);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ccc;
}
.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #2d2d2d;
  font-size: 12px;
  color: #999;
}
.code-header .lang-badge {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: #aaa;
}
.code-header .code-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.code-header .code-actions button {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #aaa;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 11px;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--t);
  font-weight: 500;
}
.code-header .code-actions button:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.code-header .code-actions .run-btn {
  background: rgba(45, 134, 89, 0.25);
  color: #4caf7d;
  padding: 5px 14px;
  border-radius: 5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.code-header .code-actions .run-btn:hover {
  background: rgba(45, 134, 89, 0.4);
  color: #6fdf9f;
}
.code-body {
  background: var(--cb);
  padding: 0;
  position: relative;
  min-height: 60px;
  max-height: 600px;
  overflow: auto;
  resize: vertical;
}
.code-body pre {
  margin: 0;
  padding: 16px 16px 16px 52px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  counter-reset: line;
  color: #d4d4d4;
}
.code-body pre code {
  font-family: var(--mono);
  background: none;
  padding: 0;
  border-radius: 0;
  color: #d4d4d4;
}
.code-body .line-numbers {
  position: sticky;
  left: 0;
  top: 0;
  padding: 16px 0;
  width: 40px;
  text-align: right;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  user-select: none;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  float: left;
}
.code-body .line-numbers span {
  display: block;
  padding-right: 8px;
}
.code-output-wrap {
  background: #1a1a1a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.code-output-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666;
}
.code-output-header .output-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4caf7d;
}
.code-output-header .output-dot.err {
  background: #e05a4f;
}
.code-output {
  padding: 8px 16px 14px;
  font-family: var(--mono);
  font-size: 13px;
  color: #c8c8c8;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.5;
  border-left: 3px solid #4caf7d;
  margin-left: 16px;
  margin-bottom: 12px;
  padding-left: 12px;
}
.code-output.error {
  color: #e05a4f;
  border-left-color: #e05a4f;
}
.code-output.loading {
  color: #888;
  animation: outputPulse 1.5s ease infinite;
}
@keyframes outputPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
/* Test case results */
.tc-results {
  padding: 8px 16px 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: #c8c8c8;
  margin-left: 16px;
  margin-bottom: 12px;
}
.tc-row {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.tc-row:last-child {
  border-bottom: none;
}
.tc-row.pass {
  color: #4caf7d;
}
.tc-row.fail {
  color: #e05a4f;
}
.tc-row .tc-icon {
  flex-shrink: 0;
  font-weight: 700;
}
.tc-summary {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #999;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tc-summary.all-pass {
  color: #4caf7d;
}
/* Test case editor - theme-aware */
.tc-editor {
  background: var(--bg2);
  padding: 16px 20px;
  border-top: 1px solid var(--bd);
}
.tc-editor label {
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: 4px;
  margin-top: 8px;
}
.tc-editor label:first-child {
  margin-top: 0;
}
.tc-editor input,
.tc-editor textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--bm);
  border-radius: 6px;
  background: var(--ib);
  color: var(--tx);
  font-family: var(--mono);
  font-size: 12px;
  margin-bottom: 4px;
  outline: none;
}
.tc-editor input:focus,
.tc-editor textarea:focus {
  border-color: var(--t3);
  box-shadow: 0 0 0 3px var(--as);
}
.tc-item {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.tc-item .tc-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.tc-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bd);
}
.tc-section-header span {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
}
.tc-add-btn {
  background: var(--tx);
  color: var(--bg);
  border: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--t);
}
.tc-add-btn:hover {
  opacity: 0.85;
}

/* Code editor inline */
.code-edit-area {
  background: var(--cb);
  color: var(--ct);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  padding: 16px;
  border: none;
  width: 100%;
  min-height: 150px;
  resize: vertical;
  outline: none;
  tab-size: 2;
}

/* === FILL BLANK === */
.fb-card {
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  background: var(--sf);
  padding: 24px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  transition: all var(--t);
}
.fb-card:hover {
  box-shadow: var(--shadow2);
}
.fb-statement {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 16px;
}
.fb-blank {
  display: inline-block;
  border-bottom: 2px solid var(--tx);
  padding: 2px 24px;
  margin: 0 4px;
  min-width: 80px;
  text-align: center;
  font-weight: 500;
  transition: all var(--t);
}
.fb-input {
  display: inline-block;
  border: none;
  border-bottom: 2px solid var(--tx);
  padding: 2px 4px;
  width: 120px;
  text-align: center;
  font-size: 16px;
  font-family: var(--font);
  background: transparent;
  color: var(--tx);
  outline: none;
  transition: border-color var(--t);
}
.fb-input:focus {
  border-color: var(--ok);
}
.fb-input.correct {
  border-color: var(--ok);
  color: var(--ok);
  animation: pulse 0.3s ease;
}
.fb-input.wrong {
  border-color: var(--ng);
  color: var(--ng);
  animation: shake 0.3s ease;
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.fb-stats {
  font-size: 12px;
  color: var(--t3);
  margin-top: 8px;
}
.fb-result {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  animation: fi 0.2s ease;
}
/* Word picker for fill-blank */
.fb-word {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--bd);
  background: var(--sf);
  color: var(--tx);
  font-size: 14px;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s ease;
  line-height: 1.3;
}
.fb-word:hover {
  border-color: var(--bm);
  background: var(--ch);
}
.fb-word.selected {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
  font-weight: 600;
}

/* === LINK ITEM === */
.link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  margin-bottom: 8px;
  background: var(--sf);
  box-shadow: var(--shadow);
  transition: all var(--t);
}
.link-card:hover {
  border-color: var(--bm);
  box-shadow: var(--shadow2);
}
.link-card a {
  color: var(--tx);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 14px;
}
.link-card .ld {
  color: var(--t3);
  font-size: 12px;
  margin-top: 2px;
}

/* === PLUS BUTTON (Notion-style) === */
.add-block {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r2);
  border: 1px dashed var(--bd);
  color: var(--t3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t);
  background: transparent;
  width: 100%;
  text-align: left;
  margin-top: 16px;
}
.add-block:hover {
  border-color: var(--bm);
  background: var(--sh);
  color: var(--t2);
}
.add-block .plus {
  font-size: 16px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bg2);
  transition: all var(--t);
}
.add-block:hover .plus {
  background: var(--tx);
  color: var(--bg);
}

/* === MISC === */
.sh {
  font-size: 12px;
  font-weight: 600;
  color: var(--t3);
  margin-bottom: 12px;
  margin-top: 32px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bd);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sb {
  position: relative;
  margin-bottom: 16px;
}
.sb input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  background: var(--sf);
  color: var(--tx);
  font-size: 14px;
}
.sb input:focus {
  outline: none;
  border-color: var(--t3);
  box-shadow: 0 0 0 3px var(--as);
}
.sb .si2 {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t3);
  font-size: 13px;
}
.so2 {
  display: flex;
  gap: 4px;
}
.sg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.ms {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 16px;
  box-shadow: var(--shadow);
}
.ms .ml2 {
  font-size: 11px;
  color: var(--t3);
  font-weight: 500;
}
.ms .mv {
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: -0.02em;
}
.mb {
  background: var(--as);
  border: 1px solid var(--bd);
  color: var(--tx);
  padding: 16px 20px;
  border-radius: var(--r2);
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.mb .sub {
  font-weight: 400;
  font-size: 13px;
  color: var(--t2);
  margin-top: 2px;
}
.es {
  text-align: center;
  padding: 48px 20px;
  color: var(--t3);
}
.es .ei {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.es p {
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--t2);
}
.rhi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bd);
  font-size: 13px;
}
.rhi:last-child {
  border-bottom: none;
}
.rhi .rhd {
  color: var(--t2);
  min-width: 90px;
  font-weight: 450;
}
.rhi .rha {
  font-weight: 550;
}
.rhi .rhn {
  color: var(--t3);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.empty-tab {
  text-align: center;
  padding: 40px 20px;
  color: var(--t3);
  font-size: 14px;
  line-height: 1.7;
}

/* Habit tracker */
.hg {
  display: inline-grid;
  grid-template-rows: repeat(7, 11px);
  grid-auto-flow: column;
  grid-auto-columns: 11px;
  gap: 2px;
}
.hc {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--he);
  cursor: pointer;
  transition: outline var(--t);
}
.hc:hover {
  outline: 1px solid var(--t3);
}
.hc.l1 {
  background: var(--habit-1);
}
.hc.l2 {
  background: var(--habit-2);
}
.hc.l3 {
  background: var(--habit-3);
}
.hc.l4 {
  background: var(--habit-4);
}
.hl {
  display: inline-grid;
  grid-template-rows: repeat(7, 11px);
  gap: 2px;
  margin-right: 4px;
  font-size: 9px;
  color: var(--t3);
  vertical-align: top;
}
.hl span {
  display: flex;
  align-items: center;
  height: 11px;
}
.hm {
  display: flex;
  gap: 2px;
  font-size: 9px;
  color: var(--t3);
  margin-bottom: 3px;
  margin-left: 22px;
}
.hlg {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--t3);
  margin-top: 8px;
  justify-content: flex-end;
}
.hlg .lc {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.ht {
  position: fixed;
  background: var(--tp);
  color: var(--tc);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  pointer-events: none;
  z-index: 2000;
  display: none;
  max-width: 220px;
  line-height: 1.4;
  box-shadow: var(--shadow2);
}
.ht .td {
  font-weight: 600;
}
.ht .tn {
  opacity: 0.85;
  margin-top: 1px;
}
.ht .ts {
  opacity: 0.7;
  font-size: 11px;
  margin-top: 1px;
}

.cag {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cah {
  text-align: center;
  font-size: 11px;
  font-weight: 550;
  color: var(--t3);
  padding: 8px 0;
}
.cac {
  aspect-ratio: 1;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--t2);
  cursor: pointer;
  transition: all var(--t);
  min-height: 40px;
}
.cac:hover {
  background: var(--sh);
}
.cac.td2 {
  background: var(--as);
  color: var(--tx);
  font-weight: 650;
}
.cac.em {
  cursor: default;
}
.cac.em:hover {
  background: transparent;
}
.cad {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}
.cad2 {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
.cad2.g {
  background: var(--ok);
}
.cad2.o {
  background: var(--wn);
}
.cad2.r {
  background: var(--ng);
}

/* Study + Recall overlays */
.so {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 500;
  overflow-y: auto;
}
.so.open {
  display: block;
}
.soc {
  width: 90%;
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 24px;
}
.so.focus-active .soc {
  max-width: 1100px;
}
@media (min-width: 1400px) {
  .soc {
    max-width: 1080px;
  }
}
@media (min-width: 1800px) {
  .soc {
    max-width: 1280px;
  }
}
.study-content {
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 20px;
  background: var(--sf);
}
.study-content .note-card {
  margin-bottom: 12px;
}
.study-content .fc-container {
  margin-bottom: 16px;
}
.study-content .code-container {
  margin-bottom: 12px;
}
.study-content .fb-card {
  margin-bottom: 12px;
}
.study-content .link-card {
  margin-bottom: 8px;
}
.ws-timer {
  transition: all var(--t);
}
.ws-timer .bk:disabled {
  cursor: not-allowed;
}
.stc {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 32px;
  text-align: center;
  box-shadow: var(--shadow2);
}
.ssn {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.ssp {
  font-size: 14px;
  color: var(--t2);
  margin-bottom: 20px;
}
.ip {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: var(--bd);
}
.ip.dn {
  background: var(--ok);
}
.ip.cu {
  background: var(--tx);
}
.sa2 {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.td3 {
  font-size: 42px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--tx);
  margin: 12px 0;
  letter-spacing: 2px;
}
.tc2 {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}
.tr {
  width: 100px;
  height: 100px;
  margin: 12px auto;
}
.tr circle {
  fill: none;
  stroke-width: 5;
}
.tr .bg3 {
  stroke: var(--bd);
}
.tr .fg2 {
  stroke: var(--tx);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
  transform: rotate(-90deg);
  transform-origin: center;
}
.cr2 {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 12px 0;
}
.cb3 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--bm);
  background: var(--sf);
  color: var(--tx);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--t);
}
.cb3:hover,
.cb3.sel {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
}

.tc {
  position: fixed;
  bottom: 20px;
  right: 80px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.to {
  background: var(--tp);
  color: var(--tc);
  border-radius: var(--r);
  padding: 10px 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: si 0.2s ease;
  max-width: 320px;
  font-weight: 500;
}
@keyframes si {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--mono);
  background: var(--bg2);
  border: 1px solid var(--bm);
  border-radius: 4px;
  color: var(--t2);
}
.qc {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 90;
}
.qc button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tx);
  color: var(--bg);
  border: none;
  font-size: 20px;
  box-shadow: var(--shadow2);
  transition: all var(--t);
}
.qc button:hover {
  transform: scale(1.05);
}
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}
@media (max-width: 600px) {
  .cg {
    grid-template-columns: 1fr 1fr;
  }
  .fr {
    grid-template-columns: 1fr;
  }
  .sa2 {
    flex-direction: column;
  }
  .sg {
    grid-template-columns: 1fr 1fr;
  }
  .ph h2 {
    font-size: 22px;
  }
  .fc-text {
    font-size: 15px;
  }
}

/* Mermaid diagrams */
.mermaid-block {
  background: var(--bg2);
  padding: 16px;
  border-radius: var(--r2);
  margin: 12px 0;
  text-align: center;
  border: 1px solid var(--bd);
}
.mermaid-block svg {
  max-width: 100%;
}
/* Reference cards */
.ref-card {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 16px 20px;
  margin: 12px 0;
}
.ref-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bd);
}
.ref-card p {
  font-size: 13px;
  margin: 4px 0;
  line-height: 1.6;
}

/* === NOTION-STYLE DOCUMENT === */
.notion-doc {
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  background: var(--sf);
  overflow: visible;
}
.notion-doc .wysiwyg-editor {
  min-height: 300px;
  padding: 24px 28px;
}
.notion-doc .ie-toolbar-row {
  position: sticky;
  top: 0;
  z-index: 10;
}
.notion-doc .ie-toolbar-row button {
  padding: 5px 8px;
  font-size: 12px;
  border-radius: 4px;
  font-weight: 500;
}
.notion-doc .ie-toolbar-row button:hover {
  background: var(--sh);
}

/* Flashcard text left-aligned */
.fc-text {
  text-align: left;
}

/* Code in notes - proper styling */
.wysiwyg-editor code,
.note-content code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--tg);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--tx);
}
.wysiwyg-editor pre,
.note-content pre {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 12px 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
}
.wysiwyg-editor pre code,
.note-content pre code {
  background: none;
  color: #d4d4d4;
  padding: 0;
}

/* Tables in notes - theme aware */
.wysiwyg-editor table,
.note-content table,
.note-content .md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}
.wysiwyg-editor th,
.note-content th,
.note-content .md-table th {
  background: var(--bg2);
  padding: 8px 12px;
  border: 1px solid var(--bd);
  font-weight: 600;
  text-align: left;
  color: var(--tx);
}
.wysiwyg-editor td,
.note-content td,
.note-content .md-table td {
  padding: 8px 12px;
  border: 1px solid var(--bd);
  color: var(--tx);
}

/* Table action buttons */
.wys-table-wrap {
  margin: 12px 0;
  position: relative;
}
.wys-table-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 0;
}
.wys-table-actions button {
  background: var(--bg2);
  border: 1px solid var(--bd);
  color: var(--t2);
  padding: 4px 12px;
  border-radius: 5px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--t);
  font-weight: 500;
}
.wys-table-actions button:hover {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
}

/* Blockquotes in notes */
.wysiwyg-editor blockquote,
.note-content blockquote {
  border-left: 3px solid var(--bm);
  padding-left: 16px;
  color: var(--t2);
  margin: 12px 0;
  font-style: italic;
}

/* Reference cards theme-aware */
.ref-card {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 16px 20px;
  margin: 12px 0;
  color: var(--tx);
}
.ref-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bd);
  color: var(--tx);
}
.ref-card p {
  font-size: 13px;
  margin: 4px 0;
  line-height: 1.6;
  color: var(--t2);
}
.ref-card table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
}
.ref-card th,
.ref-card td {
  padding: 6px 10px;
  border: 1px solid var(--bd);
  font-size: 12px;
}
.ref-card th {
  background: var(--bg);
  font-weight: 600;
}

/* Toolbar styling improvements */
.ie-toolbar-row {
  padding: 6px 12px;
  gap: 3px;
}
.ie-toolbar-row button {
  padding: 5px 9px;
  font-size: 12px;
  border-radius: 5px;
  font-weight: 500;
  min-width: 28px;
  text-align: center;
}

/* Styled modals for f(x) and Diagram */
.wys-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fi 0.15s ease;
}
.wys-modal-content {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 20px 24px;
  max-width: 480px;
  width: 90%;
  box-shadow: var(--shadow2);
}
.wys-modal-header {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--tx);
}

/* Todo items */
.todo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
}
.todo-item .todo-cb {
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}
.todo-item .todo-cb.done::before {
  content: "☑";
}
.todo-item .todo-cb:not(.done)::before {
  content: "☐";
}
.todo-item.done > span:last-child {
  text-decoration: line-through;
  color: var(--t3);
}
.todo-item .todo-cb {
  font-size: 0;
}
.todo-item .todo-cb::before {
  font-size: 16px;
}

/* Code blocks in notes */
.wysiwyg-editor pre {
  position: relative;
}
.wysiwyg-editor pre code {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

/* === MINIMALIST TOOLBAR === */
.tb-dropdown {
  position: relative;
  display: inline-block;
}
.tb-drop-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 12px;
  box-shadow: var(--shadow2);
  z-index: 100;
  min-width: 180px;
}
.tb-drop-menu.show {
  display: block;
}
.tb-drop-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border: none;
  background: none;
  color: var(--tx);
  cursor: pointer;
  border-radius: 4px;
  font-family: var(--font);
  font-size: 13px;
}
.tb-drop-menu button:hover {
  background: var(--sh);
}
.tb-drop-wide {
  min-width: 260px;
}
.tb-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 8px 0 4px;
  padding-top: 8px;
  border-top: 1px solid var(--bd);
}
.tb-section-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.tb-color-row {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.tb-color-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--bd);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: transform 0.1s;
}
.tb-color-btn:hover {
  transform: scale(1.15);
}
.tb-x {
  font-size: 10px;
  background: var(--bg2);
}
.tb-insert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.tb-insert-grid button {
  font-size: 12px;
  padding: 8px 6px;
}

/* === FOLDERS === */
.folder-group {
  margin-bottom: 8px;
}
.folder-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--t2);
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r);
  transition: background var(--t);
}
.folder-header:hover {
  background: var(--sh);
}
.folder-arrow {
  transition: transform 0.2s;
  font-size: 10px;
}
.folder-group.collapsed .folder-arrow {
  transform: rotate(-90deg);
}
.folder-group.collapsed .folder-items {
  display: none;
}

/* === TODO ITEMS (improved) === */
.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.6;
}
.todo-item .todo-cb {
  cursor: pointer;
  font-size: 18px;
  user-select: none;
  flex-shrink: 0;
  margin-top: 1px;
}
.todo-item.done {
  color: var(--t3);
}
.todo-item.done > :not(.todo-cb) {
  text-decoration: line-through;
}

/* === TOGGLE LIST light mode fix === */
.md-collapse-body {
  color: var(--tx);
}
.md-collapse summary {
  color: var(--tx);
}

/* Todo checkbox - clean single checkbox */
.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 0;
  font-size: 14px;
  cursor: text;
}
.todo-item .todo-check {
  margin-top: 3px;
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--ok);
}
.todo-item.done {
  color: var(--t3);
  text-decoration: line-through;
}

/* Workspace button alignment */
.ws-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ws-actions .bt {
  min-width: 100px;
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
}
.ws-actions .tb-dropdown .bt {
  min-width: 70px;
}

/* Active recall topic picker - minimal cards */
.rc-topic {
  padding: 10px 14px;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rc-topic:hover {
  border-color: var(--bm);
  background: var(--bg2);
}
.rc-topic.selected {
  border-color: var(--tx);
  background: rgba(var(--tx-rgb, 0, 0, 0), 0.05);
  box-shadow: 0 0 0 1px var(--tx);
}

/* === INTERACTIVE STUDY TEMPLATES === */
.template-container {
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  margin: 16px 0;
  background: var(--sf);
  user-select: none;
}
.template-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bd);
  font-size: 13px;
}
.template-svg {
  position: relative;
}
.template-svg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.template-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.template-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: auto;
}
.hs-label {
  display: inline-block;
  font-size: 11px;
  background: var(--sf);
  border: 1px solid var(--bd);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  font-family: var(--font);
  color: var(--tx);
  line-height: 1.3;
}
.hs-label:hover {
  border-color: var(--tx);
  background: var(--bg2);
}
.hs-input {
  font-size: 11px;
  border: 1px solid var(--bd);
  padding: 3px 6px;
  border-radius: 4px;
  text-align: center;
  font-family: var(--font);
  background: var(--sf);
  color: var(--tx);
  width: 70px;
}
.hs-input:focus {
  border-color: var(--tx);
  outline: none;
}

/* === STUDY SESSION NOTES SCROLL/EXPAND === */
.session-notes {
  max-height: 400px;
  overflow-y: auto;
  transition: max-height 0.2s ease;
}
.session-notes.expanded {
  max-height: none;
  overflow-y: visible;
}

/* === ENHANCED FOCUS MODE === */
.so.focus-active {
  background: var(--bg);
}
body.focus-lock {
  overflow: hidden;
}
.focus-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--tx);
  color: var(--bg);
  padding: 8px 16px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
}
.focus-banner button {
  background: var(--bg);
  color: var(--tx);
  border: none;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
}

/* === AI GENERATION PROGRESS BAR === */
.gen-progress-wrap {
  padding: 16px 0;
}
.gen-progress-track {
  width: 100%;
  height: 8px;
  background: var(--bg2);
  border-radius: 99px;
  overflow: hidden;
}
.gen-progress-bar {
  height: 100%;
  background: var(--tx);
  border-radius: 99px;
  transition: width 0.3s ease;
  width: 0%;
}

/* === AI USAGE METER === */
.usage-meter-track {
  width: 100%;
  height: 10px;
  background: var(--bg2);
  border-radius: 99px;
  overflow: hidden;
  margin: 8px 0;
}
.usage-meter-bar {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}
.ai-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--bd);
}

/* === TOGGLE SWITCH === */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--bd);
  border-radius: 24px;
  transition: 0.2s;
}
.switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
.switch input:checked + .switch-slider {
  background: var(--tx);
}
.switch input:checked + .switch-slider:before {
  transform: translateX(20px);
}

/* === FILL-BLANK PEEK === */
.fb-blank-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.fb-peek {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  opacity: 0.4;
  padding: 0 2px;
}
.fb-peek:hover {
  opacity: 1;
}

/* Session notes use more width on large screens */
.session-notes.note-content {
  max-width: 100%;
}
@media (min-width: 1400px) {
  .study-content {
    padding: 28px;
  }
}

/* === QUIZ TYPE SELECTION CHIPS === */
.qz-chip {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--bd);
  background: var(--sf);
  color: var(--t2);
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
}
.qz-chip:hover {
  border-color: var(--bs);
  color: var(--tx);
}
.qz-chip.selected {
  background: var(--tx);
  border-color: var(--tx);
  color: var(--bg);
  font-weight: 600;
}
.qz-chip.selected:hover {
  opacity: 0.88;
  color: var(--bg);
}

/* === MATERIAL INLINE WORKSPACE (preview + chat split) === */
.mat-workspace {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.mat-preview {
  flex: 1 1 55%;
  min-width: 0;
}
.mat-chat {
  flex: 1 1 45%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mat-chat-log {
  max-height: 44vh;
  overflow-y: auto;
  background: var(--bg2);
  border-radius: 8px;
  padding: 8px;
}
@media (max-width: 820px) {
  .mat-workspace {
    flex-direction: column;
  }
  .mat-preview,
  .mat-chat {
    flex: 1 1 auto;
    width: 100%;
  }
}
/* dual range slider */
.dual-slider {
  position: relative;
  height: 24px;
}
.dual-slider input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.dual-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--bd);
  border-radius: 2px;
}
.dual-slider input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--bd);
  border-radius: 2px;
}
.dual-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tx);
  cursor: pointer;
  margin-top: -6px;
  border: 2px solid var(--bg);
}
.dual-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tx);
  cursor: pointer;
  border: 2px solid var(--bg);
}

/* === MATERIAL OPEN PANEL (separate block below list) === */
.mat-row-active {
  border-color: var(--tx) !important;
  box-shadow: 0 0 0 1px var(--tx);
}
.mat-open-panel {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 16px;
  margin-top: 6px;
}
.mat-open-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bd);
}
.mat-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--bg2);
  border-radius: 10px;
  margin-bottom: 8px;
}
.mat-gen-bar {
  padding: 8px 10px;
  background: var(--bg2);
  border-radius: 10px;
  margin-bottom: 10px;
}
.mat-doc-view {
  background: var(--bg2);
  border-radius: 10px;
  padding: 12px;
  max-height: 72vh;
  overflow: auto;
}
.mat-hl {
  background: #ffe066;
  color: #1a1a1a;
  border-radius: 2px;
  padding: 0 1px;
}
.mat-pg-flash {
  animation: matFlash 1.4s ease;
}
@keyframes matFlash {
  0% {
    background: rgba(255, 224, 102, 0.5);
  }
  100% {
    background: transparent;
  }
}
/* dual range slider */
.dual-slider {
  position: relative;
  height: 24px;
}
.dual-slider input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.dual-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--bd);
  border-radius: 2px;
}
.dual-slider input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--bd);
  border-radius: 2px;
}
.dual-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--tx);
  cursor: pointer;
  margin-top: -6px;
  border: 2px solid var(--sf);
}
.dual-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--tx);
  cursor: pointer;
  border: 2px solid var(--sf);
}
/* === MINIMALIST FLOATING CHAT === */
.mat-chat-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.mat-chat-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sf);
  color: var(--tx);
  border: 1px solid var(--bd);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.16s;
  padding: 0;
}
.mat-chat-btn:hover {
  border-color: var(--tx);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}
.mat-chat-btn.open {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
}
.mat-chat-btn svg {
  display: block;
}
.mat-chat-window {
  width: 480px;
  max-width: calc(100vw - 44px);
  height: 560px;
  max-height: 76vh;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 18px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: horizontal;
}
.mat-chat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--bd);
}
.mat-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
}
.mat-chat-input {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  border-top: 1px solid var(--bd);
}
@media (max-width: 600px) {
  .mat-chat-window {
    width: calc(100vw - 44px);
  }
}

/* === RESPONSIVE FIXES — prevent detail content from being cut off === */
.mc {
  box-sizing: border-box;
  overflow-x: hidden;
}
.vw {
  max-width: 100%;
  box-sizing: border-box;
}
.tab-content {
  max-width: 100%;
  overflow-x: hidden;
}
/* code blocks scroll internally instead of overflowing the page */
.code-container {
  max-width: 100%;
  overflow: hidden;
}
.code-body {
  overflow-x: auto;
}
.code-body pre {
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
}
/* notes/cards wrap long content */
.note-card,
.fc-container,
.fb-card,
.card-flat {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.note-content {
  max-width: 100%;
}
/* generic: any pre/table inside detail scrolls rather than overflows */
.tab-content pre,
.tab-content table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* === MIC IN TEXTAREA: corner button + inline wave (lower box) + in-box transcribing === */
.mic-ta-wrap {
  position: relative;
  width: 100%;
}
.mic-ta {
  width: 100%;
  box-sizing: border-box;
  padding-right: 46px !important;
  padding-bottom: 14px !important;
}
/* mic button — fixed in the lower-right corner, never moves */
.mic-in-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--bm);
  background: var(--sf);
  color: var(--t2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  z-index: 3;
}
.mic-in-btn:hover {
  border-color: var(--tx);
  color: var(--tx);
}
.mic-in-btn.rec {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
  animation: micRecPulse 1.6s ease infinite;
}
@keyframes micRecPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.18);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
  }
}
.mic-in-btn svg {
  display: block;
}
/* waveform: compact strip in the LOWER portion of the box, immediately left of the mic */
.mic-wave-inline {
  position: absolute;
  right: 50px;
  bottom: 12px;
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 2px;
  height: 20px;
  max-width: calc(100% - 70px);
  z-index: 2;
  pointer-events: none;
}
.mic-ta-wrap.recording .mic-wave-inline {
  display: flex;
}
.mic-wave-inline i {
  flex: 0 0 auto;
  width: 2.5px;
  height: 2px;
  border-radius: 2px;
  background: var(--tx);
  opacity: 0.8;
  transition: height 0.07s ease;
}
/* "Transcribing…" — shown INSIDE the box, lower-left, so it can't be missed */
.mic-transcribing {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: none;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--t2);
  background: var(--sf);
  padding: 3px 10px 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--bd);
  z-index: 2;
}
.mic-transcribing.show {
  display: inline-flex;
}
.mic-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.mic-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tx);
  opacity: 0.4;
  animation: micDot 1.1s infinite ease-in-out;
}
.mic-dots i:nth-child(2) {
  animation-delay: 0.16s;
}
.mic-dots i:nth-child(3) {
  animation-delay: 0.32s;
}
@keyframes micDot {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
@media (max-width: 600px) {
  .mic-wave-inline {
    right: 46px;
    max-width: calc(100% - 62px);
  }
  .mic-wave-inline i {
    width: 2px;
  }
}

/* === ZOOM CONTROL (document toolbar) === */
.zoom-ctl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: 2px;
}
.zoom-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--t2);
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  padding: 0;
}
.zoom-btn:hover {
  background: var(--bg2);
  color: var(--tx);
}
.zoom-lvl {
  border: none;
  background: none;
  color: var(--t2);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 0 6px;
  min-width: 40px;
  border-radius: 12px;
  transition: all 0.12s;
}
.zoom-lvl:hover {
  background: var(--bg2);
  color: var(--tx);
}

/* === TAB BAR: single clean scrollable row (never wraps into two bars) === */
.tab-bar {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.tab-bar::-webkit-scrollbar {
  display: none;
}
.tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .tab-btn {
    padding: 7px 11px;
    font-size: 12px;
  }
  .tab-btn .tab-count {
    margin-left: 3px;
  }
}
@media (max-width: 600px) {
  .tab-btn {
    padding: 6px 9px;
    font-size: 12px;
  }
}

/* === SIDEBAR SEARCH === */
.side-search {
  padding: 4px 8px 10px;
  position: relative;
}
.side-search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg2);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 8px;
  transition: all 0.15s;
}
.side-search-box:focus-within {
  border-color: var(--bm);
  background: var(--sf);
}
.side-search-ic {
  color: var(--t4);
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.side-search-box input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-size: 12.5px;
  color: var(--tx);
  font-family: inherit;
}
.side-search-box input::placeholder {
  color: var(--t4);
}
.side-search-x {
  border: none;
  background: none;
  color: var(--t4);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
}
.side-search-x:hover {
  color: var(--tx);
}
.side-search-results {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 100%;
  margin-top: 2px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
  padding: 5px;
  z-index: 120;
  max-height: 340px;
  overflow-y: auto;
}
.ssr-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t4);
  padding: 6px 8px 3px;
}
.ssr-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--t2);
  transition: background 0.1s;
}
.ssr-item:hover,
.ssr-item.sel {
  background: var(--bg2);
  color: var(--tx);
}
.ssr-ic {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--t4);
  width: 14px;
  text-align: center;
}
.ssr-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ssr-sub {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--t4);
}
.ssr-empty {
  font-size: 12px;
  color: var(--t4);
  padding: 12px 8px;
  text-align: center;
}
/* hide search when sidebar is collapsed */
.side.collapsed .side-search {
  display: none !important;
}

/* PDF viewer is a FIXED-height scrollable pane — zooming changes the content
   inside it, never the container, so the surrounding page cannot move. */
.mat-doc-view.pdf {
  height: 72vh;
  max-height: 72vh;
  overflow: auto;
  overscroll-behavior: contain;
}

/* === SAVE-TO-NOTES ACTION ON CHAT ANSWERS === */
.msg-acts {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.msg-act {
  border: 1px solid var(--bd);
  background: var(--sf);
  color: var(--t3);
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.13s;
  font-family: inherit;
}
.msg-act:hover:not(:disabled) {
  border-color: var(--tx);
  color: var(--tx);
}
.msg-act.done {
  color: var(--ok);
  border-color: var(--ok);
  cursor: default;
  opacity: 0.85;
}

/* ===== ANNOTATION: TEXT LAYER + HIGHLIGHTS ===== */
/* invisible, precisely-positioned text over each page picture — this is what
   makes PDF text genuinely selectable (same technique Adobe/RemNote use) */
.pdf-page {
  position: relative;
  overflow: hidden;
}
.pdf-text-layer {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  line-height: 1;
  z-index: 3;
  opacity: 1;
  pointer-events: none;
}
.pdf-text-layer span {
  position: absolute;
  white-space: pre;
  cursor: text;
  color: transparent;
  transform-origin: 0 0;
  pointer-events: auto;
}
.pdf-text-layer ::selection {
  background: rgba(90, 150, 255, 0.35);
}
.pdf-text-layer ::-moz-selection {
  background: rgba(90, 150, 255, 0.35);
}
/* highlight rects sit under the text layer, above the page picture.
   Colours are TRANSLUCENT so the page text stays fully readable — an opaque
   fill (or a blend-mode inside its own stacking context) hides the words. */
.pdf-hl-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.pdf-hl {
  position: absolute;
  border-radius: 2px;
  pointer-events: auto;
  cursor: pointer;
  transition: filter 0.12s;
}
.pdf-hl:hover {
  filter: brightness(0.93);
}
.pdf-hl.has-note {
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}
.pdf-hl.note-tip::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tx);
  box-shadow: 0 0 0 1.5px var(--sf);
}
/* text-doc highlights */
.txt-hl {
  border-radius: 2px;
  padding: 0 1px;
  cursor: pointer;
  color: inherit;
}
.txt-hl.has-note {
  border-bottom: 2px solid rgba(0, 0, 0, 0.45);
}
/* floating highlight popup */
.hl-popup {
  position: absolute;
  z-index: 1400;
  display: none;
  flex-direction: column;
  gap: 6px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 7px 9px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  max-width: 300px;
}
.hl-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.hl-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s;
}
.hl-swatch:hover {
  transform: scale(1.15);
}
.hl-swatch.on {
  border-color: var(--tx);
  border-width: 2px;
}
.hl-sep {
  width: 1px;
  height: 16px;
  background: var(--bd);
  margin: 0 2px;
}
.hl-act {
  border: none;
  background: none;
  color: var(--t2);
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.hl-act:hover {
  background: var(--bg2);
  color: var(--tx);
}
.hl-act.del:hover {
  background: rgba(220, 80, 80, 0.12);
  color: #d9534f;
}
.hl-act.save {
  background: var(--tx);
  color: var(--bg);
}
.hl-act.save:hover {
  opacity: 0.88;
  background: var(--tx);
  color: var(--bg);
}
/* note editor / reader inside the popup */
.hl-popup.note-mode {
  width: 280px;
}
.hl-note-quote {
  font-size: 11px;
  color: var(--t3);
  font-style: italic;
  border-left: 2px solid var(--bm);
  padding-left: 7px;
  line-height: 1.4;
}
.hl-note-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  resize: vertical;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--tx);
  font-family: inherit;
  font-size: 12.5px;
  padding: 7px 9px;
  line-height: 1.5;
  outline: none;
}
.hl-note-input:focus {
  border-color: var(--bm);
}
.hl-note-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hl-note-read {
  font-size: 12.5px;
  color: var(--tx);
  line-height: 1.5;
  background: var(--bg2);
  border-radius: 8px;
  padding: 7px 9px;
  white-space: pre-wrap;
  max-height: 140px;
  overflow-y: auto;
}

/* ===== HIGHLIGHTS & NOTES PANEL (F-b) ===== */
.hl-panel {
  background: var(--bg2);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.hl-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--bd);
}
.hl-panel-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t2);
}
.hl-panel-empty {
  padding: 18px 14px;
  font-size: 12px;
  color: var(--t3);
  text-align: center;
  line-height: 1.5;
}
.hl-panel-list {
  max-height: 230px;
  overflow-y: auto;
  padding: 6px;
}
.hl-entry {
  display: flex;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  transition: background 0.1s;
}
.hl-entry:hover {
  background: var(--sf);
}
.hl-entry + .hl-entry {
  border-top: 1px solid var(--bd);
}
.hl-entry-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.hl-entry-body {
  flex: 1;
  min-width: 0;
}
.hl-entry-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t2);
  cursor: pointer;
}
.hl-entry-text:hover {
  color: var(--tx);
}
.hl-entry-note {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tx);
  background: var(--sf);
  border-left: 2px solid var(--bm);
  border-radius: 0 6px 6px 0;
  padding: 5px 8px;
  white-space: pre-wrap;
}
.hl-entry-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.hl-entry-pg {
  font-size: 10px;
  color: var(--t4);
  text-transform: capitalize;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--sf);
}
.hl-entry-pg:hover {
  color: var(--tx);
}
.hl-mini {
  border: none;
  background: none;
  color: var(--t4);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
}
.hl-mini:hover {
  background: var(--sf);
  color: var(--tx);
}
.hl-mini.del:hover {
  background: rgba(220, 80, 80, 0.12);
  color: #d9534f;
}
/* pulse a highlight when you jump to it */
.hl-pulse {
  animation: hlPulse 1.3s ease;
}
@keyframes hlPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  30% {
    box-shadow: 0 0 0 4px rgba(255, 180, 0, 0.55);
  }
}

/* ===== DOCUMENT LIBRARY (Build D) ===== */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.doc-card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.doc-card:hover {
  border-color: var(--bm);
}
.doc-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.doc-name {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-meta {
  font-size: 11px;
  color: var(--t3);
  margin-top: 2px;
}
.doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  background: var(--bg2);
  color: var(--t2);
  padding: 3px 4px 3px 9px;
  border-radius: 12px;
}
.doc-chip.unlinked {
  color: var(--t4);
  font-style: italic;
  padding: 3px 9px;
}
.doc-chip-x {
  border: none;
  background: none;
  color: var(--t4);
  cursor: pointer;
  font-size: 9px;
  padding: 0 3px;
  border-radius: 50%;
  line-height: 1;
}
.doc-chip-x:hover {
  color: #d9534f;
  background: rgba(220, 80, 80, 0.12);
}
.doc-acts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}
/* link picker */
.link-pick {
  background: var(--bg2);
  border-radius: 10px;
  padding: 9px 10px;
  margin-top: 8px;
}
.link-pick-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t4);
  margin: 2px 0 6px;
}
.link-pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
  max-height: 150px;
  overflow-y: auto;
}
.link-opt {
  border: 1px solid var(--bd);
  background: var(--sf);
  color: var(--t2);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.link-opt:hover {
  border-color: var(--tx);
  color: var(--tx);
}
.link-opt.folder {
  background: var(--bg2);
}

/* ===== AI EXPLAIN (Phase 2a) ===== */
.hl-popup {
  min-width: auto;
}
.hl-ai-row {
  border-top: 1px solid var(--bd);
  padding-top: 6px;
  margin-top: 1px;
  gap: 3px;
}
.hl-act.ai {
  font-size: 11px;
  padding: 3.5px 8px;
  color: var(--t2);
  border-radius: 12px;
}
.hl-act.ai:hover {
  background: var(--tx);
  color: var(--bg);
}
.hl-act.ai:first-child {
  font-weight: 500;
}

/* ===== FIGURE SELECT (Phase 2b) ===== */
/* while figure mode is on, the text layer must stop eating pointer events
   so the drag lands on the page instead of starting a text selection */
.fig-mode .pdf-text-layer,
.fig-mode .pdf-text-layer span {
  pointer-events: none !important;
}
.fig-mode .pdf-page,
.fig-mode img {
  cursor: crosshair;
}
.fig-mode {
  user-select: none;
}
.fig-box {
  position: absolute;
  z-index: 1500;
  display: none;
  border: 2px dashed var(--tx);
  background: rgba(120, 170, 255, 0.16);
  border-radius: 3px;
  pointer-events: none;
}
.chat-fig {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: block;
}

/* Figure button when it isn't configured yet — visible but clearly not ready */
.bt.needs-setup {
  opacity: 0.6;
  border-style: dashed;
}
.bt.needs-setup:hover {
  opacity: 1;
}
.fig-help {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0;
}
.fig-help ul {
  list-style: disc;
}
.fig-help b {
  color: var(--tx);
}

/* wider chat: explanations and figure crops need the room */
@media (max-width: 640px) {
  .mat-chat-window {
    width: calc(100vw - 44px);
  }
}

/* ===== COURSES (Phase 1a) ===== */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.course-card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.14s;
}
.course-card:hover {
  border-color: var(--crs);
}
.course-bar {
  height: 4px;
  background: var(--crs);
}
.course-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.course-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.course-sub {
  font-size: 11.5px;
  color: var(--t3);
  margin-top: 2px;
}
.course-desc {
  font-size: 12px;
  color: var(--t3);
  line-height: 1.45;
}
.course-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--t3);
}
.course-stats b {
  color: var(--tx);
  font-weight: 600;
}
.course-due b {
  color: var(--wn);
}
.course-acts {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 2px;
}
.crs-colors {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.crs-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s;
}
.crs-swatch:hover {
  transform: scale(1.12);
}
.crs-swatch.on {
  border-color: var(--tx);
  box-shadow: 0 0 0 2px var(--sf) inset;
}
/* generic modal (used by the course editor) */
.modal-ov {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-ov .modal {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 22px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
}

/* ===== COURSEWORK: ASSIGNMENTS & EXAMS (Phase 1b) ===== */
.cw-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t3);
  margin: 0 0 10px;
}
.cw-empty {
  padding: 22px;
  text-align: center;
  color: var(--t3);
  font-size: 12.5px;
  background: var(--bg2);
  border-radius: 10px;
}
.cw-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.cw-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--bd);
  background: var(--sf);
  color: var(--t2);
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
}
.cw-chip:hover {
  border-color: var(--tx);
  color: var(--tx);
}
.cw-chip.on {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
}
.cw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.cw-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cw-item {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--crs);
  border-radius: 10px;
  padding: 11px 13px;
}
.cw-item:hover {
  border-color: var(--bm);
  border-left-color: var(--crs);
}
.cw-item.done {
  opacity: 0.5;
}
.cw-item.overdue {
  border-color: rgba(217, 83, 79, 0.4);
}
.cw-item.exam.urgent {
  border-color: rgba(217, 83, 79, 0.45);
  background: rgba(217, 83, 79, 0.04);
}
.cw-item.past {
  opacity: 0.5;
}
.cw-body {
  flex: 1;
  min-width: 0;
}
.cw-title {
  font-size: 13.5px;
  font-weight: 600;
}
.cw-item.done .cw-title {
  text-decoration: line-through;
}
.cw-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--t3);
  margin-top: 3px;
}
.cw-course {
  background: var(--bg2);
  padding: 1px 7px;
  border-radius: 10px;
}
.cw-over {
  color: #d9534f;
  font-weight: 600;
}
.cw-pri {
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.cw-pri.high {
  background: rgba(217, 83, 79, 0.14);
  color: #d9534f;
}
.cw-pri.low {
  background: var(--bg2);
  color: var(--t4);
}
.cw-prog {
  color: var(--wn);
}
.cw-notes {
  font-size: 11.5px;
  color: var(--t3);
  margin-top: 4px;
  line-height: 1.4;
}
.cw-acts {
  display: flex;
  gap: 4px;
  align-items: center;
}
.cw-check {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--bd);
  background: none;
  cursor: pointer;
  color: var(--bg);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.13s;
}
.cw-check:hover {
  border-color: var(--tx);
}
.cw-check.on {
  background: var(--ok);
  border-color: var(--ok);
}
.cw-count {
  flex: 0 0 auto;
  min-width: 56px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
  background: var(--bg2);
  border-radius: 8px;
  padding: 6px 4px;
  line-height: 1.2;
}
.cw-count.urgent {
  background: rgba(217, 83, 79, 0.13);
  color: #d9534f;
}
.cw-count.past {
  opacity: 0.6;
}
.cw-done {
  margin-top: 6px;
}
.cw-done summary {
  font-size: 11.5px;
  color: var(--t3);
  cursor: pointer;
  padding: 6px 2px;
}
.ex-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 140px;
  overflow-y: auto;
  background: var(--bg2);
  border-radius: 8px;
  padding: 8px;
}
.ex-topic {
  border: 1px solid var(--bd);
  background: var(--sf);
  color: var(--t2);
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
}
.ex-topic:hover {
  border-color: var(--tx);
}
.ex-topic.on {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
}
/* calendar */
.cad2.ex {
  background: #d9534f;
}
.cad2.as {
  background: #3d5a80;
}
.cac.has-ev {
  font-weight: 600;
}
.cal-cw {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.cal-cw-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--crs);
  border-radius: 8px;
  padding: 8px 11px;
}
.cal-cw-row.done {
  opacity: 0.5;
}
.cal-cw-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg2);
  color: var(--t3);
  padding: 2px 6px;
  border-radius: 6px;
}
.cal-cw-tag.exam {
  background: rgba(217, 83, 79, 0.14);
  color: #d9534f;
}
.cal-cw-row b {
  flex: 1;
  min-width: 0;
}
/* dashboard strip */
.dash-cw {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.dash-cw-col {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 13px;
}
.dash-cw-h {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dash-over {
  color: #d9534f;
  text-transform: none;
  letter-spacing: 0;
}
.dash-exam {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  border-left: 3px solid var(--crs);
}
.dash-exam:hover {
  background: var(--bg2);
}
.dash-exam-d {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.dash-exam-d span {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: var(--t3);
  text-transform: uppercase;
  margin-top: 1px;
}
.dash-exam.urgent .dash-exam-d {
  color: #d9534f;
}
.dash-exam-n {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-exam-c {
  font-size: 10.5px;
  color: var(--t3);
}
.dash-asg {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.dash-asg:hover {
  background: var(--bg2);
}
.dash-asg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.dash-asg-t {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-asg-d {
  font-size: 10.5px;
  color: var(--t3);
  flex: 0 0 auto;
}
.dash-asg.overdue .dash-asg-d {
  color: #d9534f;
  font-weight: 600;
}
.dash-prog {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-size: 10.5px;
  color: var(--t3);
}
.dash-prog-bar {
  flex: 1;
  height: 5px;
  background: var(--bg2);
  border-radius: 3px;
  overflow: hidden;
}
.dash-prog-bar div {
  height: 100%;
  background: var(--ok);
  border-radius: 3px;
}

/* ===== TODAY / STUDY PLANNER (Phase 4) ===== */
.budget-pick {
  display: flex;
  gap: 3px;
  background: var(--bg2);
  border-radius: 18px;
  padding: 3px;
}
.bud-btn {
  border: none;
  background: none;
  color: var(--t3);
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.bud-btn:hover {
  color: var(--tx);
}
.bud-btn.on {
  background: var(--sf);
  color: var(--tx);
  font-weight: 600;
  box-shadow: var(--shadow);
}
.plan-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--t2);
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.plan-head b {
  color: var(--tx);
}
.plan-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.plan-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--crs);
  border-radius: 11px;
  padding: 13px 15px;
}
.plan-item:hover {
  border-color: var(--bm);
  border-left-color: var(--crs);
}
.plan-item.urgent {
  background: rgba(217, 83, 79, 0.035);
  border-color: rgba(217, 83, 79, 0.28);
}
.plan-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg2);
  color: var(--t3);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.plan-item.urgent .plan-num {
  background: #d9534f;
  color: #fff;
}
.plan-body {
  flex: 1;
  min-width: 0;
}
.plan-title {
  font-size: 14px;
  font-weight: 600;
}
.plan-course {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--t3);
  background: var(--bg2);
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 5px;
  vertical-align: middle;
}
.plan-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.plan-reason {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--bg2);
  color: var(--t3);
}
.plan-reason.overdue,
.plan-reason.late {
  background: rgba(217, 83, 79, 0.14);
  color: #d9534f;
  font-weight: 600;
}
.plan-reason.exam {
  background: rgba(217, 83, 79, 0.1);
  color: #c9302c;
  font-weight: 600;
}
.plan-reason.due {
  background: rgba(212, 150, 40, 0.14);
  color: var(--wn);
}
.plan-reason.weak {
  background: rgba(120, 120, 200, 0.12);
  color: var(--t2);
}
.plan-reason.new {
  background: var(--bg2);
  color: var(--t2);
}
.plan-why {
  font-size: 11.5px;
  color: var(--t3);
  margin-top: 6px;
  line-height: 1.45;
}
.plan-act {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.plan-min {
  font-size: 10.5px;
  color: var(--t4);
}
.plan-clear {
  text-align: center;
  padding: 52px 20px;
  color: var(--tx);
}
.plan-tasks {
  background: var(--bg2);
  border-radius: 11px;
  padding: 11px 13px;
  margin-bottom: 18px;
}
.plan-tasks-h {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 7px;
}
.plan-task {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 5px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.plan-task:hover {
  background: var(--sf);
}
.plan-task-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.plan-task-d {
  font-size: 10.5px;
  color: var(--t3);
}
.plan-task.over .plan-task-d {
  color: #d9534f;
  font-weight: 600;
}
.plan-coach {
  background: var(--bg2);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 16px;
}
.plan-coach-h {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 7px;
}
.plan-coach-b {
  font-size: 13px;
  line-height: 1.65;
  color: var(--t2);
}
.plan-coach-b p:first-child {
  margin-top: 0;
}
.plan-coach-b p:last-child {
  margin-bottom: 0;
}
/* Start-the-whole-plan CTA */
.plan-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--bg2);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.plan-cta-t {
  font-size: 14px;
  font-weight: 600;
}
.plan-cta-s {
  font-size: 11.5px;
  color: var(--t3);
  margin-top: 2px;
}
.plan-cta-s b {
  color: var(--tx);
}

/* ===== SYLLABUS IMPORT (Phase 3) ===== */
.syl-sec {
  margin-bottom: 18px;
}
.syl-h {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.syl-h span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--t3);
}
.syl-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 5px;
}
.syl-row.off {
  opacity: 0.4;
}
.syl-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--tx);
}
.syl-in {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  padding: 6px 9px;
}
.syl-date {
  flex: 0 0 140px;
  font-size: 12px;
  padding: 6px 8px;
}
.syl-date.missing {
  border-color: var(--wn);
  background: rgba(212, 150, 40, 0.06);
}
.syl-pri {
  flex: 0 0 92px;
  font-size: 12px;
  padding: 6px 8px;
}
.syl-flag {
  font-size: 11px;
  color: var(--wn);
  margin: -2px 0 7px 27px;
}
.syl-note {
  font-size: 11.5px;
  color: var(--t3);
  margin-top: 6px;
}
.syl-empty {
  font-size: 12.5px;
  color: var(--t3);
  padding: 8px 0;
}
.syl-warn {
  background: rgba(212, 150, 40, 0.09);
  color: var(--wn);
  font-size: 12px;
  padding: 9px 12px;
  border-radius: 8px;
}
/* inferred vs stated syllabus dates */
.syl-date.inferred {
  border-color: #5b8fc9;
  background: rgba(91, 143, 201, 0.08);
  font-style: italic;
}
.syl-inf {
  font-size: 11px;
  color: #4a7fb5;
  margin: -2px 0 7px 27px;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.syl-chip {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(91, 143, 201, 0.16);
  color: #4a7fb5;
  padding: 1px 5px;
  border-radius: 5px;
}
.syl-inf-warn {
  background: rgba(91, 143, 201, 0.09);
  color: #4a7fb5;
  font-size: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.syl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11px;
  color: var(--t3);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bd);
}
.syl-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.syl-sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid var(--bd);
}
.syl-sw.inf {
  border-color: #5b8fc9;
  background: rgba(91, 143, 201, 0.2);
}
.syl-sw.miss {
  border-color: var(--wn);
  background: rgba(212, 150, 40, 0.2);
}
/* in-progress state on the assignment tick */
.cw-check.prog {
  background: var(--wn);
  border-color: var(--wn);
  color: #fff;
  font-size: 12px;
}
/* recall round-length picker */
.rc-limit {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--t3);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.rc-lim-btn {
  border: 1px solid var(--bd);
  background: var(--sf);
  color: var(--t3);
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
}
.rc-lim-btn:hover {
  border-color: var(--tx);
  color: var(--tx);
}
.rc-lim-btn.on {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
}

/* ===== AI STUDY COACH (Phase 5a) ===== */
.coach-empty {
  text-align: center;
  padding: 48px 20px;
}
.coach-card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.coach-card.urgent {
  border-color: rgba(217, 83, 79, 0.3);
}
.coach-card.recur {
  border-color: rgba(91, 143, 201, 0.35);
  background: rgba(91, 143, 201, 0.04);
}
.coach-card-h {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 10px;
}
.coach-line {
  font-size: 13px;
  color: var(--t2);
  padding: 4px 0;
}
.coach-line b {
  color: var(--tx);
}
.coach-msc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bd);
}
.coach-msc:last-child {
  border-bottom: none;
}
.coach-msc-l {
  font-size: 13.5px;
  font-weight: 600;
}
.coach-msc-n {
  font-size: 10px;
  font-weight: 700;
  background: rgba(217, 83, 79, 0.14);
  color: #d9534f;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
}
.coach-msc-d {
  font-size: 11.5px;
  color: var(--t3);
  margin-top: 2px;
}
.coach-wins {
  background: rgba(92, 128, 1, 0.07);
  border-radius: 12px;
  padding: 12px 15px;
  margin-bottom: 12px;
}
.coach-wins-h {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ok);
  margin-bottom: 6px;
}
.coach-win {
  font-size: 12.5px;
  color: var(--t2);
  padding: 2px 0;
}
.coach-threads {
  background: var(--bg2);
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 14px;
  max-height: 200px;
  overflow-y: auto;
}
.coach-thread {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.coach-thread:hover {
  background: var(--sf);
}
.coach-thread.on {
  background: var(--sf);
  font-weight: 600;
}
.coach-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 190px);
  min-height: 420px;
}
.coach-scope {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--t3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bd);
  margin-bottom: 12px;
}
.coach-stream {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}
.coach-msg {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}
.coach-msg.user {
  align-self: flex-end;
  align-items: flex-end;
}
.coach-msg.assistant {
  align-self: flex-start;
}
.coach-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.6;
}
.coach-msg.user .coach-bubble {
  background: var(--tx);
  color: var(--bg);
  border-bottom-right-radius: 4px;
}
.coach-msg.assistant .coach-bubble {
  background: var(--bg2);
  color: var(--tx);
  border-bottom-left-radius: 4px;
}
.coach-bubble p:first-child {
  margin-top: 0;
}
.coach-bubble p:last-child {
  margin-bottom: 0;
}
.coach-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.coach-act {
  border: 1px solid var(--tx);
  background: var(--sf);
  color: var(--tx);
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
}
.coach-act:hover {
  background: var(--tx);
  color: var(--bg);
}
.coach-input {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--bd);
  margin-top: 12px;
}
.coach-input textarea {
  flex: 1;
  resize: none;
  font-size: 13.5px;
}
.coach-typing {
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg2);
  border-radius: 14px;
  width: fit-content;
}
.coach-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--t4);
  animation: coachDot 1.2s infinite;
}
.coach-typing span:nth-child(2) {
  animation-delay: 0.2s;
}
.coach-typing span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes coachDot {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }
  30% {
    opacity: 1;
  }
}
.coach-offer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(91, 143, 201, 0.09);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--t2);
}
/* coach: recent misses */
.coach-card.misses {
  border-color: rgba(217, 83, 79, 0.28);
}
.coach-miss-grp {
  margin-bottom: 12px;
}
.coach-miss-grp:last-child {
  margin-bottom: 0;
}
.coach-miss-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.coach-miss-n {
  font-size: 10px;
  font-weight: 700;
  background: rgba(217, 83, 79, 0.14);
  color: #d9534f;
  padding: 1px 6px;
  border-radius: 8px;
}
.coach-miss {
  background: var(--bg2);
  border-radius: 7px;
  padding: 7px 10px;
  margin-bottom: 5px;
}
.coach-miss-q {
  font-size: 12px;
  color: var(--t2);
  line-height: 1.4;
}
.coach-miss-a {
  font-size: 11px;
  margin-top: 3px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.coach-miss-a .bad {
  color: #d9534f;
}
.coach-miss-a .good {
  color: var(--ok);
}
/* coach mic */
.coach-mic {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--bd);
  background: var(--sf);
  color: var(--t3);
  font-size: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.coach-mic:hover {
  border-color: var(--tx);
  color: var(--tx);
}
.coach-mic.rec {
  background: #d9534f;
  border-color: #d9534f;
  color: #fff;
  animation: coachPulse 1.4s infinite;
}
@keyframes coachPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
.coach-mic-viz {
  display: none;
}
/* saved-quiz review */
.qz-rev {
  padding: 12px 0;
  border-bottom: 1px solid var(--bd);
}
.qz-rev.missed {
  background: rgba(217, 83, 79, 0.04);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 4px;
}
.qz-rev-q {
  font-size: 13.5px;
  line-height: 1.5;
}
.qz-rev-flag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(217, 83, 79, 0.14);
  color: #d9534f;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 8px;
  white-space: nowrap;
}
.qz-rev-opts {
  margin: 7px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.qz-rev-opts div {
  font-size: 12.5px;
  color: var(--t3);
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--bg2);
}
.qz-rev-opts div.ok {
  background: rgba(92, 128, 1, 0.12);
  color: var(--ok);
  font-weight: 600;
}
.qz-rev-a {
  font-size: 12.5px;
  margin-top: 5px;
}
.qz-rev-e {
  font-size: 12px;
  color: var(--t3);
  margin-top: 5px;
  line-height: 1.5;
}
/* in-chat practice round */
.coach-practice-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(91, 143, 201, 0.1);
  border-radius: 8px;
  padding: 7px 12px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--t2);
}
.coach-practice-bar b {
  color: var(--tx);
}
.coach-practice-bar span {
  flex: 1;
}

/* ===== IN-CHAT QUIZ CARDS ===== */
.coach-msg.wide {
  max-width: 100%;
  width: 100%;
}
.qcard {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 15px 17px;
}
.qcard.right {
  border-color: rgba(92, 128, 1, 0.4);
}
.qcard.wrong {
  border-color: rgba(217, 83, 79, 0.4);
}
.qcard-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}
.qcard-n {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t4);
}
.qcard-mark {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9px;
}
.qcard-mark.ok {
  background: rgba(92, 128, 1, 0.14);
  color: var(--ok);
}
.qcard-mark.no {
  background: rgba(217, 83, 79, 0.14);
  color: #d9534f;
}
.qcard-q {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 12px;
}
.qcard-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qopt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--bd);
  background: var(--bg2);
  color: var(--tx);
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.qopt:hover:not(:disabled) {
  border-color: var(--tx);
  background: var(--sf);
}
.qopt:disabled {
  cursor: default;
}
.qopt-k {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--sf);
  border: 1px solid var(--bd);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--t3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qopt span:nth-child(2) {
  flex: 1;
}
.qopt.correct {
  border-color: var(--ok);
  background: rgba(92, 128, 1, 0.09);
}
.qopt.correct .qopt-k {
  background: var(--ok);
  color: #fff;
  border-color: var(--ok);
}
.qopt.picked-wrong {
  border-color: #d9534f;
  background: rgba(217, 83, 79, 0.08);
}
.qopt.picked-wrong .qopt-k {
  background: #d9534f;
  color: #fff;
  border-color: #d9534f;
}
.qopt.dim {
  opacity: 0.45;
}
.qopt-tick {
  color: var(--ok);
  font-weight: 700;
}
.qopt-x {
  color: #d9534f;
  font-weight: 700;
}
.qcard-hint {
  font-size: 11.5px;
  color: var(--t4);
  font-style: italic;
}
.qcard-yours,
.qcard-ans {
  font-size: 12.5px;
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.qcard-yours span,
.qcard-ans span {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t4);
  background: var(--bg2);
  padding: 2px 6px;
  border-radius: 5px;
}
.qcard-ans {
  color: var(--ok);
  font-weight: 600;
}
.qcard-fb {
  font-size: 13px;
  line-height: 1.6;
  color: var(--t2);
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--bd);
}
.qcard-fb p:first-child {
  margin-top: 0;
}
.qcard-fb p:last-child {
  margin-bottom: 0;
}
.qcard-exp {
  font-size: 12px;
  line-height: 1.55;
  color: var(--t3);
  margin-top: 7px;
}
/* score card */
.scard {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 15px 18px;
}
.scard.good {
  border-color: rgba(92, 128, 1, 0.4);
}
.scard.mid {
  border-color: rgba(212, 150, 40, 0.4);
}
.scard.poor {
  border-color: rgba(217, 83, 79, 0.4);
}
.scard-pct {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
.scard-pct span {
  font-size: 14px;
  font-weight: 500;
  color: var(--t3);
}
.scard.good .scard-pct {
  color: var(--ok);
}
.scard.mid .scard-pct {
  color: var(--wn);
}
.scard.poor .scard-pct {
  color: #d9534f;
}
.scard-n {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t4);
}
.scard-t {
  font-size: 13px;
  color: var(--t2);
  margin-top: 3px;
  line-height: 1.5;
}
.scard-t p {
  margin: 0;
}
.scard-conf {
  flex: 0 0 auto;
  font-size: 19px;
  font-weight: 700;
  color: var(--t2);
}
.scard-conf span {
  font-size: 11px;
  font-weight: 500;
  color: var(--t4);
}

/* ===== PHASE 5b ===== */
.plan-reason.msc {
  background: rgba(91, 143, 201, 0.16);
  color: #4a7fb5;
  font-weight: 600;
}
.dcard {
  background: rgba(91, 143, 201, 0.06);
  border: 1px solid rgba(91, 143, 201, 0.35);
  border-radius: 14px;
  padding: 14px 16px;
}
.dcard.gone {
  opacity: 0.55;
  border-color: var(--bd);
  background: var(--bg2);
}
.dcard-h {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4a7fb5;
  margin-bottom: 6px;
}
.dcard-b {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--t2);
}
.dcard-b p:first-child {
  margin-top: 0;
}
.dcard-b p:last-child {
  margin-bottom: 0;
}
.dcard-acts {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.dcard-note {
  font-size: 11px;
  color: var(--t4);
  margin-top: 7px;
  line-height: 1.45;
}
.dcard-done {
  font-size: 12px;
  color: var(--t3);
  margin-top: 8px;
  font-style: italic;
}
.coach-act.ghost {
  border-color: var(--bd);
  color: var(--t3);
}
.coach-act.ghost:hover {
  background: var(--bg2);
  color: var(--tx);
  border-color: var(--t3);
}
.coach-cites {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.coach-cite {
  border: 1px solid var(--bd);
  background: var(--bg2);
  color: var(--t3);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
}
.coach-cite:hover {
  border-color: var(--tx);
  color: var(--tx);
}
.rd-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bd);
}
.rd-row:last-child {
  border-bottom: none;
}
.rd-d {
  flex: 0 0 auto;
  min-width: 38px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.rd-d span {
  font-size: 10px;
  font-weight: 500;
  color: var(--t3);
}
.rd-d.urgent {
  color: #d9534f;
}
.rd-n {
  font-size: 13px;
  font-weight: 600;
}
.rd-bar {
  height: 5px;
  background: var(--bg2);
  border-radius: 3px;
  overflow: hidden;
  margin: 5px 0 4px;
}
.rd-bar div {
  height: 100%;
  border-radius: 3px;
}
.rd-s {
  font-size: 11px;
  color: var(--t3);
}
.coach-line-today {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(91, 143, 201, 0.09);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--t2);
  flex-wrap: wrap;
}
.coach-line-today b {
  color: var(--tx);
}
.clt-i {
  color: #4a7fb5;
  font-weight: 700;
}
.coach-msc-auto {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(91, 143, 201, 0.16);
  color: #4a7fb5;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 6px;
}
.coach-msc-note {
  font-size: 11px;
  color: var(--t4);
  line-height: 1.5;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--bd);
}

/* ===== STYLED CONFIRM ===== */
.confirm-modal {
  max-width: 420px;
}
.confirm-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--t2);
  margin-bottom: 18px;
}
.confirm-body p {
  margin: 0 0 8px;
}
.confirm-body p:last-child {
  margin-bottom: 0;
}
.confirm-acts {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.bt.bd {
  background: #d9534f;
  border-color: #d9534f;
  color: #fff;
}
.bt.bd:hover {
  background: #c9302c;
  border-color: #c9302c;
}

/* ===== PRACTICE TEST — controls at the top ===== */
.pt-bar {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.pt-bar-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.pt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 96px;
}
.pt-field label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t4);
}
.pt-field select {
  padding: 7px 10px;
  font-size: 13px;
}
.pt-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}
.pt-chk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--t2);
  border: 1px solid var(--bd);
  background: var(--bg2);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}
.pt-chk:hover {
  border-color: var(--t3);
}
.pt-chk input {
  margin: 0;
  cursor: pointer;
}
.pt-chk:has(input:checked) {
  border-color: var(--tx);
  background: var(--sf);
  font-weight: 600;
  color: var(--tx);
}
.pt-go {
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
}
.pt-sel {
  font-size: 11.5px;
  color: var(--t4);
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--bd);
}
.pt-sel.on {
  color: var(--ok);
  font-weight: 600;
}
.pt-sec {
  margin-bottom: 18px;
}
.pt-sec-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 9px;
}
.pt-mini {
  border: none;
  background: none;
  color: var(--t3);
  font-size: 10.5px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  padding: 0;
}
.pt-mini:hover {
  color: var(--tx);
}
.pt-folders {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pt-folder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--bd);
  background: var(--sf);
  color: var(--t2);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
}
.pt-folder:hover {
  border-color: var(--tx);
  color: var(--tx);
}
.pt-folder span {
  font-size: 10px;
  font-weight: 700;
  background: var(--bg2);
  padding: 1px 6px;
  border-radius: 8px;
  color: var(--t4);
}

/* ===== COACH — topic picker ===== */
.coach-pick-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--bg2);
  border-radius: 10px;
  padding: 11px 14px;
  margin-top: 18px;
}
.pick-grp {
  margin-bottom: 12px;
}
.pick-grp-h {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 5px;
}
.pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: var(--bg2);
  color: var(--tx);
  font-size: 13px;
  padding: 8px 11px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 3px;
}
.pick-row:hover {
  border-color: var(--tx);
  background: var(--sf);
}
.pick-m {
  font-size: 11.5px;
  font-weight: 600;
  min-width: 34px;
  text-align: right;
}
.pick-msc {
  font-size: 11px;
  color: #4a7fb5;
}
.scope-act {
  border: 1px solid var(--bd);
  background: var(--sf);
  color: var(--t3);
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 11px;
  cursor: pointer;
  font-family: inherit;
}
.scope-act:hover {
  border-color: var(--tx);
  color: var(--tx);
}

/* ===== PHASE 6 — DOMAINS ===== */
.dom-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.dom-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--bd);
  background: var(--sf);
  color: var(--t2);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
}
.dom-chip:hover {
  border-color: var(--tx);
  color: var(--tx);
}
.dom-chip.on {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
  font-weight: 600;
}
.dom-chip span {
  font-size: 10px;
  font-weight: 700;
  background: var(--bg2);
  color: var(--t4);
  padding: 1px 6px;
  border-radius: 8px;
}
.dom-chip.on span {
  background: rgba(255, 255, 255, 0.22);
  color: var(--bg);
}
.dom-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--t4);
  background: var(--bg2);
  padding: 2px 7px;
  border-radius: 7px;
}
.dom-item {
  padding: 14px 16px;
  margin-bottom: 8px;
}
.dom-item-q {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.dom-item-q p:first-child {
  margin-top: 0;
}
.dom-item-q p:last-child {
  margin-bottom: 0;
}
.dom-item-a {
  font-size: 13px;
  line-height: 1.6;
  color: var(--t2);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bd);
}
.dom-item-a p:first-child {
  margin-top: 0;
}
.dom-item-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.dom-item-acts .bt {
  margin-right: auto;
}

/* ===== PHASE 6 — course tabbed view ===== */
.course-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.course-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--bd);
  margin-bottom: 16px;
}
.ctab {
  border: none;
  background: none;
  color: var(--t3);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 14px;
  cursor: pointer;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ctab:hover {
  color: var(--tx);
}
.ctab.on {
  color: var(--tx);
  font-weight: 600;
  border-bottom-color: var(--tx);
}
.ctab span {
  font-size: 10px;
  font-weight: 700;
  background: var(--bg2);
  color: var(--t4);
  padding: 1px 6px;
  border-radius: 8px;
}
.ctab.on span {
  background: var(--tx);
  color: var(--bg);
}
.cw-head {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.cw-sec-h {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 8px;
}
.cw-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 7px;
}
.cw-item.urgent {
  border-color: rgba(217, 83, 79, 0.35);
}
.cw-item.done,
.cw-item.past {
  opacity: 0.6;
}
.cw-count {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--t2);
}
.cw-item.urgent .cw-count {
  color: #d9534f;
}
.cw-count.past {
  color: var(--t4);
  font-size: 11px;
}
.cw-title {
  font-size: 13.5px;
  font-weight: 600;
}
.cw-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--t3);
  margin-top: 2px;
}
.cw-body {
  flex: 1;
  min-width: 0;
}
.cw-acts {
  flex: 0 0 auto;
}

/* ===== PHASE 6e — sidebar recents + "view more" ===== */
.ni-more {
  font-size: 11px;
  color: var(--t3);
  opacity: 0.85;
  padding-top: 4px;
  padding-bottom: 4px;
}
.ni-more:hover {
  color: var(--tx);
  opacity: 1;
}

/* ===== PHASE 6f — calendar rebuild: readable event pills ===== */
#calG {
  grid-auto-rows: minmax(84px, auto);
}
.cac2 {
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 5px 5px 4px;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  background: var(--sf);
  overflow: hidden;
  transition: border-color 0.12s;
}
.cac2:hover {
  border-color: var(--t3);
}
.cac2.em {
  border: none;
  background: transparent;
  cursor: default;
}
.cac2.em:hover {
  border: none;
}
.cac2.td2 {
  border-color: var(--tx);
  box-shadow: inset 0 0 0 1px var(--tx);
}
.cac2-n {
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
  line-height: 1.1;
  padding: 1px 2px;
}
.cac2.td2 .cac2-n {
  color: var(--tx);
}
.cac2-ev {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cpill {
  font-size: 9.5px;
  line-height: 1.25;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-left: 3px solid var(--c, var(--t4));
  background: color-mix(in srgb, var(--c, var(--t4)) 14%, transparent);
  color: var(--t1);
}
.cpill:hover {
  background: color-mix(in srgb, var(--c, var(--t4)) 26%, transparent);
}
.cpill.exam {
  font-weight: 600;
}
.cpill.done {
  opacity: 0.55;
  text-decoration: line-through;
}
.cpill-more {
  font-size: 9.5px;
  color: var(--t3);
  padding: 1px 5px;
  cursor: pointer;
}
.cpill-more:hover {
  color: var(--tx);
}
@media (max-width: 640px) {
  .cpill {
    font-size: 9px;
    padding: 1px 4px;
  }
  .cac2 {
    min-height: 66px;
  }
}

/* ===== PHASE 6f.2 — calendar Month/Year toggle + year view ===== */
.cal-toggle {
  display: inline-flex;
  border: 1px solid var(--bd);
  border-radius: 8px;
  overflow: hidden;
  margin-right: 8px;
}
.cal-tg {
  border: none;
  background: var(--sf);
  color: var(--t3);
  font-size: 12px;
  font-family: inherit;
  padding: 6px 14px;
  cursor: pointer;
}
.cal-tg:hover {
  color: var(--tx);
}
.cal-tg.on {
  background: var(--tx);
  color: var(--bg);
  font-weight: 600;
}

/* Year view: 12 mini months */
.cal-year {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .cal-year {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .cal-year {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cal-ym-h {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t2);
  margin-bottom: 6px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 5px;
}
.cal-ym-h:hover {
  background: var(--bg2);
  color: var(--tx);
}
.cal-ym-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.cal-ym-dh {
  font-size: 8.5px;
  color: var(--t4);
  text-align: center;
  padding-bottom: 2px;
}
.cal-ym-d {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--t3);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}
.cal-ym-d.em {
  cursor: default;
}
.cal-ym-d.has {
  color: var(--t1);
  font-weight: 500;
}
.cal-ym-d:not(.em):hover {
  background: var(--bg2);
}
.cal-ym-d.today {
  background: var(--tx);
  color: var(--bg);
  font-weight: 700;
}
.cal-ym-num {
  line-height: 1;
}
.cal-ym-dots {
  display: flex;
  gap: 1px;
  height: 3px;
  margin-top: 1px;
}
.cal-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  display: inline-block;
}
.cal-ym-d.today .cal-dot {
  background: var(--bg) !important;
  opacity: 0.8;
}

/* ===== PHASE 6f.3 — minimal month cells ===== */
.cac2 {
  min-height: 62px;
  gap: 2px;
  padding: 5px 5px 3px;
}
.cac2-ev {
  gap: 2px;
}
.cpill-more {
  font-size: 9px;
  color: var(--t4);
  padding: 0 4px;
  cursor: pointer;
}
.cpill-more:hover {
  color: var(--tx);
}
@media (max-width: 640px) {
  .cac2 {
    min-height: 52px;
  }
  /* on narrow screens, hide the pill label — a dot is enough; tap opens the day */
  .cac2-ev .cpill {
    font-size: 0;
    padding: 3px;
    border-radius: 3px;
    border-left-width: 0;
    width: 14px;
  }
}

/* ===== PHASE 6f.4 — calmer calendar in DARK mode ===== */
/* The color-mix pill fill glows against a near-black background and reads as
   "too much". In dark mode, drop the colored fill entirely — keep only a thin
   left accent on a flat neutral surface. */
[data-theme="dark"] .cpill {
  background: rgba(255, 255, 255, 0.04);
  color: var(--t2);
  border-left: 2px solid var(--c, var(--t4));
}
[data-theme="dark"] .cpill:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--t1);
}
[data-theme="dark"] .cpill.exam {
  color: var(--t1);
}
[data-theme="dark"] .cpill.done {
  opacity: 0.4;
}

/* Year-view dots are fine, but soften them a touch in dark mode */
[data-theme="dark"] .cal-dot {
  opacity: 0.85;
}

/* Calmer today-cell in dark mode: outline instead of a filled block */
[data-theme="dark"] .cac2.td2 {
  box-shadow: inset 0 0 0 1px var(--tx);
  border-color: var(--tx);
}

/* ===== PHASE 6e.2 — truncate long folder / recent-topic names ===== */
/* Long names crammed the sidebar; clip them with an ellipsis so each row stays
   one tidy line. The count badge / more-chip stay visible. */
#sidebarFolders .ni,
#sidebarRecent .ni,
#sidebarPinned .ni {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#sidebarFolders .ni > .ic,
#sidebarRecent .ni > .ic,
#sidebarPinned .ni > .ic {
  flex: 0 0 auto;
}
/* the name is the text node between the icon and any trailing badge — wrap it */
#sidebarFolders .ni,
#sidebarRecent .ni,
#sidebarPinned .ni {
  white-space: nowrap;
  overflow: hidden;
}
#sidebarFolders .ni .bg {
  flex: 0 0 auto;
  margin-left: auto;
}
/* clamp the visible label text */
.ni-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

/* ===== STAGE 2 — AUTH login overlay ===== */
#authOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}
.auth-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #fff);
}
.auth-card {
  width: 100%;
  max-width: 380px;
  margin: 24px;
  padding: 36px 32px;
  border: 1px solid var(--bd);
  border-radius: 16px;
  background: var(--sf);
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.auth-logo {
  font-size: 30px;
  color: var(--tx);
  margin-bottom: 14px;
}
.auth-card h1 {
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--tx);
}
.auth-sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--t3);
  margin: 0;
}
.auth-msg {
  font-size: 12.5px;
  color: #b4632f;
  background: rgba(217, 131, 79, 0.1);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 14px 0 0;
}
.auth-input {
  width: 100%;
  box-sizing: border-box;
  margin: 18px 0 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--bg2);
  color: var(--tx);
}
.auth-input:focus {
  outline: none;
  border-color: var(--tx);
}
.auth-btn {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 10px;
  background: var(--tx);
  color: var(--bg);
  cursor: pointer;
}
.auth-btn:hover {
  opacity: 0.9;
}
.auth-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.auth-btn.ghost {
  background: transparent;
  color: var(--t3);
  border: 1px solid var(--bd);
  margin-top: 12px;
  font-weight: 500;
}
.auth-btn.ghost:hover {
  color: var(--tx);
  border-color: var(--t3);
}

/* account panel */
.acct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--sf);
  margin-bottom: 10px;
}
.acct-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--t4);
}
.acct-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
  margin-top: 2px;
}
.acct-note {
  font-size: 12.5px;
  color: var(--t3);
  margin-bottom: 12px;
  line-height: 1.5;
}
.acct-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--tx);
  cursor: pointer;
  margin-top: 6px;
}
.acct-toggle input {
  cursor: pointer;
}
.acct-hint {
  font-size: 11.5px;
  color: var(--t4);
  margin-top: 6px;
  line-height: 1.5;
}

/* ===== STAGE 3 — admin panel ===== */
.adm-add {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.adm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--sf);
}
.adm-email {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tx);
  flex: 1;
  min-width: 140px;
}
.adm-you {
  font-size: 10px;
  color: var(--t4);
  border: 1px solid var(--bd);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
}
.adm-meta {
  display: flex;
  gap: 6px;
  align-items: center;
}
.adm-plan {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 5px;
  font-weight: 600;
}
.adm-free {
  background: rgba(120, 120, 120, 0.14);
  color: var(--t2);
}
.adm-comped {
  background: rgba(90, 160, 110, 0.16);
  color: #3f9d5f;
}
.adm-paid {
  background: rgba(90, 130, 200, 0.16);
  color: #5a82c8;
}
.adm-adminbadge {
  font-size: 10px;
  color: #b4632f;
  background: rgba(217, 131, 79, 0.12);
  border-radius: 4px;
  padding: 1px 6px;
}
.adm-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.adm-planpick {
  padding: 5px 8px;
  font-size: 12px;
  min-width: 90px;
}
.adm-del {
  color: #c0564a;
}

/* Key-input fields are only relevant for local dev (direct calls). On the
   deployed site everyone uses the server proxy, so these are hidden. */
.byok-only {
  display: none;
}
body.is-local-dev .byok-only {
  display: block;
}

/* ---- Feedback launcher + modal ----------------------------------------
   Matches the app's flat, hairline-bordered surfaces rather than introducing
   a second visual language for one dialog. */
.fb-launch {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 300;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--t2);
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: 8px 15px;
  cursor: pointer;
  box-shadow: 0 1px 3px var(--sh);
  transition:
    color 0.15s,
    border-color 0.15s,
    transform 0.15s;
}
.fb-launch:hover {
  color: var(--tx);
  border-color: var(--bm);
  transform: translateY(-1px);
}
.fb-modal[hidden] {
  display: none;
}
.fb-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fb-back {
  position: absolute;
  inset: 0;
  background: var(--ol);
}
.fb-box {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 20px;
  box-shadow: 0 8px 32px var(--sh);
}
.fb-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.fb-h b {
  font-size: 15px;
  font-weight: 600;
}
.fb-x {
  background: none;
  border: 0;
  color: var(--t3);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}
.fb-x:hover {
  color: var(--tx);
}
.fb-sub {
  font-size: 12.5px;
  color: var(--t3);
  margin-bottom: 14px;
}
.fb-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.fb-cat {
  font-family: var(--font);
  font-size: 12px;
  color: var(--t2);
  background: none;
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}
.fb-cat:hover {
  border-color: var(--bm);
  color: var(--tx);
}
.fb-cat.selected {
  border-color: var(--tx);
  color: var(--tp);
  background: var(--as);
}
.fb-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.fb-note {
  font-size: 11px;
  color: var(--t3);
  line-height: 1.45;
}

/* Feedback entries in the admin panel */
.fb-list {
  max-height: 380px;
  overflow-y: auto;
}

@media (max-width: 640px) {
  .fb-launch {
    right: 12px;
    bottom: 12px;
    padding: 9px 16px;
  }
  .fb-box {
    max-width: 100%;
    padding: 16px;
  }
  .fb-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .fb-foot .bt {
    width: 100%;
  }
}