/* ============================================================
   Reeduo — Apple-style UI. Token-driven, light + dark.
   ============================================================ */
:root {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface-2: #fbfbfd;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #8e8e93;
  --border: #d2d2d7;
  --border-soft: #e8e8ed;
  --accent: #2e9e6a;
  --accent-ink: #ffffff;
  --accent-press: #26855a;
  --accent-tint: #e8f6ef;
  --good: #34c759;
  --danger: #d70015;
  --danger-tint: #fdecea;
  --star: #c2841f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 1px 3px rgba(0,0,0,.05), 0 12px 40px rgba(0,0,0,.09);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Songti SC", "Noto Serif SC", serif;
  --bar-h: 52px;
  --side-w: 300px;
}
/* Dark tokens, shared by the system-preference default and the manual toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1c1e;
    --surface: #2c2c2e;
    --surface-2: #242426;
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #8e8e93;
    --border: #3a3a3c;
    --border-soft: #323234;
    --accent: #0a84ff;
    --accent-ink: #ffffff;
    --accent-press: #409cff;
    --accent-tint: #14243a;
    --good: #30d158;
    --danger: #ff453a;
    --danger-tint: #3a1a18;
    --star: #e0a34a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow: 0 1px 3px rgba(0,0,0,.3), 0 16px 48px rgba(0,0,0,.55);
  }
}
/* Manual "深色" — wins regardless of system setting. */
:root[data-theme="dark"] {
  --bg: #1c1c1e;
  --surface: #2c2c2e;
  --surface-2: #242426;
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #8e8e93;
  --border: #3a3a3c;
  --border-soft: #323234;
  --accent: #4fc98c;
  --accent-ink: #07130d;
  --accent-press: #6bd6a0;
  --accent-tint: #12291f;
  --good: #30d158;
  --danger: #ff453a;
  --danger-tint: #3a1a18;
  --star: #e0a34a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 16px 48px rgba(0,0,0,.55);
}
/* Manual "浅色" — re-assert light tokens so they beat the media query. */
:root[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface-2: #fbfbfd;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #8e8e93;
  --border: #d2d2d7;
  --border-soft: #e8e8ed;
  --accent: #2e9e6a;
  --accent-ink: #ffffff;
  --accent-press: #26855a;
  --accent-tint: #e8f6ef;
  --good: #34c759;
  --danger: #d70015;
  --danger-tint: #fdecea;
  --star: #c2841f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 1px 3px rgba(0,0,0,.05), 0 12px 40px rgba(0,0,0,.09);
}

/* Theme toggle button (reading top bar + home corner) */
.theme-toggle {
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  border-radius: 9px; cursor: pointer; width: 32px; height: 32px; font-size: 15px; line-height: 1;
  display: inline-grid; place-items: center; font-family: var(--sans); transition: background .12s;
}
.theme-toggle:hover { background: var(--surface); }
.reeduo-bar .theme-toggle { margin-left: 8px; }
.home .theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 20; }

/* Language (EN/中) toggle — sits left of the theme toggle */
.lang-toggle {
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  border-radius: 9px; cursor: pointer; height: 32px; min-width: 34px; padding: 0 9px;
  font-size: 13px; font-weight: 600; font-family: var(--sans); transition: background .12s;
}
.lang-toggle:hover { background: var(--surface); }
.home .lang-toggle { position: fixed; top: 18px; right: 58px; z-index: 20; }
.reeduo-bar .lang-toggle { margin-left: 8px; }
.home-nav { position: fixed; top: 68px; right: 18px; z-index: 19; display: flex; gap: 12px; align-items: center; }
.home-nav a, .home-notes { color: var(--text-2); font: 13px var(--sans); text-decoration: none; }
.home-nav a:hover, .home-notes:hover { color: var(--accent); }
.home-nav a + a::before {
  content: "|"; color: var(--text-3); margin-right: 12px; opacity: .7;
}
.page-notifications { position: fixed; top: 18px; left: 94px; z-index: 20; color: var(--text-2); font: 13px var(--sans); text-decoration: none; }
.notification-link { display: inline-flex; align-items: center; gap: 5px; }
.notification-badge {
  min-width: 16px; height: 16px; box-sizing: border-box; padding: 0 4px; border-radius: 8px;
  background: var(--danger); color: #fff; font: 10px/16px var(--sans); text-align: center;
}
.notification-badge[hidden] { display: none; }
.notifications-page .home-main { padding-top: 72px; }
.courses-page { min-height: 100vh; }
.courses-page::before {
  content: ""; position: fixed; inset: 0 0 auto; height: 380px; pointer-events: none;
  background: radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 68%);
}
.courses-page .lang-toggle, .courses-page .theme-toggle { position: static; }
.courses-nav {
  width: min(1120px, calc(100% - 48px)); height: 72px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; z-index: 2;
}
.courses-nav a { color: var(--text-2); text-decoration: none; }
.courses-home { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 550; }
.courses-home:hover, .courses-nav nav > a:hover { color: var(--text); }
.courses-brand { justify-self: center; display: block; }
.courses-brand img { width: auto; height: 29px; display: block; }
.courses-nav nav { justify-self: end; display: flex; align-items: center; gap: 10px; }
.courses-nav nav > a { font-size: 14px; margin-right: 5px; }
.courses-main {
  width: min(960px, calc(100% - 48px)); margin: 0 auto; padding: 92px 0 112px;
  position: relative; z-index: 1;
}
.courses-hero { max-width: 700px; }
.courses-kicker {
  margin: 0 0 14px; color: var(--accent); font-size: 12px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
.home.courses-page h1 {
  margin: 0; font-size: clamp(42px, 6vw, 68px); line-height: 1.02; letter-spacing: -.055em;
  font-weight: 750;
}
.home.courses-page .courses-hero .sub {
  max-width: 600px; margin: 22px 0 0; color: var(--text-2); font-size: clamp(17px, 2vw, 20px);
  line-height: 1.65; text-wrap: balance;
}
.courses-library { margin-top: 70px; }
.course-summary {
  display: flex; align-items: center; gap: 13px; margin-bottom: 20px; color: var(--text-3);
  font-size: 13px;
}
.course-summary strong { color: var(--text); font-weight: 650; }
.course-summary i { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
.course-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.course-card {
  min-height: 210px; box-sizing: border-box; padding: 24px; border: 1px solid var(--border-soft);
  border-radius: 22px; background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--text); text-decoration: none; display: flex; flex-direction: column;
  position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.course-card.ready:hover {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow: var(--shadow); background: var(--bg);
}
.course-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.course-mark {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-tint);
}
.course-mark svg, .courses-empty-icon svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.course-badge {
  padding: 5px 9px; border-radius: 999px; color: var(--text-2); background: var(--surface);
  font-size: 11px; font-weight: 650;
}
.course-card.ready .course-badge { color: var(--accent); background: var(--accent-tint); }
.course-card.error .course-mark, .course-card.error .course-badge { color: var(--danger); background: var(--danger-tint); }
.course-title {
  display: -webkit-box; margin-top: 30px; padding-right: 26px; overflow: hidden; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; font-size: 18px; line-height: 1.45; font-weight: 650; letter-spacing: -.015em;
}
.course-meta { margin-top: auto; padding-top: 16px; color: var(--text-3); font-size: 12px; line-height: 1.45; }
.course-arrow { position: absolute; right: 24px; bottom: 22px; color: var(--accent); font-size: 17px; }
.courses-loading {
  grid-column: 1 / -1; min-height: 180px; border: 1px solid var(--border-soft); border-radius: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--text-3); font-size: 13px;
}
.course-loading-mark {
  width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: go-spin .8s linear infinite;
}
.courses-empty {
  grid-column: 1 / -1; padding: 58px 24px; border: 1px dashed var(--border);
  border-radius: 22px; text-align: center; background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.courses-empty-icon {
  width: 58px; height: 58px; margin: 0 auto 22px; border-radius: 18px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-tint);
}
.courses-empty-icon svg { width: 30px; height: 30px; }
.courses-empty h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.courses-empty p { max-width: 470px; margin: 10px auto 24px; color: var(--text-2); font-size: 14px; line-height: 1.65; }
.courses-empty-action {
  display: inline-flex; align-items: center; height: 40px; padding: 0 17px; border-radius: 11px;
  background: var(--accent); color: #fff; text-decoration: none; font-size: 13px; font-weight: 650;
}
.courses-empty-action:hover { background: var(--accent-press); }
@media (max-width: 680px) {
  .courses-nav { width: calc(100% - 32px); grid-template-columns: 1fr auto; }
  .courses-brand { display: none; }
  .courses-main { width: calc(100% - 32px); padding: 62px 0 72px; }
  .home.courses-page h1 { font-size: 44px; }
  .home.courses-page .courses-hero .sub { font-size: 16px; line-height: 1.6; }
  .courses-library { margin-top: 48px; }
  .course-grid { grid-template-columns: 1fr; }
  .course-card { min-height: 190px; padding: 21px; border-radius: 18px; }
  .course-title { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .course-card { transition: none; }
}
.notification-row {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  padding: 14px 12px; border: 0; border-bottom: 1px solid var(--border-soft);
  background: transparent; color: var(--text); text-align: left; font-family: var(--sans);
}
button.notification-row { cursor: pointer; }
button.notification-row:hover { background: var(--surface); }
.notification-row.unread { background: var(--accent-tint); }
.notification-mark { flex: none; font-size: 22px; }
.notification-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.notification-copy .t { font-size: 14px; font-weight: 600; }
.notification-copy .m { color: var(--text-2); font-size: 12px; }
.notification-row time { flex: none; color: var(--text-3); font-size: 11px; }

/* ============================================================
   HOME
   ============================================================ */
body.home {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); -webkit-font-smoothing: antialiased; line-height: 1.5;
}
.home-main { max-width: 600px; margin: 0 auto; padding: 8vh 24px 96px; text-align: center; }
/* The library is a two-column working view, not a centred landing page, so it
   opts out of the narrow column the rest of body.home shares. */
