/* A Bússola Notes. A calm, modern study app: neutral greys with the Bússola
   indigo (4A4AFF → 8B3DFF) kept for what matters — the current item, the
   main action, the review of the day. Onest for text, Geist Mono for numbers
   (scores, hours, the timer), Instrument Serif for one expressive word.
   The fonts ship in notes/vendor/fonts, so it all works offline. The sheets
   stay white in the dark theme: it is paper. */
@font-face { font-family: 'Onest'; src: url(vendor/fonts/onest-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(vendor/fonts/geist-mono-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url(vendor/fonts/caveat-latin-wght-normal.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(vendor/fonts/instrument-serif-latin-400-italic.woff2) format('woff2'); font-style: italic; font-display: swap; }
:root {
  --brand: #4a4aff; --brand2: #8b3dff; --amber: #f59e0b;
  --brand-soft: #eeeeff; --brand-ink: #3030d8;
  --bg: #f4f4f6; --surface: #ffffff; --surface2: #fafafb;
  --line: #ececf0; --line2: #e2e2e8;
  --ink: #0f0f14; --soft: #3f3f4a; --mute: #71717f; --faint: #a1a1ad;
  --hover: #f3f3f6; --hoverLine: #d6d6de; --hoverInk: #0f0f14;
  --ok: #16a34a; --warn: #d97706; --danger: #e5484d;
  --desk: #e9e9ee;
  --shadow-1: 0 1px 2px rgba(16,16,24,.05), 0 0 0 1px rgba(16,16,24,.05);
  --shadow-2: 0 1px 2px rgba(16,16,24,.04), 0 10px 28px -10px rgba(16,16,24,.16);
  --shadow: 0 0 0 1px rgba(16,16,24,.06), 0 16px 40px -12px rgba(16,16,24,.25);
  --font: 'Onest', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --brand: #6e6eff; --brand-soft: #1d1d3a; --brand-ink: #c4c5ff;
  --bg: #0a0a0d; --surface: #121217; --surface2: #18181e;
  --line: #222229; --line2: #2c2c35;
  --ink: #f4f4f6; --soft: #c9c9d1; --mute: #8b8b97; --faint: #5c5c68;
  --hover: #1c1c23; --hoverLine: #383842; --hoverInk: #ffffff;
  --ok: #22c55e; --warn: #f59e0b; --danger: #f87171;
  --desk: #1a1a20;
  --shadow-1: 0 0 0 1px rgba(255,255,255,.06);
  --shadow-2: 0 0 0 1px rgba(255,255,255,.07), 0 12px 32px -12px rgba(0,0,0,.7);
  --shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 44px -12px rgba(0,0,0,.8);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 14px; font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
#app { height: 100%; }
button, input, textarea, select { font-family: inherit; }
[hidden] { display: none !important; }
/* iPad: a double tap doesn't zoom the page, and holding the Pencil still on a
   drawing doesn't open the callout menu or the magnifier. */
html { touch-action: manipulation; }
.ed-stage, .tm svg, .tm canvas { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ── shared buttons ───────────────────────────────────────────────────── */
.bn-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  border-radius: 9px; border: 1px solid var(--line2); background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 520; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .08s, color .15s, opacity .15s;
}
.bn-btn:hover { background: var(--hover); border-color: var(--hoverLine); }
.bn-btn:active { transform: translateY(1px); }
.bn-btn:disabled { opacity: .45; cursor: default; box-shadow: none; transform: none; filter: none; }
.bn-btn.primary { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.bn-btn.primary:hover { background: var(--ink); opacity: .86; }
.bn-btn.brand {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 16px -6px rgba(74,74,255,.6);
}
.bn-btn.brand:hover { background: var(--brand); filter: brightness(1.08); }
.bn-btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.bn-btn.danger:hover { background: var(--danger); opacity: .9; }
.bn-btn.ghost { background: transparent; border-color: transparent; color: var(--soft); }
.bn-btn.ghost:hover { background: var(--hover); color: var(--ink); }
.bn-btn.small { height: 30px; padding: 0 10px; font-size: 12.5px; gap: 5px; }
.bn-icon-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--mute);
  cursor: pointer; flex-shrink: 0; transition: background .15s, border-color .15s, color .15s;
}
.bn-icon-btn:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.bn-icon-btn:disabled { opacity: .35; cursor: default; }
.bn-icon-btn.small { width: 26px; height: 26px; border-radius: 7px; }
.bn-input {
  width: 100%; height: 38px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line2);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.bn-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.ed-grow { flex: 1; }

/* ── dialog ───────────────────────────────────────────────────────────── */
.bn-modal {
  position: fixed; inset: 0; z-index: 10100; display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,16,.4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 16px; opacity: 0; transition: opacity .15s;
}
.bn-modal.show { opacity: 1; }
.bn-dlg {
  width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow);
  transform: translateY(8px) scale(.985); transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
.bn-dlg.wide { max-width: 620px; }
.bn-dlg.acc-dlg { max-width: 880px; }
.bn-modal.show .bn-dlg { transform: none; }
.bn-dlg-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 4px 22px; }
.bn-dlg-hdr h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.bn-dlg-body { padding: 8px 22px 6px; color: var(--soft); line-height: 1.5; }
.bn-dlg-body p { margin: 4px 0 10px; }
.bn-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 20px; }
.bn-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--ink); cursor: pointer; }
.bn-check input { width: 16px; height: 16px; accent-color: var(--brand); }

/* ── menu ─────────────────────────────────────────────────────────────── */
.bn-menu {
  position: fixed; z-index: 10090; min-width: 220px; padding: 5px; border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-4px); transition: opacity .12s, transform .12s;
}
.bn-menu.show { opacity: 1; transform: none; }
.bn-menu-item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink); font-size: 13px; text-align: left; cursor: pointer;
}
.bn-menu-item svg { color: var(--mute); flex-shrink: 0; }
.bn-menu-item:hover:not(:disabled) { background: var(--hover); }
.bn-menu-item:disabled { opacity: .4; cursor: default; }
.bn-menu-item.danger, .bn-menu-item.danger svg { color: var(--danger); }
.bn-menu-pad { width: 16px; }
.bn-menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }

/* ── toast ────────────────────────────────────────────────────────────── */
#bn-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 10110; transform: translate(-50%, 12px);
  display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 12px;
  background: #16161c; color: #fff; font-size: 13px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; max-width: calc(100vw - 32px);
}
#bn-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#bn-toast button { border: 0; background: transparent; color: #a9adff; font-weight: 700; cursor: pointer; font-size: 13.5px; }

/* ── paper previews (dialogs, empty covers) ───────────────────────────── */
.pv { display: block; width: 100%; aspect-ratio: 3 / 4; background-color: #fff; border-radius: 6px; border: 1px solid #e3e5ee; }
.pv-lined {
  background-image: linear-gradient(90deg, transparent 14%, #f2b3b3 14%, #f2b3b3 calc(14% + 1px), transparent calc(14% + 1px)),
    repeating-linear-gradient(180deg, transparent 0 9px, #c9d6ee 9px 10px);
}
.pv-grid {
  background-image: linear-gradient(#e2e7f1 1px, transparent 1px), linear-gradient(90deg, #e2e7f1 1px, transparent 1px);
  background-size: 8px 8px;
}
.pv-dotted { background-image: radial-gradient(#b5bccd 1px, transparent 1.3px); background-size: 8px 8px; }
.pv-cornell {
  background-image: linear-gradient(#9da9c2, #9da9c2), linear-gradient(#9da9c2, #9da9c2), linear-gradient(#9da9c2, #9da9c2),
    repeating-linear-gradient(180deg, transparent 0 9px, #c9d6ee 9px 10px);
  background-size: 100% 1.5px, 1.5px 68%, 100% 1.5px, 70% 68%;
  background-position: 0 12%, 29% 37.5%, 0 80%, 100% 37.5%;
  background-repeat: no-repeat;
}
.paper-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.paper-opt {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 6px 9px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--surface2); color: var(--ink); cursor: pointer; font-size: 12.5px; font-weight: 600;
}
.paper-opt:hover { border-color: var(--hoverLine); }
.paper-opt.on { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }

/* ── new notebook ─────────────────────────────────────────────────────── */
.newnb .fld { display: block; margin-bottom: 16px; }
.newnb .fld > span { display: block; font-size: 11px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 7px; }
.layout-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.layout-opt {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface2); color: var(--ink);
  text-align: left; cursor: pointer;
}
.layout-opt:hover { border-color: var(--hoverLine); }
.layout-opt.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(74,74,255,.16); }
.layout-opt b { font-size: 14px; }
.layout-opt small { grid-column: 2; color: var(--mute); font-size: 12px; }
.lo-ic { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--brand2)); position: relative; }
.lo-pages::before, .lo-pages::after { content: ''; position: absolute; width: 16px; height: 22px; background: #fff; border-radius: 2px; top: 11px; }
.lo-pages::before { left: 8px; } .lo-pages::after { left: 20px; top: 13px; box-shadow: -2px 0 0 rgba(0,0,0,.08); }
.lo-board::before {
  content: ''; position: absolute; inset: 9px; border-radius: 4px; background-color: #fff;
  background-image: radial-gradient(#9a9ff0 1px, transparent 1.3px); background-size: 6px 6px;
}

/* ── library ──────────────────────────────────────────────────────────── */
.lib { height: 100%; display: flex; flex-direction: column; overflow: auto; }
.lib-hdr {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 24px; position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.lib-brand {
  display: flex; align-items: center; gap: 10px; padding: 4px 8px; margin-left: -8px; border: 0; border-radius: 8px;
  background: transparent; color: inherit; text-align: left; cursor: pointer; flex-shrink: 0;
}
.lib-brand:hover { background: var(--hover); }
.lib-exit { width: 36px; height: 36px; margin-left: -10px; color: var(--ink); }
.lib-search {
  flex: 1; max-width: 400px; margin: 0 auto; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 10px;
  border-radius: 9px; border: 1px solid var(--line2); background: var(--surface2); color: var(--faint); cursor: text;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.lib-search:focus-within { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.lib-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; }
.lib-search input::placeholder { color: var(--faint); }
.lib-search input::-webkit-search-cancel-button { cursor: pointer; }
.lib-search:focus-within kbd { display: none; }
.lib-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lib-crumbs { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 1240px; margin: 0 auto; padding: 18px 40px 4px; min-height: 40px; box-sizing: border-box; }
.crumb-root {
  display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 6px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--mute); font-size: 13px; font-weight: 500; cursor: pointer;
}
.crumb-root:hover, .crumb-root.drop-on { background: var(--hover); color: var(--ink); }
.crumb-sep { color: var(--faint); }
.crumb-cur { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
.crumb-cur svg { color: var(--brand); }
.lib-sec { margin-bottom: 30px; }
.lib-sec h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.lib-sec h2 .n { font: 500 12px var(--mono); color: var(--mute); }
/* ── subjects (disciplinas) ───────────────────────────────────────────── */
.subj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.subj {
  position: relative; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1);
  transition: box-shadow .18s, transform .18s;
}
.subj:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.subj.dragging { opacity: .45; }
.subj.drop-on { box-shadow: 0 0 0 2px var(--brand); }
.subj-open { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 46px 16px 16px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.subj-badge {
  min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  font: 600 12px var(--mono); letter-spacing: 0;
  color: hsl(var(--h, 240) 62% 42%); background: hsl(var(--h, 240) 80% 96%);
}
:root[data-theme="dark"] .subj-badge { color: hsl(var(--h, 240) 85% 78%); background: hsl(var(--h, 240) 35% 17%); }
.crumb-cur .subj-badge { min-width: 34px; height: 32px; border-radius: 9px; font-size: 11px; }
.subj-txt { min-width: 0; display: flex; flex-direction: column; }
.subj-txt b { font-size: 14.5px; font-weight: 580; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.subj-txt small { font-size: 12.5px; color: var(--mute); margin-top: 3px; }
.subj-menu { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .15s; }
.subj:hover .subj-menu, .subj-menu:focus-visible { opacity: 1; }
@media (hover: none) { .subj-menu { opacity: 1; } }

/* ── tags ─────────────────────────────────────────────────────────────── */
.tag-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; }
.tag-bar-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--mute); margin-right: 4px; }
.tag-chip {
  height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line2); background: var(--surface);
  color: var(--soft); font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.tag-chip:hover { border-color: var(--hoverLine); color: var(--hoverInk); }
.tag-chip.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tag-clear { border: 0; background: transparent; color: var(--brand); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0 6px; }
.tag-mini {
  display: inline-block; max-width: 110px; padding: 1px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink);
  font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tags-dlg .tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; max-height: 220px; overflow: auto; }
.tag-new { display: flex; gap: 8px; }
.tag-new .bn-btn { height: 40px; }
.newnb .bn-input.abbr { width: 120px; text-transform: uppercase; }
.move-topic .fld { display: block; margin-bottom: 14px; }
.move-topic .fld > span, .pick .hint { display: block; font-size: 11px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 7px; }
.move-topic select { appearance: auto; }
textarea.bn-input.split { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow: auto; margin-top: 10px; }
.pick-list .move-opt > span { display: flex; flex-direction: column; min-width: 0; }
.pick-list .move-opt small { font-size: 11.5px; color: var(--mute); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── the topic tree ───────────────────────────────────────────────────── */
.tree-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.tree, .tlist { display: flex; flex-direction: column; gap: 1px; }
.trow {
  --lvl: 0; position: relative; display: flex; align-items: center; gap: 6px; min-height: 46px;
  padding: 4px 8px 4px calc(8px + var(--lvl) * 26px); border-radius: 10px; border: 1px solid transparent;
}
.trow:not(.adding):hover { background: var(--surface2); }
.trow.dragging { opacity: .4; }
.trow[data-drop="inside"] { background: var(--hover); border-color: var(--brand); }
.trow[data-drop="before"]::before, .trow[data-drop="after"]::after {
  content: ''; position: absolute; left: calc(6px + var(--lvl) * 26px); right: 6px; height: 3px; border-radius: 2px; background: var(--brand);
}
.trow[data-drop="before"]::before { top: -2px; }
.trow[data-drop="after"]::after { bottom: -2px; }
.tw-chev {
  width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--mute); cursor: pointer; padding: 0;
}
.tw-chev:hover:not(:disabled) { background: var(--hover); color: var(--hoverInk); }
.tw-chev:disabled { cursor: default; }
.tw-chev:disabled::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.tw-name {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 4px; padding: 6px 4px; border: 0; background: transparent;
  color: var(--ink); text-align: left; cursor: pointer; font-size: 14px; font-weight: 560;
}
.trow[style*="--lvl:1"] .tw-name { font-weight: 500; }
.trow[style*="--lvl:2"] .tw-name { font-weight: 400; font-size: 14px; color: var(--soft); }
.tw-name:hover .tw-title { color: var(--brand); }
.tw-path { color: var(--mute); font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; max-width: 50%; }
.tw-path:empty { display: none; }
.tw-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-tags { display: flex; gap: 4px; flex-shrink: 1; min-width: 0; overflow: hidden; }
.tw-meta { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tw-q { color: var(--brand); }
.tw-books { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--mute); padding: 0 4px; }
.tw-acts { display: flex; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity .12s; }
.trow:hover .tw-acts, .tw-acts:focus-within { opacity: 1; }
.trow.adding input { height: 36px; }
.tree-empty { padding: 30px 20px; border-radius: 14px; border: 1px dashed var(--line2); color: var(--mute); text-align: center; max-width: 620px; }
@media (hover: none) { .tw-acts { opacity: 1; } }

/* ── topic cockpit ────────────────────────────────────────────────────── */
.ck { height: 100%; display: flex; flex-direction: column; }
.ck-hdr {
  min-height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 6px 14px 6px 12px;
  background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 6;
}
.ck-title { min-width: 0; max-width: 40vw; display: flex; align-items: center; gap: 2px; }
.ck-crumbs { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; padding-left: 4px; }
.ck-crumbs span { overflow: hidden; text-overflow: ellipsis; }
.ck-crumbs:not(:empty)::after { content: '/'; color: var(--faint); margin: 0 2px 0 4px; }
.ck-crumb { border: 0; background: transparent; padding: 0; color: var(--mute); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ck-crumb:hover { color: var(--ink); }
.ck-name {
  height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; text-align: left;
  color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ck-name:hover { background: var(--hover); }
.ck-tabs { display: flex; gap: 2px; padding: 3px; margin: 0 auto; border-radius: 10px; background: var(--surface2); box-shadow: var(--shadow-1); }
.ck-tabs button {
  height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 7px;
  background: transparent; color: var(--mute); font-size: 13px; font-weight: 520; cursor: pointer; transition: color .15s, background .15s, box-shadow .15s;
}
.ck-tabs button:hover { color: var(--ink); }
.ck-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
.ck-tabs button.on svg { color: var(--brand); }
.ck-tags { max-width: 220px; }
.ck-tags span { overflow: hidden; text-overflow: ellipsis; }
.ck-tags.has { color: var(--brand-ink); }
.ck-nav { display: flex; padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--line); }
.ck-body { flex: 1; min-height: 0; position: relative; overflow: auto; }
.ck-soon { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--mute); }
.ck-soon svg { color: var(--brand); opacity: .6; }
.ck-draw { min-height: 100%; padding: 24px 32px 32px; }
.ck-draw.pdf-drop { outline: 3px dashed var(--brand); outline-offset: -10px; }
.ck-draw-bar { display: flex; gap: 8px; margin-bottom: 20px; }
.ck-draw-empty { grid-column: 1 / -1; max-width: 460px; padding: 40px 20px; margin: 20px auto; text-align: center; color: var(--mute); border: 1px dashed var(--line2); border-radius: 16px; }
.ck-draw-empty svg { color: var(--brand); opacity: .6; }
@media (max-width: 1100px) {
  .ck-tabs button span, .ck-tags span, .ck-q span { display: none; }
  .ck-tabs button { padding: 0 10px; }
}
@media (max-width: 760px) {
  .ck-hdr { flex-wrap: wrap; }
  .ck-title { max-width: calc(100vw - 120px); }
  .ck-tabs { order: 5; margin: 0 auto; }
  .ck-draw { padding: 16px; }
  .trow { padding-left: calc(4px + var(--lvl) * 16px); }
  .tw-tags { display: none; }
}
.card.dragging { opacity: .45; }
.card-folder { display: flex; align-items: center; gap: 4px; color: var(--brand) !important; font-weight: 600; white-space: nowrap; overflow: hidden; }
.card-folder span { overflow: hidden; text-overflow: ellipsis; }
.bn-dlg-body .hint { margin: 10px 0 2px; font-size: 12.5px; color: var(--mute); }
.move-list { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow: auto; }
.move-opt {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; border: 1px solid transparent;
  background: var(--surface2); color: var(--ink); font-size: 13.5px; text-align: left; cursor: pointer;
}
.move-opt svg { color: var(--brand); flex-shrink: 0; }
.move-opt:hover { border-color: var(--hoverLine); }
.move-opt.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.move-opt.add { color: var(--brand); font-weight: 600; background: transparent; }
.lib-empty-art.small { width: 52px; height: 52px; border-radius: 14px; }
.lib-brand img { display: none; }
.lib-brand h1 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
.lib-brand p { display: none; }
.lib-main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 40px 32px; box-sizing: border-box; }
/* screens split in two (a tree and a list) take the whole width */
.qz-scr .lib-main, .lib.split .lib-main { max-width: none; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; }
.card { position: relative; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); transition: box-shadow .18s, transform .18s; }
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.card-cover {
  aspect-ratio: 3 / 4; margin: 10px 10px 0; border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(16,16,24,.06); display: flex; align-items: center; justify-content: center;
}
.card-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* A board is usually wider than tall: show all of it rather than a crop. */
.card-cover.board img { object-fit: contain; object-position: center; }
.card-cover .pv { border: 0; border-radius: 0; height: 100%; aspect-ratio: auto; }
.card-info { padding: 10px 40px 12px 12px; }
.card-info h3 { margin: 0; font-size: 13.5px; font-weight: 580; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-info p { margin: 3px 0 0; font-size: 12px; color: var(--mute); }
.card-menu { position: absolute; right: 6px; bottom: 10px; }
.lib-empty { max-width: 440px; margin: 64px auto 0; text-align: center; color: var(--mute); }
.lib-empty-art {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
}
.lib-empty h2 { margin: 0 0 8px; color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.lib-empty p { margin: 0 0 18px; line-height: 1.55; }
.lib-empty .or { margin: 24px 0 10px; font-size: 13.5px; }
.lib.pdf-drop { outline: 3px dashed var(--brand); outline-offset: -10px; }
.lib-empty .tip { margin-top: 26px; font-size: 13px; padding: 12px 14px; border-radius: 12px; background: var(--surface2); box-shadow: var(--shadow-1); text-align: left; line-height: 1.5; }
.lib-foot { padding: 14px 40px 20px; font-size: 12px; color: var(--faint); text-align: center; }

/* ── editor ───────────────────────────────────────────────────────────── */
.ed { height: 100%; display: flex; flex-direction: column; position: relative; }
.ed-hdr {
  height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 10px;
  background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 6;
}
.ed-logo { width: 26px; height: 26px; border-radius: 6px; margin-left: 2px; }
.ed-title {
  max-width: 34vw; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--ink); font-size: 14.5px; font-weight: 600; cursor: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-title:hover { border-color: var(--line); background: var(--surface2); }
.ed-status { font-size: 12px; color: var(--mute); white-space: nowrap; }
.ed-status.fail { color: var(--danger); font-weight: 600; }
.ed-pages, .ed-zoom { display: flex; align-items: center; gap: 2px; padding: 0 6px; border-left: 1px solid var(--line); }
.ed-pageno { font-size: 12.5px; font-weight: 600; color: var(--soft); min-width: 92px; text-align: center; white-space: nowrap; }
.ed-pages .bn-btn { margin-left: 6px; }
.ed-pct { min-width: 54px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--soft); font-size: 12.5px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.ed-pct:hover { background: var(--hover); color: var(--hoverInk); }
.ed.board .ed-pages { display: none; }

/* The tool bar floats over the top of the page, centred, like the bar. */
.ed-tb {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 3px; padding: 5px 8px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line2); box-shadow: 0 4px 18px rgba(20,20,40,.12);
}
.ed-tool {
  height: 34px; min-width: 34px; padding: 0 7px; position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; color: #3a3a44; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease, color .15s ease;
}
:root[data-theme="dark"] .ed-tool { color: #d6d6e4; }
.ed-tool:hover:not(:disabled) { background: var(--hover); border-color: var(--hoverLine); color: var(--hoverInk); box-shadow: 0 3px 8px rgba(74,74,255,.14); transform: translateY(-1px); }
.ed-tool:disabled { opacity: .4; cursor: default; }
.ed-tool.on {
  background: linear-gradient(180deg, #5c5cff 0%, #4a4aff 100%) !important; border-color: #4038e6 !important; color: #fff !important;
  box-shadow: 0 3px 11px rgba(74,74,255,.38), inset 0 1px 0 rgba(255,255,255,.28) !important; transform: none;
}
.ed-tool .tt {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #1a1a2e; color: #fff; font-size: 10.5px; padding: 3px 7px; border-radius: 5px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 20;
}
.ed-tool:hover .tt { opacity: 1; }
.ed-tool.pop-open .tt { display: none; }
.ed-sep { width: 1px; height: 26px; background: var(--line); margin: 0 4px; flex-shrink: 0; }
.ed-color {
  width: 34px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--surface); flex-shrink: 0;
}
.ed-color:disabled { opacity: .35; cursor: default; }
.ed-recent { display: flex; align-items: center; gap: 4px; }
.ed-sw { width: 22px; height: 22px; border-radius: 6px; cursor: pointer; padding: 0; border: 1.5px solid rgba(0,0,0,.18); transition: transform .1s; }
.ed-sw:hover { transform: translateY(-1px) scale(1.1); }
.ed-sw.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--brand); }

.ed-body { flex: 1; display: flex; min-height: 0; }
.ed-main { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; }
.ed-stage { flex: 1; position: relative; overflow: hidden; background: var(--desk); }
.ed-side-btn.on { background: var(--hover); color: var(--brand); }
.ed.board .ed-side-btn { display: none; }

/* pages, at the left */
.ed-side { width: 196px; flex-shrink: 0; display: none; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line2); }
.ed.side-on .ed-side { display: flex; }
.ed.board .ed-side { display: none; }
.side-hdr {
  display: flex; align-items: center; gap: 8px; margin: 10px 10px 6px; padding: 9px 12px; border-radius: 11px;
  background: var(--hover); color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
}
.side-list { flex: 1; overflow: auto; padding: 6px 16px 10px; display: flex; flex-direction: column; gap: 14px; }
.side-pg { border: 0; background: transparent; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--mute); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.side-sheet { display: block; width: 100%; background: #fff; border-radius: 4px; border: 2px solid transparent; box-shadow: 0 1px 5px rgba(20,20,40,.18); overflow: hidden; }
.side-sheet canvas { display: block; width: 100%; height: 100%; }
.side-pg:hover .side-sheet { border-color: var(--hoverLine); }
.side-pg.on .side-sheet { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(74,74,255,.18); }
.side-pg.on .side-no { color: var(--brand); }
.side-add {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 12px 12px; height: 34px; border-radius: 10px;
  border: 1.5px dashed var(--line); background: transparent; color: var(--soft); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.side-add:hover { border-color: var(--brand); color: var(--brand); background: var(--hover); }

/* actions on the PDF text just selected */
.ed-selbar {
  position: absolute; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line2); box-shadow: var(--shadow); white-space: nowrap;
}
.ed-selbar button {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer;
}
.ed-selbar button:hover { background: var(--hover); color: var(--hoverInk); }
.ed-selbar i { width: 1px; height: 22px; background: var(--line); margin: 0 3px; }
.selbar-hl { display: flex; }
.ed.board .ed-stage { background: #fff; }
.ed-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cv-live { touch-action: none; }
.ed-drop {
  position: absolute; inset: 12px; border: 2.5px dashed var(--brand); border-radius: 18px; background: rgba(74,74,255,.08);
  display: none; align-items: center; justify-content: center; color: var(--brand); font-size: 17px; font-weight: 700; pointer-events: none;
}
.ed-stage.dropping .ed-drop { display: flex; }
.ed-text {
  position: absolute; z-index: 4; margin: 0; padding: 0; border: 0; outline: 1.5px dashed rgba(74,74,255,.7); outline-offset: 4px;
  background: transparent; resize: none; overflow: hidden; line-height: 1.35; white-space: pre-wrap; overflow-wrap: break-word;
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; color-scheme: light;
}
.ed-text::placeholder { color: rgba(26,26,46,.35); }
.ed-text { box-sizing: border-box; }
.ed-text.note { border-radius: 4px; box-shadow: 0 3px 10px rgba(0,0,0,.18); outline-offset: 3px; }

/* tool pop-over */
.ed-pop {
  position: absolute; z-index: 30; width: 240px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line2); box-shadow: var(--shadow); color: var(--ink);
}
.pop-hdr { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.pop-lbl { font-size: 10px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .5px; margin: 10px 0 6px; }
.pop-colors { display: flex; gap: 7px; justify-content: space-between; }
.pop-colors button, .pop-colors .pick {
  width: 30px; height: 30px; flex: none; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,.14) inset; position: relative; overflow: hidden; display: block;
}
.pop-colors .on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--surface) inset, 0 0 0 1px rgba(0,0,0,.12); }
.pop-colors .pick input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; cursor: pointer; border: 0; padding: 0; }
.pop-size { display: flex; align-items: center; gap: 9px; }
.pop-size input { flex: 1; min-width: 0; accent-color: var(--brand); cursor: pointer; }
.pop-val { width: 26px; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pop-mode { display: flex; gap: 6px; }
.pop-mode button { flex: 1; height: 30px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface2); color: var(--soft); font-size: 12px; cursor: pointer; }
.pop-mode button.on { background: #eff6ff; border-color: #60a5fa; color: #1d4ed8; font-weight: 700; }
:root[data-theme="dark"] .pop-mode button.on { background: #22264a; border-color: #6b7cff; color: #c7cdff; }

/* keyboard shortcuts */
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.keys h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--mute); margin: 8px 0 6px; }
.keys table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ink); }
.keys td { padding: 4px 0; vertical-align: top; }
.keys td:first-child { white-space: nowrap; padding-right: 12px; }
kbd { display: inline-block; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface2); font: 600 11.5px/1.4 inherit; color: var(--ink); }

