.favorites-page, .knowledge-dialog { --knowledge-blue: #3677a3; --knowledge-blue-soft: #f2f7fb; --knowledge-blue-border: #e0eaf2; --knowledge-blue-hover: #ebf2f8; --knowledge-orange: #95652b; --knowledge-green: #3b7e67; }
.app-shell:has(> .favorites-page:not([hidden])) { background: #f8fafc; }
.nav-item[data-page="知识库"] { --nav-color: #3677a3; }
.favorites-page .favorites-tabs { border-color: #e5ebf2; background: #fff; box-shadow: none; }
.favorites-page .favorite-tab { color: var(--muted); background: transparent; box-shadow: none; }
.favorites-page .favorite-tab.active { color: var(--knowledge-blue); background: var(--knowledge-blue-soft); }
.favorites-page .favorite-tab span { color: var(--muted); background: #eef1f4; }
.favorites-page .favorite-tab.active span { color: var(--knowledge-blue); background: #e9f2f9; }
.favorites-page #favorite-words-tab { color: var(--knowledge-orange); }
.favorites-page #favorite-words-tab span { color: var(--knowledge-orange); background: #faeddf; }
.favorites-page #favorite-words-tab.active { background: #fff2e5; }
.favorites-page #favorite-questions-tab { color: var(--knowledge-green); }
.favorites-page #favorite-questions-tab span { color: var(--knowledge-green); background: #e5f2eb; }
.favorites-page #favorite-questions-tab.active { background: #edf7f1; }
.favorites-page .favorite-word-group, .favorites-page .favorite-question-group { border-color: #e5ebf2; box-shadow: 0 2px 12px rgba(31,48,68,.04); }
.favorites-page .favorite-initial, .favorites-page .favorite-year-heading { color: var(--body-ink); background: #f7f8fa; }
.favorites-page .favorite-initial { color: var(--knowledge-orange); }
.favorites-page .favorite-year-heading { color: var(--knowledge-green); }
.favorites-page .favorite-word-label b { color: var(--muted); background: #eef1f4; }
.favorites-page .favorite-remove { color: var(--muted); border-color: #e5ebf2; background: #f7f8fa; }
.knowledge-card { margin-top: 18px; overflow: hidden; border: 1px solid #e5ebf2; border-radius: 18px; background: #fff; box-shadow: 0 2px 12px rgba(31,48,68,.04); }
.knowledge-progress, .knowledge-records { padding: 24px; }
.knowledge-records { container-type: inline-size; container-name: knowledge-records; }
.knowledge-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.knowledge-heading h2 { margin: 0; font-size: 16px; font-weight: 700; }
.knowledge-heading > span { color: var(--muted); font-size: 12px; }
.knowledge-rings { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.16fr) minmax(0,1fr); align-items: center; gap: 24px; max-width: 530px; margin: 30px auto 27px; }
.knowledge-ring-item { min-width: 0; text-align: center; --ring-color: var(--knowledge-blue); --ring-track: #e8edf2; }
.knowledge-ring-week { --ring-color: var(--knowledge-orange); --ring-track: #f2e1ce; }
.knowledge-ring-today { --ring-color: var(--knowledge-blue); --ring-track: #d6e6f2; }
.knowledge-ring-month { --ring-color: var(--knowledge-green); --ring-track: #ddefe5; }
.knowledge-ring { position: relative; width: 100%; max-width: 128px; aspect-ratio: 1; margin: auto; container-type: inline-size; }
.knowledge-ring-today .knowledge-ring { max-width: 148px; background: radial-gradient(circle,#f0f7fc 0 54%,transparent 55%); }
.knowledge-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.knowledge-ring circle { fill: none; stroke-width: 7; }
.knowledge-ring-track { stroke: var(--ring-track); }
.knowledge-ring-fill { stroke: var(--ring-color); stroke-linecap: round; }
.knowledge-ring-value { position: absolute; inset: 0; font-size: clamp(11px,3vw,22px); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.knowledge-ring-value strong { position: absolute; left: 50%; top: 43%; transform: translate(-50%,-50%); color: var(--ring-color); font-size: 1.3em; font-weight: 800; line-height: inherit; }
.knowledge-ring-value span { position: absolute; left: 50%; top: 67%; transform: translate(-50%,-50%); color: var(--muted); font-size: max(9px,.5em); font-weight: 400; line-height: inherit; }
.knowledge-ring-today .knowledge-ring-value strong { color: var(--knowledge-blue); }
.knowledge-ring-label { display: block; margin-top: 10px; color: var(--ring-color); font-size: 13px; }
.knowledge-ring-today .knowledge-ring-label { color: var(--knowledge-blue); font-weight: 700; }
@supports (font-size: 1cqw) {
  .knowledge-ring-value { font-size: clamp(9px,calc(100cqw / var(--ring-digits,2)),24px); }
  .knowledge-ring-value strong { font-size: min(1.3em,30cqw); }
  .knowledge-ring-value span { font-size: clamp(9px,8cqw,12px); }
}
.knowledge-settings { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; width: fit-content; max-width: 100%; margin: 22px auto 0; padding: 10px 18px; border: 1px solid var(--knowledge-blue-border); border-radius: 10px; color: var(--knowledge-blue); background: var(--knowledge-blue-soft); font-size: 13px; font-weight: 650; transition: background .2s, transform .2s, border-color .2s; }
.knowledge-settings svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.knowledge-settings:disabled { opacity: .55; cursor: wait; }
.knowledge-settings:active { transform: scale(.99); }
.knowledge-forecast { margin: 0; color: var(--muted); text-align: center; font-size: clamp(11px,2.65vw,13px); line-height: 1.8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.knowledge-forecast:empty, .knowledge-status:empty { display: none; }
.knowledge-forecast strong { color: var(--body-ink); font-weight: 650; }
.knowledge-forecast-number { font-size: 1.22em; }
.knowledge-forecast .knowledge-forecast-date { color: var(--knowledge-blue); }
.knowledge-forecast .knowledge-forecast-number { color: var(--knowledge-orange); }
.knowledge-status { margin: 10px 0; color: var(--muted); text-align: center; font-size: 12px; line-height: 1.8; }
.knowledge-record-heading { margin-bottom: 20px; }
.knowledge-record-heading > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
#knowledge-record-count { color: var(--knowledge-blue); font-size: 12px; font-variant-numeric: tabular-nums; }
.knowledge-icon-button { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 10px; border: 1px solid var(--knowledge-blue-border); border-radius: 10px; color: var(--knowledge-blue); background: var(--knowledge-blue-soft); transition: background .2s, transform .2s; }
.knowledge-icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.knowledge-word-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.knowledge-word-open { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 58px; padding: 12px 6px; overflow: hidden; border: 1px solid #e3e8ee; border-radius: 10px; color: var(--ink); background: #fafbfc; white-space: nowrap; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; animation: knowledge-word-in .42s cubic-bezier(.2,.65,.3,1) both; animation-delay: var(--word-delay,0ms); }
.knowledge-word-label { display: inline-flex; flex: 0 1 auto; flex-flow: row nowrap; align-items: baseline; justify-content: center; gap: 3px; min-width: 0; max-width: 100%; white-space: nowrap; }
.knowledge-word-term { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; overflow-wrap: normal; word-break: normal; white-space: nowrap; text-overflow: ellipsis; text-align: center; font: 800 16px/1.5 'PingFang SC','Microsoft YaHei',sans-serif; }
.knowledge-word-frequency { display: block; flex: none; min-width: 20px; height: 20px; padding: 3px 4px; border-radius: 6px; color: var(--knowledge-blue); background: #e5eff8; text-align: center; white-space: nowrap; word-break: keep-all; font: 800 11px/14px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-variant-numeric: tabular-nums; }
.knowledge-word-open:active { transform: scale(.96); }
.knowledge-word-list .favorite-empty { grid-column: 1/-1; width: 100%; margin: 0; padding: 32px 12px; color: var(--muted); box-shadow: none; background: #f7f8fa; }
.knowledge-word-list .favorite-empty strong { font-size: 13px; font-weight: 400; }
.knowledge-text-button { min-height: 38px; padding: 6px 12px; border-radius: 10px; color: var(--knowledge-blue); background: transparent; font-size: 12px; transition: background .2s; }
.knowledge-text-button:disabled { opacity: .45; cursor: wait; }
#knowledge-more { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px auto 0; }
.knowledge-modal-open { overflow: hidden; scrollbar-gutter: stable both-edges; }
.knowledge-dialog { position: fixed; inset: 0; width: min(420px,calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; overflow-y: auto; overscroll-behavior: contain; color: var(--ink); scrollbar-width: thin; }
.knowledge-dialog:not(.entry-view) { padding: 26px; border: 1px solid var(--line); border-radius: 25px; background: #fff; box-shadow: 0 30px 90px #25324a33; }
.knowledge-dialog[open] { animation: knowledge-dialog-in .26s cubic-bezier(.2,.7,.3,1) both; }
.knowledge-dialog > .knowledge-heading { display: grid; grid-template-columns: 35px minmax(0,1fr) 35px; }
.knowledge-dialog > .knowledge-heading > h2 { grid-column: 2; min-width: 0; text-align: center; }
.knowledge-dialog > .knowledge-heading > .knowledge-dialog-close { grid-column: 3; }
.knowledge-dialog::backdrop { background: #53627b40; backdrop-filter: blur(5px); animation: knowledge-backdrop-in .25s ease both; }
.knowledge-dialog-close { display: grid; place-items: center; flex: none; width: 35px; height: 35px; padding: 0; border-radius: 50%; color: var(--knowledge-blue); background: var(--knowledge-blue-soft); font-size: 24px; line-height: 1; transition: background .2s, transform .2s; }
.knowledge-calendar-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 14px; }
.knowledge-calendar-toolbar strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.knowledge-calendar-toolbar button { width: 36px; height: 36px; border-radius: 11px; color: var(--knowledge-blue); background: var(--knowledge-blue-soft); font-size: 25px; line-height: 1; }
.knowledge-calendar-toolbar button:disabled { opacity: .3; cursor: default; }
.knowledge-calendar-weekdays, .knowledge-calendar-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; text-align: center; }
.knowledge-calendar-weekdays { margin-bottom: 9px; color: var(--muted); font-size: 11px; line-height: 28px; }
.knowledge-calendar-day { position: relative; min-height: 42px; padding: 0; border: 1px solid transparent; border-radius: 12px; color: var(--body-ink); background: transparent; font-size: 13px; font-variant-numeric: tabular-nums; transition: background .18s, color .18s; }
.knowledge-calendar-day.has-records::after { content: ''; position: absolute; bottom: 5px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--knowledge-green); }
.knowledge-calendar-day.is-today { border-color: #7ebce2; color: var(--knowledge-blue); }
.knowledge-calendar-day.is-selected { border-color: transparent; color: #fff; background: var(--knowledge-blue); box-shadow: 0 4px 10px rgba(23,107,159,.18); }
.knowledge-calendar-day.is-selected::after { background: white; }
.knowledge-calendar-day:disabled { color: #cbd1db; cursor: default; }
.knowledge-calendar-today { display: block; margin: 18px auto 0; }
.knowledge-goal-label { display: block; margin-top: 28px; text-align: center; font-size: 13px; }
.knowledge-goal-value { display: block; margin: 12px 0 19px; color: var(--muted); text-align: center; font-size: 12px; }
.knowledge-goal-value strong { color: var(--knowledge-blue); font-size: 42px; }
.knowledge-goal-dialog input[type=range] { width: 100%; min-height: 36px; margin: 0; outline: none; accent-color: var(--knowledge-blue); cursor: pointer; }
.knowledge-goal-limits { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.knowledge-goal-derived { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.knowledge-goal-derived > div { padding: 15px 10px; border-radius: 10px; background: #f8fafc; text-align: center; }
.knowledge-goal-derived span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 11px; }
.knowledge-goal-derived strong { color: var(--body-ink); font-size: 17px; }
.knowledge-goal-save { width: 100%; min-height: 45px; margin-top: 22px; border-radius: 13px; color: white; background: var(--knowledge-blue); font-size: 13px; font-weight: 700; transition: background .2s; }
.knowledge-goal-save:disabled { opacity: .55; cursor: wait; }
.knowledge-word-dialog { --detail-inset: max(6px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); inset: max(6px, env(safe-area-inset-top, 0px)) 0 auto; width: min(1280px,calc(100% - 2 * var(--detail-inset))); max-height: calc(100dvh - max(6px, env(safe-area-inset-top, 0px)) - max(6px, env(safe-area-inset-bottom, 0px))); margin: 0 auto; padding: 0; }
#favorite-words-panel { padding-bottom: 68px; }
.favorite-session { margin-top: 0; padding: 22px; container-type: inline-size; container-name: knowledge-records; }
.favorite-session-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.favorite-session-time { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; margin: 0; color: var(--body-ink); font-size: 12px; font-weight: 600; line-height: 1.8; font-variant-numeric: tabular-nums; }
.favorite-session-time time { white-space: nowrap; }
.favorite-session-time-separator { color: var(--muted); font-weight: 400; }
.favorite-session-count { flex: none; color: var(--knowledge-blue); font-size: 12px; line-height: 1.8; white-space: nowrap; }
.favorite-sessions-more { display: block; margin: 18px auto 0; }
.favorite-session-filter-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; color: var(--knowledge-blue); font-size: 12px; font-variant-numeric: tabular-nums; }
.favorite-session-calendar-toggle { position: fixed; z-index: 5; right: max(18px,env(safe-area-inset-right,0px)); bottom: calc(var(--nav-height) + var(--nav-offset) + 20px + env(safe-area-inset-bottom,0px)); width: 52px; height: 52px; padding: 14px; border-color: var(--knowledge-blue); border-radius: 17px; color: #fff; background: var(--knowledge-blue); box-shadow: 0 6px 20px rgba(23,107,159,.23); }
.favorite-session-calendar-toggle svg { width: 24px; height: 24px; }
.favorite-session-filter-form { display: grid; gap: 10px; margin-top: 22px; }
.favorite-session-filter-form label { display: block; color: var(--body-ink); font-size: 13px; font-weight: 600; }
.favorite-session-filter-form input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fafbfc; font-size: 16px; }
.favorite-session-time-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 6px; }
.favorite-session-time-fields > div { display: grid; gap: 8px; }
.favorite-session-filter-form .knowledge-status { margin: 0; color: #a33c35; }
.favorite-session-filter-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.favorite-session-filter-actions .knowledge-goal-save { flex: 1; width: auto; margin: 0; }
@media (hover: hover) {
  .knowledge-word-open:hover { transform: translateY(-2px); border-color: #a8c5dc; background: #f3f8fc; box-shadow: 0 3px 9px rgba(31,48,68,.05); }
  .knowledge-settings:hover:not(:disabled) { border-color: #a8c5dc; background: var(--knowledge-blue-soft); }
  .knowledge-icon-button:hover, .knowledge-dialog-close:hover, .knowledge-text-button:hover { background: var(--knowledge-blue-hover); }
  .knowledge-calendar-day:hover:not(:disabled):not(.is-selected) { background: var(--knowledge-blue-soft); }
  .favorite-session-calendar-toggle:hover { color: #fff; background: #3677a3; }
}
@keyframes knowledge-word-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes knowledge-dialog-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes knowledge-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) {
  .knowledge-word-term { font-size: 14px; }
}
@media (max-width: 350px) {
  .knowledge-word-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@container knowledge-records (max-width: 280px) {
  .knowledge-word-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .knowledge-progress, .knowledge-records { padding: 20px 14px; border-radius: 18px; }
  .favorite-session { padding: 18px 14px; }
  .knowledge-heading h2 { font-size: 15px; }
  .knowledge-heading > span { font-size: 10px; }
  .knowledge-rings { gap: 14px; margin: 25px auto 22px; }
  .knowledge-ring-label { font-size: 12px; }
  .knowledge-word-list { gap: 5px; }
  .knowledge-word-open { min-height: 54px; padding: 9px 2px; border-radius: 10px; }
  .knowledge-word-label { gap: 2px; }
  .knowledge-word-term { font-size: clamp(11px,3.05vw,13px); }
  .knowledge-word-frequency { min-width: 14px; height: 17px; padding: 2px; font-size: 10px; line-height: 13px; border-radius: 5px; }
  .knowledge-record-heading { margin-bottom: 16px; }
  .knowledge-record-heading > div { gap: 5px; }
  .knowledge-dialog:not(.entry-view) { padding: 22px 18px; border-radius: 22px; }
  .knowledge-calendar-days, .knowledge-calendar-weekdays { gap: 3px; }
  .favorite-tab span { min-width: 18px; margin-left: 2px; padding: 0 4px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .knowledge-dialog[open], .knowledge-dialog::backdrop, .knowledge-word-open { animation: none; }
  .knowledge-word-open, .knowledge-settings, .knowledge-icon-button, .knowledge-dialog-close, .knowledge-text-button, .knowledge-calendar-day { transition: none; }
}