.library-page .home-main { max-width: none; padding-left: 0; padding-right: 0; }
.home .brand { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 26px; }
/* Home only. The login page shares body.home / .home-main but keeps its heading
   and sub-copy, so it keeps the tighter original rhythm. */
.home-main:not(.login-main) { padding-top: clamp(56px, 15vh, 150px); }
.home-main:not(.login-main) .brand { margin-bottom: 40px; }
.home .brand-wordmark { height: 56px; width: auto; display: block; }
/* The wordmark's pale-mint strokes wash out on white; deepen it on light
   backgrounds only (dark theme keeps the vivid original). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand-wordmark,
  :root:not([data-theme="dark"]) .reeduo-bar .rwordmark { filter: brightness(.78) saturate(1.5); }
}
:root[data-theme="light"] .brand-wordmark,
:root[data-theme="light"] .reeduo-bar .rwordmark { filter: brightness(.78) saturate(1.5); }
.home h1 {
  font-size: clamp(28px, 6vw, 40px); font-weight: 700; letter-spacing: -.025em;
  margin: 0 0 12px; text-wrap: balance;
}
.home .sub { color: var(--text-2); font-size: 17px; margin: 0 auto 36px; max-width: 32ch; text-wrap: balance; }

/* The home page's single focus: one large field, with the submit control tucked
   inside it so the input reads as one object rather than a form. The login page
   shares body.home but has no #url-form, so these rules never reach it. */
#url-form { position: relative; max-width: 560px; margin: 0 auto 16px; }
#url {
  width: 100%; box-sizing: border-box; height: 62px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface-2);
  padding: 0 70px 0 22px; font-size: 17px; color: var(--text);
  font-family: var(--sans); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#url::placeholder { color: var(--text-3); }
/* Focus tints the field the way a highlighter marks a passage — the gesture the
   whole product is built on. Both tokens are theme-aware (mint / deep blue). */
#url:focus {
  border-color: var(--accent); background: var(--accent-tint);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}
#url-form button {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; padding: 0; border: none; border-radius: 12px;
  background: var(--accent); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, opacity .15s;
}
#url-form button:hover { background: var(--accent-press); }
#url-form button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
#url-form button:disabled { opacity: .6; cursor: default; }
.go-arrow {
  width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
/* Submitting swaps the arrow for a spinner; the wording lives in #msg, so the
   button never needs its label replaced (which would wipe the inline SVG). */
.go-spin {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, #fff 40%, transparent); border-top-color: #fff;
  animation: go-spin .7s linear infinite;
}
#url-form button.is-loading .go-arrow { display: none; }
#url-form button.is-loading .go-spin { display: block; }
@keyframes go-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .go-spin { animation-duration: 2.4s; } }

#drop {
  display: block; max-width: 560px; box-sizing: border-box; /* keep flush with #url */
  margin: 0 auto 8px; padding: 12px; border-radius: 13px;
  color: var(--text-3); font-size: 14px; cursor: pointer; border: 1px dashed transparent;
  transition: background .15s, border-color .15s;
}
#drop:hover { color: var(--text-2); }
#drop b { color: var(--accent); font-weight: 500; }
#drop.dragover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }

#msg { min-height: 22px; font-size: 14px; margin: 8px 0 0; }

.library { max-width: 560px; margin: 44px auto 0; text-align: left; }
.library-full { margin-top: 120px; }
/* Tags stay pinned at the left edge while the list takes the rest of the
   window: on a wide screen the old centred grid left a wide empty margin on
   both sides and pushed the tag rail into the middle of the page. */