/* Medium screens: the secondary library buttons keep only their icon. */
@media (max-width: 1400px) {
  .lib-acts .bn-btn:not(.primary) span { display: none; }
  .lib-acts .bn-btn:not(.primary) { padding: 0 10px; }
}
/* Touch screens have no hover: the tooltips would only stick after a tap. */
@media (hover: none) {
  .ed-tool .tt, .lib-search kbd { display: none; }
  /* A tapped button would keep its hover look until the next tap elsewhere. */
  .ed-tool:hover:not(.on):not(:disabled) { background: var(--surface2); border-color: var(--line); color: inherit; box-shadow: none; transform: none; }
}
/* Tablet in portrait and phones: the tool bar scrolls sideways, the header
   keeps only what fits. Pinch zooms, so the − / + buttons go. */
@media (max-width: 760px) {
  .ed-tb { max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .ed-tb::-webkit-scrollbar { display: none; }
  .ed-logo, .ed-status, .ed-zoom [data-a="zoomIn"], .ed-zoom [data-a="zoomOut"] { display: none; }
  .ed-title { max-width: 28vw; padding: 0 6px; font-size: 14px; }
  .ed-pageno { min-width: 0; }
  .ed-pages, .ed-zoom { padding: 0 2px; }
  .ed-side { width: 140px; }
  .side-list { padding: 6px 10px 10px; }
}
@media (max-width: 480px) {
  .ed-pages [data-a="prev"], .ed-pages [data-a="next"] { display: none; }
}
@media (max-width: 1100px) {
  .ed-status { display: none; }
  .ed-pages .bn-btn span { display: none; }
}
@media (max-width: 860px) {
  .ed-recent, .ed-zoom .bn-icon-btn[data-a="fit"] { display: none; }
  .lib-hdr { flex-wrap: wrap; padding: 10px 16px; }
  .lib-brand p { display: none; }
  .lib-search { order: 3; flex-basis: 100%; max-width: none; }
  .lib-acts { margin-left: auto; }
  .lib-acts .bn-btn:not(.primary) span { display: none; }
  .lib-crumbs { padding: 14px 16px 2px; }
  .lib-main { padding: 20px 16px 20px; }
  .paper-grid { grid-template-columns: repeat(3, 1fr); }
  .keys { grid-template-columns: 1fr; }
}

/* ── A Bússola Nuvem: the badge and the account screen ─────────────────── */
.cloud-btn { position: relative; }
.cloud-btn .cloud-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--surface);
  left: 22px; top: 6px; background: #9a9ab4;
}
.bn-icon-btn.cloud-btn .cloud-dot { left: 19px; top: 5px; }
.cloud-btn[data-state="ok"] .cloud-dot { background: #43a047; }
.cloud-btn[data-state="busy"] .cloud-dot { background: var(--brand); animation: cloudPulse 1s ease-in-out infinite; }
.cloud-btn[data-state="wait"] .cloud-dot { background: var(--amber); }
.cloud-btn[data-state="bad"] .cloud-dot { background: var(--danger); }
.cloud-btn[data-state="off"] .cloud-dot { display: none; }
@keyframes cloudPulse { 50% { transform: scale(1.35); opacity: .6; } }

.cloud { color: var(--ink); }
.cloud .fld { display: block; margin: 14px 0 12px; }
.cloud .fld > span { display: block; font-size: 11px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 7px; }
.cloud .bn-btn.wide { width: 100%; justify-content: center; height: 42px; }
.cloud .bn-input.code { font-size: 22px; letter-spacing: 8px; text-align: center; font-weight: 700; }
.cloud-hero { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--brand-soft); }
.cloud-hero > svg { flex-shrink: 0; color: var(--brand); margin-top: 2px; }
.cloud-hero b { font-size: 15px; }
.cloud-hero p { margin: 4px 0 0; color: var(--soft); font-size: 13.5px; line-height: 1.5; }
.cloud-sent { margin: 14px 0 0; color: var(--soft); }
.cloud-links { display: flex; justify-content: space-between; margin-top: 10px; }
.cloud .pw { position: relative; display: block; }
.cloud .pw input { padding-right: 42px; }
.cloud .pw .bn-icon-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.cloud-linkbtn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 14px; padding: 9px; border: 1px dashed var(--line2); border-radius: 10px; background: transparent; color: var(--soft); font-size: 13px; cursor: pointer; }
.cloud-linkbtn:hover { color: var(--ink); border-color: var(--hoverLine); }
.cloud-pw { margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--surface2); }
.cloud-pw .fld { margin-top: 0; }
.cloud-ok { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); font-size: 13px; }
.cloud-links button, .cloud-del { border: 0; background: transparent; color: var(--brand); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.cloud-del { color: var(--danger); }
.cloud-msg { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: rgba(229,57,53,.1); color: var(--danger); font-size: 13px; }
.cloud-note { margin: 12px 0 0; font-size: 12.5px; color: var(--mute); }
.cloud-user { display: flex; align-items: center; gap: 10px; font-weight: 600; word-break: break-all; }
.cloud-user svg { color: var(--brand); flex-shrink: 0; }
.cloud-plan { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 16px 0 8px; }
.cloud-plan span { font-size: 12.5px; color: var(--mute); }
.cloud-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 12px; }
.cloud-plan-opt {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 10px 10px;
  border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface2); color: var(--ink); text-align: left; cursor: pointer;
}
.cloud-plan-opt:hover { border-color: var(--hoverLine); }
.cloud-plan-opt.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.cloud-plan-opt b { font-size: 13.5px; }
.cloud-plan-opt .pr { font-size: 12.5px; font-weight: 700; color: var(--brand); line-height: 1.3; }
.cloud-plan-opt small { font-size: 11.5px; color: var(--mute); line-height: 1.3; }
.cloud-plan-opt i {
  position: absolute; top: -9px; right: 8px; padding: 1px 7px; border-radius: 999px; font-style: normal;
  font-size: 10.5px; font-weight: 800; color: #fff; background: #16a34a;
}
.cloud-more { margin: 22px 0 0; font-size: 14px; font-weight: 650; }
.cloud-bar.full i { background: var(--danger); }
.cloud-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; }
.cloud-tier { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 12px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface2); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.cloud-tier:hover { border-color: var(--hoverLine); }
.cloud-tier.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.cloud-tier b { font-size: 15px; }
.cloud-tier .pr { font-size: 13px; font-weight: 700; color: var(--brand); }
.cloud-tier ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cloud-tier li { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--soft); line-height: 1.35; }
.cloud-tier li svg { flex-shrink: 0; margin-top: 1px; color: var(--ok); }
.cloud-tiers + .bn-btn { margin-top: 14px; }
/* Pix: two periods only (quarterly, yearly), and its own button under the card one. */
.cloud-plans:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.pix-btn { margin-top: 8px; }
.pix-btn svg { color: #32BCAD; }
@media (max-width: 480px) { .cloud-plans { grid-template-columns: 1fr; } .cloud-plan-opt i { top: 10px; } }
.cloud-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.cloud-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--brand2)); min-width: 2px; }
.cloud-usage { margin: 6px 0 0; font-size: 12.5px; color: var(--soft); }
.cloud-status { margin: 10px 0 0; font-size: 13px; color: var(--soft); min-height: 1em; }
.cloud-status.bad { color: var(--danger); }
.cloud-warn { margin: 8px 0; padding: 9px 12px; border-radius: 10px; background: rgba(245,158,11,.14); color: #92400e; font-size: 13px; }
:root[data-theme="dark"] .cloud-warn { color: #fcd34d; }
.cloud-inactive { margin: 14px 0; color: var(--soft); }
.cloud-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.cloud-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ── topic notes (the omni2's TipTap editor) ──────────────────────────── */
.tn { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--surface2); }
.tn-tb {
  flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 12px;
  background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 3;
}
.tn-grp { display: flex; align-items: center; gap: 1px; padding-right: 6px; margin-right: 4px; border-right: 1px solid var(--line); }
.tn-grp:nth-last-child(2) { border-right: 0; }
.tn-btn {
  height: 30px; min-width: 30px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  border: 0; border-radius: 7px; background: transparent; color: var(--soft); cursor: pointer;
}
.tn-btn:hover:not(:disabled) { background: var(--hover); color: var(--hoverInk); }
.tn-btn.on { background: var(--brand-soft); color: var(--brand-ink); }
.tn-btn:disabled { opacity: .3; cursor: default; }
.tn-btn.danger { color: var(--danger); }
.tn-status { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--mute); padding: 0 6px; white-space: nowrap; }
.tn-status[data-s="saved"] { color: #16a34a; }
.tn-status[data-s="fail"] { color: var(--danger); }
.tn-pop {
  position: absolute; z-index: 20; width: 156px; display: flex; flex-wrap: wrap; gap: 5px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.tn-sw { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; transition: transform .1s; }
.tn-sw:hover { transform: scale(1.12); }
.tn-sw.blink { animation: tnPulse 1s ease-in-out infinite; }
@keyframes tnPulse { 50% { opacity: .55; } }
.tn-scroll { flex: 1; min-height: 0; overflow: auto; }
.tn-page {
  max-width: 920px; min-height: calc(100% - 48px); margin: 24px auto; background: var(--surface);
  border-radius: 14px; box-shadow: var(--shadow-1);
}
.tn-bubble { z-index: 4; display: flex; gap: 2px; padding: 4px; border-radius: 9px; background: #1f2937; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.tn-bubble button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; }
.tn-bubble button:hover, .tn-bubble button.on { background: #374151; }
@media (max-width: 760px) {
  .tn-tb { flex-wrap: nowrap; overflow-x: auto; padding: 6px 8px; }
  .tn-grp { flex-shrink: 0; }
  .tn-page { margin: 0; border-radius: 0; border: 0; min-height: 100%; }
}

/* The document, as in the omni2 (index.css + styles/tiptap-editor.css). */
.tn .ProseMirror { outline: none; min-height: 500px; padding: 3rem 3.5rem 4rem; font-size: 1rem; line-height: 1.75; color: var(--soft); word-wrap: break-word; }
.tn .ProseMirror > :first-child { margin-top: 0; }
.tn .ProseMirror p { margin: .5rem 0; }
.tn .ProseMirror p.is-editor-empty:first-child::before, .tn .ProseMirror .is-empty::before {
  content: attr(data-placeholder); float: left; color: #a3a3a5; pointer-events: none; height: 0; font-style: italic;
}
.tn .ProseMirror h1 { font-size: 2.1rem; font-weight: 650; margin: 0 0 1.5rem; color: var(--ink); letter-spacing: -.035em; line-height: 1.15; }
.tn .ProseMirror h2 { font-size: 1.5rem; font-weight: 620; margin: 2.25rem 0 .75rem; color: var(--ink); letter-spacing: -.025em; border-bottom: 1px solid var(--line); padding-bottom: .5rem; line-height: 1.3; }
.tn .ProseMirror h3 { font-size: 1.2rem; font-weight: 620; margin: 1.75rem 0 .5rem; color: var(--ink); letter-spacing: -.015em; line-height: 1.4; }
.tn .ProseMirror h4 { font-size: 1.125rem; font-weight: 700; margin: 1rem 0 .5rem; }
.tn .ProseMirror h5 { font-size: 1rem; font-weight: 700; margin: 1rem 0 .5rem; }
.tn .ProseMirror h6 { font-size: .875rem; font-weight: 700; margin: 1rem 0 .5rem; }
:root[data-theme="dark"] .tn .ProseMirror :is(h1, h2, h3) { color: #f1f1f8; border-color: var(--line); }
.tn .ProseMirror ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1.25rem; }
.tn .ProseMirror ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1.25rem; }
.tn .ProseMirror li { margin-bottom: .5rem; }
.tn .ProseMirror li > p { margin: 0; }
.tn .ProseMirror blockquote {
  border-left: 3px solid var(--brand); padding: .9rem 1.25rem; font-style: normal; color: var(--soft); margin: 1.5rem 0;
  background: var(--surface2); border-radius: 0 .75rem .75rem 0;
}
:root[data-theme="dark"] .tn .ProseMirror blockquote { background: var(--surface2); color: var(--soft); }
.tn .ProseMirror hr { border: none; border-top: 2px solid #e7e7e9; margin: 2rem 0; }
.tn .ProseMirror a { color: #4f46e5; text-decoration: underline; cursor: pointer; }
.tn .ProseMirror code { background: var(--surface2); color: #dc2626; padding: .125rem .25rem; border-radius: .25rem; font-size: .875em; font-family: var(--mono); }
.tn .ProseMirror pre { background: #1e293b; color: #e2e8f0; font-family: var(--mono); padding: 1rem; border-radius: .5rem; overflow-x: auto; margin: 1rem 0; }
.tn .ProseMirror pre code { color: inherit; padding: 0; background: none; font-size: .875rem; }
:root[data-theme="dark"] .tn .ProseMirror :not(pre) > code { background: #334155; color: #fca5a5; }
.tn .ProseMirror mark { background-color: #fef08a; padding: 0 .2rem; border-radius: .25rem; color: inherit; }
/* the marker's colours are light: on the dark theme, dark text on them */
:root[data-theme="dark"] .tn .ProseMirror mark { color: #1f2937; }
.tn .ProseMirror table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 1.5rem 0; overflow: hidden; }
.tn .ProseMirror td, .tn .ProseMirror th { min-width: 1em; border: 1px solid #e2e8f0; padding: 10px 12px; vertical-align: top; position: relative; }
.tn .ProseMirror th { font-weight: 700; text-align: left; background: #f8fafc; }
:root[data-theme="dark"] .tn .ProseMirror :is(td, th) { border-color: #475569; }
:root[data-theme="dark"] .tn .ProseMirror th { background: #1e293b; }
.tn .ProseMirror td > p, .tn .ProseMirror th > p { margin: 0; }
.tn .ProseMirror .selectedCell::after { z-index: 2; position: absolute; content: ""; inset: 0; background: rgba(149,128,212,.12); pointer-events: none; }
.tn .ProseMirror .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: -2px; width: 4px; background: #6366f1; pointer-events: none; }
.tn .ProseMirror.resize-cursor { cursor: col-resize; }
.tn .ProseMirror .tableWrapper { overflow-x: auto; }
.tn .ProseMirror ul[data-type="taskList"] { list-style: none; padding: 0; margin: .5rem 0; }
.tn .ProseMirror ul[data-type="taskList"] li { display: flex; align-items: flex-start; margin: .25rem 0; }
.tn .ProseMirror ul[data-type="taskList"] li > label { flex: 0 0 auto; height: 1.7em; margin-right: .5rem; user-select: none; display: flex; align-items: center; }
.tn .ProseMirror ul[data-type="taskList"] li > div > p { margin: 0; }
.tn .ProseMirror ul[data-type="taskList"] li > div { flex: 1 1 auto; }
.tn .ProseMirror ul[data-type="taskList"] input[type="checkbox"] { cursor: pointer; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: #4f46e5; }
.tn .ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div { text-decoration: line-through; color: #a3a3a5; }
.tn .ProseMirror div[data-youtube-video] { position: relative; width: 100%; padding-bottom: 56.25%; margin: 1rem 0; }
.tn .ProseMirror div[data-youtube-video] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: .5rem; }
.tn .ProseMirror div[data-youtube-video].ProseMirror-selectednode { outline: 3px solid #4f46e5; outline-offset: 2px; }
.tn .ProseMirror img { max-width: 100%; height: auto; border-radius: 1rem; }
.tn .ProseMirror img.ProseMirror-selectednode { outline: 3px solid #4f46e5; outline-offset: 2px; }
.tn .ProseMirror .tiptap-mathematics-render { padding: 0 .15rem; border-radius: .25rem; cursor: pointer; }
.tn .ProseMirror .tiptap-mathematics-render:hover { background: var(--hover); }
.tn .ProseMirror .tiptap-details { display: flex; gap: .5rem; margin: .75rem 0; padding: .5rem .75rem; border: 1px solid #e7e7e9; border-radius: .75rem; background: #f9f9fc; }
:root[data-theme="dark"] .tn .ProseMirror .tiptap-details { border-color: #3a3e57; background: rgba(39,36,63,.5); }
.tn .ProseMirror .tiptap-details > button.tiptap-details-toggle {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.75rem; margin-top: .125rem;
  border: 0; background: transparent; border-radius: .375rem; color: #727273; cursor: pointer; padding: 0;
}
.tn .ProseMirror .tiptap-details > button.tiptap-details-toggle:hover { background: #e7e7e9; }
.tn .ProseMirror .tiptap-details > button.tiptap-details-toggle svg { transition: transform .2s; }
.tn .ProseMirror .tiptap-details.is-open > button.tiptap-details-toggle svg { transform: rotate(90deg); }
.tn .ProseMirror .tiptap-details > div { flex: 1 1 auto; min-width: 0; }
.tn .ProseMirror .tiptap-details-summary { font-weight: 600; list-style: none; }
.tn .ProseMirror .tiptap-details-summary::-webkit-details-marker { display: none; }
.tn .ProseMirror .tiptap-details-content { padding-left: .25rem; border-left: 2px solid #e7e7e9; margin-top: .25rem; }
.tn .ProseMirror .tiptap-details-content > :first-child { margin-top: 0; }
.tn .ProseMirror .tiptap-details-content > :last-child { margin-bottom: 0; }
.tn .ProseMirror .tiptap-details:not(.is-open) > div > .tiptap-details-content, .tn .ProseMirror [data-type="detailsContent"][hidden] { display: none; }
@keyframes tn-blink-green { 0%, 100% { background-color: #22c55e; box-shadow: 0 0 4px 1px rgba(34,197,94,.5); } 50% { background-color: #4ade80; box-shadow: 0 0 12px 3px rgba(74,222,128,.7); } }
@keyframes tn-blink-red { 0%, 100% { background-color: #dc2626; box-shadow: 0 0 4px 1px rgba(220,38,38,.5); } 50% { background-color: #ef4444; box-shadow: 0 0 12px 3px rgba(239,68,68,.7); } }
@keyframes tn-blink-yellow { 0%, 100% { background-color: #eab308; box-shadow: 0 0 4px 1px rgba(234,179,8,.5); } 50% { background-color: #facc15; box-shadow: 0 0 12px 3px rgba(250,204,21,.7); } }
.tn .highlight-blink-green { animation: tn-blink-green 1s ease-in-out infinite; border-radius: 3px; padding: 1px 4px; font-weight: 700 !important; color: #052e16 !important; }
.tn .highlight-blink-red { animation: tn-blink-red 1s ease-in-out infinite; border-radius: 3px; padding: 1px 4px; font-weight: 700 !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.tn .highlight-blink-yellow { animation: tn-blink-yellow 1s ease-in-out infinite; border-radius: 3px; padding: 1px 4px; font-weight: 700 !important; color: #422006 !important; }
@media (prefers-reduced-motion: reduce) { .tn [class*="highlight-blink"], .tn-sw.blink { animation: none; } }
@media (max-width: 760px) { .tn .ProseMirror { padding: 1.5rem 1rem 3rem; } }

/* ── topic mind map (the omni2's Bússola Map) ─────────────────────────── */
.tm { position: absolute; inset: 0; }
.tm > div { height: 100%; }

/* ── web version: install / update banner ─────────────────────────────── */
.web-slot:empty { display: none; }
.web-hint {
  display: flex; align-items: center; gap: 12px; margin: 0 32px 10px; padding: 10px 12px 10px 14px; border-radius: 12px;
  background: var(--hover); border: 1px solid var(--hoverLine); color: var(--ink); font-size: 13.5px; line-height: 1.45;
}
.web-hint > svg { color: var(--brand); flex-shrink: 0; }
.web-hint p { flex: 1; margin: 0; }
@media (max-width: 860px) { .web-hint { margin: 0 16px 10px; } }

/* ── the side menu (nav.js) and the panel beside it ───────────────────── */
.shell { display: flex; padding: 8px 8px 8px 0; }
.shell-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; gap: 8px; }
.shell.full .shell-col { gap: 0; }
.shell-view {
  flex: 1; min-width: 0; min-height: 0; position: relative; overflow: hidden;
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-1);
}
.shell.full { padding: 0; }
.shell.full .shell-view { border-radius: 0; box-shadow: none; }
.sd {
  width: 248px; flex-shrink: 0; height: 100%; display: flex; flex-direction: column; padding: 8px 12px 4px 14px;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
.sd::-webkit-scrollbar { display: none; }
.shell.full .sd { display: none; }
.sd-top { display: flex; align-items: center; gap: 10px; padding: 4px 0 14px 4px; }
.sd-brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.sd-brand img { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; }
.sd-brand div { min-width: 0; display: flex; flex-direction: column; }
.sd-brand b { font-size: 14px; font-weight: 650; letter-spacing: -.015em; white-space: nowrap; }
.sd-brand small { font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-find {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 10px; margin-bottom: 12px; border: 0; border-radius: 9px;
  background: var(--surface); box-shadow: var(--shadow-1); color: var(--faint); font-size: 13px; cursor: pointer; white-space: nowrap;
}
.sd-find:hover { color: var(--mute); box-shadow: var(--shadow-2); }
.sd-find kbd { margin-left: auto; font: 500 10.5px/16px var(--mono); color: var(--mute); background: transparent; border: 1px solid var(--line2); padding: 0 5px; border-radius: 5px; }
.sd-list { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sd-group { padding: 16px 10px 6px; font-size: 11px; font-weight: 550; color: var(--faint); white-space: nowrap; }
.sd-item {
  display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 8px;
  color: var(--soft); font-size: 13.5px; font-weight: 480; text-decoration: none; white-space: nowrap;
  transition: background .12s, color .12s;
}
.sd-item svg { flex-shrink: 0; color: var(--mute); }
.sd-item:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--ink); }
.sd-item.on { background: var(--surface); color: var(--ink); font-weight: 560; box-shadow: var(--shadow-1); }
.sd-item.on svg { color: var(--brand); }
.sd-item em { margin-left: auto; font: 550 11px var(--mono); font-style: normal; color: var(--mute); }
.sd-item em.hot { color: #fff; background: var(--brand); padding: 1px 6px; border-radius: 6px; }
.sd-item em:empty { display: none; }
/* the timer, always at hand */
.sd-timer { margin-top: 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); padding: 12px; }
.sd-timer-row { display: flex; align-items: center; gap: 10px; }
.sd-timer-t { font: 600 21px var(--mono); letter-spacing: -.04em; color: var(--ink); }
.sd-timer small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-play {
  margin-left: auto; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--ink); color: var(--surface); cursor: pointer; transition: transform .12s, opacity .15s;
}
.sd-play:hover { transform: scale(1.06); }
.sd-play svg { fill: currentColor; stroke: none; margin-left: 2px; }
.sd-foot { display: flex; align-items: center; gap: 6px; padding: 8px 0 4px; }
.sd-foot .cloud-btn { flex: 1; justify-content: flex-start; border-color: transparent; background: transparent; color: var(--soft); padding: 0 8px; }
.sd-foot .cloud-btn:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
/* folded to a rail of icons */
.shell.mini .sd { width: 60px; padding: 8px 8px 4px 10px; align-items: stretch; }
.shell.mini .sd-top { flex-direction: column; padding: 4px 0 12px; }
.shell.mini .sd-brand div, .shell.mini .sd-item span, .shell.mini .sd-item em, .shell.mini .sd-find span, .shell.mini .sd-find kbd,
.shell.mini .sd-timer-row > div, .shell.mini .sd-foot .cloud-lbl { display: none; }
.shell.mini .sd-timer { padding: 0; background: transparent; box-shadow: none; display: flex; justify-content: center; }
.shell.mini .sd-play { margin: 0; }
.shell.mini .sd-brand { justify-content: center; }
.shell.mini .sd-find { justify-content: center; padding: 0; }
.shell.mini .sd-group { height: 1px; padding: 0; margin: 10px 8px; overflow: hidden; color: transparent; background: var(--line2); }
.shell.mini .sd-item { justify-content: center; padding: 0; }
.shell.mini .sd-foot { flex-direction: column; }
.shell.mini .sd-foot .cloud-btn { justify-content: center; padding: 0; width: 100%; }
/* The cloud lives at the foot of the menu; the screens beside it don't repeat it. */
.shell:not(.full) .shell-view .cloud-btn { display: none; }
.lib-crumbs:not([hidden]) ~ .lib-main { padding-top: 18px; }
@media (max-width: 760px) {
  .shell { padding: 0; }
  .sd-top [data-a="fold"] { display: none; }
  .shell-view { border-radius: 0; box-shadow: none; border-left: 1px solid var(--line); }
}

/* ── study: status, scope, folders, the numbers (home.js, topicpanel.js) ── */
.chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 550; color: var(--mute); background: var(--surface2); box-shadow: var(--shadow-1); white-space: nowrap; }
[data-s="0"] { --st: var(--faint); } [data-s="1"] { --st: var(--warn); } [data-s="2"] { --st: var(--ok); }
.tw-st { display: inline-flex; width: 22px; flex-shrink: 0; align-self: center; color: var(--st, var(--mute)); }
.trow.folder .tw-st { color: var(--warn); }
.trow.folder .tw-title { color: var(--soft); }
.trow.out { opacity: .55; }
.trow.out:hover { opacity: .85; }
.tw-stats { display: grid; grid-template-columns: 54px 66px 62px 54px; width: 236px; align-items: center; flex-shrink: 0; font-size: 12.5px; color: var(--soft); }
.tw-stats > span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.tw-stats svg { color: var(--faint); flex-shrink: 0; }
.tw-stats > span:first-child svg { color: #f97316; }
.tw-stats b { font-weight: 550; }
.tw-stats .sc b { min-width: 34px; text-align: center; padding: 2px 6px; border-radius: 6px; font-weight: 600; background: var(--surface2); box-shadow: var(--shadow-1); }
.tw-stats .sc[data-lv="hi"] b { color: var(--ok); } .tw-stats .sc[data-lv="mid"] b { color: var(--warn); } .tw-stats .sc[data-lv="lo"] b { color: var(--danger); }
/* Every row ends the same way, so the numbers line up in columns. */
.tree .tw-acts { width: 62px; justify-content: flex-end; }
.tree-head { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); position: sticky; top: 56px; z-index: 2; background: var(--surface); }
.th-lbl { flex: 1; min-width: 0; font-size: 12px; color: var(--faint); padding-left: 2px; }
.th-reset { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 3px 6px; margin-left: -6px; border-radius: 6px; color: var(--brand); font-size: 12px; font-weight: 550; cursor: pointer; }
.th-reset:hover { background: var(--brand-soft); }
.tree-head .th { display: inline-flex; align-items: center; gap: 2px; justify-content: center; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--mute); font-size: 11.5px; font-weight: 550; cursor: pointer; white-space: nowrap; }
.tree-head .th:hover { background: var(--hover); color: var(--ink); }
.tree-head .th.on { color: var(--brand-ink); background: var(--brand-soft); }
@media (max-width: 860px) {
  .tw-stats { grid-template-columns: 54px; width: 54px; }
  .tw-stats > :not(:last-child) { display: none; }
  .tree .tw-acts { width: auto; }
}
/* subject cards: average score and progress */
.subj-open { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; row-gap: 0; padding-right: 16px; }
.subj-open .subj-badge { grid-row: 1; }
.subj-score { grid-column: 3; grid-row: 1; text-align: right; font-size: 17px; font-weight: 600; letter-spacing: -.04em; color: var(--ink); margin-right: 22px; }
.subj-score small { display: block; font: 500 10.5px var(--font); letter-spacing: 0; color: var(--faint); }
.subj-bar { grid-column: 1 / -1; display: flex; gap: 2px; height: 5px; margin-top: 14px; border-radius: 3px; overflow: hidden; background: var(--line); }
.subj-bar i:first-child { background: var(--ok); } .subj-bar i:last-child { background: var(--warn); }
.subj-foot { grid-column: 1 / -1; margin-top: 8px; font-size: 12px; color: var(--mute); }
.subj-menu { top: 18px; transform: none; }
.subj.out { opacity: .6; }

/* the study panel in the cockpit */
.ck-wrap { flex: 1; min-height: 0; display: flex; }
.ck-wrap .ck-body { flex: 1; min-width: 0; }
.ck-panel { width: 300px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid var(--line); background: var(--surface); scrollbar-width: thin; }
.ck.no-panel .ck-panel { display: none; }
.ck:not(.no-panel) .ck-ptoggle { color: var(--brand); }
.tp { display: flex; flex-direction: column; gap: 14px; padding: 16px; min-height: 100%; }
.tp-seg { display: flex; padding: 2px; border-radius: 9px; background: var(--surface2); box-shadow: var(--shadow-1); }
.tp-seg button { flex: 1; height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 7px; background: transparent; color: var(--mute); font-size: 12px; font-weight: 520; cursor: pointer; white-space: nowrap; }
.tp-seg button i { width: 7px; height: 7px; border-radius: 50%; background: var(--st); }
.tp-stseg button { flex: 1 1 auto; min-width: 0; padding: 0 10px; }
.tp-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
.tp-score { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 14px; background: var(--surface2); box-shadow: var(--shadow-1); }
.tp-ring { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.tp-ring circle { fill: none; stroke-width: 7; }
.tp-ring .bg { stroke: var(--line2); }
.tp-ring .fg { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1); }
.tp-score[data-lv="hi"] .fg { stroke: var(--ok); } .tp-score[data-lv="mid"] .fg { stroke: var(--warn); } .tp-score[data-lv="lo"] .fg { stroke: var(--danger); } .tp-score[data-lv="off"] .fg { stroke: transparent; }
.tp-ring b { position: absolute; inset: 0 0 12px; display: grid; place-items: center; font-size: 24px; font-weight: 600; letter-spacing: -.06em; }
.tp-ring small { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; font-size: 10px; color: var(--faint); }
.tp dl { margin: 0; flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; font-size: 12.5px; }
.tp dt { color: var(--mute); } .tp dd { margin: 0; text-align: right; font-weight: 550; color: var(--ink); }
.tp dd small { font-size: 10.5px; color: var(--faint); margin-left: 2px; }
.tp-more { margin-top: -6px; font-size: 12.5px; }
.tp-more summary { cursor: pointer; color: var(--mute); padding: 2px 4px; list-style: none; }
.tp-more summary::before { content: '›'; display: inline-block; width: 12px; transition: transform .15s; }
.tp-more[open] summary::before { transform: rotate(90deg); }
.tp-more dl { padding: 10px 14px; margin-top: 6px; border-radius: 12px; background: var(--surface2); }
.tp-more p { margin: 8px 4px 0; color: var(--mute); line-height: 1.5; font-size: 12px; }
.tp-lvs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 12px; align-items: center; }
.tp-lvs .tp-lv { display: contents; }
.tp-lv { display: grid; grid-template-columns: 84px 1fr; align-items: center; }
.tp-lv > span { font-size: 12.5px; font-weight: 520; color: var(--soft); }
.tp-pips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.tp-pips button { height: 24px; border: 0; border-radius: 6px; background: var(--surface2); box-shadow: var(--shadow-1); color: var(--faint); font: 500 11px var(--mono); cursor: pointer; transition: background .12s, color .12s, transform .08s; }
.tp-pips button:hover { color: var(--ink); }
.tp-pips button:active { transform: scale(.94); }
.tp-pips button.f { color: #fff; box-shadow: none; background: var(--lv); }
.tp-pips button.cur { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--lv); }
.tp-lv.r { --lv: #f97316; } .tp-lv.d { --lv: #e5484d; } .tp-lv.m { --lv: #16a34a; }
.tp-q { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 12px; box-shadow: var(--shadow-1); overflow: hidden; }
.tp-q > * { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; min-width: 0; }
.tp-q > * + * { border-left: 1px solid var(--line); }
.tp-q small { font-size: 11px; color: var(--mute); }
.tp-q input { width: 100%; border: 0; outline: none; padding: 0; background: transparent; color: var(--ink); font-size: 18px; font-weight: 600; -moz-appearance: textfield; }
.tp-q input::-webkit-inner-spin-button { display: none; }
.tp-q label:focus-within { background: var(--brand-soft); }
.tp-q b { font-size: 18px; font-weight: 600; letter-spacing: -.04em; }
.tp-q b[data-lv="hi"] { color: var(--ok); } .tp-q b[data-lv="mid"] { color: var(--warn); } .tp-q b[data-lv="lo"] { color: var(--danger); }
.tp-rev { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); font-size: 12.5px; line-height: 1.45; }
.tp-rev svg { flex-shrink: 0; margin-top: 1px; }
.tp-rev p { margin: 0; }
.tp-rev.due { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: color-mix(in srgb, var(--warn) 70%, var(--ink)); }
.tp-cta { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: auto; }
.tp-cta .bn-btn { height: 40px; justify-content: center; font-size: 13.5px; }
.tp-links { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; }
.tp-links button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 2px; color: var(--mute); font-size: 12px; cursor: pointer; }
.tp-links button:hover { color: var(--ink); }
.tp-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); box-shadow: var(--shadow-1); color: var(--soft); font-size: 12.5px; }
.tp-note p { flex: 1; margin: 0; min-width: 150px; line-height: 1.45; }
.tp-folder { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 14px; text-align: center; color: var(--soft); }
.tp-folder svg { color: var(--warn); }
.tp-folder p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--mute); }
@media (max-width: 1100px) { .ck-panel { width: 270px; } }
@media (max-width: 760px) { .ck-wrap { flex-direction: column; } .ck-panel { width: auto; max-height: 45%; border-right: 0; border-bottom: 1px solid var(--line); } .tp-cta { margin-top: 0; } }

/* ── Registrar estudo (studylog.js) ───────────────────────────────────── */
.bn-dlg:has(.sl) { max-width: 480px; }
.sl { display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.sl-topic { margin: -6px 0 0 !important; font-size: 13px; color: var(--mute); }
.sl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sl-step { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px; border-radius: 12px; background: var(--surface2); box-shadow: var(--shadow-1); }
.sl-step > span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 550; color: var(--lv); }
.sl-step.r { --lv: #ea580c; } .sl-step.d { --lv: #e5484d; } .sl-step.m { --lv: #16a34a; }
.sl-step > div { display: flex; align-items: center; gap: 4px; }
.sl-step button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--soft); cursor: pointer; }
.sl-step button:hover { color: var(--ink); box-shadow: var(--shadow-2); }
.sl-step b { width: 26px; text-align: center; font-size: 18px; font-weight: 600; }
.sl-rev { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); cursor: pointer; }
.sl-rev span { font-weight: 550; font-size: 13.5px; }
.sl-rev small { color: var(--mute); font-size: 12px; }
.sl-addnote { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 1px dashed var(--line2); border-radius: 9px; background: transparent; color: var(--mute); font-size: 12.5px; cursor: pointer; }
.sl-addnote:hover { color: var(--ink); border-color: var(--hoverLine); }
.sl-note { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; font-size: 13.5px; }
.sl-h { font-size: 12px; font-weight: 600; color: var(--soft); margin-bottom: -6px; }
.sl-types { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sl-types button { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--surface); color: var(--soft); font-size: 13px; text-align: left; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.sl-types button svg { color: var(--mute); }
.sl-types button:hover { border-color: var(--hoverLine); color: var(--ink); }
.sl-types button.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); font-weight: 550; }
.sl-types button.on svg { color: var(--brand); }
.sl-q { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-radius: 12px; background: var(--brand-soft); }
.sl-q label small { display: block; font-size: 11.5px; color: var(--brand-ink); margin-bottom: 4px; }
.sl-q input { font-size: 16px; font-weight: 600; }
.sl-q p { grid-column: 1 / -1; margin: 0 !important; font-size: 12px; color: var(--brand-ink); opacity: .8; }
.sl-err { margin: 0 !important; color: var(--danger); font-size: 12.5px; }
@media (max-width: 480px) { .sl-types { grid-template-columns: 1fr; } }

/* ── Revisões (reviews.js) ─────────────────────────────────────────────── */
.kpis.rv-kpis { grid-template-columns: repeat(3, 1fr); }
.kpi.warn .kpi-v, .kpi.warn .kpi-lb svg { color: var(--warn); }
a.kpi.link { color: inherit; text-decoration: none; transition: box-shadow .18s, transform .18s; }
a.kpi.link:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.rv-clear { display: flex; align-items: center; gap: 8px; margin: -14px 0 24px; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 10%, var(--surface)); color: color-mix(in srgb, var(--ok) 75%, var(--ink)); font-size: 13px; font-weight: 520; }
.rv-list { display: flex; flex-direction: column; gap: 6px; }
.rv-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); }
.rv-row .subj-badge { min-width: 34px; height: 34px; border-radius: 9px; font-size: 11px; }
.rv-name { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 0; background: transparent; padding: 0; color: inherit; text-align: left; cursor: pointer; }
.rv-name small { font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-name b { font-size: 14px; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-name:hover b { color: var(--brand); }
.rv-when { font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.rv-row.late .rv-when { color: var(--warn); font-weight: 550; }
.rv-sc { min-width: 36px; text-align: center; padding: 2px 6px; border-radius: 6px; font-size: 12.5px; font-weight: 600; background: var(--surface2); box-shadow: var(--shadow-1); }
.rv-sc[data-lv="hi"] { color: var(--ok); } .rv-sc[data-lv="mid"] { color: var(--warn); } .rv-sc[data-lv="lo"] { color: var(--danger); }
@media (max-width: 560px) { .rv-when, .rv-row .bn-btn span { display: none; } }

/* ── the timer in the side menu (nav.js, timer.js) ─────────────────────── */
.sd-stop { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--surface2); box-shadow: var(--shadow-1); color: var(--danger); cursor: pointer; }
.sd-stop svg { fill: currentColor; }
.sd-timer.on { box-shadow: 0 0 0 1.5px var(--brand), 0 10px 26px -12px rgba(74,74,255,.6); }
.sd-timer.on .sd-timer-t { color: var(--brand); }
.sd-timer.on .sd-play { background: var(--brand); color: #fff; }
.sd-timer.on .sd-play svg, .sd-timer.paused .sd-play svg { margin-left: 0; }
.sd-timer.paused .sd-timer-t { color: var(--mute); }
.sd-timer-row > div { min-width: 0; flex: 1; }
.shell.mini .sd-timer { flex-direction: column; align-items: center; gap: 6px; }
.shell.mini .sd-timer-row { flex-direction: column; gap: 6px; }

/* ── wrap-up after a session (sessions.js) ─────────────────────────────── */
.wu { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.wu-hero { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--brand-soft); }
.wu-hero > div { display: flex; flex-direction: column; }
.wu-hero b { font-size: 24px; font-weight: 600; letter-spacing: -.04em; color: var(--brand-ink); }
.wu-hero div span { font-size: 12.5px; color: var(--brand-ink); opacity: .8; }
.wu-list { display: flex; flex-direction: column; gap: 6px; }
.wu-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface2); font-size: 13.5px; }
.wu-row > svg { color: var(--mute); flex-shrink: 0; }
.wu-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wu-row.done > svg { color: var(--ok); }
.wu-row em { font-style: normal; font-size: 12px; color: var(--ok); font-weight: 550; }
.ss-two { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }

/* ── Sessões de estudo (sessions.js) ───────────────────────────────────── */
.kpis.ss-kpis { grid-template-columns: repeat(4, 1fr); }
.ss-bars { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: auto; }
.ss-bars i { flex: 1; height: 100%; display: flex; align-items: flex-end; border-radius: 3px; background: var(--line); }
.ss-bars b { display: block; width: 100%; min-height: 0; border-radius: 3px; background: var(--brand); }
.ss-row .rv-name { cursor: default; }
.ss-note { font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-note:empty { display: none; }
.lib-sec h2 .cap::first-letter { text-transform: uppercase; }

/* ── Ciclo de estudos (cycle.js) ───────────────────────────────────────── */
.cy-top { display: flex; align-items: center; gap: 36px; margin-bottom: 34px; flex-wrap: wrap; }
.cy-ring { position: relative; width: 220px; height: 220px; flex-shrink: 0; }
.cy-ring circle { fill: none; stroke-width: 16; stroke-linecap: butt; }
.cy-ring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cy-ring b { font-size: 34px; font-weight: 600; letter-spacing: -.05em; }
.cy-ring small { font-size: 12px; color: var(--mute); }
.cy-now { flex: 1; min-width: 260px; max-width: 460px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px; border-radius: 16px; background: var(--surface2); box-shadow: var(--shadow-1); }
.cy-now h2 { margin: 4px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.cy-now p { margin: 0 0 10px; color: var(--mute); font-size: 13px; }
.cy-now .bn-btn { height: 40px; padding: 0 18px; }
.cy-now small { margin-top: 6px; font-size: 12px; color: var(--faint); }
.cy-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.cy-slot { display: grid; grid-template-columns: 22px auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); }
.cy-slot .i { grid-row: 1 / 3; font-size: 12px; color: var(--faint); text-align: center; }
.cy-slot .subj-badge { grid-row: 1 / 3; min-width: 32px; height: 32px; border-radius: 9px; font-size: 10.5px; }
.cy-slot .nm { grid-column: 3; grid-row: 1; font-size: 13.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy-slot .mins { grid-column: 4; grid-row: 1; font-size: 12px; color: var(--mute); }
.cy-slot .bar { grid-column: 3 / 5; grid-row: 2; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.cy-slot .bar i { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.cy-slot.full { opacity: .55; }
.cy-slot.full .bar i { background: var(--ok); }
.cy-slot.now { box-shadow: 0 0 0 1.5px var(--brand), var(--shadow-2); }
.cy-set { display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.cy-min { display: flex; align-items: center; gap: 10px; font-weight: 550; font-size: 13.5px; }
.cy-min input { width: 90px; }
.cy-min small { color: var(--mute); }
.cy-set-h, .cy-set-row { display: grid; grid-template-columns: auto 1fr 108px 108px; align-items: center; gap: 10px; }
.cy-set-h { font-size: 11.5px; font-weight: 550; color: var(--mute); padding: 0 8px; }
.cy-set-h span:first-child { grid-column: 1 / 3; }
.cy-set-h span:not(:first-child) { text-align: center; }
.cy-set-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow: auto; }
.cy-set-row { padding: 6px 8px; border-radius: 10px; background: var(--surface2); }
.cy-set-row.off { opacity: .55; }
.cy-set-row .subj-badge { min-width: 30px; height: 30px; border-radius: 8px; font-size: 10.5px; }
.cy-set-row .nm { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy-step { display: flex; align-items: center; justify-content: center; gap: 4px; }
.cy-step button { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--soft); cursor: pointer; }
.cy-step b { width: 24px; text-align: center; font-size: 15px; font-weight: 600; }
@media (max-width: 860px) { .kpis.ss-kpis { grid-template-columns: 1fr 1fr; } }

/* ── Flashcards (flashcards.js, cardreview.js) ─────────────────────────── */
.fc-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; flex-wrap: wrap; }
.fc-views { width: auto; }
.fc-views button { padding: 0 14px; }
.fc-views em { font-style: normal; min-width: 18px; height: 17px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--warn) 16%, transparent); color: color-mix(in srgb, var(--warn) 75%, var(--ink)); font-size: 10.5px; font-weight: 600; }
/* Todos / Pendentes: a block per subject, closed until opened. */
.fg-tools { display: flex; justify-content: flex-end; margin: -10px 0 10px; }
.es-select-bar .fg-tools { margin: 0 0 0 auto; }
.fg { display: flex; flex-direction: column; gap: 8px; }
.fg-sub { border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.fg-head { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px 8px 10px; cursor: pointer; user-select: none; }
.fg-head:hover { background: var(--hover); }
.fg-head:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fg-tw { width: 22px; display: grid; place-items: center; color: var(--faint); flex-shrink: 0; }
.fg-head .subj-badge { min-width: 34px; height: 30px; border-radius: 8px; font-size: 10.5px; flex-shrink: 0; }
.fg-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fg-name b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-name small { font-size: 11.5px; color: var(--mute); }
.fg-sub.dim .fg-name b { color: var(--mute); }
.fg-body:not(:empty) { border-top: 1px solid var(--line); }
.fg-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 54px; }
.fg-row + .fg-row { border-top: 1px solid var(--line); }
.fg-row:hover { background: var(--hover); }
.fg .rv-sc { box-shadow: none; }
.rv-pill { min-width: 22px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--brand-soft); color: var(--brand-ink); }
.rv-pill.late { background: color-mix(in srgb, var(--warn) 16%, transparent); color: color-mix(in srgb, var(--warn) 75%, var(--ink)); }
.fg-row.rv-r.late .rv-when { color: var(--warn); font-weight: 550; }
.fg-row.picked { background: var(--brand-soft); }
.fg-head .es-all { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; flex-shrink: 0; }
@media (max-width: 760px) {
  .fg-row { padding-left: 14px; flex-wrap: wrap; row-gap: 6px; }
  .fg-row .rv-name { flex: 1 1 100%; }
  .fg-row > .bn-btn:first-of-type { margin-left: auto; }
  .fg-head .bn-btn span { display: none; }
}
.fc-search { margin: 0; max-width: 340px; }
.fc-sleep { display: flex; align-items: center; gap: 7px; color: var(--mute); font-size: 12.5px; }
.lib-sec h2 .bn-btn { font-size: 12px; }
.lib-sec h2 .subj-badge { min-width: 28px; height: 26px; border-radius: 7px; font-size: 10px; }
.fc-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.fc-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); }
.fc-card.susp { opacity: .55; }
.fc-q { font-size: 14px; font-weight: 550; line-height: 1.45; white-space: pre-wrap; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fc-a { font-size: 13px; color: var(--mute); line-height: 1.45; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-top: 8px; border-top: 1px dashed var(--line2); }
.fc-card.open .fc-q, .fc-card.open .fc-a { -webkit-line-clamp: unset; display: block; }
.fc-meta { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 12px; color: var(--mute); }
.fc-meta .subj-badge { min-width: 24px; height: 22px; border-radius: 6px; font-size: 9.5px; }
.fc-tp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the library: tree + open folder */
.fl { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; align-items: start; }
.fl-tree { position: sticky; top: 76px; max-height: calc(100vh - 110px); overflow: auto; padding: 8px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); }
.fl-cap { margin: 12px 8px 4px; font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.fl-node { display: flex; align-items: center; gap: 2px; height: 34px; padding: 0 4px 0 calc(var(--lv) * 16px); border-radius: 8px; color: var(--soft); }
.fl-node:hover { background: var(--hover); }
.fl-node.on { background: var(--brand-soft); color: var(--brand-ink); }
.fl-node.on .fl-nm { font-weight: 600; }
.fl-node.dim .fl-nm span { color: var(--faint); }
.fl-tw { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--faint); cursor: pointer; padding: 0; }
button.fl-tw:hover { background: var(--line); color: var(--ink); }
.fl-nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 100%; border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; padding: 0 4px; }
.fl-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-nm .subj-badge { min-width: 24px; height: 20px; border-radius: 6px; font-size: 9px; flex-shrink: 0; }
.fl-nm svg { flex-shrink: 0; }
.fl-due { min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; background: color-mix(in srgb, var(--warn) 16%, transparent); color: color-mix(in srgb, var(--warn) 75%, var(--ink)); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; }
.fl-n { min-width: 24px; text-align: right; font-size: 11px; color: var(--faint); padding-right: 4px; }
.fl-acts { display: none; gap: 0; }
.fl-node:hover .fl-acts { display: flex; }
.fl-node:hover .fl-n, .fl-node:hover .fl-due { display: none; }
.fl-acts .bn-icon-btn { width: 26px; height: 26px; }
.fl-empty { margin: 12px 8px 4px; font-size: 12px; color: var(--mute); }
.fl-main { min-width: 0; }
.fl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fl-pick-folder { display: none; }
.fl-crumbs { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fl-crumbs .subj-badge, .fl-allic { min-width: 38px; height: 38px; border-radius: 10px; font-size: 12px; display: grid; place-items: center; flex-shrink: 0; }
.fl-allic { background: var(--brand-soft); color: var(--brand-ink); }
.fl-crumbs small { display: block; font-size: 12px; color: var(--mute); min-height: 0; }
.fl-crumbs small:empty { display: none; }
.fl-crumbs h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-hacts { display: flex; gap: 8px; }
.fl-top { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fl-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0 50px; font-size: 12.5px; color: var(--mute); }
.fl-stats > span { padding: 3px 10px; border-radius: 999px; background: var(--surface2); }
.fl-stats b { color: var(--ink); font-weight: 600; }
.fl-stats .warn b { color: var(--warn); }
.fl-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.fl-bar .lib-search { flex: 1 1 260px; min-width: 200px; max-width: 520px; margin: 0 auto 0 0; }
.fl-bar select { width: auto; height: 38px; font-size: 13px; }
.fl-list { display: flex; flex-direction: column; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.fl-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-top: 1px solid var(--line); }
.fl-row:first-child { border-top: 0; }
.fl-row:hover { background: color-mix(in srgb, var(--hover) 60%, transparent); }
.fl-row.susp .fl-qa { opacity: .5; }
.fl-row.picked { background: var(--brand-soft); }
.fl-ck { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; }
.fl-qa { flex: 1; min-width: 0; cursor: pointer; }
.fl-q { font-size: 14px; font-weight: 550; line-height: 1.45; color: var(--ink); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fl-a { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--mute); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fl-row.open .fl-q, .fl-row.open .fl-a { display: block; -webkit-line-clamp: unset; }
.fl-row.open .fl-a { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line2); color: var(--soft); }
.fl-where { display: block; margin-top: 5px; font-size: 11.5px; color: var(--faint); }
.fl-st { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; margin-top: 1px; border-radius: 6px; font-size: 11.5px; font-weight: 550; background: var(--surface2); color: var(--mute); white-space: nowrap; }
.fl-st[data-st="new"] { background: var(--brand-soft); color: var(--brand-ink); }
.fl-st[data-st="learn"] { background: color-mix(in srgb, var(--warn) 14%, transparent); color: color-mix(in srgb, var(--warn) 75%, var(--ink)); }
.fl-st[data-st="rev"] { background: color-mix(in srgb, var(--ok) 12%, transparent); color: color-mix(in srgb, var(--ok) 70%, var(--ink)); }
.fl-st[data-st="done"] { background: color-mix(in srgb, var(--ok) 22%, transparent); color: color-mix(in srgb, var(--ok) 80%, var(--ink)); }
.fl-st em { font-style: normal; font-size: 10.5px; color: var(--danger); }
.fl-when { flex: 0 0 64px; text-align: right; margin-top: 3px; font-size: 12px; color: var(--mute); }
.fl-row > .bn-icon-btn { margin-top: -3px; }
.fl-more { margin: 10px auto; }
.fl-none { padding: 40px 20px; text-align: center; color: var(--mute); }
.fl-none p { margin: 8px 0 14px; font-size: 13.5px; }
.fl-bulk { position: sticky; bottom: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-2); }
.fl-bulk[hidden] { display: none; }
.fl-bulk b { font-size: 13px; font-weight: 600; }
.lib-empty-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* Questões and the flashcards' Biblioteca: the tree is a full-height column
   against the left edge, the list scrolls on its own beside it. */
@media (min-width: 901px) {
  .qz-scr, .lib.split { overflow: hidden; }
  .qz-scr .lib-main, .lib.split .lib-main { min-height: 0; padding: 0; display: flex; flex-direction: column; }
  .qz-scr .lib-main > .lib-empty { margin: auto; }
  .lib.split .fc-bar { margin: 0; padding: 14px 40px; border-bottom: 1px solid var(--line); }
  .lib.split .fc-libbox { flex: 1; min-height: 0; display: flex; }
  .qz-scr .fl, .lib.split .fl { flex: 1; min-height: 0; grid-template-columns: 300px minmax(0, 1fr); gap: 0; align-items: stretch; }
  .qz-scr .fl-tree, .lib.split .fl-tree { position: static; max-height: none; min-height: 0; padding: 14px 10px; border-radius: 0; box-shadow: none; border-right: 1px solid var(--line); }
  .qz-scr .fl-main, .lib.split .fl-main { min-height: 0; overflow: auto; padding: 24px 40px 32px; }
}
@media (max-width: 900px) {
  .fl { grid-template-columns: 1fr; }
  .fl-tree { display: none; position: static; max-height: 55vh; }
  .fl.tree-on .fl-tree { display: block; }
  .fl-pick-folder { display: inline-flex; max-width: 100%; }
  .fl-pick-folder span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fl-crumbs { display: none; }
  .fl-stats { margin-left: 0; }
  .fl-acts { display: flex; }
  .fl-node:hover .fl-n, .fl-node:hover .fl-due { display: grid; }
  .fl-when { display: none; }
  .fl-head { gap: 8px; }
  .fl-hacts [data-h="pick"] span, .fl-hacts [data-h="add"] span { display: none; }
  .fl-pick-folder { flex: 1 1 100%; min-width: 0; justify-content: flex-start; height: 38px; font-size: 13.5px; }
  .fl-pick-folder span { flex: 1; text-align: left; }
  .fl-head .ed-grow { display: none; }
  .fl-hacts { width: 100%; }
  .fl-hacts [data-h="study"] { margin-left: auto; }
  .fl-bar .lib-search { flex: 1 1 100%; order: -1; }
  .fl-bar select { flex: 1; min-width: 0; }
  .fl-row { flex-wrap: wrap; gap: 6px 12px; }
  .fl-qa { flex: 1 1 calc(100% - 50px); }
  .fl-st { order: 3; margin-left: 0; }
}
/* import from Anki */
.ak { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.ak-file { display: flex; align-items: center; gap: 10px; margin: 0; }
.ak-file span { display: flex; flex-direction: column; }
.ak-file small { font-size: 12px; color: var(--mute); }
.ak-drop { margin: 0; }
.ak-groups { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow: auto; padding-right: 4px; }
.ak-g { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ak-gh { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface2); }
.ak-lb { font-size: 11.5px; font-weight: 600; color: var(--mute); }
.ak-gh select { flex: 1; font-weight: 600; }
.ak-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); }
.ak-deck { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ak-deck b { font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-deck small { font-size: 11.5px; color: var(--mute); }
.ak-row select { flex: 0 0 46%; min-width: 0; height: 34px; font-size: 12.5px; }
.ak-g.off .ak-rows, .ak-row.off .ak-deck { opacity: .45; }
.ak-warn { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12.5px; color: color-mix(in srgb, var(--warn) 70%, var(--ink)); }
.ak-warn svg { flex-shrink: 0; margin-top: 1px; }
.ak-sum { margin: 0; font-size: 13px; font-weight: 550; }
.ak .bn-check { margin: 0; font-size: 13px; }
@media (max-width: 600px) { .ak-row { flex-direction: column; align-items: stretch; } .ak-row select { flex: auto; } }
.fc-imgs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fc-imgs img { max-width: 100%; border-radius: 8px; background: var(--surface2); }
.cr-imgs img { max-height: 320px; object-fit: contain; }
.fl-thumbs { justify-content: flex-start; margin-top: 8px; }
.fl-thumbs img { width: 52px; height: 52px; object-fit: cover; border: 1px solid var(--line); }
.fl-row.open .fl-thumbs img { width: auto; height: auto; max-width: 100%; max-height: 260px; object-fit: contain; }
.fc-ed .fld > span { display: flex; align-items: center; gap: 8px; }
.fc-addpic { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--brand-ink); font: inherit; font-size: 12px; font-weight: 550; cursor: pointer; }
.fc-addpic:hover { background: var(--brand-soft); }
.fc-pics { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-pics:not(:empty) { margin-top: 8px; }
.fc-pic { position: relative; }
.fc-pic img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.fc-pic button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: var(--surface); cursor: pointer; padding: 0; }
.fc-pichint { margin: -4px 0 0; }
.fc-ed { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.fc-ed .fld { margin: 0; }
.fc-ed .fld > span { display: block; font-size: 11.5px; font-weight: 600; color: var(--mute); margin-bottom: 6px; }
.fc-ed textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; font-size: 14px; }
.fc-topic { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 9px; background: var(--surface2); color: var(--ink); font-size: 13px; text-align: left; cursor: pointer; }
.fc-topic span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-topic svg { color: var(--mute); flex-shrink: 0; }
.fc-topic.none span { color: var(--brand); font-weight: 550; }
.fc-mode { width: max-content; }
.fc-mode button { padding: 0 14px; }
/* the study session */
.cr { position: fixed; inset: 0; z-index: 10080; display: flex; flex-direction: column; background: var(--bg); }
.cr-hdr { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px; }
.cr-where { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cr-where b { font-size: 14px; font-weight: 600; }
.cr-where small { font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-n { font-size: 13px; color: var(--mute); }
.cr-prog { height: 3px; background: var(--line); }
.cr-prog i { display: block; height: 100%; background: var(--brand); transition: width .3s; }
.cr-stage { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 28px 20px; }
.cr-card { width: 100%; max-width: 720px; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px 44px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-2); text-align: center; }
.cr-q { font-size: 22px; font-weight: 550; line-height: 1.45; letter-spacing: -.01em; white-space: pre-wrap; }
.cr-card hr { width: 60%; border: 0; border-top: 1px dashed var(--line2); margin: 6px 0; }
.cr-a { font-size: 18px; line-height: 1.6; color: var(--soft); white-space: pre-wrap; }
.cr-foot { display: flex; justify-content: center; padding: 18px 20px 28px; }
.cr-show { height: 46px; padding: 0 26px; font-size: 14.5px; gap: 12px; }
.cr-show kbd { background: transparent; color: inherit; border-color: currentColor; opacity: .6; }
.cr-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 150px)); gap: 10px; width: 100%; justify-content: center; }
.cr-g { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 0; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); cursor: pointer; transition: transform .1s, box-shadow .15s; }
.cr-g:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.cr-g b { font-size: 14.5px; font-weight: 600; color: var(--gc); }
.cr-g small { font-size: 12px; color: var(--mute); }
.cr-g kbd { position: absolute; top: 6px; right: 8px; font-size: 10px; padding: 0 4px; opacity: .6; }
.cr-g.again, .cr-tally .again { --gc: #e5484d; } .cr-g.hard, .cr-tally .hard { --gc: #d97706; } .cr-g.good, .cr-tally .good { --gc: #16a34a; } .cr-g.easy, .cr-tally .easy { --gc: #4a4aff; }
.cr-end { text-align: center; max-width: 460px; }
.cr-end h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.cr-end p { margin: 0 0 20px; color: var(--mute); }
.cr-tally { display: flex; justify-content: center; gap: 10px; }
.cr-tally span { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 10px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); font-size: 12px; color: var(--mute); }
.cr-tally b { font-size: 20px; font-weight: 600; color: var(--gc); }
@media (max-width: 560px) { .cr-grades { grid-template-columns: repeat(2, 1fr); } .cr-card { padding: 28px 20px; } .cr-q { font-size: 19px; } }
/* the topic panel's block */
.tp-fc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; box-shadow: var(--shadow-1); }
.tp-fc:empty { display: none; }
.tp-fc-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--brand-soft); color: var(--brand); flex-shrink: 0; }
.tp-fc > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-fc b { font-size: 13px; font-weight: 580; }
.tp-fc small { font-size: 11.5px; color: var(--mute); }
.tp-ql:not(.none) { flex-wrap: wrap; }
.tp-ql > .tp-ql-acts { flex: 1 1 100%; flex-direction: row; gap: 6px; }
.tp-ql-acts .bn-btn { flex: 1; justify-content: center; }
.tp-ql.none { box-shadow: none; border: 1px dashed var(--line2); }
.tp-ql.none .tp-fc-ic { background: var(--surface2); color: var(--mute); }
.tp-ql b, .tp-ql small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Discursivas (essays.js) ───────────────────────────────────────────── */
.es-lines { max-width: 220px; }
.es-stage { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px; }
.es-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; max-width: 1360px; margin: 0 auto; align-items: start; }
.es-cols > section { display: flex; flex-direction: column; min-height: 0; padding: 18px 20px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); overflow: auto; }
.es-cols h3 { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .5px; }
.es-cols h3 + .es-text + h3 { margin-top: 22px; }
.es-text { font-size: 15px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
.es-model .es-text { color: var(--soft); }
/* the answer sheet, to scale: --mm is a millimetre of the page on screen */
.es-sheet { --mm: 3.6px; position: relative; display: grid; grid-template-columns: auto 1fr; padding: calc(var(--mm) * 6) calc(var(--mm) * 6) calc(var(--mm) * 6) 0; border-radius: 6px; background: #fffdf8; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 6px 18px -8px rgba(0,0,0,.18); color-scheme: light; }
.es-cols > section.es-write, .es-cols > section.es-mine { background: transparent; box-shadow: none; padding: 0 2px; overflow: visible; }
.es-nums { margin: 0; padding: 0 calc(var(--mm) * 3) 0 calc(var(--mm) * 4); list-style: none; border-right: 2px solid #f0a0a0; font: 500 calc(var(--mm) * 3.2) / calc(var(--mm) * 7.5) var(--mono); color: #9aa3b5; text-align: right; user-select: none; }
.es-nums li.over { color: #e5484d; }
.es-hand { display: block; width: 100%; margin: 0; padding: 0 0 0 calc(var(--mm) * 3); border: 0; outline: none; resize: none; overflow: hidden; background: transparent;
  font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive; font-size: calc(var(--mm) * 6.4); font-weight: 450; line-height: calc(var(--mm) * 7.5);
  color: #1d2a6b; tab-size: calc(var(--mm) * 15); -moz-tab-size: calc(var(--mm) * 15); white-space: pre-wrap; overflow-wrap: break-word;
  background-image: linear-gradient(transparent calc(var(--mm) * 7.5 - 1px), #c9d6ee calc(var(--mm) * 7.5 - 1px)); background-size: 100% calc(var(--mm) * 7.5); background-attachment: local; }
.es-hand::placeholder { color: #a8b0c4; }
.es-sheet.ro .es-hand { min-height: calc(var(--mm) * 7.5); }
.es-write { display: flex; flex-direction: column-reverse; gap: 8px; }
.es-count { display: flex; justify-content: flex-end; gap: 14px; font-size: 12px; color: var(--mute); }
.es-count .over { color: var(--danger); font-weight: 600; }
.es-crit { display: flex; flex-direction: column; gap: 6px; }
.es-c { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line2); cursor: pointer; font-size: 14px; line-height: 1.45; }
.es-c input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--ok); flex-shrink: 0; }
.es-c span { flex: 1; }
.es-c small { font: 500 11px var(--mono); color: var(--mute); padding: 1px 6px; border-radius: 6px; background: var(--surface2); }
.es-c.on { border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.es .cr-foot { align-items: center; gap: 10px; }
.es-score { display: flex; flex-direction: column; align-items: flex-end; margin-right: auto; padding-left: 8px; }
.es-score b { font-size: 26px; font-weight: 600; letter-spacing: -.04em; }
.es-score b[data-lv="hi"] { color: var(--ok); } .es-score b[data-lv="mid"] { color: var(--warn); } .es-score b[data-lv="lo"] { color: var(--danger); }
.es-score small { font-size: 11.5px; color: var(--mute); }
.es-hist { display: flex; flex-direction: column; gap: 8px; }
.es-try { border-radius: 12px; background: var(--surface2); padding: 10px 14px; }
.es-try summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; font-size: 13px; color: var(--soft); }
.es-try summary b { font-size: 16px; color: var(--ink); min-width: 48px; }
.es-try summary small { margin-left: auto; color: var(--mute); }
.es-try .es-text { margin: 10px 0; font-size: 13.5px; }
.es-try ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mute); }
.es-try li { display: flex; gap: 6px; align-items: flex-start; }
.es-try li svg { color: var(--danger); margin-top: 2px; flex-shrink: 0; }
.es-try li.ok { color: var(--ink); } .es-try li.ok svg { color: var(--ok); }
@media (max-width: 860px) { .es-cols { grid-template-columns: 1fr; height: auto; } }
/* Side by side, each column scrolls on its own: the statement stays in view
   while the sheet scrolls; when grading, the answer and the model/criteria. */
@media (min-width: 861px) {
  .es-stage { overflow: hidden; display: flex; flex-direction: column; }
  .es-cols { flex: 1; min-height: 0; width: 100%; align-items: stretch; }
  .es-cols > section { min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .es-cols > section.es-write, .es-cols > section.es-mine { overflow: auto; padding-right: 8px; }
  .es-write { flex-direction: column; }
  .es-write > .es-count { order: 1; position: sticky; bottom: 0; z-index: 1; padding: 8px 2px; background: var(--bg); }
}

/* ── Simulados (mocks.js) ──────────────────────────────────────────────── */
.mk-form { display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.mk-form .fld { margin: 0; }
.mk-form .fld > span { display: block; font-size: 11.5px; font-weight: 600; color: var(--mute); margin-bottom: 6px; }
.mk-row2 { display: grid; grid-template-columns: 1fr 160px 120px; gap: 10px; }
.mk-opts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mk-opts .tp-seg { width: auto; }
.mk-opts .tp-seg button { padding: 0 14px; }
.mk-opts .bn-check { margin: 0; font-size: 13px; }
.mk-table { display: flex; flex-direction: column; gap: 4px; }
.mk-th, .mk-tr { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 8px; }
.mk-th { font-size: 11px; font-weight: 600; color: var(--mute); padding: 0 6px; }
.mk-th span:first-child { grid-column: 1 / 3; }
.mk-th span:not(:first-child) { text-align: center; }
.mk-tr { padding: 4px 6px; border-radius: 10px; background: var(--surface2); }
.mk-tr .subj-badge { min-width: 30px; height: 28px; border-radius: 8px; font-size: 10px; }
.mk-tr .nm { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-tr input { height: 32px; padding: 0 8px; text-align: center; font-size: 13.5px; }
.mk-tr .pc { text-align: right; font-size: 13px; }
.mk-tr .pc[data-lv="hi"] { color: var(--ok); } .mk-tr .pc[data-lv="mid"] { color: var(--warn); } .mk-tr .pc[data-lv="lo"] { color: var(--danger); }
.mk-total { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); font-size: 13px; font-weight: 550; }
.mk-total b { font-size: 24px; font-weight: 600; letter-spacing: -.04em; }
.mk-errs { display: flex; flex-direction: column; gap: 8px; }
.mk-err { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); }
.mk-err-h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mk-err-h b { flex: 1; min-width: 0; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-err-lv { display: flex; gap: 14px; font-size: 12.5px; color: var(--soft); }
.mk-err-lv label { display: flex; align-items: center; gap: 8px; }
.mk-err-lv select { width: 64px; height: 32px; padding: 0 8px; }
.sm-chart { padding: 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); }
.sm-chart svg { display: block; width: 100%; height: 170px; overflow: visible; }
.sm-chart .gl { stroke: var(--line); }
.sm-chart .gt { fill: var(--faint); font: 10px var(--mono); }
.sm-chart .ln { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sm-chart .ar { fill: color-mix(in srgb, var(--brand) 10%, transparent); }
.sm-chart circle { fill: var(--brand); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sm-bars { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.sm-bars i { width: 8px; height: 100%; display: flex; align-items: flex-end; border-radius: 3px; background: var(--line); }
.sm-bars b { display: block; width: 100%; border-radius: 3px; }
.sm-detail { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.sm-dt { display: flex; flex-direction: column; gap: 6px; }
.sm-dr { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 120px 46px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--surface2); font-size: 13px; }
.sm-dr .subj-badge { min-width: 30px; height: 28px; border-radius: 8px; font-size: 10px; }
.sm-dr .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-dr > span.num { color: var(--mute); font-size: 12px; }
.sm-dr .bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sm-dr .bar i { display: block; height: 100%; background: var(--brand); }
.sm-dr b { text-align: right; }
.sm-errs { display: flex; flex-direction: column; gap: 6px; }
.sm-errs .wu-row span { cursor: pointer; }
.sm-errs .wu-row em { color: var(--mute); font-weight: 500; }
.sm-notes { margin: 0; color: var(--soft); white-space: pre-wrap; }
@media (max-width: 640px) { .mk-row2 { grid-template-columns: 1fr 1fr; } .mk-row2 .fld:first-child { grid-column: 1 / -1; } .sm-dr { grid-template-columns: 30px 1fr 46px; } .sm-dr > span.num, .sm-dr .bar { display: none; } }

/* ── Analytics (analytics.js) ──────────────────────────────────────────── */
.an { position: relative; }
.an-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 22px; }
.an-period { width: auto; }
.an-period button { padding: 0 14px; }
.an-subject { width: auto; min-width: 220px; height: 34px; padding: 0 10px; font-size: 13px; }
.kpis.an-kpis { grid-template-columns: repeat(5, 1fr); margin-bottom: 18px; }
.an-kpis .kpi-v small { font-size: 14px; color: var(--mute); font-weight: 500; }
.an-d { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.an-d.up { color: var(--ok); } .an-d.down { color: var(--danger); }
.an-card { padding: 18px 20px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); min-width: 0; }
.an-card > header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.an-card h2 { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.an-card h3 { margin: 18px 0 10px; font-size: 12.5px; font-weight: 600; color: var(--soft); }
.an-sub { font-size: 12px; color: var(--mute); }
.an-wide { margin-bottom: 14px; }
.an-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
/* time: columns from one baseline, hairline grid, 4px rounded tops */
.an-cols { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 180px auto; column-gap: 8px; }
.an-yax { grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font: 10.5px var(--mono); color: var(--faint); transform: translateY(6px); }
.an-plot { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: end; column-gap: 2px; border-bottom: 1px solid var(--line2); }
.an-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.an-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; outline: none; }
.an-col b { width: 100%; max-width: 24px; min-height: 0; border-radius: 4px 4px 0 0; background: var(--brand); transition: filter .12s; }
.an-col:hover b, .an-col:focus-visible b { filter: brightness(1.15); }
.an-col:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-soft); border-radius: 4px; }
.an-xax { grid-column: 2; display: grid; grid-template-columns: repeat(var(--n), 1fr); column-gap: 2px; padding-top: 6px; font-size: 10.5px; color: var(--mute); }
.an-xax span { text-align: center; white-space: nowrap; overflow: visible; }
/* steadiness: one hue, light → dark */
.an-heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.an-heat i { aspect-ratio: 1; border-radius: 3px; outline: none; }
.an-heat i:hover, .an-heat i:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }
.an-heat .l0, .an-legend .l0 { background: var(--line); }
.an-heat .l1, .an-legend .l1 { background: color-mix(in srgb, var(--brand) 25%, var(--surface)); }
.an-heat .l2, .an-legend .l2 { background: color-mix(in srgb, var(--brand) 50%, var(--surface)); }
.an-heat .l3, .an-legend .l3 { background: color-mix(in srgb, var(--brand) 75%, var(--surface)); }
.an-heat .l4, .an-legend .l4 { background: var(--brand); }
.an-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--mute); }
.an-legend i { width: 12px; height: 12px; border-radius: 3px; }
.an-legend span { margin: 0 4px; }
/* topics: status stack (with a 2px gap) and the spread */
.an-stack { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; }
.an-stack i { min-width: 3px; background: var(--st); outline: none; }
.an-stack i:hover, .an-stack i:focus-visible { filter: brightness(1.12); }
.an-stack.mini { height: 6px; width: 90px; border-radius: 3px; }
.an-stack.mini i { min-width: 0; }
.an-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--soft); }
.an-keys span { display: inline-flex; align-items: center; gap: 6px; }
.an-keys i { width: 10px; height: 10px; border-radius: 3px; background: var(--st); }
.an-keys b { color: var(--ink); } .an-keys small { color: var(--mute); }
.an-spread { display: flex; flex-direction: column; gap: 8px; }
.an-spread > div { display: grid; grid-template-columns: 1fr 52px 28px; align-items: center; gap: 10px; font-size: 12px; color: var(--mute); }
.an-spread b.num { text-align: right; color: var(--ink); font-size: 12.5px; }
.an-bar { display: block; height: 10px; border-radius: 0 4px 4px 0; background: transparent; }
.an-bar b { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--brand); outline: none; }
.an-bar b:hover, .an-bar b:focus-visible { filter: brightness(1.15); }
/* study first */
.an-first { display: flex; flex-direction: column; gap: 4px; }
.an-fr { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.an-fr:hover { background: var(--surface2); }
.an-fr .subj-badge { min-width: 28px; height: 26px; border-radius: 7px; font-size: 10px; }
.an-fr .nm { min-width: 0; display: flex; flex-direction: column; }
.an-fr .nm b { font-size: 13.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-fr .nm small { font-size: 11.5px; color: var(--mute); }
.an-rel { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--soft); }
.an-rel svg { color: #f97316; }
/* practice */
.an-prac { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.an-prac > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface2); }
.an-prac b { font-size: 24px; font-weight: 600; letter-spacing: -.04em; }
.an-prac small { font-size: 12px; color: var(--mute); }
/* by subject */
.an-table { display: flex; flex-direction: column; gap: 2px; }
.an-tr { display: grid; grid-template-columns: minmax(160px, 1.4fr) minmax(120px, 1.2fr) 86px 64px 130px 92px 74px; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; font: inherit; font-size: 13px; }
button.an-tr { cursor: pointer; }
button.an-tr:hover { background: var(--surface2); }
.an-th { font-size: 11.5px; font-weight: 600; color: var(--mute); padding-top: 0; }
.an-tr .nm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.an-tr .nm b { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-tr .nm .subj-badge { min-width: 28px; height: 26px; border-radius: 7px; font-size: 10px; }
.an-tcell { display: grid; grid-template-columns: 1fr 56px; align-items: center; gap: 8px; }
.an-tcell small { text-align: right; color: var(--soft); }
.an-share { display: flex; flex-direction: column; line-height: 1.2; }
.an-share small, .an-tr small { font-size: 11px; color: var(--mute); }
.an-prog { display: flex; align-items: center; gap: 8px; }
.an-late { color: var(--danger); font-weight: 600; }
.an-tip { position: absolute; z-index: 20; pointer-events: none; display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 9px; background: #16161c; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.25); white-space: nowrap; }
.an-tip b { font: 600 13px var(--mono); }
.an-tip span { font-size: 11.5px; color: rgba(255,255,255,.7); }
@media (max-width: 1200px) { .kpis.an-kpis { grid-template-columns: repeat(3, 1fr); } .an-tr { grid-template-columns: minmax(140px, 1.4fr) minmax(110px, 1fr) 70px 56px 110px 0 64px; } .an-tr > :nth-child(6) { display: none; } }
@media (max-width: 900px) { .an-grid2 { grid-template-columns: 1fr; } .kpis.an-kpis { grid-template-columns: 1fr 1fr; } .an-tr { grid-template-columns: 1fr 64px 64px; } .an-tr > :nth-child(2), .an-tr > :nth-child(5), .an-tr > :nth-child(6) { display: none; } }

/* ── AI correction (essayai.js) ────────────────────────────────────────── */
.es-mode { width: auto; }
.es-mode button { padding: 0 12px; gap: 6px; }
.es-write .es-count { align-items: center; }
.es-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; border: 1.5px dashed var(--line2); border-radius: 14px; background: var(--surface); text-align: center; color: var(--soft); }
.es-drop svg { color: var(--brand); }
.es-drop b { font-size: 15px; color: var(--ink); }
.es-drop p { margin: 0 0 8px; max-width: 420px; font-size: 13px; line-height: 1.5; color: var(--mute); }
.es-pdf-bar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soft); }
.es-pdf-bar span { display: inline-flex; align-items: center; gap: 6px; flex: 1; }
.es-pdf { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.es-pdf canvas { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 6px 18px -8px rgba(0,0,0,.18); background: #fff; }
.ai-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; margin-bottom: 18px; border-radius: 14px; background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent); }
.ai-card-h { display: flex; gap: 10px; align-items: flex-start; }
.ai-card-h .tp-fc-ic { background: var(--surface); }
.ai-card-h b { display: block; font-size: 14px; color: var(--ink); }
.ai-card-h small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--soft); }
.ai-card-u { font-size: 12px; color: var(--brand-ink); }
.ai-card .bn-btn { align-self: flex-start; height: 38px; }
.ai-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: aiSpin .8s linear infinite; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
.es-or { margin-top: 6px !important; padding-top: 14px; border-top: 1px solid var(--line); }
.ai-res { display: flex; flex-direction: column; gap: 16px; font-size: 13.5px; color: var(--ink); }
.ai-head { display: flex; align-items: center; gap: 20px; padding: 14px 16px; border-radius: 14px; background: var(--surface2); }
.ai-total { display: flex; align-items: baseline; gap: 2px; }
.ai-total b { font-size: 40px; font-weight: 600; letter-spacing: -.05em; }
.ai-total b[data-lv="hi"] { color: var(--ok); } .ai-total b[data-lv="mid"] { color: var(--warn); } .ai-total b[data-lv="lo"] { color: var(--danger); }
.ai-total small { font-size: 16px; color: var(--mute); }
.ai-parts { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ai-parts > div { display: grid; grid-template-columns: 74px 1fr 46px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--soft); }
.ai-parts > div > b { text-align: right; color: var(--ink); }
.ai-res h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .4px; }
.ai-text { line-height: 1.6; white-space: pre-wrap; color: var(--soft); }
.ai-warn { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 12%, var(--surface)); color: color-mix(in srgb, var(--warn) 70%, var(--ink)); font-size: 12.5px; }
.ai-crit, .ai-issues, .ai-recs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ai-crit li { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line2); }
.ai-crit li > svg { flex-shrink: 0; margin-top: 2px; }
.ai-crit li.atendido > svg { color: var(--ok); } .ai-crit li.parcial > svg { color: var(--warn); } .ai-crit li.nao_atendido > svg { color: var(--danger); }
.ai-crit b { font-weight: 550; }
.ai-st { margin-left: 6px; font-size: 11px; color: var(--mute); }
.ai-crit p, .ai-issues p, .ai-recs p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--soft); }
.ai-issues li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ai-issues li.none { color: var(--mute); border: 0; }
.ai-issues .chip { flex-shrink: 0; margin-top: 2px; }
.ai-issues s { color: var(--danger); text-decoration-thickness: 1.5px; }
.ai-fix { margin-left: 8px; color: var(--ok); font-weight: 550; }
.ai-fix::before { content: '→ '; color: var(--mute); font-weight: 400; }
.ai-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; color: var(--soft); }
.ai-rec { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.ai-recs li b { font-weight: 600; }
.ai-recs li small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--mute); }
.ai-tr summary { cursor: pointer; color: var(--mute); font-size: 12.5px; }
.ai-tr .es-tr { margin-top: 8px; padding: 12px; border-radius: 10px; background: var(--surface2); font-size: 13px; }
.ai-confirm { display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.ai-confirm p { margin: 0 !important; }
.ai-rule { margin: 0; }
.ai-rule > span { display: block; font-size: 11.5px; font-weight: 600; color: var(--mute); margin-bottom: 6px; }
.ai-rule-once { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.ai-rule-once p { display: flex; align-items: flex-start; gap: 6px; margin: 0 !important; font-size: 12.5px; color: color-mix(in srgb, var(--warn) 70%, var(--ink)); }
.ai-rule-once svg { flex-shrink: 0; margin-top: 1px; }
.ai-rule-once .bn-check { margin: 0; font-size: 13px; }
.ai-meter { display: flex; flex-direction: column; gap: 6px; }
.ai-meter-bar { display: flex; gap: 4px; }
.ai-meter-bar i { flex: 1; height: 8px; border-radius: 4px; background: var(--brand); }
.ai-meter-bar i.used { background: var(--line2); }
.ai-meter small { font-size: 12px; color: var(--mute); }
.ai-buy { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.ai-buy p { margin: 0 !important; }
.ai-buy-why { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 12%, var(--surface)); color: color-mix(in srgb, var(--warn) 70%, var(--ink)); font-size: 13px; }
.ai-qty { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ai-qty button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--surface2); box-shadow: var(--shadow-1); color: var(--ink); cursor: pointer; }
.ai-qty b { min-width: 48px; text-align: center; font-size: 34px; font-weight: 600; letter-spacing: -.04em; }
.ai-qty-presets { display: flex; justify-content: center; gap: 6px; }
.ai-qty-presets .tag-chip { min-width: 44px; }
.ai-panel { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); }
.ai-panel.out { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--warn) 60%, transparent); }
.ai-panel-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ai-panel-txt b { font-size: 13.5px; }
.ai-panel-txt small { font-size: 12px; color: var(--mute); }
.ai-panel-acts { display: flex; gap: 6px; flex-shrink: 0; }
.cloud-ai { margin: 12px 0 4px; }
.cloud-ai .ai-panel { box-shadow: none; background: var(--surface2); }
.es-ai-top { display: grid; gap: 14px; margin-bottom: 22px; }
.es-ai-r:empty, .es-ai-u:empty { display: none; }
.ai-rec-panel .ai-recs { margin-top: 14px; }

/* ── Discursivas: the tabs and the AI corrections' history ─────────────── */
.es-tabs { width: max-content; margin: 18px 0 0 max(40px, calc((100% - 1240px) / 2 + 40px)); }
.es-tabs button { padding: 0 14px; gap: 6px; }
.es-scr .lib-main { padding-top: 20px; }
.es-count-ai { font-size: 12.5px; color: var(--mute); }
.es-ai-list { display: flex; flex-direction: column; gap: 8px; }
.es-ai-item { border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); }
.es-ai-item[open] { box-shadow: var(--shadow-2); }
.es-ai-item summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.es-ai-item summary::-webkit-details-marker { display: none; }
.es-ai-item .subj-badge { min-width: 32px; height: 30px; border-radius: 8px; font-size: 10.5px; }
.es-ai-item .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.es-ai-item .nm b { font-size: 14px; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-ai-item .nm small { font-size: 12px; color: var(--mute); }
.es-ai-parts { font-size: 12px; color: var(--mute); white-space: nowrap; }
.es-ai-grade { min-width: 52px; text-align: center; padding: 4px 8px; border-radius: 8px; font-size: 17px; font-weight: 600; background: var(--surface2); }
.es-ai-grade[data-lv="hi"] { color: var(--ok); } .es-ai-grade[data-lv="mid"] { color: var(--warn); } .es-ai-grade[data-lv="lo"] { color: var(--danger); }
.es-ai-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; padding: 4px 16px 18px; border-top: 1px solid var(--line); }
.es-ai-ans { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.es-ai-ans h4 { margin: 0; font-size: 12px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .4px; }
.es-ai-cor { padding-top: 14px; }
@media (max-width: 900px) { .es-ai-body { grid-template-columns: 1fr; } .es-ai-parts { display: none; } .es-tabs { margin: 14px 16px 0; } }

/* ── the exam's rule and the line weights ──────────────────────────────── */
.es-lines { max-width: none; }
.es-lines-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.es-lines-row input { width: 96px; }
.es-lines small { display: block; margin-top: 6px; font-size: 11.5px; color: var(--mute); }
.es-rule-pick small { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--mute); }
.es-rule-help { margin: 0 !important; line-height: 1.5; }
.es-select-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.es-picked { font-size: 12.5px; color: var(--mute); }
.lib-sec h2 .es-all, .rv-row .es-pick { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; flex-shrink: 0; }
.rv-row.picked { box-shadow: 0 0 0 1.5px var(--brand), var(--shadow-1); }
.es-bulk { position: sticky; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; }
.es-bulk b { font-weight: 600; }
.es-bulk span { color: var(--mute); }
.es-bulk select { width: auto; min-width: 220px; height: 32px; padding: 0 8px; font-size: 13px; }
.es-rules-intro { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 18px; color: var(--soft); font-size: 13px; line-height: 1.5; }
.es-rules-intro svg { flex-shrink: 0; margin-top: 2px; color: var(--brand); }
.es-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.es-rule-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); }
.es-rule-h { display: flex; align-items: center; gap: 8px; }
.es-rule-h b { flex: 1; min-width: 0; font-size: 14px; font-weight: 580; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-rule-h small { font-size: 12px; color: var(--mute); white-space: nowrap; }
.es-rule-card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--soft); white-space: pre-wrap; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.es-rule-card.open p { -webkit-line-clamp: unset; display: block; }
.ai-how:empty { display: none; }
.ai-lines { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--surface2); font-size: 12.5px; color: var(--soft); }
.ai-edital { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); }
.ai-edital span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.ai-edital b { font-size: 18px; font-weight: 600; }
.ai-edital p { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--soft); white-space: pre-wrap; }
.ai-sev { flex-shrink: 0; margin-left: auto; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; }
.ai-sev.leve { color: var(--mute); background: var(--surface2); }
.ai-sev.medio { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.ai-sev.grave { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.es-rule-chip { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

/* ── Ctrl K: go anywhere (palette.js) ──────────────────────────────────── */
.pal { position: fixed; inset: 0; z-index: 10095; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(10,10,16,.35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pal-box { width: 100%; max-width: 600px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.pal-in { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--mute); }
.pal-in input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 16px; }
.pal-in input::placeholder { color: var(--faint); }
.pal-list { max-height: 50vh; overflow: auto; padding: 6px; }
.pal-h { padding: 10px 12px 4px; font-size: 11px; font-weight: 550; color: var(--faint); }
.pal-it { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-size: 13.5px; text-align: left; cursor: pointer; }
.pal-it svg { color: var(--mute); flex-shrink: 0; }
.pal-it span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-it small { color: var(--mute); font-size: 12px; margin-left: 6px; }
.pal-it.on { background: var(--hover); }
.pal-it.on svg { color: var(--brand); }
.pal-it kbd { visibility: hidden; }
.pal-it.on kbd { visibility: visible; }
.pal-none { padding: 22px; text-align: center; color: var(--mute); }
.pal-foot { display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--mute); }

/* ── today, above the subjects (home.js) ──────────────────────────────── */
.hello { margin: 0 0 24px; }
.hello h1 { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; color: var(--ink); }
.hello h1 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.12em; letter-spacing: -.01em; color: var(--brand); }
.hello p { margin: 8px 0 0; color: var(--mute); font-size: 14px; }
.hello p::first-letter { text-transform: uppercase; }
.kpis { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 12px; margin: 0 0 34px; }
.kpi { position: relative; overflow: hidden; min-height: 116px; border-radius: 14px; padding: 16px 18px; background: var(--surface2); box-shadow: var(--shadow-1); display: flex; flex-direction: column; }
.kpi-lb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--mute); }
.kpi-v { margin: 10px 0 4px; font: 600 30px/1 var(--mono); letter-spacing: -.05em; color: var(--ink); }
.kpi-v small { font-size: 14px; font-weight: 500; letter-spacing: -.02em; color: var(--mute); }
.kpi-s { font-size: 12.5px; color: var(--mute); margin-top: auto; }
.kpi.focus {
  color: #fff; border: 0; text-align: left; cursor: pointer; font: inherit;
  background: radial-gradient(120% 140% at 100% 0%, #8b3dff 0%, rgba(139,61,255,0) 55%), linear-gradient(135deg, #4a4aff 0%, #5b3cf5 100%);
  box-shadow: 0 14px 30px -14px rgba(74,74,255,.75), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .18s, box-shadow .18s;
}
.kpi.focus:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(74,74,255,.85), inset 0 1px 0 rgba(255,255,255,.18); }
.kpi.focus .kpi-lb, .kpi.focus .kpi-s { color: rgba(255,255,255,.78); }
.kpi.focus .kpi-v { font-family: var(--font); font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kpi-row { display: flex; align-items: center; gap: 10px; margin-top: auto; min-width: 0; }
.kpi-row .kpi-s { flex: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-go { flex-shrink: 0; height: 30px; padding: 0 12px; border-radius: 8px; display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); font-size: 12.5px; font-weight: 550; }
@media (max-width: 1100px) { .kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kpis { grid-template-columns: 1fr; } .hello h1 { font-size: 26px; } }

/* ── a module's title in its header ─────────────────────────────────── */
.scr-title { display: flex; align-items: center; gap: 8px; color: var(--brand); }
.scr-title h1 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }

/* ── Minhas marcações ─────────────────────────────────────────────────── */
.mk { overflow: hidden; }
.mk-wrap { flex: 1; min-height: 0; display: flex; }
.mk-side { width: 236px; flex-shrink: 0; overflow: auto; padding: 18px 12px 24px 18px; display: flex; flex-direction: column; gap: 1px; border-right: 1px solid var(--line); }
.mk-nav {
  display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 8px;
  color: var(--soft); text-decoration: none; font-size: 13.5px; font-weight: 480;
}
.mk-nav svg { flex-shrink: 0; color: var(--mute); }
.mk-nav span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-nav em { font: 500 11.5px var(--mono); font-style: normal; color: var(--mute); }
.mk-nav:hover { background: var(--hover); color: var(--ink); }
.mk-nav.on { background: var(--hover); color: var(--ink); font-weight: 560; }
.mk-nav.on svg { color: var(--brand); }
.mk-nav-h { margin: 16px 10px 6px; font-size: 11px; font-weight: 550; color: var(--faint); min-height: 1px; }
.mk-main { flex: 1; min-width: 0; overflow: auto; padding: 22px 40px 32px 32px; }
.mk-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; min-height: 36px; }
.mk-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-path { margin: -10px 0 16px; color: var(--mute); font-size: 13px; }
.mk-none { color: var(--mute); padding: 6px 2px; }
.mk-more { margin-top: 12px; }
.mk-how { max-width: 560px; margin: 8px auto 0; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--line); color: var(--soft); font-size: 13px; line-height: 1.6; }
kbd { display: inline-block; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface2); font: 600 11.5px/18px inherit; color: var(--soft); }
.mk-av {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: #fff; background: hsl(var(--h) 55% 50%);
}
/* the access card */
.mk-access {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin: 0 0 24px; border-radius: 14px;
  background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent);
}
.mk-access-ic { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand2)); }
.mk-access-txt { flex: 1; min-width: 0; }
.mk-access-txt p { margin: 3px 0 0; color: var(--soft); font-size: 13px; line-height: 1.5; }
/* page cards */
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.mk-card { border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); transition: box-shadow .18s, transform .18s; }
.mk-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.mk-card-open { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.mk-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mk-site { flex: 1; min-width: 0; font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-fav { color: var(--amber); display: inline-flex; }
.mk-fav svg { fill: currentColor; }
.mk-title { font-size: 14.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-first {
  margin: 0; padding-left: 9px; border-left: 3px solid var(--c); color: var(--soft); font-size: 12.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mk-card-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mute); margin-top: auto; }
.mk-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.mk-date { margin-left: auto; }
.mk-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-card-tags:empty { display: none; }
.mk-topic-mini { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: 11px; font-weight: 600; }
.mk-topic-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* mark rows */
.mk-list { display: flex; flex-direction: column; gap: 10px; }
.mk-row {
  position: relative; display: flex; gap: 8px; padding: 12px 10px 12px 20px; border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow-1);
}
.mk-row::before { content: ''; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: var(--c); }
.mk-row-body { flex: 1; min-width: 0; }
.mk-text { margin: 0; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; }
.mk-note { display: flex; gap: 6px; margin: 8px 0 0; padding: 8px 10px; border-radius: 9px; background: var(--surface2); border: 1px solid var(--line); color: var(--soft); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.mk-note svg { flex-shrink: 0; margin-top: 2px; color: var(--brand); }
.mk-src { display: flex; align-items: center; gap: 7px; max-width: 100%; margin-top: 9px; padding: 0; border: 0; background: transparent; color: var(--soft); font-size: 12.5px; cursor: pointer; text-align: left; }
.mk-src .mk-av { width: 18px; height: 18px; font-size: 10px; border-radius: 5px; }
.mk-src span:not(.mk-av) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-src small { color: var(--mute); flex-shrink: 0; }
.mk-src:hover span:not(.mk-av) { color: var(--hoverInk); text-decoration: underline; }
.mk-row-acts { display: flex; align-items: flex-start; gap: 2px; opacity: .55; transition: opacity .15s; }
.mk-row:hover .mk-row-acts { opacity: 1; }
@media (hover: none) { .mk-row-acts { opacity: 1; } }
/* lists of sites and topics */
.mk-sites { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.mk-site-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; border: 0; box-shadow: var(--shadow-1);
  background: var(--surface); color: var(--ink); font-size: 14px; text-align: left; cursor: pointer;
}
.mk-site-row svg { color: var(--brand); flex-shrink: 0; }
.mk-site-row span:not(.mk-av) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-site-row em { font-style: normal; color: var(--mute); font-size: 12.5px; }
.mk-site-row:hover { border-color: var(--hoverLine); background: var(--hover); }
.mk-colors .tag-chip { display: inline-flex; align-items: center; gap: 6px; }
.mk-colors .tag-chip i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.tag-chip small { opacity: .7; }
/* one page */
.mk-star.on { color: var(--amber); }
.mk-star.on svg { fill: currentColor; }
.mk-page { padding: 14px 16px; margin: 0 0 22px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); }
.mk-url { display: flex; align-items: center; gap: 8px; color: var(--brand); font-size: 13px; text-decoration: none; min-width: 0; }
.mk-url span:not(.mk-av) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-url:hover span:not(.mk-av) { text-decoration: underline; }
.mk-desc { margin: 10px 0 0; color: var(--soft); font-size: 13px; line-height: 1.5; }
.mk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.mk-field {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface2); color: var(--ink); font-size: 13px; text-align: left; cursor: pointer;
}
.mk-field svg { color: var(--brand); flex-shrink: 0; }
.mk-field:hover { border-color: var(--hoverLine); background: var(--hover); }
.mk-f-lbl { font-weight: 700; color: var(--soft); flex-shrink: 0; }
.mk-f-val { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; overflow: hidden; text-overflow: ellipsis; }
.mk-f-val.none { color: var(--mute); }
.mk-page-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.mk-tp .move-list { margin-top: 10px; }
.mk-tp-txt { display: flex; flex-direction: column; min-width: 0; }
.mk-tp-txt small { color: var(--mute); font-size: 11.5px; font-weight: 400; }
.mk-q { margin: 0 0 12px; padding: 8px 12px; border-left: 4px solid var(--c); background: var(--surface2); border-radius: 0 8px 8px 0; max-height: 160px; overflow: auto; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.mk-note-in { height: 120px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
/* settings */
.mk-set { max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.mk-set-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); cursor: default; }
label.mk-set-row { cursor: pointer; }
.mk-set-row.col { flex-direction: column; align-items: stretch; }
.mk-set-row > div:first-child { flex: 1; min-width: 0; }
.mk-set-row p { margin: 3px 0 0; color: var(--soft); font-size: 13px; line-height: 1.5; }
.mk-switch { appearance: none; width: 40px; height: 22px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s; }
.mk-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.mk-switch:checked { background: var(--brand); }
.mk-switch:checked::after { transform: translateX(18px); }
.mk-off { display: flex; flex-direction: column; gap: 6px; }
.mk-off:empty { display: none; }
.mk-off-row { display: flex; align-items: center; gap: 10px; }
.mk-off-row span:not(.mk-av) { flex: 1; }
@media (max-width: 860px) {
  .mk-wrap { flex-direction: column; }
  .mk-side { width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0 16px 8px; gap: 4px; flex-shrink: 0; scrollbar-width: none; }
  .mk-side::-webkit-scrollbar { display: none; }
  .mk-nav { flex-shrink: 0; height: 32px; border: 1px solid var(--line); background: var(--surface); }
  .mk-nav.on { box-shadow: none; border-color: var(--brand); }
  .mk-nav-h { display: none; }
  .mk-main { padding: 6px 16px 24px; }
  .mk-fields { grid-template-columns: 1fr; }
  .mk-access { flex-direction: column; align-items: flex-start; }
  .mk-row { flex-direction: column; }
  .mk-row-acts { opacity: 1; }
}

/* ── Welcome without an account (gate.js) ─────────────────────────────── */
.gate-main { flex: 1; display: grid; place-items: center; padding: 24px 16px 48px; }
.gate-card { width: 100%; max-width: 460px; padding: 34px 32px 26px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-2); }
.gate-logo { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--brand-soft); color: var(--brand); margin-bottom: 18px; }
.gate-card h1 { margin: 0 0 8px; font-size: 26px; font-weight: 650; letter-spacing: -.03em; color: var(--ink); }
.gate-lead { margin: 0 0 18px; color: var(--soft); line-height: 1.55; font-size: 14.5px; }
.gate-card ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.gate-card li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--ink); }
.gate-card li svg { color: var(--ok); flex-shrink: 0; margin-top: 2px; }
.gate-local { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 18px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); font-size: 13px; line-height: 1.45; }
.gate-local svg { flex-shrink: 0; margin-top: 1px; }
.gate-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.gate-acts .bn-btn { flex: 1; justify-content: center; height: 42px; }
.gate-marks { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 18px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--mute); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.gate-marks span { flex: 1; }
.gate-marks:hover { color: var(--ink); }
.cloud-ai .ai-panel { flex-wrap: wrap; }
.cloud-ai .ai-panel-txt { flex: 1 1 200px; min-width: 0; }
.cloud-ai .ai-panel-acts { flex: 1 1 100%; justify-content: flex-end; }