.library-shell {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 32px;
  align-items: start; justify-content: stretch;
  max-width: none; margin: 0; padding: 0 28px 0 24px;
}
.library-shell > .library { margin: 0; max-width: none; }
.library-sidebar { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; text-align: left; }
.library-sidebar .lib-label { margin-bottom: 8px; }
.lib-filter { border: 0; border-radius: 8px; padding: 8px 10px; background: transparent; color: var(--text-2); text-align: left; font: inherit; font-size: 13px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-filter:hover, .lib-filter.is-active { background: var(--surface); color: var(--accent); }
@media (max-width: 760px) {
  .library-shell { display: block; padding: 0; }
  .library-sidebar { position: static; flex-direction: row; overflow-x: auto; margin: 0 0 16px; padding: 0 2px 4px; }
  .library-sidebar .lib-label { display: none; }
  .lib-filter { flex: none; }
}
.lib-label {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 6px;
}
.lib-row {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 4px; text-decoration: none;
  color: var(--text); border-top: 1px solid var(--border-soft); transition: background .12s;
}
.lib-row:last-child { border-bottom: 1px solid var(--border-soft); }
.lib-row:hover { background: var(--surface); border-radius: 10px; }
/* The row spans the full column, but its content stops at a comfortable
   reading width so the kind badge stays beside the title instead of being
   flung to the far edge of a wide screen. */
.lib-mainline { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 980px; }
.lib-ico {
  width: 38px; height: 38px; border-radius: 9px; background: var(--surface);
  display: grid; place-items: center; font-size: 17px; flex: none;
}
.lib-txt { min-width: 0; flex: 1; }
.lib-row .t { font-size: 15px; font-weight: 500; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-row .kind {
  margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; flex: none;
}
a.lib-txt { color: var(--text); text-decoration: none; }
a.lib-txt:hover .t { color: var(--accent); }
.lib-row .m { display: block; font-size: 13px; color: var(--text-3); margin-top: 2px; }
.lib-dl {
  margin-left: auto; flex: none; font-size: 12px; font-weight: 600; color: var(--accent);
  text-decoration: none; border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px;
}
.lib-dl:hover { background: var(--surface); }
.lib-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; text-decoration: none; color: var(--text); }
.lib-link:hover .t { color: var(--accent); }
.lib-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; max-width: 980px; box-sizing: border-box; padding-left: 52px; }
.lib-status-label { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12px; }
.lib-status-select, .lib-tag-input {
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text); font: inherit; font-size: 12px; padding: 4px 9px;
}
.lib-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lib-tag {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
  border-radius: 999px; padding: 3px 7px; font-size: 12px; font-weight: 600;
}
.lib-tag-remove {
  border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 0 0 2px; opacity: .75;
}
.lib-tag-remove:hover { opacity: 1; }
.lib-tag-form { display: flex; align-items: center; gap: 4px; }
.lib-tag-input { width: 92px; }
.lib-tag-form button {
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--accent); cursor: pointer; width: 24px; height: 24px; line-height: 1;
}
.lib-tag-form button:hover { border-color: var(--accent); }
.lib-del {
  flex: none; display: grid; place-items: center; padding: 7px; border: none; border-radius: 8px;
  background: none; color: var(--text-3); cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.lib-row:hover .lib-del { opacity: 1; }
.lib-del:hover { color: var(--danger); background: var(--danger-tint); }
@media (hover: none) { .lib-del { opacity: .55; } }
.home-notes { position: fixed; top: 18px; left: 18px; z-index: 20; color: var(--accent); text-decoration: none; font-size: 14px; }
.home-notes:hover { text-decoration: underline; }
.page-help-link { position: fixed; top: 18px; left: 92px; z-index: 20; color: var(--accent); text-decoration: none; font-size: 14px; }
.page-help-link:hover { text-decoration: underline; }
.page-help-link a { color: inherit; text-decoration: none; }
.site-help-footer { position: fixed; left: 18px; bottom: 18px; font-size: 13px; }
.site-help-footer a { color: var(--text-3); text-decoration: none; }
.site-help-footer a:hover { color: var(--accent); }

/* KaTeX display equations may be wider than a narrow article/sidebar. Scroll
   the equation itself instead of widening the page or clipping the notation. */
.annote-doc .katex-display, .annote-reply .katex-display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 2px;
}

/* home login/logout widget + login page */
.home-auth { position: fixed; top: 15px; right: 100px; z-index: 20; display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-2); text-decoration: none; font-size: 14px; }
.home-auth img { width: 24px; height: 24px; border-radius: 50%; }
.home-auth a { color: var(--accent); text-decoration: none; }
.home-auth a:hover, a.home-auth:hover { text-decoration: underline; }
.home-auth .gh-conn { color: var(--good); font-size: 13px; }
.logout-form { display: inline; margin: 0; }
.logout-form button { border: 0; padding: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }
.logout-form button:hover { text-decoration: underline; }