/* ── Mural (mural.js) ───────────────────────────────────────────────────── */
[data-color="red"] { --mc: #e5484d; } [data-color="orange"] { --mc: #f97316; } [data-color="yellow"] { --mc: #eab308; }
[data-color="green"] { --mc: #22c55e; } [data-color="teal"] { --mc: #14b8a6; } [data-color="blue"] { --mc: #3b82f6; }
[data-color="purple"] { --mc: #8b5cf6; } [data-color="pink"] { --mc: #ec4899; }
.mu-views { width: auto; margin-left: 18px; }
.mu-views button { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; }
.mu-main { max-width: 1180px; width: 100%; margin: 0 auto; }
.mu-main[data-view="board"] { max-width: none; }
.mu-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.mu-quick { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--mute); }
.mu-quick:focus-within { box-shadow: 0 0 0 2px var(--brand); color: var(--brand); }
.mu-quick input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 14.5px; }
.mu-search { margin: 0; flex: 0 1 300px; }
.mu-cf { display: flex; gap: 4px; }
.mu-showdone { margin: 0; font-size: 13px; color: var(--soft); }
.mu-tagf { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.mu-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; border: 0; font: 550 11.5px var(--font); color: hsl(var(--h) 55% 38%); background: hsl(var(--h) 70% 94%); cursor: default; white-space: nowrap; }
:root[data-theme="dark"] .mu-tag { color: hsl(var(--h) 75% 75%); background: hsl(var(--h) 30% 20%); }
button.mu-tag { cursor: pointer; }
.mu-tag em { font-style: normal; opacity: .6; }
.mu-tag.on { box-shadow: 0 0 0 1.5px currentColor; }
.mu-tag button { display: grid; place-items: center; width: 14px; height: 14px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .7; }

/* an item */
.mu-item { position: relative; display: flex; gap: 10px; align-items: flex-start; background: var(--surface); cursor: pointer; }
.mu-ck { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; display: grid; place-items: center; padding: 0; border-radius: 6px; border: 1.5px solid var(--line2); background: var(--surface); color: #fff; cursor: pointer; transition: transform .15s; }
.mu-ck:hover { border-color: var(--brand); }
.mu-item[data-color]:not([data-color=""]) .mu-ck { border-color: var(--mc); }
.mu-item.done .mu-ck { background: var(--ok); border-color: var(--ok); }
.mu-item.pop .mu-ck { transform: scale(1.25); }
.mu-ic { flex-shrink: 0; width: 20px; height: 20px; display: grid; place-items: center; color: var(--mc, var(--mute)); }
.mu-body { flex: 1; min-width: 0; }
.mu-t { display: block; font-size: 14px; font-weight: 550; color: var(--ink); line-height: 1.4; overflow-wrap: anywhere; }
.mu-item.done .mu-t { color: var(--faint); text-decoration: line-through; }
.mu-n { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--mute); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mu-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mu-meta:empty { display: none; }
.mu-due, .mu-clc { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 550; color: var(--soft); background: var(--surface2); }
.mu-due.late { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.mu-clc.full { color: var(--ok); }

/* Lista */
.mu-sec { margin-bottom: 24px; }
.mu-sec h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 650; color: var(--soft); text-transform: uppercase; letter-spacing: .04em; }
.mu-sec h2 .n { font: 500 12px var(--mono); color: var(--faint); }
.mu-sec.late h2 { color: var(--danger); }
.mu-sec.done h2 .bn-btn { text-transform: none; letter-spacing: 0; font-weight: 550; }
.mu-rows { border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.mu-row { padding: 12px 14px 12px 16px; border-top: 1px solid var(--line); }
.mu-row:first-child { border-top: 0; }
.mu-row:hover { background: var(--hover); }
.mu-row::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mc, transparent); }
.mu-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 24px; padding: 10px 14px; border: 1px dashed var(--line2); border-radius: 12px; background: transparent; color: var(--mute); font: inherit; font-size: 13px; cursor: pointer; }
.mu-hint span { flex: 1; text-align: left; }
.mu-hint:hover { color: var(--ink); border-color: var(--brand); }

/* Kanban */
.mu-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 16px; min-height: 60vh; }
.mu-col { flex: 0 0 290px; display: flex; flex-direction: column; max-height: calc(100vh - 230px); border-radius: 14px; background: color-mix(in srgb, var(--mc, var(--line)) 10%, var(--surface2)); }
.mu-col header { display: flex; align-items: center; gap: 7px; padding: 12px 10px 8px 14px; }
.mu-col header i { width: 9px; height: 9px; border-radius: 50%; background: var(--mc, var(--faint)); }
.mu-col header b { font-size: 13.5px; font-weight: 650; }
.mu-col header .n { font: 500 12px var(--mono); color: var(--faint); }
.mu-donec { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.mu-cards { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 4px 10px; overflow-y: auto; min-height: 40px; }
.mu-card { padding: 11px 12px; border-radius: 11px; box-shadow: var(--shadow-1); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mu-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 11px 11px 0 0; background: var(--mc, transparent); }
.mu-card:hover { box-shadow: var(--shadow-2); }
.mu-card.lift { transform: scale(1.02); box-shadow: var(--shadow-2); }
.mu-card.placeholder { opacity: .35; }
.mu-ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; box-shadow: var(--shadow-2); opacity: .95; }
.mu-add { padding: 6px 10px 10px; }
.mu-add input { width: 100%; height: 34px; padding: 0 10px; border: 1px dashed transparent; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; outline: none; }
.mu-add input::placeholder { color: var(--mute); }
.mu-add input:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.mu-add input:focus { border-color: var(--brand); background: var(--surface); }
.mu-newcol { flex: 0 0 220px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border: 1.5px dashed var(--line2); border-radius: 14px; background: transparent; color: var(--mute); font: inherit; font-size: 13.5px; cursor: pointer; }
.mu-newcol:hover { color: var(--brand); border-color: var(--brand); }

/* Notas (post-its) */
.mu-wall { columns: 4 230px; column-gap: 14px; }
.mu-notes { break-inside: avoid; margin-bottom: 14px; padding: 16px; border-radius: 14px; background: color-mix(in srgb, var(--mc, transparent) 16%, var(--surface)); box-shadow: var(--shadow-1); transition: transform .15s, box-shadow .15s; }
.mu-notes:hover { transform: translateY(-2px) rotate(-.3deg); box-shadow: var(--shadow-2); }
.mu-notes .mu-t { font-size: 15px; }
.mu-notes .mu-n { -webkit-line-clamp: 12; color: var(--soft); }
.mu-cls { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--soft); }
.mu-cls li::before { content: '☐ '; color: var(--faint); }
.mu-cls li.ok { text-decoration: line-through; color: var(--faint); }
.mu-cls li.ok::before { content: '☑ '; }