/* Product feedback and owner-only feedback administration. */
.feedback-main { width: min(680px, calc(100% - 48px)); margin: 0 auto; padding: 96px 0; }
.feedback-main h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -.03em; }
.feedback-main > .sub { margin: 0 0 30px; color: var(--text-2); }
.feedback-success { padding: 12px 14px; border: 1px solid var(--good); border-radius: 10px; color: var(--good); background: var(--accent-tint); }
.feedback-form { display: grid; gap: 12px; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.feedback-form fieldset { display: flex; gap: 22px; margin: 0 0 4px; padding: 0; border: 0; }
.feedback-form legend, .feedback-form > label { margin-bottom: 2px; color: var(--text-2); font-size: 13px; font-weight: 650; }
.feedback-form fieldset label { color: var(--text); cursor: pointer; }
.feedback-form textarea, .feedback-form > input {
  box-sizing: border-box; width: 100%; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); outline: none;
}
.feedback-form textarea { min-height: 170px; padding: 12px; resize: vertical; }
.feedback-form > input { height: 42px; padding: 0 12px; }
.feedback-form textarea:focus, .feedback-form > input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.feedback-form > button { justify-self: end; height: 42px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: 650 14px var(--sans); cursor: pointer; }
.feedback-form > button:hover { background: var(--accent-press); }
.feedback-list { display: grid; gap: 14px; }
.feedback-item { padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.feedback-item p { margin: 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--text-3); font-size: 12px; }
.feedback-kind { padding: 3px 8px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-weight: 650; }
.feedback-kind[data-kind="bug"] { background: var(--danger-tint); color: var(--danger); }
.feedback-page, .feedback-user { color: var(--text-3); font-size: 12px; overflow-wrap: anywhere; }
.feedback-user { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.feedback-pagination { margin-top: 22px; text-align: right; }
.feedback-pagination a { color: var(--accent); font-size: 14px; font-weight: 650; text-decoration: none; }
.feedback-pagination a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .home-auth > span, .home-auth .gh-conn, .home-auth a[href="/auth/github/connect"] { display: none; }
  .feedback-main { width: min(100% - 32px, 680px); padding-top: 80px; }
}
.login-main { min-height: 78vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* connect-GitHub guided prompt (private-repo fetch recovery) */
.reeduo-modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: color-mix(in srgb, #000 42%, transparent); padding: 20px; }
.reeduo-modal { width: min(420px, 100%); background: var(--bg); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow); padding: 22px 22px 18px; text-align: left; }
.reeduo-modal .rm-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.reeduo-modal .rm-body { margin: 8px 0 18px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.reeduo-modal .rm-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.reeduo-modal .rm-danger { height: 38px; padding: 0 16px; border-radius: 10px; border: none;
  background: var(--danger); color: #fff; font-size: 14px; font-weight: 600; font-family: var(--sans); cursor: pointer; }
.reeduo-modal .rm-danger:hover { filter: brightness(1.08); }
.reeduo-modal .rm-cancel { height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; font-family: var(--sans); cursor: pointer; }
.reeduo-modal .rm-cancel:hover { background: var(--surface-2); }
.reeduo-modal .rm-connect { height: 38px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.reeduo-modal .rm-connect:hover { background: var(--accent-press); }
.oauth-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; width: 100%; max-width: 320px; }
.oauth-btn { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 12px;
  text-decoration: none; font-size: 15px; font-weight: 600; border: 1px solid var(--border);
  color: var(--text); background: var(--bg); transition: background .12s; }
.oauth-btn:hover { background: var(--surface); }
.oauth-btn.gh { background: #1f2328; color: #fff; border-color: #1f2328; }
.oauth-btn.gh:hover { background: #32383f; }

/* Generate-note menu (reading top bar) */
.reeduo-bar .barlink { margin-left: 8px; color: var(--accent); font-size: 13px; text-decoration: none; }
.reeduo-bar .barlink:hover { text-decoration: underline; }
.reader-auth {
  margin-left: 8px; display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; color: var(--text-2); font: 13px/1 var(--sans);
}
.reader-auth img { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.reader-auth a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.reader-auth a:hover { text-decoration: underline; }
.reader-user {
  max-width: 130px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text);
}
.reader-gh { color: var(--good); white-space: nowrap; }
.reader-logout { margin: 0; }
.reader-logout button {
  border: 0; padding: 0; background: none; color: var(--accent);
  font: inherit; cursor: pointer;
}
.reader-logout button:hover { text-decoration: underline; }
.note-menu {
  position: fixed; z-index: 10002; background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); padding: 8px; min-width: 172px;
  display: flex; flex-direction: column; gap: 2px; font-family: var(--sans);
}
.note-menu-h { font-size: 12px; color: var(--text-3); padding: 4px 8px 6px; }
.note-menu button {
  text-align: left; background: none; border: none; border-radius: 8px; padding: 9px 10px;
  font-size: 14px; color: var(--text); cursor: pointer; font-family: var(--sans);
}
.note-menu button:hover { background: var(--surface); }

/* Note detail page (/note/{id}) */
body.note-view { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.note-bar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px;
  height: var(--bar-h); padding: 0 22px; border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.note-bar .back { color: var(--accent); font-size: 15px; text-decoration: none; }
.note-bar .dl {
  margin-left: auto; height: 32px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; text-decoration: none;
}
.note-bar .dl:hover { background: var(--surface); }

/* ============================================================
   READING — top bar (injected by annote.js)
   ============================================================ */
body.annote-active { margin-right: var(--side-w); padding-top: var(--bar-h); }
/* Theme the reading surface for content we render (fragments wrapped in .annote-doc).
   Uploaded full-HTML docs bring their own styling and are left untouched. */
body.annote-active:has(.annote-doc) { background: var(--bg); color: var(--text); }
.reeduo-bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--bar-h); z-index: 10001;
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
  border-bottom: 1px solid var(--border-soft); font-family: var(--sans);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.reeduo-bar .back { color: var(--accent); font-size: 15px; text-decoration: none; }
.reeduo-bar .back:hover { text-decoration: underline; }
.reeduo-bar .rname { display: flex; align-items: center; }
.reeduo-bar .rwordmark { height: 26px; width: auto; display: block; }
.reeduo-bar .export {
  margin-left: auto; height: 32px; padding: 0 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px;
  font-weight: 500; font-family: var(--sans); display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s;
}
.reeduo-bar .export:hover { background: var(--surface); }

/* ============================================================
   READING — annotation side panel
   ============================================================ */
.annote-sidebar {
  position: fixed; top: var(--bar-h); right: 0; width: var(--side-w); height: calc(100vh - var(--bar-h));
  overflow-y: auto; background: var(--surface-2); border-left: 1px solid var(--border-soft);
  box-sizing: border-box; padding: 16px; z-index: 9999; font-family: var(--sans);
}
/* Draggable divider centered on the sidebar's left edge. No visible line —
   the col-resize cursor over the grab strip is the only affordance. */
.annote-resizer {
  position: fixed; top: var(--bar-h); height: calc(100vh - var(--bar-h)); width: 10px;
  left: 0; cursor: col-resize; z-index: 10000; /* left set in JS to the sidebar's real edge */
}
body.annote-resizing { cursor: col-resize; user-select: none; }
.annote-sidebar-head { display: flex; align-items: center; gap: 9px; min-width: 0; margin-bottom: 14px; }
.annote-filter {
  min-width: 0; margin-left: auto; font-size: 12px; padding: 3px 7px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--surface); color: var(--text-2); font-family: var(--sans); cursor: pointer;
}
.annote-sidebar-head .h { min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.annote-sidebar-head .n {
  font-size: 12px; color: var(--text-3); background: var(--surface); border-radius: 20px; padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}
.annote-list { display: flex; flex-direction: column; min-width: 0; gap: 12px; }
.annote-empty { color: var(--text-3); font-size: 13px; line-height: 1.6; padding: 8px 2px; }

.annote-card {
  min-width: 0; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 13px; padding: 13px;
  box-shadow: var(--shadow-sm);
}
.annote-quote {
  font-size: 13px; color: var(--text-2); border-left: 2px solid var(--accent); padding-left: 9px;
  margin-bottom: 9px; line-height: 1.5;
}
/* Inside a card the quote sits in .annote-head, which owns the gap to the thread
   (see below); the composer keeps its own margin via the rule further down. */
.annote-head > .annote-quote { margin-bottom: 0; }
.annote-body { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 10px; line-height: 1.45; }
.annote-reply {
  background: var(--accent-tint); border-radius: 10px; padding: 10px 12px;
  font-size: 13.5px; line-height: 1.65; color: var(--text); white-space: pre-wrap;
}
.annote-reply .who { color: var(--accent); font-weight: 600; font-size: 12px; display: block; margin-bottom: 3px; }
.annote-reply strong { font-weight: 700; }
.annote-reply code {
  background: color-mix(in srgb, var(--accent) 16%, transparent); padding: 1px 5px;
  border-radius: 4px; font-size: 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.annote-reply.annote-pending {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent), transparent),
    var(--surface);
  background-size: 220% 100%;
  color: var(--text-3); font-style: italic;
  animation: annote-pending-shimmer 1.6s ease-in-out infinite;
}
.annote-reply.annote-pending .who { color: var(--text-3); }
@keyframes annote-pending-shimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}
.annote-reply.annote-err { background: var(--danger-tint); color: var(--danger); }
.annote-reply.annote-err .who { color: var(--danger); }
.annote-reply.annote-subscription-required {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 18%, transparent), transparent 36%),
    color-mix(in srgb, var(--accent) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  color: var(--text);
  display: grid;
  gap: 8px;
  white-space: normal;
  position: relative;
  padding-right: 42px;
}
.annote-reply.annote-subscription-required .who { color: var(--accent); margin-bottom: 0; }
.subscription-title {
  display: block; color: var(--text); font-size: 15px; font-weight: 750; letter-spacing: -.01em;
}
.subscription-copy {
  display: block; color: var(--text-2); font-size: 13px; line-height: 1.5;
}
.subscription-actions-inline { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.annote-subscribe {
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 999px; padding: 7px 12px; background: var(--accent);
  color: var(--accent-ink); font: 700 13px var(--sans); cursor: pointer;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}
.annote-subscribe:hover { background: var(--accent-press); }
.annote-subscription-dismiss {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--text-3) 35%, transparent);
  border-radius: 999px; background: color-mix(in srgb, var(--surface) 55%, transparent);
  color: var(--text-2); font: 400 20px/1 var(--sans); cursor: pointer;
}
.annote-subscription-dismiss:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
/* Rendered AI-reply markdown (block elements handle their own spacing). */
.annote-reply .md { white-space: normal; display: block; }
.annote-reply.collapsed .md {
  max-height: 3.4em; overflow: hidden; position: relative;
}
.annote-reply.collapsed .md::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em;
  /* Fade into the card's own tint, not the panel surface: a --surface fade
     paints a gray wash over the tinted card and reads as grime in dark mode. */
  background: linear-gradient(transparent, var(--accent-tint));
  pointer-events: none;
}
.annote-reply .md > :first-child { margin-top: 0; }
.annote-reply .md > :last-child { margin-bottom: 0; }
.annote-reply .md p { margin: 0 0 .55em; }
.annote-reply .md ul, .annote-reply .md ol { margin: .3em 0 .6em; padding-left: 1.35em; }
.annote-reply .md li { margin: .22em 0; }
.annote-reply .md li::marker { color: var(--text-3); }
.annote-reply .md em { font-style: italic; }
.annote-reply .md a { color: var(--accent); text-decoration: underline; }
.annote-reply .md h1, .annote-reply .md h2, .annote-reply .md h3, .annote-reply .md h4 { font-size: 1em; font-weight: 700; margin: .7em 0 .3em; }
.annote-reply .md pre { background: color-mix(in srgb, var(--text-3) 14%, transparent); padding: 8px 10px; border-radius: 8px; overflow-x: auto; font-size: 12px; margin: .4em 0; }
.annote-reply .md pre code { background: none; padding: 0; }
.annote-reply .md table { border-collapse: collapse; margin: .4em 0; font-size: 12.5px; display: block; overflow-x: auto; }
.annote-reply .md th, .annote-reply .md td { border: 1px solid var(--border); padding: 4px 8px; }
.reply-footer { display: flex; justify-content: flex-end; margin-top: 8px; }
.reply-expand {
  display: none;
  width: 100%;
  margin: -2em 0 0;
  padding: 1.7em 8px .15em;
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(transparent, var(--accent-tint) 58%);
  color: var(--accent);
  font: 600 12px var(--sans);
  cursor: pointer;
  text-align: center;
}
.reply-expand::after { content: " ⌄"; font-size: 11px; }
.annote-reply.collapsed .reply-expand { display: block; }
.reply-expand:hover { color: var(--accent-press); }