/* Calendário */
.mu-cal header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mu-cal h2 { margin: 0; min-width: 190px; text-align: center; font-size: 17px; font-weight: 650; }
.mu-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mu-wd { padding: 0 6px 4px; font-size: 11.5px; font-weight: 600; color: var(--faint); text-transform: uppercase; }
.mu-day { min-height: 104px; padding: 6px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-1); cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mu-day:hover { box-shadow: 0 0 0 1.5px var(--brand); }
.mu-day.out { background: transparent; box-shadow: none; cursor: default; }
.mu-day.past .mu-dn { color: var(--faint); }
.mu-day.today .mu-dn { background: var(--brand); color: #fff; }
.mu-dn { align-self: flex-start; min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: 12px; font: 600 12px var(--mono); color: var(--soft); }
.mu-dl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mu-chip { display: block; width: 100%; padding: 2px 6px; border: 0; border-left: 3px solid var(--mc, var(--brand)); border-radius: 5px; background: color-mix(in srgb, var(--mc, var(--brand)) 12%, var(--surface)); color: var(--ink); font: 550 11.5px var(--font); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.mu-chip.done { opacity: .5; text-decoration: line-through; }
.mu-chip.late { border-left-color: var(--danger); }
.mu-more { font-size: 11px; color: var(--mute); padding-left: 4px; }
.mu-undated { margin-top: 14px; font-size: 12.5px; color: var(--mute); }

/* the editor */
.mu-ed { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.mu-ed .fld { margin: 0; }
.mu-ed .fld > span { display: block; font-size: 11.5px; font-weight: 600; color: var(--mute); margin-bottom: 6px; }
.mu-kind { width: auto; align-self: flex-start; }
.mu-kind button { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; }
.mu-title { height: 44px; font-size: 16px; font-weight: 600; }
.mu-ed textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.mu-fields { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 10px; }
.mu-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.mu-sw { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); background: var(--mc, var(--surface2)); box-shadow: 0 0 0 1px var(--line2); cursor: pointer; }
.mu-sw[data-c=""] { background: linear-gradient(135deg, transparent 45%, var(--danger) 45% 55%, transparent 55%), var(--surface); }
.mu-sw.on { box-shadow: 0 0 0 2px var(--ink); }
.mu-sw.small { width: 18px; height: 18px; border-width: 1.5px; }
.mu-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line2); border-radius: 9px; background: var(--surface2); }
.mu-tags:focus-within { border-color: var(--brand); }
.mu-tagl, .mu-tagform { display: contents; }
.mu-tagin { flex: 1; min-width: 140px; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
.mu-cl { display: flex; flex-direction: column; gap: 2px; }
.mu-cl:not(:empty) { margin-bottom: 6px; }
.mu-cli { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.mu-cli input { width: 16px; height: 16px; accent-color: var(--ok); }
.mu-cli span { flex: 1; }
.mu-cli input:checked + span { text-decoration: line-through; color: var(--faint); }
.mu-pin { margin: 0; font-size: 13px; }
.bn-btn.mu-del { margin-right: auto; color: var(--danger); }

@media (max-width: 760px) {
  .mu-views { margin-left: 8px; }
  .mu-views button span, .mu .lib-hdr [data-a="new"] span { display: none; }
  .mu .lib-hdr [data-a="new"] { width: 38px; padding: 0; justify-content: center; }
  .mu .scr-title h1 { display: none; }
  .mu-col { flex-basis: 82vw; max-height: none; }
  .mu-board { scroll-snap-type: x mandatory; }
  .mu-col { scroll-snap-align: start; }
  .mu-wall { columns: 2 150px; column-gap: 10px; }
  .mu-day { min-height: 64px; padding: 4px; }
  .mu-chip { font-size: 0; height: 6px; padding: 0; border-left-width: 0; background: var(--mc, var(--brand)); }
  .mu-fields { grid-template-columns: 1fr 1fr; }
  .mu-fields label:last-child { grid-column: 1 / -1; }
  .mu-search { flex: 1 1 100%; }
}

/* ── the study bar at the foot (footer.js) ─────────────────────────────── */
.sf { flex-shrink: 0; height: 58px; display: flex; align-items: center; gap: 16px; padding: 0 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); position: relative; }
.shell.full .sf, .shell.gated .sf { display: none; }
.sf-left, .sf-right { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.sf-right { justify-content: flex-end; container-type: inline-size; }
/* What's on the right gives way as the bar narrows, before it reaches the timer. */
@container (max-width: 560px) { .sf-tool span { display: none; } }
@container (max-width: 400px) { .sf-cycle { display: none !important; } }
@container (max-width: 250px) { .sf-stat[data-s="today"] { display: none; } }
.sf-subj { display: flex; align-items: center; gap: 10px; max-width: 100%; height: 44px; padding: 0 10px 0 6px; border: 0; border-radius: 11px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sf-subj:hover { background: var(--hover); }
.sf-badge { flex-shrink: 0; display: grid; place-items: center; }
.sf-badge .subj-badge { min-width: 32px; height: 32px; border-radius: 9px; font-size: 10.5px; }
.sf-subj.none .sf-badge { width: 32px; height: 32px; border-radius: 9px; background: var(--surface2); color: var(--faint); }
.sf-name { min-width: 0; display: flex; flex-direction: column; }
.sf-name small { font-size: 10.5px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-name b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-subj.none .sf-name b { color: var(--mute); font-weight: 550; }
.sf-subj > svg:last-child { color: var(--faint); flex-shrink: 0; }
.sf-mid { flex-shrink: 0; }
.sf-pill { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 6px 0 14px; border-radius: 12px; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--line); }
.sf-time { min-width: 86px; font: 700 19px var(--mono); letter-spacing: -.03em; color: var(--faint); transition: color .2s; }
.sf.run .sf-time, .sf.paused .sf-time { color: var(--brand); }
.sf.paused .sf-time { animation: sf-pulse 1.6s ease-in-out infinite; }
@keyframes sf-pulse { 50% { opacity: .45; } }
.sf-div { width: 1px; height: 18px; background: var(--line2); }
.sf-btn { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line2); border-radius: 9px; background: var(--surface); color: var(--soft); cursor: pointer; transition: transform .1s, background .15s; }
.sf-btn:active { transform: scale(.94); }
.sf-play { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 35%, transparent); }
.sf-play svg { fill: currentColor; stroke: none; }
.sf.idle.none .sf-play { opacity: .6; }
.sf.run .sf-play { background: var(--surface); border-color: var(--line2); color: var(--brand); box-shadow: none; }
.sf.run .sf-play svg { fill: none; stroke: currentColor; }
.sf.paused .sf-play { animation: sf-pulse 1.6s ease-in-out infinite; }
.sf-done { background: var(--ok); border-color: var(--ok); color: #fff; }
.sf-done svg { fill: currentColor; }
.sf-drop:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.sf-stat { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 9px; font-size: 12.5px; color: var(--soft); white-space: nowrap; }
.sf-stat svg { color: var(--faint); }
.sf-tool { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--mute); font: 550 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.sf-tool:hover { background: var(--brand-soft); color: var(--brand-ink); }
.sf-tool em { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); font: 600 11px var(--mono); }
.sf-pop { position: absolute; left: 10px; bottom: calc(100% + 10px); z-index: 30; width: 300px; max-height: 360px; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-2); animation: sf-in .16s ease-out; }
@keyframes sf-in { from { opacity: 0; transform: translateY(6px); } }
.sf-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sf-opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.sf-opt .sf-on { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-opt small { font-size: 11px; color: var(--brand-ink); font-weight: 600; }
.sf-opt:hover { background: var(--hover); }
.sf-opt.on { background: var(--brand-soft); }
.sf-opt .subj-badge { min-width: 28px; height: 26px; border-radius: 7px; font-size: 10px; }
@media (max-width: 1100px) { .sf-tool span { display: none; } .sf-cycle { display: none !important; } }
@media (max-width: 760px) {
  .sf { gap: 8px; padding: 0 6px; height: 56px; }
  .sf-right { flex: 0 0 auto; container-type: normal; }
  .sf-stat[data-s="today"] { display: none; }
  .sf-name small { display: none; }
  .sf-time { min-width: 72px; font-size: 16px; }
  .sf-pill { padding-left: 10px; gap: 5px; }
  .sf-pop { width: calc(100vw - 90px); }
}

/* ── Planejamento (plan.js) ─────────────────────────────────────────────── */
.pl-main { max-width: 1120px; width: 100%; margin: 0 auto; }
.pl-kind { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: 13px; font-weight: 600; }
.pl-kind small { font-weight: 500; color: var(--soft); }
.pl-intro { max-width: 720px; margin: 8px 0 22px; }
.pl-intro h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.02em; }
.pl-intro p, .pl-lead { margin: 0 0 18px; color: var(--soft); line-height: 1.55; font-size: 14.5px; }
.pl-warn { display: flex; align-items: center; gap: 8px; color: var(--warn); font-size: 13.5px; }
.pl-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pl-type { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 18px 18px; border: 1.5px solid transparent; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.pl-type:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.pl-type.on { border-color: var(--brand); }
.pl-type-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.pl-type > b { font-size: 17px; letter-spacing: -.01em; }
.pl-type > p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--soft); }
.pl-pc { width: 100%; padding-top: 8px; border-top: 1px solid var(--line); }
.pl-pc h4 { margin: 0 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.pl-pc.pro h4 { color: var(--ok); } .pl-pc.con h4 { color: var(--warn); }
.pl-pc p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--soft); }
.pl-pc ul { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.5; color: var(--soft); }
.pl-type-go { margin-top: auto; align-self: stretch; justify-content: center; pointer-events: none; }
/* the wizard */
.pl-steps { display: flex; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0; }
.pl-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); color: var(--mute); font-size: 13px; font-weight: 600; }
.pl-steps li span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--line); font-size: 11.5px; }
.pl-steps li.on { background: var(--brand-soft); color: var(--brand-ink); }
.pl-steps li.on span { background: var(--brand); color: #fff; }
.pl-steps li.ok span { background: var(--ok); color: #fff; }
.pl-wbody { min-height: 300px; }
.pl-q { margin-bottom: 26px; }
.pl-q h3 { margin: 0 0 4px; font-size: 16px; }
.pl-q > p { margin: 0 0 14px; font-size: 13.5px; color: var(--mute); }
.pl-hours { display: flex; align-items: center; gap: 18px; max-width: 560px; }
.pl-hours input { flex: 1; accent-color: var(--brand); }
.pl-hours b { min-width: 150px; font-size: 18px; color: var(--brand); }
.pl-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pl-presets .chip { height: 32px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; background: var(--surface); color: var(--soft); font: inherit; font-size: 13px; cursor: pointer; }
.pl-presets .chip.on, .pl-presets .chip:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.pl-days { display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.pl-day { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-1); }
.pl-day.off { opacity: .6; }
.pl-day .bn-check { margin: 0; text-transform: capitalize; }
.pl-subhead, .pl-sub { display: grid; grid-template-columns: minmax(0, 1fr) 150px 220px 80px; gap: 14px; align-items: center; }
.pl-subhead { padding: 0 12px 6px; font-size: 11.5px; font-weight: 600; color: var(--mute); }
.pl-subs { display: flex; flex-direction: column; gap: 6px; }
.pl-sub { padding: 8px 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); }
.pl-sub.off { opacity: .55; }
.pl-sub .bn-check { margin: 0; min-width: 0; }
.pl-sub .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.pl-sub .subj-badge, .pl-prow .subj-badge { min-width: 30px; height: 28px; border-radius: 8px; font-size: 10px; }
.pl-pips { display: flex; gap: 4px; }
.pl-pips button { width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid var(--line2); background: var(--surface2); cursor: pointer; }
.pl-pips button.on { background: var(--brand); border-color: var(--brand); }
.pl-lv { width: auto; }
.pl-lv button { padding: 0 10px; font-size: 12.5px; }
.r { text-align: right; }
.pl-wfoot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 0; background: linear-gradient(transparent, var(--surface) 30%); }
.pl-sum { font-size: 13px; color: var(--soft); font-weight: 550; }
/* preview + panels */
.pl-prow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); margin-bottom: 6px; }
.pl-prow .nm { flex: 0 0 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.pl-prow.full .nm { color: var(--mute); }
.pl-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--surface2); overflow: hidden; display: block; }
.pl-bar i { display: block; height: 100%; border-radius: 4px; background: hsl(var(--h, 240) 70% 55%); }
.pl-bar.big { height: 12px; border-radius: 6px; margin: 10px 0 8px; }
.pl-bar.big i { background: linear-gradient(90deg, var(--brand), var(--brand2)); }
.pl-mm { min-width: 110px; text-align: right; font-size: 12.5px; color: var(--soft); }
.pl-cyl { display: flex; align-items: center; gap: 8px; }
.pl-cyl small { font-size: 11.5px; color: var(--mute); }
.pl-order { margin-top: 18px; }
.pl-order h4 { margin: 0 0 10px; font-size: 13px; }
.pl-order > div { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: hsl(var(--h) 70% 55% / .14); color: hsl(var(--h) 60% 35%); font-size: 12.5px; font-weight: 650; }
:root[data-theme="dark"] .pl-chip { color: hsl(var(--h) 80% 75%); }
.pl-chip em { font-style: normal; font-size: 10.5px; opacity: .6; }
.pl-chip small { font-weight: 500; opacity: .75; }
.pl-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.pl-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border-radius: 12px; background: var(--surface2); }
.pl-col.today { box-shadow: 0 0 0 2px var(--brand); }
.pl-col.rest { opacity: .55; }
.pl-col header { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 4px; }
.pl-col header b { font-size: 12.5px; text-transform: capitalize; }
.pl-col header small { font-size: 11px; color: var(--mute); }
.pl-blocks { display: flex; flex-direction: column; gap: 6px; }
.pl-block { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 8px 9px; border: 0; border-left: 3px solid hsl(var(--h) 70% 55%); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pl-block b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-block small { font-size: 11px; color: var(--mute); }
.pl-block i { position: absolute; left: 0; bottom: 0; height: 3px; background: hsl(var(--h) 70% 55%); }
.pl-block.full { opacity: .6; }
.pl-block.full b { text-decoration: line-through; }
.pl-add { height: 30px; border: 1.5px dashed var(--line2); border-radius: 8px; background: transparent; color: var(--mute); cursor: pointer; display: grid; place-items: center; }
.pl-add:hover { color: var(--brand); border-color: var(--brand); }
.pl-wtop { align-items: stretch; }
.pl-big { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 22px 24px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); }
.pl-big > b { margin-top: 8px; font-size: 34px; letter-spacing: -.03em; }
.pl-big > b small { font-size: 18px; color: var(--mute); }
.pl-big > small { font-size: 13px; color: var(--soft); }
.pl-now { flex: 0 0 300px; display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); }
.pl-now h2 { margin: 4px 0 0; font-size: 20px; }
.pl-now p { margin: 0 0 8px; font-size: 13px; color: var(--soft); }
.pl-now .bn-btn { align-self: flex-start; }
.pl-now > small { font-size: 12px; color: var(--mute); margin-top: 6px; }
.pl-rows { display: flex; flex-direction: column; }
.pl-hist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pl-hist > div { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); }
.pl-hist small { font-size: 12px; color: var(--mute); }
@media (max-width: 900px) {
  .pl-types { grid-template-columns: 1fr; }
  .pl-subhead { display: none; }
  .pl-sub { grid-template-columns: 1fr auto; }
  .pl-sub .bn-check { grid-column: 1 / -1; }
  .pl-steps li { font-size: 0; justify-content: center; }
  .pl-steps li span { font-size: 11.5px; }
  .pl-prow { flex-wrap: wrap; }
  .pl-prow .nm { flex: 1 1 60%; }
  .pl-grid { grid-template-columns: repeat(7, 140px); overflow-x: auto; }
  .pl-wtop { flex-direction: column; }
  .pl-now { flex-basis: auto; }
  .pl-hist { grid-template-columns: repeat(2, 1fr); }
}
.pl-day .cy-step b, .pl-prow .cy-step b { width: 64px; font-size: 13.5px; }