/* Reply header and actions. The read check lives below the answer so it remains
   reachable after reading a long response without scrolling back to the top. */
.annote-reply .reply-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.annote-reply .reply-head .who { margin-bottom: 0; }
.reply-actions { position: relative; display: flex; align-items: center; gap: 5px; }
.reply-more {
  width: 24px; height: 22px; padding: 0 0 5px; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--text-3); cursor: pointer; font-size: 17px; line-height: 1;
}
.reply-collapse {
  width: 24px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--text-3); cursor: pointer; font-size: 15px; line-height: 1;
  transition: transform .12s, color .12s, background .12s, border-color .12s;
}
.annote-reply.collapsed .reply-collapse { transform: rotate(180deg); }
.reply-more:hover, .reply-collapse:hover { color: var(--accent); border-color: var(--border); background: var(--bg); }
.reply-menu {
  display: none; position: absolute; z-index: 8; right: 27px; top: 25px; min-width: 112px;
  padding: 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); box-shadow: var(--shadow);
}
.reply-menu.open { display: block; }
.reply-menu button {
  width: 100%; border: 0; border-radius: 6px; background: none; color: var(--text);
  padding: 7px 9px; text-align: left; font: 13px var(--sans); cursor: pointer; white-space: nowrap;
}
.reply-menu button:hover { background: var(--surface); color: var(--accent); }
.read-check {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--text-3);
  cursor: pointer; opacity: .5; transition: opacity .12s, color .12s, background .12s, border-color .12s;
}
.read-check:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }
.annote-reply.read .read-check { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1; }
.annote-reply.read { opacity: .6; }
.annote-reply.read:hover { opacity: 1; } /* un-dim to re-read */

.course-modal-shade {
  /* Keep the dialog above both fixed reading chrome layers: the sidebar uses
     9999 and the top bar 10001. */
  position: fixed; z-index: 10002; inset: 0; display: grid; place-items: center;
  padding: 20px; background: rgba(0,0,0,.4); backdrop-filter: blur(3px);
}
.course-modal {
  width: min(360px, 100%); box-sizing: border-box; padding: 20px; border-radius: 14px;
  max-height: calc(100dvh - 40px); overflow-y: auto;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); box-shadow: var(--shadow);
}
.course-modal-title { font-size: 17px; font-weight: 650; margin-bottom: 6px; }
.course-modal-hint { font-size: 13px; color: var(--text-2); margin-bottom: 15px; }
.course-word-field {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 9px;
  padding: 0 11px; background: var(--surface-2);
}
.course-word-field input {
  min-width: 0; flex: 1; height: 40px; border: 0; outline: 0; background: transparent;
  color: var(--text); font: 15px var(--sans);
}
.course-word-unit { color: var(--text-3); font-size: 13px; }
.course-prompt-label {
  display: block; margin-top: 14px; color: var(--text-2); font-size: 13px;
}
.course-prompt {
  display: block; width: 100%; box-sizing: border-box; margin-top: 7px; min-height: 88px;
  resize: vertical; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
  outline: none; background: var(--surface-2); color: var(--text); font: 14px/1.5 var(--sans);
}
.course-prompt:focus, .course-word-field:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.course-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.course-modal-actions button {
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 13px; background: var(--bg);
  color: var(--text); font: 13px var(--sans); cursor: pointer;
}
.course-modal-actions button:last-child { border-color: var(--accent); background: var(--accent); color: #fff; }
.course-modal-actions button:disabled { opacity: .6; cursor: default; }

/* Conversation thread: initial question + its answers/follow-ups, rail-grouped */
.annote-thread { border-left: 2px solid var(--border-soft); padding-left: 12px; margin: 6px 0 0 3px; }

/* Multi-turn thread: user follow-up turns + per-card follow-up composer */
.annote-card .annote-reply, .annote-card .annote-userturn { margin-top: 8px; }
.followup-return { display: flex; justify-content: flex-start; margin-bottom: 7px; }
.followup-return button {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  padding: 4px 9px;
  font: 700 11.5px var(--sans);
  cursor: pointer;
}
.followup-return button:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.annote-anchor-flash { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 3px; }
.annote-userturn {
  background: var(--surface); border-radius: 10px; padding: 10px 12px; font-size: 13.5px;
  line-height: 1.6; color: var(--text); white-space: pre-wrap;
}
.annote-userturn .who { color: var(--text-2); font-weight: 600; font-size: 12px; display: block; margin-bottom: 3px; }
.annote-userturn-quote {
  display: block; color: var(--text-2); border-left: 2px solid var(--accent); padding-left: 8px;
  margin-bottom: 6px; white-space: normal; overflow-wrap: anywhere;
}
.annote-userturn-body { display: block; white-space: pre-wrap; }
.annote-followup { margin-top: 12px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.annote-fu-quote {
  font-size: 12px; color: var(--text-2); border-left: 2px solid var(--accent); padding-left: 8px;
  margin-bottom: 8px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere;
}
.annote-fu-input {
  width: 100%; box-sizing: border-box; min-height: 38px; resize: vertical; outline: none;
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 9px; padding: 8px 10px;
  font-size: 13.5px; color: var(--text); font-family: var(--sans); line-height: 1.5;
}
.annote-fu-input:focus { border-color: var(--accent); }
.annote-fu-input::placeholder { color: var(--text-3); }
.annote-followup .annote-row { margin-top: 8px; }
.annote-followup .annote-row button {
  height: 30px; padding: 0 14px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; font-family: var(--sans);
  transition: background .15s;
}
.annote-followup .annote-row button:hover { background: var(--accent-press); }

/* ============================================================
   READING — sidebar comment composer (opens on text selection)
   ============================================================ */
/* Transient hint (e.g. selection too long) */
.annote-toast {
  position: fixed; top: calc(var(--bar-h) + 14px); left: 50%; transform: translateX(-50%);
  z-index: 10001; background: var(--text); color: var(--bg); font-family: var(--sans);
  font-size: 13px; font-weight: 500; padding: 9px 16px; border-radius: 10px;
  box-shadow: var(--shadow); max-width: 80vw; text-align: center; display: inline-flex;
  align-items: center; gap: 10px;
}
.annote-toast.annote-toast-subscription {
  background: color-mix(in srgb, var(--surface) 94%, var(--accent));
  color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: var(--shadow-sm); text-align: left;
}
.annote-toast-text { min-width: 0; }
.annote-toast-copy,
.annote-toast-action { flex: none; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); border-radius: 6px; color: inherit; background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.annote-toast-copy:hover,
.annote-toast-action:hover { background: color-mix(in srgb, var(--bg) 15%, transparent); }
.annote-toast-action { background: color-mix(in srgb, var(--bg) 20%, transparent); }
.annote-toast-subscription .annote-toast-copy,
.annote-toast-subscription .annote-toast-action {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.annote-toast-subscription .annote-toast-action {
  background: var(--accent); color: var(--accent-ink);
}

/* Tint on the text being annotated while the composer is open. */
.annote-sel {
  background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 3px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Flash when jumping to a comment's source text (click the quote). */
::highlight(reeduo-locate) { background-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.annote-located { background: color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 3px; }
.annote-source-mark {
  border-radius: 3px; cursor: pointer; text-decoration-line: underline; text-underline-offset: 3px;
  transition: background .12s, box-shadow .12s;
}
.annote-source-mark-doc {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, var(--accent) 72%, transparent);
}
.annote-source-mark-followup {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  text-decoration-style: dashed;
  text-decoration-color: color-mix(in srgb, var(--accent) 82%, transparent);
}
.annote-source-mark:hover, .annote-source-mark:focus {
  outline: none; background: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}
.annote-quote.locatable { cursor: pointer; transition: color .12s; }
.annote-quote.locatable:hover { color: var(--accent); }
.annote-composer {
  min-width: 0; box-sizing: border-box; margin-bottom: 12px;
  background: var(--bg); border: 1px solid var(--accent); border-radius: 13px; padding: 13px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.annote-composer-head {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.annote-composer .annote-quote { margin-bottom: 10px; }
.annote-composer textarea {
  width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; border: none; outline: none;
  background: var(--surface); border-radius: 9px; padding: 9px 11px; font-size: 14px; color: var(--text);
  font-family: var(--sans); line-height: 1.55;
}
.annote-composer textarea::placeholder { color: var(--text-3); }
.annote-row { display: flex; min-width: 0; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.annote-row button {
  flex: none; height: 34px; padding: 0 16px; border: none; border-radius: 9px; cursor: pointer;
  font-size: 14px; font-weight: 600; font-family: var(--sans); transition: background .15s;
  background: var(--accent); color: #fff;
}
.annote-row button:hover { background: var(--accent-press); }
.annote-row .annote-cancel { background: var(--surface); color: var(--text-2); }
.annote-row .annote-cancel:hover { background: var(--border-soft); }

/* ============================================================
   READING — document typography (fragment content we control)
   ============================================================ */
.annote-doc {
  max-width: 680px; margin: 40px auto 96px; padding: 0 28px; box-sizing: border-box;
  font-family: var(--serif); font-size: 18px; line-height: 1.8; color: var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Reader typography: neutralize the source's inline styling — WeChat and many
   CMSs wrap every paragraph in inline bold / colours / odd fonts — so our own
   Apple-style reading treatment governs, the way Safari Reader does. Genuine
   emphasis (<strong>/<em>) is kept, just at a comfortable weight. */
.annote-doc :where(p, span, div, section, font, li, a) {
  font-family: inherit !important; font-size: inherit !important;
  font-weight: 400 !important; line-height: inherit !important;
  color: inherit !important; background: transparent !important;
  letter-spacing: normal !important;
}
.annote-doc :where(strong, b) { font-weight: 600 !important; }
.annote-doc :where(h1, h2, h3, h4, h5, h6) span { font-weight: inherit !important; }
.annote-doc p { text-wrap: pretty; }
.annote-doc :where(h1, h2, h3, h4, h5, h6) { scroll-margin-top: calc(var(--bar-h) + 20px); }
.annote-doc a { color: var(--accent) !important; }
.annote-doc img { max-width: 100%; height: auto; display: block; margin: 24px auto; border-radius: 8px; }
.annote-doc h1 { font-family: var(--sans); font-size: 30px; line-height: 1.25; margin: 1.4em 0 .5em; font-weight: 700; letter-spacing: -.02em; }
.annote-doc h2 { font-family: var(--sans); font-size: 23px; line-height: 1.3; margin: 1.4em 0 .5em; font-weight: 700; letter-spacing: -.01em; padding-bottom: .2em; border-bottom: 1px solid var(--border-soft); }
.annote-doc h3 { font-family: var(--sans); font-size: 19px; margin: 1.3em 0 .4em; font-weight: 600; }
.annote-doc h4 { font-family: var(--sans); font-size: 16px; margin: 1.2em 0 .3em; font-weight: 600; }
.annote-doc p { margin: 0 0 1.15em; }
.annote-doc a { color: var(--accent); }
.annote-doc ul, .annote-doc ol { margin: 0 0 1.15em; padding-left: 1.6em; }
.annote-doc li { margin: .35em 0; }
.annote-doc pre { font-family: ui-monospace, "SF Mono", Menlo, monospace; background: var(--surface); padding: 14px 16px; border-radius: 10px; overflow-x: auto; font-size: 14px; line-height: 1.55; }
.annote-doc code { font-family: ui-monospace, "SF Mono", Menlo, monospace; background: color-mix(in srgb, var(--text-3) 22%, transparent); padding: 2px 6px; border-radius: 5px; font-size: .86em; }
.annote-doc pre code { background: none; padding: 0; }
.annote-doc blockquote { margin: 1.2em 0; padding: .2em 1em; color: var(--text-2); border-left: 3px solid var(--border); }
.annote-doc table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; margin: 1.3em 0; font-size: 15px; font-family: var(--sans); }
.annote-doc th, .annote-doc td { border: 1px solid var(--border); padding: 8px 13px; }
.annote-doc th { background: var(--surface); }
.annote-doc hr { border: none; border-top: 1px solid var(--border-soft); margin: 2em 0; }
.annote-doc .contains-task-list { list-style: none; padding-left: .3em; }
.annote-doc .task-list-item input { margin-right: .5em; }
.annote-doc del { color: var(--text-3); }
.annote-doc article.code-bundle {
  font-family: var(--sans);
}
.annote-doc .code-bundle-meta {
  color: var(--text-2) !important;
  font-size: 15px !important;
}
.annote-doc .code-bundle-index {
  margin: 22px 0 30px;
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface);
}
.annote-doc .code-bundle-index ol {
  margin: 0;
  padding-left: 22px;
  columns: 2;
  column-gap: 32px;
}
.annote-doc .code-bundle-index li {
  break-inside: avoid;
  margin: 4px 0;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.annote-doc .code-file {
  margin: 34px 0;
}
.annote-doc .code-file h2 {
  margin: 0 0 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
}
.annote-doc .code-file pre {
  margin: 0;
  padding: 16px 0;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface);
  font-size: 14px;
  line-height: 1.65;
}
.annote-doc .code-file code {
  display: block;
  min-width: max-content;
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}
.annote-doc .code-line {
  display: block;
  position: relative;
  padding: 0 18px 0 74px;
  white-space: pre;
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: var(--text) !important;
}
.annote-doc .code-line::before {
  content: attr(data-line);
  position: absolute;
  left: 18px;
  color: var(--text-3);
  user-select: none;
}
.document-empty-state {
  max-width: 600px; margin: 18vh auto 0; padding: 32px;
  text-align: center; border: 1px solid var(--border-soft); border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.document-empty-state h1 { margin: 0 0 12px; font-family: var(--sans); font-size: 24px; }
.document-empty-state p { margin: 0 0 22px; color: var(--text-2); }
.document-empty-state a {
  display: inline-block; padding: 10px 16px; border-radius: 9px;
  background: var(--accent); color: #fff !important; font-family: var(--sans);
  font-weight: 600; text-decoration: none;
}

@media (max-width: 720px) {
  .annote-doc .code-bundle-index ol { columns: 1; }
  .annote-doc .code-file pre { font-size: 13px; }
  body.annote-active { margin-right: 0; padding-bottom: 52px; }
  .reeduo-bar { right: 0; }
  .reader-auth .reader-link, .reader-auth .reader-gh, .reader-auth .reader-logout { display: none; }
  .reader-user { max-width: 92px; }
  .annote-resizer { display: none; }
  /* annotation panel becomes a bottom drawer, collapsed to just its header */
  .annote-sidebar {
    top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto; max-height: 82vh;
    padding: 0 16px 16px; border-left: none; border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.16);
    transform: translateY(calc(100% - 52px)); transition: transform .28s ease;
  }
  body.panel-open .annote-sidebar { transform: translateY(0); }
  .annote-sidebar-head {
    height: 52px; margin-bottom: 0; cursor: pointer; position: sticky; top: 0; z-index: 1;
    justify-content: flex-start; gap: 8px; background: var(--surface-2);
  }
  .annote-sidebar-head::after {
    content: "⌃"; margin-left: auto; color: var(--text-3); font-size: 15px; transition: transform .22s ease;
  }
  body.panel-open .annote-sidebar-head::after { transform: rotate(180deg); }
  /* Clear the drawer's own sticky header (52px) so a stuck card head sits just
     below it, not behind it. The drawer header already covers the band above the
     stuck head, so the desktop gap-filler would only paint over it — drop it. */
  .annote-head { top: 52px; }
  .annote-head.is-stuck::before { display: none; }
}
.annote-retry {
  margin-top: 8px; height: 30px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--danger);
  background: none; color: var(--danger); font-size: 13px; font-weight: 600; font-family: var(--sans); cursor: pointer;
}
.annote-retry:hover { background: var(--danger-tint); }
/* F5: per-comment collapse toggle (folds the whole thread under its quote). */
.annote-card { position: relative; }
/* The head (quote + collapse chevron) sticks to the top of the scrolling
   sidebar while its thread scrolls under it, so a long conversation can still be
   folded from the chevron without scrolling back up. Its background is the card
   colour so thread content passing beneath is covered, not seen through.
   z-index:2 keeps it above the statically-stacked thread. */
.annote-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg); padding-right: 26px; margin-bottom: 9px;
}
/* Only when actually stuck (JS toggles .is-stuck) does it grow a divider, so an
   unscrolled card looks unchanged. */
.annote-head.is-stuck {
  box-shadow: 0 1px 0 var(--border-soft);
}
/* The head pins at the sidebar's padding edge (16px below the viewport top), so
   without this the 16px gap above it would leak thread text scrolling past. Fill
   that gap with the card colour. On mobile the drawer's own sticky header covers
   this band, so the patch is disabled there (see the media query below). */
.annote-head.is-stuck::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
  background: var(--bg);
}
.annote-collapsed .annote-head { margin-bottom: 0; }
.annote-collapse {
  position: absolute; top: -1px; right: 0; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  border: none; background: none; color: var(--text-2); cursor: pointer; border-radius: 6px;
  transition: transform .15s, background .12s, color .12s;
}
.annote-collapse:hover { background: var(--accent-tint); color: var(--accent); }
.annote-card:not(.annote-collapsed) .annote-collapse { transform: rotate(90deg); }
.annote-collapsed > .annote-thread, .annote-collapsed > .annote-followup { display: none; }

/* Tech News embed: the parent page owns the article and selection UI; this
   frame is only the conversation surface. */
body.reeduo-embed { margin: 0 !important; padding: 0 !important; overflow: hidden; }
body.reeduo-embed .annote-doc,
body.reeduo-embed .reeduo-bar,
body.reeduo-embed .annote-resizer { display: none !important; }
body.reeduo-embed .annote-sidebar {
  top: 0; right: 0; bottom: 0; left: 0; width: 100%; border-left: 0;
  box-shadow: none;
}
body.reeduo-embed .embed-export {
  flex: none; margin-left: auto; padding: 6px 10px; border: 1px solid var(--accent);
  border-radius: 8px; background: var(--accent); color: #fff;
  font: 600 12px/1 var(--sans); cursor: pointer;
}
body.embed-login {
  min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px;
  box-sizing: border-box; background: var(--bg); color: var(--text); font-family: var(--sans);
}
.embed-login .lang-toggle { position: fixed; top: 12px; right: 12px; }
.embed-login-card { max-width: 360px; text-align: center; }
.embed-login-card h1 { margin: 0 0 10px; font-size: 21px; line-height: 1.3; }
.embed-login-card p { margin: 0 0 20px; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.embed-login-action {
  display: inline-block; padding: 10px 16px; border-radius: 9px;
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 650;
}
.subscription-page {
  max-width: 760px;
  padding-top: clamp(96px, 20vh, 220px);
}
.subscription-page h1 {
  font-size: clamp(34px, 6vw, 56px);
  margin-bottom: 14px;
}
.subscription-page > p {
  color: var(--text-2);
  font-size: 17px;
  margin-bottom: 28px;
}
.subscription-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34%),
    linear-gradient(145deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
  text-align: left;
  overflow: hidden;
}
.subscription-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
}
.subscription-plan-copy {
  min-width: 0;
}
.subscription-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.subscription-card h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: clamp(24px, 3.5vw, 34px);
  letter-spacing: -.02em;
}
.subscription-card p {
  margin: 0;
  color: var(--text-2);
}
.subscription-card #billing-status {
  margin-top: 12px;
  color: var(--text-3);
  font-size: 14px;
}
.subscription-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.subscription-actions button {
  padding: 12px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 750 15px var(--sans);
  cursor: pointer;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}