/* ── Minha conta (account.js) and who's signed in (the sidebar's foot) ── */
.acc-av { width: var(--s, 30px); height: var(--s, 30px); flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--h, 240) 70% 92%); color: hsl(var(--h, 240) 55% 35%); font: 700 calc(var(--s, 30px) * .38) var(--font); letter-spacing: -.02em; }
:root[data-theme="dark"] .acc-av { background: hsl(var(--h, 240) 35% 22%); color: hsl(var(--h, 240) 80% 80%); }
.acc-av.off { background: var(--surface2); color: var(--mute); }
.sd-me { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sd-me:hover { background: var(--hover); }
.sd-me .me-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sd-me b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-me small { font-size: 11px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-me > svg { color: var(--faint); flex-shrink: 0; }
.sd-me .cloud-dot { left: 30px; top: 6px; }
.shell.mini .sd-me { justify-content: center; padding: 4px 0; }
.shell.mini .sd-me .me-txt, .shell.mini .sd-me > svg { display: none; }
.shell.mini .sd-me .cloud-dot { left: auto; right: 4px; }
.acc { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; min-height: 420px; }
.acc-tabs { display: flex; flex-direction: column; gap: 2px; }
.acc-tabs button { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--soft); font: 550 13.5px var(--font); text-align: left; cursor: pointer; }
.acc-tabs button:hover { background: var(--hover); color: var(--ink); }
.acc-tabs button.on { background: var(--brand-soft); color: var(--brand-ink); }
.acc-pane { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.acc-pane .fld { margin: 0; }
.acc-pane .fld > span { display: block; font-size: 11.5px; font-weight: 600; color: var(--mute); margin-bottom: 6px; }
.acc-pane .cloud-plan { margin: 0; }
.acc-pane > .bn-btn { align-self: flex-start; }
.acc-hero { display: flex; align-items: center; gap: 14px; padding-bottom: 6px; }
.acc-hero > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-hero b { font-size: 17px; }
.acc-hero small { color: var(--mute); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.acc-pill { align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: var(--surface2); color: var(--soft); font-size: 11.5px; font-weight: 600; }
.acc-pill.paid { background: var(--brand-soft); color: var(--brand-ink); }
.acc-name { display: flex; align-items: flex-end; gap: 8px; }
.acc-name .fld { flex: 1; }
.acc-name .bn-btn { height: 38px; }
.acc-kinds { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.acc-kind { display: grid; grid-template-columns: 18px minmax(0, 1fr) 30% 70px; align-items: center; gap: 10px; font-size: 13px; }
.acc-kind > svg { color: var(--mute); }
.acc-kind .nm { display: flex; flex-direction: column; min-width: 0; }
.acc-kind .nm small { font-size: 11.5px; color: var(--mute); }
.acc-kbar { height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; }
.acc-kbar i { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.acc-kind b { text-align: right; font-size: 12.5px; font-weight: 600; }
.acc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.acc-table td { padding: 9px 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.acc-table tr:first-child td { border-top: 0; }
.acc-table td.r { text-align: right; }
.acc-table a { color: var(--brand-ink); font-weight: 550; }
.acc-st { padding: 2px 8px; border-radius: 6px; background: var(--surface2); color: var(--mute); font-size: 11.5px; font-weight: 600; }
.acc-st.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.acc-seg { width: auto; align-self: flex-start; }
.acc-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; }
@media (max-width: 700px) {
  .acc { grid-template-columns: 1fr; gap: 14px; min-height: 0; }
  .acc-tabs { flex-direction: row; overflow-x: auto; }
  .acc-tabs button { flex-shrink: 0; height: 34px; padding: 0 10px; font-size: 12.5px; }
  .acc-tabs button span { white-space: nowrap; }
  .acc-kind { grid-template-columns: 18px minmax(0, 1fr) 70px; }
  .acc-kbar { display: none; }
}

/* ── Questões (questions.js) ────────────────────────────────────────────── */
.qz-acc { min-width: 34px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; text-align: center; background: var(--surface2); color: var(--mute); }
.qz-acc[data-lv="hi"] { background: color-mix(in srgb, var(--ok) 15%, transparent); color: color-mix(in srgb, var(--ok) 75%, var(--ink)); }
.qz-acc[data-lv="mid"] { background: color-mix(in srgb, var(--warn) 15%, transparent); color: color-mix(in srgb, var(--warn) 75%, var(--ink)); }
.qz-acc[data-lv="lo"] { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.kpis.qz-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0 18px; }
.kpi-v[data-lv="hi"] { color: var(--ok); } .kpi-v[data-lv="mid"] { color: var(--warn); } .kpi-v[data-lv="lo"] { color: var(--danger); }
.qz-tops h2 { display: flex; align-items: center; gap: 8px; }
.qz-th { margin-left: auto; display: grid; grid-template-columns: 170px 54px 60px 30px; gap: 10px; font-size: 11px; font-weight: 600; color: var(--mute); text-transform: none; letter-spacing: 0; }
.qz-trows { display: flex; flex-direction: column; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.qz-trow { display: grid; grid-template-columns: minmax(0, 1fr) 120px 40px 54px 60px 30px; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); }
.qz-trow:first-child { border-top: 0; }
.qz-trow .nm { border: 0; background: transparent; padding: 0; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 550; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-trow .nm:hover { color: var(--brand-ink); }
.qz-cov { height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; }
.qz-cov i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.qz-pct, .qz-cnt { font-size: 12px; color: var(--mute); text-align: right; }
.qz-row { align-items: center; }
.qz-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); flex-shrink: 0; }
.qz-dot.ok { background: var(--ok); } .qz-dot.bad { background: var(--danger); }
/* editor */
.qz-ed { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.qz-ed .fld { margin: 0; }
.qz-ed .fld > span { display: block; font-size: 11.5px; font-weight: 600; color: var(--mute); margin-bottom: 6px; }
.qz-kind { width: auto; align-self: flex-start; }
.qz-kind button { padding: 0 14px; }
.qz-textbox { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--surface2); }
.qz-rich { min-height: 64px; max-height: 280px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 14px; line-height: 1.55; outline: none; }
.qz-rich.big { min-height: 120px; }
.qz-rich:focus { border-color: var(--brand); }
.qz-rich:empty::before { content: attr(data-ph); color: var(--faint); }
.qz-rich p { margin: 0 0 6px; }
.qz-ce { display: flex; gap: 8px; }
.qz-ce button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border: 1.5px solid var(--line2); border-radius: 10px; background: var(--surface); color: var(--soft); font: 600 14px var(--font); cursor: pointer; }
.qz-ce button.on { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: color-mix(in srgb, var(--ok) 70%, var(--ink)); }
.qz-alts { display: flex; flex-direction: column; gap: 6px; }
.qz-alt { display: flex; align-items: center; gap: 8px; }
.qz-alt > b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--surface2); font-size: 12.5px; flex-shrink: 0; }
.qz-alt.ok > b { background: var(--ok); color: #fff; }
.qz-alt .bn-input { flex: 1; }
.qz-key { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); color: var(--mute); font: 550 12px var(--font); cursor: pointer; white-space: nowrap; }
.qz-alt.ok .qz-key { border-color: var(--ok); color: var(--ok); }
.qz-addalt { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px dashed var(--line2); border-radius: 8px; background: transparent; color: var(--mute); font: inherit; font-size: 12.5px; cursor: pointer; }
.qz-meta { display: grid; grid-template-columns: 1fr 90px 1fr 1fr; gap: 10px; }
.qz-paste textarea { height: auto; font: 13px/1.55 var(--mono); resize: vertical; }
.qz-fmt summary { cursor: pointer; font-size: 12.5px; color: var(--brand-ink); font-weight: 550; }
.qz-fmt pre { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface2); font: 12px/1.6 var(--mono); white-space: pre-wrap; color: var(--soft); }
.qz-pv-sum { margin: 0; font-size: 13px; }
.qz-pv-err { margin: 6px 0 0; padding: 8px 12px 8px 26px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-size: 12.5px; }
.qz-pv-list { margin: 8px 0 0; padding-left: 22px; max-height: 200px; overflow: auto; font-size: 12.5px; color: var(--soft); }
.qz-pv-list li { margin-bottom: 4px; }
.qz-pv-list em { font-style: normal; color: var(--brand-ink); font-weight: 600; margin-left: 6px; }
/* resolving */
.qz-stage { align-items: flex-start; }
.qz-card { width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: 14px; padding: 28px 32px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-2); }
.qz-meta-line { margin: 0; font-size: 12.5px; color: var(--mute); font-weight: 550; }
.qz-text { border-radius: 12px; background: var(--surface2); padding: 10px 14px; }
.qz-text summary, .qz-com summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--soft); }
.qz-text .qz-html { margin-top: 8px; max-height: 260px; overflow: auto; }
.qz-html { font-size: 15.5px; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.qz-html p { margin: 0 0 10px; }
.qz-html img { max-width: 100%; border-radius: 8px; }
.qz-html table { border-collapse: collapse; margin: 8px 0; font-size: 14px; }
.qz-html td, .qz-html th { border: 1px solid var(--line2); padding: 4px 8px; }
.qz-stmt { font-size: 17px; }
.qz-options { display: flex; flex-direction: column; gap: 8px; }
.qz-options.ce { flex-direction: row; }
.qz-opt { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.5; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.qz-opt:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft); }
.qz-opt:disabled { cursor: default; }
.qz-l { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: var(--surface2); font: 700 13px var(--mono); color: var(--soft); }
.qz-ot { flex: 1; }
.qz-opt.struck .qz-ot { text-decoration: line-through; color: var(--faint); }
.qz-opt.struck .qz-l { opacity: .5; }
.qz-opt.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.qz-opt.right .qz-l { background: var(--ok); color: #fff; }
.qz-opt.right > svg { color: var(--ok); }
.qz-opt.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.qz-opt.wrong .qz-l { background: var(--danger); color: #fff; }
.qz-opt.wrong > svg { color: var(--danger); }
.qz-opt.dim { opacity: .55; }
.qz-verdict { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.qz-verdict.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: color-mix(in srgb, var(--ok) 75%, var(--ink)); }
.qz-verdict.bad { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.qz-verdict.blank { background: var(--surface2); color: var(--soft); }
.qz-com { border-top: 1px solid var(--line); padding-top: 12px; }
.qz-com .qz-html { margin-top: 8px; font-size: 14.5px; color: var(--soft); }
.qz-hint { margin: 0; font-size: 12px; color: var(--faint); }
.qz-foot { gap: 8px; max-width: 880px; width: 100%; margin: 0 auto; }
@media (max-width: 760px) {
  .kpis.qz-kpis { grid-template-columns: 1fr 1fr; }
  .qz-trow { grid-template-columns: minmax(0, 1fr) 54px 40px 30px; }
  .qz-cov, .qz-pct { display: none; }
  .qz-th { display: none; }
  .qz-meta { grid-template-columns: 1fr 1fr; }
  .qz-card { padding: 20px 16px; }
  .qz-options.ce { flex-direction: column; }
  .qz-foot .bn-btn span { display: none; }
}

/* ─── the questions notebook in the Notes, with the Draw's pens (qframe.js) ─── */
.qf { position: fixed; inset: 0; z-index: 10080; display: flex; flex-direction: column; background: var(--bg); }
.qf-hdr { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.qf-where { min-width: 0; display: flex; flex-direction: column; }
.qf-where b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qf-where small { font-size: 12px; color: var(--mute); }
.qf-hint { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qf-body { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.qf-page { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
/* the Draw's pen layer lets the wheel through to the page for a moment */
#__pd_root__.qf-pass #__pd_cv__ { pointer-events: none !important; }
@media (max-width: 760px) {
  .qf-hint { display: none; }
  .qf-hdr [data-a="tab"] span { display: none; }
}

/* ─── rich text box (rich.js): flashcards ─── */
.rt { position: relative; border: 1px solid var(--line2); border-radius: 10px; background: var(--surface); }
.rt:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.rt-tb { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.rt-tb button { position: relative; min-width: 30px; height: 28px; display: grid; place-items: center; padding: 0 6px; border: 0; border-radius: 7px; background: transparent; color: var(--soft); font: 600 14px var(--font); cursor: pointer; }
.rt-tb button:hover { background: var(--hover); color: var(--ink); }
.rt-tb button.on { background: var(--brand-soft); color: var(--brand-ink); }
.rt-tb button > i { position: absolute; left: 7px; right: 7px; bottom: 3px; height: 3px; border-radius: 2px; }
.rt-tb .rt-ink span { font-weight: 700; margin-top: -3px; }
.rt-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line2); }
.rt-pop { position: absolute; top: 36px; z-index: 5; display: flex; gap: 4px; padding: 6px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-2); }
.rt-pop button { width: 22px; height: 22px; padding: 0; border: 2px solid var(--surface); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--line2); cursor: pointer; }
.rt-pop .rt-none { display: grid; place-items: center; background: var(--surface2); color: var(--mute); }
.rt-ed { min-height: 72px; max-height: 300px; overflow: auto; padding: 10px 12px; color: var(--ink); font-size: 14.5px; line-height: 1.55; outline: none; overflow-wrap: anywhere; }
.rt.blank .rt-ed::before { content: attr(data-ph); color: var(--faint); pointer-events: none; position: absolute; }
.rt-ed p, .rt-view p { margin: 0 0 6px; }
.rt-ed img, .rt-view img { display: block; max-width: 100%; max-height: 260px; margin: 6px 0; border-radius: 6px; }
.rt-ed img { cursor: default; }
.rt-view img { max-height: 46vh; margin: 8px auto; }
.rt-ed ul, .rt-ed ol, .rt-view ul, .rt-view ol { margin: 4px 0; padding-left: 22px; }
.rt-ed span[style*="background"], .rt-view span[style*="background"] { border-radius: 3px; padding: 0 2px; }
/* a marker without a colour of its own: dark text, readable in the dark theme too */
.rt-ed span[style^="background"], .rt-view span[style^="background"] { color: #1f2937; }

/* Discursivas: the questions under their topic, the title in full (2 lines). */
.es-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px 54px; border-top: 1px solid var(--line); }
.fg-body > .es-top:first-child { border-top: 0; }
.es-top-n { min-width: 0; padding: 0; border: 0; background: transparent; color: var(--mute); font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .04em; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-top-n:hover { color: var(--brand); }
.es-top .n { font: 500 11px var(--mono); color: var(--faint); }
.fg-row.es-r { padding: 8px 12px 8px 54px; border-top: 0; }
.fg-row.es-r + .fg-row.es-r { border-top: 0; }
.es-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.es-t b { font-size: 14px; font-weight: 520; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.es-t:hover b { color: var(--brand); }
.es-t small { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mute); }
.es-r.fresh .es-meta { color: var(--faint); }
.es-rule { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; background: var(--surface2); color: var(--soft); font-size: 11px; }
.es-sc { width: 48px; flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 600; color: var(--faint); }
.es-sc[data-lv="hi"] { color: var(--ok); } .es-sc[data-lv="mid"] { color: var(--warn); } .es-sc[data-lv="lo"] { color: var(--danger); }
.es-go { flex-shrink: 0; }
.es-r:hover .es-go { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (max-width: 760px) {
  .es-top, .fg-row.es-r { padding-left: 14px; }
  .fg-row.es-r { flex-wrap: nowrap; }
  .fg-row.es-r .es-t { flex: 1 1 auto; }
  .es-go span { display: none; }
}

/* Estatísticas: a subject's topics, one topic's pieces and history */
.an-ttab .an-tr { grid-template-columns: minmax(200px, 2fr) 64px 110px 100px 100px 90px 100px; }
.an-st { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--faint); }
.an-st[data-s="1"] { background: var(--warn); } .an-st[data-s="2"] { background: var(--ok); }
.an-tcard header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.an-pieces { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.an-hist { display: flex; flex-direction: column; }
.an-hrow { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--line); font-size: 13px; }
.an-hrow:first-child { border-top: 0; }
.an-hd { color: var(--mute); font-size: 12px; }
.an-ht { min-width: 0; color: var(--soft); }
.an-hq { font-size: 12px; color: var(--mute); }
.an-filters .an-topic { max-width: 320px; }
@media (max-width: 900px) {
  .an-ttab .an-tr { grid-template-columns: minmax(0, 1fr) 54px 90px; }
  .an-ttab .an-tr > :nth-child(n+4) { display: none; }
  .an-hrow { grid-template-columns: 90px minmax(0, 1fr); }
  .an-hrow > :nth-child(n+3) { grid-column: 2; }
}

.qz-ai { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); font-size: 12.5px; line-height: 1.45; }
.qz-ai > span { flex: 1; display: flex; gap: 8px; align-items: flex-start; }
.qz-ai > span svg { flex-shrink: 0; margin-top: 1px; }
.qz-ai .bn-btn { flex-shrink: 0; }

/* the extension's question-site shortcuts can't reach a framed page */
.qf-on #__pd_sc__ { display: none !important; }

.ss-more { display: flex; align-items: center; gap: 12px; margin: 4px 0 24px; }
.ss-more small { color: var(--mute); font-size: 12.5px; }
.ss-none { margin: 0 0 18px; }

/* the cloud's space (quota.js): a strip near the limit, red past it */
.qt-strip { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 14px; border-radius: 12px; background: color-mix(in srgb, var(--warn) 12%, var(--surface)); color: color-mix(in srgb, var(--warn) 70%, var(--ink)); font-size: 13px; }
.qt-strip > span { flex: 1; min-width: 0; }
.qt-strip.lock { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: color-mix(in srgb, var(--danger) 70%, var(--ink)); }
.qt-box p { margin: 0 0 10px; line-height: 1.5; }
.qt-meter { height: 8px; border-radius: 4px; background: var(--surface2); overflow: hidden; margin: 4px 0 8px; }
.qt-meter i { display: block; height: 100%; background: var(--danger); }
.qt-nums { font: 600 13px var(--mono); color: var(--danger); }
.qt-ways { margin: 0; padding-left: 18px; color: var(--soft); font-size: 13.5px; line-height: 1.6; }

/* ─── first-use tours (tour.js) ─── */
.sd-foot { display: flex; align-items: center; gap: 4px; }
.sd-foot .sd-me { flex: 1; min-width: 0; }
.sd-help { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; font: 700 14px var(--font); color: var(--mute); border: 1px solid var(--line2); }
.sd-help:hover { color: var(--brand); border-color: var(--brand); }
.shell.mini .sd-help { display: none; }
.tr { position: fixed; inset: 0; z-index: 10100; animation: tr-in .25s ease-out; }
.tr.out { opacity: 0; transition: opacity .25s; }
@keyframes tr-in { from { opacity: 0; } }
.tr-hole { position: absolute; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(8, 8, 26, .66); transition: left .5s cubic-bezier(.65,0,.35,1), top .5s cubic-bezier(.65,0,.35,1), width .5s cubic-bezier(.65,0,.35,1), height .5s cubic-bezier(.65,0,.35,1), border-radius .5s; pointer-events: none; }
.tr-hole::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid #8B8BFF; animation: tr-ring 1.8s ease-out infinite; }
.tr-hole.none::after { display: none; }
@keyframes tr-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
.tr-card { position: absolute; padding: 18px 20px 16px; border-radius: 20px; color: #fff; background: linear-gradient(160deg, #1D1D3C, #121228); box-shadow: 0 30px 70px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); transition: left .5s cubic-bezier(.65,0,.35,1), top .5s cubic-bezier(.65,0,.35,1); }
.tr-card.in > *:not(.tr-top) { animation: tr-text .45s cubic-bezier(.33,1,.68,1) both; }
.tr-card.in p { animation-delay: .06s; }
@keyframes tr-text { from { opacity: 0; transform: translateY(8px); } }
.tr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tr-n { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #A9ADFF; }
.tr-skip { border: 0; background: none; color: rgba(255,255,255,.55); font: 600 12.5px var(--font); cursor: pointer; padding: 2px 0; }
.tr-skip:hover { color: #fff; }
.tr-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.tr-card p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.78); }
.tr-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); margin: 16px 0 14px; overflow: hidden; }
.tr-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #4A4AFF, #8B3DFF, #22D3EE); transition: width .45s cubic-bezier(.33,1,.68,1); }
.tr-acts { display: flex; justify-content: flex-end; gap: 8px; }
.tr .bn-btn.ghost { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.18); background: transparent; }
.tr .tr-next { color: #fff; border: 0; background: linear-gradient(135deg, #4A4AFF, #8B3DFF); box-shadow: 0 10px 24px -10px rgba(74,74,255,.8); }
.tr-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 10110; pointer-events: none; }
/* the welcome */
.tr-welcome { display: grid; place-items: center; padding: 20px; background: radial-gradient(900px 500px at 50% 0%, rgba(139,61,255,.35), transparent 60%), rgba(8, 8, 26, .78); backdrop-filter: blur(6px); }
.tr-hero { width: min(560px, 100%); text-align: center; color: #fff; padding: 40px 34px 30px; border-radius: 28px; background: linear-gradient(160deg, #1D1D3C, #0F0F24); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); animation: tr-pop .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes tr-pop { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.tr-orb { position: relative; width: 110px; height: 110px; margin: 0 auto 22px; display: grid; place-items: center; }
.tr-orb img { position: relative; width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 14px 30px -10px rgba(74,74,255,.8); }
.tr-orb span { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(169,173,255,.5); animation: tr-orbit 3s ease-out infinite; }
.tr-orb span:nth-child(2) { animation-delay: 1s; } .tr-orb span:nth-child(3) { animation-delay: 2s; }
@keyframes tr-orbit { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.tr-hero h2 { margin: 0 0 8px; font-size: 26px; font-weight: 750; letter-spacing: -.02em; }
.tr-hero > p { margin: 0 auto; max-width: 400px; color: rgba(255,255,255,.75); font-size: 15px; line-height: 1.55; }
.tr-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 26px 0 28px; text-align: left; }
.tr-pills span { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-size: 14px; font-weight: 600; animation: tr-text .5s cubic-bezier(.33,1,.68,1) both; animation-delay: var(--d); }
.tr-pills b { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; background: linear-gradient(135deg, #4A4AFF, #8B3DFF); flex-shrink: 0; }
.tr-wacts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tr-wacts .bn-btn { min-width: 160px; justify-content: center; height: 44px; }
@media (max-width: 520px) { .tr-pills { grid-template-columns: 1fr; } .tr-hero { padding: 30px 20px 22px; } }
@media (prefers-reduced-motion: reduce) { .tr-hole, .tr-card, .tr-bar i { transition: none; } .tr-hole::after, .tr-orb span, .tr-card.in > *, .tr-pills span, .tr-hero { animation: none; } }

/* Minha conta → Conectar IA (the MCP connector) */
.mcp-lead { margin: 0 0 14px; color: var(--soft); font-size: 14px; line-height: 1.55; }
.mcp-url { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--line); }
.mcp-url code { flex: 1; min-width: 0; font: 600 13.5px var(--mono); color: var(--brand-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcp-how { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.mcp-how > div { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); }
.mcp-how b { font-size: 14px; }
.mcp-how ol { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--soft); line-height: 1.55; }
.mcp-can { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; font-size: 13px; }
.mcp-can span { display: flex; align-items: center; gap: 8px; color: var(--ok); }
.mcp-can span.no { color: var(--mute); }
.mcp-grants { display: flex; flex-direction: column; gap: 6px; }
.mcp-g { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.mcp-g > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mcp-g b { font-size: 14px; } .mcp-g small { font-size: 12px; color: var(--mute); }
.mcp-g svg { color: var(--brand); }
.mcp-lock { text-align: center; padding: 26px 18px; border-radius: 16px; background: var(--brand-soft); color: var(--brand-ink); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mcp-lock b { font-size: 16px; color: var(--ink); } .mcp-lock p { margin: 0 0 6px; color: var(--soft); font-size: 14px; max-width: 420px; }
@media (max-width: 640px) { .mcp-how { grid-template-columns: 1fr; } }

/* Home: the invitation to Minhas marcações on every site */
.hl-invite { display: flex; align-items: center; gap: 20px; margin: 0 0 26px; padding: 18px 22px; border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 10%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line)); }
.hl-inv-art { position: relative; flex-shrink: 0; padding: 14px 16px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); font-size: 14px; color: var(--soft); }
.hl-inv-art span { background: linear-gradient(transparent 50%, #fde047 50%); animation: hlinv 3s ease-in-out infinite; background-size: 0% 100%; background-repeat: no-repeat; color: var(--ink); }
@keyframes hlinv { 0% { background-size: 0% 100%; } 40%, 85% { background-size: 100% 100%; } 100% { background-size: 0% 100%; } }
.hl-inv-art i { position: absolute; right: -8px; top: -10px; width: 22px; height: 22px; border-radius: 50%; background: #fde047; border: 3px solid var(--surface); box-shadow: var(--shadow-1); }
.hl-inv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hl-inv-txt small { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); }
.hl-inv-txt b { font-size: 16px; color: var(--ink); }
.hl-inv-txt p { margin: 0; font-size: 13.5px; color: var(--soft); line-height: 1.5; }
.hl-inv-acts { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
@media (max-width: 760px) { .hl-invite { flex-direction: column; align-items: stretch; } .hl-inv-art { align-self: flex-start; } .hl-inv-acts { flex-direction: row; } }
@media (prefers-reduced-motion: reduce) { .hl-inv-art span { animation: none; background-size: 100% 100%; } }

/* ─── ESTANTE ─────────────────────────────────────────────────────────────
   Shelves per subject; the books stand by their spines on a wooden plank.
   Each line of books is 214px: 196px of room and an 18px plank, drawn by
   the background so every wrapped line gets its own. */
.sh { --wood: #b07a46; --wood-hi: #cf9a62; --wood-lo: #7a4f27; --back: #f3ebe0; --back2: #e9ddcc; }
:root[data-theme="dark"] .sh { --wood: #6e4a2b; --wood-hi: #8a603a; --wood-lo: #3f2814; --back: #221d19; --back2: #1b1714; }
.sh-main { max-width: 1180px; }
.sh-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.sh-bar .lib-search { flex: 1 1 240px; min-width: 0; }
.sh-bar select { width: auto; flex: 0 1 200px; }
.sh-meter { display: inline-flex; align-items: center; gap: 6px; font: 12px var(--mono); color: var(--mute); margin-left: auto; }
.sh-meter i { width: 70px; height: 5px; border-radius: 3px; background: var(--surface2); overflow: hidden; }
.sh-meter i b { display: block; height: 100%; background: var(--brand); }
.sh-tools { display: flex; justify-content: flex-end; margin: 6px 0 8px; }

/* Continuar lendo */
.sh-cont { margin: 6px 0 18px; }
.sh-cont h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--mute); margin: 0 0 10px; }
.sh-cont-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.sh-cont-item { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s; font: inherit; color: inherit; }
.sh-cont-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.sh-mini-cover { flex: none; width: 44px; height: 60px; border-radius: 3px 6px 6px 3px; overflow: hidden; background: linear-gradient(135deg, var(--bl), var(--b)); box-shadow: inset 3px 0 0 rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.18); }
.sh-mini-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-cont-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sh-cont-txt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-cont-txt small { font-size: 12px; color: var(--mute); }
.sh-cont-txt i { height: 4px; border-radius: 2px; background: var(--surface2); overflow: hidden; }
.sh-cont-txt em { display: block; height: 100%; background: var(--brand); }

/* A shelf */
.sh-shelf { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); margin-bottom: 10px; overflow: hidden; }
.sh-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.sh-head:hover { background: var(--hover); }
.sh-head b { font-size: 15px; }
.sh-head small { color: var(--mute); font-size: 12.5px; white-space: nowrap; }
.sh-chev { display: inline-flex; color: var(--mute); transition: transform .2s; }
.sh-shelf.open .sh-chev { transform: rotate(90deg); }
.sh-peek { margin-left: auto; display: flex; align-items: flex-end; gap: 2px; height: 26px; padding: 0 6px 3px; border-bottom: 3px solid var(--wood); border-radius: 0 0 2px 2px; }
.sh-peek i { width: 5px; border-radius: 1px 1px 0 0; opacity: .9; }
.sh-shelf.open .sh-peek { visibility: hidden; }
.sh-shelf:not(.open) .sh-body { display: none; }
.sh-body { padding: 4px 16px 18px; background: linear-gradient(var(--back), var(--back2)); border-top: 1px solid var(--line); }
.sh-books { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; gap: 18px 4px; padding: 14px 10px 0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 196px,
    var(--wood-hi) 196px, var(--wood) 199px, var(--wood) 209px, var(--wood-lo) 214px);
  background-position: 0 14px; }
.sh-books::after { content: ""; flex: 1 0 100%; height: 0; }
/* Each book takes 196px of height so the lines line up with the planks. */
.sh-spine { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 10px 0 8px; border: 0; border-radius: 3px 3px 2px 2px; cursor: pointer; color: #fff; font: inherit;
  background: linear-gradient(90deg, var(--bd) 0, var(--b) 18%, var(--bl) 50%, var(--b) 82%, var(--bd) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 2px 0 4px rgba(0,0,0,.18);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s; transform-origin: bottom center; }
.sh-spine:hover, .sh-spine:focus-visible { transform: translateY(-10px) rotate(-1.5deg); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 6px 8px 14px rgba(0,0,0,.28); z-index: 1; outline: none; }
.sh-band { width: 70%; height: 6px; border-top: 1.5px solid rgba(255,225,150,.7); border-bottom: 1.5px solid rgba(255,225,150,.7); flex: none; }
.sh-band.low { margin-top: auto; }
.sh-title { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1.15; max-height: calc(100% - 46px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 0; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.sh-spine small { font: 9.5px var(--mono); opacity: .75; margin-top: 4px; }
.sh-spine.reading::before { content: ""; position: absolute; top: -6px; right: 5px; width: 6px; height: 16px; background: #e5484d; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
.sh-none { color: var(--mute); text-align: center; margin: 40px 0; }

/* Empty */
.sh-empty { max-width: 460px; margin: 56px auto 0; text-align: center; color: var(--mute); }
.sh-empty h2 { color: var(--ink); margin: 18px 0 6px; }
.sh-empty p { margin: 0 0 18px; line-height: 1.55; }
.sh-empty-art { position: relative; height: 120px; width: 260px; margin: 0 auto; }
.sh-plank { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 3px; background: linear-gradient(var(--wood-hi), var(--wood) 30%, var(--wood-lo)); box-shadow: 0 6px 12px rgba(0,0,0,.12); }
.sh-ghost { position: absolute; bottom: 14px; left: 70px; display: flex; align-items: flex-end; gap: 4px; }
.sh-ghost i { width: 26px; border-radius: 3px; border: 2px dashed var(--line2); }
.sh-ghost i:nth-child(1) { height: 84px; } .sh-ghost i:nth-child(2) { height: 96px; } .sh-ghost i:nth-child(3) { height: 74px; transform: rotate(8deg); transform-origin: bottom left; }

/* Dropping files */
.sh-dropzone { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 50;
  background: color-mix(in srgb, var(--brand) 14%, transparent); border: 3px dashed var(--brand); color: var(--brand-ink); font-size: 18px; pointer-events: none; }
.sh.dropping .sh-dropzone { display: flex; }

/* Add / edit */
.sh-add { display: flex; flex-direction: column; gap: 12px; }
.sh-add .fld em { font-style: normal; color: var(--faint); font-weight: 400; }
.sh-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px; border: 2px dashed var(--line2); border-radius: 14px; cursor: pointer; color: var(--mute); text-align: center; }
.sh-drop b { color: var(--ink); }
.sh-drop:hover, .sh-drop.over { border-color: var(--brand); background: var(--brand-soft); }
.sh-files { display: flex; flex-direction: column; gap: 6px; }
.sh-file { display: flex; align-items: center; gap: 8px; color: var(--mute); }
.sh-file .bn-input { flex: 1; min-width: 0; }
.sh-file small { font: 12px var(--mono); white-space: nowrap; }
.sh-file.bad small { color: var(--danger); }
.sh-space { margin: 0; font-size: 13px; color: var(--mute); }
.sh-space.bad { color: var(--danger); }

/* The book's card */
.sh-card { display: flex; gap: 22px; align-items: flex-start; }
.sh-cover { flex: none; width: 168px; aspect-ratio: 3 / 4.2; border-radius: 4px 10px 10px 4px; overflow: hidden; background: linear-gradient(135deg, var(--bl), var(--b));
  box-shadow: inset 6px 0 0 rgba(0,0,0,.18), inset 8px 0 0 rgba(255,255,255,.08), 0 12px 28px -10px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.sh-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-cover span { color: #fff; font-weight: 700; padding: 14px; text-align: center; }
.sh-info { flex: 1; min-width: 0; }
.sh-info h3 { margin: 2px 0 4px; font-size: 19px; overflow-wrap: anywhere; }
.sh-h { display: flex; align-items: flex-start; gap: 8px; }
.sh-h h3 { flex: 1; }
.sh-fav { flex: none; border: 0; background: none; cursor: pointer; color: var(--faint); padding: 4px; border-radius: 8px; transition: transform .15s, color .15s; }
.sh-fav:hover { color: #e0a100; transform: scale(1.1); }
.sh-fav.on { color: #f5b301; }
.sh-fav.on svg { fill: currentColor; }
.sh-favf em { font-style: normal; font: 11px var(--mono); color: var(--mute); }
.sh-favf.on { background: #fff4d1; border-color: #f5b301; color: #8a5a00; }
.sh-favf.on svg { fill: #f5b301; color: #f5b301; }
:root[data-theme="dark"] .sh-favf.on { background: #3a2e0c; color: #ffd36b; }
.sh-spine.fav::after { content: "★"; position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #ffd36b; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.sh-where { margin: 0 0 12px; color: var(--mute); font-size: 13.5px; }
.sh-info dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 12px; font-size: 13.5px; }
.sh-info dt { color: var(--mute); } .sh-info dd { margin: 0; }
.sh-prog { height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; }
.sh-prog i { display: block; height: 100%; background: var(--brand); }
.sh-prog-t { display: block; margin: 5px 0 12px; color: var(--mute); font-size: 12.5px; }
.sh-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sh-acts.sm { margin-top: 12px; }
@media (max-width: 560px) { .sh-card { flex-direction: column; align-items: center; text-align: center; } .sh-info dl { text-align: left; } .sh-acts { justify-content: center; } .sh-meter { margin-left: 0; } }

/* The reader */
.sh-reader { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--desk, #2b2b33); opacity: 0; transition: opacity .18s; }
.sh-reader.show { opacity: 1; }
.sh-reader header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.sh-r-title { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sh-r-page { display: inline-flex; align-items: center; gap: 6px; font: 13px var(--mono); color: var(--mute); white-space: nowrap; }
.sh-r-page input { width: 64px; padding: 4px 6px; text-align: center; }
.sh-r-pages { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 18px 16px 40px; }
.sh-r-sheet { flex: none; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.sh-r-canvas { width: 100%; height: 100%; display: block; }

/* The cockpit: the topic's books */
.ck-shelf:not(:empty) { margin: 0 0 14px; }
.ck-shelf-h { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.cp-shelf { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-shelf button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); font-size: 13px; }
.cp-shelf button:hover { background: var(--hover); }
.cp-shelf button i { width: 8px; height: 22px; border-radius: 2px; background: linear-gradient(90deg, var(--bd), var(--bl)); }