.subscription-actions button:hover { background: var(--accent-press); }
.subscription-actions button:disabled { opacity: .65; cursor: wait; }
.subscription-page #billing-error {
  min-height: 1.5em;
  color: var(--danger);
  font-size: 14px;
  margin-top: 18px;
}
@media (max-width: 680px) {
  .subscription-card {
    align-items: stretch;
    flex-direction: column;
  }
  .subscription-actions,
  .subscription-actions button {
    width: 100%;
  }
  .subscription-actions button {
    justify-content: center;
  }
}

/* PDF page snapshots: full-page renders carrying the figures the text
   extraction cannot represent. Constrained to the column, softly framed. */
figure.pdf-page { margin: 18px 0; }
figure.pdf-page img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--border-soft); border-radius: 10px;
}

/* ── 收藏的回答 ─────────────────────────────────────────────────────────── */
.reply-footer { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 8px; }
.star-btn {
  width: 24px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--text-3); cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.star-btn svg { fill: none; }
.star-btn:hover { color: var(--star); border-color: var(--border); }
.star-btn.on { color: var(--star); }
.star-btn.on svg { fill: var(--star); }
/* A kept answer carries a gold edge so it stands out while scrolling a
   document, without competing with the read check or the fold state. */
.annote-reply.ai.starred { box-shadow: inset 3px 0 0 var(--star); }

.starred-page .home-main { max-width: 860px; text-align: left; }
.starred-item {
  border-bottom: 1px solid var(--border-soft); padding: 16px 0;
}
.starred-item:last-child { border-bottom: 0; }
.starred-doc {
  font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.starred-doc a { color: var(--text-3); text-decoration: none; }
.starred-doc a:hover { color: var(--accent); }
.starred-quote {
  border-left: 2px solid var(--accent); background: var(--accent-tint);
  padding: 6px 10px; font-size: 12.5px; color: var(--text-2); margin-bottom: 8px;
}
.starred-q { font-size: 14px; font-weight: 500; margin: 0 0 8px; }
.starred-body { font-size: 13.5px; color: var(--text-2); line-height: 1.7; }
.starred-actions { display: flex; gap: 12px; margin-top: 10px; font-size: 12px; }
.starred-actions button, .starred-actions a {
  font: inherit; font-size: 12px; background: none; border: 0; padding: 0;
  color: var(--text-3); cursor: pointer; text-decoration: none;
}
.starred-actions button:hover, .starred-actions a:hover { color: var(--accent); }
.starred-empty { color: var(--text-3); font-size: 14px; padding: 24px 0; }