:root {
  --bg: #f1efe8;
  --panel: #f7f5ef;
  --panel-soft: #f3f1eb;
  --text: #20241f;
  --muted: #777a72;
  --line: #dcd9d0;
  --line-soft: #e8e5dc;
  --accent: #245b43;
  --accent-dark: #194a35;
  --accent-soft: #e6ebe4;
  --danger: #b42318;
  --success: #0f766e;
  --warning-bg: #fff7ed;
  --notebook-link: #3b6f9f;
  --notebook-link-hover: #27597f;
  --shadow: 0 12px 28px rgba(32, 36, 31, 0.06);
  --shadow-soft: 0 5px 14px rgba(32, 36, 31, 0.045);
  --control-height: 36px;
  --control-height-compact: 32px;
  --control-radius: 7px;
}

/* Mobile goals: selected quiet action-flow direction */

.goal-section-number,
.goal-section-chevron,
.goal-row-mobile-link,
.goal-row-mobile-priority,
.goal-row-mobile-state,
.goal-row-mobile-chevron,
.goal-detail-page {
  display: none;
}

@media (max-width: 1040px) {
  .shell.shell-goals {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0 0 calc(70px + env(safe-area-inset-bottom, 0px));
    background-color: #f4f3ee;
    background-image: none;
    color: #202923;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  }

  .shell-goals > .topbar.is-module-landing {
    position: sticky;
    top: 0;
    z-index: 8;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 56px;
    margin: 0;
    padding: 7px 12px 6px 16px;
    border-bottom: 1px solid #dee1da;
    background: rgba(244, 243, 238, 0.98);
    backdrop-filter: none;
  }

  .shell-goals > .topbar.is-module-landing .topbar-title {
    gap: 8px;
    align-items: baseline;
  }

  .shell-goals > .topbar.is-module-landing .module-page-title {
    color: #202923;
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 27px;
    font-weight: 650;
    letter-spacing: 0.04em;
  }

  .shell-goals > .topbar.is-module-landing .module-page-meta {
    color: #7a817b;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
  }

  .shell-goals > .topbar.is-module-landing .top-actions.is-mobile-menu,
  .shell-goals > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main {
    gap: 8px;
  }

  .shell-goals > .topbar.is-module-landing .top-action-keep {
    display: none !important;
  }

  .shell-goals > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #2d6249;
    box-shadow: none;
    color: #fff;
    font-size: 20px;
  }

  .shell-goals > .topbar.is-module-landing .top-action-primary span:not(.top-action-icon) {
    display: none;
  }

  .shell-goals > .topbar.is-module-landing .top-action-icon {
    font-size: 24px;
  }

  .shell-goals > .topbar.is-module-landing .top-actions.is-mobile-menu.is-menu-ready .top-actions-more {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid #dee1da;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.34);
    color: #5f6862;
    font-size: 20px;
  }

  .shell-goals > .topbar.is-module-landing .top-actions-more-icon {
    transform: rotate(90deg);
  }

  .shell-goals .focus-layout,
  .shell-goals .goal-overview {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .shell-goals .goal-category-index,
  .shell-goals .focus-rail {
    display: none;
  }

  .shell-goals .goal-reorder-status {
    position: fixed;
    top: 62px;
    right: 14px;
    z-index: 20;
  }

  .shell-goals .goal-section,
  .shell-goals .goal-section:first-child {
    margin: 0;
  }

  .shell-goals .goal-section details,
  .shell-goals .goal-section.is-primary details {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .shell-goals .goal-section > details > summary {
    grid-template-columns: minmax(0, 1fr) auto 20px;
    gap: 9px;
    min-height: 54px;
    padding: 0 16px;
    border-bottom: 1px solid #dee1da;
    color: #344039;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .shell-goals .goal-section.is-primary > details > summary {
    min-height: 52px;
    border-bottom-color: #d3d9d2;
    color: #2d6249;
  }

  .shell-goals .goal-section-heading {
    display: flex;
    gap: 0;
    align-items: baseline;
    min-width: 0;
  }

  .shell-goals .goal-section-number {
    display: none;
  }

  .shell-goals .goal-section > details > summary strong {
    min-width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #7a817b;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    opacity: 1;
  }

  .shell-goals .goal-section-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #68716b;
    font-size: 20px;
    transition: transform 160ms ease;
  }

  .shell-goals .goal-section > details[open] > summary .goal-section-chevron {
    transform: rotate(180deg);
  }

  .shell-goals [data-goal-section="daily"] > details > summary,
  .shell-goals [data-goal-section="pending"] > details > summary,
  .shell-goals [data-goal-section="medium"] > details > summary,
  .shell-goals [data-goal-section="long"] > details > summary {
    color: #344039;
  }

  .shell-goals .goal-list {
    display: grid;
    gap: 0;
    padding: 0 16px;
  }

  .shell-goals .goal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 51px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #dee1da;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell-goals .goal-row:last-of-type {
    border-bottom: 1px solid #dee1da;
  }

  .shell-goals .goal-row::before,
  .shell-goals .goal-row:hover::before,
  .shell-goals .goal-row:focus-within::before {
    display: none;
    content: none;
  }

  .shell-goals .goal-row:hover,
  .shell-goals .goal-row:focus-within,
  .shell-goals .goal-row.is-current:hover,
  .shell-goals .goal-row.is-current:focus-within,
  .shell-goals .goal-row.is-current {
    background: transparent;
    box-shadow: none;
  }

  .shell-goals .goal-inline-detail {
    display: none;
  }

  .shell-goals .goal-row-mobile-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    grid-template-areas: "title state chevron";
    gap: 10px;
    align-items: center;
    min-width: 0;
    min-height: 51px;
    padding: 0 2px 0 8px;
    color: #202923;
    text-decoration: none;
  }

  .shell-goals .goal-row-mobile-link.has-priority-icon {
    grid-template-columns: 14px minmax(0, 1fr) auto 18px;
    grid-template-areas: "priority title state chevron";
    column-gap: 8px;
  }

  .shell-goals .goal-row-mobile-priority {
    grid-area: priority;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    font-size: 14px;
    line-height: 1;
  }

  .shell-goals .goal-row-mobile-priority.is-high {
    color: #b85c50;
  }

  .shell-goals .goal-row-mobile-priority.is-medium {
    color: #55769b;
  }

  .shell-goals .goal-row-mobile-priority.is-low {
    color: #8b918b;
  }

  .shell-goals .goal-row-mobile-link h2 {
    grid-area: title;
    display: block;
    min-width: 0;
    width: auto;
    overflow: hidden;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell-goals .goal-row-mobile-link h2 .goal-title-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell-goals .goal-row-mobile-link h2 .doing-now-icon {
    display: none;
  }

  .shell-goals .goal-row-mobile-state {
    grid-area: state;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
  }

  .shell-goals .goal-row-mobile-state i {
    font-size: 20px;
  }

  .shell-goals .goal-row-mobile-state.is-doing {
    color: #d81e06;
  }

  .shell-goals .goal-row-mobile-chevron {
    grid-area: chevron;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #7a817b;
    font-size: 20px;
  }

  .shell-goals .goal-list > .empty {
    margin: 0;
    padding: 16px 9px 18px;
    border: 0;
    background: transparent;
    color: #788078;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  }

  .goals-sort-mode .shell-goals .goal-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .goals-sort-mode .shell-goals .goal-row-mobile-link {
    pointer-events: none;
  }

  .goals-sort-mode .shell-goals .goal-drag-handle {
    align-self: center;
    width: 34px;
    min-height: 34px;
    border: 0;
    background: transparent;
    color: #66756b;
  }

  .shell-goals + .module-nav {
    gap: 0;
    min-height: 62px;
    padding: 4px 8px calc(3px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #dee1da;
    background: rgba(248, 247, 242, 0.98);
    box-shadow: none;
    backdrop-filter: none;
  }

  .shell-goals + .module-nav a,
  .shell-goals + .module-nav a.is-active {
    position: relative;
    gap: 2px;
    min-height: 52px;
    padding: 4px 2px 3px;
    border-radius: 0;
    background: transparent;
    color: #737b75;
    font-size: 11px;
    font-weight: 600;
  }

  .shell-goals + .module-nav a.is-active {
    color: #2d6249;
  }

  .shell-goals + .module-nav a.is-active::after {
    position: absolute;
    right: 34%;
    bottom: 1px;
    left: 34%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
  }

  .shell-goals + .module-nav .module-nav-icon {
    width: 21px;
    height: 21px;
    font-size: 20px;
  }

  .shell-goals ~ .goal-hover-tooltip {
    max-width: calc(100vw - 32px);
    padding: 12px 14px;
    border-color: rgba(54, 70, 59, 0.18);
    background: #f8f7f2;
    box-shadow: 0 14px 34px rgba(38, 49, 42, 0.16);
    color: #334038;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.65;
  }

  .shell-goals:has(.goal-detail-page) {
    min-height: 100vh;
    padding: 0;
    background-position: center top;
  }

  .shell-goals:has(.goal-detail-page) > .topbar,
  .shell-goals:has(.goal-detail-page) + .module-nav {
    display: none;
  }

  .goal-detail-page {
    display: block;
    min-height: 100vh;
  }

  .shell-goals .goal-detail-desktop {
    display: none;
  }

  .goal-reading-topbar {
    position: sticky;
    top: 0;
    z-index: 8;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    min-height: 56px;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(54, 70, 59, 0.14);
    background: rgba(247, 243, 234, 0.9);
    backdrop-filter: blur(14px);
  }

  .goal-reading-topbar > strong {
    color: #33433a;
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: center;
  }

  .goal-reading-back,
  .goal-reading-more {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #3f5146;
    font-size: 24px;
    text-decoration: none;
  }

  .goal-reading-more {
    font-size: 20px;
  }

  .goal-reading-more:hover,
  .goal-reading-more:focus-visible,
  .goal-detail-sheet-head button:hover,
  .goal-detail-sheet-head button:focus-visible {
    background: rgba(45, 98, 73, 0.08);
    color: #2d6249;
  }

  .goal-reading-more:focus-visible,
  .goal-detail-sheet-head button:focus-visible {
    outline: 2px solid rgba(45, 98, 73, 0.24);
    outline-offset: 2px;
  }

  .goal-reading-paper {
    width: 100%;
    padding: 22px 16px 56px;
  }

  .goal-reading-folio {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin: 0 0 13px;
    color: #687b6f;
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
  }

  .goal-reading-folio span {
    font-style: italic;
  }

  .goal-reading-paper > h2 {
    display: flex;
    gap: 7px;
    align-items: center;
    margin: 0 0 19px;
    color: #25322b;
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: clamp(26px, 7.2vw, 31px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.025em;
  }

  .goal-reading-time {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: -2px 0 20px;
    padding: 10px 0;
    border-top: 1px solid rgba(54, 70, 59, 0.12);
    border-bottom: 1px solid rgba(54, 70, 59, 0.12);
  }

  .goal-reading-time.has-reminder {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .goal-reading-time > div {
    min-width: 0;
    padding: 3px 6px;
  }

  .goal-reading-time > div + div {
    border-left: 1px solid rgba(54, 70, 59, 0.1);
  }

  .goal-reading-time dt {
    display: flex;
    gap: 4px;
    align-items: center;
    margin: 0 0 3px;
    color: #7a857e;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .goal-reading-time dd {
    margin: 0;
    color: #3d4a42;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
    font-size: clamp(11px, 2.6vw, 13px);
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
    letter-spacing: -0.015em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .goal-reading-content {
    color: #303a34;
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 17px;
    line-height: 1.78;
    overflow-wrap: anywhere;
  }

  .goal-reading-content > :first-child {
    margin-top: 0;
  }

  .goal-reading-content p,
  .goal-reading-content ul,
  .goal-reading-content ol,
  .goal-reading-content blockquote,
  .goal-reading-content pre {
    margin-block: 0 1em;
  }

  .goal-detail-sheet {
    inset: auto 0 0;
    width: min(100%, 620px);
    max-width: none;
    max-height: var(--goal-detail-sheet-max-height, 86vh);
    margin: auto auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #26322b;
    overflow: visible;
  }

  .goal-detail-sheet::backdrop {
    background: rgba(22, 29, 25, 0.42);
    backdrop-filter: blur(2px);
  }

  .goal-detail-sheet-panel {
    max-height: var(--goal-detail-sheet-max-height, 86vh);
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    background: #f8f5ed;
    box-shadow: 0 -18px 44px rgba(26, 34, 29, 0.18);
    overflow: auto;
  }

  .goal-sheet-edit {
    padding: 10px 2px 4px;
  }

  .goal-sheet-edit .goal-compact-form {
    gap: 9px;
  }

  .goal-sheet-edit .form-grid:first-of-type,
  .goal-sheet-edit .form-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .goal-sheet-edit .form-grid:first-of-type {
    gap: 10px;
  }

  .goal-sheet-edit .goal-compact-form > label,
  .goal-sheet-edit .form-grid:first-of-type > label,
  .goal-sheet-edit .goal-time-fields > label {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-width: 0;
  }

  .goal-sheet-edit .form-grid:first-of-type > label {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px;
  }

  .goal-sheet-edit .goal-compact-form label > span {
    align-self: center;
    color: #68746d;
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .goal-sheet-edit .goal-compact-form :is(input, select) {
    min-width: 0;
    min-height: 42px;
    padding: 7px 9px;
    font-size: 15px;
  }

  .goal-sheet-edit .goal-description-field {
    align-items: start;
  }

  .goal-sheet-edit .goal-description-field > span {
    padding-top: 9px;
  }

  .goal-sheet-edit .goal-description-field textarea {
    min-width: 0;
    min-height: 132px;
    height: 132px;
    padding: 8px 9px;
    font-size: 15px;
    line-height: 1.55;
  }

  .goal-sheet-edit .tag-picker {
    max-height: 68px;
    margin: -3px 0 0 51px;
    overflow-y: auto;
  }

  .goal-detail-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(54, 70, 59, 0.14);
  }

  .goal-detail-sheet-head span {
    color: #7b857f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
  }

  .goal-detail-sheet-head h2 {
    margin: 2px 0 0;
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 22px;
    line-height: 1.2;
  }

  .goal-detail-sheet-head button {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #56635b;
    font-size: 21px;
  }

  .goal-sheet-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 8px 0;
  }

  .goal-sheet-meta > div {
    min-width: 0;
    padding: 10px 6px;
    border-bottom: 1px solid rgba(54, 70, 59, 0.1);
  }

  .goal-sheet-meta dt {
    margin-bottom: 3px;
    color: #7d8781;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  .goal-sheet-meta dd {
    margin: 0;
    color: #344038;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .goal-sheet-tags {
    padding: 4px 6px 12px;
  }

  .goal-sheet-tags h3 {
    margin: 0 0 7px;
    color: #7d8781;
    font-size: 11px;
    letter-spacing: 0.05em;
  }

  .goal-sheet-actions {
    display: grid;
    gap: 0;
    margin-top: 8px;
    border-top: 1px solid rgba(54, 70, 59, 0.14);
  }

  .goal-sheet-actions form {
    margin: 0;
  }

  .goal-sheet-action,
  .goal-sheet-actions button.goal-sheet-action {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 50px;
    padding: 0 7px;
    border: 0;
    border-bottom: 1px solid rgba(54, 70, 59, 0.1);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #34453b;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
  }

  .goal-sheet-action i {
    width: 22px;
    color: #63756a;
    font-size: 20px;
    text-align: center;
  }

  .goal-sheet-action.danger,
  .goal-sheet-actions button.goal-sheet-action.danger,
  .goal-sheet-action.danger i {
    color: #b64f48;
  }
}

@media (max-width: 375px) {
  .shell-goals > .topbar.is-module-landing {
    padding-right: 8px;
    padding-left: 13px;
  }

  .shell-goals > .topbar.is-module-landing .module-page-title {
    font-size: 26px;
  }

  .shell-goals > .topbar.is-module-landing .module-page-meta {
    font-size: 11px;
  }

  .shell-goals .goal-section > details > summary {
    padding-right: 15px;
    padding-left: 13px;
  }

  .shell-goals .goal-list {
    padding-inline: 13px;
  }

  .goal-reading-paper {
    padding-inline: 13px;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  width: 100%;
  max-width: 100%;
  color-scheme: light;
  background: var(--bg);
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

@supports (scrollbar-gutter: stable) {
  html {
    overflow-y: auto;
  }
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

body.is-body-scroll-locked {
  position: fixed;
  top: var(--body-scroll-lock-top, 0);
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

a {
  color: inherit;
}

.shell {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding: 18px 0 40px;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 52px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.topbar-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.module-page-meta,
.top-action-icon {
  display: none;
}

.top-actions-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}

.top-actions-menu-icon {
  display: none;
}

.top-actions-menu-label-added {
  display: inline;
}

.brand-lockup {
  width: max-content;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: #f4f7fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.top-actions-main,
.top-actions-system {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  min-width: 0;
}

.top-actions-system {
  padding-left: 2px;
  border-left: 1px solid var(--line-soft);
}

@media (min-width: 1041px) {
  .top-actions-system {
    display: none;
  }
}

.top-actions .top-actions-more,
.top-actions .top-actions-menu {
  display: none;
}

.top-actions .button,
.top-actions button {
  width: auto;
  min-height: 34px;
  padding: 7px 11px;
  border-color: transparent;
  border-radius: 5px;
  font-size: 13px;
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.top-actions form {
  margin: 0;
}

.top-actions .button.secondary,
.top-actions button.secondary {
  background: transparent;
  color: #596579;
}

.top-actions .button.secondary:hover,
.top-actions button.secondary:hover {
  background: rgba(255, 255, 255, 0.66);
  color: var(--text);
}

.top-actions .button:not(.secondary),
.top-actions button:not(.secondary),
.top-actions button[aria-pressed="true"] {
  border-color: rgba(37, 99, 235, 0.18);
  background: #ffffff;
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(24, 33, 50, 0.07);
}

.top-actions .button:not(.secondary):hover,
.top-actions button:not(.secondary):hover,
.top-actions button[aria-pressed="true"]:hover {
  background: #ffffff;
  color: var(--accent-dark);
}

.topbar-system {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: #f4f7fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.density-icon-toggle {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.density-icon-toggle:hover,
.density-icon-toggle:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.density-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}

.goal-sections-toggle {
  width: 34px;
  min-width: 34px;
  padding-inline: 0;
  justify-content: center;
}

.goal-sections-toggle-icon {
  display: block;
  width: 18px;
  height: 18px;
}

.goal-sections-toggle > .top-actions-menu-label-added {
  display: none;
}

@media (min-width: 1041px) {
  .goal-sections-toggle-mobile {
    display: none !important;
  }
}

@media (min-width: 1041px) {
  .density-toggle-fallback {
    display: none !important;
  }
}

.topbar-side {
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  align-items: center;
  justify-content: end;
}

.desktop-module-nav {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid #d5ddeb;
  border-radius: 8px;
  background: #eaf0f8;
  box-shadow: 0 5px 16px rgba(24, 33, 50, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.desktop-module-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 80px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #dbe3ef;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.74);
  color: #334155;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.desktop-module-nav a::before {
  display: block;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: currentColor;
  content: "";
}

.desktop-module-nav a[data-module="goals"]::before {
  border: 2px solid currentColor;
  border-radius: 999px;
  box-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 6px currentColor;
}

.desktop-module-nav a[data-module="notes"]::before {
  border: 2px solid currentColor;
  border-radius: 5px;
  background:
    linear-gradient(currentColor, currentColor) 5px 5px / 7px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 5px 10px / 6px 2px no-repeat;
}

.desktop-module-nav a[data-module="knowledge"]::before,
.desktop-module-nav a[data-module="notebooks"]::before {
  border: 2px solid currentColor;
  border-radius: 4px;
  background:
    linear-gradient(currentColor, currentColor) 4px 4px / 7px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 9px / 9px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 14px / 6px 2px no-repeat;
}

.desktop-module-nav a[data-module="calendar"]::before {
  border: 2px solid currentColor;
  border-radius: 5px;
  background:
    linear-gradient(currentColor, currentColor) 0 5px / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 0 / 2px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 11px 0 / 2px 5px no-repeat;
}

.desktop-module-nav a:hover {
  border-color: rgba(37, 99, 235, 0.28);
  background: #ffffff;
  color: var(--accent-dark);
  box-shadow: 0 4px 12px rgba(24, 33, 50, 0.07);
  transform: translateY(-1px);
}

.desktop-module-nav a.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.2);
}

.desktop-module-nav a.is-active[data-module="goals"]::before {
  box-shadow: inset 0 0 0 4px var(--accent), inset 0 0 0 6px currentColor;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 27px;
  line-height: 1.2;
}

h2 {
  font-size: 18px;
  line-height: 1.35;
}

p {
  overflow-wrap: anywhere;
}

.summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 8px 0 14px;
}

.summary div,
.panel,
.goal-row,
.note-card,
.knowledge-card,
.detail-card,
.login-card,
.rail-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.summary div {
  padding: 12px;
}

.summary strong {
  display: block;
  font-size: 26px;
  line-height: 1;
}

.summary span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
}

.focus-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.focus-rail {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 12px;
}

.rail-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.rail-panel-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.rail-panel-head h2 {
  font-size: 15px;
}

.rail-panel-head span,
.rail-panel-head a,
.rail-hint,
.rail-empty {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.rail-panel-head a {
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.rail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.rail-metrics div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
}

.rail-metrics strong {
  display: block;
  font-size: 24px;
  line-height: 1;
}

.rail-metrics span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.rail-priority-meter {
  display: flex;
  height: 8px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

.rail-priority-segment {
  min-width: 0;
}

.rail-priority-high {
  background: #e11d48;
}

.rail-priority-medium {
  background: var(--accent);
}

.rail-priority-low {
  background: #94a3b8;
}

.rail-today-list {
  display: grid;
  gap: 8px;
}

.rail-quote-list {
  display: grid;
  gap: 8px;
}

.rail-quote {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid rgba(37, 99, 235, 0.42);
  border-radius: 8px;
  background: var(--panel-soft);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.rail-quote[data-hover-tooltip] {
  cursor: help;
}

.rail-quote[data-hover-tooltip]:hover,
.rail-quote[data-hover-tooltip]:focus-visible {
  border-color: rgba(37, 99, 235, 0.28);
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(24, 33, 50, 0.07);
  outline: none;
}

.rail-quote p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.rail-quote cite {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
  text-align: right;
}

.rail-goal {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.rail-goal:hover,
.rail-goal:focus-within {
  border-color: rgba(37, 99, 235, 0.28);
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(24, 33, 50, 0.07);
}

.rail-goal a {
  display: grid;
  gap: 6px;
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

.rail-goal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.rail-goal h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.rail-goal small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.rail-goal-relation {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.rail-day-link {
  justify-self: start;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.rail-day-link:hover {
  color: var(--accent-dark);
}

.rail-hint,
.rail-empty {
  margin: 0;
}

.rail-note-list {
  display: grid;
  gap: 8px;
}

.rail-note {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.rail-note:hover,
.rail-note:focus-within {
  border-color: rgba(37, 99, 235, 0.28);
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(24, 33, 50, 0.07);
}

.rail-note a {
  display: grid;
  gap: 8px;
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

.rail-note p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.rail-note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mini-calendar {
  display: grid;
  gap: 8px;
}

.mini-calendar-title {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.mini-calendar-weekdays,
.mini-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.mini-calendar-weekdays span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.mini-calendar-day {
  display: grid;
  min-width: 0;
  min-height: 34px;
  place-items: center;
  padding: 4px 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.mini-calendar-day.is-outside-month {
  color: #a8b0bf;
}

.mini-calendar-day.is-today {
  border-color: rgba(37, 99, 235, 0.46);
  background: var(--accent-soft);
  color: var(--accent);
}

.mini-calendar-day b {
  display: flex;
  gap: 2px;
  align-items: center;
  min-height: 8px;
  margin-top: 3px;
}

.mini-calendar-day .priority-dot {
  width: 5px;
  height: 5px;
}

.goal-section {
  margin-top: 10px;
}

.goal-section:first-child {
  margin-top: 0;
}

.goal-section details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.goal-section.is-primary details {
  border-color: rgba(37, 99, 235, 0.4);
}

.goal-section > details > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 50px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.goal-section > details > summary::-webkit-details-marker {
  display: none;
}

.goal-section > details > summary strong {
  min-width: 32px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  text-align: center;
}

.goal-list {
  display: grid;
  gap: 0;
  padding: 0 14px 10px;
}

.goal-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0 11px 14px;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background 140ms ease, box-shadow 140ms ease;
}

.goal-index-row {
  grid-template-columns: minmax(0, 1fr);
}

.goal-row.is-current {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.04), transparent 34%);
}

.goal-row.is-completed {
  color: var(--muted);
  opacity: 0.82;
}

.goal-row.is-completed h2 {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.goal-row:hover,
.goal-row:focus-within {
  background: rgba(237, 244, 255, 0.68);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.16);
}

.goal-row.is-current:hover,
.goal-row.is-current:focus-within {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), rgba(237, 244, 255, 0.52) 44%, transparent);
}

.goal-row::before {
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--priority-color, var(--accent));
  content: "";
}

.goal-row-main {
  display: block;
  min-width: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.goal-inline-detail,
.note-inline-detail {
  min-width: 0;
}

.goal-inline-detail > summary,
.note-inline-detail > summary {
  list-style: none;
}

.goal-inline-detail > summary::-webkit-details-marker,
.note-inline-detail > summary::-webkit-details-marker {
  display: none;
}

.goal-inline-detail[open] > summary,
.note-inline-detail[open] > summary {
  margin-bottom: 12px;
}

.inline-edit-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #f8fafc;
}

.inline-edit-form {
  gap: 12px;
}

.note-inline-meta-fields {
  display: grid;
  grid-template-columns: minmax(100px, 0.65fr) minmax(150px, 1.35fr) auto;
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.note-inline-meta-fields label {
  min-width: 0;
}

.note-inline-tag-head {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 24px;
}

.note-inline-tag-head > span {
  flex: 0 0 auto;
}

.note-inline-tag-head .tag-picker {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.note-inline-tag-head .tag-picker::-webkit-scrollbar {
  display: none;
}

.note-inline-pin-field {
  min-height: 44px;
  padding: 0 8px;
  white-space: nowrap;
}

@media (max-width: 1040px) {
  .note-inline-meta-fields {
    grid-template-columns: minmax(82px, 0.7fr) minmax(0, 1.3fr) auto;
    gap: 6px;
  }

  .note-inline-pin-field {
    padding-inline: 2px;
  }
}

.goal-inline-title-fields,
.goal-inline-meta-fields {
  display: grid;
  gap: 8px;
  align-items: start;
}

.goal-inline-title-fields {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.goal-inline-meta-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.goal-inline-title-fields label,
.goal-inline-meta-fields label {
  min-width: 0;
}

.goal-inline-tag-field {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.goal-inline-tag-head {
  display: flex;
  min-width: 0;
  min-height: 24px;
  gap: 8px;
  align-items: center;
}

.goal-inline-tag-head .tag-picker {
  min-width: 0;
  margin-top: 0;
}

.inline-primary-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inline-secondary-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

.inline-secondary-actions .button,
.inline-secondary-actions button {
  width: 100%;
}

.goal-inline-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.goal-inline-actions > form {
  display: flex;
  min-width: 0;
}

.goal-inline-actions > button,
.goal-inline-actions > form > button {
  width: 100%;
  min-width: 0;
}

@media (max-width: 1040px) {
  .goal-inline-actions > form:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1041px) {
  .goal-inline-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.goal-row h2 {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
}

.goal-title-text {
  min-width: 0;
}

.goal-row h2 .goal-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doing-now-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: #d81e06;
}

.doing-now-glyph {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.goal-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.goal-index-row .goal-row-main > .meta-row {
  margin: 6px 0 0;
}

.goal-index-row .goal-row-main > p {
  margin-top: 6px;
}

.goal-complete-form {
  display: flex;
  align-items: center;
  justify-content: center;
}

.goal-complete-button {
  width: 30px;
  min-height: 30px;
  padding: 0;
  border-color: #99f6e4;
  border-radius: 999px;
  background: #f0fdfa;
  color: var(--success);
  font-size: 15px;
  line-height: 1;
}

.goal-complete-button:hover {
  border-color: var(--success);
  background: #ccfbf1;
  color: #0f766e;
}

.line-clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

.status {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: var(--success);
  font-weight: 800;
}

.muted-status {
  background: #f1f5f9;
  color: #475569;
}

.trash-retention {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff7ed;
  color: #b45309;
  font-weight: 800;
}

.priority-badge {
  display: inline-flex;
  min-width: 28px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 800;
  justify-content: center;
}

.priority-high {
  background: #fff1f2;
  color: #be123c;
}

.priority-medium {
  background: var(--accent-soft);
  color: var(--accent);
}

.priority-low {
  background: #f1f5f9;
  color: #475569;
}

.goal-row.priority-row-high {
  --priority-color: #dc2626;
}

.goal-row.priority-row-medium {
  --priority-color: #2563eb;
}

.goal-row.priority-row-low {
  --priority-color: #8a929d;
}

.history-goal-row.priority-row-high {
  --priority-color: #dc2626;
}

.history-goal-row.priority-row-medium {
  --priority-color: #2563eb;
}

.history-goal-row.priority-row-low {
  --priority-color: #8a929d;
}

.goal-row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(64px, 1fr));
  gap: 6px;
}

.form-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.goal-create-dialog {
  width: min(720px, calc(100% - 32px));
  max-width: none;
  max-height: var(--goal-create-dialog-max-height, min(90vh, 820px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(24, 33, 50, 0.24);
}

.goal-create-dialog::backdrop {
  background: rgba(24, 33, 50, 0.42);
  backdrop-filter: blur(3px);
}

.goal-create-dialog-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: var(--goal-create-dialog-max-height, min(90vh, 820px));
}

.goal-create-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.goal-create-dialog-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.goal-create-dialog-head h2,
.goal-create-dialog-head p {
  margin: 0;
}

.goal-create-dialog-head h2 {
  font-size: 18px;
  line-height: 1.3;
}

.goal-create-dialog-head p {
  color: var(--muted);
  font-size: 12px;
}

.goal-create-dialog-close {
  flex: 0 0 auto;
  width: 34px;
  min-width: 34px;
  padding-inline: 0;
  font-size: 20px;
}

.goal-create-dialog-body {
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.goal-row-actions {
  width: 140px;
}

.goal-row-actions .button,
.goal-row-actions button {
  width: 100%;
  white-space: nowrap;
}

.detail-card {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.detail-head h2 {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  font-size: 23px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.detail-grid div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.detail-grid dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.detail-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.detail-section {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.detail-section h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.detail-section p {
  margin: 0;
  color: var(--muted);
  white-space: pre-wrap;
}

.markdown-body {
  display: grid;
  gap: 10px;
  color: var(--text);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.markdown-body > * {
  margin: 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  color: var(--text);
  line-height: 1.35;
}

.markdown-body h1 {
  font-size: 22px;
}

.markdown-body h2 {
  font-size: 19px;
}

.markdown-body h3,
.markdown-body h4 {
  font-size: 16px;
}

.markdown-body p {
  margin: 0;
  color: var(--text);
  white-space: normal;
}

.shell-notebooks .markdown-body a:not(.notebook-markdown-image) {
  color: var(--notebook-link);
  text-decoration-color: color-mix(in srgb, var(--notebook-link) 62%, transparent);
  text-underline-offset: 0.15em;
}

.shell-notebooks .markdown-body a:not(.notebook-markdown-image):hover,
.shell-notebooks .markdown-body a:not(.notebook-markdown-image):focus-visible {
  color: var(--notebook-link-hover);
  text-decoration-color: currentColor;
}

.markdown-body ul,
.markdown-body ol {
  display: grid;
  gap: 6px;
  padding-left: 22px;
}

.markdown-task-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  list-style: none;
}

.markdown-task-item input {
  flex: 0 0 auto;
  width: 16px;
  min-height: 16px;
  margin: 5px 0 0;
  accent-color: var(--accent);
}

.markdown-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94em;
}

.markdown-body th,
.markdown-body td {
  padding: 8px 10px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.markdown-body th {
  background: var(--panel-soft);
  font-weight: 800;
}

.markdown-body :is(th, td).is-align-center {
  text-align: center;
}

.markdown-body :is(th, td).is-align-right {
  text-align: right;
}

.markdown-body blockquote {
  padding-left: 12px;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

.markdown-body blockquote p {
  color: inherit;
}

.markdown-body pre {
  overflow-x: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  white-space: pre;
}

.markdown-body code {
  padding: 2px 5px;
  border-radius: 5px;
  background: #f1f5f9;
  color: #334155;
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 0.92em;
}

.markdown-body pre code {
  padding: 0;
  background: transparent;
}

.markdown-body hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
}

.notebook-markdown-image {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 14px auto;
  border-radius: 10px;
  cursor: zoom-in;
}

.notebook-markdown-image img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: min(72vh, 820px);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-soft);
  object-fit: contain;
}

.detail-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  width: 100%;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: var(--accent);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
button:hover {
  background: var(--accent-dark);
}

.button.secondary,
button.secondary {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
}

.button.secondary:hover,
button.secondary:hover {
  background: #f4f7fb;
}

.button.danger,
button.danger {
  border-color: #fecdca;
  background: #ffffff;
  color: var(--danger);
}

.button.danger:hover,
button.danger:hover {
  background: #fff1f3;
}

.button.compact,
button.compact {
  width: auto;
  min-height: var(--control-height-compact);
  padding: 6px 10px;
  font-size: 13px;
}

.confirm-dialog-open {
  overflow: hidden;
}

.confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(24, 33, 50, 0.34);
  opacity: 0;
  transition: opacity 140ms ease;
}

.confirm-backdrop[hidden] {
  display: none;
}

.confirm-backdrop.is-open {
  opacity: 1;
}

.confirm-dialog {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  width: min(420px, 100%);
  padding: 18px;
  border: 1px solid rgba(180, 35, 24, 0.18);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 22px 54px rgba(24, 33, 50, 0.2);
  transform: translateY(8px) scale(0.98);
  transition: transform 140ms ease;
}

.confirm-backdrop.is-open .confirm-dialog {
  transform: translateY(0) scale(1);
}

.confirm-dialog-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #fecdca;
  border-radius: 999px;
  background: #fff1f3;
  color: var(--danger);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.confirm-dialog-copy {
  min-width: 0;
}

.confirm-dialog-copy h2 {
  margin: 0;
  font-size: 18px;
}

.confirm-dialog-copy p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.confirm-dialog-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.history-panel {
  padding: 0;
  overflow: hidden;
}

.history-panel-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  min-height: 54px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.history-panel-head h2 {
  font-size: 17px;
}

.history-panel-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.history-list {
  display: grid;
}

.history-goal-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px 12px 18px;
  border-top: 1px solid var(--line-soft);
}

.history-goal-row:first-child {
  border-top: 0;
}

.history-goal-row::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--priority-color, var(--accent));
  content: "";
}

.history-goal-main {
  display: block;
  min-width: 0;
  color: inherit;
  cursor: pointer;
}

.history-goal-detail {
  min-width: 0;
}

.history-inline-panel {
  gap: 12px;
}

.history-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  align-items: center;
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}

.history-detail-meta > div {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.history-detail-meta dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.history-detail-meta dd {
  margin: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.history-detail-meta-tags {
  flex: 1 1 140px;
}

.history-detail-meta-tags dd {
  min-width: 0;
  white-space: normal;
}

.history-detail-meta .tag-list {
  gap: 4px;
  margin: 0;
}

.history-detail-meta .tag {
  min-height: 22px;
  padding: 2px 7px;
  font-size: 12px;
}

@media (max-width: 430px) {
  .history-detail-meta {
    column-gap: 8px;
    font-size: 12px;
  }

  .history-detail-meta dt {
    font-size: 11px;
  }

  .history-detail-meta-tags {
    flex-basis: 116px;
  }
}

.history-detail-section {
  padding-top: 0;
  border-top: 0;
}

.history-goal-main > h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
}

.history-goal-main > p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.history-goal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.history-goal-tags .tag {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-goal-tags.is-empty .tag {
  background: #f1f5f9;
  color: #64748b;
}

.history-row-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, 1fr));
  gap: 6px;
  width: min(360px, 100%);
  margin-left: auto;
}

.history-row-actions .button,
.history-row-actions button {
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  font-size: 13px;
  white-space: nowrap;
}

.goal-row-actions .button.compact,
.goal-row-actions button.compact {
  width: 100%;
  min-height: 32px;
  padding: 6px;
}

.goals-simple-mode .summary {
  margin-bottom: 10px;
}

.goals-simple-mode .goal-list {
  gap: 4px;
}

.goals-simple-mode .goal-row {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

.goals-simple-mode .goal-row-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 12px;
}

.goals-simple-mode .goal-row h2 {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goals-simple-mode .goal-row p,
.goals-simple-mode .goal-complete-form,
.goals-simple-mode .goal-row-actions {
  display: none;
}

.goals-simple-mode .goal-row .meta-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
  max-width: min(40vw, 240px);
  margin: 0;
  overflow: hidden;
  gap: 4px;
}

.goals-simple-mode .goal-row .meta-row > :not(.tag) {
  display: none;
}

.goals-simple-mode .goal-row .tag {
  flex: 0 1 auto;
  max-width: 120px;
  min-height: 22px;
  padding: 2px 7px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goals-simple-mode .week-goal-row .goal-row-main {
  grid-template-columns: minmax(0, 1fr);
}

.goals-simple-mode .week-goal-row .goal-row-main > .meta-row {
  display: none;
}

.goals-simple-mode .week-goal-row .goal-row-main > h2 {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  text-align: left;
}

.goals-simple-mode .history-list {
  gap: 4px;
}

.goals-simple-mode .history-goal-row {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

.goals-simple-mode .history-goal-row::before {
  top: 8px;
  bottom: 8px;
}

.goals-simple-mode .history-goal-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 12px;
  min-height: 40px;
  padding: 9px 12px 9px 16px;
}

.goals-simple-mode .history-goal-main > h2 {
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goals-simple-mode .history-goal-main > p,
.goals-simple-mode .history-row-actions {
  display: none;
}

.goals-simple-mode .history-goal-main > .meta-row {
  grid-column: 2;
  grid-row: 1;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
}

.goals-simple-mode .history-goal-main > .meta-row > * {
  display: none;
}

.goals-simple-mode .history-goal-main > .meta-row > :is(.history-goal-category, .history-goal-time) {
  display: inline-flex;
}

.goals-simple-mode .history-goal-category {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 800;
}

.goals-simple-mode .history-goal-time {
  color: var(--muted);
}

.goals-simple-mode .history-goal-time::before {
  margin-right: 4px;
  content: "·";
}

.goals-simple-mode .history-goal-detail[open] .history-row-actions {
  display: grid;
}

.goals-simple-mode .history-goal-tags {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
  max-width: min(40vw, 240px);
  margin: 0;
  overflow: hidden;
  gap: 4px;
}

.goals-simple-mode .history-goal-tags .tag {
  flex: 0 1 auto;
  max-width: 120px;
  min-height: 22px;
  padding: 2px 7px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1040px) {
  .goals-simple-mode .history-goal-main {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 3px 8px;
    min-height: 54px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .goals-simple-mode .history-goal-main > h2 {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .goals-simple-mode .history-goal-main > .meta-row {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
  }

  .goals-simple-mode .history-goal-time {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .goals-simple-mode .history-goal-tags {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (min-width: 1041px) and (hover: hover) and (pointer: fine) {
  .goals-simple-mode .goal-section,
  .goals-simple-mode .history-panel {
    position: relative;
    overflow: visible;
  }

  .goals-simple-mode .goal-section details {
    overflow: visible;
  }

  .goals-simple-mode:not(.goals-sort-mode) .goal-section:hover,
  .goals-simple-mode:not(.goals-sort-mode) .goal-section:focus-within,
  .goals-simple-mode .history-panel:hover,
  .goals-simple-mode .history-panel:focus-within {
    z-index: 60;
  }

  .goals-simple-mode:not(.goals-sort-mode) .goal-index-row[data-goal-tooltip]:hover,
  .goals-simple-mode:not(.goals-sort-mode) .goal-index-row[data-goal-tooltip]:focus-within,
  .goals-simple-mode .history-goal-row[data-goal-tooltip]:hover,
  .goals-simple-mode .history-goal-row[data-goal-tooltip]:focus-within {
    z-index: 70;
  }
}

.goal-hover-tooltip {
  position: fixed;
  z-index: 120;
  width: max-content;
  max-width: min(420px, calc(100vw - 80px));
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(24, 33, 50, 0.14);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  pointer-events: none;
  white-space: pre-line;
}

.goal-hover-tooltip[hidden] {
  display: none;
}

.goal-drag-handle {
  display: none;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border-color: var(--line);
  background: #ffffff;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  touch-action: none;
  cursor: grab;
}

@media (min-width: 1041px) and (hover: hover) and (pointer: fine) {
  [data-goal-sort-toggle] {
    display: none;
  }
}

.goals-sort-mode .goal-row {
  grid-template-columns: 36px minmax(0, 1fr);
}

.goals-sort-mode .goal-drag-handle {
  display: inline-grid;
  place-items: center;
}

.goals-sort-mode .goal-row-actions {
  display: none;
}

.goals-sort-mode .goal-complete-form {
  display: none;
}

.goals-sort-mode .goal-row-main {
  pointer-events: none;
}

.goals-sort-mode .inline-edit-panel {
  display: none;
}

.goals-sort-mode .goal-inline-detail[open] > summary {
  margin-bottom: 0;
}

.goal-row.is-dragging {
  opacity: 0.92;
  box-shadow: 0 12px 28px rgba(24, 33, 50, 0.18);
  cursor: grabbing;
  user-select: none;
}

.goal-drag-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

.goals-is-dragging,
.goals-is-dragging * {
  user-select: none;
  -webkit-user-select: none;
}

.goal-drop-placeholder {
  min-height: 42px;
  border: 1px dashed rgba(37, 99, 235, 0.55);
  border-radius: 8px;
  background: #eff6ff;
}

.goal-section.is-drop-target details {
  border-color: rgba(37, 99, 235, 0.68);
  background: #fbfdff;
}

.goals-sort-saving .goal-overview {
  cursor: progress;
}

.goal-reorder-status {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 130;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  box-shadow: var(--shadow-soft);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.goal-reorder-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.goal-reorder-status[data-state="saved"] {
  color: var(--success);
}

.goal-reorder-status[data-state="error"] {
  color: var(--danger);
}

.goals-sort-saving .goal-row {
  cursor: progress;
}

@media (max-width: 1040px) {
  .goal-reorder-status {
    right: 14px;
    bottom: auto;
    max-width: calc(100vw - 28px);
    white-space: nowrap;
  }
}

@media (pointer: fine) {
  .goal-overview .goal-row {
    cursor: grab;
  }

  .goal-overview .goal-row:active {
    cursor: grabbing;
  }
}

.calendar-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(76px, 1fr));
  gap: 4px;
  margin-bottom: 12px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.calendar-tabs a {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 5px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.calendar-tabs a.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.calendar-range-strip {
  display: none;
}

.calendar-date-toggle {
  display: none;
}

.week-controls {
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(240px, 1fr) minmax(88px, auto) minmax(88px, auto);
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}

.week-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, auto);
  gap: 6px;
}

.week-picker input {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1.2;
}

.week-picker button {
  width: 100%;
}

.week-controls > .button,
.week-picker button {
  min-height: 36px;
  padding: 6px 10px;
}

.week-board {
  display: grid;
  gap: 10px;
}

.week-day {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.week-day.is-today {
  border-color: rgba(37, 99, 235, 0.72);
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 42%);
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.16), 0 10px 26px rgba(37, 99, 235, 0.1);
}

.week-day.is-today::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
  content: "";
}

.week-day-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.week-day.is-today .week-day-head {
  background: var(--accent-soft);
  border-bottom-color: rgba(37, 99, 235, 0.18);
}

.week-day-head div {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}

.week-day-head span {
  color: var(--muted);
  font-size: 13px;
}

.week-day-head b {
  min-width: 30px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  text-align: center;
}

.today-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 999px;
  background: #ffffff;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.week-goal-list {
  display: grid;
  gap: 6px;
  padding: 8px;
}

.week-row-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 140px;
}

.week-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 800;
}

.week-empty {
  margin: 0;
  padding: 8px 2px;
}

.calendar-long-ranges {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.calendar-long-ranges header,
.calendar-long-ranges > summary {
  display: grid;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.calendar-long-ranges header {
  grid-template-columns: minmax(0, 1fr) auto;
}

.calendar-long-ranges > summary {
  grid-template-columns: minmax(0, 1fr) auto auto;
  cursor: pointer;
  list-style: none;
}

.calendar-long-ranges > summary::-webkit-details-marker {
  display: none;
}

.calendar-long-ranges > summary::after {
  width: 7px;
  height: 7px;
  margin: 0 3px 3px 1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--muted);
  content: "";
  transform: rotate(45deg);
  transition: transform 140ms ease, margin 140ms ease;
}

.calendar-long-ranges[open] > summary::after {
  margin-top: 4px;
  margin-bottom: 0;
  transform: rotate(225deg);
}

.calendar-long-ranges:not([open]) > summary {
  border-bottom-color: transparent;
}

.calendar-long-ranges > summary:hover,
.calendar-long-ranges > summary:focus-visible {
  background: var(--accent-soft);
  outline: none;
}

.calendar-long-ranges h2 {
  font-size: 16px;
}

.calendar-long-ranges :where(header, summary) strong {
  min-width: 30px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  text-align: center;
}

.range-goal-list {
  display: grid;
  gap: 6px;
  padding: 8px;
}

.range-goal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 28%);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  color: inherit;
  text-decoration: none;
}

.range-goal.is-completed {
  background: #f8fafc;
  opacity: 0.78;
}

.range-goal.is-completed h2 {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.range-goal.priority-row-high {
  border-left: 4px solid #e11d48;
}

.range-goal.priority-row-medium {
  border-left: 4px solid var(--accent);
}

.range-goal.priority-row-low {
  border-left: 4px solid #94a3b8;
}

.range-goal-main {
  min-width: 0;
}

.range-goal-main h2 {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.range-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

.range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 8px;
  border-radius: 999px;
}

.priority-fill-high {
  background: #e11d48;
}

.priority-fill-medium {
  background: var(--accent);
}

.priority-fill-low {
  background: #94a3b8;
}

.month-controls {
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(240px, 1fr) minmax(88px, auto) minmax(88px, auto);
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}

.month-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, auto);
  gap: 6px;
}

.month-picker input,
.month-picker button,
.month-controls > .button {
  min-height: 36px;
  padding: 6px 10px;
}

.month-picker input {
  font-size: 14px;
  line-height: 1.2;
}

.month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}

.month-weekdays div {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.month-day {
  position: relative;
  min-width: 0;
  min-height: 118px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  overflow: hidden;
}

.month-day.is-outside-month {
  background: #f8fafc;
  color: var(--muted);
}

.month-day.is-today {
  border-color: rgba(37, 99, 235, 0.78);
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 48%);
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.16), 0 10px 24px rgba(37, 99, 235, 0.1);
}

.month-day.is-today::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--accent);
  content: "";
}

.month-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 6px;
}

.month-date-wrap {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.month-date {
  font-weight: 900;
  line-height: 1;
}

.month-day.is-today .month-date {
  color: var(--accent);
}

.month-day-head b {
  min-width: 24px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.month-goals {
  display: grid;
  gap: 4px;
}

.month-goal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 4px;
  align-items: center;
  min-height: 24px;
  padding: 3px 5px;
  border-radius: 6px;
  background: #f8fafc;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none;
}

.month-goal.is-completed {
  background: #f1f5f9;
  color: var(--muted);
}

.month-goal.is-completed span:nth-child(2) {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.month-goal span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.month-goal small {
  display: none;
}

.month-goal b {
  padding: 1px 4px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 11px;
  line-height: 1.2;
}

.month-goal .completed-badge {
  background: #e2e8f0;
  color: #475569;
}

.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.priority-dot-high {
  background: #e11d48;
}

.priority-dot-medium {
  background: var(--accent);
}

.priority-dot-low {
  background: #94a3b8;
}

.month-more {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.calendar-day-strip {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.calendar-day-strip a,
.calendar-day-strip strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 6px;
  text-decoration: none;
}

.calendar-day-strip a {
  color: var(--accent);
  font-size: 20px;
  font-weight: 900;
}

.calendar-day-strip strong {
  overflow: hidden;
  padding: 0 8px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-day-detail {
  display: grid;
  gap: 10px;
}

.calendar-day-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.calendar-day-head h2 {
  font-size: 18px;
}

.calendar-day-head a {
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.day-goal-list {
  padding: 0;
}

.day-empty {
  margin: 0;
}

.note-capture,
.note-filter-panel {
  margin-top: 12px;
}

.note-panel[hidden] {
  display: none;
}

.note-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.pinned-notes {
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 8px;
  background: #fbfdff;
  overflow: hidden;
}

.pinned-notes > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.pinned-notes > summary::-webkit-details-marker {
  display: none;
}

.pinned-notes > summary strong {
  min-width: 30px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  text-align: center;
}

.pinned-note-list {
  display: grid;
  gap: 8px;
  padding: 0 8px 8px;
}

.note-card {
  position: relative;
  padding: 12px;
  border-color: var(--line-soft);
  box-shadow: var(--shadow-soft);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.note-card.is-pinned {
  border-color: rgba(37, 99, 235, 0.34);
  background: #fbfdff;
}

.note-card:hover,
.note-card:focus-within {
  border-color: rgba(37, 99, 235, 0.32);
  background: #fbfdff;
  box-shadow: 0 8px 22px rgba(24, 33, 50, 0.08);
}

.note-card-main {
  min-width: 0;
}

.note-inline-detail {
  grid-column: 1 / -1;
}

.note-card-summary {
  display: block;
  cursor: pointer;
}

.note-excerpt-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.note-excerpt {
  margin: 0;
  color: var(--text);
  white-space: pre-wrap;
}

.note-menu-toggle {
  width: auto;
  min-height: 32px;
  margin-left: auto;
  padding: 6px 10px;
}

.note-menu-popover {
  position: absolute;
  top: 44px;
  right: 10px;
  z-index: 4;
  display: grid;
  gap: 6px;
  min-width: 132px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.note-menu-popover[hidden] {
  display: none;
}

.note-menu-popover .button.compact,
.note-menu-popover button.compact {
  width: 100%;
  min-height: 32px;
  padding: 6px;
}

.note-meta {
  margin-bottom: 7px;
  padding-right: 0;
}

.deleted-note-actions {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.deleted-note-actions .button,
.deleted-note-actions button {
  width: 100%;
}

@media (min-width: 1041px) {
  .note-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
  }

  .note-menu-toggle {
    display: none;
  }

  .note-menu-popover,
  .note-menu-popover[hidden] {
    position: static;
    z-index: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    align-self: start;
    min-width: 248px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .deleted-note-actions {
    grid-template-columns: repeat(2, minmax(84px, 1fr));
    align-self: start;
    min-width: 180px;
    margin-top: 0;
  }
}

.knowledge-layout {
  display: grid;
  gap: 16px;
  align-items: start;
}

.knowledge-main {
  min-width: 0;
}

.knowledge-filter-panel {
  padding: 14px;
}

.knowledge-filter {
  gap: 10px;
}

.knowledge-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.knowledge-card {
  padding: 0;
  box-shadow: var(--shadow-soft);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.knowledge-card:hover,
.knowledge-card:focus-within {
  border-color: rgba(37, 99, 235, 0.3);
  background: #fbfdff;
  box-shadow: 0 8px 22px rgba(24, 33, 50, 0.08);
}

.knowledge-card-main {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 13px 14px;
  color: inherit;
  text-decoration: none;
}

.knowledge-card-main h2 {
  font-size: 18px;
  line-height: 1.35;
}

.knowledge-meta {
  margin-bottom: 0;
}

.knowledge-excerpt {
  margin: 0;
  color: var(--muted);
  white-space: pre-wrap;
}

.knowledge-rail {
  display: grid;
  gap: 12px;
}

.knowledge-rail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.knowledge-rail-list {
  display: grid;
  gap: 8px;
}

.knowledge-rail-link {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
  color: inherit;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.knowledge-rail-link:hover,
.knowledge-rail-link:focus-visible {
  border-color: rgba(37, 99, 235, 0.28);
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(24, 33, 50, 0.07);
  outline: none;
}

.knowledge-rail-link span {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.knowledge-rail-link small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.archived-knowledge-actions {
  display: grid;
  gap: 6px;
  padding: 0 14px 14px;
}

.archived-knowledge-actions .button,
.archived-knowledge-actions button {
  width: 100%;
}

.knowledge-form textarea {
  min-height: 360px;
}

.notebook-layout {
  display: grid;
  gap: 16px;
  align-items: start;
}

.notebook-sidebar,
.notebook-main {
  min-width: 0;
}

.notebook-sidebar {
  display: grid;
  gap: 0;
}

.notebook-tree-shell {
  display: grid;
  gap: 0;
  min-height: 0;
  padding: 10px 0 12px;
  border-right: 1px solid var(--line-soft);
  background: var(--panel);
  overflow: visible;
}

.notebook-tree-library {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  color: var(--text);
}

.notebook-tree-library-mark {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #8ab4f8;
  border-radius: 5px;
  background: linear-gradient(90deg, #7aa7f6 0 4px, #dbeafe 4px 100%);
}

.notebook-tree-library strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notebook-tree-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  padding: 10px 8px 8px;
}

.notebook-tree-search input {
  min-height: 34px;
  padding: 7px 10px;
  border-color: transparent;
  border-radius: 8px;
  background: #f4f5f5;
  color: var(--text);
  font-size: 14px;
}

.notebook-tree-search button,
.notebook-tree-search a {
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #ffffff;
  color: #5f6368;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.notebook-tree-search button:hover,
.notebook-tree-search button:focus-visible,
.notebook-tree-search a:hover,
.notebook-tree-search a:focus-visible {
  background: #f1f3f4;
  color: #202124;
  outline: none;
}

.notebook-tree-home,
.notebook-tree-titlebar {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  margin: 0 8px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
}

.notebook-tree-home,
.notebook-tree-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.notebook-tree-home:hover,
.notebook-tree-home:focus-visible {
  background: #f1f3f4;
  outline: none;
}

.notebook-tree-home-icon,
.notebook-tree-title-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  color: #33373b;
  font-size: 18px;
  line-height: 1;
}

.notebook-tree-titlebar {
  grid-template-columns: minmax(0, 1fr) auto;
}

.notebook-tree-title {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.notebook-tree-title-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.notebook-tree-title-action {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #7a7d80;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}

.notebook-tree-title-action:hover,
.notebook-tree-title-action:focus-visible {
  background: #f1f3f4;
  color: #2b2f33;
  outline: none;
}

.notebook-tree-titlebar.is-notebook-drop-target {
  background: #edf2f7;
}

.notebook-tree-scroll {
  max-height: min(72vh, 760px);
  overflow-y: auto;
  padding: 4px 0 12px;
  scrollbar-width: thin;
  scrollbar-color: #dddddd transparent;
}

.notebook-tree-scroll::-webkit-scrollbar {
  width: 10px;
}

.notebook-tree-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.notebook-tree-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: #dcdcdc;
  background-clip: content-box;
}

.notebook-tree {
  margin: 0;
}

.notebook-tree,
.notebook-tree ul {
  display: grid;
  gap: 0;
  padding: 0;
  list-style: none;
}

.notebook-tree ul {
  margin: 0;
  padding-left: 18px;
}

.notebook-tree-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.notebook-tree-row {
  margin: 0 8px;
  padding: 0 6px;
}

.notebook-tree-link,
.notebook-tree-note-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  padding: 0;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.notebook-tree-note-link {
  color: #33373b;
  font-size: 14px;
}

.notebook-tree-row:hover,
.notebook-tree-row:focus-within,
.notebook-tree-row.is-current {
  background: #f1f3f4;
}

.notebook-tree-link:hover,
.notebook-tree-link:focus-visible,
.notebook-tree-note-link:hover,
.notebook-tree-note-link:focus-visible,
.notebook-tree-link.is-active {
  color: #202124;
  outline: none;
}

.notebook-tree-link span,
.notebook-tree-note-link span {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notebook-tree-link.is-active span,
.notebook-tree-note-link.is-active span {
  font-weight: 800;
}

.notebook-tree-note-link span {
  font-weight: 500;
}

.notebook-tree-link small {
  display: none;
}

.notebook-tree-toggle,
.notebook-tree-toggle-spacer,
.notebook-tree-action {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  color: #555b60;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.notebook-tree-toggle {
  border: 0;
  cursor: pointer;
  transform: rotate(90deg);
  transition: transform 140ms ease, background 140ms ease, color 140ms ease;
}

.notebook-tree-toggle[aria-expanded="false"] {
  transform: rotate(0deg);
}

.notebook-tree-toggle-spacer {
  opacity: 0;
}

.notebook-tree-action {
  border: 0;
}

.notebook-tree-toggle:hover,
.notebook-tree-toggle:focus-visible,
.notebook-tree-action:hover,
.notebook-tree-action:focus-visible {
  border-color: rgba(37, 99, 235, 0.32);
  background: #e7e9eb;
  color: #202124;
  outline: none;
}

.notebook-tree-more {
  font-size: 19px;
}

.notebook-tree-actions {
  position: relative;
  display: flex;
  gap: 4px;
  align-items: center;
  opacity: 0;
  transition: opacity 120ms ease;
}

.notebook-tree-row:hover .notebook-tree-actions,
.notebook-tree-row:focus-within .notebook-tree-actions {
  opacity: 1;
}

.notebook-tree-actions form {
  display: contents;
}

.notebook-tree-menu {
  position: relative;
}

.notebook-tree-menu summary {
  list-style: none;
}

.notebook-tree-menu summary::-webkit-details-marker {
  display: none;
}

.notebook-tree-menu[open] > summary {
  background: #e7e9eb;
  color: #202124;
}

.notebook-tree-menu-popover {
  position: fixed;
  top: var(--notebook-menu-top, 0);
  left: var(--notebook-menu-left, 0);
  z-index: 1000;
  display: grid;
  min-width: 188px;
  padding: 6px 0;
  border: 1px solid #e6e8ea;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(20, 24, 30, 0.14);
}

.notebook-tree-menu-popover a,
.notebook-tree-menu-popover button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #303336;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
}

.notebook-tree-menu-popover a:hover,
.notebook-tree-menu-popover a:focus-visible,
.notebook-tree-menu-popover button:hover,
.notebook-tree-menu-popover button:focus-visible {
  background: #f5f6f7;
  color: #202124;
  outline: none;
  box-shadow: none;
}

.notebook-tree-menu-popover form {
  border-top: 1px solid #eceeef;
  margin-top: 6px;
  padding-top: 6px;
}

.notebook-tree-menu-popover form button {
  color: #202124;
}

.notebook-tree-empty {
  margin: 8px 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.notebook-tree-titlebar.is-notebook-drop-target,
.notebook-tree-row.is-notebook-drop-target {
  border-color: transparent;
  background: #e9eef5;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.notebook-tree-item.is-notebook-drag-source > .notebook-tree-row {
  opacity: 0.42;
}

.notebook-tree-drag-ghost {
  position: fixed;
  z-index: 260;
  pointer-events: none;
  cursor: grabbing;
  border: 1px solid rgba(37, 99, 235, 0.34);
  background: var(--panel);
  box-shadow: 0 12px 26px rgba(24, 33, 50, 0.18);
}

.notebooks-is-dragging,
.notebooks-is-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

@media (hover: none) {
  .notebook-tree-actions {
    opacity: 1;
  }
}

.notebook-head-panel,
.notebook-filter-panel,
.notebook-form-panel {
  padding: 14px;
}

.notebook-home-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.notebook-home-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.notebook-home-head p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.notebook-home-list {
  display: grid;
  gap: 8px;
}

.notebook-home-note {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
  color: inherit;
  text-decoration: none;
}

.notebook-home-note:hover,
.notebook-home-note:focus-visible {
  border-color: rgba(37, 99, 235, 0.28);
  background: #ffffff;
  outline: none;
}

.notebook-home-note span {
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 900;
}

.notebook-home-note small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.notebook-head-panel {
  display: grid;
  gap: 8px;
}

.notebook-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.notebook-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.notebook-breadcrumbs a:hover,
.notebook-breadcrumbs a:focus-visible {
  color: var(--accent);
}

.notebook-head-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: end;
  justify-content: space-between;
}

.notebook-head-title h2 {
  font-size: 22px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.notebook-head-title span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.notebook-filter {
  gap: 10px;
}

.notebook-content-list,
.notebook-recent-list {
  display: grid;
  gap: 10px;
}

.notebook-content-list {
  margin-top: 12px;
}

.notebook-row {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.notebook-row:hover,
.notebook-row:focus-within {
  border-color: rgba(37, 99, 235, 0.28);
  background: #fbfdff;
  box-shadow: 0 8px 22px rgba(24, 33, 50, 0.08);
}

.notebook-row-main {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 13px 14px;
  color: inherit;
  text-decoration: none;
}

.notebook-row-main h2 {
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.notebook-meta {
  margin-bottom: 0;
}

.notebook-kind {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.notebook-kind.note-kind {
  background: #eef2ff;
  color: #4338ca;
}

.notebook-excerpt {
  margin: 0;
  color: var(--muted);
  white-space: pre-wrap;
}

.notebook-row-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(68px, 1fr));
  gap: 6px;
  padding: 0 14px 14px;
}

.notebook-row-actions form,
.notebook-row-actions .button,
.notebook-row-actions button {
  width: 100%;
}

.notebook-recent-link {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
  color: inherit;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.notebook-recent-link:hover,
.notebook-recent-link:focus-visible {
  border-color: rgba(37, 99, 235, 0.28);
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(24, 33, 50, 0.07);
  outline: none;
}

.notebook-recent-link span {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.notebook-recent-link small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.notebook-empty {
  margin-top: 12px;
}

.notebook-note-form textarea {
  min-height: 420px;
}

.notebook-delete-form {
  display: flex;
  justify-content: flex-start;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.notebook-detail-actions form {
  display: contents;
}

.markdown-guide-intro {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.markdown-guide-intro p {
  margin: 0;
  color: var(--muted);
}

.markdown-guide-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.markdown-guide-tips span {
  display: inline-flex;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.markdown-guide-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.markdown-guide-example {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.markdown-guide-copy {
  display: grid;
  gap: 4px;
}

.markdown-guide-copy h2 {
  font-size: 18px;
}

.markdown-guide-copy p {
  margin: 0;
  color: var(--muted);
}

.markdown-guide-pair {
  display: grid;
  gap: 10px;
}

.markdown-guide-source,
.markdown-guide-preview {
  min-width: 0;
}

.markdown-guide-source h3,
.markdown-guide-preview h3 {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
}

.markdown-guide-source pre {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
  overflow-x: auto;
}

.markdown-guide-source code {
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  white-space: pre;
}

.markdown-guide-preview .markdown-body {
  min-height: 100%;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
}

@media (min-width: 1041px) {
  .knowledge-filter {
    grid-template-columns: minmax(0, 1.4fr) minmax(170px, 0.7fr) auto;
    align-items: end;
  }

  .notebook-filter {
    grid-template-columns: minmax(0, 1.4fr) minmax(170px, 0.7fr) auto;
    gap: 8px;
    align-items: center;
  }

  .notebook-filter-panel {
    padding: 8px 10px;
  }

  .notebook-filter > label {
    gap: 0;
  }

  .notebook-filter :where(input, select, .button, button) {
    height: 36px;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.3;
  }

  .notebook-filter .form-actions {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .knowledge-filter .form-actions,
  .notebook-filter .form-actions {
    align-self: center;
  }

  .notebook-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .notebook-row-actions {
    grid-template-columns: repeat(3, minmax(68px, 84px));
    align-self: start;
    min-width: 240px;
    padding: 13px 14px 13px 0;
  }

  .archived-knowledge-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
  }

  .archived-knowledge-actions {
    grid-template-columns: repeat(2, minmax(84px, 1fr));
    align-self: start;
    min-width: 180px;
    padding: 13px 14px 13px 0;
  }

  .markdown-guide-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 1041px) {
  .knowledge-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
  }

  .notebook-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
  }

  .knowledge-rail,
  .notebook-sidebar {
    position: sticky;
    top: 16px;
  }
}

.importance,
.pin-label,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.importance-normal {
  background: #f1f5f9;
  color: #475569;
}

.importance-important {
  background: #fff7ed;
  color: #9a3412;
}

.importance-critical {
  background: #fff1f2;
  color: #be123c;
}

.pin-label {
  background: var(--accent-soft);
  color: var(--accent);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -6px;
}

.tag {
  background: var(--tag-bg, #ecfdf5);
  color: var(--tag-fg, var(--success));
  text-decoration: none;
}

.tag-color-0 {
  --tag-bg: #ecfdf5;
  --tag-fg: #047857;
  --tag-hover-bg: #d1fae5;


}

.tag-color-1 {
  --tag-bg: #eff6ff;
  --tag-fg: #1d4ed8;
  --tag-hover-bg: #dbeafe;


}

.tag-color-2 {
  --tag-bg: #fffbeb;
  --tag-fg: #b45309;
  --tag-hover-bg: #fef3c7;


}

.tag-color-3 {
  --tag-bg: #fff1f2;
  --tag-fg: #be123c;
  --tag-hover-bg: #ffe4e6;


}

.tag-color-4 {
  --tag-bg: #eef2ff;
  --tag-fg: #4338ca;
  --tag-hover-bg: #e0e7ff;


}

.tag-color-5 {
  --tag-bg: #ecfeff;
  --tag-fg: #0e7490;
  --tag-hover-bg: #cffafe;


}

.tag-color-6 {
  --tag-bg: #f7fee7;
  --tag-fg: #4d7c0f;
  --tag-hover-bg: #ecfccb;


}

.tag-color-7 {
  --tag-bg: #fff7ed;
  --tag-fg: #c2410c;
  --tag-hover-bg: #ffedd5;


}

.tag-choice {
  width: auto;
  min-height: 28px;
  border-color: transparent;
  cursor: pointer;
}

.tag-choice:hover {
  background: var(--tag-hover-bg, #d1fae5);
}

.goal-detail .tag-list {
  margin-top: 0;
}

.panel {
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.placeholder {
  margin-top: 10px;
}

.placeholder p,
.empty {
  margin: 8px 0 0;
  color: var(--muted);
}

.form {
  display: grid;
  gap: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

label {
  display: grid;
  gap: 6px;
}

label span,
.field-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.field-help {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.date-time-field {
  display: grid;
  gap: 6px;
}

.date-time-parts {
  display: grid;
  grid-template-columns: minmax(136px, 1fr) 76px 76px;
  gap: 8px;
}

.date-time-parts input,
.date-time-parts select {
  min-width: 0;
}

.goal-date-time-field input {
  min-width: 0;
}

.form-grid.goal-time-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.goal-reminder-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 1040px) {
  .form-grid.goal-time-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.goal-compact-form {
  gap: 10px;
}

@media (min-width: 1041px) {
  .goal-compact-form label,
  .goal-compact-form .date-time-field {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  .goal-compact-form label span,
  .goal-compact-form .field-label {
    align-self: center;
    white-space: nowrap;
  }

  .goal-compact-form .goal-description-field {
    align-items: start;
  }

  .goal-compact-form .goal-description-field span {
    padding-top: 10px;
  }

  .goal-compact-form .tag-picker {
    padding-left: 72px;
  }

  .goal-compact-form .goal-inline-title-fields label,
  .goal-compact-form .goal-inline-meta-fields label {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    align-items: stretch;
  }

  .goal-compact-form .goal-inline-title-fields label span,
  .goal-compact-form .goal-inline-meta-fields label span {
    align-self: start;
  }

  .goal-compact-form .goal-inline-tag-field .tag-picker {
    padding-left: 0;
  }
}

.goal-compact-form input,
.goal-compact-form select {
  min-height: 42px;
  padding: 8px 10px;
}

.goal-compact-form textarea {
  min-height: 112px;
  padding: 8px 10px;
}

.goal-compact-form .date-time-parts {
  grid-template-columns: minmax(118px, 1fr) 64px 64px;
}

.check-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.check-row input {
  width: 20px;
  min-height: 20px;
  margin: 0;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
}

textarea {
  resize: vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.24);
  outline-offset: 2px;
}

.module-nav {
  display: none;
}

.module-nav a {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 9px 8px 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}

.module-nav a.is-active {
  color: var(--accent);
}

.login-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(420px, 100%);
  padding: 22px;
}

.login-card-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.login-brand {
  margin: 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

.login-card h1 {
  margin-bottom: 16px;
}

.login-legal {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.login-legal a,
.privacy-shell a {
  color: var(--accent);
}

.privacy-shell {
  width: min(880px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.privacy-page-head {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.privacy-page-head h1,
.privacy-page-head p {
  margin: 0;
}

.privacy-page-head > p:last-child {
  color: var(--muted);
  font-size: 14px;
}

.privacy-back-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  font-weight: 800;
  text-decoration: none;
}

.privacy-policy {
  display: grid;
  gap: 26px;
  padding: 28px;
  line-height: 1.75;
}

.privacy-policy section {
  display: grid;
  gap: 10px;
}

.privacy-policy h2,
.privacy-policy h3,
.privacy-policy p,
.privacy-policy ul {
  margin: 0;
}

.privacy-policy h2 {
  font-size: 20px;
}

.privacy-policy h3 {
  margin-top: 4px;
  font-size: 16px;
}

.privacy-policy ul {
  display: grid;
  gap: 6px;
  padding-left: 22px;
}

@media (max-width: 1040px) {
  .privacy-shell {
    padding-top: 22px;
  }

  .privacy-policy {
    gap: 22px;
    padding: 20px;
  }
}

.alert {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: var(--warning-bg);
  color: #9a3412;
}

@media (max-width: 1040px) {
  .shell {
    width: min(100% - 28px, 920px);
  }

  .focus-layout {
    display: block;
  }

  .focus-rail {
    display: none;
  }
}

@media (max-width: 1040px) {

  .goal-inline-title-fields,
  .goal-inline-meta-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .shell {
    width: min(100% - 20px, 920px);
    padding-top: 12px;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .button,
  button {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 14px;
  }

  .button.compact,
  button.compact {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 13px;
  }

  .goal-row-actions .button.compact,
  .goal-row-actions button.compact,
  .history-row-actions .button,
  .history-row-actions button,
  .note-menu-popover .button.compact,
  .note-menu-popover button.compact {
    min-height: 36px;
  }

  .topbar {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .top-actions.is-mobile-menu {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    align-items: stretch;
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .topbar-side {
    display: grid;
    gap: 10px;
    width: 100%;
    min-width: 0;
    justify-items: start;
  }

  .brand-lockup {
    display: none;
  }

  .module-page-title {
    display: none;
  }

  .desktop-module-nav {
    display: none;
  }

  .topbar-system {
    display: none;
  }

  .topbar-side > .account-menu {
    display: none;
  }

  .module-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 5px 10px calc(5px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 -8px 24px rgba(24, 33, 50, 0.08);
    backdrop-filter: blur(12px);
  }

  .module-nav a {
    gap: 3px;
    min-height: 54px;
    padding: 5px 8px 6px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1;
  }

  .module-nav a::before {
    display: block;
    width: 20px;
    height: 20px;
    color: currentColor;
    content: "";
  }

  .module-nav a[data-module="goals"]::before {
    border: 2px solid currentColor;
    border-radius: 999px;
    box-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 6px currentColor;
  }

  .module-nav a[data-module="notes"]::before {
    border: 2px solid currentColor;
    border-radius: 5px;
    background:
      linear-gradient(currentColor, currentColor) 5px 6px / 8px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 5px 11px / 6px 2px no-repeat;
  }

  .module-nav a[data-module="knowledge"]::before,
  .module-nav a[data-module="notebooks"]::before {
    border: 2px solid currentColor;
    border-radius: 4px;
    background:
      linear-gradient(currentColor, currentColor) 5px 5px / 8px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 5px 10px / 10px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 5px 15px / 7px 2px no-repeat;
  }

  .module-nav a[data-module="calendar"]::before {
    border: 2px solid currentColor;
    border-radius: 5px;
    background:
      linear-gradient(currentColor, currentColor) 0 5px / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 5px 0 / 2px 5px no-repeat,
      linear-gradient(currentColor, currentColor) 13px 0 / 2px 5px no-repeat;
  }

  .module-nav a.is-active {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .top-actions.is-mobile-menu .top-actions-main {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 0;
    grid-column: 1;
    grid-row: 1;
  }

  .top-actions.is-mobile-menu .top-actions-system {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
    padding-left: 0;
    border-left: 0;
  }

  .top-actions.is-mobile-menu .top-actions-system {
    display: none;
  }

  .top-actions.is-mobile-menu .top-actions-main > :not(.top-action-primary) {
    display: none;
  }

  .top-actions.is-mobile-menu .top-actions-main > .top-action-keep {
    display: inline-flex;
  }

  .top-actions.is-mobile-menu.has-keep-action .top-actions-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px;
    gap: 6px;
  }

  .top-actions.is-mobile-menu .top-actions-main .button,
  .top-actions.is-mobile-menu .top-actions-main button {
    width: 100%;
    min-width: 0;
  }

  .top-actions.is-mobile-menu .button,
  .top-actions.is-mobile-menu button {
    width: auto;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: none;
    white-space: nowrap;
  }

  .top-actions.is-mobile-menu .top-actions-main .top-action-primary {
    flex: 1 1 auto;
    order: -1;
    width: 100%;
    min-height: 40px;
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
  }

  .top-actions.is-mobile-menu .top-actions-main .top-action-keep {
    flex: 0 0 62px;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding-inline: 6px;
    justify-content: center;
  }

  .top-actions.is-mobile-menu form {
    display: flex;
    width: auto;
  }

  .top-actions.is-mobile-menu form button {
    width: 100%;
  }

  .top-actions.is-mobile-menu .top-actions-system .button,
  .top-actions.is-mobile-menu .top-actions-system button {
    min-width: 0;
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 8px;
    font-size: 12px;
  }

  .top-actions.is-mobile-menu.is-menu-ready .top-actions-more {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding-inline: 6px;
    justify-content: center;
    border-color: var(--line-soft);
    background: rgba(255, 255, 255, 0.78);
    color: var(--text);
    font-weight: 900;
  }

  .top-actions.is-mobile-menu.is-menu-ready .top-actions-more[aria-expanded="true"] {
    border-color: rgba(37, 99, 235, 0.28);
    background: var(--accent-soft);
    color: var(--accent);
  }

  .top-actions.is-mobile-menu .top-actions-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: grid;
    width: min(236px, 72vw);
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
  }

  .top-actions.is-mobile-menu .top-actions-menu[hidden] {
    display: none;
  }

  .top-actions.is-mobile-menu .top-actions-menu .button,
  .top-actions.is-mobile-menu .top-actions-menu button {
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    gap: 10px;
    border-radius: 7px;
    box-shadow: none;
  }

  .top-actions.is-mobile-menu .top-actions-menu .top-actions-menu-icon {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
  }

  .top-actions.is-mobile-menu .top-actions-menu .goal-sections-toggle-icon {
    display: none;
  }

  .top-actions.is-mobile-menu .top-actions-menu .top-actions-menu-label-added {
    display: inline;
  }

  .top-actions.is-mobile-menu .top-actions-menu :is(a, button) > i {
    display: none;
  }

  .top-actions.is-mobile-menu .top-actions-menu form {
    display: flex;
    width: 100%;
  }

  .top-actions.is-mobile-menu .button.secondary,
  .top-actions.is-mobile-menu button.secondary {
    border-color: var(--line-soft);
    background: rgba(255, 255, 255, 0.72);
    color: var(--muted);
  }

  .top-actions.is-mobile-menu .button.secondary:hover,
  .top-actions.is-mobile-menu button.secondary:hover {
    background: #ffffff;
    color: var(--text);
  }

  .top-actions.is-mobile-menu .button:not(.secondary),
  .top-actions.is-mobile-menu button:not(.secondary) {
    border-color: rgba(37, 99, 235, 0.18);
    background: var(--accent);
    color: #ffffff;
  }

  .top-actions.is-mobile-menu .button:not(.secondary):hover,
  .top-actions.is-mobile-menu button:not(.secondary):hover {
    background: var(--accent-dark);
  }

  .confirm-backdrop {
    align-items: end;
    padding: 14px 10px calc(86px + env(safe-area-inset-bottom, 0px));
  }

  .confirm-dialog {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 15px;
  }

  .confirm-dialog-icon {
    width: 36px;
    height: 36px;
    font-size: 19px;
  }

  .confirm-dialog-copy h2 {
    font-size: 17px;
  }

  .confirm-dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .confirm-dialog-actions .button,
  .confirm-dialog-actions button {
    width: 100%;
  }

  .calendar-date-toggle {
    display: inline-flex;
  }

  .calendar-range-strip {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 4px;
    align-items: center;
    min-height: 38px;
    margin-bottom: 8px;
    padding: 3px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-soft);
  }

  .calendar-range-strip a,
  .calendar-range-strip strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 30px;
    border-radius: 999px;
    text-decoration: none;
  }

  .calendar-range-strip a {
    color: var(--accent);
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
  }

  .calendar-range-strip strong {
    overflow: hidden;
    padding: 0 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .calendar-date-controls {
    display: none;
    margin-bottom: 10px;
  }

  .calendar-date-controls.is-open {
    display: block;
  }

  .summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .summary div {
    padding: 10px;
  }

  .summary strong {
    font-size: 23px;
  }

  .goal-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-right: 0;
  }

  .goal-index-row {
    grid-template-columns: 1fr;
  }

  .goals-simple-mode .goal-index-row {
    grid-template-columns: 1fr;
  }

  .goals-sort-mode .goal-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .goal-row-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .goals-sort-mode .goal-row-actions {
    display: none;
  }

  .week-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .week-picker {
    grid-column: 1 / -1;
    order: -1;
    grid-template-columns: minmax(0, 1fr) minmax(88px, 1fr);
  }

  .week-controls > .button,
  .week-picker button,
  .month-controls > .button,
  .month-picker button,
  .calendar-tabs a {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 13px;
  }

  .range-goal {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 9px;
  }

  .range-goal-main .meta-row {
    margin-bottom: 6px;
  }

  .range-track {
    height: 8px;
  }

  .calendar-tabs {
    display: grid;
  }

  .month-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .month-picker {
    grid-column: 1 / -1;
    order: -1;
    grid-template-columns: minmax(0, 1fr) minmax(88px, 1fr);
  }

  .month-weekdays,
  .month-grid {
    gap: 3px;
  }

  .month-weekdays div {
    font-size: 11px;
  }

  .month-day {
    min-height: 88px;
    padding: 4px;
    border-radius: 6px;
  }

  .month-day.is-today {
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.2);
  }

  .month-day-head {
    margin-bottom: 4px;
  }

  .month-day .today-badge {
    display: none;
  }

  .month-date {
    font-size: 12px;
  }

  .month-day-head b {
    min-width: 18px;
    padding: 0 4px;
    font-size: 10px;
  }

  .month-goals {
    gap: 2px;
  }

  .month-goal {
    grid-template-columns: minmax(0, 1fr);
    min-height: 19px;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 10.5px;
  }

  .month-goal .priority-dot,
  .month-goal small,
  .month-goal b {
    display: none;
  }

  .month-goal span:nth-child(2) {
    width: 100%;
  }

  .month-more {
    font-size: 10px;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .history-panel-head,
  .history-goal-row {
    grid-template-columns: 1fr;
  }

  .history-panel-head {
    display: grid;
    gap: 2px;
  }

  .history-row-actions {
    width: 100%;
  }

  .form-actions,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .inline-primary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inline-secondary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inline-secondary-actions .button {
    grid-column: 1 / -1;
  }

  .date-time-parts {
    grid-template-columns: minmax(132px, 1fr) 68px 68px;
    gap: 6px;
  }
}

@media (min-width: 1041px) {
  .detail-card {
    padding: 20px;
  }
}

@media (max-width: 1040px) {
}

/* Notebook knowledge workspace */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.shell-notebooks {
  width: min(1680px, calc(100% - 24px));
  min-height: 100vh;
  padding-top: 18px;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}

@supports (min-height: 100dvh) {
  .shell-notebooks {
    min-height: 100dvh;
  }
}

.shell-notebooks .topbar {
  flex: 0 0 auto;
  width: min(1280px, calc(100% - 16px));
  min-height: 52px;
  margin: 0 auto 14px;
  padding-bottom: 10px;
}

@media (max-width: 1040px) {
  .shell-notebooks .topbar {
    width: min(920px, calc(100% - 4px));
  }
}

.notebook-layout {
  --notebook-sidebar-width: 300px;
  position: relative;
  flex: 1 0 auto;
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - 86px);
  border: 1px solid var(--line-soft);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(24, 33, 50, 0.06);
  overflow: hidden;
}

.notebook-layout.is-loading::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  height: 2px;
  background: var(--accent);
  content: "";
  animation: notebook-loading 900ms ease-in-out infinite alternate;
  transform-origin: left center;
}

@keyframes notebook-loading {
  from { transform: scaleX(0.2); opacity: 0.48; }
  to { transform: scaleX(1); opacity: 0.9; }
}

.notebook-workspace-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.notebook-sidebar-frame {
  position: relative;
  min-width: 0;
  height: 100%;
}

.notebook-directory-backdrop,
.notebook-directory-grabber,
.notebook-sidebar-show-label {
  display: none;
}

.notebook-sidebar {
  height: 100%;
}

.notebook-tree-shell {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 100%;
  padding-top: 6px;
  border-right: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
}

.notebook-tree-library {
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 36px;
  padding-inline: 10px 7px;
}

.notebook-tree-library-mark {
  width: 16px;
  height: 16px;
}

.notebook-tree-library strong {
  font-size: 15px;
}

.notebook-sidebar-hide {
  position: absolute;
  top: 50%;
  right: -12px;
  z-index: 22;
  display: inline-grid;
  place-items: center;
  width: 24px;
  min-width: 24px;
  height: 58px;
  min-height: 58px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
  color: var(--muted);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.94);
  visibility: hidden;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease, color 120ms ease;
}

.notebook-sidebar-hide svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.notebook-sidebar-resizer:hover + .notebook-sidebar-hide,
.notebook-sidebar-resizer:focus + .notebook-sidebar-hide,
.notebook-sidebar-hide:hover,
.notebook-sidebar-hide:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
  visibility: visible;
}

.notebook-sidebar-hide:hover,
.notebook-sidebar-hide:focus-visible {
  background: var(--panel);
  color: var(--accent-dark);
  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 1px;
}

.notebook-tree-search {
  grid-template-columns: minmax(0, 1fr) 30px 30px;
  gap: 4px;
  padding: 5px 6px 4px;
}

.notebook-tree-search input {
  min-height: 30px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--panel-soft) 86%, var(--line-soft));
}

.notebook-tree-search button,
.notebook-tree-search a {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 6px;
  font-size: 17px;
}

.notebook-tree-homebar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
  min-height: 32px;
  margin: 0 4px 2px;
  padding: 0 3px 0 2px;
  border: 1px solid transparent;
  border-radius: 6px;
}

.notebook-tree-homebar .notebook-tree-home {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 2px;
  min-height: 30px;
  margin: 0;
  padding: 0;
}

.notebook-tree-home-icon {
  width: 18px;
  height: 26px;
}

.notebook-tree-home-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.notebook-tree-home-actions {
  display: flex;
  align-items: center;
}

.notebook-tree-homebar .notebook-tree-title-action {
  width: 26px;
  height: 26px;
}

.notebook-tree-scroll {
  min-height: 0;
  max-height: none;
}

.notebook-tree-children[hidden] {
  display: none !important;
}

.notebook-tree-row {
  position: relative;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 2px;
  min-height: 32px;
  margin-inline: 4px;
  padding-inline: 2px 3px;
  cursor: pointer;
  touch-action: pan-y;
}

.notebook-tree-link,
.notebook-tree-note-link {
  min-height: 30px;
}

.notebook-tree-row.is-current {
  background: color-mix(in srgb, var(--accent-soft) 76%, var(--panel));
}

.notebook-tree-link.is-active,
.notebook-tree-note-link.is-active {
  color: var(--accent-dark);
}

.notebook-tree ul {
  padding-left: 14px;
}

.notebook-tree-toggle,
.notebook-tree-toggle-spacer {
  width: 18px;
  min-width: 18px;
  height: 26px;
  min-height: 26px;
  font-size: 15px;
}

.notebook-tree-toggle {
  border: 0;
  background: transparent;
  color: var(--muted);
  opacity: 1;
  transform: none;
}

.notebook-tree-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transform: rotate(90deg);
  transition: transform 140ms ease, color 140ms ease;
}

.notebook-tree-toggle[aria-expanded="false"] {
  transform: none;
}

.notebook-tree-toggle[aria-expanded="false"] svg {
  transform: rotate(0deg);
}

.notebook-tree-action {
  width: 26px;
  height: 26px;
  min-height: 26px;
}

.notebook-tree-actions {
  gap: 1px;
}

.notebook-tree-homebar.is-notebook-drop-inside,
.notebook-tree-row.is-notebook-drop-inside {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
}

.notebook-tree-row.is-notebook-drop-inside .notebook-tree-link::after {
  color: var(--accent-dark);
  content: "放入";
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.notebook-tree-row.is-notebook-drop-before::before,
.notebook-tree-row.is-notebook-drop-after::after {
  position: absolute;
  right: 2px;
  left: 2px;
  z-index: 4;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-soft) 70%, transparent);
  content: "";
  pointer-events: none;
}

.notebook-tree-row.is-notebook-drop-before::before {
  top: -2px;
}

.notebook-tree-row.is-notebook-drop-after::after {
  bottom: -2px;
}

.notebook-tree-drag-ghost {
  grid-template-columns: 18px minmax(0, 1fr);
  max-width: var(--notebook-sidebar-width, 300px);
  border-radius: 8px;
  opacity: 0.96;
}

.notebook-tree-drag-ghost .notebook-tree-actions {
  display: none;
}

.notebook-sidebar-resizer {
  position: absolute;
  top: 0;
  right: -6px;
  bottom: 0;
  z-index: 18;
  width: 12px;
  cursor: ew-resize;
  touch-action: none;
}

.notebook-sidebar-resizer::after {
  position: absolute;
  top: 0;
  right: 5px;
  bottom: 0;
  width: 1px;
  background: transparent;
  content: "";
  transition: width 120ms ease, background 120ms ease;
}

.notebook-sidebar-resizer:hover::after,
.notebook-sidebar-resizer:focus-visible::after,
.notebook-sidebar-is-resizing .notebook-sidebar-resizer::after {
  width: 2px;
  background: var(--accent);
}

.notebook-sidebar-resizer:focus-visible {
  outline: none;
}

.notebook-sidebar-is-resizing,
.notebook-sidebar-is-resizing * {
  cursor: ew-resize !important;
  user-select: none !important;
}

.notebook-sidebar-show {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 60;
  display: none;
  width: 24px;
  min-width: 24px;
  height: 58px;
  min-height: 58px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
  color: var(--muted);
  box-shadow: var(--shadow-soft);
  transform: translateY(-50%);
}

.notebook-sidebar-show svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.notebook-sidebar-show:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notebook-sidebar-show:hover,
.notebook-sidebar-show:focus-visible {
  background: var(--panel);
  color: var(--accent-dark);
  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 1px;
}

.notebook-layout.is-sidebar-hidden .notebook-sidebar-frame {
  overflow: hidden;
}

.notebook-main {
  min-height: 0;
  background: var(--panel);
}

.notebook-main > .notebook-home-panel,
.notebook-main > .notebook-document,
.notebook-main > .notebook-editor {
  min-height: 100%;
}

.notebook-workspace-toolbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(14px);
}

.notebook-workspace-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notebook-workspace-heading > strong {
  font-size: 16px;
  font-weight: 900;
}

.notebook-workspace-heading > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.notebook-workspace-heading > .notebook-editor-save-status {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.notebook-editor-save-status[data-state="saving"],
.notebook-editor-save-status[data-state="saved"] {
  color: var(--success);
}

.notebook-editor-save-status[data-state="dirty"],
.notebook-editor-save-status[data-state="pending"] {
  color: var(--accent-dark);
}

.notebook-editor-save-status[data-state="error"] {
  color: var(--danger);
}

.notebook-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.notebook-workspace-actions form {
  display: contents;
}

@media (min-width: 1041px) {
  .notebook-document > .notebook-workspace-toolbar,
  .notebook-editor > .notebook-editor-toolbar {
    flex-wrap: nowrap;
    gap: 16px;
    min-height: 50px;
    padding-block: 6px;
  }

  .notebook-document > .notebook-workspace-toolbar .notebook-workspace-heading {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
  }

  .notebook-document > .notebook-workspace-toolbar .notebook-breadcrumbs,
  .notebook-document > .notebook-workspace-toolbar .notebook-workspace-heading > span,
  .notebook-document > .notebook-workspace-toolbar .notebook-workspace-actions,
  .notebook-editor > .notebook-editor-toolbar .notebook-workspace-actions {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

.notebook-document-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  min-height: calc(100vh - 189px);
}

.notebook-document-canvas {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 16px clamp(34px, 5vw, 76px) 88px;
}

.notebook-document-head {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.notebook-document-head h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.notebook-document-canvas .markdown-body {
  font-size: 16px;
  line-height: 1.85;
}

.notebook-document-canvas .markdown-body h1,
.notebook-document-canvas .markdown-body h2,
.notebook-document-canvas .markdown-body h3,
.notebook-document-canvas .markdown-body h4 {
  scroll-margin-top: 84px;
}

.notebook-hierarchy-heading[hidden],
.notebook-full-text > [hidden] {
  display: none !important;
}

.notebook-hierarchy-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 7px;
}

.notebook-hierarchy-heading::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -28px;
  width: 28px;
  content: "";
}

.notebook-hierarchy-heading > h1,
.notebook-hierarchy-heading > h2,
.notebook-hierarchy-heading > h3,
.notebook-hierarchy-heading > h4 {
  min-width: 0;
  margin: 0;
}

.notebook-hierarchy-toggle,
.notebook-hierarchy-focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.notebook-hierarchy-toggle {
  position: absolute;
  top: 1px;
  left: -26px;
  z-index: 1;
  justify-content: flex-end;
  width: 26px;
  padding: 0 2px 0 0;
  opacity: 0;
  pointer-events: none;
  transition: color 140ms ease, opacity 140ms ease;
}

.notebook-hierarchy-toggle svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  transition: transform 160ms ease;
}

.notebook-hierarchy-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.notebook-hierarchy-focus {
  gap: 4px;
  padding: 3px 7px;
  font: inherit;
  font-size: 12px;
  opacity: 0.48;
  pointer-events: auto;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}

.notebook-hierarchy-focus i {
  font-size: 15px;
}

.notebook-hierarchy-heading:hover .notebook-hierarchy-toggle,
.notebook-hierarchy-toggle:focus-visible {
  opacity: 0.72;
  pointer-events: auto;
}

.notebook-hierarchy-heading:hover .notebook-hierarchy-focus,
.notebook-hierarchy-focus:focus-visible,
.notebook-hierarchy-toggle:hover,
.notebook-hierarchy-toggle:focus-visible,
.notebook-hierarchy-focus:hover,
.notebook-hierarchy-focus:focus-visible,
.notebook-hierarchy-focus[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-dark);
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .notebook-hierarchy-focus {
    opacity: 0;
    pointer-events: none;
  }

  .notebook-hierarchy-heading:hover .notebook-hierarchy-focus,
  .notebook-hierarchy-focus:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

.notebook-full-text.is-hierarchy-zoomed {
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line));
}

@media (hover: none) {
  .notebook-hierarchy-toggle {
    opacity: 0.7;
    pointer-events: auto;
  }
}

.notebook-document-rail {
  display: grid;
  align-content: start;
  gap: 26px;
  padding: 32px 22px;
  border-left: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel-soft) 78%, var(--panel));
}

.notebook-document-rail section {
  display: grid;
  gap: 12px;
}

.notebook-document-rail h2 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.notebook-document-rail p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.notebook-outline {
  display: grid;
  gap: 2px;
}

.notebook-outline a {
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.notebook-outline a.level-2 { padding-left: 18px; }
.notebook-outline a.level-3,
.notebook-outline a.level-4 { padding-left: 28px; }

.notebook-outline a:hover,
.notebook-outline a:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-dark);
  outline: none;
}

.notebook-document-meta {
  display: grid;
  gap: 10px;
  margin: 0;
}

.notebook-document-meta div {
  display: grid;
  gap: 2px;
}

.notebook-document-meta dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.notebook-document-meta dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.notebook-editor {
  min-height: calc(100vh - 126px);
  background: var(--panel);
}

.notebook-editor-canvas {
  display: grid;
  gap: 10px;
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 22px clamp(28px, 5vw, 72px) 72px;
}

.notebook-editor-title input {
  min-height: 52px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 900;
  line-height: 1.2;
  box-shadow: none;
}

.notebook-editor-title input:focus {
  border-color: var(--accent);
  box-shadow: none;
  outline: none;
}

.notebook-editor-meta {
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) minmax(330px, 1.1fr);
  gap: 18px;
  align-items: center;
}

.notebook-editor-meta-row {
  display: grid;
  grid-template-columns: 82px minmax(220px, 360px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.notebook-editor-notebook-row {
  grid-template-columns: 82px minmax(0, 1fr);
}

.notebook-editor-tags-row {
  grid-template-columns: 40px clamp(160px, 18vw, 220px) auto;
}

.notebook-editor-meta-row > label {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.notebook-editor-meta-row > input,
.notebook-editor-meta-row > select {
  width: 100%;
  min-width: 0;
}

@media (min-width: 1041px) {
  .notebook-editor-meta-row > input,
  .notebook-editor-meta-row > select {
    height: 36px;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.3;
  }
}

.notebook-editor-meta .tag-picker {
  align-items: center;
  margin: 0;
}

.notebook-editor-tags-row .tag-picker {
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 180px;
  overflow-x: auto;
  padding-bottom: 0;
  scrollbar-width: none;
}

.notebook-editor-tags-row .tag-choice {
  flex: 0 0 auto;
  white-space: nowrap;
}

.notebook-editor-tags-row .tag-picker::-webkit-scrollbar {
  display: none;
}

.notebook-editor-actions {
  gap: 4px;
}

.notebook-editor-actions .notebook-editor-action {
  min-width: 0;
}

.notebook-preview-dialog {
  width: min(960px, calc(100% - 32px));
  max-width: none;
  height: min(86vh, 820px);
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(24, 33, 50, 0.24);
}

.notebook-preview-dialog::backdrop {
  background: rgba(24, 33, 50, 0.42);
  backdrop-filter: blur(3px);
}

.notebook-image-viewer {
  width: min(1200px, calc(100% - 32px));
  max-width: none;
  height: min(92vh, 940px);
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  color: var(--text);
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.36);
}

.notebook-image-viewer::backdrop {
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(5px);
}

.notebook-image-viewer-shell {
  position: relative;
  display: grid;
  place-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 54px 20px 18px;
}

.notebook-image-viewer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

.notebook-image-viewer img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 100px);
  border-radius: 8px;
  object-fit: contain;
}

.notebook-image-viewer p {
  max-width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.notebook-preview-dialog.notebook-preview-drawer {
  width: min(640px, calc(100% - 16px));
  height: 100vh;
  max-height: 100vh;
  margin: 0 0 0 auto;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 14px 0 0 14px;
}

.notebook-preview-drawer[open] {
  animation: notebook-preview-drawer-in 180ms ease-out both;
}

.notebook-preview-drawer.is-closing {
  animation: notebook-preview-drawer-out 180ms ease-in both;
}

@keyframes notebook-preview-drawer-in {
  from {
    opacity: 0.7;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes notebook-preview-drawer-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0.7;
    transform: translateX(100%);
  }
}

.notebook-preview-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.notebook-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}

.notebook-preview-toolbar > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notebook-preview-toolbar h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
}

.notebook-preview-toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.notebook-preview-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--panel);
}

.notebook-preview-canvas {
  min-height: 100%;
}

.notebook-markdown-guide-content {
  padding: 16px;
}

.notebook-markdown-guide-content .markdown-guide-list {
  margin-bottom: 0;
}

@supports (height: 100dvh) {
  .notebook-preview-dialog {
    height: min(86dvh, 820px);
    max-height: calc(100dvh - 32px);
  }

  .notebook-preview-dialog.notebook-preview-drawer {
    height: 100dvh;
    max-height: 100dvh;
  }

  .notebook-image-viewer {
    height: min(92dvh, 940px);
    max-height: calc(100dvh - 32px);
  }

  .notebook-image-viewer img {
    max-height: calc(92dvh - 100px);
  }
}

.notebook-editor-body {
  display: grid;
  gap: 8px;
}

.notebook-markdown-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel-soft) 78%, var(--panel));
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.notebook-markdown-tool-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}

.notebook-markdown-tool-group + .notebook-markdown-tool-group {
  margin-left: 3px;
  padding-left: 7px;
  border-left: 1px solid var(--line-soft);
}

.notebook-markdown-toolbar button {
  flex: 0 0 auto;
  width: auto;
  min-width: 30px;
  min-height: 28px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.notebook-markdown-toolbar button:hover,
.notebook-markdown-toolbar button:focus-visible {
  border-color: var(--line);
  background: var(--panel);
  color: var(--accent-dark);
}

.notebook-editor-body-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.notebook-editor-body-head label {
  color: var(--text);
}

.notebook-editor-body-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.notebook-editor-body-preview,
.notebook-editor-image-button {
  min-height: 28px;
  padding: 3px 9px;
  font-size: 13px;
  font-weight: 800;
}

.notebook-editor-body-head a {
  color: var(--accent-dark);
  white-space: nowrap;
}

.notebook-image-upload-status {
  min-height: 18px;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.notebook-image-upload-status.is-error {
  color: var(--danger);
}

.notebook-editor-body textarea {
  min-height: 52vh;
  resize: vertical;
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--panel-soft) 82%, var(--panel));
  font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.85;
}

@media (min-width: 1041px) {
  .notebook-editor-body textarea[data-notebook-auto-resize-ready="true"] {
    overflow-y: hidden;
    resize: none;
  }
}

.notebook-editor-body textarea:focus,
.notebook-editor-body textarea:focus-visible {
  border-color: var(--line-soft);
  box-shadow: none;
  outline: none;
}

.notebook-folder-editor-canvas {
  width: min(100%, 680px);
  padding-top: 56px;
}

.notebook-folder-help {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
}

.notebook-home-panel {
  gap: 0;
  min-height: 100%;
  padding: 0;
  align-content: start;
  background: var(--panel);
}

.notebook-home-head {
  padding: 12px clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--line-soft);
}

.notebook-home-head > div:first-child {
  display: grid;
  gap: 3px;
  max-width: 760px;
}

.notebook-home-kicker {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.notebook-home-head h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.2;
}

.notebook-home-head p {
  max-width: 680px;
  color: var(--muted);
  font-weight: 600;
}

.notebook-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.notebook-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 28px;
  padding: 16px clamp(28px, 4vw, 48px) 28px;
}

.notebook-home-recent,
.notebook-home-overview {
  display: grid;
  align-content: start;
  gap: 14px;
}

.notebook-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notebook-section-heading h3,
.notebook-home-overview h3 {
  margin: 0;
  font-size: 16px;
}

.notebook-section-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.notebook-home-note {
  padding: 13px 14px;
  border-color: transparent;
  background: var(--panel-soft);
}

.notebook-home-overview {
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-soft);
}

.notebook-home-overview dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
}

.notebook-home-overview dl div {
  padding: 12px;
  border-radius: 8px;
  background: var(--panel);
}

.notebook-home-overview dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.notebook-home-overview dd {
  margin: 3px 0 0;
  font-size: 24px;
  font-weight: 900;
}

.notebook-home-overview p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.notebook-home-links {
  display: grid;
  gap: 6px;
}

.notebook-home-links a {
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 800;
}

@media (min-width: 1041px) {
  .notebook-layout {
    grid-template-columns: minmax(0, var(--notebook-sidebar-width)) minmax(0, 1fr);
  }

  .notebook-layout.is-sidebar-hidden {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .notebook-sidebar-show {
    position: absolute;
  }

  .notebook-sidebar {
    position: relative;
    top: auto;
  }
}

@media (min-width: 1041px) {
  .notebook-row-actions {
    grid-template-columns: minmax(68px, 84px);
    min-width: 84px;
  }
}

@media (max-width: 1279px) {
  .notebook-document-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .notebook-document-rail {
    display: none;
  }
}

@media (max-width: 1040px) {
  .notebook-layout {
    border-radius: 10px;
  }

  .notebook-layout.is-sidebar-hidden .notebook-sidebar-frame {
    display: none;
  }

  .notebook-sidebar-resizer {
    display: none;
  }

  .notebook-sidebar-hide {
    position: absolute;
    top: 10px;
    right: 8px;
    z-index: 22;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  .notebook-sidebar-hide:hover,
  .notebook-sidebar-hide:focus-visible {
    background: var(--line-soft);
    outline: none;
    transform: none;
  }

  .notebook-tree-library {
    padding-right: 42px;
  }

  .notebook-tree-shell {
    min-height: 0;
    max-height: 42vh;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .notebook-tree-scroll {
    max-height: 28vh;
  }

  .notebook-main,
  .notebook-home-panel,
  .notebook-editor {
    min-height: auto;
  }
}

@media (max-width: 1040px) {
  body.notebook-directory-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .shell-notebooks {
    width: min(100% - 16px, 920px);
    min-height: 100vh;
    padding-top: 12px;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .shell-notebooks .topbar {
    width: min(920px, calc(100% - 4px));
    margin-bottom: 12px;
  }

  .notebook-layout {
    display: block;
    min-height: 0;
    border-radius: 8px;
    overflow: visible;
  }

  .notebook-directory-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(2px);
  }

  .notebook-directory-backdrop:not([hidden]) {
    display: block;
  }

  .notebook-sidebar-frame {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: var(--app-mobile-sheet-height, min(82vh, 720px));
    max-height: var(--app-mobile-overlay-max-height, calc(100vh - 48px));
    padding-top: 16px;
    border: 1px solid var(--line-soft);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--panel);
    box-shadow: 0 -20px 50px rgba(15, 23, 42, 0.22);
    opacity: 0;
    pointer-events: none;
    transform: translateY(104%);
    visibility: hidden;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease, visibility 220ms ease;
  }

  @supports (height: 100dvh) {
    .notebook-sidebar-frame {
      height: var(--app-mobile-sheet-height, min(82dvh, 720px));
      max-height: var(--app-mobile-overlay-max-height, calc(100dvh - 48px));
    }
  }

  .notebook-layout.is-mobile-directory-open .notebook-sidebar-frame {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }

  .notebook-directory-grabber {
    position: absolute;
    top: 7px;
    left: 50%;
    z-index: 2;
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--line);
    content: "";
    pointer-events: none;
    transform: translateX(-50%);
  }

  .notebook-sidebar {
    height: 100%;
  }

  .notebook-tree-shell {
    height: 100%;
    min-height: 0;
    max-height: none;
    border-right: 0;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--panel);
  }

  .notebook-tree-scroll {
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }

  .notebook-sidebar-hide {
    top: 18px;
    right: 12px;
    z-index: 95;
  }

  .notebook-sidebar-show {
    top: auto;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: auto;
    z-index: 70;
    gap: 6px;
    width: auto;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding: 0 14px 0 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line-soft));
    border-radius: 999px;
    background: var(--panel);
    color: var(--accent-dark);
    box-shadow: 0 10px 28px rgba(24, 33, 50, 0.18);
    transform: none;
  }

  .notebook-sidebar-show svg {
    width: 17px;
    height: 17px;
  }

  .notebook-sidebar-show-label {
    display: inline;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
  }

  .notebook-tree-search {
    grid-template-columns: minmax(0, 1fr) 30px 30px;
  }

  .notebook-workspace-toolbar {
    position: static;
    align-items: flex-start;
    padding: 10px 12px;
  }

  .notebook-workspace-actions {
    width: 100%;
  }

  .notebook-workspace-actions .button,
  .notebook-workspace-actions button {
    flex: 1 1 auto;
  }

  .notebook-editor-toolbar {
    align-items: center;
  }

  .notebook-editor-toolbar .notebook-workspace-actions {
    width: auto;
  }

  .notebook-editor-toolbar .notebook-workspace-actions .button,
  .notebook-editor-toolbar .notebook-workspace-actions button {
    flex: 0 0 auto;
  }

  .notebook-preview-dialog {
    width: calc(100% - 16px);
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
    border-radius: 14px;
  }

  .notebook-image-viewer {
    width: calc(100% - 16px);
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
  }

  .notebook-image-viewer-shell {
    padding: 52px 10px 12px;
  }

  .notebook-image-viewer img {
    max-height: calc(100vh - 98px);
  }

  .notebook-preview-toolbar {
    padding: 10px 12px;
  }

  .notebook-markdown-guide-content {
    padding: 12px;
  }

  @supports (height: 100dvh) {
    .notebook-preview-dialog {
      height: calc(100dvh - 24px);
      max-height: calc(100dvh - 24px);
    }

    .notebook-image-viewer {
      height: calc(100dvh - 24px);
      max-height: calc(100dvh - 24px);
    }

    .notebook-image-viewer img {
      max-height: calc(100dvh - 98px);
    }
  }

  .notebook-document-canvas {
    padding: 20px 18px 58px;
  }

  .notebook-hierarchy-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .notebook-hierarchy-toggle {
    left: -24px;
    width: 24px;
    opacity: 0.7;
    pointer-events: auto;
  }

  .notebook-hierarchy-focus {
    padding-inline: 6px;
    opacity: 1;
    pointer-events: auto;
  }

  .notebook-editor-canvas {
    padding: 20px 18px 58px;
  }

  .notebook-document-head h1,
  .notebook-editor-title input {
    font-size: 28px;
  }

  .notebook-editor-meta-row {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .notebook-editor-tags-row {
    grid-template-columns: 50px minmax(120px, 1fr) minmax(40px, 96px);
    gap: 8px;
  }

  .notebook-editor-meta .tag-picker {
    grid-column: auto;
  }

  .notebook-editor-tags-row .tag-picker {
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 96px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .notebook-editor-tags-row .tag-picker::-webkit-scrollbar {
    display: none;
  }

  .notebook-editor-meta,
  .notebook-home-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .notebook-home-head,
  .notebook-home-grid {
    padding: 24px 18px;
  }

  .notebook-home-head {
    align-items: flex-start;
  }

  .notebook-home-actions {
    width: 100%;
  }

  .notebook-home-actions .button {
    flex: 1 1 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .notebook-preview-drawer[open],
  .notebook-preview-drawer.is-closing {
    opacity: 1;
    transform: translateX(0);
    animation: none !important;
  }
}

/* Goal desktop spatial studio */

.module-nav-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}

.desktop-module-nav a::before,
.module-nav a::before {
  display: none !important;
  content: none !important;
}

.doing-now-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 18px;
  line-height: 1;
}

.goal-category-index,
.focus-rail-date {
  display: none;
}

@media (min-width: 1041px) {
  html:has(.shell-goals),
  body:has(.shell-goals) {
    background: #f1efe8;
  }

  .shell-goals {
    --goal-studio-bg: #f1efe8;
    --goal-studio-surface: #f7f5ef;
    --goal-studio-surface-soft: #f3f1eb;
    --goal-studio-ink: #20241f;
    --goal-studio-muted: #777a72;
    --goal-studio-line: #dcd9d0;
    --goal-studio-line-strong: #cbc7bc;
    --goal-studio-accent: #245b43;
    --goal-studio-accent-soft: #e6ebe4;
    --goal-studio-high: #dc2626;
    --goal-studio-medium: #2563eb;
    --goal-studio-low: #8a929d;
    width: min(1440px, calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 16px 0 34px;
    color: var(--goal-studio-ink);
    font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  }

  .shell-goals .topbar {
    grid-template-columns: minmax(110px, 1fr) auto;
    gap: 28px;
    min-height: 68px;
    margin: 0;
    padding: 0 18px 14px;
    border-bottom-color: var(--goal-studio-line);
  }

  .shell-goals .module-page-title {
    color: var(--goal-studio-ink);
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
  }

  .shell-goals .topbar-side {
    flex-direction: row;
    gap: 12px;
  }

  .shell-goals .desktop-module-nav,
  .shell-goals .topbar-system,
  .shell-goals .top-actions {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell-goals .desktop-module-nav {
    gap: 4px;
    padding: 0;
  }

  .shell-goals .desktop-module-nav a {
    position: relative;
    gap: 7px;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #575b55;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
  }

  .shell-goals .desktop-module-nav a::after {
    position: absolute;
    right: 10px;
    bottom: 0;
    left: 10px;
    height: 2px;
    background: transparent;
    content: "";
  }

  .shell-goals .desktop-module-nav a:hover,
  .shell-goals .desktop-module-nav a:focus-visible {
    background: transparent;
    color: var(--goal-studio-accent);
    box-shadow: none;
    outline: none;
    transform: none;
  }

  .shell-goals .desktop-module-nav a.is-active {
    background: transparent;
    color: var(--goal-studio-accent);
    box-shadow: none;
  }

  .shell-goals .desktop-module-nav a.is-active::after {
    background: var(--goal-studio-accent);
  }

  .shell-goals .topbar-system {
    padding: 0;
  }

  .shell-goals .top-actions {
    gap: 4px;
    padding: 0;
  }

  .shell-goals .top-actions-system {
    padding-left: 0;
    border-left: 0;
  }

  .shell-goals .top-actions .button,
  .shell-goals .top-actions button {
    min-height: 34px;
    padding: 7px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #666a63;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
  }

  .shell-goals .top-actions .button:hover,
  .shell-goals .top-actions button:hover,
  .shell-goals .top-actions .button:focus-visible,
  .shell-goals .top-actions button:focus-visible,
  .shell-goals .top-actions button[aria-pressed="true"] {
    background: var(--goal-studio-accent-soft);
    color: var(--goal-studio-accent);
    outline: none;
  }

  .shell-goals .top-actions .top-action-primary,
  .shell-goals .top-actions .top-action-primary:hover,
  .shell-goals .top-actions .top-action-primary:focus-visible {
    min-width: 72px;
    padding-inline: 16px;
    background: var(--goal-studio-accent);
    color: #ffffff;
    box-shadow: 0 7px 16px rgba(36, 91, 67, 0.14);
  }

  .shell-goals .focus-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 300px;
    gap: 0;
    align-items: stretch;
    min-height: calc(100vh - 102px);
    border-bottom: 1px solid var(--goal-studio-line);
    background: var(--goal-studio-surface);
  }

  .shell-goals .goal-category-index {
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 2px;
    padding: 27px 18px 28px;
    border-right: 1px solid var(--goal-studio-line);
    background: var(--goal-studio-surface-soft);
  }

  .shell-goals .goal-category-index-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 20px;
  }

  .shell-goals .goal-category-index-head > p {
    margin: 0;
    color: var(--goal-studio-muted);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .shell-goals .goal-sections-toggle-sidebar {
    flex: 0 0 30px;
    width: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--goal-studio-muted);
  }

  .shell-goals .goal-sections-toggle-sidebar:hover,
  .shell-goals .goal-sections-toggle-sidebar:focus-visible {
    background: var(--goal-studio-accent-soft);
    color: var(--goal-studio-accent);
    outline: none;
  }

  .shell-goals .goal-sections-toggle-sidebar .goal-sections-toggle-icon {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
  }

  .shell-goals .goal-category-index-link {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
    min-height: 92px;
    padding: 16px 14px 14px 20px;
    color: #60645d;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
  }

  .shell-goals .goal-category-index-link::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: transparent;
    content: "";
  }

  .shell-goals .goal-category-index-link > span {
    grid-column: 1;
    color: #8b8d86;
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
  }

  .shell-goals .goal-category-index-link > strong {
    grid-column: 1;
    color: inherit;
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
  }

  .shell-goals .goal-category-index-link > small {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    min-width: 22px;
    color: #9b9d96;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
  }

  .shell-goals .goal-category-index-link:hover,
  .shell-goals .goal-category-index-link:focus-visible,
  .shell-goals .goal-category-index-link.is-active {
    background: #e7e8e1;
    color: var(--goal-studio-ink);
    outline: none;
  }

  .shell-goals .goal-category-index-link.is-active::before {
    background: var(--goal-studio-accent);
  }

  .shell-goals .goal-category-index-link.is-active > span {
    color: var(--goal-studio-accent);
  }

  .shell-goals .goal-overview {
    min-width: 0;
    padding: 21px 32px 48px;
    background: var(--goal-studio-surface);
  }

  .shell-goals .goal-section {
    margin: 0;
    scroll-margin-top: 18px;
  }

  .shell-goals .goal-section details,
  .shell-goals .goal-section.is-primary details {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .shell-goals .goal-section > details > summary {
    min-height: 48px;
    padding: 10px 0;
    border-bottom: 1px solid var(--goal-studio-line);
    color: var(--goal-studio-ink);
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 20px;
    font-weight: 600;
  }

  .shell-goals .goal-section.is-primary > details > summary {
    min-height: 48px;
    padding: 10px 0;
    font-size: 17px;
  }

  .shell-goals .goal-section > details > summary::after {
    grid-column: 3;
    color: var(--goal-studio-muted);
    font-family: remixicon;
    font-size: 17px;
    font-weight: 400;
    content: "\ea4e";
  }

  .shell-goals .goal-section > details[open] > summary::after {
    content: "\ea78";
  }

  .shell-goals .goal-section > details > summary {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
  }

  .shell-goals .goal-section > details > summary strong {
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--goal-studio-muted);
    font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
  }

  .shell-goals .goal-section:not(.is-primary) {
    border-bottom: 1px solid var(--goal-studio-line);
  }

  .shell-goals .goal-section:not(.is-primary) > details > summary {
    border-bottom: 0;
    font-size: 17px;
  }

  .shell-goals .goal-section:not(.is-primary) > details[open] > summary {
    border-bottom: 1px solid var(--goal-studio-line);
  }

  .shell-goals .goal-list {
    gap: 0;
    padding: 0;
  }

  .shell-goals .goal-row {
    --priority-color: var(--goal-studio-medium);
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    min-height: 142px;
    padding: 24px 0 22px 30px;
    border-top: 0;
    border-bottom: 1px solid var(--goal-studio-line);
    background: transparent;
    box-shadow: none;
  }

  .shell-goals .goal-row:last-of-type {
    border-bottom: 0;
  }

  .shell-goals .goal-row.is-current {
    background: transparent;
  }

  .shell-goals .goal-row::before {
    top: 31px;
    bottom: auto;
    left: 0;
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: var(--priority-color);
  }

  .shell-goals .goal-row.priority-row-high {
    --priority-color: var(--goal-studio-high);
  }

  .shell-goals .goal-row.priority-row-medium {
    --priority-color: var(--goal-studio-medium);
  }

  .shell-goals .goal-row.priority-row-low {
    --priority-color: var(--goal-studio-low);
  }

  .shell-goals .goal-row:hover,
  .shell-goals .goal-row:focus-within,
  .shell-goals .goal-row.is-current:hover,
  .shell-goals .goal-row.is-current:focus-within {
    background: #efeee8;
    box-shadow: none;
  }

  .shell-goals .goal-row-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .shell-goals .goal-row-main > h2 {
    grid-row: 1;
    color: var(--goal-studio-ink);
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
  }

  .shell-goals .goal-row-main > p {
    grid-row: 2;
    margin: 9px 0 0;
    color: #6e716a;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
  }

  .shell-goals .goal-row-main > .meta-row {
    grid-row: 3;
    gap: 6px 16px;
    margin: 16px 0 0;
    color: var(--goal-studio-muted);
    font-size: 12px;
  }

  .shell-goals .goal-row-main > .meta-row > span:last-child {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .shell-goals .priority-badge,
  .shell-goals .status,
  .shell-goals .tag {
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
  }

  .shell-goals .priority-high {
    color: var(--goal-studio-high);
  }

  .shell-goals .priority-medium {
    color: var(--goal-studio-medium);
  }

  .shell-goals .priority-low {
    color: var(--goal-studio-low);
  }

  .shell-goals .status,
  .shell-goals .tag {
    color: var(--goal-studio-accent);
  }

  .shell-goals .doing-now-icon {
    width: 20px;
    height: 20px;
    color: var(--goal-studio-high);
  }

  .shell-goals .goal-inline-detail[open] > summary {
    margin-bottom: 16px;
  }

  .shell-goals .inline-edit-panel {
    border-color: var(--goal-studio-line);
    border-radius: 4px;
    background: #f1f0ea;
  }

  .shell-goals .goal-drag-handle {
    top: 20px;
    left: 2px;
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    border-color: var(--goal-studio-line-strong);
    border-radius: 4px;
    background: var(--goal-studio-surface);
    color: var(--goal-studio-accent);
    font-size: 17px;
  }

  .shell-goals .focus-rail {
    position: relative;
    top: auto;
    display: grid;
    align-content: start;
    gap: 0;
    min-width: 0;
    padding: 0 22px 30px;
    border-left: 1px solid var(--goal-studio-line);
    background: #f5f3ed;
  }

  .shell-goals .focus-rail-date {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: baseline;
    padding: 31px 0 25px;
    border-bottom: 1px solid var(--goal-studio-line);
  }

  .shell-goals .focus-rail-date time {
    color: var(--goal-studio-accent);
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 24px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .shell-goals .focus-rail-date span {
    color: var(--goal-studio-accent);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  .shell-goals .rail-panel,
  .shell-goals .rail-panel.rail-overview {
    gap: 14px;
    padding: 26px 0;
    border: 0;
    border-bottom: 1px solid var(--goal-studio-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell-goals .rail-panel:last-child {
    border-bottom: 0;
  }

  .shell-goals .rail-panel-head h2 {
    color: var(--goal-studio-ink);
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 17px;
    font-weight: 600;
  }

  .shell-goals .rail-panel-head span,
  .shell-goals .rail-panel-head a,
  .shell-goals .rail-hint,
  .shell-goals .rail-empty {
    color: var(--goal-studio-muted);
    font-size: 11px;
    font-weight: 700;
  }

  .shell-goals .rail-overview .rail-panel-head span {
    display: none;
  }

  .shell-goals .rail-panel-head a {
    color: var(--goal-studio-accent);
  }

  .shell-goals .rail-quote-list,
  .shell-goals .rail-note-list {
    gap: 0;
  }

  .shell-goals .rail-quote,
  .shell-goals .rail-note {
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid #e3e0d8;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell-goals .rail-quote:first-child,
  .shell-goals .rail-note:first-child {
    padding-top: 0;
  }

  .shell-goals .rail-quote:last-child,
  .shell-goals .rail-note:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .shell-goals .rail-quote[data-hover-tooltip]:hover,
  .shell-goals .rail-quote[data-hover-tooltip]:focus-visible,
  .shell-goals .rail-note:hover,
  .shell-goals .rail-note:focus-within {
    border-color: #d8d5cc;
    background: transparent;
    box-shadow: none;
  }

  .shell-goals .rail-quote p,
  .shell-goals .rail-note p {
    color: #666962;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
  }

  .shell-goals .rail-quote cite {
    margin-top: 4px;
    color: #94968f;
    font-size: 11px;
    font-weight: 600;
  }

  .shell-goals .rail-note a {
    gap: 7px;
    padding: 0;
  }

  .shell-goals .rail-note .meta-row {
    margin-bottom: 0;
  }

  .shell-goals .mini-calendar {
    gap: 10px;
  }

  .shell-goals .mini-calendar-title {
    color: var(--goal-studio-muted);
    font-size: 12px;
    font-weight: 700;
  }

  .shell-goals .mini-calendar-weekdays,
  .shell-goals .mini-calendar-grid {
    gap: 2px;
  }

  .shell-goals .mini-calendar-day {
    min-height: 30px;
    border-radius: 4px;
    color: #4d514b;
    font-size: 11px;
    font-weight: 600;
  }

  .shell-goals .mini-calendar-day.is-today {
    border-color: var(--goal-studio-accent);
    background: var(--goal-studio-accent);
    color: #ffffff;
  }

  .shell-goals .mini-calendar-day .priority-dot {
    width: 4px;
    height: 4px;
  }

  .goals-simple-mode .shell-goals .goal-row {
    min-height: 48px;
    padding: 0 0 0 30px;
  }

  .goals-simple-mode .shell-goals .goal-row::before {
    top: 23px;
  }

  .goals-simple-mode .shell-goals .goal-row-main {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    margin: 0;
    padding: 8px 0;
  }

  .goals-simple-mode .shell-goals .goal-row-main > h2 {
    grid-column: 1;
    grid-row: 1;
    font-size: 16px;
  }

  .goals-simple-mode .shell-goals .goal-row-main > .meta-row {
    grid-column: 2;
    grid-row: 1;
    gap: 4px;
    margin: 0;
  }

  .goals-simple-mode .shell-goals .goal-row-main > p {
    display: none;
  }
}

@media (min-width: 1041px) and (max-width: 1240px) {
  .shell-goals .focus-layout {
    grid-template-columns: 164px minmax(0, 1fr) 276px;
  }

  .shell-goals .goal-category-index {
    padding-inline: 14px;
  }

  .shell-goals .goal-category-index-link {
    min-height: 82px;
    padding-left: 16px;
  }

  .shell-goals .goal-category-index-link > span {
    font-size: 30px;
  }

  .shell-goals .goal-overview {
    padding-inline: 24px;
  }

  .shell-goals .focus-rail {
    padding-inline: 18px;
  }

  .shell-goals .desktop-module-nav a {
    padding-inline: 8px;
  }

  .shell-goals .top-actions .button,
  .shell-goals .top-actions button {
    padding-inline: 7px;
  }
}

/* Goals home: Swiss Archive */

@media (min-width: 1041px) {
  html:has(.shell-goals),
  body:has(.shell-goals) {
    background: #f5f4f0;
  }

  .shell-goals {
    --goal-studio-bg: #f5f4f0;
    --goal-studio-surface: #fbfaf7;
    --goal-studio-surface-soft: #f5f4f0;
    --goal-studio-ink: #15171a;
    --goal-studio-ink-soft: #34383d;
    --goal-studio-muted: #6c7178;
    --goal-studio-faint: #979ba0;
    --goal-studio-line: #d2d3d0;
    --goal-studio-line-strong: #202226;
    --goal-studio-accent: #1455cc;
    --goal-studio-accent-hover: #0b43a8;
    --goal-studio-accent-soft: #e8eef9;
    --goal-studio-high: #d1192e;
    --goal-studio-medium: #1455cc;
    --goal-studio-low: #8d9298;
    width: min(1440px, calc(100% - 32px));
    min-height: 100vh;
    padding: 0 0 32px;
    color: var(--goal-studio-ink);
    font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-variant-numeric: lining-nums tabular-nums;
  }

  .shell-goals .topbar {
    grid-template-columns: minmax(112px, 1fr) auto;
    gap: 32px;
    min-height: 82px;
    padding: 0 12px;
    border-bottom: 2px solid var(--goal-studio-line-strong);
    background: var(--goal-studio-surface);
  }

  .shell-goals .topbar-title {
    align-self: center;
  }

  .shell-goals .module-page-title {
    color: var(--goal-studio-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.02em;
  }

  .shell-goals .module-page-meta,
  .shell-goals .topbar-system,
  .shell-goals .top-actions {
    display: none;
  }

  .shell-goals .topbar-side {
    flex-direction: row;
    gap: 18px;
  }

  .shell-goals .desktop-module-nav {
    order: 1;
    gap: 22px;
    padding: 0;
  }

  .shell-goals .account-menu {
    order: 2;
  }

  .shell-goals .desktop-module-nav .module-nav-icon {
    display: none;
  }

  .shell-goals .desktop-module-nav a {
    min-height: 50px;
    padding: 13px 2px 14px;
    color: #3f4246;
    font-size: 14px;
    font-weight: 600;
  }

  .shell-goals .desktop-module-nav a::after {
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
  }

  .shell-goals .desktop-module-nav a:hover,
  .shell-goals .desktop-module-nav a:focus-visible,
  .shell-goals .desktop-module-nav a.is-active {
    color: var(--goal-studio-ink);
  }

  .shell-goals .desktop-module-nav a.is-active::after {
    background: var(--goal-studio-accent);
  }

  .shell-goals .desktop-module-nav a:focus-visible,
  .shell-goals .account-menu > summary:focus-visible {
    outline: 2px solid #7aa4ff;
    outline-offset: 3px;
  }

  .shell-goals .account-menu > summary {
    min-height: 40px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--goal-studio-muted);
    box-shadow: none;
  }

  .shell-goals .focus-layout {
    grid-template-columns:
      clamp(228px, 19vw, 272px)
      minmax(520px, 1fr)
      clamp(268px, 22vw, 320px);
    min-height: calc(100vh - 114px);
    border-bottom: 1px solid var(--goal-studio-line);
    background: var(--goal-studio-surface);
  }

  .shell-goals .goal-category-index {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 30px 28px 34px;
    border-right: 1px solid var(--goal-studio-line);
    background: var(--goal-studio-surface);
  }

  .shell-goals .goal-category-index-head {
    min-height: 46px;
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--goal-studio-line-strong);
  }

  .shell-goals .goal-category-index-head > p,
  .shell-goals .goal-category-index-foot > p {
    color: var(--goal-studio-ink);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .shell-goals .goal-sections-toggle-sidebar {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 2px;
    color: var(--goal-studio-ink);
  }

  .shell-goals .goal-sections-toggle-sidebar:hover,
  .shell-goals .goal-sections-toggle-sidebar:focus-visible {
    background: var(--goal-studio-accent-soft);
    color: var(--goal-studio-accent);
    outline: 2px solid #7aa4ff;
    outline-offset: 2px;
  }

  .shell-goals .goal-category-index-link {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 66px;
    padding: 0;
    border-bottom: 0;
    color: var(--goal-studio-ink);
  }

  .shell-goals .goal-category-index-link::before {
    display: none;
  }

  .shell-goals .goal-category-index-link > span {
    grid-row: 1;
    grid-column: 1;
    color: var(--goal-studio-ink);
    font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.05em;
  }

  .shell-goals .goal-category-index-link > strong {
    grid-row: 1;
    grid-column: 2;
    color: inherit;
    font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
  }

  .shell-goals .goal-category-index-link > small {
    grid-row: 1;
    grid-column: 3;
    color: var(--goal-studio-muted);
    font-size: 12px;
    font-weight: 500;
  }

  .shell-goals .goal-category-index-link:hover,
  .shell-goals .goal-category-index-link:focus-visible,
  .shell-goals .goal-category-index-link.is-active {
    background: transparent;
    color: var(--goal-studio-ink);
  }

  .shell-goals .goal-category-index-link:hover > span,
  .shell-goals .goal-category-index-link:focus-visible > span,
  .shell-goals .goal-category-index-link.is-active > span {
    color: var(--goal-studio-accent);
  }

  .shell-goals .goal-category-index-link:focus-visible {
    outline: 2px solid #7aa4ff;
    outline-offset: 3px;
  }

  .shell-goals .goal-category-index-foot {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--goal-studio-line-strong);
  }

  .shell-goals .goal-category-index-foot > p {
    margin: 0;
  }

  .shell-goals .goal-category-index-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--goal-studio-line);
    border-bottom: 1px solid var(--goal-studio-line);
  }

  .shell-goals .goal-category-index-tools .button,
  .shell-goals .goal-category-index-tools button {
    min-height: 40px;
    padding: 7px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--goal-studio-ink-soft);
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
  }

  .shell-goals .goal-category-index-tools > :first-child {
    border-right: 1px solid var(--goal-studio-line);
  }

  .shell-goals .goal-category-index-tools .button:hover,
  .shell-goals .goal-category-index-tools button:hover,
  .shell-goals .goal-category-index-tools .button:focus-visible,
  .shell-goals .goal-category-index-tools button:focus-visible,
  .shell-goals .goal-category-index-tools button[aria-pressed="true"] {
    background: var(--goal-studio-accent-soft);
    color: var(--goal-studio-accent);
    outline: none;
  }

  .shell-goals .goal-category-index-foot > a {
    min-height: 32px;
    padding: 6px 2px;
    color: var(--goal-studio-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }

  .shell-goals .goal-category-index-foot > a:hover,
  .shell-goals .goal-category-index-foot > a:focus-visible {
    color: var(--goal-studio-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .shell-goals .goal-overview {
    min-width: 0;
    padding: 0 48px 56px;
    background: var(--goal-studio-surface);
  }

  .shell-goals .goal-editorial-hero {
    display: flex;
    gap: 36px;
    align-items: center;
    justify-content: space-between;
    min-height: 170px;
    padding: 34px 0 28px;
    border-bottom: 2px solid var(--goal-studio-line-strong);
  }

  .shell-goals .goal-editorial-date {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .shell-goals .goal-editorial-date > span {
    color: var(--goal-studio-ink);
    font-size: 13px;
    font-weight: 700;
  }

  .shell-goals .goal-editorial-date > div {
    display: flex;
    gap: 14px;
    align-items: baseline;
  }

  .shell-goals .goal-editorial-date time {
    color: var(--goal-studio-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: clamp(58px, 5.6vw, 76px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.04em;
    white-space: nowrap;
  }

  .shell-goals .goal-editorial-date small {
    color: var(--goal-studio-ink-soft);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  .shell-goals .goal-editorial-actions {
    display: flex;
    gap: 14px;
    align-items: center;
  }

  .shell-goals .goal-editorial-actions .button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 20px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: none;
  }

  .shell-goals .goal-editorial-primary {
    border-color: var(--goal-studio-accent);
    background: var(--goal-studio-accent);
    color: #ffffff;
  }

  .shell-goals .goal-editorial-primary:hover,
  .shell-goals .goal-editorial-primary:focus-visible {
    border-color: var(--goal-studio-accent-hover);
    background: var(--goal-studio-accent-hover);
  }

  .shell-goals .goal-editorial-calendar {
    border-color: #aeb1b4;
    background: transparent;
    color: var(--goal-studio-ink);
  }

  .shell-goals .goal-editorial-calendar:hover,
  .shell-goals .goal-editorial-calendar:focus-visible {
    border-color: var(--goal-studio-accent);
    background: var(--goal-studio-accent-soft);
    color: var(--goal-studio-accent);
  }

  .shell-goals .goal-editorial-actions .button:focus-visible {
    outline: 2px solid #7aa4ff;
    outline-offset: 3px;
  }

  .shell-goals .goal-editorial-column-head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 112px;
    gap: 24px;
    align-items: center;
    min-height: 54px;
    border-bottom: 1px solid var(--goal-studio-line);
    color: var(--goal-studio-ink-soft);
    font-size: 12px;
    font-weight: 700;
  }

  .shell-goals .goal-editorial-column-head > :last-child {
    text-align: right;
  }

  .shell-goals .goal-reorder-status {
    top: 94px;
  }

  .shell-goals .goal-section {
    margin: 0;
    scroll-margin-top: 18px;
  }

  .shell-goals .goal-section.is-primary > details > summary {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .shell-goals .goal-section:not(.is-primary) {
    border-bottom: 1px solid var(--goal-studio-line);
  }

  .shell-goals .goal-section:not(.is-primary) > details > summary {
    min-height: 62px;
    padding: 18px 0;
    border-bottom: 0;
    color: var(--goal-studio-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 18px;
    font-weight: 600;
  }

  .shell-goals .goal-section:not(.is-primary) > details[open] > summary {
    border-bottom: 1px solid var(--goal-studio-line);
  }

  .shell-goals .goal-section > details > summary strong {
    color: var(--goal-studio-muted);
    font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 12px;
  }

  .shell-goals .goal-list {
    gap: 0;
    padding: 0;
    counter-reset: goal-row-folio;
  }

  .shell-goals .goal-row {
    --priority-color: var(--goal-studio-medium);
    min-height: 108px;
    padding: 0;
    border-bottom: 1px solid var(--goal-studio-line);
    background: transparent;
    box-shadow: none;
    counter-increment: goal-row-folio;
  }

  .shell-goals .goal-row::before {
    display: none;
  }

  .shell-goals .goal-row:last-of-type {
    border-bottom: 0;
  }

  .shell-goals .goal-row:hover,
  .shell-goals .goal-row:focus-within,
  .shell-goals .goal-row.is-current:hover,
  .shell-goals .goal-row.is-current:focus-within {
    background: var(--goal-studio-accent-soft);
    box-shadow: none;
  }

  .shell-goals .goal-row-main {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 112px;
    gap: 24px;
    align-items: center;
    min-width: 0;
    padding: 24px 0 22px;
  }

  .shell-goals .goal-row-folio {
    grid-column: 1;
    color: var(--priority-color);
    font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.05em;
  }

  .shell-goals .goal-row-folio::before {
    content: counter(goal-row-folio, decimal-leading-zero);
  }

  .shell-goals .goal-row.priority-row-high {
    --priority-color: var(--goal-studio-high);
  }

  .shell-goals .goal-row.priority-row-medium {
    --priority-color: var(--goal-studio-medium);
  }

  .shell-goals .goal-row.priority-row-low {
    --priority-color: var(--goal-studio-low);
  }

  .shell-goals .goal-row-copy {
    grid-column: 2;
    min-width: 0;
  }

  .shell-goals .goal-row-copy > h2 {
    display: flex;
    gap: 7px;
    align-items: center;
    margin: 0;
    color: var(--goal-studio-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
  }

  .shell-goals .goal-row-copy > h2 .goal-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell-goals .goal-row-copy > p {
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin: 7px 0 0;
    color: var(--goal-studio-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
  }

  .shell-goals .goal-row-copy > p i {
    flex: 0 0 auto;
    color: var(--goal-studio-ink-soft);
    font-size: 14px;
  }

  .shell-goals .goal-row-copy > p span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell-goals .goal-row-copy > .meta-row {
    display: none;
  }

  .shell-goals .goal-row-deadline {
    grid-column: 3;
    display: grid;
    gap: 3px;
    justify-items: end;
    color: var(--goal-studio-muted);
    font-size: 11px;
    line-height: 1.35;
    text-align: right;
  }

  .shell-goals .goal-row-deadline strong {
    color: var(--goal-studio-ink-soft);
    font-size: 13px;
    font-weight: 600;
  }

  .shell-goals .priority-row-high .goal-row-deadline strong {
    color: var(--goal-studio-high);
  }

  .shell-goals .doing-now-icon {
    color: var(--goal-studio-accent);
  }

  .shell-goals .goal-inline-detail[open] > summary {
    margin-bottom: 0;
    border-bottom: 1px solid var(--goal-studio-line);
  }

  .shell-goals .inline-edit-panel {
    margin: 0 0 24px 82px;
    border: 0;
    border-bottom: 1px solid var(--goal-studio-line);
    border-radius: 0;
    background: var(--goal-studio-surface);
  }

  .shell-goals .goal-drag-handle {
    top: 36px;
    left: -34px;
    width: 30px;
    min-width: 30px;
    min-height: 30px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--goal-studio-muted);
    opacity: 0;
  }

  .shell-goals .goal-row:hover .goal-drag-handle,
  .shell-goals .goal-drag-handle:focus-visible,
  .goals-sort-mode .shell-goals .goal-drag-handle {
    opacity: 1;
  }

  .shell-goals .goal-drag-handle:focus-visible {
    outline: 2px solid #7aa4ff;
    outline-offset: 2px;
  }

  .goals-simple-mode .shell-goals .goal-row {
    min-height: 54px;
    padding: 0;
  }

  .goals-simple-mode .shell-goals .goal-row-main {
    grid-template-columns: 46px minmax(0, 1fr) 88px;
    grid-template-rows: auto;
    gap: 16px;
    min-height: 54px;
    padding: 10px 0;
  }

  .goals-simple-mode .shell-goals .goal-row-folio {
    display: block;
    font-size: 24px;
  }

  .goals-simple-mode .shell-goals .goal-row-copy > h2 {
    font-size: 15px;
  }

  .goals-simple-mode .shell-goals .goal-row-copy > p,
  .goals-simple-mode .shell-goals .goal-row-copy > .meta-row {
    display: none;
  }

  .goals-simple-mode .shell-goals .goal-row-deadline {
    display: grid;
  }

  .shell-goals .focus-rail {
    display: grid;
    align-content: start;
    gap: 0;
    min-width: 0;
    padding: 0 32px 34px;
    border-left: 1px solid var(--goal-studio-line);
    background: var(--goal-studio-surface);
  }

  .shell-goals .focus-rail-date {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: baseline;
    min-height: 88px;
    padding: 34px 0 20px;
    border-bottom: 1px solid var(--goal-studio-line-strong);
  }

  .shell-goals .focus-rail-date strong {
    color: var(--goal-studio-ink);
    font-size: 14px;
    font-weight: 700;
  }

  .shell-goals .focus-rail-date time,
  .shell-goals .focus-rail-date span {
    color: var(--goal-studio-ink-soft);
    font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .shell-goals .rail-panel,
  .shell-goals .rail-panel.rail-overview {
    gap: 14px;
    padding: 28px 0;
    border: 0;
    border-bottom: 1px solid var(--goal-studio-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell-goals .rail-panel:last-child {
    border-bottom: 0;
  }

  .shell-goals .rail-panel-head h2 {
    color: var(--goal-studio-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 20px;
    font-weight: 600;
  }

  .shell-goals .rail-panel-head span,
  .shell-goals .rail-panel-head a,
  .shell-goals .rail-hint,
  .shell-goals .rail-empty {
    color: var(--goal-studio-muted);
    font-size: 11px;
    font-weight: 600;
  }

  .shell-goals .rail-panel-head a {
    color: var(--goal-studio-accent);
    text-underline-offset: 3px;
  }

  .shell-goals .rail-quote-list,
  .shell-goals .rail-note-list {
    gap: 0;
  }

  .shell-goals .rail-quote,
  .shell-goals .rail-note {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--goal-studio-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell-goals .rail-quote:first-child,
  .shell-goals .rail-note:first-child {
    padding-top: 0;
  }

  .shell-goals .rail-quote:last-child,
  .shell-goals .rail-note:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .shell-goals .rail-quote[data-hover-tooltip]:hover,
  .shell-goals .rail-quote[data-hover-tooltip]:focus-visible,
  .shell-goals .rail-note:hover,
  .shell-goals .rail-note:focus-within {
    background: transparent;
    box-shadow: none;
  }

  .shell-goals .rail-quote:focus-visible,
  .shell-goals .rail-note a:focus-visible {
    outline: 2px solid #7aa4ff;
    outline-offset: 3px;
  }

  .shell-goals .rail-quote p,
  .shell-goals .rail-note p {
    color: var(--goal-studio-ink-soft);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
  }

  .shell-goals .rail-quote cite {
    color: var(--goal-studio-muted);
    font-size: 11px;
    font-weight: 500;
  }

  .shell-goals .rail-note a {
    gap: 8px;
  }

  .shell-goals .rail-note .meta-row {
    margin-bottom: 0;
  }

  .shell-goals .mini-calendar {
    gap: 12px;
  }

  .shell-goals .mini-calendar-title {
    color: var(--goal-studio-ink-soft);
    font-size: 12px;
    font-weight: 600;
  }

  .shell-goals .mini-calendar-weekdays,
  .shell-goals .mini-calendar-grid {
    gap: 4px;
  }

  .shell-goals .mini-calendar-day {
    min-height: 30px;
    border-radius: 2px;
    color: var(--goal-studio-ink-soft);
    font-size: 11px;
    font-weight: 500;
  }

  .shell-goals .mini-calendar-day.is-today {
    border-color: var(--goal-studio-accent);
    background: var(--goal-studio-accent);
    color: #ffffff;
  }

  .shell-goals .mini-calendar-day:focus-visible {
    outline: 2px solid #7aa4ff;
    outline-offset: 2px;
  }
}

@media (max-width: 1040px) {
  .shell.shell-goals {
    background: #f5f4f0;
    color: #15171a;
  }

  .shell-goals .goal-editorial-hero,
  .shell-goals .goal-editorial-column-head {
    display: none;
  }

  .shell-goals > .topbar.is-module-landing {
    border-bottom-color: #d2d3d0;
    background: rgb(245 244 240 / 98%);
  }

  .shell-goals > .topbar.is-module-landing .module-page-title {
    color: #15171a;
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-weight: 600;
  }

  .shell-goals > .topbar.is-module-landing .module-page-meta {
    color: #6c7178;
  }

  .shell-goals > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary {
    border-radius: 2px;
    background: #1455cc;
  }

  .shell-goals > .topbar.is-module-landing .top-actions.is-mobile-menu.is-menu-ready .top-actions-more {
    border-color: #d2d3d0;
    border-radius: 2px;
    background: #fbfaf7;
    color: #34383d;
  }

  .shell-goals .goal-section > details > summary {
    border-bottom-color: #d2d3d0;
    color: #34383d;
  }

  .shell-goals .goal-section.is-primary > details > summary {
    border-bottom-color: #bfc2c1;
    color: #1455cc;
  }

  .shell-goals .goal-section > details > summary strong,
  .shell-goals .goal-section-chevron {
    color: #6c7178;
  }

  .shell-goals .goal-row,
  .shell-goals .goal-row:last-of-type {
    border-bottom-color: #d2d3d0;
  }

  .shell-goals .goal-row-mobile-link {
    min-height: 54px;
    color: #15171a;
  }

  .shell-goals .goal-row-mobile-priority.is-high {
    color: #d1192e;
  }

  .shell-goals .goal-row-mobile-priority.is-medium,
  .shell-goals .goal-row-mobile-state.is-doing {
    color: #1455cc;
  }

  .shell-goals .goal-row-mobile-priority.is-low,
  .shell-goals .goal-row-mobile-chevron {
    color: #8d9298;
  }

  .shell-goals .goal-list > .empty {
    color: #6c7178;
  }

  .shell-goals + .module-nav {
    border-top-color: #d2d3d0;
    background: rgb(251 250 247 / 98%);
  }

  .shell-goals + .module-nav a,
  .shell-goals + .module-nav a.is-active {
    color: #6c7178;
  }

  .shell-goals + .module-nav a.is-active {
    color: #1455cc;
  }

  .shell-goals ~ .goal-hover-tooltip {
    border-color: #d2d3d0;
    background: #fbfaf7;
    color: #34383d;
  }
}

/* Unified studio design system */

:where(.shell-notes, .shell-calendar, .shell-notebooks) .module-page-title,
:where(.shell-notes, .shell-calendar, .shell-notebooks) :where(.detail-head h2, .history-panel-head h2, .notebook-home-head h2, .notebook-document-head h1) {
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-weight: 600;
  letter-spacing: 0.025em;
}

:where(.shell-notes, .shell-calendar, .shell-notebooks) :where(.panel, .note-card, .detail-card, .history-panel, .inline-edit-panel) {
  border-color: var(--line);
  box-shadow: none;
}

:where(.shell-notes, .shell-calendar, .shell-notebooks) :where(input, select, textarea) {
  border-color: var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--panel) 88%, white);
}

:where(.shell-notes, .shell-calendar, .shell-notebooks) :where(input, select, textarea):focus-visible {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  outline-offset: 1px;
  box-shadow: none;
}

:where(.shell-notes, .shell-calendar, .shell-notebooks) :where(.button, button) {
  border-radius: 4px;
  box-shadow: none;
}

.shell-notes .note-list {
  gap: 10px;
  border: 0;
  background: transparent;
}

.shell-notes :where(.note-date-groups, .note-date-group, .note-date-items) {
  display: contents;
}

.shell-notes .note-date-heading,
.shell-notes .note-time-short {
  display: none;
}

.shell-notes .note-inline-tags {
  display: contents;
}

.shell-notes .note-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 96%, white);
  box-shadow: var(--shadow-soft);
}

.shell-notes .note-card:last-child {
  border-bottom-color: var(--line);
}

.shell-notes .note-card.is-pinned {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--panel) 94%, var(--accent));
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--accent) 78%, transparent), var(--shadow-soft);
}

.shell-notes .note-card:hover,
.shell-notes .note-card:focus-within {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--panel) 88%, var(--accent-soft));
  box-shadow: 0 7px 18px rgba(32, 36, 31, 0.075);
}

.shell-notes .note-card.is-pinned:hover,
.shell-notes .note-card.is-pinned:focus-within {
  background: color-mix(in srgb, var(--panel) 88%, var(--accent));
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--accent) 82%, transparent), 0 7px 18px rgba(32, 36, 31, 0.075);
}

.shell-notes .note-excerpt {
  font-size: 16px;
  line-height: 1.6;
}

.shell-notes .note-meta {
  gap: 8px;
  margin-bottom: 10px;
}

.shell-notes .note-meta time {
  font-variant-numeric: tabular-nums;
}

.shell-notes .note-meta :where(.importance, .tag) {
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 750;
}

.shell-notes .pinned-notes,
.shell-notes :where(.note-panel, .history-panel, .detail-card),
.shell-notes .inline-edit-panel {
  border-color: var(--line);
  border-radius: 4px;
  background: var(--panel);
  box-shadow: none;
}

.shell-notes .pinned-notes,
.shell-notes .inline-edit-panel {
  background: var(--panel-soft);
}

.shell-notes .note-inline-detail[open] > .note-card-summary {
  display: none;
  margin: 0;
}

.shell-notes .note-inline-panel {
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.shell-notes .note-inline-form {
  gap: 10px;
}

.shell-notes .note-inline-content-field {
  min-width: 0;
}

.shell-notes .note-inline-content-editor {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  resize: none;
}

.shell-notes .note-inline-content-editor:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: transparent;
  outline: 0;
  box-shadow: none;
}

.shell-notes .note-inline-panel .note-inline-meta-fields {
  grid-template-columns: minmax(100px, 0.65fr) minmax(0, 1.35fr);
}

.shell-notes .note-inline-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.shell-notes .note-inline-actions form {
  min-width: 0;
  margin: 0;
}

.shell-notes .note-inline-actions button {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding-inline: 4px;
  font-size: 13px;
  white-space: nowrap;
}

.shell-notes .pinned-notes {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.shell-notes .pinned-notes > summary {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  min-height: 38px;
  padding: 0 2px 10px;
  border-bottom: 1px solid transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.shell-notes .pinned-notes > summary:hover,
.shell-notes .pinned-notes > summary:focus-visible {
  background: transparent;
  color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 2px;
}

.shell-notes .pinned-notes[open] > summary {
  border-bottom-color: transparent;
  color: var(--text);
}

.shell-notes .pinned-notes > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.shell-notes .pinned-notes > summary > span::before {
  width: 3px;
  height: 16px;
  border-radius: 999px;
  background: var(--accent);
  content: "";
}

.shell-notes .pinned-notes > summary strong {
  min-width: 24px;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  line-height: 16px;
}

.shell-notes .pinned-notes > summary::after {
  width: 7px;
  height: 7px;
  margin: 0 3px 3px 1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform 140ms ease, margin 140ms ease;
}

.shell-notes .pinned-notes[open] > summary::after {
  margin-top: 4px;
  margin-bottom: 0;
  transform: rotate(225deg);
}

.shell-notes .pinned-note-list {
  gap: 10px;
  padding: 0;
  background: transparent;
}

.shell-notes .pinned-note-list .note-card {
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
}

.shell-notes .pinned-note-list .note-card.is-pinned {
  background: color-mix(in srgb, var(--panel) 94%, var(--accent));
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--accent) 78%, transparent), var(--shadow-soft);
}

.shell-notes .pinned-note-list .note-card.is-pinned:hover,
.shell-notes .pinned-note-list .note-card.is-pinned:focus-within {
  background: color-mix(in srgb, var(--panel) 88%, var(--accent));
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--accent) 82%, transparent), 0 7px 18px rgba(32, 36, 31, 0.075);
}

.shell-notes .note-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 10px 2px 0;
  color: var(--text);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.shell-notes .note-section-heading strong {
  min-width: 24px;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.shell-notes .pin-label {
  gap: 5px;
  min-height: 20px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.shell-notes .pin-label::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.shell-calendar .calendar-tabs {
  gap: 18px;
  margin-bottom: 16px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.shell-calendar .calendar-tabs a {
  position: relative;
  min-width: 72px;
  min-height: 40px;
  padding: 8px 6px 10px;
  border-radius: 0;
}

.shell-calendar .calendar-tabs a.is-active {
  background: transparent;
  color: var(--accent);
}

.shell-calendar .calendar-tabs a.is-active::after {
  position: absolute;
  right: 6px;
  bottom: -1px;
  left: 6px;
  height: 2px;
  background: var(--accent);
  content: "";
}

.shell-calendar :where(.week-day, .calendar-long-ranges, .calendar-day-strip, .month-day) {
  border-color: var(--line);
  border-radius: 0;
  background: var(--panel);
  box-shadow: none;
}

.shell-calendar .calendar-long-ranges {
  border-radius: 4px;
}

.shell-calendar .range-goal-list {
  gap: 0;
  padding: 0 12px;
}

.shell-calendar .range-goal {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
}

.shell-calendar .range-goal:last-child {
  border-bottom: 0;
}

.shell-calendar .range-track,
.shell-calendar .range-fill {
  border-radius: 2px;
}

.shell-calendar .range-track {
  background: var(--line-soft);
}

.shell-calendar .week-board {
  gap: 0;
  border: 1px solid var(--line);
  background: var(--panel);
}

.shell-calendar .week-day {
  border-width: 0 0 1px;
}

.shell-calendar .week-day:last-child {
  border-bottom: 0;
}

.shell-calendar .week-day.is-today,
.shell-calendar .month-day.is-today {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.shell-calendar .month-weekdays {
  gap: 0;
  margin: 0;
  padding: 10px 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--panel-soft);
}

.shell-calendar .month-grid {
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.shell-calendar .month-day {
  min-height: 126px;
  border: 0;
}

.shell-calendar .month-day.is-outside-month {
  background: var(--panel-soft);
}

.shell-calendar .month-goal {
  border-radius: 2px;
  background: var(--panel-soft);
}

.shell-calendar .today-badge {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 3px;
  background: var(--panel);
  color: var(--accent);
}

.shell-notebooks .notebook-layout {
  border-color: var(--line);
  border-radius: 0;
  background: var(--panel);
  box-shadow: none;
}

.shell-notebooks .notebook-tree-shell,
.shell-notebooks .notebook-document-rail {
  border-color: var(--line);
  background: var(--panel-soft);
}

.shell-notebooks :where(.notebook-main, .notebook-home-panel, .notebook-editor, .notebook-preview-scroll) {
  background: var(--panel);
}

.shell-notebooks .notebook-workspace-toolbar {
  border-color: var(--line);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: none;
}

.shell-notebooks .notebook-home-head,
.shell-notebooks .notebook-document-head {
  border-color: var(--line);
}

.shell-notebooks .notebook-home-head h2 {
  max-width: 820px;
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1.12;
}

.shell-notebooks .notebook-home-note {
  padding: 13px 2px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
}

.shell-notebooks .notebook-home-note:hover,
.shell-notebooks .notebook-home-note:focus-visible {
  background: var(--accent-soft);
}

.shell-notebooks .notebook-home-overview,
.shell-notebooks .notebook-preview-dialog {
  border-color: var(--line);
  border-radius: 4px;
  background: var(--panel-soft);
}

.shell-notebooks .notebook-home-overview dl div,
.shell-notebooks .notebook-preview-scroll {
  border-radius: 2px;
  background: var(--panel);
}

.shell-notebooks .notebook-editor-title input {
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-weight: 600;
}

.shell-notebooks :where(.notebook-editor-body textarea, .notebook-folder-help) {
  background: var(--panel-soft);
}

@media (min-width: 1041px) {
  .shell-notes,
  .shell-calendar {
    width: min(1440px, calc(100% - 32px));
  }

  .shell-notes .topbar,
  .shell-calendar .topbar,
  .shell-notebooks .topbar {
    grid-template-columns: minmax(110px, 1fr) auto;
    width: auto;
    min-height: 68px;
    margin: 0;
    padding: 0 18px 14px;
    border-bottom-color: var(--line);
  }

  :where(.shell-notes, .shell-calendar) {
    width: min(1440px, calc(100% - 32px));
    min-height: 100vh;
    padding: 16px 0 42px;
  }

  .shell-notebooks {
    width: min(1680px, calc(100% - 24px));
    padding-top: 16px;
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) .topbar {
    grid-template-columns: minmax(110px, 1fr) auto;
    gap: 28px;
    width: auto;
    min-height: 68px;
    margin: 0;
    padding: 0 18px 14px;
    border-bottom-color: var(--line);
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) .module-page-title {
    font-size: 32px;
    line-height: 1;
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) .topbar-side {
    flex-direction: row;
    gap: 12px;
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) :where(.desktop-module-nav, .topbar-system, .top-actions) {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) .desktop-module-nav {
    gap: 4px;
    padding: 0;
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) .desktop-module-nav a {
    position: relative;
    gap: 7px;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #575b55;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) .desktop-module-nav a::after {
    position: absolute;
    right: 10px;
    bottom: 0;
    left: 10px;
    height: 2px;
    background: transparent;
    content: "";
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) .desktop-module-nav a:hover,
  :where(.shell-notes, .shell-calendar, .shell-notebooks) .desktop-module-nav a:focus-visible,
  :where(.shell-notes, .shell-calendar, .shell-notebooks) .desktop-module-nav a.is-active {
    background: transparent;
    color: var(--accent);
    box-shadow: none;
    outline: none;
    transform: none;
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) .desktop-module-nav a.is-active::after {
    background: var(--accent);
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) .topbar-system {
    padding: 0;
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) .top-actions {
    gap: 4px;
    padding: 0;
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) .top-actions-system {
    padding-left: 0;
    border-left: 0;
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) .top-actions :where(.button, button) {
    min-height: 34px;
    padding: 7px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #666a63;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) .top-actions :where(.button, button):hover,
  :where(.shell-notes, .shell-calendar, .shell-notebooks) .top-actions :where(.button, button):focus-visible,
  :where(.shell-notes, .shell-calendar, .shell-notebooks) .top-actions button[aria-pressed="true"] {
    background: var(--accent-soft);
    color: var(--accent);
    outline: none;
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) .top-actions .top-action-primary,
  :where(.shell-notes, .shell-calendar, .shell-notebooks) .top-actions .top-action-primary:hover,
  :where(.shell-notes, .shell-calendar, .shell-notebooks) .top-actions .top-action-primary:focus-visible {
    min-width: 72px;
    padding-inline: 16px;
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 7px 16px rgba(36, 91, 67, 0.14);
  }

  :where(.shell-notes, .shell-calendar) > :not(.topbar) {
    margin-right: 18px;
    margin-left: 18px;
  }

  .shell-notes .note-list {
    margin-top: 24px;
    padding: 0 16px;
  }

  .shell-calendar .calendar-date-controls {
    padding-top: 8px;
  }

  .shell-calendar .calendar-tabs {
    margin-bottom: 6px;
  }

  .shell-calendar .calendar-tabs a {
    min-height: 34px;
    padding: 6px;
  }

  .shell-calendar :where(.week-controls, .month-controls) {
    margin-bottom: 6px;
  }

  .shell-notebooks .notebook-layout {
    min-height: calc(100vh - 84px);
    border-top: 0;
  }
}

@media (max-width: 1040px) {
  :where(.shell-notes, .shell-calendar, .shell-notebooks) .module-page-title {
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-weight: 600;
    letter-spacing: 0.025em;
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) :where(.top-actions, .topbar-system) {
    border-color: var(--line);
    background: var(--panel-soft);
    box-shadow: none;
  }

  .shell-notebooks .notebook-layout {
    border-radius: 0;
  }
}

@media (max-width: 1040px) {
  .goal-create-dialog {
    width: calc(100% - 16px);
    max-height: var(--goal-create-dialog-max-height, calc(100vh - 24px));
    border-radius: 12px;
  }

  .goal-create-dialog-shell {
    max-height: var(--goal-create-dialog-max-height, calc(100vh - 24px));
  }

  .goal-create-dialog-head {
    padding: 12px 14px;
  }

  .goal-create-dialog-body {
    padding: 14px;
  }

  .module-nav {
    border-top-color: var(--line);
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    box-shadow: 0 -6px 18px rgba(32, 36, 31, 0.08);
  }

  .module-nav a,
  .module-nav a.is-active {
    border-radius: 4px;
  }

  .module-nav a.is-active {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .topbar.is-module-landing {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    margin-bottom: 12px;
    padding: 0 2px 10px;
    border-bottom-color: var(--line);
  }

  .topbar.is-module-landing .topbar-title {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
  }

  .topbar.is-module-landing .module-page-title {
    display: block;
    color: var(--text);
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.025em;
    white-space: nowrap;
  }

  .topbar.is-module-landing .module-page-meta {
    display: inline;
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  .topbar.is-module-landing .topbar-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 0;
    width: auto;
    min-width: 0;
  }

  .topbar.is-module-landing .top-actions.is-mobile-menu {
    display: flex;
    align-items: center;
    width: auto;
    max-width: none;
    gap: 7px;
  }

  .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main,
  .topbar.is-module-landing .top-actions.is-mobile-menu.has-keep-action .top-actions-main {
    display: flex;
    align-items: center;
    width: auto;
    gap: 7px;
  }

  .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .button,
  .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main button {
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 7px 10px;
    border-radius: 6px;
  }

  .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-keep {
    flex: 0 0 auto;
    width: auto;
    min-width: 50px;
    padding-inline: 10px;
  }

  .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary {
    flex: 0 0 auto;
    order: 0;
    width: auto;
    min-width: 68px;
    padding-inline: 12px;
    gap: 4px;
    box-shadow: 0 7px 16px rgba(36, 91, 67, 0.14);
  }

  .topbar.is-module-landing .top-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
  }

  .topbar.is-module-landing .top-actions.is-mobile-menu.is-menu-ready .top-actions-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: auto;
    grid-row: auto;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-color: var(--line);
    border-radius: 6px;
    background: var(--panel-soft);
    color: var(--muted);
  }

  .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-menu {
    top: calc(100% + 8px);
  }

  @media (max-width: 400px) {
    .topbar.is-module-landing {
      gap: 8px;
    }

    .topbar.is-module-landing .topbar-title {
      gap: 6px;
    }

    .topbar.is-module-landing .module-page-title {
      font-size: 24px;
    }

    .topbar.is-module-landing .module-page-meta {
      font-size: 12px;
    }

    .topbar.is-module-landing .top-actions.is-mobile-menu,
    .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main,
    .topbar.is-module-landing .top-actions.is-mobile-menu.has-keep-action .top-actions-main {
      gap: 5px;
    }

    .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-keep {
      min-width: 48px;
      padding-inline: 8px;
    }

    .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary {
      min-width: 64px;
      padding-inline: 10px;
    }
  }

  :where(.shell-notes, .shell-calendar, .shell-notebooks) :where(.panel, .note-card, .detail-card, .history-panel) {
    border-radius: 4px;
    box-shadow: none;
  }

  .shell-notes .note-list {
    gap: 20px;
    margin-top: 14px;
    padding: 0;
  }

  .shell-notes .pinned-notes {
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--panel) 94%, var(--accent-soft));
    overflow: hidden;
  }

  .shell-notes .pinned-notes > summary {
    min-height: 50px;
    padding: 11px 13px;
    border-bottom: 1px solid transparent;
    color: var(--accent);
    font-size: 15px;
    font-weight: 800;
  }

  .shell-notes .pinned-notes[open] > summary {
    border-bottom-color: var(--line);
    color: var(--accent);
  }

  .shell-notes .pinned-notes > summary > span {
    gap: 7px;
  }

  .shell-notes .pinned-notes > summary > span::before {
    display: none;
  }

  .shell-notes .pinned-notes > summary > span i {
    font-size: 17px;
    font-weight: 400;
  }

  .shell-notes .pinned-notes > summary strong {
    min-width: 28px;
    min-height: 28px;
    padding: 4px 8px;
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    font-size: 13px;
    line-height: 18px;
  }

  .shell-notes .pinned-note-list {
    display: grid;
    gap: 0;
    padding: 0 13px;
  }

  .shell-notes .pinned-note-list .note-card,
  .shell-notes .pinned-note-list .note-card.is-pinned {
    padding: 13px 8px 14px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell-notes .pinned-note-list .note-card:last-child {
    border-bottom: 0;
  }

  .shell-notes .pinned-note-list .note-card:hover,
  .shell-notes .pinned-note-list .note-card:focus-within,
  .shell-notes .pinned-note-list .note-card.is-pinned:hover,
  .shell-notes .pinned-note-list .note-card.is-pinned:focus-within {
    background: color-mix(in srgb, var(--panel) 76%, var(--accent-soft));
    box-shadow: none;
  }

  .shell-notes .pinned-note-list .note-meta {
    gap: 8px;
    margin-bottom: 8px;
  }

  .shell-notes .pinned-note-list .note-meta time {
    order: 4;
    margin-left: auto;
    color: var(--muted);
  }

  .shell-notes .pinned-note-list .note-inline-tags {
    display: contents;
  }

  .shell-notes .pinned-note-list .note-inline-tags .tag {
    order: 3;
  }

  .shell-notes .pinned-note-list .importance {
    order: 1;
  }

  .shell-notes .pinned-note-list .pin-label {
    order: 2;
  }

  .shell-notes .note-section-heading {
    min-height: 34px;
    padding: 0 2px;
    font-size: 17px;
  }

  .shell-notes .note-date-groups,
  .shell-notes .note-date-group,
  .shell-notes .note-date-items {
    display: grid;
  }

  .shell-notes .note-date-groups {
    gap: 18px;
  }

  .shell-notes .note-date-group {
    gap: 5px;
  }

  .shell-notes .note-date-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--accent);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.02em;
  }

  .shell-notes .note-date-heading::after {
    height: 1px;
    flex: 1;
    background: var(--line);
    content: "";
  }

  .shell-notes .note-date-heading time {
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .shell-notes .note-date-items {
    gap: 0;
  }

  .shell-notes .note-date-items .note-card,
  .shell-notes .note-date-items .note-card.is-date-grouped {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell-notes .note-date-items .note-card:last-child {
    border-bottom: 0;
  }

  .shell-notes .note-date-items .note-card:hover,
  .shell-notes .note-date-items .note-card:focus-within {
    background: color-mix(in srgb, var(--panel) 62%, transparent);
    box-shadow: none;
  }

  .shell-notes .note-date-items .note-card-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
  }

  .shell-notes .note-date-items .note-card-main,
  .shell-notes .note-date-items .note-meta {
    display: contents;
  }

  .shell-notes .note-date-items .importance {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .shell-notes .note-date-items .note-excerpt-link {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .shell-notes .note-date-items .note-meta time {
    grid-column: 3;
    grid-row: 1;
    padding-top: 3px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .shell-notes .note-date-items .note-inline-tags {
    display: flex;
    grid-column: 2 / -1;
    grid-row: 2;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
  }

  .shell-notes .note-date-items .note-time-full {
    display: none;
  }

  .shell-notes .note-date-items .note-time-short {
    display: inline;
  }

  .shell-notes .note-excerpt {
    font-size: 15px;
    line-height: 1.55;
  }

  /* Mobile notes: quiet paper cards aligned with the goals action flow */

  .shell.shell-notes {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0 0 calc(70px + env(safe-area-inset-bottom, 0px));
    background-color: #f4f3ee;
    background-image: none;
    color: #202923;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  }

  .shell-notes > .topbar.is-module-landing {
    position: sticky;
    top: 0;
    z-index: 8;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 56px;
    margin: 0;
    padding: 7px 12px 6px 16px;
    border-bottom: 1px solid #dee1da;
    background: rgba(244, 243, 238, 0.98);
    backdrop-filter: none;
  }

  .shell-notes > .topbar.is-module-landing .topbar-title {
    gap: 8px;
    align-items: baseline;
  }

  .shell-notes > .topbar.is-module-landing .module-page-title {
    color: #202923;
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 27px;
    font-weight: 650;
    letter-spacing: 0.04em;
  }

  .shell-notes > .topbar.is-module-landing .module-page-meta {
    color: #7a817b;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
  }

  .shell-notes > .topbar.is-module-landing .top-actions.is-mobile-menu,
  .shell-notes > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main {
    gap: 8px;
  }

  .shell-notes > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #2d6249;
    box-shadow: none;
    color: #ffffff;
    font-size: 20px;
  }

  .shell-notes > .topbar.is-module-landing .top-action-primary span:not(.top-action-icon) {
    display: none;
  }

  .shell-notes > .topbar.is-module-landing .top-action-icon {
    font-size: 24px;
  }

  .shell-notes > .topbar.is-module-landing .top-actions.is-mobile-menu.is-menu-ready .top-actions-more {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid #dee1da;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.34);
    color: #5f6862;
    font-size: 20px;
  }

  .shell-notes > .topbar.is-module-landing .top-actions-more-icon {
    transform: rotate(90deg);
  }

  .shell-notes > .note-panel {
    margin: 12px;
    border-radius: 8px;
    background: #faf9f5;
  }

  .shell-notes .note-list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 12px 12px 24px;
  }

  .shell-notes .note-section-heading {
    min-height: 38px;
    padding: 4px 2px 0;
    color: #344039;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .shell-notes .note-section-heading strong {
    border: 0;
    background: transparent;
    color: #7a817b;
    font-family: inherit;
    font-weight: 600;
  }

  .shell-notes .note-date-groups {
    gap: 15px;
  }

  .shell-notes .note-date-group {
    gap: 7px;
  }

  .shell-notes .note-date-heading {
    gap: 7px;
    min-height: 28px;
    padding: 0 2px;
    color: #2d6249;
    font-size: 12px;
    font-weight: 600;
  }

  .shell-notes .note-date-heading time {
    font-size: 15px;
    font-weight: 750;
  }

  .shell-notes .note-date-heading::after {
    background: #d9ddd7;
  }

  .shell-notes .note-date-items {
    gap: 8px;
  }

  .shell-notes .note-date-items .note-card,
  .shell-notes .note-date-items .note-card.is-date-grouped {
    --note-importance-color: #879188;
    padding: 13px 14px 12px 17px;
    border: 1px solid #d9ddd7;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.46);
    box-shadow: 0 1px 0 rgba(32, 41, 35, 0.025);
    overflow: hidden;
  }

  .shell-notes .note-card.note-importance-important {
    --note-importance-color: #b38a4a;
  }

  .shell-notes .note-card.note-importance-critical {
    --note-importance-color: #b85c50;
  }

  .shell-notes .note-card::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--note-importance-color, #879188);
    content: "";
  }

  .shell-notes .note-date-items .note-card:last-child {
    border-bottom: 1px solid #d9ddd7;
  }

  .shell-notes .note-date-items .note-card:hover,
  .shell-notes .note-date-items .note-card:focus-within,
  .shell-notes .note-card:has(.note-inline-detail[open]) {
    border-color: color-mix(in srgb, var(--note-importance-color) 45%, #d9ddd7);
    background: #faf9f5;
    box-shadow: 0 6px 16px rgba(32, 41, 35, 0.065);
  }

  .shell-notes .note-date-items .note-card-summary {
    display: block;
  }

  .shell-notes .note-date-items .note-card-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .shell-notes .note-date-items .note-excerpt-link {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .shell-notes .note-date-items .note-meta {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    flex-wrap: wrap;
    gap: 5px 7px;
    align-items: center;
    margin: 9px 0 0;
  }

  .shell-notes .note-date-items .importance {
    order: 1;
  }

  .shell-notes .note-date-items .pin-label {
    order: 2;
  }

  .shell-notes .note-date-items .note-inline-tags {
    display: flex;
    order: 3;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
  }

  .shell-notes .note-date-items .note-meta time {
    order: 10;
    margin-left: auto;
    padding: 0;
    color: #7a817b;
    font-size: 12px;
    line-height: 20px;
  }

  .shell-notes .note-excerpt {
    color: #29342d;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.58;
  }

  .shell-notes .note-meta :where(.importance, .tag) {
    min-height: 20px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 18px;
  }

  .shell-notes .note-inline-panel {
    gap: 9px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .shell-notes .note-inline-content-editor {
    min-height: 31px;
    padding-bottom: 7px;
    font-size: 15.5px;
    line-height: 1.58;
  }

  .shell-notes .note-inline-panel .note-inline-meta-fields {
    grid-template-columns: minmax(90px, 0.7fr) minmax(0, 1.3fr);
  }

  .shell-notes .note-inline-actions {
    gap: 6px;
  }

  .shell-notes .note-inline-actions button {
    min-height: 40px;
  }

  .shell-notes .pinned-notes {
    border: 1px solid #cfd8d1;
    border-left: 3px solid #2d6249;
    border-radius: 8px;
    background: rgba(230, 235, 228, 0.58);
  }

  .shell-notes .pinned-notes > summary {
    min-height: 48px;
    padding: 10px 12px;
    border-bottom-color: transparent;
    color: #2d6249;
    font-size: 15px;
  }

  .shell-notes .pinned-notes[open] > summary {
    border-bottom-color: #d4dbd5;
  }

  .shell-notes .pinned-note-list {
    gap: 8px;
    padding: 10px;
  }

  .shell-notes .pinned-note-list .note-card,
  .shell-notes .pinned-note-list .note-card.is-pinned {
    padding: 13px 14px 12px 17px;
    border: 1px solid #d6dcd7;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.48);
    box-shadow: 0 1px 0 rgba(32, 41, 35, 0.025);
    overflow: hidden;
  }

  .shell-notes .pinned-note-list .note-card:last-child {
    border-bottom: 1px solid #d6dcd7;
  }

  .shell-notes .pinned-note-list .note-card:hover,
  .shell-notes .pinned-note-list .note-card:focus-within,
  .shell-notes .pinned-note-list .note-card.is-pinned:hover,
  .shell-notes .pinned-note-list .note-card.is-pinned:focus-within {
    border-color: color-mix(in srgb, var(--note-importance-color) 45%, #d6dcd7);
    background: #faf9f5;
    box-shadow: 0 6px 16px rgba(32, 41, 35, 0.065);
  }

  .shell-notes .pinned-note-list .note-card-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .shell-notes .pinned-note-list .note-excerpt-link {
    grid-row: 1;
  }

  .shell-notes .pinned-note-list .note-meta {
    display: flex;
    grid-row: 2;
    flex-wrap: wrap;
    gap: 5px 7px;
    align-items: center;
    margin: 9px 0 0;
  }

  .shell-notes .pinned-note-list .note-meta time {
    order: 10;
    margin-left: auto;
    color: #7a817b;
    font-size: 12px;
  }

  .shell-notes .pinned-note-list .note-inline-tags {
    display: flex;
    order: 3;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
  }

  .shell-notes + .module-nav {
    gap: 0;
    min-height: 62px;
    padding: 4px 8px calc(3px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #dee1da;
    background: rgba(248, 247, 242, 0.98);
    box-shadow: none;
    backdrop-filter: none;
  }

  .shell-notes + .module-nav a,
  .shell-notes + .module-nav a.is-active {
    position: relative;
    gap: 2px;
    min-height: 52px;
    padding: 4px 2px 3px;
    border-radius: 0;
    background: transparent;
    color: #737b75;
    font-size: 11px;
    font-weight: 600;
  }

  .shell-notes + .module-nav a.is-active {
    color: #2d6249;
  }

  .shell-notes + .module-nav a.is-active::after {
    position: absolute;
    right: 34%;
    bottom: 1px;
    left: 34%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
  }

  .shell-notes + .module-nav .module-nav-icon {
    width: 21px;
    height: 21px;
    font-size: 20px;
  }

  .shell-calendar .month-day,
  .shell-notebooks .notebook-layout {
    border-radius: 0;
  }

  .shell-calendar .calendar-tabs {
    width: 100%;
  }

  .shell-notebooks .notebook-home-head {
    padding: 12px 16px;
  }

  .shell-notebooks .notebook-home-grid {
    padding: 14px 16px 20px;
  }

  .shell-notebooks .notebook-home-head h2 {
    font-size: 28px;
  }
}

@media (max-width: 1040px) {
}

/* One shared desktop header for every module */

@media (min-width: 1041px) {
  .shell {
    width: min(1440px, calc(100% - 32px));
    min-height: 100vh;
    padding-top: 8px;
  }

  .shell-notebooks {
    width: min(1680px, calc(100% - 24px));
  }

  .shell .topbar,
  .shell-notebooks .topbar {
    grid-template-columns: minmax(110px, 1fr) auto;
    gap: 24px;
    width: auto;
    min-height: 52px;
    margin: 0;
    padding: 0 18px 7px;
    border-bottom-color: var(--line);
  }

  .shell-notebooks .topbar {
    width: min(1440px, calc(100% - 8px));
    margin-right: auto;
    margin-left: auto;
  }

  .shell .module-page-title {
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
  }

  .shell .topbar-side {
    flex-direction: row-reverse;
    gap: 12px;
  }

  .shell .desktop-module-nav,
  .shell .topbar-system,
  .shell .top-actions {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell .desktop-module-nav {
    gap: 4px;
    padding: 0;
  }

  .shell .desktop-module-nav a {
    position: relative;
    gap: 7px;
    min-width: 0;
    min-height: 34px;
    padding: 6px 9px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #575b55;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
  }

  .shell .desktop-module-nav a::after {
    position: absolute;
    right: 10px;
    bottom: 0;
    left: 10px;
    height: 2px;
    background: transparent;
    content: "";
  }

  .shell .desktop-module-nav a:hover,
  .shell .desktop-module-nav a:focus-visible,
  .shell .desktop-module-nav a.is-active {
    border: 0;
    background: transparent;
    color: var(--accent);
    box-shadow: none;
    outline: none;
    transform: none;
  }

  .shell .desktop-module-nav a.is-active::after {
    background: var(--accent);
  }

  .shell .topbar-system {
    padding: 0;
  }

  .shell .topbar-system .density-icon-toggle {

    width: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
  }

  .shell .topbar-system .density-icon-toggle:hover,
.shell .topbar-system .density-icon-toggle:focus-visible {
    background: var(--accent-soft);
    color: var(--accent);
    outline: none;
  }

  .shell .top-actions {
    gap: 4px;
    padding: 0;
  }

  .shell .top-actions-system {
    padding-left: 0;
    border-left: 0;
  }

  .shell .top-actions .button,
  .shell .top-actions button {
    min-height: 34px;
    padding: 7px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #666a63;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
  }

  .shell .top-actions .button:hover,
  .shell .top-actions button:hover,
  .shell .top-actions .button:focus-visible,
  .shell .top-actions button:focus-visible,
  .shell .top-actions button[aria-pressed="true"] {
    background: var(--accent-soft);
    color: var(--accent);
    outline: none;
  }

  .shell .top-actions .top-action-primary,
  .shell .top-actions .top-action-primary:hover,
  .shell .top-actions .top-action-primary:focus-visible {
    min-width: 72px;
    padding-inline: 16px;
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 7px 16px rgba(36, 91, 67, 0.14);
  }
}

/* Notebook workspace-specific finishing rules */

.shell-notebooks .topbar {
  position: relative;
  border-bottom-color: transparent;
}

.shell-notebooks .topbar::after {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 100vw;
  height: 1px;
  background: var(--line);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.notebook-tree-menu-popover .notebook-tree-delete {
  color: var(--danger);
}

.notebook-tree-menu-popover .notebook-tree-delete:disabled,
.notebook-workspace-actions button:disabled {
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.68;
}

.notebook-tree-menu-popover .notebook-tree-delete:disabled:hover,
.notebook-tree-menu-popover .notebook-tree-delete:disabled:focus-visible,
.notebook-workspace-actions button:disabled:hover,
.notebook-workspace-actions button:disabled:focus-visible {
  background: transparent;
  color: var(--muted);
  outline: none;
}

/* English learning workspace */

.shell-english .desktop-module-nav a::before,
.shell-english + .module-nav a::before {
  display: none;
}

.english-tabs {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 18px;
  min-height: 50px;
  padding: 0 32px;
  border-bottom: 1px solid var(--line);
}

.english-tabs > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 58px;
  justify-content: center;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.english-tabs > a.is-active {
  color: var(--accent);
}

.english-tabs > a.is-active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  content: "";
}

.dictionary-page {
  width: min(940px, calc(100% - 64px));
  margin: 0 auto;
  padding: 42px 0 84px;
}

.dictionary-page-head {
  display: grid;
  gap: 7px;
  margin-bottom: 24px;
}

.dictionary-page-head h2 {
  margin: 0;
}

.dictionary-page-head h2 {
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 31px;
  line-height: 1.2;
}

.dictionary-lookup-form {
  display: grid;
  gap: 10px;
}

.dictionary-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}

.dictionary-search-field {
  position: relative;
  min-width: 0;
}

.dictionary-search-field > label {
  position: relative;
  display: block;
  min-width: 0;
}

.dictionary-search-field > label > i {
  position: absolute;
  top: 50%;
  left: 15px;
  color: var(--muted);
  font-size: 19px;
  pointer-events: none;
  transform: translateY(-50%);
}

.dictionary-search-row input {
  width: 100%;
  height: 50px;
  padding: 10px 15px 10px 45px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

.dictionary-search-row .word-lookup-button {
  height: 50px;
  min-height: 50px;
  padding-inline: 20px;
}

.dictionary-recent-panel {
  position: absolute;
  z-index: 24;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  display: grid;
  gap: 7px;
  max-height: 250px;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(28, 36, 31, 0.14);
}

.dictionary-recent-panel[hidden] { display: none; }
.dictionary-recent-panel > strong { color: var(--muted); font-size: 12px; }
.dictionary-recent-list { display: grid; gap: 3px; }
.dictionary-recent-list button {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  justify-content: flex-start;
  text-align: left;
}

.dictionary-recent-list button:hover,
.dictionary-recent-list button:focus-visible { background: var(--accent-soft); color: var(--accent-dark); }

.word-lookup-panel.dictionary-results-panel {
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dictionary-results-panel .word-lookup-results {
  gap: 10px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.dictionary-results-panel .word-lookup-group {
  gap: 0;
}

.dictionary-results-panel .word-lookup-group h5 {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.25;
}

.dictionary-results-panel .word-lookup-list {
  gap: 0;
}

.dictionary-results-panel .word-lookup-item {
  padding: 5px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
}

.dictionary-results-panel .word-lookup-item:last-child {
  border-bottom: 0;
}

.dictionary-results-panel .word-lookup-item > label {
  gap: 10px;
}

.dictionary-results-panel :is(
  .word-lookup-group-pronunciation,
  .word-lookup-group-phonetic,
  .word-lookup-group-sense
) .word-lookup-item-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
  overflow-wrap: normal;
  white-space: nowrap;
}

.dictionary-results-panel :is(
  .word-lookup-group-pronunciation,
  .word-lookup-group-phonetic,
  .word-lookup-group-sense
) .word-lookup-item-text strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dictionary-results-panel :is(
  .word-lookup-group-pronunciation,
  .word-lookup-group-phonetic,
  .word-lookup-group-sense
) .word-lookup-item-text small {
  flex: 0 0 auto;
  white-space: nowrap;
}

.dictionary-results-panel .word-lookup-item-actions {
  gap: 4px;
  flex-wrap: nowrap;
}

.word-lookup-panel.dictionary-results-panel .word-lookup-item-actions .button.compact {
  min-height: 36px;
  padding: 5px 9px;
}

.dictionary-results-panel .word-lookup-item-attribution > summary {
  width: 28px;
  height: 28px;
}

.word-lookup-actions.dictionary-lookup-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}

.dictionary-lookup-actions > span {
  line-height: 1.5;
}

.dictionary-save-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.dictionary-save-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.dictionary-save-controls select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 40px;
}

.dictionary-save-button {
  width: auto;
  min-height: 40px;
  padding-inline: 10px;
  white-space: nowrap;
}

.dictionary-save-button.is-saving {
  cursor: progress;
  opacity: 0.78;
}

.dictionary-save-status {
  display: block;
  min-width: 0;
  margin-inline: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
  overflow-wrap: anywhere;
}

.dictionary-save-status:not(:empty) {
  margin-top: 6px;
}

.dictionary-save-status.is-success,
.dictionary-save-status.is-duplicate,
.dictionary-save-status.is-saved {
  color: var(--success);
}

.dictionary-save-status.is-saved {
  font-weight: 650;
}

.dictionary-save-status.is-restorable {
  color: var(--muted);
}

.dictionary-save-status.is-error {
  color: var(--danger);
}

.dictionary-readonly-hint {
  display: none;
}

.english-directory-backdrop,
.english-directory-frame,
.english-directory-grabber,
.english-directory-show {
  display: none;
}

.english-directory-show svg,
.english-directory-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.english-layout {
  display: grid;
  min-height: calc(100vh - 148px);
}

.grammar-layout {
  grid-template-columns: 290px minmax(0, 1fr);
}

.words-layout {
  --wordbook-sidebar-width: 290px;
  position: relative;
  grid-template-columns: minmax(0, var(--wordbook-sidebar-width)) minmax(0, 1fr);
}

.words-layout.is-wordbook-sidebar-hidden {
  grid-template-columns: 0 minmax(0, 1fr);
}

.english-wordbook-sidebar-frame {
  position: relative;
  min-width: 0;
  height: 100%;
}

.english-wordbook-sidebar-frame .wordbook-directory {
  height: 100%;
}

.english-wordbook-sidebar-hide {
  opacity: 0.42;
  pointer-events: auto;
  visibility: visible;
}

.words-layout.is-wordbook-sidebar-hidden .english-wordbook-sidebar-frame {
  overflow: hidden;
}

.english-directory,
.wordbook-directory {
  min-width: 0;
  padding: 30px 20px 34px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
}

.english-directory section + section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.english-directory h3 {
  margin: 0 10px 7px;
  font-family: "SimSun", "Songti SC", serif;
  font-size: 18px;
}

.english-directory a {
  display: grid;
  gap: 0;
  margin: 0 0 1px;
  padding: 6px 10px 6px 16px;
  border-left: 2px solid transparent;
  color: var(--text);
  line-height: 1.4;
  text-decoration: none;
}

.english-directory a span {
  color: var(--muted);
  font-size: 12px;
}

.english-directory a strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.english-directory a:hover,
.english-directory a:focus-visible,
.english-directory a.is-active {
  border-left-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.grammar-document,
.practice-page {
  width: min(1060px, calc(100% - 80px));
  margin: 0 auto;
  padding: 34px 0 72px;
  font-family: "SimSun", "Songti SC", serif;
}

.grammar-document-head,
.practice-head,
.word-edit-page > header,
.deleted-words-page > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.grammar-kicker,
.practice-head p,
.word-edit-page > header p,
.deleted-words-page > header p {
  margin: 0 0 6px;
  color: var(--accent);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.grammar-document-head h2,
.practice-head h2,
.word-edit-page > header h2,
.deleted-words-page > header h2 {
  margin: 0;
  font-family: "SimSun", "Songti SC", serif;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.25;
}

.grammar-practice-button {
  flex: none;
  min-height: 42px;
  padding-inline: 18px;
}

.grammar-markdown {
  color: var(--text);
  font-size: 17px;
  line-height: 1.68;
}

.grammar-markdown > h2:first-child {
  display: none;
}

.grammar-markdown h1,
.grammar-markdown h2,
.grammar-markdown h3,
.grammar-markdown h4,
.grammar-markdown h5,
.grammar-markdown h6 {
  color: var(--accent);
  font-weight: 600;
}

.grammar-markdown h3 {
  margin: 24px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 22px;
}

.grammar-markdown h4 { margin: 20px 0 7px; font-size: 19px; }
.grammar-markdown h5,
.grammar-markdown h6 { margin: 15px 0 6px; font-size: 17px; }
.grammar-markdown p { margin: 5px 0; }
.grammar-markdown ul,
.grammar-markdown ol { margin: 5px 0 12px; padding-left: 1.5em; }
.grammar-markdown code {
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.96em;
}

.grammar-table-wrap {
  max-width: 100%;
  margin: 18px 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.grammar-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.grammar-table-wrap th,
.grammar-table-wrap td {
  padding: 9px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.grammar-table-wrap th { background: var(--panel-soft); }
.grammar-table-wrap tr:last-child td { border-bottom: 0; }
.grammar-table-wrap th:last-child,
.grammar-table-wrap td:last-child { border-right: 0; }

.practice-page { padding-top: 40px; }
.practice-progress-label { display: flex; justify-content: space-between; margin: 40px 0 8px; font-size: 16px; }
.practice-progress { height: 5px; overflow: hidden; border-radius: 9px; background: var(--line-soft); }
.practice-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.practice-question { margin-top: 42px; }
.practice-type { margin: 0 0 18px; color: var(--accent); font-family: "Microsoft YaHei", sans-serif; font-weight: 700; }
.practice-question h3 { margin: 0 0 24px; font-size: 28px; font-weight: 500; }
.practice-sentence { margin: 0 0 28px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 2.4vw, 34px); line-height: 1.35; }
.practice-options { display: grid; gap: 12px; }
.practice-options label { position: relative; display: block; cursor: pointer; }
.practice-options input { position: absolute; opacity: 0; }
.practice-options span { display: flex; align-items: center; min-height: 64px; padding: 13px 18px 13px 58px; border: 1px solid var(--line); border-radius: 7px; font-size: 17px; line-height: 1.45; }
.practice-options span::before { position: absolute; left: 20px; width: 23px; height: 23px; border: 1px solid var(--muted); border-radius: 50%; content: ""; }
.practice-options input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.practice-options input:checked + span::before { border: 6px solid var(--panel); background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.practice-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.practice-cloze { display: grid; gap: 8px; }
.practice-cloze input { min-height: 50px; font-family: Georgia, serif; font-size: 20px; }
.practice-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 30px; }
.practice-actions .ghost { margin-right: auto; border-color: transparent; background: transparent; }
.practice-feedback { margin-top: 24px; padding: 20px 22px; border-left: 3px solid var(--success); background: var(--accent-soft); }
.practice-feedback.is-incorrect { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--panel)); }
.practice-feedback h4 { margin: 0 0 10px; color: var(--success); font-family: "Microsoft YaHei", sans-serif; font-size: 18px; }
.practice-feedback.is-incorrect h4 { color: var(--danger); }
.practice-feedback p { margin: 7px 0; }
.practice-source { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); }
.practice-summary { text-align: center; }
.practice-summary > h2 { margin: 40px 0 6px; font-size: 42px; font-weight: 500; }
.summary-lead { color: var(--muted); }
.practice-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 620px; margin: 42px auto; background: var(--line); border: 1px solid var(--line); }
.practice-stats div { display: grid; gap: 5px; padding: 26px 16px; background: var(--panel); }
.practice-stats strong { color: var(--accent); font-size: 38px; font-weight: 500; }
.summary-actions { display: flex; justify-content: center; gap: 12px; }
.summary-actions form { margin: 0; }

.wordbook-directory { position: relative; display: flex; flex-direction: column; }
.wordbook-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wordbook-title h2 { margin: 0; font-family: "SimSun", serif; font-size: 20px; }
.wordbook-create-details { position: relative; }
.wordbook-create-details > summary { cursor: pointer; list-style: none; }
.wordbook-create-details > summary::-webkit-details-marker { display: none; }
.wordbook-create-details > summary.wordbook-create-trigger { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border-color: transparent; border-radius: 50%; background: transparent; color: var(--accent); box-shadow: none; }
.wordbook-create-trigger:hover,
.wordbook-create-trigger:focus-visible,
.wordbook-create-details[open] > .wordbook-create-trigger { border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); background: var(--accent-soft); color: var(--accent-dark); box-shadow: none; }
.wordbook-create-symbol { position: relative; display: block; width: 21px; height: 21px; }
.wordbook-create-symbol .ri-book-2-line { position: absolute; inset: 0; font-size: 21px; line-height: 21px; }
.wordbook-create-symbol .ri-add-line { position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; width: 12px; height: 12px; border: 1px solid var(--panel); border-radius: 50%; background: var(--accent); color: var(--panel); font-size: 10px; font-weight: 800; line-height: 10px; }
.wordbook-create { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-bottom: 12px; }
.wordbook-create-details .wordbook-create { position: absolute; z-index: 18; top: calc(100% + 6px); right: 0; width: 245px; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); box-shadow: var(--shadow); }
.wordbook-directory nav { display: grid; gap: 3px; }
.wordbook-directory nav > a,
.wordbook-row > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 9px 12px; border-left: 2px solid transparent; text-decoration: none; }
.wordbook-directory nav > a.is-active,
.wordbook-row.is-active > a { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.wordbook-directory nav strong { color: var(--muted); font-weight: 500; }
.wordbook-row { position: relative; display: block; }
.wordbook-actions { position: absolute; top: 5px; right: 38px; width: 34px; opacity: 0; }
.wordbook-row:hover > .wordbook-actions,
.wordbook-row:focus-within > .wordbook-actions,
.wordbook-row.is-active > .wordbook-actions { opacity: 1; }
.wordbook-actions > summary { display: grid; place-items: center; min-height: 34px; cursor: pointer; list-style: none; }
.wordbook-actions summary::-webkit-details-marker { display: none; }
.wordbook-menu { position: absolute; z-index: 20; right: 0; display: grid; box-sizing: border-box; width: 196px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); }
.wordbook-name { display: flex; min-width: 0; align-items: center; gap: 7px; }
.wordbook-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wordbook-default-mark { flex: 0 0 auto; color: var(--accent); font-size: 13px; }
.wordbook-default-form { margin: 0; }
.wordbook-menu-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.wordbook-menu-item:hover,
.wordbook-menu-item:focus-visible,
.wordbook-rename-details[open] > .wordbook-menu-item { background: var(--accent-soft); color: var(--accent-dark); }
.wordbook-menu-item:disabled { background: transparent; color: var(--muted); cursor: default; opacity: 0.82; }
.wordbook-menu-item svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.wordbook-rename-details { position: static; opacity: 1; }
.wordbook-rename-details > summary { list-style: none; }
.wordbook-rename-form { display: grid; gap: 8px; margin: 4px 0 7px; padding: 9px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel-soft); }
.wordbook-rename-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.wordbook-rename-form input { width: 100%; min-height: 36px; }
.wordbook-rename-form .button { justify-self: end; width: auto; }
.wordbook-delete-form { margin: 0; }
.wordbook-delete-form .wordbook-menu-item { color: var(--danger); }
.wordbook-delete-form .wordbook-menu-item:hover,
.wordbook-delete-form .wordbook-menu-item:focus-visible { background: color-mix(in srgb, var(--danger) 9%, var(--panel)); color: var(--danger); }
.deleted-words-link { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; margin-top: auto; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 6px; background: color-mix(in srgb, var(--panel) 78%, transparent); color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.deleted-words-link:hover,
.deleted-words-link:focus-visible { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); background: var(--accent-soft); color: var(--accent-dark); outline: none; }
.deleted-words-link i { flex: 0 0 18px; width: 18px; height: 18px; font-size: 17px; font-weight: 400; line-height: 18px; text-align: center; }

.words-main { min-width: 0; padding: 24px 46px 70px; }
.words-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.words-heading-meta { display: flex; flex: 1 1 auto; align-items: baseline; gap: 10px; min-width: 0; }
.words-heading h2 { min-width: 0; margin: 0; overflow: hidden; font-family: "SimSun", serif; font-size: 34px; font-weight: 500; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; }
.words-heading p { flex: 0 0 auto; margin: 0; color: var(--muted); line-height: 1.3; white-space: nowrap; }
.words-add-button { flex: 0 0 auto; white-space: nowrap; }
.word-search label { position: relative; display: block; }
.word-search i { position: absolute; top: 50%; left: 13px; color: var(--muted); transform: translateY(-50%); }
.word-search input { width: 100%; padding-left: 40px; }
.word-list-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 14px 0; }
.word-filters { display: flex; gap: 9px; margin: 14px 0; }
.word-list-controls .word-filters { margin: 0; }
.word-filters a { min-width: 58px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 6px; text-align: center; text-decoration: none; }
.word-filters a.is-active { border-color: var(--accent); background: var(--accent); color: white; }
.word-display-switch[hidden] { display: none; }
.word-display-switch { display: inline-grid; grid-template-columns: repeat(3, auto); overflow: hidden; margin-left: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.word-display-switch button { min-width: 46px; min-height: 32px; padding: 5px 9px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; line-height: 1; cursor: pointer; }
.word-display-switch button:last-child { border-right: 0; }
.word-display-switch button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; }
.word-display-switch button:hover { color: var(--accent-dark); }
.word-display-switch button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--accent); outline-offset: -2px; }
.word-list { border-top: 1px solid var(--line); }
.word-row { border-bottom: 1px solid var(--line); }
.word-row > summary { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(100px, 0.8fr) minmax(220px, 2.2fr) auto; align-items: center; gap: 16px; min-height: 56px; padding: 8px 18px; cursor: pointer; list-style: none; }
html[data-word-display-mode="english"] .word-row > summary { grid-template-columns: minmax(0, 1fr) auto auto auto; }
html[data-word-display-mode="chinese"] .word-row > summary { grid-template-columns: minmax(0, 1fr) auto; }
.word-row > summary > .word-pos { display: none; }
html[data-word-display-mode="english"] .word-row > summary > .word-pos { display: block; }
html[data-word-display-mode="english"] .word-row > summary > .word-meaning,
html[data-word-display-mode="chinese"] .word-row > summary > :is(.word-term, .word-phonetic, .word-pos) { display: none; }
.word-row > summary::-webkit-details-marker { display: none; }
.word-row[open] { border-left: 2px solid var(--accent); }
.word-row[open] > summary { background: var(--accent-soft); }
.word-term { color: var(--accent-dark); font-family: Georgia, serif; font-size: 21px; font-weight: 600; }
.word-phonetic { color: var(--muted); font-family: Georgia, serif; }
.word-pos { color: var(--muted); font-family: Georgia, serif; font-style: italic; }
.word-meaning { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.word-meaning-pos { flex: none; color: var(--muted); font-family: Georgia, serif; font-style: italic; }
.word-meaning-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.word-status { text-align: right; font-size: 14px; }
.word-row-actions { display: inline-flex; align-items: center; justify-self: end; gap: 4px; }
.word-status-toggle { display: inline-flex; align-items: center; justify-content: center; justify-self: end; width: fit-content; min-width: 32px; min-height: 30px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font: inherit; font-size: 12px; line-height: 1; white-space: nowrap; cursor: pointer; }
.word-status-toggle.is-mastered { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: var(--accent-soft); color: var(--accent-dark); }
.word-pronunciation-toggle.is-speaking,
.word-pronunciation-toggle[aria-busy="true"] { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: var(--accent-soft); color: var(--accent-dark); }
.word-pronunciation-toggle.has-speech-error { border-color: color-mix(in srgb, var(--danger) 48%, var(--line)); color: var(--danger); }
.word-status-toggle:hover,
.word-status-toggle:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 76%, var(--panel)); color: var(--accent-dark); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.word-familiarity-form { display: none; }
.word-detail { position: relative; padding: 15px 24px 18px; border-top: 1px solid var(--line-soft); }
.word-detail-sections { display: grid; gap: 10px; padding-right: 180px; }
.word-detail-group { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 10px; }
.word-detail h4 { margin: 1px 0 0; color: var(--accent); font-size: 15px; white-space: nowrap; }
.word-detail-group > p { margin: 0; }
.word-detail-group-pronunciation > p { color: var(--muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.word-detail-group-pronunciation a { color: var(--muted); text-underline-offset: 2px; }
.word-detail-group-pronunciation a:hover { color: var(--accent-dark); }
.word-senses { display: flex; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.word-sense { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.word-sense em { color: var(--muted); }
.word-examples { min-width: 0; margin: 0; padding: 0; list-style: none; }
.word-examples li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 6px; }
.word-examples li:last-child { margin-bottom: 0; }
.word-example-english { font-family: Georgia, serif; font-size: 17px; }
.word-example-chinese { color: var(--muted); }
.word-example-attribution { display: inline-flex; align-items: baseline; color: var(--muted); font-family: inherit; font-size: 12px; line-height: 1.4; }
.word-example-attribution > summary { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; color: var(--muted); list-style: none; cursor: pointer; }
.word-example-attribution > summary::-webkit-details-marker { display: none; }
.word-example-attribution > summary:hover,
.word-example-attribution > summary:focus-visible { background: var(--accent-soft); color: var(--accent-dark); outline: none; }
.word-example-attribution[open] { flex: 1 0 100%; gap: 6px; }
.word-example-attribution-text { flex: 1 1 auto; min-width: 0; color: var(--muted); }
.word-example-attribution a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.word-detail-actions { position: absolute; top: 12px; right: 20px; display: flex; align-items: center; min-height: 34px; gap: 8px; }
.word-detail-actions form { display: flex; align-items: center; margin: 0; }
.word-detail-actions a,
.word-detail-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; box-shadow: none; cursor: pointer; }
.word-detail-actions a:hover,
.word-detail-actions a:focus-visible { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--accent-soft); color: var(--accent-dark); }
.word-detail-actions button { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); color: var(--danger); }
.word-detail-actions button:hover,
.word-detail-actions button:focus-visible { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--panel)); color: var(--danger); }
.word-detail-actions i { font-size: 15px; font-weight: 400; line-height: 1; }
.word-book-chips { display: flex; flex-wrap: wrap; min-width: 0; gap: 7px; }
.word-book-chips a,
.word-book-chips span { max-width: 100%; overflow: hidden; padding: 3px 9px; border: 1px solid var(--line); border-radius: 5px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.word-inline-edit-form { margin-top: 36px; padding: 20px; gap: 16px; }
.word-inline-edit-form[hidden],
[data-word-read-view][hidden] { display: none; }
.word-inline-edit-heading h4 { margin: 0 0 4px; }
.word-inline-edit-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.english-form.word-inline-edit-form footer { position: static; padding-top: 0; background: transparent; }
.word-term-lookup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.word-term-lookup-row > label { min-width: 0; }
.word-term-lookup-row > label > input,
.word-lookup-button { height: 44px; min-height: 44px; }
.word-lookup-button { white-space: nowrap; }
.word-lookup-panel[hidden] { display: none; }
.word-lookup-panel { display: grid; gap: 14px; padding: 15px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 7px; background: color-mix(in srgb, var(--accent-soft) 56%, var(--panel)); }
.word-lookup-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0; }
.word-lookup-panel > header > div { display: grid; gap: 3px; }
.word-lookup-panel > header strong { color: var(--accent-dark); }
.word-lookup-panel > header span { color: var(--muted); font-size: 13px; }
.word-lookup-results { display: grid; gap: 16px; max-height: 380px; overflow-y: auto; overscroll-behavior: contain; padding-right: 3px; }
.add-word-dialog .word-lookup-results { max-height: none; overflow-y: visible; overscroll-behavior: auto; padding-right: 0; }
.word-lookup-group { display: grid; gap: 7px; }
.word-lookup-group h5 { margin: 0; color: var(--text); font-size: 14px; }
.word-lookup-list { display: grid; gap: 6px; }
.word-lookup-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel); }
.word-lookup-item > label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; cursor: pointer; }
.word-lookup-item > label > input { margin: 0; }
.word-lookup-item.is-static > .word-lookup-item-text { padding-left: 2px; }
.word-lookup-item-text { display: grid; min-width: 0; gap: 2px; overflow-wrap: anywhere; }
.word-lookup-item-text strong { color: var(--text); font-weight: 650; }
.word-lookup-item-text small { color: var(--muted); font-family: Georgia, "Times New Roman", serif; font-size: 13px; }
.word-lookup-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.word-lookup-item-text em,
.word-lookup-source { width: fit-content; max-width: 100%; padding: 1px 5px; border-radius: 4px; background: var(--line-soft); color: var(--muted); font-size: 11px; font-style: normal; overflow-wrap: anywhere; text-decoration: none; }
.word-lookup-source:hover { color: var(--accent-dark); }
.word-lookup-attributions { width: fit-content; max-width: 100%; color: var(--muted); font-size: 12px; }
.word-lookup-attributions > summary { width: fit-content; cursor: pointer; color: var(--muted); font-weight: 650; }
.word-lookup-attributions > ul { display: grid; gap: 5px; margin: 7px 0 0; padding-left: 20px; }
.word-lookup-attributions a { color: var(--muted); overflow-wrap: anywhere; }
.word-lookup-attributions a:hover { color: var(--accent-dark); }
.word-lookup-group-phonetic .word-lookup-item-text strong,
.word-lookup-group-example .word-lookup-item-text strong { font-family: Georgia, "Times New Roman", serif; }
.word-lookup-item-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.word-lookup-item-attribution { position: relative; }
.word-lookup-item-attribution > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--muted);
  list-style: none;
  cursor: pointer;
}
.word-lookup-item-attribution > summary::-webkit-details-marker { display: none; }
.word-lookup-item-attribution > summary:hover,
.word-lookup-item-attribution > summary:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-dark);
  outline: none;
}
.word-lookup-item-attribution-content {
  position: absolute;
  z-index: 12;
  top: calc(100% + 5px);
  right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: max-content;
  max-width: min(280px, calc(100vw - 30px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 10px 26px rgba(28, 36, 31, 0.16);
}
.word-lookup-speak { gap: 4px; min-width: 64px; }
.word-lookup-speak.is-speaking { border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); background: var(--accent-soft); color: var(--accent-dark); }
.word-lookup-copy { min-width: 52px; }
.word-lookup-empty,
.word-lookup-message { margin: 0; padding: 9px 10px; border-radius: 5px; background: color-mix(in srgb, var(--panel) 76%, transparent); color: var(--muted); font-size: 13px; }
.word-lookup-message[data-state="error"] { color: var(--danger); }
.word-lookup-warnings { margin: 0; padding: 9px 10px 9px 28px; border-radius: 5px; background: var(--warning-bg); color: var(--muted); font-size: 13px; }
.word-lookup-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.word-lookup-actions[hidden] { display: none; }
.word-lookup-actions > span { color: var(--muted); font-size: 13px; }
.add-word-details { border: 1px solid var(--line); border-radius: 7px; }
.add-word-details > summary { min-height: 42px; padding: 10px 13px; cursor: pointer; list-style-position: inside; color: var(--accent-dark); font-weight: 700; }
.add-word-details-body { display: grid; gap: 16px; padding: 4px 13px 15px; border-top: 1px solid var(--line-soft); }

.add-word-dialog { padding: 0; border: 0; background: transparent; }
.add-word-dialog::backdrop { background: rgba(14, 18, 15, 0.42); }
.english-directory-sheet { width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 20px; background: var(--panel); }
.english-directory-sheet > header,
.add-word-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.english-directory-sheet h2,
.add-word-dialog h2 { margin: 0; font-family: "SimSun", serif; }
.english-directory-sheet .english-directory { display: block; padding: 0; border: 0; }
.english-directory-sheet .wordbook-directory { padding: 0; border: 0; }
.add-word-dialog > form { display: grid; gap: 17px; width: min(720px, 92vw); max-height: 90vh; overflow-y: auto; padding: 24px; border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); }
.add-word-dialog header p { margin: 1px 0 0; color: var(--muted); }
.add-word-dialog label { display: grid; gap: 7px; }
.add-word-dialog footer,
.english-form footer { display: flex; justify-content: flex-end; gap: 10px; }

.word-edit-page,
.deleted-words-page { width: min(900px, calc(100% - 48px)); margin: 0 auto; padding: 38px 0 80px; }
.deleted-words-page > .deleted-words-head { align-items: center; gap: 16px; margin-bottom: 16px; }
.deleted-words-title { display: flex; min-width: 0; align-items: center; gap: 10px; }
.deleted-words-title h2 { flex: 0 0 auto; line-height: 1.1; white-space: nowrap; }
.deleted-words-title > span { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 26px; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
.deleted-words-head .deleted-words-back { flex: 0 0 auto; gap: 6px; width: auto; min-height: 36px; padding: 6px 11px; border-radius: 6px; font-size: 13px; white-space: nowrap; }
.deleted-words-head .deleted-words-back i { font-size: 15px; font-weight: 400; line-height: 1; }
.english-form { display: grid; gap: 20px; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.english-form label { display: grid; gap: 7px; }
.english-form label > span,
.english-form legend { font-weight: 700; }
.english-form small { color: var(--muted); }
.english-form textarea { width: 100%; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.english-form fieldset { padding: 15px; border: 1px solid var(--line); border-radius: 7px; }
.wordbook-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.wordbook-checks label { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 8px; width: auto; min-width: 0; min-height: 40px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); line-height: 1.2; white-space: nowrap; cursor: pointer; }
.wordbook-checks label:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel)); }
.wordbook-checks label:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: var(--accent-soft); color: var(--accent-dark); }
.wordbook-checks input[type="checkbox"] { flex: 0 0 18px; width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; accent-color: var(--accent); }
.wordbook-checks label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deleted-word-list { border-top: 1px solid var(--line); }
.deleted-word-list article { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.deleted-word-list article > div { display: flex; align-items: center; gap: 12px; }
.deleted-word-list span { color: var(--muted); }
.deleted-word-list form { margin: 0; }
.english-empty { display: grid; place-items: center; min-height: 320px; padding: 42px; color: var(--muted); text-align: center; }
.english-empty.compact { min-height: 260px; }
.english-empty h2,
.english-empty h3,
.english-empty p { margin: 4px 0; }
.english-empty i { color: var(--accent); font-size: 36px; }

@media (max-width: 1040px) {
  .grammar-layout,
  .words-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .word-row > summary { grid-template-columns: minmax(100px, 1fr) 100px minmax(190px, 2fr) auto; }
  .word-pos { display: none; }
}

@media (max-width: 1040px) {
  body.english-directory-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .english-tabs { min-height: 48px; padding: 0 16px; }
  .grammar-layout,
  .words-layout { display: block; min-height: auto; }
  .english-wordbook-sidebar-frame,
  .english-wordbook-sidebar-show { display: none !important; }
  .english-directory,
  .wordbook-directory { display: none; }

  .english-directory-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(2px);
  }

  .english-directory-backdrop:not([hidden]) {
    display: block;
  }

  .english-directory-frame {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    display: block;
    width: 100%;
    height: var(--app-mobile-sheet-height, min(82vh, 720px));
    max-height: var(--app-mobile-overlay-max-height, calc(100vh - 48px));
    padding-top: 16px;
    border: 1px solid var(--line-soft);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--panel);
    box-shadow: 0 -20px 50px rgba(15, 23, 42, 0.22);
    opacity: 0;
    pointer-events: none;
    transform: translateY(104%);
    visibility: hidden;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease, visibility 220ms ease;
  }

  @supports (height: 100dvh) {
    .english-directory-frame {
      height: var(--app-mobile-sheet-height, min(82dvh, 720px));
      max-height: var(--app-mobile-overlay-max-height, calc(100dvh - 48px));
    }
  }

  .english-layout.is-mobile-directory-open .english-directory-frame {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }

  .english-directory-grabber {
    position: absolute;
    top: 7px;
    left: 50%;
    z-index: 2;
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--line);
    pointer-events: none;
    transform: translateX(-50%);
  }

  .english-directory-show:not([hidden]) {
    position: fixed;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding: 0 14px 0 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line-soft));
    border-radius: 999px;
    background: var(--panel);
    color: var(--accent-dark);
    box-shadow: 0 10px 28px rgba(24, 33, 50, 0.18);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
  }

  .english-directory-show:hover,
  .english-directory-show:focus-visible {
    background: var(--panel);
    color: var(--accent-dark);
    outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
    outline-offset: 1px;
  }

  .grammar-document,
  .practice-page { width: 100%; padding: 26px 18px 100px; }
  .grammar-document-head,
  .practice-head { align-items: center; }
  .grammar-document-head h2,
  .practice-head h2 { font-size: 27px; }
  .grammar-document-head form { flex: none; }
  .grammar-practice-button { padding-inline: 12px; font-size: 14px; }
  .grammar-markdown { font-size: 16px; line-height: 1.68; }
  .grammar-markdown h3 { margin-top: 22px; padding-top: 16px; font-size: 20px; }
  .grammar-table-wrap { margin-right: 0; }
  .practice-head { align-items: flex-start; }
  .practice-head .button { padding-inline: 10px; font-size: 13px; }
  .practice-progress-label { margin-top: 28px; }
  .practice-question { margin-top: 30px; }
  .practice-question h3 { font-size: 23px; }
  .practice-sentence { font-size: 25px; }
  .practice-options span { min-height: 58px; padding-left: 52px; font-size: 16px; }
  .practice-actions { align-items: stretch; }
  .practice-actions .button { min-height: 44px; }
  .practice-stats { margin: 30px 0; }
  .summary-actions { flex-direction: column; }
  .summary-actions .button { width: 100%; }
  .words-main { padding: 20px 16px 100px; }
  .words-heading h2 { font-size: 29px; }
  .words-add-button { min-height: 40px; padding-inline: 12px; }
  .word-row > summary { grid-template-columns: minmax(120px, 1fr) minmax(0, 1.35fr) auto; gap: 8px; padding: 9px 8px; }
  html[data-word-display-mode="english"] .word-row > summary,
  html[data-word-display-mode="chinese"] .word-row > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .word-phonetic,
  .word-pos,
  html[data-word-display-mode="english"] .word-row > summary > .word-pos { display: none; }
  .word-term,
  .word-meaning { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .word-term { font-size: 19px; }
  .word-status { font-size: 12px; }
  .word-detail { padding: 10px 12px 12px; }
  .word-detail-sections { gap: 6px; padding-right: 0; }
  .word-detail-group { grid-template-columns: max-content minmax(0, 1fr); gap: 7px; }
  .word-detail-group-wordbooks { grid-template-columns: max-content minmax(0, 1fr) auto; align-items: center; }
  .word-detail-group-wordbooks .word-detail-actions { position: static; justify-self: end; min-height: 0; margin: 0; gap: 2px; }
  .word-detail-group-wordbooks .word-detail-actions a,
  .word-detail-group-wordbooks .word-detail-actions button { min-height: 28px; padding: 3px 4px; border: 0; border-radius: 4px; background: transparent; font-size: 12px; font-weight: 600; }
  .word-detail-group-wordbooks .word-detail-actions a { color: var(--muted); }
  .word-detail-group-wordbooks .word-detail-actions button { color: color-mix(in srgb, var(--danger) 78%, var(--muted)); }
  .word-detail-group-wordbooks .word-detail-actions a:hover,
  .word-detail-group-wordbooks .word-detail-actions a:focus-visible { border: 0; background: var(--accent-soft); color: var(--accent-dark); }
  .word-detail-group-wordbooks .word-detail-actions button:hover,
  .word-detail-group-wordbooks .word-detail-actions button:focus-visible { border: 0; background: color-mix(in srgb, var(--danger) 8%, var(--panel)); color: var(--danger); }
  .word-detail-group-wordbooks .word-detail-actions i { display: none; }
  .word-detail h4 { font-size: 14px; }
  .word-senses { gap: 2px 10px; }
  .word-sense { font-size: 14px; }
  .word-examples li { gap: 2px 6px; margin-bottom: 4px; }
  .word-example-english { font-size: 15px; }
  .word-example-chinese { font-size: 13px; }
  .word-book-chips { gap: 4px; }
  .word-book-chips a,
  .word-book-chips span { padding: 1px 6px; font-size: 13px; }
  .word-inline-edit-form { margin-top: 0; padding: 16px 12px; }
  .word-lookup-results { max-height: 330px; }
  .word-lookup-speak.button.compact { min-height: 40px; }
  .english-directory-sheet { width: 100%; height: 100%; max-height: none; border-radius: 18px 18px 0 0; padding: 12px 18px calc(24px + env(safe-area-inset-bottom)); }
  .english-directory-sheet .english-directory,
  .english-directory-sheet .wordbook-directory { display: block; }
  .english-directory-sheet .wordbook-directory { display: flex; min-height: calc(100% - 54px); }
  .english-directory-sheet > header { position: sticky; top: -12px; z-index: 3; min-height: 48px; margin-bottom: 8px; padding: 6px 0; background: var(--panel); }
  .english-directory-close { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; }
  .add-word-dialog { width: 100%; max-width: none; margin: auto 0 0; }
  .add-word-dialog > form { width: 100%; max-height: 88svh; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; }
  .dictionary-page,
  .word-edit-page,
  .deleted-words-page { width: 100%; padding: 26px 16px 100px; }
  .dictionary-page-head { margin-bottom: 20px; }
  .dictionary-page-head h2 { font-size: 27px; }
  .word-lookup-panel.dictionary-results-panel { padding: 0; }
  .dictionary-recent-panel { position: static; margin-top: 6px; box-shadow: none; }
  .word-lookup-actions.dictionary-lookup-actions { grid-template-columns: minmax(0, 1fr); align-items: center; }
  .dictionary-save-controls { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; width: 100%; }
  .dictionary-save-button { width: auto; min-height: 40px; padding-inline: 8px; }
  .deleted-words-page > .deleted-words-head { gap: 10px; }
  .deleted-words-title { gap: 7px; }
  .deleted-words-title h2 { font-size: 26px; }
  .deleted-words-title > span { min-height: 24px; padding-inline: 7px; }
  .deleted-words-head .deleted-words-back { min-height: 34px; padding-inline: 9px; }
  .form-grid { grid-template-columns: 1fr; }
  .english-form { padding: 18px 14px; }
  .english-form footer { position: sticky; bottom: 72px; padding-top: 10px; background: var(--panel-soft); }
  .add-word-dialog .english-form footer { bottom: 0; padding-bottom: 2px; background: var(--panel); }
  .deleted-word-list article { align-items: flex-start; }
  .deleted-word-list article > div:last-child { flex-direction: column; align-items: stretch; }
  .module-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 440px) {
  .word-lookup-panel:not(.dictionary-results-panel) .word-lookup-item.has-speech-action { grid-template-columns: minmax(0, 1fr); }
  .word-lookup-panel:not(.dictionary-results-panel) .word-lookup-item.has-speech-action .word-lookup-item-actions { justify-self: end; }
  .dictionary-search-row { grid-template-columns: 1fr; }
  .dictionary-search-row .word-lookup-button { width: 100%; }
}

@media (max-width: 400px) {
  .grammar-document-head { gap: 10px; }
  .grammar-document-head h2 { font-size: 24px; }
  .grammar-practice-button { padding-inline: 10px; }
  .word-row > summary { grid-template-columns: minmax(120px, 1fr) minmax(0, 1fr) auto; gap: 6px; }
  .word-status { min-width: 28px; padding-inline: 5px; font-size: 11px; }
  .word-term-lookup-row { grid-template-columns: 1fr; }
  .word-lookup-button { width: 100%; }
  .word-lookup-panel:not(.dictionary-results-panel) .word-lookup-item { align-items: start; }
  .word-lookup-actions:not(.dictionary-lookup-actions) { align-items: stretch; flex-flow: column nowrap; }
  .word-lookup-actions:not(.dictionary-lookup-actions) .button { width: 100%; }
  .word-lookup-panel .button.compact { min-height: 40px; }
}

/* User system */
.responsive-title-mobile {
  display: none;
}

.login-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
}

.login-card {
  width: min(610px, 100%);
  padding: 44px 42px 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  box-shadow: none;
}

.login-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 46px;
}

.login-brand {
  margin: 0;
  color: var(--accent);
  font-family: SimSun, "Songti SC", serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
}

.login-identity {
  display: grid;
  gap: 3px;
}

.login-tagline {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
}

.login-card h1 {
  margin: 0 0 31px;
  font-family: SimSun, "Songti SC", serif;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.2;
}

.login-card .form {
  gap: 20px;
}

.login-card .form > label {
  gap: 9px;
  font-size: 15px;
}

.login-card input {
  min-height: 52px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
}

.login-card input::placeholder {
  font-weight: 400;
}

.login-card .form > button {
  min-height: 52px;
  margin-top: 4px;
  font-size: 17px;
}

.login-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.login-consent > input {
  flex: 0 0 auto;
  width: 19px;
  min-height: 19px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.login-consent > input[aria-invalid="true"] {
  outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 2px;
}

.login-consent > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  min-width: 0;
}

.login-consent label,
.login-consent a {
  cursor: pointer;
}

.login-consent a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.login-consent a:hover,
.login-consent a:focus-visible,
.login-consent-dialog-link:hover,
.login-consent-dialog-link:focus-visible {
  text-decoration: underline;
}

.login-consent-dialog {
  width: min(430px, calc(100% - 28px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(24, 33, 50, 0.24);
}

.login-consent-dialog::backdrop {
  background: rgba(24, 33, 50, 0.46);
  backdrop-filter: blur(3px);
}

.login-consent-dialog-shell {
  display: grid;
  gap: 12px;
  padding: 26px;
}

.login-consent-dialog-eyebrow,
.login-consent-dialog h2,
.login-consent-dialog p {
  margin: 0;
}

.login-consent-dialog-eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
}

.login-consent-dialog h2 {
  font-family: SimSun, "Songti SC", serif;
  font-size: 25px;
  font-weight: 600;
}

.login-consent-dialog p:not(.login-consent-dialog-eyebrow) {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.login-consent-dialog-link {
  width: fit-content;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.login-consent-dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.login-consent-dialog-actions button {
  width: 100%;
  min-height: 46px;
}

.password-label,
.managed-user-section > .password-label {
  display: grid;
  gap: 8px;
}

.password-field {
  position: relative;
  display: block;
}

.password-field input {
  width: 100%;
  padding-right: 46px;
}

.password-field > button {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  transform: translateY(-50%);
  box-shadow: none;
}

.account-menu {
  position: relative;
}

.account-menu > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 10px 10px;
  color: #575b55;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
}

.account-menu > summary::after {
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 2px;
  background: transparent;
  content: "";
}

.account-menu > summary:hover,
.account-menu > summary:focus-visible,
.account-menu[open] > summary {
  color: var(--accent);
}

.account-menu[open] > summary::after {
  background: var(--accent);
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.account-menu > summary > i:first-child {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}

.account-menu-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  right: 0;
  width: 170px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.account-menu-popover > a,
.account-menu-popover .logout-form button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 38px;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: none;
}

.account-menu-popover > a:hover,
.account-menu-popover .logout-form button:hover {
  background: var(--accent-soft);
}

.logout-form button {
  gap: 8px;
}

.readonly-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
}

.shell.is-readonly form[method="post"],
.shell.is-readonly a[href$="/new"],
.shell.is-readonly a[href*="/edit"],
.shell.is-readonly [data-goal-create-open],
.shell.is-readonly .goal-create-dialog,
.shell.is-readonly .wordbook-create-details,
.shell.is-readonly .add-word-dialog,
.shell.is-readonly .word-detail-actions,
.shell.is-readonly [data-notebook-sort-toggle] {
  display: none !important;
}

.shell.is-readonly .topbar form[method="post"],
.shell.is-readonly .account-menu form[method="post"] {
  display: block !important;
}

.shell.is-readonly .dictionary-save-controls {
  display: none !important;
}

.shell.is-readonly .dictionary-readonly-hint {
  display: inline;
}

.shell.is-readonly .dictionary-lookup-form .word-lookup-item > label {
  grid-template-columns: minmax(0, 1fr);
  cursor: default;
}

.shell.is-readonly .dictionary-lookup-form .word-lookup-item > label > input {
  display: none;
}

.shell-users {
  width: min(1440px, calc(100% - 48px));
}

.user-management-layout {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  min-height: calc(100vh - 120px);
  border-top: 1px solid var(--line-soft);
}

.user-management-sidebar {
  padding: 36px 24px 32px 0;
  border-right: 1px solid var(--line);
}

.managed-user-search label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
}

.managed-user-search input {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.managed-user-filters {
  display: flex;
  gap: 28px;
  margin-top: 24px;
  border-bottom: 1px solid var(--line);
}

.managed-user-filters a {
  position: relative;
  padding: 10px 12px 14px;
  color: var(--muted);
  text-decoration: none;
}

.managed-user-filters a.is-active {
  color: var(--accent);
  font-weight: 700;
}

.managed-user-filters a.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--accent);
  content: "";
}

.managed-user-list {
  margin-top: 18px;
}

.managed-user-row {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 14px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
}

.managed-user-row.is-selected {
  background: var(--accent-soft);
}

.managed-user-row.is-selected::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--accent);
  content: "";
}

.managed-user-avatar,
.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}

.managed-user-avatar {
  width: 42px;
  height: 42px;
  font-size: 22px;
}

.managed-user-copy {
  display: grid;
  min-width: 0;
}

.managed-user-copy strong {
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  text-overflow: ellipsis;
}

.managed-user-copy small,
.managed-user-count {
  color: var(--muted);
}

.managed-user-count {
  margin: 18px 12px;
}

.status-badge,
.role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.status-badge.is-active {
  border-color: color-mix(in srgb, var(--success) 30%, var(--line));
  background: color-mix(in srgb, var(--success) 8%, transparent);
  color: var(--accent);
}

.user-management-detail {
  padding: 36px 0 32px 42px;
}

.managed-user-form,
.managed-user-embedded,
.user-detail-page {
  width: 100%;
}

.managed-user-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.managed-user-heading > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.managed-user-heading h2 {
  margin: 0 8px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.2;
}

.managed-user-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.managed-user-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.managed-user-section h3,
.user-create-panel h2,
.account-page-grid h2 {
  margin: 0;
  font-family: SimSun, "Songti SC", serif;
  font-weight: 500;
}

.managed-user-section h3 {
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 22px;
}

.managed-user-field {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 14px;
}

.managed-user-field input,
.managed-user-field select {
  min-height: 46px;
}

.permission-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.permission-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.permission-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.permission-row {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.permission-row legend {
  margin-bottom: 8px;
  padding: 0;
}

.permission-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.permission-segments label {
  position: relative;
  margin: 0;
}

.permission-segments label + label {
  border-left: 1px solid var(--line);
}

.permission-segments input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.permission-segments span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px;
  color: var(--muted);
  cursor: pointer;
}

.permission-segments input:checked + span {
  background: var(--accent);
  color: #fff;
}

.permission-segments input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.permission-section.is-admin .permission-segments {
  opacity: .76;
}

.managed-user-actions {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-top: 28px;
}

.managed-user-edit-actions {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: start;
}

.managed-user-edit-actions > form {
  margin: 0;
}

.managed-user-edit-actions > .reset-password-panel > summary,
.managed-user-edit-actions > form > button {
  width: auto;
}

.reset-password-panel {
  position: relative;
}

.reset-password-panel > summary {
  list-style: none;
}

.reset-password-panel > summary::-webkit-details-marker {
  display: none;
}

.reset-password-panel > form {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: min(360px, 86vw);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.reset-password-panel > form > * + * {
  margin-top: 14px;
}

.user-detail-page {
  max-width: 980px;
  margin: 0 auto;
}

.user-detail-mobile-head {
  display: none;
}

.user-detail-message {
  max-width: 980px;
  margin: 0 auto 14px;
}

.user-create-panel {
  max-width: 840px;
  margin: 0 auto;
  padding: 34px;
}

.user-create-panel > header p,
.account-password-panel > header p {
  color: var(--muted);
}

.user-create-panel .managed-user-actions {
  justify-content: flex-end;
}

.user-create-dialog {
  width: min(860px, calc(100% - 32px));
  max-width: none;
  max-height: min(90vh, 820px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(24, 33, 50, 0.24);
}

.user-create-dialog::backdrop {
  background: rgba(24, 33, 50, 0.42);
  backdrop-filter: blur(3px);
}

.user-create-dialog-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(90vh, 820px);
}

.user-create-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.user-create-dialog-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.user-create-dialog-head h2,
.user-create-dialog-head p {
  margin: 0;
}

.user-create-dialog-head h2 {
  font-size: 18px;
  line-height: 1.3;
}

.user-create-dialog-head p {
  color: var(--muted);
  font-size: 12px;
}

.user-create-dialog-head > button {
  flex: 0 0 auto;
  width: 34px;
  min-width: 34px;
  padding-inline: 0;
  font-size: 20px;
}

.user-create-dialog-body {
  min-height: 0;
  padding: 20px 24px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.user-create-dialog-form .managed-user-section:first-of-type {
  padding-top: 0;
}

.user-create-dialog-form .managed-user-actions {
  justify-content: flex-end;
}

.user-create-dialog-form .managed-user-actions > button {
  width: auto;
  min-width: 120px;
}

.user-create-error {
  margin: 0 0 16px;
}

@supports (height: 100dvh) {
  .user-create-dialog,
  .user-create-dialog-shell {
    max-height: min(90dvh, 820px);
  }
}

.account-page-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 18px;
  max-width: 1040px;
  margin: 0 auto;
}

.account-page-grid > .panel {
  padding: 28px;
}

.account-overview {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-content: start;
  align-items: center;
  gap: 18px;
}

.account-overview > .button {
  grid-column: 1 / -1;
}

.account-avatar {
  width: 64px;
  height: 64px;
  font-size: 28px;
}

.account-overview p,
.account-password-panel p {
  margin: 4px 0 0;
}

.account-password-panel .form {
  margin-top: 22px;
}

.success-message {
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--success) 8%, transparent);
  color: var(--accent);
}

.access-denied {
  max-width: 540px;
  margin: 80px auto;
  padding: 42px;
  text-align: center;
}

.access-denied > i {
  color: var(--accent);
  font-size: 36px;
}

@media (max-width: 1040px) {
  .responsive-title-desktop:has(+ .responsive-title-mobile) {
    display: none;
  }

  .responsive-title-mobile {
    display: inline;
  }

  .login-shell {
    align-items: start;
    padding-top: 11vh;
  }

  .login-card {
    padding: 28px 22px;
  }

  .login-card-head {
    margin-bottom: 30px;
  }

  .login-card h1 {
    font-size: 36px;
  }

  .mobile-account-label {
    display: inline;
  }

  .shell-users {
    width: 100%;
    padding: 0 16px 92px;
  }

  .user-management-layout {
    display: block;
    min-height: 0;
    border-top: 0;
  }

  .user-management-sidebar {
    padding: 10px 0 24px;
    border-right: 0;
  }

  .user-management-detail {
    display: none;
  }

  .user-management-layout.is-detail-view .user-management-sidebar {
    display: none;
  }

  .user-management-layout.is-detail-view .user-management-detail {
    display: block;
    padding: 10px 0 24px;
  }

  .managed-user-row {
    min-height: 82px;
  }

  .user-detail-mobile-head {
    display: block;
    margin-bottom: 20px;
  }

  .user-detail-mobile-head a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
  }

  .managed-user-heading {
    display: block;
    padding: 12px 0 26px;
  }

  .managed-user-heading h2 {
    font-size: 38px;
  }

  .managed-user-heading p {
    margin-top: 12px;
  }

  .managed-user-field {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
  }

  .permission-heading {
    display: block;
  }

  .permission-heading p {
    margin: -8px 0 16px;
  }

  .permission-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .permission-row {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .permission-row legend {
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 700;
  }

  .permission-segments span {
    min-height: 48px;
  }

  .managed-user-actions,
  .managed-user-secondary-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0;
  }

  .managed-user-actions {
    margin-top: 18px;
  }

  .managed-user-actions button,
  .managed-user-actions .button,
  .managed-user-secondary-actions button,
  .managed-user-secondary-actions .button,
  .managed-user-secondary-actions summary {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .managed-user-secondary-actions {
    margin: 10px 0 0;
  }

  .managed-user-secondary-actions > form {
    width: 100%;
    margin: 0;
  }

  .reset-password-panel > form {
    position: static;
    width: 100%;
    margin-top: 10px;
  }

  .user-create-panel {
    padding: 20px 16px;
  }

  .user-create-panel .managed-user-field,
  .user-create-dialog .managed-user-field {
    grid-template-columns: 1fr;
  }

  .user-create-dialog {
    width: calc(100% - 16px);
    max-height: calc(100vh - 24px);
    border-radius: 12px;
  }

  .user-create-dialog-shell {
    max-height: calc(100vh - 24px);
  }

  .user-create-dialog-head {
    padding: 12px 14px;
  }

  .user-create-dialog-body {
    padding: 16px;
  }

  .user-create-dialog-form .managed-user-actions > button {
    width: 100%;
  }

  @supports (height: 100dvh) {
    .user-create-dialog,
    .user-create-dialog-shell {
      max-height: calc(100dvh - 24px);
    }
  }

  .account-page-grid {
    grid-template-columns: 1fr;
  }

}

/* Private EPUB reading workspace */

.shell-reading .topbar {
  position: relative;
  border-bottom-color: transparent;
}

.shell-reading .topbar::after {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 100vw;
  height: 1px;
  background: var(--line);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.reading-library-page {
  width: 100%;
  padding: 0 0 32px;
}

.reading-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 4px 7px;
  border-bottom: 1px solid var(--line);
}

.reading-library-head > div:first-child {
  display: flex;
  min-width: 0;
  gap: 12px;
  align-items: baseline;
}

.reading-library-head > div:first-child .eyebrow {
  flex: 0 0 auto;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}

.reading-library-head h2 {
  margin: 0;
  overflow: hidden;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: clamp(21px, 1.7vw, 25px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-library-head-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

.reading-library-action-row,
.reading-book-actions,
.reading-shelf-folder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.reading-library-count {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  align-items: baseline;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

.reading-library-count strong {
  color: var(--accent);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

.reading-library-action-row {
  flex-wrap: nowrap;
}

.reading-library-action-row > .button {
  height: 34px;
  min-height: 34px;
  padding-inline: 10px;
}

.reading-library-notice {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 4px -8px;
  color: var(--accent-dark);
  font-size: 13px;
}

.reading-library-notice.is-error {
  color: var(--danger);
}

.reading-book-grid,
.reading-shelf-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 40px;
  padding-top: 14px;
}

.reading-shelf-list {
  min-width: 0;
}

.reading-shelf-folder {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 55%, transparent);
}

.reading-shelf-folder-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 6px 10px 6px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.reading-shelf-folder.is-collapsed .reading-shelf-folder-head {
  border-bottom-color: transparent;
}

.reading-shelf-folder-toggle {
  display: flex;
  gap: 11px;
  align-items: center;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.reading-shelf-folder-toggle:hover,
.reading-shelf-folder-toggle:focus-visible {
  border: 0;
  background: transparent;
  color: var(--accent);
  box-shadow: none;
  transform: none;
}

.reading-shelf-folder-toggle > i:first-child {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 24px;
}

.reading-shelf-folder-toggle > span {
  display: flex;
  gap: 7px;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
}

.reading-shelf-folder-toggle strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 20px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-shelf-folder-toggle small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.reading-shelf-folder-chevron {
  margin-left: 3px;
  color: var(--muted);
  font-size: 18px;
  transition: transform 160ms ease;
}

.reading-shelf-folder.is-collapsed .reading-shelf-folder-chevron {
  transform: rotate(180deg);
}

.reading-shelf-folder-actions {
  justify-content: flex-end;
}

.reading-shelf-folder-actions form {
  margin: 0;
}

.reading-shelf-folder-body {
  padding: 0 14px 4px;
}

.reading-folder-books {
  padding-top: 18px;
}

.reading-folder-empty {
  display: flex;
  grid-column: 1 / -1;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
}

.reading-folder-empty[hidden],
.reading-shelf-empty[hidden] {
  display: none;
}

.reading-book-card {
  position: relative;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  min-height: 258px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}

.reading-library-page[data-reading-shelf-can-write="true"] .reading-book-card,
.reading-library-page[data-reading-shelf-can-write="true"] .reading-shelf-folder-head {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.reading-shelf-is-dragging,
.reading-shelf-is-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}

.reading-book-card.is-dragging,
.reading-shelf-folder.is-dragging {
  padding: 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 38px rgba(24, 32, 26, 0.2);
  opacity: 0.96;
}

.reading-shelf-placeholder {
  min-height: 160px;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
}

.reading-shelf-placeholder.is-folder {
  grid-column: 1 / -1;
  min-height: 62px;
}

.reading-shelf-list.is-drop-target {
  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 7px;
}

.reading-book-cover {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--text));
  border-radius: 4px 10px 10px 4px;
  background: var(--panel-soft);
  box-shadow: -6px 10px 22px rgba(32, 36, 31, 0.12), inset 5px 0 0 rgba(255, 255, 255, 0.22);
  text-decoration: none;
  transform-origin: left center;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.reading-book-cover::after {
  position: absolute;
  inset: 0 auto 0 7px;
  width: 1px;
  background: rgba(0, 0, 0, 0.16);
  content: "";
}

.reading-book-cover:hover,
.reading-book-cover:focus-visible {
  box-shadow: -8px 14px 28px rgba(32, 36, 31, 0.16), inset 5px 0 0 rgba(255, 255, 255, 0.22);
  outline: none;
  transform: translateY(-3px) rotate(-0.4deg);
}

.reading-book-cover img,
.reading-book-cover > span {
  display: block;
  width: 100%;
  height: 100%;
}

.reading-book-cover img {
  object-fit: cover;
}

.reading-book-cover > span {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 44px;
}

.reading-book-copy {
  min-width: 0;
}

.reading-book-copy h2 {
  margin: 4px 0 3px;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
}

.reading-book-copy h2 a {
  text-decoration: none;
}

.reading-book-copy h2 a:hover,
.reading-book-copy h2 a:focus-visible {
  color: var(--accent);
}

.reading-book-author,
.reading-book-description {
  margin: 0;
  color: var(--muted);
}

.reading-book-description {
  margin-top: 5px;
  font-size: 13px;
}

.reading-book-progress {
  height: 4px;
  margin: 14px 0 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-soft);
}

.reading-book-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.reading-book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--muted);
  font-size: 12px;
}

.reading-book-meta span + span::before {
  margin-right: 10px;
  color: var(--line);
  content: "·";
}

.reading-continue-button {
  width: max-content;
  margin-top: 20px;
}

.reading-book-actions {
  margin-top: 14px;
}

.reading-book-actions .button {
  height: 38px;
  min-height: 38px;
  padding: 0 13px;
  font-size: 13px;
}

.reading-book-actions .reading-continue-button {
  margin-top: 0;
}

.reading-simple-mode .reading-shelf-top,
.reading-simple-mode .reading-folder-books {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 36px;
  padding-top: 8px;
}

.reading-simple-mode .reading-book-card {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  min-height: 70px;
  padding: 7px 0;
  cursor: grab;
}

.reading-simple-mode .reading-book-cover {
  width: 44px;
  height: 60px;
  border-radius: 3px 5px 5px 3px;
  box-shadow: -2px 4px 9px rgba(32, 36, 31, 0.12), inset 2px 0 0 rgba(255, 255, 255, 0.2);
}

.reading-simple-mode .reading-book-cover::after {
  left: 3px;
}

.reading-simple-mode .reading-book-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 3px 16px;
  align-items: center;
}

.reading-simple-mode .reading-book-copy > .eyebrow,
.reading-simple-mode .reading-book-description,
.reading-simple-mode .reading-book-progress {
  display: none;
}

.reading-simple-mode .reading-book-copy h2 {
  grid-row: 1;
  grid-column: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-simple-mode .reading-book-author {
  grid-row: 2;
  grid-column: 1;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-simple-mode .reading-book-meta {
  grid-row: 1;
  grid-column: 2;
  flex-wrap: nowrap;
  justify-content: flex-end;
  max-width: 220px;
  overflow: hidden;
  font-size: 11px;
  white-space: nowrap;
}

.reading-simple-mode .reading-book-meta span {
  flex: 0 0 auto;
}

.reading-simple-mode .reading-book-meta span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reading-simple-mode .reading-book-actions {
  grid-row: 2;
  grid-column: 2;
  flex-wrap: nowrap;
  justify-content: flex-end;
  margin-top: 0;
}

.reading-simple-mode .reading-book-actions .button {
  height: 30px;
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
}

.reading-simple-mode .reading-shelf-placeholder:not(.is-folder) {
  min-height: 70px;
}

.reading-empty {
  display: grid;
  grid-column: 1 / -1;
  min-height: 320px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 40px;
  color: var(--muted);
  text-align: center;
}

.reading-empty > i {
  color: var(--accent);
  font-size: 40px;
}

.reading-empty h2,
.reading-empty p {
  margin: 0;
}

.reading-reader {
  --reader-font-size: 19px;
  --reader-line-height: 1.9;
  --reader-content-width: 720px;
  position: relative;
  width: 100%;
}

.reading-progress-line {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 80;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.reading-progress-line span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 160ms linear;
}

.reading-reader-layout {
  --reading-sidebar-width: 278px;
  --reading-sidebar-gap: 30px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, var(--reading-sidebar-width)) minmax(0, 1fr);
  gap: var(--reading-sidebar-gap);
  align-items: start;
}

.reading-sidebar-frame {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.reading-sidebar {
  position: sticky;
  top: 14px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: calc(100vh - 28px);
  overflow: hidden;
  border-right: 1px solid var(--line);
}

.reading-reader-layout.is-reading-sidebar-hidden {
  grid-template-columns: 0 minmax(0, 1fr);
  gap: 0;
}

.reading-reader-layout.is-reading-sidebar-hidden .reading-sidebar-frame {
  overflow: hidden;
}

.reading-sidebar-book {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 78px;
  padding: 10px 18px 14px 0;
}

.reading-sidebar-book img {
  width: 54px;
  aspect-ratio: 2 / 3;
  border-radius: 2px 5px 5px 2px;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}

.reading-sidebar-book div {
  display: grid;
  min-width: 0;
}

.reading-sidebar-book strong,
.reading-sidebar-book span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-sidebar-book strong {
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 16px;
  font-weight: 600;
}

.reading-sidebar-book span {
  color: var(--muted);
  font-size: 12px;
}

.reading-sidebar-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-right: 18px;
  border-bottom: 1px solid var(--line);
}

.reading-sidebar-tabs button {
  position: relative;
  min-height: 38px;
  padding: 7px 8px 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 13px;
}

.reading-sidebar-tabs button::after {
  position: absolute;
  right: 8px;
  bottom: -1px;
  left: 8px;
  height: 2px;
  background: transparent;
  content: "";
}

.reading-sidebar-tabs button.is-active {
  color: var(--accent);
}

.reading-sidebar-tabs button.is-active::after {
  background: var(--accent);
}

.reading-sidebar-tabs button span {
  display: inline-grid;
  min-width: 18px;
  min-height: 18px;
  margin-left: 3px;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 10px;
}

.reading-sidebar-panel {
  min-height: 0;
  padding: 10px 18px 20px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.reading-directory {
  display: grid;
  gap: 1px;
}

.reading-directory-group {
  min-height: 31px;
  margin-top: 7px;
  padding: 8px 7px 4px calc(8px + var(--reading-toc-depth, 0) * 13px);
  color: var(--accent-dark);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

.reading-directory-group:first-child {
  margin-top: 0;
}

.reading-directory a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 6px 7px 6px calc(8px + var(--reading-toc-depth, 0) * 13px);
  border-radius: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-decoration: none;
}

.reading-directory a:hover,
.reading-directory a:focus-visible,
.reading-directory a.is-active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  outline: none;
}

.reading-directory a.is-active {
  box-shadow: inset 2px 0 0 var(--accent);
}

.reading-directory a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-directory a small {
  color: var(--muted);
  font-size: 10px;
}

.reading-bookmark-list {
  display: grid;
  gap: 7px;
}

.reading-bookmark-list article {
  position: relative;
  border-bottom: 1px solid var(--line-soft);
}

.reading-bookmark-list article > a {
  display: grid;
  gap: 3px;
  padding: 9px 28px 11px 7px;
  text-decoration: none;
}

.reading-bookmark-list article > a:hover,
.reading-bookmark-list article > a:focus-visible {
  background: var(--accent-soft);
  outline: none;
}

.reading-bookmark-list strong {
  color: var(--accent-dark);
  font-size: 12px;
}

.reading-bookmark-list p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.reading-bookmark-list time {
  color: var(--muted);
  font-size: 10px;
}

.reading-bookmark-list form {
  position: absolute;
  top: 6px;
  right: 2px;
}

.reading-bookmark-list form button {
  width: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.reading-bookmark-list form button:hover,
.reading-bookmark-list form button:focus-visible {
  color: var(--danger);
}

.reading-bookmark-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 36px 12px;
  color: var(--muted);
  text-align: center;
}

.reading-bookmark-empty i {
  color: var(--accent);
  font-size: 28px;
}

.reading-bookmark-empty p,
.reading-bookmark-empty span {
  margin: 0;
}

.reading-bookmark-empty span {
  font-size: 12px;
}

.reading-annotation-list {
  display: grid;
  gap: 7px;
}

.reading-annotation-list article {
  position: relative;
  border-bottom: 1px solid var(--line-soft);
}

.reading-annotation-list article > a {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 9px 28px 11px 16px;
  text-decoration: none;
}

.reading-annotation-list article > a:hover,
.reading-annotation-list article > a:focus-visible {
  background: var(--accent-soft);
  outline: none;
}

.reading-annotation-color {
  position: absolute;
  top: 12px;
  left: 6px;
  width: 4px;
  height: 28px;
  border-radius: 999px;
  background: #e6cd72;
}

.reading-annotation-color.is-green {
  background: #91bea0;
}

.reading-annotation-color.is-rose {
  background: #dca0a0;
}

.reading-annotation-list strong {
  color: var(--accent-dark);
  font-size: 12px;
}

.reading-annotation-list blockquote,
.reading-annotation-list p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.reading-annotation-list blockquote {
  color: var(--text);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 13px;
}

.reading-annotation-list p {
  color: var(--muted);
  font-size: 11px;
}

.reading-annotation-list time {
  color: var(--muted);
  font-size: 10px;
}

.reading-annotation-list form {
  position: absolute;
  top: 6px;
  right: 2px;
}

.reading-annotation-list form button {
  width: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.reading-annotation-list form button:hover,
.reading-annotation-list form button:focus-visible {
  color: var(--danger);
}

.reading-annotation-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 36px 12px;
  color: var(--muted);
  text-align: center;
}

.reading-annotation-empty i {
  color: var(--accent);
  font-size: 28px;
}

.reading-annotation-empty p,
.reading-annotation-empty span {
  margin: 0;
}

.reading-annotation-empty span {
  font-size: 12px;
}

.reading-stage {
  min-width: 0;
}

.reading-stage-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 52px;
  margin-bottom: 14px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
}

.reading-directory-trigger {
  display: none;
}

.reading-stage-position {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.reading-stage-position span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.reading-stage-position .reading-stage-divider {
  color: var(--line-strong);
  letter-spacing: 0;
}

.reading-stage-position .reading-stage-progress {
  letter-spacing: 0;
}

.reading-stage-position strong {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 16px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-stage-actions {
  display: flex;
  gap: 4px;
}

.reading-paper {
  position: relative;
  width: 100%;
  min-height: 70vh;
  padding: 64px max(40px, calc((100% - var(--reader-content-width)) / 2)) 90px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.reading-paper::before,
.reading-paper::after {
  position: absolute;
  z-index: 2;
  top: var(--reading-turn-y, 50vh);
  display: grid;
  width: 34px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--accent);
  box-shadow: var(--shadow-soft);
  font-family: system-ui, sans-serif;
  font-size: 28px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 120ms ease;
}

.reading-paper::before {
  left: 14px;
  content: "‹";
}

.reading-paper::after {
  right: 14px;
  content: "›";
}

.reading-paper[data-reading-turn-edge="previous"]::before,
.reading-paper[data-reading-turn-edge="next"]::after {
  opacity: 1;
}

.reading-paper[data-reading-turn-edge] {
  cursor: pointer;
}

.reading-content {
  width: min(100%, var(--reader-content-width));
  margin: 0 auto;
  color: var(--text);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: var(--reader-font-size);
  line-height: var(--reader-line-height);
  overflow-wrap: anywhere;
  text-align: justify;
  text-justify: inter-ideograph;
}

.reading-content [data-reading-block] {
  scroll-margin-top: 104px;
}

.reading-content mark[data-reading-annotation-id] {
  margin: 0 -0.04em;
  padding: 0.03em 0.04em;
  border-radius: 2px;
  background: color-mix(in srgb, #eacb58 43%, transparent);
  color: inherit;
  cursor: pointer;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.reading-content mark[data-reading-annotation-color="green"] {
  background: color-mix(in srgb, #78b78c 38%, transparent);
}

.reading-content mark[data-reading-annotation-color="rose"] {
  background: color-mix(in srgb, #d98686 34%, transparent);
}

.reading-content p {
  margin: 0 0 0.95em;
  text-indent: 2em;
}

.reading-content h1,
.reading-content h2,
.reading-content h3,
.reading-content h4,
.reading-content h5,
.reading-content h6 {
  margin: 1.8em 0 0.8em;
  font-family: inherit;
  line-height: 1.45;
  text-align: left;
}

.reading-content h1,
.reading-content h2 {
  color: var(--accent-dark);
  font-size: 1.55em;
}

.reading-content h3,
.reading-content h4 {
  font-size: 1.25em;
}

.reading-content ul,
.reading-content ol {
  padding-left: 2em;
}

.reading-content li > p,
.reading-content figcaption,
.reading-content td > p,
.reading-content th > p {
  text-indent: 0;
}

.reading-content blockquote {
  margin: 1.4em 0;
  padding: 0.7em 1.1em;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--text) 86%, var(--muted));
}

.reading-content pre {
  max-width: 100%;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-soft);
  font-family: ui-monospace, "Cascadia Mono", monospace;
  font-size: 0.8em;
  text-align: left;
  white-space: pre-wrap;
}

.reading-content img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 78vh;
  margin: 1.6em auto;
  border-radius: 3px;
  object-fit: contain;
}

.reading-content figure {
  margin: 1.7em 0;
}

.reading-content figcaption {
  color: var(--muted);
  font-size: 0.78em;
  text-align: center;
}

.reading-content a {
  color: var(--accent-dark);
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
  text-underline-offset: 0.18em;
}

.reading-content table {
  display: block;
  max-width: 100%;
  margin: 1.6em 0;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9em;
  text-align: left;
}

.reading-content th,
.reading-content td {
  padding: 8px 10px;
  border: 1px solid var(--line);
}

.reading-chapter-empty {
  color: var(--muted);
  text-align: center;
  text-indent: 0 !important;
}

.reading-chapter-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.reading-chapter-nav .button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 68px;
  justify-content: start;
  padding: 12px 16px;
  text-align: left;
}

.reading-chapter-nav .button:last-child {
  grid-template-columns: minmax(0, 1fr) auto;
  text-align: right;
}

.reading-chapter-nav .button span {
  display: grid;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-chapter-nav small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

html.reading-pagination-active {
  height: 100%;
  /* Android WebView can skip painting the normal document layer when the
     root scroller is clipped. The fixed-height shell below owns clipping. */
  overflow: visible;
  scrollbar-gutter: auto;
}

html.reading-pagination-active body {
  height: 100%;
  overflow: visible;
}

.reading-pagination-active .shell-reading {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--reading-viewport-height, 100dvh);
  max-height: var(--reading-viewport-height, 100dvh);
  padding-bottom: 14px;
  overflow: hidden;
}

.reading-pagination-active .shell-reading.is-readonly {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.reading-pagination-active .shell-reading .topbar {
  margin-bottom: 10px;
}

.reading-reader.is-paginated,
.reading-reader.is-paginated .reading-reader-layout,
.reading-reader.is-paginated .reading-stage {
  min-height: 0;
  height: 100%;
}

.reading-reader.is-paginated .reading-reader-layout {
  align-items: stretch;
}

.reading-reader.is-paginated .reading-sidebar {
  position: static;
  height: 100%;
  max-height: none;
}

.reading-reader.is-paginated .reading-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.reading-reader.is-paginated .reading-stage-toolbar {
  position: relative;
  margin-bottom: 10px;
}

.reading-reader.is-reading-focus-mode {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 max(10px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
  overflow: hidden;
  background: var(--bg);
}

.reading-reader.is-reading-focus-mode {
  position: fixed;
  z-index: 300;
  inset: 0;
}

.reading-reader.is-reading-focus-mode .reading-reader-layout {
  display: block;
  height: 100%;
}

.reading-reader.is-reading-focus-mode :is(.reading-sidebar-frame, .reading-sidebar-resizer, .reading-sidebar-hide, .reading-sidebar-show) {
  display: none !important;
}

.reading-reader.is-reading-focus-mode .reading-stage {
  width: min(100%, 1500px);
  height: 100%;
  margin: 0 auto;
}

.reading-reader.is-reading-focus-mode .reading-stage-toolbar {
  min-height: 48px;
  margin-bottom: 8px;
  padding: 5px 4px;
}

.reading-reader.is-reading-focus-mode .reading-paper {
  border-radius: 3px;
}

.reading-reader.is-paginated .reading-paper {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.reading-reader.is-paginated .reading-page-viewport {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.reading-reader.is-paginated .reading-page-flow {
  --reading-page-column-width: var(--reader-content-width);
  --reading-page-column-gap: 80px;
  width: min(calc(100% - 80px), var(--reader-content-width));
  height: 100%;
  margin: 0 auto;
  padding: 38px 0 20px;
  column-fill: auto;
  column-gap: var(--reading-page-column-gap);
  column-width: var(--reading-page-column-width);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  transition: transform var(--reading-page-swipe-duration, 220ms) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.reading-reader.is-paginated .reading-page-flow.is-reflowing,
.reading-reader.is-paginated .reading-page-flow.is-swipe-dragging,
.reading-reader.is-paginated .reading-page-flow.is-swipe-settling {
  transition: none;
}

.reading-reader.is-paginated .reading-paper.is-swipe-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.reading-reader.is-paginated .reading-content {
  width: auto;
  margin: 0;
}

.reading-reader.is-paginated .reading-content .reading-duplicate-title {
  display: none;
}

.reading-reader.is-paginated .reading-content :where(h1, h2, h3, h4, h5, h6) {
  break-after: avoid;
}

.reading-reader.is-paginated .reading-content :where(figure, img) {
  break-inside: avoid;
}

.reading-reader.is-paginated .reading-content img {
  max-height: calc(var(--reading-page-content-height, 70vh) - 2em);
}

.reading-reader.is-paginated .reading-content :where(pre, table) {
  max-height: calc(var(--reading-page-content-height, 70vh) - 2em);
  overflow: auto;
}

.reading-page-nav {
  display: none;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 5px 10px;
  border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
}

.reading-page-nav .button {
  min-width: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.reading-page-nav .button:first-child {
  justify-self: start;
}

.reading-page-nav .button:last-child {
  justify-self: end;
}

.reading-page-nav .button:disabled {
  color: color-mix(in srgb, var(--muted) 45%, transparent);
  cursor: default;
}

.reading-page-status {
  min-width: 86px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.reading-reader.is-paginated .reading-page-nav {
  display: grid;
}

.reading-reader.is-paginated .reading-chapter-nav {
  display: none;
}

.reading-reader.is-paginated .reading-paper::before,
.reading-reader.is-paginated .reading-paper::after {
  top: calc((100% - 48px) / 2);
}

@media (prefers-reduced-motion: reduce) {
  .reading-reader.is-paginated .reading-page-flow {
    transition: none;
  }
}

.reading-drawer,
.reading-drawer-backdrop {
  display: none;
}

.reading-settings-dialog,
.reading-upload-dialog,
.reading-annotation-dialog,
.reading-folder-dialog,
.reading-book-metadata-dialog {
  width: min(460px, calc(100% - 28px));
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}

.reading-settings-dialog::backdrop,
.reading-upload-dialog::backdrop,
.reading-annotation-dialog::backdrop,
.reading-folder-dialog::backdrop,
.reading-book-metadata-dialog::backdrop {
  background: rgba(15, 23, 20, 0.46);
  backdrop-filter: blur(2px);
}

.reading-settings-card {
  display: grid;
  gap: 20px;
  padding: 24px;
}

.reading-settings-card header,
.reading-settings-card footer,
.reading-settings-card label > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.reading-settings-card h2,
.reading-settings-card p {
  margin: 0;
}

.reading-settings-card h2 {
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 24px;
  font-weight: 600;
}

.reading-settings-card label {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.reading-settings-card input[type="range"] {
  min-height: 30px;
  padding: 0;
  accent-color: var(--accent);
}

.reading-settings-card label strong,
.reading-settings-card > p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.reading-settings-card footer {
  justify-content: flex-end;
  padding-top: 2px;
}

.reading-upload-dialog {
  width: min(560px, calc(100% - 28px));
}

.reading-upload-card,
.reading-annotation-card,
.reading-folder-card,
.reading-book-metadata-card {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.reading-upload-card header,
.reading-upload-card footer,
.reading-annotation-card header,
.reading-annotation-card footer,
.reading-folder-card header,
.reading-folder-card footer,
.reading-book-metadata-card header,
.reading-book-metadata-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.reading-upload-card h2,
.reading-annotation-card h2,
.reading-folder-card h2,
.reading-book-metadata-card h2 {
  margin: 0;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 24px;
  font-weight: 600;
}

.reading-upload-card > label,
.reading-upload-fields label,
.reading-annotation-card > label,
.reading-folder-card > label,
.reading-book-metadata-card > label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.reading-upload-card input,
.reading-upload-card textarea,
.reading-annotation-card textarea,
.reading-folder-card input,
.reading-book-metadata-card input {
  width: 100%;
}

.reading-upload-file {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
}

.reading-upload-file input {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}

.reading-upload-file small,
.reading-upload-card > p,
.reading-folder-card > p,
.reading-book-metadata-card > p {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.reading-upload-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.reading-upload-card > p,
.reading-folder-card > p,
.reading-book-metadata-card > p {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
}

.reading-upload-card footer,
.reading-annotation-card footer,
.reading-folder-card footer,
.reading-book-metadata-card footer {
  justify-content: flex-end;
}

.reading-annotation-card > blockquote {
  max-height: 120px;
  margin: 0;
  padding: 11px 13px;
  overflow: auto;
  border-left: 3px solid #e6cd72;
  background: var(--panel-soft);
  color: var(--muted);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 14px;
}

.reading-annotation-card fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border: 0;
}

.reading-annotation-card legend {
  width: 100%;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
}

.reading-annotation-card fieldset label {
  cursor: pointer;
}

.reading-annotation-card fieldset input {
  position: absolute;
  opacity: 0;
}

.reading-annotation-card fieldset span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, #eacb58 24%, var(--panel));
  color: var(--muted);
  font-size: 12px;
}

.reading-annotation-card fieldset span.is-green {
  background: color-mix(in srgb, #78b78c 22%, var(--panel));
}

.reading-annotation-card fieldset span.is-rose {
  background: color-mix(in srgb, #d98686 20%, var(--panel));
}

.reading-annotation-card fieldset input:checked + span {
  border-color: var(--accent);
  color: var(--accent-dark);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.reading-selection-toolbar {
  position: fixed;
  z-index: 110;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  width: max-content;
  max-width: calc(100vw - 24px);
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, white);
  border-radius: 7px;
  background: var(--accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(25, 74, 53, 0.2);
  transform: translateX(-50%);
}

.reading-selection-toolbar i {
  font-size: 15px;
  font-weight: 400;
}

.reading-selection-toolbar::after {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  background: inherit;
  content: "";
}

.reading-selection-toolbar[data-placement="above"]::after {
  bottom: -4px;
  transform: translateX(-50%) rotate(45deg);
}

.reading-selection-toolbar[data-placement="below"]::after {
  top: -4px;
  transform: translateX(-50%) rotate(45deg);
}

.reading-selection-toolbar:hover,
.reading-selection-toolbar:focus-visible {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
  color: #ffffff;
}

.reading-selection-toolbar:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 3px;
}

.reading-selection-toolbar[hidden] {
  display: none;
}

.reading-save-status {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  margin: 0;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--muted);
  box-shadow: var(--shadow-soft);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.reading-save-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reading-save-status[data-state="error"] {
  color: var(--danger);
}

@media (max-width: 1040px) {
  .reading-pagination-active .shell-reading {
    width: min(100% - 20px, 920px);
    padding-top: 8px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .module-nav {
    display: flex;
    grid-template-columns: none;
  }

  .module-nav a {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 3px;
  }

  .reading-library-page {
    padding: 0 0 20px;
  }

  .reading-library-head {
    display: grid;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 2px 9px;
  }

  .reading-library-head h2 {
    font-size: 24px;
  }

  .reading-library-count {
    display: none;
  }

  .reading-library-head-actions {
    align-self: flex-start;
    justify-content: flex-start;
    width: 100%;
  }

  .reading-library-action-row {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .reading-book-grid,
  .reading-shelf-list {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 14px;
  }

  .reading-shelf-folder-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }

  .reading-shelf-folder-actions {
    gap: 4px;
  }

  .reading-shelf-folder-actions .button {
    width: 36px;
    min-width: 36px;
    padding: 0;
  }

  .reading-shelf-folder-actions .button span {
    display: none;
  }

  .reading-shelf-folder-body {
    padding-right: 12px;
    padding-left: 12px;
  }

  .reading-book-card {
    grid-template-columns: 126px minmax(0, 1fr);
    gap: 16px;
    min-height: 190px;
    padding-bottom: 18px;
  }

  .reading-book-copy h2 {
    font-size: 22px;
  }

  .reading-book-description,
  .reading-book-meta span:nth-child(2),
  .reading-book-meta span:nth-child(3) {
    display: none;
  }

  .reading-book-progress {
    margin-top: 12px;
  }

  .reading-book-actions {
    margin-top: 11px;
  }

  .reading-book-actions .button {
    height: 36px;
    min-height: 36px;
    padding-inline: 11px;
  }

  .reading-simple-mode .reading-shelf-top,
  .reading-simple-mode .reading-folder-books {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 6px;
  }

  .reading-simple-mode .reading-book-card {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    min-height: 66px;
    padding: 6px 0;
  }

  .reading-simple-mode .reading-book-cover {
    width: 42px;
    height: 56px;
  }

  .reading-simple-mode .reading-book-copy {
    gap: 2px 8px;
  }

  .reading-simple-mode .reading-book-copy h2 {
    font-size: 15px;
  }

  .reading-simple-mode .reading-book-meta {
    max-width: 110px;
  }

  .reading-simple-mode .reading-book-actions {
    gap: 5px;
  }

  .reading-simple-mode .reading-book-actions .button {
    width: 32px;
    min-width: 32px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    font-size: 0;
  }

  .reading-simple-mode .reading-book-actions .button i {
    font-size: 14px;
  }

  .reading-reader-layout {
    display: block;
  }

  .reading-sidebar-frame,
  .reading-sidebar-resizer,
  .reading-sidebar-hide,
  .reading-sidebar-show {
    display: none !important;
  }

  .reading-sidebar {
    display: none;
  }

  .reading-stage-toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 50px;
    margin: 0 -2px 10px;
    padding: 6px 2px;
  }

  .reading-directory-trigger {
    display: inline-flex;
  }

  .reading-stage-position {
    text-align: center;
  }

  .reading-stage-position strong {
    font-size: 14px;
  }

  .reading-stage-actions {
    gap: 2px;
  }

  .reading-stage-actions .button {
    width: 38px;
    min-width: 38px;
    padding: 0;
  }

  .reading-stage-actions .button span {
    display: none;
  }

  .reading-paper {
    min-height: 65vh;
    padding: 38px max(16px, calc((100% - var(--reader-content-width)) / 2)) 64px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .reading-reader.is-paginated .reading-paper {
    min-height: 0;
    height: 100%;
    padding: 0;
  }

  .reading-reader.is-paginated .reading-page-flow {
    width: min(calc(100% - 36px), var(--reader-content-width));
    padding-top: 26px;
    padding-bottom: 14px;
  }

  .reading-page-nav {
    min-height: 46px;
    padding: 4px 6px;
  }

  .reading-page-nav .button {
    min-width: 44px;
    min-height: 40px;
    padding: 6px 8px;
  }

  .reading-page-status {
    min-width: 74px;
    font-size: 11px;
  }

  .reading-content {
    font-size: clamp(16px, var(--reader-font-size), 22px);
    line-height: var(--reader-line-height);
  }

  .reading-content img {
    max-height: 70vh;
  }

  .reading-chapter-nav {
    gap: 8px;
  }

  .reading-chapter-nav .button {
    min-height: 60px;
    padding: 9px 10px;
    font-size: 12px;
  }

  .reading-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: block;
    background: rgba(15, 23, 20, 0.48);
    backdrop-filter: blur(2px);
  }

  .reading-drawer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 121;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: 100%;
    height: min(82vh, 760px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--panel);
    box-shadow: 0 -18px 46px rgba(20, 24, 20, 0.2);
  }

  .reading-drawer[hidden],
  .reading-drawer-backdrop[hidden] {
    display: none;
  }

  .reading-drawer > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--line-soft);
  }

  .reading-drawer > header::before {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--line);
    content: "";
    transform: translateX(-50%);
  }

  .reading-drawer h2 {
    margin: 0;
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 20px;
    font-weight: 600;
  }

  .reading-drawer .reading-sidebar-tabs {
    margin: 0;
    padding: 0 18px;
  }

  .reading-drawer .reading-sidebar-panel {
    padding: 10px 14px calc(22px + env(safe-area-inset-bottom));
  }

  .reading-drawer .reading-directory a {
    min-height: 42px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 14px;
  }

  .reading-drawer .reading-directory-group {
    min-height: 38px;
    padding-top: 12px;
    font-size: 14px;
  }

  .reading-settings-dialog,
  .reading-upload-dialog,
  .reading-annotation-dialog,
  .reading-folder-dialog,
  .reading-book-metadata-dialog {
    width: 100%;
    max-width: none;
    max-height: var(--app-mobile-overlay-max-height, calc(100dvh - 12px));
    margin: auto 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 18px 18px 0 0;
  }

  .reading-settings-card {
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  }

  .reading-upload-card,
  .reading-annotation-card,
  .reading-folder-card,
  .reading-book-metadata-card {
    max-height: var(--app-mobile-overlay-max-height, 86vh);
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .reading-upload-fields {
    grid-template-columns: 1fr;
  }

  .reading-save-status {
    right: 14px;
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 430px) {
  .reading-library-head h2 {
    font-size: 23px;
  }

  .reading-book-card {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 15px;
    min-height: 164px;
    padding-bottom: 14px;
  }

  .reading-book-copy h2 {
    font-size: 19px;
  }

  .reading-book-author,
  .reading-book-meta {
    font-size: 11px;
  }

  .reading-simple-mode .reading-book-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
    min-height: 60px;
    padding: 5px 0;
  }

  .reading-simple-mode .reading-book-cover {
    width: 38px;
    height: 52px;
  }

  .reading-simple-mode .reading-book-copy h2 {
    font-size: 14px;
  }

  .reading-simple-mode .reading-book-meta {
    max-width: 92px;
  }

  .reading-stage-position strong {
    max-width: 116px;
  }

  .reading-stage-count,
  .reading-stage-count-divider,
  .reading-stage-progress-label {
    display: none;
  }

  .reading-paper {
    margin-inline: -10px;
    width: calc(100% + 20px);
    padding-right: 18px;
    padding-left: 18px;
  }

  .reading-reader.is-paginated .reading-paper {
    padding-right: 0;
    padding-left: 0;
  }

  .reading-page-nav .button span {
    display: none;
  }

  .reading-chapter-nav {
    margin-right: -4px;
    margin-left: -4px;
  }

  .reading-chapter-nav .button {
    gap: 6px;
    min-width: 0;
  }
}

/* Mobile module family: notebooks, English and the reading shelf */

@media (max-width: 1040px) {
  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0 0 calc(70px + env(safe-area-inset-bottom, 0px));
    background: #f4f3ee;
    color: #202923;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) > .topbar.is-module-landing {
    position: sticky;
    top: 0;
    z-index: 78;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 7px 12px 6px 16px;
    border-bottom: 1px solid #dee1da;
    background: rgba(244, 243, 238, 0.98);
    backdrop-filter: none;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) > .topbar.is-module-landing::after {
    display: none;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) > .topbar.is-module-landing .topbar-title {
    align-items: baseline;
    gap: 8px;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) > .topbar.is-module-landing .module-page-title {
    color: #202923;
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 27px;
    font-weight: 650;
    letter-spacing: 0.04em;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) > .topbar.is-module-landing .module-page-meta {
    color: #7a817b;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) > .topbar.is-module-landing .top-actions.is-mobile-menu,
  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main {
    gap: 8px;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #2d6249;
    box-shadow: none;
    color: #ffffff;
    font-size: 20px;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) > .topbar.is-module-landing .top-action-primary span:not(.top-action-icon) {
    display: none;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) > .topbar.is-module-landing .top-action-icon {
    font-size: 24px;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) > .topbar.is-module-landing .top-actions.is-mobile-menu.is-menu-ready .top-actions-more {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid #dee1da;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.34);
    color: #5f6862;
    font-size: 20px;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) > .topbar.is-module-landing .top-actions-more-icon {
    transform: rotate(90deg);
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) + .module-nav {
    gap: 0;
    min-height: 62px;
    padding: 4px 8px calc(3px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #dee1da;
    background: rgba(248, 247, 242, 0.98);
    box-shadow: none;
    backdrop-filter: none;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) + .module-nav a,
  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) + .module-nav a.is-active {
    position: relative;
    gap: 2px;
    min-height: 52px;
    padding: 4px 2px 3px;
    border-radius: 0;
    background: transparent;
    color: #737b75;
    font-size: 11px;
    font-weight: 600;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) + .module-nav a.is-active {
    color: #2d6249;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) + .module-nav a.is-active::after {
    position: absolute;
    right: 34%;
    bottom: 1px;
    left: 34%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) + .module-nav .module-nav-icon {
    width: 21px;
    height: 21px;
    font-size: 20px;
  }

  /* Notebook: compact knowledge paper with a separate directory drawer. */

  .shell-notebooks > .notebook-layout {
    margin: 0;
    border: 0;
    background: transparent;
  }

  .shell-notebooks .notebook-main,
  .shell-notebooks .notebook-home-panel {
    background: transparent;
  }

  .shell-notebooks .notebook-home-head {
    display: grid;
    gap: 14px;
    margin: 12px 12px 0;
    padding: 18px 16px;
    border: 1px solid #e0e2dc;
    border-radius: 8px;
    background: #faf9f5;
  }

  .shell-notebooks .notebook-home-head > div:first-child {
    gap: 5px;
  }

  .shell-notebooks .notebook-home-kicker {
    color: #2d6249;
    font-size: 12px;
    letter-spacing: 0.05em;
  }

  .shell-notebooks .notebook-home-head h2 {
    font-size: 25px;
    line-height: 1.28;
  }

  .shell-notebooks .notebook-home-head p {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
  }

  .shell-notebooks .notebook-home-actions .button {
    min-height: 40px;
    border-radius: 6px;
    box-shadow: none;
  }

  .shell-notebooks .notebook-home-grid {
    gap: 16px;
    padding: 18px 12px 28px;
  }

  .shell-notebooks .notebook-home-recent {
    gap: 10px;
  }

  .shell-notebooks .notebook-section-heading {
    padding: 0 2px 2px;
  }

  .shell-notebooks .notebook-section-heading h3,
  .shell-notebooks .notebook-home-overview h3 {
    color: #344039;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
    font-size: 16px;
  }

  .shell-notebooks .notebook-home-list {
    gap: 10px;
  }

  .shell-notebooks .notebook-home-note {
    gap: 7px;
    padding: 14px 14px 13px;
    border: 1px solid #e0e2dc;
    border-left: 3px solid #78917f;
    border-radius: 7px;
    background: #faf9f5;
    box-shadow: 0 1px 0 rgba(34, 42, 36, 0.04);
  }

  .shell-notebooks .notebook-home-note span {
    color: #202923;
    font-size: 16px;
    font-weight: 700;
  }

  .shell-notebooks .notebook-home-note small {
    color: #7a817b;
    font-weight: 500;
    line-height: 1.45;
  }

  .shell-notebooks .notebook-home-overview {
    gap: 14px;
    padding: 16px;
    border: 1px solid #e0e2dc;
    border-radius: 8px;
    background: #faf9f5;
  }

  .shell-notebooks .notebook-home-overview dl div {
    border: 1px solid #e6e7e2;
    border-radius: 6px;
    background: #f4f3ee;
  }

  .shell-notebooks .notebook-sidebar-show {
    border-color: #cfd8d1;
    background: #faf9f5;
    color: #2d6249;
    box-shadow: 0 8px 22px rgba(34, 42, 36, 0.12);
  }

  /* English: the same paper rhythm, with learning tabs kept visible. */

  .shell-english .english-tabs {
    min-height: 48px;
    margin: 0;
    padding: 0 16px;
    border-bottom: 1px solid #dee1da;
    background: #f4f3ee;
  }

  .shell-english .english-tabs > a {
    min-width: 54px;
    color: #737b75;
    font-size: 15px;
  }

  .shell-english .english-tabs > a.is-active {
    color: #2d6249;
  }

  .shell-english :where(.dictionary-page, .words-main, .grammar-document, .practice-page, .word-edit-page, .deleted-words-page) {
    width: auto;
    margin: 12px;
    padding: 18px 14px 92px;
    border: 1px solid #e0e2dc;
    border-radius: 8px;
    background: #faf9f5;
  }

  .shell-english .words-main {
    margin: 0;
    padding: 10px 4px 44px;
    border: 0;
    border-radius: 0;
  }

  .shell-english .words-heading {
    gap: 8px;
    margin-bottom: 8px;
  }

  .shell-english .words-heading-meta {
    gap: 6px;
  }

  .shell-english .words-heading p {
    font-size: 12px;
  }

  .shell-english .words-heading h2,
  .shell-english .dictionary-page-head h2,
  .shell-english .grammar-document-head h2,
  .shell-english .practice-head h2 {
    color: #202923;
    font-size: 25px;
    line-height: 1.2;
  }

  .shell-english .words-add-button,
  .shell-english .grammar-practice-button {
    border-radius: 6px;
    background: #2d6249;
    box-shadow: none;
  }

  .shell-english .words-add-button {
    min-height: 36px;
    padding-inline: 10px;
  }

  .shell-english .word-search input {
    height: 42px;
    min-height: 42px;
    padding-left: 36px;
    border-color: #dde0da;
    border-radius: 6px;
    background: #f4f3ee;
    box-shadow: none;
  }

  .shell-english .word-search i {
    left: 11px;
  }

  .shell-english .word-list-controls {
    gap: 6px;
    margin: 8px 0;
  }

  .shell-english .word-list-controls .word-filters {
    gap: 4px;
    margin: 0;
  }

  .shell-english .word-filters a {
    min-width: 52px;
    min-height: 34px;
    padding: 4px 6px;
    border-color: #d8dcd6;
    background: transparent;
    color: #5f6862;
  }

  .shell-english .word-filters a.is-active {
    border-color: #2d6249;
    background: #2d6249;
    color: #ffffff;
  }

  .shell-english .word-display-switch button {
    min-width: 42px;
    min-height: 30px;
    padding: 4px 6px;
  }

  .shell-english .word-list {
    display: grid;
    gap: 4px;
    border-top: 0;
  }

  .shell-english .word-row {
    overflow: hidden;
    border: 1px solid #e0e2dc;
    border-radius: 5px;
    background: #f7f6f1;
  }

  .shell-english .word-row[open] {
    border-left: 3px solid #78917f;
  }

  .shell-english .word-row > summary {
    min-height: 44px;
    padding: 4px 6px;
  }

  .shell-english .word-status-toggle {
    min-width: 30px;
    min-height: 28px;
    padding: 3px 5px;
  }

  .shell-english .word-row[open] > summary {
    background: #eef1eb;
  }

  .shell-english .word-detail {
    border-top-color: #e0e2dc;
    background: #faf9f5;
  }

  .shell-english .english-directory-show:not([hidden]) {
    border-color: #cfd8d1;
    background: #faf9f5;
    color: #2d6249;
    box-shadow: 0 8px 22px rgba(34, 42, 36, 0.12);
  }

  /* Reading shelf: book cards use the same restrained paper surfaces. */

  .shell-reading > .reading-library-page {
    padding: 0 12px 28px;
  }

  .shell-reading .reading-library-head {
    gap: 10px;
    padding: 14px 2px 13px;
    border-bottom-color: #dee1da;
  }

  .shell-reading .reading-library-head > div:first-child {
    display: grid;
    gap: 3px;
  }

  .shell-reading .reading-library-head > div:first-child .eyebrow {
    color: #2d6249;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  .shell-reading .reading-library-head h2 {
    color: #202923;
    font-size: 25px;
    line-height: 1.25;
  }

  .shell-reading .reading-library-action-row {
    gap: 7px;
  }

  .shell-reading .reading-library-action-row > .button {
    min-height: 36px;
    border-color: #d8dcd6;
    border-radius: 6px;
    background: #faf9f5;
    box-shadow: none;
  }

  .shell-reading .reading-shelf-list {
    gap: 8px;
    padding-top: 14px;
  }

  .shell-reading .reading-book-card {
    padding: 12px;
    border: 1px solid #e0e2dc;
    border-radius: 8px;
    background: #faf9f5;
    box-shadow: 0 1px 0 rgba(34, 42, 36, 0.04);
  }

  .shell-reading .reading-book-copy h2 {
    color: #202923;
  }

  .shell-reading .reading-book-progress {
    background: #e1e5de;
  }

  .shell-reading .reading-book-progress span {
    background: #2d6249;
  }

  .shell-reading .reading-continue-button {
    border-color: #2d6249;
    border-radius: 6px;
    background: #2d6249;
    box-shadow: none;
  }

  .shell-reading .reading-shelf-folder {
    border-color: #c9d1ca;
    border-left: 3px solid #66816d;
    border-radius: 8px;
    background: #f7f6f1;
    box-shadow: 0 1px 2px rgba(34, 42, 36, 0.06);
  }

  .shell-reading .reading-shelf-folder-head {
    min-height: 48px;
    padding: 3px 7px 3px 10px;
    border-bottom-color: #c9d1ca;
    background: #f7f6f1;
  }

  .shell-reading .reading-shelf-folder-body {
    padding-bottom: 12px;
  }

  .shell-reading .reading-folder-books {
    padding-top: 12px;
  }

  .reading-simple-mode .shell-reading .reading-book-card {
    padding: 7px 8px;
  }

  .reading-simple-mode .shell-reading .reading-book-copy {
    grid-template-rows: auto auto auto;
  }

  .reading-simple-mode .shell-reading .reading-book-copy h2 {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .reading-simple-mode .shell-reading .reading-book-meta {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    overflow: visible;
    line-height: 1.35;
    white-space: normal;
  }

  .reading-simple-mode .shell-reading .reading-book-meta span:first-child {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .reading-simple-mode .shell-reading .reading-book-author {
    grid-row: 3;
    grid-column: 1;
  }

  .reading-simple-mode .shell-reading .reading-book-actions {
    grid-row: 3;
    grid-column: 2;
  }
}

@media (max-width: 400px) {
  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) > .topbar.is-module-landing {
    padding-right: 10px;
    padding-left: 12px;
  }

  :where(.shell-notebooks, .shell-english, .shell-reading:has(> .reading-library-page)) > .topbar.is-module-landing .module-page-title {
    font-size: 25px;
  }

  .shell-notebooks .notebook-home-head h2,
  .shell-english .words-heading h2,
  .shell-english .grammar-document-head h2,
  .shell-reading .reading-library-head h2 {
    font-size: 23px;
  }
}

@media (max-width: 1040px) {
}

/* Compact mobile module header shared by every landing page. */

@media (max-width: 1040px) {
  .shell > .topbar.is-module-landing {
    gap: 8px;
    min-height: 50px;
    padding: 4px 10px 4px 14px;
  }

  .shell > .topbar.is-module-landing .topbar-title {
    gap: 6px;
  }

  .shell > .topbar.is-module-landing .module-page-title {
    font-size: 24px;
    line-height: 1;
  }

  .shell > .topbar.is-module-landing .module-page-meta {
    font-size: 11px;
  }

  .shell > .topbar.is-module-landing .top-actions.is-mobile-menu,
  .shell > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main,
  .shell > .topbar.is-module-landing .top-actions.is-mobile-menu.has-keep-action .top-actions-main {
    gap: 6px;
  }

  .shell > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 7px;
  }

  .shell > .topbar.is-module-landing .top-action-icon {
    font-size: 22px;
  }

  .shell > .topbar.is-module-landing .top-actions.is-mobile-menu.is-menu-ready .top-actions-more {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 7px;
  }
}

@media (max-width: 400px) {
  .shell > .topbar.is-module-landing {
    padding-right: 8px;
    padding-left: 12px;
  }

  .shell > .topbar.is-module-landing .module-page-title {
    font-size: 23px;
  }
}

/* Mobile account and user administration aligned with the module family. */

@media (max-width: 1040px) {
  :is(.shell-account, .shell-users) {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0 0 calc(70px + env(safe-area-inset-bottom, 0px));
    background: #f4f3ee;
    color: #202923;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  }

  :is(.shell-account, .shell-users) > .topbar.is-module-landing {
    position: sticky;
    top: 0;
    z-index: 78;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #dee1da;
    background: rgba(244, 243, 238, 0.98);
    backdrop-filter: none;
  }

  :is(.shell-account, .shell-users) > .topbar.is-module-landing .topbar-title {
    display: flex;
    align-items: baseline;
    min-width: 0;
  }

  :is(.shell-account, .shell-users) > .topbar.is-module-landing .module-page-title {
    color: #202923;
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-weight: 650;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  :is(.shell-account, .shell-users) > .topbar.is-module-landing .module-page-meta {
    display: inline;
    color: #7a817b;
    font-weight: 500;
    white-space: nowrap;
  }

  :is(.shell-account, .shell-users) > .topbar.is-module-landing .top-actions.is-mobile-menu,
  :is(.shell-account, .shell-users) > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main {
    gap: 6px;
  }

  .shell-users > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary {
    border: 0;
    background: #2d6249;
    box-shadow: none;
    color: #ffffff;
  }

  .shell-users > .topbar.is-module-landing .top-action-primary > span {
    display: none;
  }

  :is(.shell-account, .shell-users) > .topbar.is-module-landing .top-actions.is-mobile-menu.is-menu-ready .top-actions-more {
    border: 1px solid #dee1da;
    background: rgba(255, 255, 255, 0.34);
    color: #5f6862;
    box-shadow: none;
  }

  :is(.shell-account, .shell-users) > .topbar.is-module-landing .top-actions-more-icon {
    transform: rotate(90deg);
  }

  :is(.shell-account, .shell-users) + .module-nav {
    gap: 0;
    min-height: 62px;
    padding: 4px 8px calc(3px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #dee1da;
    background: rgba(248, 247, 242, 0.98);
    box-shadow: none;
    backdrop-filter: none;
  }

  :is(.shell-account, .shell-users) + .module-nav a {
    gap: 2px;
    min-height: 52px;
    padding: 4px 2px 3px;
    border-radius: 0;
    background: transparent;
    color: #737b75;
    font-size: 11px;
    font-weight: 600;
  }

  :is(.shell-account, .shell-users) + .module-nav .module-nav-icon {
    width: 21px;
    height: 21px;
    font-size: 20px;
  }

  /* Personal account */

  .shell-account .account-page-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: none;
    margin: 0;
    padding: 12px 12px 24px;
  }

  .shell-account .account-page-grid > .panel {
    padding: 16px;
    border: 1px solid #e0e2dc;
    border-radius: 8px;
    background: #faf9f5;
    box-shadow: none;
  }

  .shell-account .account-overview {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
  }

  .shell-account .account-avatar {
    width: 52px;
    height: 52px;
    border-color: #d8dcd6;
    background: #f4f3ee;
    color: #2d6249;
    font-size: 24px;
  }

  .shell-account .account-page-grid h2 {
    color: #202923;
    font-size: 24px;
    line-height: 1.25;
  }

  .shell-account .account-overview p,
  .shell-account .account-password-panel p {
    color: #707972;
    font-size: 13px;
    line-height: 1.5;
  }

  .shell-account .account-overview > .button {
    min-height: 40px;
    border-color: #d8dcd6;
    border-radius: 6px;
    background: #f4f3ee;
    color: #2d6249;
    box-shadow: none;
  }

  .shell-account .account-password-panel .form {
    gap: 14px;
    margin-top: 16px;
  }

  .shell-account :where(input, select, textarea) {
    border-color: #dde0da;
    border-radius: 6px;
    background: #f4f3ee;
    box-shadow: none;
  }

  .shell-account .account-password-panel .form > button[type="submit"] {
    min-height: 42px;
    border-radius: 6px;
    background: #2d6249;
    box-shadow: none;
  }

  /* User administration */

  .shell-users .user-management-layout {
    min-height: 0;
    margin: 12px;
    border: 0;
  }

  .shell-users .user-management-sidebar {
    padding: 14px;
    border: 1px solid #e0e2dc;
    border-radius: 8px;
    background: #faf9f5;
  }

  .shell-users .managed-user-search label {
    min-height: 44px;
    border-color: #dde0da;
    border-radius: 6px;
    background: #f4f3ee;
  }

  .shell-users .managed-user-filters {
    gap: 0;
    margin-top: 12px;
    border-bottom-color: #dee1da;
  }

  .shell-users .managed-user-filters a {
    flex: 1 1 0;
    padding: 10px 6px 11px;
    text-align: center;
  }

  .shell-users .managed-user-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
  }

  .shell-users .managed-user-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 72px;
    padding: 11px 10px;
    border: 1px solid #e0e2dc;
    border-radius: 7px;
    background: #f7f6f1;
  }

  .shell-users .managed-user-row.is-selected {
    border-left: 3px solid #78917f;
    background: #eef1eb;
  }

  .shell-users .managed-user-row.is-selected::before {
    display: none;
  }

  .shell-users .managed-user-avatar {
    width: 38px;
    height: 38px;
    border-color: #d8dcd6;
    color: #647068;
    font-size: 20px;
  }

  .shell-users .managed-user-copy strong {
    color: #202923;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
  }

  .shell-users .managed-user-copy small,
  .shell-users .managed-user-count {
    color: #7a817b;
  }

  .shell-users .managed-user-count {
    margin: 14px 2px 2px;
  }

  .shell-users .user-management-layout.is-detail-view {
    margin: 12px;
  }

  .shell-users .user-management-layout.is-detail-view .user-management-detail {
    padding: 0;
  }

  .shell-users .managed-user-embedded,
  .shell-users .user-create-panel {
    padding: 16px;
    border: 1px solid #e0e2dc;
    border-radius: 8px;
    background: #faf9f5;
  }

  .shell-users .user-detail-mobile-head {
    margin: 0 0 10px;
  }

  .shell-users .user-detail-mobile-head a {
    color: #2d6249;
    font-size: 13px;
    font-weight: 700;
  }

  .shell-users .managed-user-heading {
    padding: 4px 0 18px;
  }

  .shell-users .managed-user-heading h2 {
    color: #202923;
    font-family: ui-serif, "Songti SC", "STSong", serif;
    font-size: 28px;
  }

  .shell-users .managed-user-section {
    padding: 20px 0;
    border-bottom-color: #dee1da;
  }

  .shell-users .managed-user-section h3 {
    margin-bottom: 14px;
    color: #2d6249;
    font-size: 18px;
  }

  .shell-users .managed-user-field {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 10px;
  }

  .shell-users :where(input, select, textarea) {
    border-color: #dde0da;
    border-radius: 6px;
    background: #f4f3ee;
    box-shadow: none;
  }

  .shell-users .permission-row {
    padding: 14px 0;
    border-bottom-color: #e4e6e0;
  }

  .shell-users .permission-segments {
    border-color: #d8dcd6;
    border-radius: 6px;
  }

  .shell-users .permission-segments label + label {
    border-left-color: #d8dcd6;
  }

  .shell-users .permission-segments span {
    min-height: 42px;
  }

  .shell-users .managed-user-actions :where(button, .button, summary) {
    min-height: 42px;
    border-radius: 6px;
    box-shadow: none;
  }

  .shell-users > .user-detail-mobile-head,
  .shell-users > .user-create-panel {
    margin: 12px;
  }
}

@media (max-width: 400px) {
  .shell-users .managed-user-field {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1040px) {
}

/* Check-ins / Swiss Archive
   A continuous two-column ledger for reusable projects and today's immutable records. */

.shell-checkins {
  --checkin-paper: #f5f4f0;
  --checkin-surface: #fbfaf7;
  --checkin-ink: #15171a;
  --checkin-ink-soft: #34383d;
  --checkin-muted: #6c7178;
  --checkin-faint: #979ba0;
  --checkin-rule: #d2d3d0;
  --checkin-rule-strong: #202226;
  --checkin-blue: #1455cc;
  --checkin-blue-hover: #0b43a8;
  --checkin-blue-soft: #e8eef9;
  --checkin-red: #d1192e;
  --checkin-red-soft: #fae9ec;
  --checkin-focus: #7aa4ff;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  background: var(--checkin-paper);
  color: var(--checkin-ink);
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.shell-checkins :where(.module-page-title, .checkin-ledger-title h2, .checkin-section-head h2, .checkin-project-copy h3, .checkin-entry-content h3, .checkin-dialog-head h2, .empty-state h3) {
  color: var(--checkin-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-weight: 500;
  letter-spacing: 0;
}

.shell-checkins :where(.checkin-page, .checkin-workspace, .checkin-project-column, .checkin-today-column) {
  box-sizing: border-box;
}

.shell-checkins :where(input, textarea) {
  min-height: 44px;
  border: 1px solid var(--checkin-rule);
  border-radius: 2px;
  background: var(--checkin-surface);
  color: var(--checkin-ink);
  font: inherit;
  box-shadow: none;
}

.shell-checkins textarea {
  line-height: 1.65;
}

.shell-checkins :where(input, textarea):focus-visible {
  border-color: var(--checkin-blue);
  outline: 2px solid var(--checkin-focus);
  outline-offset: 1px;
  box-shadow: none;
}

.shell-checkins :where(.button, button) {
  border-radius: 2px;
  box-shadow: none;
}

.shell-checkins .checkin-page {
  width: 100%;
  padding: 0 clamp(24px, 4vw, 56px) 48px;
}

.shell-checkins .checkin-ledger-head {
  display: flex;
  gap: 32px;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 86px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--checkin-rule-strong);
}

.shell-checkins .checkin-ledger-title {
  display: grid;
  gap: 4px;
}

.shell-checkins .checkin-ledger-kicker,
.shell-checkins .checkin-section-head .eyebrow {
  margin: 0;
  color: var(--checkin-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
}

.shell-checkins .checkin-ledger-title h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
}

.shell-checkins .checkin-ledger-counts {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  margin: 0;
}

.shell-checkins .checkin-ledger-counts div {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: baseline;
}

.shell-checkins .checkin-ledger-counts dt {
  color: var(--checkin-muted);
  font-size: 12px;
  font-weight: 600;
}

.shell-checkins .checkin-ledger-counts dd {
  margin: 0;
  color: var(--checkin-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 22px;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

.shell-checkins .checkin-workspace {
  display: grid;
  grid-template-columns: minmax(400px, 0.9fr) minmax(0, 1.1fr);
  min-height: calc(100vh - 154px);
  border-bottom: 1px solid var(--checkin-rule);
}

.shell-checkins .checkin-project-column,
.shell-checkins .checkin-today-column {
  min-width: 0;
  padding-top: 24px;
  padding-bottom: 48px;
}

.shell-checkins .checkin-project-column {
  padding-right: clamp(24px, 2.8vw, 40px);
}

.shell-checkins .checkin-today-column {
  padding-left: clamp(24px, 2.8vw, 40px);
  border-left: 1px solid var(--checkin-rule);
}

.shell-checkins .checkin-section-head {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 58px;
  margin: 0;
  padding: 0 0 13px;
  border-bottom: 1px solid var(--checkin-rule-strong);
}

.shell-checkins .checkin-section-head > div:first-child {
  display: grid;
  gap: 4px;
}

.shell-checkins .checkin-section-head h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
}

.shell-checkins .checkin-section-head > span,
.shell-checkins .checkin-section-count {
  flex: none;
  margin: 0 0 2px;
  color: var(--checkin-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.shell-checkins .checkin-section-tools {
  display: flex;
  gap: 16px;
  align-items: center;
}

.shell-checkins .checkin-project-create {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid var(--checkin-rule);
  border-radius: 2px;
  background: transparent;
  color: var(--checkin-blue);
  font-size: 13px;
  font-weight: 650;
}

.shell-checkins .checkin-project-create:hover,
.shell-checkins .checkin-project-create:focus-visible {
  border-color: var(--checkin-blue);
  background: var(--checkin-blue-soft);
  color: var(--checkin-blue-hover);
  outline: 0;
}

.shell-checkins .checkin-project-create:focus-visible {
  outline: 2px solid var(--checkin-focus);
  outline-offset: 1px;
}

.shell-checkins .checkin-project-create i {
  font-size: 18px;
  font-weight: 400;
}

.shell-checkins .checkin-project-list {
  display: grid;
  border: 0;
}

.shell-checkins .checkin-project-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 82px;
  padding: 14px 0;
  border-bottom: 1px solid var(--checkin-rule);
}

.shell-checkins .checkin-project-row:hover,
.shell-checkins .checkin-project-row:focus-within,
.shell-checkins .checkin-project-row:target {
  background: var(--checkin-blue-soft);
}

.shell-checkins .checkin-project-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--checkin-blue);
  font-size: 25px;
}

.shell-checkins .checkin-project-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.shell-checkins .checkin-project-copy h3 {
  margin: 0;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-checkins .checkin-project-meta {
  display: flex;
  gap: 5px 10px;
  align-items: center;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--checkin-muted);
  font-size: 13px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-checkins .checkin-project-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-checkins .checkin-project-meta span:first-child {
  flex: none;
  color: var(--checkin-ink-soft);
  font-weight: 600;
}

.shell-checkins .checkin-project-meta span + span {
  padding-left: 10px;
  border-left: 1px solid var(--checkin-rule);
}

.shell-checkins .checkin-action {
  min-width: 76px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--checkin-blue);
  border-radius: 2px;
  background: transparent;
  color: var(--checkin-blue);
  font-size: 14px;
  font-weight: 700;
}

.shell-checkins .checkin-action:hover,
.shell-checkins .checkin-action:focus-visible {
  border-color: var(--checkin-blue);
  background: var(--checkin-blue);
  color: #fff;
  outline: 0;
}

.shell-checkins .checkin-action:focus-visible {
  outline: 2px solid var(--checkin-focus);
  outline-offset: 1px;
}

.shell-checkins .checkin-timeline {
  display: grid;
}

.shell-checkins .checkin-entry {
  position: relative;
  display: grid;
  grid-template-columns: 54px 14px minmax(0, 1fr);
  column-gap: 10px;
  min-height: 84px;
}

.shell-checkins .checkin-entry::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 70.5px;
  width: 1px;
  background: var(--checkin-rule);
  content: "";
}

.shell-checkins .checkin-entry:first-child::before {
  top: 20px;
}

.shell-checkins .checkin-entry:last-child::before {
  bottom: calc(100% - 21px);
}

.shell-checkins .checkin-entry-time {
  padding-top: 14px;
  color: var(--checkin-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.shell-checkins .checkin-entry-marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 14px;
  height: 14px;
  margin: 14px auto 0;
  place-items: center;
  background: var(--checkin-paper);
  color: var(--checkin-blue);
  font-size: 7px;
  line-height: 1;
}

.shell-checkins .checkin-entry-content {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 11px 0 22px;
  border-bottom: 1px solid var(--checkin-rule);
}

.shell-checkins .checkin-entry:target .checkin-entry-content {
  background: var(--checkin-blue-soft);
}

.shell-checkins .checkin-entry-content h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
}

.shell-checkins .checkin-entry-description {
  margin: 0;
  color: var(--checkin-ink-soft);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.shell-checkins .checkin-entry-images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 420px);
}

.shell-checkins .checkin-entry-images:has(a:only-child) {
  grid-template-columns: minmax(0, 220px);
}

.shell-checkins .checkin-entry-images:has(a:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shell-checkins .checkin-entry-images a {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--checkin-rule);
  border-radius: 2px;
  background: var(--checkin-surface);
  aspect-ratio: 4 / 3;
}

.shell-checkins .checkin-entry-images a:hover,
.shell-checkins .checkin-entry-images a:focus-visible {
  border-color: var(--checkin-blue);
  outline: 2px solid var(--checkin-focus);
  outline-offset: 1px;
}

.shell-checkins .checkin-entry-images img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shell-checkins .empty-state,
.shell-checkins .checkin-empty {
  display: grid;
  gap: 7px;
  min-height: 150px;
  place-content: center;
  padding: 28px 12px;
  border: 0;
  border-bottom: 1px solid var(--checkin-rule);
  background: transparent;
  color: var(--checkin-muted);
  text-align: center;
  box-shadow: none;
}

.shell-checkins .empty-state i,
.shell-checkins .checkin-empty i {
  color: var(--checkin-faint);
  font-size: 24px;
}

.shell-checkins .empty-state :where(h3, p),
.shell-checkins .checkin-empty p {
  margin: 0;
}

.shell-checkins .empty-state h3 {
  font-size: 17px;
}

.shell-checkins .checkin-project-dialog,
.shell-checkins .checkin-dialog,
.shell-checkins .checkin-image-viewer {
  max-width: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--checkin-rule);
  border-radius: 4px;
  background: var(--checkin-surface);
  color: var(--checkin-ink);
  box-shadow: 0 18px 48px rgb(21 23 26 / 16%);
}

.shell-checkins .checkin-project-dialog {
  width: min(500px, calc(100% - 32px));
}

.shell-checkins .checkin-dialog {
  width: min(620px, calc(100% - 32px));
}

.shell-checkins .checkin-project-dialog::backdrop,
.shell-checkins .checkin-dialog::backdrop,
.shell-checkins .checkin-image-viewer::backdrop {
  background: rgb(21 23 26 / 34%);
  backdrop-filter: none;
}

.shell-checkins .checkin-project-dialog-card,
.shell-checkins .checkin-dialog-card {
  display: grid;
  gap: 20px;
  padding: 24px;
}

.shell-checkins .checkin-dialog-card {
  max-height: min(780px, calc(100dvh - 40px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.shell-checkins .checkin-project-dialog-card form,
.shell-checkins .checkin-dialog-card form {
  display: grid;
  gap: 18px;
}

.shell-checkins .checkin-project-dialog-card label,
.shell-checkins .checkin-dialog-card label {
  display: grid;
  gap: 8px;
  color: var(--checkin-ink-soft);
  font-size: 13px;
  font-weight: 650;
}

.shell-checkins .checkin-dialog-grabber {
  display: none;
}

.shell-checkins .checkin-dialog-head {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 0 44px 16px 0;
  border-bottom: 1px solid var(--checkin-rule-strong);
  text-align: left;
}

.shell-checkins .checkin-dialog-head .eyebrow {
  margin: 0 0 3px;
  color: var(--checkin-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.shell-checkins .checkin-dialog-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.shell-checkins .checkin-dialog-head > .checkin-dialog-close {
  position: absolute;
  top: -6px;
  right: -8px;
  display: grid;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--checkin-muted);
  font-size: 20px;
}

.shell-checkins .checkin-dialog-head > .checkin-dialog-close:hover,
.shell-checkins .checkin-dialog-head > .checkin-dialog-close:focus-visible {
  border-color: var(--checkin-rule);
  background: var(--checkin-blue-soft);
  color: var(--checkin-blue);
  outline: 0;
}

.shell-checkins .checkin-dialog-head > .checkin-dialog-close:focus-visible {
  outline: 2px solid var(--checkin-focus);
  outline-offset: 1px;
}

.shell-checkins .checkin-dialog-time {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: -4px 0 0;
  color: var(--checkin-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.shell-checkins .checkin-description-field {
  position: relative;
  display: grid;
}

.shell-checkins .checkin-description-field textarea {
  width: 100%;
  min-height: 132px;
  padding: 11px 12px 30px;
  resize: vertical;
}

.shell-checkins .checkin-description-count {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: var(--checkin-muted);
  font-size: 12px;
  font-weight: 500;
}

.shell-checkins .checkin-media-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--checkin-rule);
  border-bottom: 1px solid var(--checkin-rule);
}

.shell-checkins .checkin-media-actions button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--checkin-blue);
  font-size: 14px;
  font-weight: 650;
}

.shell-checkins .checkin-media-actions button + button {
  border-left: 1px solid var(--checkin-rule);
}

.shell-checkins .checkin-media-actions button:hover,
.shell-checkins .checkin-media-actions button:focus-visible {
  background: var(--checkin-blue-soft);
  color: var(--checkin-blue-hover);
  outline: 0;
}

.shell-checkins .checkin-media-actions button:focus-visible {
  outline: 2px solid var(--checkin-focus);
  outline-offset: -2px;
}

.shell-checkins .checkin-media-actions button:disabled {
  background: transparent;
  color: var(--checkin-faint);
  cursor: not-allowed;
  opacity: 0.7;
}

.shell-checkins .checkin-media-actions i {
  font-size: 19px;
}

.shell-checkins .checkin-photo-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.shell-checkins .checkin-photo-slot {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  place-items: center;
  border: 1px dashed var(--checkin-rule);
  border-radius: 2px;
  background: var(--checkin-paper);
  color: var(--checkin-muted);
  aspect-ratio: 1;
}

.shell-checkins .checkin-photo-slot:hover,
.shell-checkins .checkin-photo-slot:focus-visible {
  border-color: var(--checkin-blue);
  background: var(--checkin-blue-soft);
  color: var(--checkin-blue);
  outline: 0;
}

.shell-checkins .checkin-photo-slot:focus-visible {
  outline: 2px solid var(--checkin-focus);
  outline-offset: 1px;
}

.shell-checkins .checkin-photo-slot:disabled {
  border-color: var(--checkin-rule);
  background: var(--checkin-paper);
  color: var(--checkin-faint);
  cursor: not-allowed;
  opacity: 0.7;
}

.shell-checkins .checkin-photo-slot.is-uploading {
  gap: 6px;
  border-style: solid;
  border-color: var(--checkin-blue);
  background: var(--checkin-blue-soft);
  color: var(--checkin-blue);
  font-size: 11px;
  opacity: 1;
}

.shell-checkins .checkin-photo-slot.is-uploading i {
  animation: checkin-status-spin 1s linear infinite;
}

.shell-checkins .checkin-photo-slot > i {
  font-size: 26px;
}

.shell-checkins .checkin-photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shell-checkins .checkin-photo-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 46%);
  border-radius: 2px;
  background: rgb(21 23 26 / 78%);
  color: #fff;
  font-size: 15px;
}

.shell-checkins .checkin-upload-status {
  display: grid;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--checkin-rule);
  border-radius: 2px;
  background: var(--checkin-paper);
  color: var(--checkin-muted);
  font-size: 13px;
}

.shell-checkins .checkin-upload-status[hidden] {
  display: none;
}

.shell-checkins .checkin-upload-status-line {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.shell-checkins .checkin-upload-status-line > i {
  flex: 0 0 auto;
  color: currentColor;
  font-size: 17px;
}

.shell-checkins .checkin-upload-status.is-working {
  border-color: var(--checkin-blue);
  background: var(--checkin-blue-soft);
  color: var(--checkin-blue-hover);
}

.shell-checkins .checkin-upload-status.is-working .checkin-upload-status-line > i {
  animation: checkin-status-spin 1s linear infinite;
}

.shell-checkins .checkin-upload-status.is-success {
  border-color: color-mix(in srgb, var(--checkin-blue) 42%, var(--checkin-rule));
  background: var(--checkin-blue-soft);
  color: var(--checkin-blue);
}

.shell-checkins .checkin-upload-status.is-error {
  border-color: var(--checkin-red);
  background: var(--checkin-red-soft);
  color: var(--checkin-red);
}

.shell-checkins .checkin-upload-progress {
  position: relative;
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 0;
  background: color-mix(in srgb, var(--checkin-blue) 16%, transparent);
}

.shell-checkins .checkin-upload-progress[hidden] {
  display: none;
}

.shell-checkins .checkin-upload-progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  background: var(--checkin-blue);
  animation: checkin-upload-progress 1.2s ease-in-out infinite;
}

@keyframes checkin-status-spin {
  to { transform: rotate(360deg); }
}

@keyframes checkin-upload-progress {
  0% { transform: translateX(-115%); }
  55% { transform: translateX(105%); }
  100% { transform: translateX(245%); }
}

@media (prefers-reduced-motion: reduce) {
  .shell-checkins .checkin-photo-slot.is-uploading i,
  .shell-checkins .checkin-upload-status.is-working .checkin-upload-status-line > i,
  .shell-checkins .checkin-upload-progress > span {
    animation: none;
  }

  .shell-checkins .checkin-upload-progress > span {
    width: 100%;
    opacity: 0.55;
  }
}

.shell-checkins .checkin-dialog-actions,
.shell-checkins .checkin-project-dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 2px;
}

.shell-checkins .checkin-dialog-actions button,
.shell-checkins .checkin-project-dialog-actions button {
  min-height: 44px;
  border: 1px solid var(--checkin-rule);
  border-radius: 2px;
  background: transparent;
  color: var(--checkin-ink);
  font-size: 14px;
  font-weight: 650;
}

.shell-checkins .checkin-dialog-actions button:hover,
.shell-checkins .checkin-dialog-actions button:focus-visible,
.shell-checkins .checkin-project-dialog-actions button:hover,
.shell-checkins .checkin-project-dialog-actions button:focus-visible {
  border-color: var(--checkin-ink);
  background: var(--checkin-paper);
  outline: 0;
}

.shell-checkins .checkin-dialog-actions button:focus-visible,
.shell-checkins .checkin-project-dialog-actions button:focus-visible {
  outline: 2px solid var(--checkin-focus);
  outline-offset: 1px;
}

.shell-checkins .checkin-dialog-actions .checkin-submit,
.shell-checkins .checkin-project-dialog .checkin-dialog-actions button[type="submit"],
.shell-checkins .checkin-project-dialog-actions button[type="submit"] {
  border-color: var(--checkin-blue);
  background: var(--checkin-blue);
  color: #fff;
}

.shell-checkins .checkin-dialog-actions .checkin-submit:hover,
.shell-checkins .checkin-dialog-actions .checkin-submit:focus-visible,
.shell-checkins .checkin-project-dialog .checkin-dialog-actions button[type="submit"]:hover,
.shell-checkins .checkin-project-dialog .checkin-dialog-actions button[type="submit"]:focus-visible,
.shell-checkins .checkin-project-dialog-actions button[type="submit"]:hover,
.shell-checkins .checkin-project-dialog-actions button[type="submit"]:focus-visible {
  border-color: var(--checkin-blue-hover);
  background: var(--checkin-blue-hover);
  color: #fff;
}

.shell-checkins .checkin-dialog-actions .checkin-submit.is-busy {
  cursor: wait;
  opacity: 0.82;
}

.shell-checkins .checkin-image-viewer {
  width: min(920px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  border-color: #34383d;
  border-radius: 2px;
  background: #15171a;
}

.shell-checkins .checkin-image-viewer button {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 2px;
  background: rgb(21 23 26 / 72%);
  color: #fff;
  font-size: 22px;
}

.shell-checkins .checkin-image-viewer img {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 30px);
  object-fit: contain;
}

.shell-checkins.is-readonly :where([data-checkin-open], [data-checkin-project-open]) {
  display: none !important;
}

@media (min-width: 1041px) {
  .shell.shell-checkins {
    padding: 0;
  }

  .shell-checkins > .topbar {
    grid-template-columns: minmax(160px, 1fr) auto;
    gap: 28px;
    width: 100%;
    min-height: 68px;
    margin: 0;
    padding: 0 clamp(24px, 3vw, 40px);
    border-bottom: 1px solid var(--checkin-rule);
    background: var(--checkin-surface);
  }

  .shell-checkins > .topbar .topbar-title {
    align-items: center;
  }

  .shell-checkins > .topbar h1,
  .shell-checkins > .topbar .module-page-title {
    color: var(--checkin-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
  }

  .shell-checkins > .topbar .topbar-side {
    flex-direction: row;
    gap: 14px;
  }

  .shell-checkins .desktop-module-nav,
  .shell-checkins .topbar-system,
  .shell-checkins .top-actions {
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell-checkins .desktop-module-nav .module-nav-icon,
  .shell-checkins .desktop-module-nav a::before {
    display: none;
  }

  .shell-checkins .desktop-module-nav a {
    position: relative;
    min-width: 0;
    min-height: 44px;
    padding: 11px 9px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--checkin-muted);
    font-size: 14px;
    font-weight: 650;
    box-shadow: none;
  }

  .shell-checkins .desktop-module-nav a::after {
    position: absolute;
    right: 9px;
    bottom: 5px;
    left: 9px;
    height: 2px;
    background: transparent;
    content: "";
  }

  .shell-checkins .desktop-module-nav a:hover,
  .shell-checkins .desktop-module-nav a:focus-visible,
  .shell-checkins .desktop-module-nav a.is-active {
    border: 0;
    background: transparent;
    color: var(--checkin-blue);
    outline: 0;
    box-shadow: none;
    transform: none;
  }

  .shell-checkins .desktop-module-nav a.is-active::after {
    background: var(--checkin-blue);
  }

  .shell-checkins .top-actions {
    margin-left: 4px;
  }

  .shell-checkins .top-actions :where(.button, button) {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--checkin-rule);
    border-radius: 2px;
    background: transparent;
    color: var(--checkin-ink-soft);
    font-size: 13px;
    font-weight: 650;
  }

  .shell-checkins .top-actions :where(.button, button):hover,
  .shell-checkins .top-actions :where(.button, button):focus-visible {
    border-color: var(--checkin-ink);
    background: var(--checkin-surface);
    color: var(--checkin-ink);
    outline: 0;
  }
}

@media (max-width: 1040px) {
  .shell.shell-checkins {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0 0 calc(68px + env(safe-area-inset-bottom, 0px));
    background: var(--checkin-paper);
    color: var(--checkin-ink);
  }

  .shell-checkins > .topbar,
  .shell-checkins > .topbar.is-module-landing {
    position: sticky;
    top: 0;
    z-index: 8;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 50px;
    margin: 0;
    padding: 3px 8px 3px 16px;
    border-bottom: 1px solid var(--checkin-rule);
    background: rgb(251 250 247 / 98%);
    backdrop-filter: none;
  }

  .shell-checkins > .topbar .topbar-title {
    gap: 6px;
    align-items: center;
  }

  .shell-checkins > .topbar h1,
  .shell-checkins > .topbar .module-page-title {
    color: var(--checkin-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
  }

  .shell-checkins > .topbar .module-page-meta {
    color: var(--checkin-muted);
    font-size: 12px;
    font-weight: 500;
  }

  .shell-checkins .checkin-page {
    padding: 0 16px 32px;
  }

  .shell-checkins .checkin-ledger-head {
    min-height: 74px;
    padding: 13px 0 14px;
  }

  .shell-checkins .checkin-ledger-title {
    gap: 3px;
  }

  .shell-checkins .checkin-ledger-title h2 {
    font-size: 24px;
  }

  .shell-checkins .checkin-ledger-counts {
    gap: 12px;
  }

  .shell-checkins .checkin-ledger-counts div {
    display: grid;
    gap: 2px;
  }

  .shell-checkins .checkin-ledger-counts dt {
    font-size: 11px;
  }

  .shell-checkins .checkin-ledger-counts dd {
    font-size: 18px;
  }

  .shell-checkins .checkin-workspace {
    display: block;
    min-height: 0;
    border-bottom: 0;
  }

  .shell-checkins .checkin-project-column,
  .shell-checkins .checkin-today-column {
    padding: 18px 0 28px;
  }

  .shell-checkins .checkin-today-column {
    padding-top: 20px;
    border-top: 1px solid var(--checkin-rule-strong);
    border-left: 0;
  }

  .shell-checkins .checkin-section-head {
    min-height: 54px;
    padding-bottom: 11px;
  }

  .shell-checkins .checkin-section-head h2 {
    font-size: 20px;
  }

  .shell-checkins .checkin-section-tools {
    gap: 10px;
  }

  .shell-checkins .checkin-project-create {
    min-height: 44px;
    padding: 7px 9px;
  }

  .shell-checkins .checkin-section-count {
    display: none;
  }

  .shell-checkins .checkin-project-row {
    grid-template-columns: 32px minmax(0, 1fr) 68px;
    gap: 10px;
    min-height: 74px;
    padding: 10px 0;
  }

  .shell-checkins .checkin-project-icon {
    width: 30px;
    height: 30px;
    font-size: 23px;
  }

  .shell-checkins .checkin-project-copy {
    gap: 4px;
  }

  .shell-checkins .checkin-project-copy h3 {
    font-size: 16px;
  }

  .shell-checkins .checkin-project-meta {
    font-size: 12px;
  }

  .shell-checkins .checkin-action {
    width: 68px;
    min-width: 68px;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 14px;
  }

  .shell-checkins .checkin-entry {
    grid-template-columns: 44px 13px minmax(0, 1fr);
    column-gap: 8px;
    min-height: 72px;
  }

  .shell-checkins .checkin-entry::before {
    left: 57.5px;
  }

  .shell-checkins .checkin-entry:first-child::before {
    top: 18px;
  }

  .shell-checkins .checkin-entry:last-child::before {
    bottom: calc(100% - 19px);
  }

  .shell-checkins .checkin-entry-time {
    padding-top: 12px;
    font-size: 12px;
  }

  .shell-checkins .checkin-entry-marker {
    width: 13px;
    height: 13px;
    margin-top: 12px;
  }

  .shell-checkins .checkin-entry-content {
    gap: 6px;
    padding: 9px 0 18px;
  }

  .shell-checkins .checkin-entry-content h3 {
    font-size: 16px;
  }

  .shell-checkins .checkin-entry-description {
    font-size: 14px;
    line-height: 1.6;
  }

  .shell-checkins .checkin-entry-images {
    width: min(100%, 360px);
  }

  .shell-checkins .checkin-project-dialog,
  .shell-checkins .checkin-dialog {
    width: 100%;
    max-height: var(--app-mobile-dialog-height, calc(100dvh - 12px));
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -12px 36px rgb(21 23 26 / 16%);
  }

  .shell-checkins .checkin-project-dialog-card,
  .shell-checkins .checkin-dialog-card {
    max-height: var(--app-mobile-dialog-height, calc(100dvh - 12px));
    gap: 17px;
    padding: 9px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }

  .shell-checkins .checkin-dialog-grabber {
    display: block;
    width: 32px;
    height: 3px;
    margin: 0 auto 2px;
    border-radius: 0;
    background: var(--checkin-rule);
  }

  .shell-checkins .checkin-dialog-head {
    padding-bottom: 13px;
  }

  .shell-checkins .checkin-dialog-head h2 {
    font-size: 22px;
  }

  .shell-checkins .checkin-description-field textarea {
    min-height: 132px;
  }

  .shell-checkins .checkin-photo-slots {
    gap: 8px;
  }

  .shell-checkins .checkin-dialog-actions {
    position: sticky;
    bottom: 0;
    padding-top: 3px;
    background: var(--checkin-surface);
  }

  .shell-checkins + .module-nav {
    gap: 0;
    min-height: 62px;
    padding: 4px 8px calc(3px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #d2d3d0;
    background: rgb(251 250 247 / 98%);
    box-shadow: none;
    backdrop-filter: none;
  }

  .shell-checkins + .module-nav a,
  .shell-checkins + .module-nav a.is-active {
    position: relative;
    gap: 2px;
    min-height: 52px;
    padding: 4px 2px 3px;
    border-radius: 0;
    background: transparent;
    color: #6c7178;
    font-size: 11px;
    font-weight: 600;
  }

  .shell-checkins + .module-nav a.is-active {
    color: #1455cc;
  }

  .shell-checkins + .module-nav a.is-active::after {
    position: absolute;
    right: 34%;
    bottom: 1px;
    left: 34%;
    height: 2px;
    border-radius: 0;
    background: currentColor;
    content: "";
  }

  .shell-checkins + .module-nav .module-nav-icon {
    width: 21px;
    height: 21px;
    font-size: 20px;
  }
}

/* Keep every mobile modal inside the Android WebView visual viewport. */
@media (max-width: 1040px) {
  .login-consent-dialog,
  .user-create-dialog,
  .user-create-dialog-shell,
  .notebook-preview-dialog,
  .notebook-preview-dialog.notebook-preview-drawer,
  .notebook-image-viewer {
    max-height: var(--app-mobile-dialog-height, calc(100dvh - 24px));
  }

  .notebook-preview-dialog,
  .notebook-preview-dialog.notebook-preview-drawer,
  .notebook-image-viewer {
    height: var(--app-mobile-dialog-height, calc(100dvh - 24px));
  }

  .login-consent-dialog-shell,
  .user-create-dialog-shell {
    max-height: var(--app-mobile-dialog-height, calc(100dvh - 24px));
  }

  .login-consent-dialog-shell,
  .user-create-dialog-body,
  .notebook-preview-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .notebook-image-viewer img {
    max-height: calc(var(--app-mobile-dialog-height, 100dvh) - 74px);
  }

  .add-word-dialog,
  .reading-drawer,
  .reading-settings-dialog,
  .reading-upload-dialog,
  .reading-annotation-dialog,
  .reading-folder-dialog,
  .reading-book-metadata-dialog {
    max-height: var(--app-mobile-overlay-max-height, calc(100dvh - 12px));
  }

  .reading-drawer {
    height: var(--app-mobile-sheet-height, min(82dvh, 760px));
  }

  .add-word-dialog > form,
  .reading-settings-card,
  .reading-upload-card,
  .reading-annotation-card,
  .reading-folder-card,
  .reading-book-metadata-card {
    max-height: var(--app-mobile-overlay-max-height, calc(100dvh - 12px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .confirm-dialog {
    max-height: calc(var(--app-mobile-viewport-height, 100dvh) - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Optional global Eggy companion: fixed above content, below menus and dialogs. */
.topbar-system .floating-companion-toggle {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-color: transparent;
  border-radius: 5px;
  background: transparent;
  color: #64748b;
  box-shadow: none;
}

.topbar-system .floating-companion-toggle:hover,
.topbar-system .floating-companion-toggle[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.72);
  color: var(--accent-dark);
}

.topbar-system .floating-companion-toggle-label {
  display: none;
}

.floating-companion-toggle-icon {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.floating-companion-stage {
  position: fixed;
  z-index: 75;
  inset: 0;
  padding: 10px 10px 18px;
  overflow: hidden;
  pointer-events: none;
}

.floating-companion-stage[hidden],
html.floating-companion-hidden .floating-companion-stage {
  display: none;
}

.floating-companion {
  position: absolute;
  top: 0;
  left: 0;
  width: 74px;
  height: 80px;
  pointer-events: none;
  will-change: transform;
}

.floating-companion-button {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 42%;
  background: transparent;
  color: inherit;
  box-shadow: none;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
}

.floating-companion-button:hover,
.floating-companion-button:active {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.floating-companion-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 2px;
}

.floating-companion.is-dragging .floating-companion-button {
  cursor: grabbing;
}

.floating-companion-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(29, 45, 37, 0.2));
  transform-origin: 50% 88%;
  animation: floating-companion-idle 3.2s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.floating-companion.is-dragging .floating-companion-image {
  animation: none;
  transform: scale(1.04);
}

.floating-companion-message {
  position: absolute;
  z-index: 2;
  bottom: calc(100% - 8px);
  left: 3px;
  width: max-content;
  max-width: min(168px, calc(100vw - 20px));
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 10px 10px 10px 3px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 8px 22px rgba(24, 33, 50, 0.14);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px) scale(0.96);
  transform-origin: left bottom;
  transition: opacity 150ms ease, transform 150ms ease;
  white-space: nowrap;
}

.floating-companion[data-bubble-side="right"] .floating-companion-message {
  right: 3px;
  left: auto;
  border-radius: 10px 10px 3px;
  transform-origin: right bottom;
}

.floating-companion.is-talking .floating-companion-message {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.floating-companion-button::after {
  position: absolute;
  top: 3px;
  right: 1px;
  color: #f25c7f;
  content: "♥";
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 2px 5px rgba(255, 255, 255, 0.8);
}

.floating-companion.is-reacting .floating-companion-button::after {
  animation: floating-companion-heart 720ms ease-out both;
}

.floating-companion.is-reacting[data-reaction="hop"] .floating-companion-image {
  animation: floating-companion-hop 560ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floating-companion.is-reacting[data-reaction="wiggle"] .floating-companion-image {
  animation: floating-companion-wiggle 620ms ease-in-out;
}

.floating-companion.is-reacting[data-reaction="twirl"] .floating-companion-image {
  animation: floating-companion-twirl 680ms ease-in-out;
}

@keyframes floating-companion-idle {
  0%,
  100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-4px) rotate(1deg); }
}

@keyframes floating-companion-hop {
  0%,
  100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-14px) scale(1.04, 0.96); }
  72% { transform: translateY(2px) scale(0.97, 1.03); }
}

@keyframes floating-companion-wiggle {
  0%,
  100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  55% { transform: rotate(8deg); }
  78% { transform: rotate(-4deg); }
}

@keyframes floating-companion-twirl {
  0%,
  100% { transform: rotate(0) scale(1); }
  45% { transform: rotate(12deg) scale(1.06); }
  72% { transform: rotate(-6deg) scale(0.98); }
}

@keyframes floating-companion-heart {
  0% { opacity: 0; transform: translateY(7px) scale(0.6); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-17px) scale(1.18); }
}

@media (max-width: 1040px) {
  .floating-companion-stage {
    padding: 6px 6px calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .floating-companion {
    width: 62px;
    height: 67px;
  }

  .floating-companion-message {
    bottom: calc(100% - 6px);
    padding: 5px 8px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-companion-image,
  .floating-companion.is-reacting .floating-companion-image,
  .floating-companion.is-reacting .floating-companion-button::after {
    animation: none !important;
  }

  .floating-companion-message {
    transition: none;
  }
}

/* Eggy House: a hidden, account-scoped manual points ledger. */
.eggy-house-page {
  position: relative;
  isolation: isolate;
  width: min(920px, calc(100% - 40px));
  min-height: calc(100vh - 48px);
  margin: 24px auto;
  border: 1px solid var(--line-soft);
  background: #f8f6ef;
  box-shadow: var(--shadow-soft);
  color: #20241f;
  overflow: hidden;
}

.eggy-house-particles {
  position: absolute;
  z-index: 0;
  inset: 0;
  contain: strict;
  overflow: hidden;
  pointer-events: none;
}

.eggy-house-particles::before,
.eggy-house-particles::after {
  position: absolute;
  inset: -8%;
  content: "";
  background-repeat: no-repeat;
}

.eggy-house-particles::before {
  background-image:
    radial-gradient(circle at 7% 12%, rgba(45, 98, 73, .34) 0 1.5px, transparent 2.4px),
    radial-gradient(circle at 19% 37%, rgba(202, 158, 62, .38) 0 2px, transparent 3px),
    radial-gradient(circle at 32% 8%, rgba(92, 143, 133, .28) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 47% 27%, rgba(45, 98, 73, .28) 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 64% 14%, rgba(202, 158, 62, .34) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 79% 35%, rgba(92, 143, 133, .3) 0 2px, transparent 3.2px),
    radial-gradient(circle at 93% 11%, rgba(45, 98, 73, .3) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 13% 66%, rgba(202, 158, 62, .28) 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 39% 74%, rgba(92, 143, 133, .27) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 69% 61%, rgba(45, 98, 73, .28) 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 89% 83%, rgba(202, 158, 62, .3) 0 1.5px, transparent 2.5px);
  animation: eggy-house-particle-drift-a 22s ease-in-out infinite alternate;
}

.eggy-house-particles::after {
  background-image:
    radial-gradient(circle at 4% 49%, rgba(92, 143, 133, .24) 0 1px, transparent 2px),
    radial-gradient(circle at 27% 55%, rgba(45, 98, 73, .24) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 43% 43%, rgba(202, 158, 62, .28) 0 1px, transparent 2px),
    radial-gradient(circle at 57% 78%, rgba(92, 143, 133, .25) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 73% 48%, rgba(202, 158, 62, .26) 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 84% 68%, rgba(45, 98, 73, .22) 0 1px, transparent 2px),
    radial-gradient(circle at 97% 54%, rgba(92, 143, 133, .25) 0 1.5px, transparent 2.5px);
  animation: eggy-house-particle-drift-b 28s ease-in-out infinite alternate;
}

@keyframes eggy-house-particle-drift-a {
  from {
    opacity: .38;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: .72;
    transform: translate3d(8px, -26px, 0);
  }
}

@keyframes eggy-house-particle-drift-b {
  from {
    opacity: .62;
    transform: translate3d(5px, -12px, 0);
  }
  to {
    opacity: .28;
    transform: translate3d(-7px, 24px, 0);
  }
}

.eggy-house-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 10px 22px;
  border-bottom: 1px solid #dfdcd2;
}

.eggy-house-header h1 {
  color: #20241f;
  font-family: ui-serif, "Songti SC", "STSong", SimSun, serif;
  font-size: 31px;
  font-weight: 650;
  letter-spacing: .03em;
}

.eggy-house-back {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #20241f;
  font-size: 34px;
  line-height: 1;
  text-decoration: none;
}

.eggy-house-back:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.eggy-house-balance {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 134px;
  align-items: end;
  gap: 24px;
  min-height: 184px;
  padding: 24px 36px 28px;
  border-bottom: 1px solid #dfdcd2;
}

.eggy-house-balance-copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.eggy-house-balance-copy p {
  margin: 0;
  font-family: ui-serif, "Songti SC", "STSong", SimSun, serif;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.35;
}

.eggy-house-balance-copy strong {
  display: block;
  color: #2d6249;
  font-family: ui-serif, "Songti SC", "STSong", SimSun, serif;
  font-size: clamp(70px, 8vw, 92px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .82;
  white-space: nowrap;
}

.eggy-house-companion {
  display: block;
  width: 74px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(29, 45, 37, .17));
}

.eggy-house-record-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 18px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.eggy-house-record-button:hover {
  background: var(--accent-dark);
}

.eggy-house-feedback {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 18px 36px 0;
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 800;
}

.eggy-house-ledger {
  position: relative;
  z-index: 1;
  padding: 24px 36px 42px;
}

.eggy-entry-date-group + .eggy-entry-date-group {
  margin-top: 26px;
}

.eggy-entry-date-group > h2 {
  margin: 0 0 10px;
  color: #20241f;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}

.eggy-entry-list {
  border-top: 1px solid transparent;
}

.eggy-entry-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 76px;
  padding: 12px 8px 12px 0;
  border-bottom: 1px solid #dfdcd2;
}

.eggy-entry-row > time {
  align-self: start;
  padding-top: 4px;
  color: #898b84;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.eggy-entry-row > div {
  min-width: 0;
}

.eggy-entry-row h3 {
  margin: 0;
  overflow-wrap: anywhere;
  color: #20241f;
  font-size: 17px;
  font-weight: 760;
  line-height: 1.45;
}

.eggy-entry-row p {
  margin: 4px 0 0;
  color: #8a8c85;
  font-size: 13px;
  line-height: 1.4;
}

.eggy-entry-row > strong {
  min-width: 54px;
  font-family: ui-serif, "Songti SC", "STSong", SimSun, serif;
  font-size: 25px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.eggy-entry-row > strong.is-positive {
  color: #2d6249;
}

.eggy-entry-row > strong.is-negative {
  color: #b13a2f;
}

.eggy-house-empty {
  display: grid;
  justify-items: center;
  padding: 54px 20px 42px;
  text-align: center;
}

.eggy-house-empty img {
  width: 66px;
  height: 71px;
  object-fit: contain;
  opacity: .86;
}

.eggy-house-empty h2 {
  margin-top: 16px;
  font-family: ui-serif, "Songti SC", "STSong", SimSun, serif;
  font-size: 22px;
}

.eggy-house-empty p {
  max-width: 360px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.eggy-house-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.eggy-house-pagination a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  text-decoration: none;
}

.eggy-house-pagination a:last-child {
  justify-self: end;
}

.eggy-entry-dialog {
  width: min(500px, calc(100% - 28px));
  max-width: none;
  max-height: min(680px, calc(100dvh - 32px));
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  overflow: visible;
}

.eggy-entry-dialog::backdrop {
  background: rgba(32, 36, 31, .34);
}

.eggy-entry-dialog-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8f6ef;
  box-shadow: 0 24px 70px rgba(32, 36, 31, .22);
}

.eggy-entry-dialog-grabber {
  display: none;
}

.eggy-entry-dialog-card > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.eggy-entry-dialog-card > header p {
  margin: 0 0 2px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.eggy-entry-dialog-card > header h2 {
  font-family: ui-serif, "Songti SC", "STSong", SimSun, serif;
  font-size: 25px;
  font-weight: 650;
}

.eggy-entry-dialog-card > header button {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
}

.eggy-entry-form {
  display: grid;
  gap: 16px;
}

.eggy-entry-form > label,
.eggy-entry-direction {
  display: grid;
  gap: 7px;
  margin: 0;
}

.eggy-entry-form > label > span,
.eggy-entry-direction legend {
  padding: 0;
  color: #4f544f;
  font-size: 13px;
  font-weight: 800;
}

.eggy-entry-form input {
  border-color: #d8d5cb;
  background: #fffefa;
}

.eggy-entry-direction {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 0;
}

.eggy-entry-direction legend {
  grid-column: 1 / -1;
  margin-bottom: 7px;
}

.eggy-entry-direction label {
  display: block;
  cursor: pointer;
}

.eggy-entry-direction input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.eggy-entry-direction label span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fffefa;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.eggy-entry-direction input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.eggy-entry-direction input:focus-visible + span {
  outline: 3px solid rgba(36, 91, 67, .22);
  outline-offset: 2px;
}

.eggy-entry-points input {
  max-width: 160px;
  font-variant-numeric: tabular-nums;
}

.eggy-entry-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.eggy-entry-actions :is(a, button) {
  min-height: 44px;
}

.eggy-entry-actions button:disabled {
  cursor: wait;
  opacity: .72;
}

.eggy-entry-page .eggy-house-header {
  margin-bottom: 0;
}

.eggy-entry-fallback {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100% - 40px));
  margin: 0 auto;
  padding: 42px 0 56px;
}

.eggy-entry-fallback > img {
  display: block;
  width: 66px;
  height: 71px;
  margin: 0 auto 10px;
  object-fit: contain;
}

.eggy-entry-fallback > p {
  margin: 0 auto 24px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 1040px) {
  .eggy-house-page {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    box-shadow: none;
  }

  .eggy-house-header {
    position: sticky;
    top: 0;
    z-index: 8;
    min-height: 72px;
    gap: 8px;
    padding: 8px 18px 7px;
    background: rgba(248, 246, 239, .98);
  }

  .eggy-house-header h1 {
    font-size: 28px;
  }

  .eggy-house-back {
    width: 28px;
    height: 38px;
    font-size: 32px;
  }

  .eggy-house-balance {
    grid-template-columns: minmax(0, 1fr) 68px 116px;
    gap: 14px;
    min-height: 144px;
    padding: 23px 20px;
  }

  .eggy-house-balance-copy p {
    font-size: 17px;
  }

  .eggy-house-balance-copy strong {
    font-size: clamp(64px, 18vw, 78px);
  }

  .eggy-house-companion {
    width: 62px;
    height: 67px;
  }

  .eggy-house-record-button {
    min-height: 48px;
    padding-inline: 14px;
    font-size: 16px;
  }

  .eggy-house-feedback {
    margin: 14px 20px 0;
  }

  .eggy-house-ledger {
    padding: 22px 20px 38px;
  }

  .eggy-entry-date-group + .eggy-entry-date-group {
    margin-top: 24px;
  }

  .eggy-entry-date-group > h2 {
    font-size: 16px;
  }

  .eggy-entry-row {
    grid-template-columns: 60px minmax(0, 1fr) auto;
    gap: 4px;
    min-height: 72px;
    padding-right: 2px;
  }

  .eggy-entry-row h3 {
    font-size: 15px;
  }

  .eggy-entry-row > strong {
    min-width: 48px;
    font-size: 22px;
  }

  .eggy-entry-dialog {
    width: 100%;
    max-height: min(82dvh, 680px);
    margin: auto 0 0;
    border-radius: 14px 14px 0 0;
  }

  .eggy-entry-dialog-card {
    max-height: min(82dvh, 680px);
    padding: 14px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 14px 14px 0 0;
    overflow-y: auto;
  }

  .eggy-entry-dialog-grabber {
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: #c8c5bc;
  }

  .eggy-entry-fallback {
    width: calc(100% - 40px);
    padding-top: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eggy-house-particles::before,
  .eggy-house-particles::after {
    animation: none;
    opacity: .28;
  }
}

@media (max-width: 360px) {
  .eggy-house-header {
    padding-inline: 12px;
  }

  .eggy-house-balance {
    grid-template-columns: minmax(0, 1fr) 54px 96px;
    gap: 9px;
    padding-inline: 14px;
  }

  .eggy-house-companion {
    width: 52px;
    height: 56px;
  }

  .eggy-house-record-button {
    padding-inline: 10px;
    font-size: 15px;
  }

  .eggy-house-ledger {
    padding-inline: 14px;
  }

  .eggy-entry-row {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 8px;
  }
}

.eggy-house-games {
  position: relative;
  z-index: 1;
  margin: 18px 28px 0;
}

.eggy-house-games > h2 {
  margin: 0 0 9px;
  color: #3d3d70;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
}

.eggy-house-game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.eggy-game-entry {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 126px;
  margin: 0;
  padding: 17px 18px;
  border: 1px solid rgba(150, 138, 222, .46);
  border-radius: 16px;
  background: #252764;
  box-shadow: 0 12px 30px rgba(41, 37, 93, .14);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}

.eggy-game-entry::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(25, 25, 78, .93) 0%, rgba(37, 39, 100, .76) 54%, rgba(47, 38, 101, .52) 100%),
    radial-gradient(circle at 88% 12%, rgba(255, 213, 98, .28), transparent 34%);
  content: "";
}

.eggy-slice-entry::after {
  background:
    linear-gradient(90deg, rgba(78, 35, 94, .94) 0%, rgba(137, 54, 115, .73) 55%, rgba(71, 62, 137, .52) 100%),
    radial-gradient(circle at 88% 12%, rgba(255, 233, 128, .36), transparent 34%);
}

.eggy-math-entry {
  grid-column: 1 / -1;
}

.eggy-math-entry::after {
  background:
    linear-gradient(90deg, rgba(24, 28, 102, .95) 0%, rgba(62, 50, 157, .76) 54%, rgba(63, 45, 136, .48) 100%),
    radial-gradient(circle at 86% 14%, rgba(142, 214, 255, .38), transparent 35%);
}

.eggy-math-entry > img {
  object-position: 50% 72%;
}

.eggy-game-entry > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 43%;
  filter: saturate(.88);
  transform: scale(1.02);
  transition: transform 180ms ease;
}

.eggy-game-entry:hover > img {
  transform: scale(1.055);
}

.eggy-game-entry-copy {
  display: grid;
  min-width: 0;
}

.eggy-game-entry-copy small {
  color: #d9d4ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
}

.eggy-game-entry-copy strong {
  margin-top: 1px;
  font-family: ui-serif, "Songti SC", "STSong", SimSun, serif;
  font-size: 22px;
  font-weight: 700;
}

.eggy-game-entry-copy em {
  margin-top: 2px;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  font-style: normal;
}

.eggy-game-entry-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

html.eggy-parkour-active,
html:has(.eggy-parkour-page) {
  height: 100%;
  overflow: visible;
  scrollbar-gutter: auto;
  background: #101037;
}

html.eggy-parkour-active body,
body:has(.eggy-parkour-page) {
  height: 100%;
  overflow: hidden;
  background: #101037;
}

.eggy-parkour-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100dvh;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 18% 24%, rgba(115, 82, 210, .36), transparent 31%),
    radial-gradient(circle at 84% 72%, rgba(36, 169, 214, .22), transparent 29%),
    #101037;
  color: #fff;
  overflow: hidden;
  overscroll-behavior: none;
}

.eggy-parkour-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  width: min(560px, 100%);
  min-height: 70px;
  margin: 0 auto;
  padding: 9px 18px 7px;
}

.eggy-parkour-header .eggy-house-back {
  color: rgba(255, 255, 255, .92);
}

.eggy-parkour-header > div {
  min-width: 0;
  text-align: center;
}

.eggy-parkour-header p {
  margin: 0 0 1px;
  color: #aeb8ef;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.eggy-parkour-header h1 {
  margin: 0;
  font-family: ui-serif, "Songti SC", "STSong", SimSun, serif;
  font-size: 25px;
  font-weight: 680;
  line-height: 1.1;
}

.eggy-parkour-header-spacer {
  width: 42px;
}

.eggy-parkour-shell {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 4px 12px 18px;
}

.eggy-parkour-stage {
  position: relative;
  width: min(430px, calc(100vw - 24px), calc((100dvh - 136px) * .5625));
  max-width: 100%;
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(214, 219, 255, .38);
  border-radius: 27px;
  background: #26276d;
  box-shadow:
    0 30px 80px rgba(2, 3, 25, .46),
    inset 0 0 0 1px rgba(255, 255, 255, .06);
  overflow: hidden;
  touch-action: none;
}

.eggy-parkour-stage::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 15, 76, .18), rgba(35, 72, 136, .24));
  content: "";
}

.eggy-parkour-stage-art {
  position: absolute;
  z-index: 0;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  object-position: 57% 47%;
  opacity: .9;
}

.eggy-parkour-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  outline: 0;
  touch-action: none;
}

.eggy-parkour-canvas:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .8);
}

.eggy-parkour-hud {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 15px;
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.eggy-parkour-hud > div {
  display: grid;
  min-width: 70px;
  padding: 7px 11px 8px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 12px;
  background: rgba(17, 19, 67, .78);
  box-shadow: 0 6px 18px rgba(8, 10, 48, .18);
}

.eggy-parkour-hud span {
  color: #cbd3ff;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
}

.eggy-parkour-hud strong {
  margin-top: 1px;
  color: #fff;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.eggy-parkour-pause-button {
  position: absolute;
  z-index: 5;
  top: 15px;
  right: 15px;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(17, 19, 67, .8);
  box-shadow: 0 6px 18px rgba(8, 10, 48, .18);
  color: #fff;
}

.eggy-parkour-pause-button i {
  font-size: 20px;
}

.eggy-parkour-touch-controls {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 35%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  touch-action: none;
}

[data-eggy-parkour-state="playing"] .eggy-parkour-touch-controls {
  opacity: 1;
  pointer-events: auto;
}

.eggy-parkour-touch-controls button {
  display: flex;
  align-items: end;
  justify-content: center;
  min-width: 0;
  height: 100%;
  padding: 0 0 22px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent 5%, rgba(29, 33, 102, .07) 52%, rgba(33, 34, 99, .27) 100%);
  box-shadow: none;
  color: rgba(255, 255, 255, .62);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.eggy-parkour-touch-controls button:first-child {
  border-right: 1px solid rgba(255, 255, 255, .07);
}

.eggy-parkour-touch-controls button i {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(19, 21, 74, .28);
  font-size: 23px;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}

.eggy-parkour-touch-controls.is-left-active button:first-child i,
.eggy-parkour-touch-controls.is-right-active button:last-child i {
  background: rgba(255, 255, 255, .85);
  color: #373477;
  transform: scale(.9);
}

.eggy-parkour-overlay {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 28px;
  background:
    radial-gradient(circle at 50% 23%, rgba(151, 117, 240, .28), transparent 33%),
    rgba(13, 15, 58, .92);
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity 170ms ease;
}

.eggy-parkour-overlay.is-visible {
  opacity: 1;
}

.eggy-parkour-overlay[hidden],
.eggy-parkour-pause-button[hidden] {
  display: none !important;
}

.eggy-parkour-overlay > img {
  width: 92px;
  height: 100px;
  margin: 11px 0 5px;
  object-fit: contain;
}

.eggy-parkour-kicker {
  color: #cdd3ff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .14em;
}

.eggy-parkour-overlay h2 {
  margin: 0;
  font-family: ui-serif, "Songti SC", "STSong", SimSun, serif;
  font-size: clamp(31px, 9vw, 42px);
  font-weight: 700;
}

.eggy-parkour-overlay > p {
  max-width: 290px;
  margin: 10px 0 20px;
  color: rgba(244, 246, 255, .78);
  font-size: 13px;
  line-height: 1.65;
}

.eggy-parkour-overlay > button {
  width: min(220px, 100%);
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff4a8, #ffd367);
  box-shadow: 0 12px 28px rgba(246, 196, 77, .22);
  color: #3c3268;
  font-size: 15px;
  font-weight: 900;
}

.eggy-parkour-overlay > button:disabled {
  cursor: wait;
  filter: grayscale(.4);
  opacity: .72;
}

.eggy-parkour-overlay > a {
  margin-top: 13px;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 750;
}

.eggy-parkour-overlay > small {
  margin-top: 13px;
  color: rgba(231, 235, 255, .68);
  font-size: 11px;
}

.eggy-parkour-overlay > small b {
  color: #fff4a8;
  font-variant-numeric: tabular-nums;
}

.eggy-parkour-result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(270px, 100%);
  margin: 18px 0 20px;
}

.eggy-parkour-result p {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 13px;
  background: rgba(255, 255, 255, .09);
}

.eggy-parkour-result span {
  color: #cbd3ff;
  font-size: 10px;
  font-weight: 750;
}

.eggy-parkour-result strong {
  color: #fff;
  font-size: 23px;
  font-variant-numeric: tabular-nums;
}

.eggy-parkour-noscript {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  background: #18194f;
  text-align: center;
}

.eggy-parkour-noscript a {
  color: #fff4a8;
}

.eggy-parkour-footnote {
  margin: 0;
  color: rgba(221, 226, 255, .67);
  font-size: 11px;
  text-align: center;
}

@media (max-width: 1040px) {
  .eggy-house-games {
    margin: 14px 20px 0;
  }

  .eggy-house-game-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .eggy-math-entry {
    grid-column: auto;
  }

  .eggy-game-entry {
    min-height: 86px;
    padding: 14px 15px;
    border-radius: 14px;
  }

  .eggy-game-entry-copy strong {
    font-size: 20px;
  }

  .eggy-game-entry-action {
    min-height: 38px;
    padding-inline: 12px;
  }

  .eggy-parkour-header {
    min-height: 62px;
    padding: 7px 14px 5px;
  }

  .eggy-parkour-header h1 {
    font-size: 23px;
  }

  .eggy-parkour-shell {
    padding: 3px 8px 12px;
  }

  .eggy-parkour-stage {
    width: min(calc(100vw - 16px), calc((100dvh - 116px) * .5625));
    border-radius: 22px;
  }

  .eggy-parkour-footnote {
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 390px) {
  .eggy-house-games {
    margin-inline: 14px;
  }

  .eggy-game-entry {
    gap: 10px;
    padding-inline: 13px;
  }

  .eggy-game-entry-copy em {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .eggy-game-entry-action {
    padding-inline: 10px;
    font-size: 12px;
  }

  .eggy-parkour-hud {
    top: 12px;
    left: 12px;
  }

  .eggy-parkour-hud > div {
    min-width: 62px;
    padding-inline: 9px;
  }

  .eggy-parkour-pause-button {
    top: 12px;
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eggy-game-entry > img,
  .eggy-parkour-touch-controls,
  .eggy-parkour-touch-controls button i,
  .eggy-parkour-overlay {
    transition: none;
  }
}

/* Goals home: final Swiss Archive locks after shared shell rules. */

body:has(.shell-goals) .floating-companion-stage {
  display: none;
}

@media (min-width: 1041px) {
  .shell-goals {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-bottom: 0;
  }

  .shell-goals .topbar {
    min-height: 68px;
    padding-inline: clamp(24px, 2.5vw, 48px);
  }

  .shell-goals .focus-layout {
    grid-template-columns:
      clamp(196px, 14vw, 224px)
      minmax(0, 1fr)
      clamp(232px, 17vw, 280px);
    min-height: calc(100vh - 68px);
  }

  .shell-goals .goal-category-index {
    position: relative;
    top: auto;
    align-self: stretch;
    display: block;
    width: 100%;
    height: auto;
    min-height: calc(100vh - 68px);
    padding: 0;
    border-right: 1px solid var(--goal-studio-line);
    background: var(--goal-studio-surface);
    box-sizing: border-box;
  }

  .shell-goals .goal-category-index-inner {
    position: sticky;
    top: 68px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 68px);
    min-height: 640px;
    padding: 30px 24px 34px;
    box-sizing: border-box;
  }

  .shell-goals .goal-category-index-link {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .shell-goals .goal-category-index-link > strong {
    white-space: nowrap;
  }

  .shell-goals .goal-overview {
    padding-inline: clamp(32px, 3vw, 56px);
  }

  .shell-goals .goal-editorial-hero {
    min-height: 146px;
    padding-block: 24px 22px;
  }

  .shell-goals .goal-editorial-date time {
    font-size: clamp(52px, 5vw, 66px);
  }

  .shell-goals .goal-inline-detail[open] > summary {
    margin-bottom: 0;
  }

  .shell-goals .inline-edit-panel.goal-inline-panel {
    width: 100%;
    margin: 0;
    padding: 20px 20px 24px;
    box-sizing: border-box;
  }

  .shell-goals .focus-rail {
    padding-inline: 24px;
  }

  .shell-goals .goal-editorial-actions .button {
    white-space: nowrap;
  }

  .shell-goals .goal-editorial-primary {
    min-width: 122px;
  }

  .shell-goals .goal-category-index-tools .density-toggle-fallback,
  .shell-goals .goal-category-index-tools [data-goal-sort-toggle] {
    display: inline-flex !important;
  }
}

/* Goals home: editorial inline editor, selected direction 01. */

@media (min-width: 1041px) {
  .shell-goals .goal-row:has(.goal-inline-detail[open]),
  .shell-goals .goal-row.is-current:has(.goal-inline-detail[open]):hover,
  .shell-goals .goal-row.is-current:has(.goal-inline-detail[open]):focus-within {
    background: transparent;
    box-shadow: none;
  }

  .shell-goals .inline-edit-panel.goal-inline-panel {
    display: grid;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 16px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
  }

  .shell-goals .goal-inline-editorial-form {
    display: grid;
    gap: 0;
  }

  .shell-goals .goal-inline-editorial-basics {
    position: relative;
    display: grid;
    gap: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--goal-studio-line);
  }

  .shell-goals .goal-inline-editorial-basics::before {
    position: absolute;
    top: 0;
    bottom: 16px;
    left: 84px;
    width: 1px;
    background: var(--goal-studio-line);
    content: "";
    pointer-events: none;
  }

  .shell-goals .goal-inline-editorial-row,
  .shell-goals .goal-inline-editorial-meta > label,
  .shell-goals .goal-inline-editorial-description {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    min-width: 0;
  }

  .shell-goals .goal-inline-editorial-row {
    padding-bottom: 14px;
  }

  .shell-goals .goal-inline-editorial-label {
    align-self: center;
    color: var(--goal-studio-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
  }

  .shell-goals .goal-inline-editorial-title > input {
    width: 100%;
  }

  .shell-goals .goal-inline-editorial-tag-content {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(230px, 1.15fr);
    gap: 16px;
    align-items: center;
    min-width: 0;
  }

  .shell-goals .goal-inline-editorial-tag-content > input {
    width: 100%;
  }

  .shell-goals .goal-inline-editorial-tags .tag-picker {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .shell-goals .goal-inline-editorial-tags .tag-picker::-webkit-scrollbar {
    display: none;
  }

  .shell-goals .goal-inline-editorial-tags .tag-choice {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--goal-studio-accent);
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
  }

  .shell-goals .goal-inline-editorial-tags .tag-choice:hover,
  .shell-goals .goal-inline-editorial-tags .tag-choice:focus-visible {
    background: var(--goal-studio-accent-soft);
    color: var(--goal-studio-accent-hover);
  }

  .shell-goals .goal-inline-editorial-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: center;
    min-width: 0;
  }

  .shell-goals .goal-inline-editorial-meta > label:last-child {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .shell-goals .goal-inline-editorial-meta select {
    width: 100%;
  }

  .shell-goals .goal-inline-editorial-form :is(input, select, textarea) {
    border-color: var(--goal-studio-line);
    border-radius: 2px;
    background: var(--goal-studio-surface);
    color: var(--goal-studio-ink);
    box-shadow: none;
  }

  .shell-goals .goal-inline-editorial-form :is(input, select) {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 15px;
  }

  .shell-goals .goal-inline-editorial-form :is(input, select, textarea):focus {
    border-color: var(--goal-studio-accent);
    outline: 2px solid #7aa4ff;
    outline-offset: 1px;
  }

  .shell-goals .goal-inline-editorial-time {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    padding: 18px 0;
    border-bottom: 1px solid var(--goal-studio-line);
  }

  .shell-goals .goal-inline-editorial-form .goal-inline-editorial-time .goal-date-time-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    min-width: 0;
  }

  .shell-goals .goal-inline-editorial-time .goal-date-time-field > span {
    align-self: start;
    color: var(--goal-studio-ink-soft);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
  }

  .shell-goals .goal-inline-editorial-time input {
    width: 100%;
  }

  .shell-goals .goal-inline-editorial-description {
    position: relative;
    align-items: start;
    padding: 20px 0 18px;
  }

  .shell-goals .goal-inline-editorial-description::before {
    position: absolute;
    top: 20px;
    bottom: 18px;
    left: 84px;
    width: 1px;
    background: var(--goal-studio-line);
    content: "";
    pointer-events: none;
  }

  .shell-goals .goal-inline-editorial-form .goal-inline-editorial-description > span {
    align-self: start;
    padding-top: 10px;
  }

  .shell-goals .goal-inline-editorial-description textarea {
    width: 100%;
    min-height: 112px;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.6;
    resize: vertical;
  }

  .shell-goals .goal-inline-panel .goal-inline-actions {
    display: grid;
    grid-template-columns:
      minmax(112px, 160px)
      minmax(104px, 146px)
      minmax(104px, 170px)
      minmax(104px, 146px)
      minmax(64px, 80px);
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 20px;
    border-top: 1px solid var(--goal-studio-line);
    border-bottom: 1px solid var(--goal-studio-line);
  }

  .shell-goals .goal-inline-panel .goal-inline-actions > form {
    display: flex;
    min-width: 0;
  }

  .shell-goals .goal-inline-panel .goal-inline-actions > button,
  .shell-goals .goal-inline-panel .goal-inline-actions > form > button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 2px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
  }

  .shell-goals .goal-inline-panel .goal-inline-actions > button[type="submit"] {
    border-color: var(--goal-studio-accent);
    background: var(--goal-studio-accent);
    color: #fff;
  }

  .shell-goals .goal-inline-panel .goal-inline-actions > button[type="submit"]:hover,
  .shell-goals .goal-inline-panel .goal-inline-actions > button[type="submit"]:focus-visible {
    border-color: var(--goal-studio-accent-hover);
    background: var(--goal-studio-accent-hover);
  }

  .shell-goals .goal-inline-panel .goal-inline-actions .secondary {
    border-color: var(--goal-studio-line);
    background: transparent;
    color: var(--goal-studio-ink);
  }

  .shell-goals .goal-inline-panel .goal-inline-actions .secondary:hover,
  .shell-goals .goal-inline-panel .goal-inline-actions .secondary:focus-visible {
    border-color: var(--goal-studio-ink);
    background: var(--goal-studio-surface);
  }

  .shell-goals .goal-inline-panel .goal-inline-actions .danger {
    border-color: transparent;
    background: transparent;
    color: var(--goal-studio-high);
  }

  .shell-goals .goal-inline-panel .goal-inline-actions .danger:hover,
  .shell-goals .goal-inline-panel .goal-inline-actions .danger:focus-visible {
    border-color: var(--goal-studio-high);
    background: transparent;
  }
}

/* Notes / Swiss Archive
   Continuous editorial surfaces, date gutters and one blue primary action. */

.shell-notes {
  --note-paper: #f5f4f0;
  --note-surface: #fbfaf7;
  --note-ink: #15171a;
  --note-ink-soft: #34383d;
  --note-muted: #6c7178;
  --note-faint: #979ba0;
  --note-rule: #d2d3d0;
  --note-rule-strong: #202226;
  --note-blue: #1455cc;
  --note-blue-hover: #0b43a8;
  --note-blue-soft: #e8eef9;
  --note-red: #d1192e;
  --note-red-soft: #fae9ec;
  --note-focus: #7aa4ff;
  background: var(--note-paper);
  color: var(--note-ink);
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.shell-notes :where(.module-page-title, .note-ledger-title h2, .note-panel-head h2, .note-edit-head h2, .history-panel-head h2) {
  color: var(--note-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-weight: 500;
  letter-spacing: 0;
}

.shell-notes :where(.note-journal, .note-trash-page, .note-edit-surface) {
  box-sizing: border-box;
}

.shell-notes :where(.panel, .note-card, .history-panel, .inline-edit-panel) {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shell-notes :where(input, select, textarea) {
  min-height: 44px;
  border: 1px solid var(--note-rule);
  border-radius: 2px;
  background: var(--note-surface);
  color: var(--note-ink);
  font: inherit;
  box-shadow: none;
}

.shell-notes textarea {
  line-height: 1.65;
}

.shell-notes :where(input, select, textarea):focus-visible {
  border-color: var(--note-blue);
  outline: 2px solid var(--note-focus);
  outline-offset: 1px;
  box-shadow: none;
}

.shell-notes :where(.button, button) {
  border-radius: 2px;
  box-shadow: none;
}

.shell-notes .note-journal {
  width: 100%;
  padding: 0 clamp(24px, 4vw, 56px) 48px;
}

.shell-notes .note-ledger-head {
  display: flex;
  gap: 32px;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 86px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--note-rule-strong);
}

.shell-notes .note-ledger-title {
  display: grid;
  gap: 4px;
}

.shell-notes .note-ledger-kicker {
  display: block;
  color: var(--note-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.shell-notes .note-ledger-title h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
}

.shell-notes .note-ledger-counts {
  display: flex;
  gap: 28px;
  margin: 0;
}

.shell-notes .note-ledger-counts div {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: baseline;
}

.shell-notes .note-ledger-counts dt {
  color: var(--note-muted);
  font-size: 12px;
  font-weight: 600;
}

.shell-notes .note-ledger-counts dd {
  margin: 0;
  color: var(--note-ink);
  font-size: 18px;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 600;
}

.shell-notes .note-panel {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 24px 0;
  border: 0;
  border-bottom: 1px solid var(--note-rule);
}

.shell-notes .note-panel[hidden] {
  display: none;
}

.shell-notes .note-panel-head {
  display: grid;
  align-content: start;
  gap: 7px;
  padding-right: 24px;
}

.shell-notes .note-panel-head > span {
  color: var(--note-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.shell-notes .note-panel-head h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

.shell-notes .note-editorial-form {
  min-width: 0;
  padding-left: 24px;
  border-left: 1px solid var(--note-rule);
}

.shell-notes .note-editorial-form,
.shell-notes .note-editorial-form label {
  color: var(--note-ink-soft);
}

.shell-notes .note-editorial-form label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.shell-notes .note-editorial-form label > span,
.shell-notes .note-inline-form label > span,
.shell-notes .note-inline-tag-head > span {
  color: var(--note-ink-soft);
  font-size: 13px;
  font-weight: 650;
}

.shell-notes .note-content-field textarea {
  width: 100%;
  min-height: 146px;
  padding: 12px 14px;
  resize: vertical;
}

.shell-notes .note-editorial-form .note-inline-meta-fields {
  grid-template-columns: minmax(132px, 0.72fr) minmax(240px, 1.6fr) minmax(92px, auto);
  gap: 24px;
  align-items: end;
  padding-top: 18px;
}

.shell-notes .note-inline-tag-head {
  min-height: 24px;
}

.shell-notes .note-inline-tag-head .tag-picker {
  gap: 8px;
  margin: 0;
}

.shell-notes .tag-picker .tag-choice,
.shell-notes .note-inline-tags .tag,
.shell-notes .deleted-note-card .tag {
  min-height: 24px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--note-blue);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  box-shadow: none;
}

.shell-notes .tag-picker .tag-choice {
  min-height: 28px;
  padding: 3px 6px;
  border: 1px solid var(--note-rule);
  background: transparent;
}

.shell-notes .tag-picker .tag-choice:hover,
.shell-notes .tag-picker .tag-choice:focus-visible {
  border-color: var(--note-blue);
  background: var(--note-blue-soft);
  color: var(--note-blue-hover);
}

.shell-notes .note-inline-pin-field {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: var(--note-ink);
}

.shell-notes .note-inline-pin-field input {
  width: 18px;
  min-height: 18px;
  margin: 0;
}

.shell-notes .note-editorial-form .form-actions,
.shell-notes .note-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}

.shell-notes .note-editorial-form .form-actions :where(.button, button),
.shell-notes .note-inline-actions :where(.button, button) {
  width: auto;
  min-width: 112px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--note-rule);
  border-radius: 2px;
  background: transparent;
  color: var(--note-ink);
  font-size: 14px;
  font-weight: 650;
}

.shell-notes .note-editorial-form .form-actions > :first-child,
.shell-notes .note-inline-actions > button:first-child {
  border-color: var(--note-blue);
  background: var(--note-blue);
  color: #fff;
}

.shell-notes .note-editorial-form .form-actions > :first-child:hover,
.shell-notes .note-editorial-form .form-actions > :first-child:focus-visible,
.shell-notes .note-inline-actions > button:first-child:hover,
.shell-notes .note-inline-actions > button:first-child:focus-visible {
  border-color: var(--note-blue-hover);
  background: var(--note-blue-hover);
}

.shell-notes .note-inline-actions form {
  display: flex;
  min-width: 0;
  margin: 0;
}

.shell-notes .note-inline-actions .danger,
.shell-notes .deleted-note-actions .danger {
  border-color: transparent;
  background: transparent;
  color: var(--note-red);
}

.shell-notes .note-inline-actions .danger:hover,
.shell-notes .note-inline-actions .danger:focus-visible,
.shell-notes .deleted-note-actions .danger:hover,
.shell-notes .deleted-note-actions .danger:focus-visible {
  border-color: var(--note-red);
  background: var(--note-red-soft);
}

.shell-notes .note-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(300px, 1fr) auto;
  gap: 24px;
  align-items: end;
}

.shell-notes .note-filter .note-form-grid {
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 12px;
}

.shell-notes .note-filter .form-actions {
  flex-wrap: nowrap;
  margin: 0;
}

.shell-notes .note-filter .form-actions :where(.button, button) {
  min-width: 92px;
}

.shell-notes .note-list {
  display: block;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.shell-notes .note-list > .empty {
  margin: 0;
  padding: 32px 0;
  border: 0;
  color: var(--note-muted);
}

.shell-notes .pinned-notes {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--note-rule-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.shell-notes .pinned-notes > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 0;
  border: 0;
  color: var(--note-ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  list-style: none;
}

.shell-notes .pinned-notes > summary:hover,
.shell-notes .pinned-notes > summary:focus-visible {
  background: var(--note-blue-soft);
  color: var(--note-blue);
  outline: 0;
}

.shell-notes .pinned-notes > summary > span {
  gap: 8px;
  padding-left: 2px;
}

.shell-notes .pinned-notes > summary > span::before {
  display: none;
}

.shell-notes .pinned-notes > summary > span i {
  color: var(--note-blue);
}

.shell-notes .pinned-notes > summary strong {
  min-width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--note-muted);
  font-size: 12px;
  line-height: 1;
}

.shell-notes .pinned-notes > summary::after {
  width: 7px;
  height: 7px;
  margin: 0 5px 4px 2px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform 140ms ease, margin 140ms ease;
}

.shell-notes .pinned-notes[open] > summary::after {
  margin-top: 4px;
  margin-bottom: 0;
  transform: rotate(225deg);
}

.shell-notes .pinned-note-list {
  display: block;
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--note-rule);
  background: transparent;
}

.shell-notes .note-section-heading {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-height: 52px;
  padding: 18px 0 12px;
  border-bottom: 1px solid var(--note-rule-strong);
  color: var(--note-ink);
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
}

.shell-notes .note-section-heading strong {
  min-width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--note-muted);
  font: inherit;
  font-size: 12px;
  line-height: 1;
}

.shell-notes .note-date-groups,
.shell-notes .note-date-group,
.shell-notes .note-date-items {
  display: block;
}

.shell-notes .note-date-group {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--note-rule);
}

.shell-notes .note-date-heading {
  display: grid;
  align-content: start;
  gap: 5px;
  margin: 0;
  padding: 18px 24px 18px 0;
  border: 0;
  color: var(--note-ink);
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

.shell-notes .note-date-heading::after {
  display: none;
}

.shell-notes .note-date-heading time {
  color: var(--note-ink);
  font-size: 16px;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 650;
  line-height: 1.25;
}

.shell-notes .note-date-heading span {
  color: var(--note-muted);
  font-size: 12px;
  font-weight: 500;
}

.shell-notes .note-date-items {
  min-width: 0;
  border-left: 1px solid var(--note-rule);
}

.shell-notes .note-card,
.shell-notes .pinned-note-list .note-card,
.shell-notes .pinned-note-list .note-card.is-pinned,
.shell-notes .note-date-items .note-card,
.shell-notes .note-date-items .note-card.is-date-grouped {
  position: relative;
  display: block;
  margin: 0;
  padding: 16px 0 16px 24px;
  border: 0;
  border-bottom: 1px solid var(--note-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.shell-notes .pinned-note-list .note-card {
  padding-left: 0;
}

.shell-notes .note-date-items .note-card:last-child,
.shell-notes .pinned-note-list .note-card:last-child {
  border-bottom: 0;
}

.shell-notes .note-card::before {
  display: none;
}

.shell-notes .note-card:hover,
.shell-notes .note-card:focus-within,
.shell-notes .note-card.is-pinned:hover,
.shell-notes .note-card.is-pinned:focus-within,
.shell-notes .note-card:has(.note-inline-detail[open]),
.shell-notes .note-date-items .note-card:hover,
.shell-notes .note-date-items .note-card:focus-within,
.shell-notes .pinned-note-list .note-card:hover,
.shell-notes .pinned-note-list .note-card:focus-within {
  border-color: var(--note-rule);
  background: var(--note-blue-soft);
  box-shadow: none;
}

.shell-notes .note-card-summary {
  display: block;
  cursor: pointer;
}

.shell-notes .note-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(176px, 236px);
  gap: 32px;
  align-items: start;
}

.shell-notes .note-excerpt-link {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.shell-notes .note-excerpt {
  margin: 0;
  color: var(--note-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  white-space: pre-wrap;
}

.shell-notes .note-meta {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  margin: 0;
  padding: 0;
  color: var(--note-muted);
}

.shell-notes .note-meta time {
  order: -3;
  width: 100%;
  color: var(--note-ink-soft);
  font-size: 12px;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.5;
}

.shell-notes .note-time-full {
  display: inline;
}

.shell-notes .note-time-short {
  display: none;
}

.shell-notes .note-meta .importance,
.shell-notes .pin-label {
  min-height: 22px;
  padding: 1px 6px;
  border: 1px solid var(--note-rule);
  border-radius: 0;
  background: transparent;
  color: var(--note-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 18px;
}

.shell-notes .note-meta .importance-important {
  border-color: color-mix(in srgb, var(--note-blue) 38%, var(--note-rule));
  color: var(--note-blue);
}

.shell-notes .note-meta .importance-critical {
  border-color: color-mix(in srgb, var(--note-red) 38%, var(--note-rule));
  color: var(--note-red);
}

.shell-notes .pin-label {
  gap: 0;
  color: var(--note-blue);
}

.shell-notes .pin-label::before {
  display: none;
}

.shell-notes .note-inline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.shell-notes .note-inline-detail[open] > .note-card-summary {
  display: none;
}

.shell-notes .note-inline-panel {
  display: grid;
  gap: 0;
  padding: 2px 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.shell-notes .note-inline-form {
  display: grid;
  gap: 0;
}

.shell-notes .note-inline-content-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-bottom: 18px;
}

.shell-notes .note-inline-content-editor {
  display: block;
  width: 100%;
  min-height: 132px;
  padding: 12px 14px;
  border: 1px solid var(--note-rule);
  border-radius: 2px;
  background: var(--note-surface);
  color: var(--note-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 16px;
  line-height: 1.65;
  resize: vertical;
}

.shell-notes .note-inline-content-editor:focus-visible {
  border-color: var(--note-blue);
  background: var(--note-surface);
  outline: 2px solid var(--note-focus);
  outline-offset: 1px;
}

.shell-notes .note-inline-panel .note-inline-meta-fields {
  grid-template-columns: minmax(128px, 0.72fr) minmax(240px, 1.6fr);
  gap: 24px;
  align-items: end;
  padding: 18px 0;
  border-top: 1px solid var(--note-rule);
  border-bottom: 1px solid var(--note-rule);
}

.shell-notes .note-inline-form label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.shell-notes .note-inline-actions {
  display: flex;
  grid-template-columns: none;
  gap: 12px;
  margin-top: 0;
  padding-top: 16px;
}

.shell-notes .note-inline-actions button {
  width: auto;
  min-width: 104px;
  min-height: 42px;
  padding-inline: 16px;
  font-size: 14px;
}

.shell-notes .note-trash-page,
.shell-notes .note-edit-surface {
  width: auto;
  margin: 0 clamp(24px, 4vw, 56px);
  padding: 0 0 48px;
  border: 0;
  background: transparent;
  overflow: visible;
}

.shell-notes .note-trash-page .history-panel-head {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 104px;
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--note-rule-strong);
}

.shell-notes .note-trash-page .history-panel-head > div,
.shell-notes .note-edit-head {
  display: grid;
  gap: 6px;
}

.shell-notes .note-trash-page .history-panel-head h2,
.shell-notes .note-edit-head h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
}

.shell-notes .note-trash-page .history-panel-head > span {
  color: var(--note-muted);
  font-size: 13px;
  font-weight: 500;
}

.shell-notes .note-trash-page .note-list {
  margin: 0;
}

.shell-notes .deleted-note-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--note-rule);
}

.shell-notes .deleted-note-card .note-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.shell-notes .deleted-note-card .note-meta {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  gap: 6px 10px;
}

.shell-notes .deleted-note-card .note-meta time {
  order: initial;
  width: auto;
}

.shell-notes .deleted-note-card .note-excerpt {
  grid-column: 1;
  grid-row: 2;
}

.shell-notes .deleted-note-actions {
  display: flex;
  grid-template-columns: none;
  gap: 10px;
  min-width: 0;
  margin: 0;
}

.shell-notes .deleted-note-actions :where(.button, button) {
  width: auto;
  min-width: 92px;
  min-height: 40px;
  border-radius: 2px;
}

.shell-notes .note-edit-head {
  min-height: 112px;
  align-content: end;
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--note-rule-strong);
}

.shell-notes .note-edit-head p {
  margin: 0;
  color: var(--note-muted);
  font-size: 13px;
  line-height: 1.5;
}

.shell-notes .note-edit-form {
  max-width: 980px;
  padding: 28px 0 0;
  border: 0;
}

.shell-notes .note-edit-form .note-content-field textarea {
  min-height: 320px;
}

.shell-notes .note-edit-form .note-inline-meta-fields {
  grid-template-columns: minmax(150px, 0.75fr) minmax(260px, 1.5fr) minmax(92px, auto);
  padding: 20px 0;
  border-bottom: 1px solid var(--note-rule);
}

@media (min-width: 1041px) {
  .shell.shell-notes {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
  }

  .shell-notes > .topbar {
    grid-template-columns: minmax(160px, 1fr) auto;
    gap: 28px;
    width: 100%;
    min-height: 68px;
    margin: 0;
    padding: 0 clamp(24px, 3vw, 40px);
    border-bottom: 1px solid var(--note-rule);
    background: var(--note-surface);
  }

  .shell-notes > .topbar .topbar-title {
    align-items: center;
  }

  .shell-notes > .topbar h1,
  .shell-notes > .topbar .module-page-title {
    color: var(--note-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
  }

  .shell-notes > .topbar .topbar-side {
    flex-direction: row;
    gap: 14px;
  }

  .shell-notes .desktop-module-nav,
  .shell-notes .topbar-system,
  .shell-notes .top-actions {
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell-notes .desktop-module-nav .module-nav-icon,
  .shell-notes .desktop-module-nav a::before {
    display: none;
  }

  .shell-notes .desktop-module-nav a {
    position: relative;
    min-width: 0;
    min-height: 44px;
    padding: 11px 9px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--note-muted);
    font-size: 14px;
    font-weight: 650;
    box-shadow: none;
  }

  .shell-notes .desktop-module-nav a::after {
    position: absolute;
    right: 9px;
    bottom: 5px;
    left: 9px;
    height: 2px;
    background: transparent;
    content: "";
  }

  .shell-notes .desktop-module-nav a:hover,
  .shell-notes .desktop-module-nav a:focus-visible,
  .shell-notes .desktop-module-nav a.is-active {
    border: 0;
    background: transparent;
    color: var(--note-blue);
    outline: 0;
    box-shadow: none;
    transform: none;
  }

  .shell-notes .desktop-module-nav a.is-active::after {
    background: var(--note-blue);
  }

  .shell-notes .top-actions {
    margin-left: 4px;
  }

  .shell-notes .top-actions :where(.button, button) {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--note-rule);
    border-radius: 2px;
    background: transparent;
    color: var(--note-ink-soft);
    font-size: 13px;
    font-weight: 650;
    box-shadow: none;
  }

  .shell-notes .top-actions :where(.button, button):hover,
  .shell-notes .top-actions :where(.button, button):focus-visible {
    border-color: var(--note-ink);
    background: var(--note-surface);
    color: var(--note-ink);
    outline: 0;
  }

  .shell-notes .top-actions .top-action-primary,
  .shell-notes .top-actions .top-action-primary:hover,
  .shell-notes .top-actions .top-action-primary:focus-visible {
    min-width: 88px;
    border-color: var(--note-blue);
    background: var(--note-blue);
    color: #fff;
  }

  .shell-notes .top-actions .top-action-primary:hover,
  .shell-notes .top-actions .top-action-primary:focus-visible {
    border-color: var(--note-blue-hover);
    background: var(--note-blue-hover);
  }
}

@media (max-width: 1040px) {
  .shell.shell-notes {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0 0 calc(68px + env(safe-area-inset-bottom, 0px));
    background: var(--note-paper);
    color: var(--note-ink);
  }

  .shell-notes > .topbar,
  .shell-notes > .topbar.is-module-landing {
    position: sticky;
    top: 0;
    z-index: 8;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 50px;
    margin: 0;
    padding: 3px 8px 3px 16px;
    border-bottom: 1px solid var(--note-rule);
    background: rgb(251 250 247 / 98%);
    backdrop-filter: none;
  }

  .shell-notes > .topbar .topbar-title {
    gap: 6px;
    align-items: center;
  }

  .shell-notes > .topbar h1,
  .shell-notes > .topbar .module-page-title {
    color: var(--note-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
  }

  .shell-notes > .topbar .module-page-meta {
    color: var(--note-muted);
    font-size: 12px;
    font-weight: 500;
  }

  .shell-notes > .topbar .top-actions.is-mobile-menu,
  .shell-notes > .topbar .top-actions.is-mobile-menu .top-actions-main {
    gap: 6px;
  }

  .shell-notes > .topbar .top-actions.is-mobile-menu .top-actions-main .top-action-primary {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--note-blue);
    border-radius: 2px;
    background: var(--note-blue);
    color: #fff;
    font-size: 20px;
    box-shadow: none;
  }

  .shell-notes > .topbar .top-action-primary span:not(.top-action-icon) {
    display: none;
  }

  .shell-notes > .topbar .top-action-icon {
    font-size: 22px;
  }

  .shell-notes > .topbar .top-actions.is-mobile-menu.is-menu-ready .top-actions-more {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--note-rule);
    border-radius: 2px;
    background: transparent;
    color: var(--note-muted);
    font-size: 20px;
  }

  .shell-notes .note-journal {
    padding: 0 16px 32px;
  }

  .shell-notes .note-ledger-head {
    min-height: 74px;
    padding: 13px 0 14px;
  }

  .shell-notes .note-ledger-title {
    gap: 3px;
  }

  .shell-notes .note-ledger-title h2 {
    font-size: 24px;
  }

  .shell-notes .note-ledger-counts {
    gap: 12px;
  }

  .shell-notes .note-ledger-counts div {
    display: grid;
    gap: 2px;
  }

  .shell-notes .note-ledger-counts dt {
    font-size: 11px;
  }

  .shell-notes .note-ledger-counts dd {
    font-size: 15px;
  }

  .shell-notes .note-panel {
    display: block;
    margin: 0;
    padding: 18px 0 20px;
    border: 0;
    border-bottom: 1px solid var(--note-rule);
    background: transparent;
  }

  .shell-notes .note-panel[hidden] {
    display: none;
  }

  .shell-notes .note-panel-head {
    gap: 4px;
    padding: 0 0 14px;
  }

  .shell-notes .note-panel-head h2 {
    font-size: 20px;
  }

  .shell-notes .note-editorial-form {
    padding: 0;
    border: 0;
  }

  .shell-notes .note-content-field textarea {
    min-height: 132px;
  }

  .shell-notes .note-editorial-form .note-inline-meta-fields,
  .shell-notes .note-edit-form .note-inline-meta-fields,
  .shell-notes .note-inline-panel .note-inline-meta-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-top: 16px;
  }

  .shell-notes .note-inline-pin-field {
    justify-self: start;
    min-height: 44px;
  }

  .shell-notes .note-editorial-form .form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin-top: 16px;
  }

  .shell-notes .note-editorial-form .form-actions :where(.button, button) {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .shell-notes .note-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .shell-notes .note-filter .note-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .shell-notes .note-filter .form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .shell-notes .note-list {
    display: block;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .shell-notes .pinned-notes {
    border: 0;
    border-bottom: 1px solid var(--note-rule-strong);
    border-radius: 0;
    background: transparent;
  }

  .shell-notes .pinned-notes > summary {
    min-height: 48px;
    padding: 0;
    border: 0;
    color: var(--note-ink);
    font-size: 14px;
  }

  .shell-notes .pinned-notes[open] > summary {
    border-bottom: 1px solid var(--note-rule);
  }

  .shell-notes .pinned-note-list {
    display: block;
    gap: 0;
    padding: 0;
    border: 0;
  }

  .shell-notes .note-section-heading {
    min-height: 48px;
    padding: 16px 0 10px;
    font-size: 14px;
  }

  .shell-notes .note-date-groups {
    display: block;
  }

  .shell-notes .note-date-group {
    display: block;
    border-bottom: 1px solid var(--note-rule);
  }

  .shell-notes .note-date-heading {
    display: flex;
    gap: 8px;
    align-items: baseline;
    min-height: 42px;
    padding: 13px 0 8px;
    border-bottom: 1px solid var(--note-rule);
  }

  .shell-notes .note-date-heading time {
    font-size: 15px;
  }

  .shell-notes .note-date-heading span {
    font-size: 12px;
  }

  .shell-notes .note-date-items {
    display: block;
    border: 0;
  }

  .shell-notes .note-card,
  .shell-notes .pinned-note-list .note-card,
  .shell-notes .pinned-note-list .note-card.is-pinned,
  .shell-notes .note-date-items .note-card,
  .shell-notes .note-date-items .note-card.is-date-grouped {
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid var(--note-rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell-notes .note-date-items .note-card:last-child,
  .shell-notes .pinned-note-list .note-card:last-child {
    border-bottom: 0;
  }

  .shell-notes .note-card:hover,
  .shell-notes .note-card:focus-within,
  .shell-notes .note-card:has(.note-inline-detail[open]) {
    background: var(--note-blue-soft);
    box-shadow: none;
  }

  .shell-notes .note-card-main,
  .shell-notes .note-date-items .note-card-main,
  .shell-notes .pinned-note-list .note-card-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .shell-notes .note-excerpt-link,
  .shell-notes .note-date-items .note-excerpt-link,
  .shell-notes .pinned-note-list .note-excerpt-link {
    grid-column: 1;
    grid-row: 1;
  }

  .shell-notes .note-excerpt {
    color: var(--note-ink);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
  }

  .shell-notes .note-meta,
  .shell-notes .note-date-items .note-meta,
  .shell-notes .pinned-note-list .note-meta {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    flex-wrap: wrap;
    gap: 4px 9px;
    align-items: center;
    margin: 0;
  }

  .shell-notes .note-meta time,
  .shell-notes .note-date-items .note-meta time,
  .shell-notes .pinned-note-list .note-meta time {
    order: 10;
    width: auto;
    margin-left: auto;
    padding: 0;
    color: var(--note-muted);
    font-size: 12px;
    line-height: 22px;
  }

  .shell-notes .note-time-full {
    display: none;
  }

  .shell-notes .note-time-short {
    display: inline;
  }

  .shell-notes .note-inline-tags,
  .shell-notes .note-date-items .note-inline-tags,
  .shell-notes .pinned-note-list .note-inline-tags {
    display: flex;
    order: 3;
    flex-wrap: wrap;
    gap: 4px 9px;
    margin: 0;
  }

  .shell-notes .note-meta .importance,
  .shell-notes .pin-label {
    min-height: 20px;
    padding: 0 5px;
    font-size: 11px;
  }

  .shell-notes .note-inline-panel {
    padding: 0 0 2px;
  }

  .shell-notes .note-inline-content-field {
    padding-bottom: 14px;
  }

  .shell-notes .note-inline-content-editor {
    min-height: 120px;
    font-size: 16px;
  }

  .shell-notes .note-inline-panel .note-inline-meta-fields {
    padding: 14px 0;
  }

  .shell-notes .note-inline-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding-top: 14px;
  }

  .shell-notes .note-inline-actions form {
    width: 100%;
  }

  .shell-notes .note-inline-actions button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .shell-notes .note-trash-page,
  .shell-notes .note-edit-surface {
    margin: 0;
    padding: 0 16px 32px;
  }

  .shell-notes .note-trash-page .history-panel-head {
    display: grid;
    gap: 8px;
    align-content: end;
    min-height: 92px;
    padding: 18px 0 14px;
  }

  .shell-notes .note-trash-page .history-panel-head h2,
  .shell-notes .note-edit-head h2 {
    font-size: 26px;
  }

  .shell-notes .deleted-note-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16px 0;
  }

  .shell-notes .deleted-note-card .note-meta {
    grid-row: 1;
  }

  .shell-notes .deleted-note-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .shell-notes .deleted-note-actions :where(.button, button) {
    width: 100%;
    min-height: 44px;
  }

  .shell-notes .note-edit-head {
    min-height: 100px;
    padding: 18px 0 16px;
  }

  .shell-notes .note-edit-form {
    padding-top: 20px;
  }

  .shell-notes .note-edit-form .note-content-field textarea {
    min-height: 260px;
  }

  .shell-notes + .module-nav {
    gap: 0;
    min-height: 62px;
    padding: 4px 8px calc(3px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--note-rule);
    background: rgb(251 250 247 / 98%);
    box-shadow: none;
    backdrop-filter: none;
  }

  .shell-notes + .module-nav a,
  .shell-notes + .module-nav a.is-active {
    position: relative;
    gap: 2px;
    min-height: 52px;
    padding: 4px 2px 3px;
    border-radius: 0;
    background: transparent;
    color: var(--note-muted);
    font-size: 11px;
    font-weight: 600;
  }

  .shell-notes + .module-nav a.is-active {
    color: var(--note-blue);
  }

  .shell-notes + .module-nav a.is-active::after {
    position: absolute;
    right: 34%;
    bottom: 1px;
    left: 34%;
    height: 2px;
    border-radius: 0;
    background: currentColor;
    content: "";
  }
}

@media (max-width: 1040px) {
  .shell-notes > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary {
    border-color: #1455cc;
    border-radius: 2px;
    background: #1455cc;
    color: #fff;
  }

  .shell-notes > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary:hover,
  .shell-notes > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary:focus-visible {
    border-color: #0b43a8;
    background: #0b43a8;
  }

  .shell-notes > .topbar.is-module-landing .top-actions.is-mobile-menu.is-menu-ready .top-actions-more {
    border-color: #d2d3d0;
    border-radius: 2px;
    background: transparent;
    color: #6c7178;
  }

  .shell-notes + nav.module-nav {
    border-top-color: #d2d3d0;
    background: rgb(251 250 247 / 98%);
  }

  .shell-notes + nav.module-nav a,
  .shell-notes + nav.module-nav a.is-active {
    color: #6c7178;
  }

  .shell-notes + nav.module-nav a.is-active {
    color: #1455cc;
  }
}

/* Swiss Archive shared product topbar
   Goals, notes and check-ins use one stable brand/account/navigation contract.
   Module-specific actions may vary, but they sit before the shared account/nav group. */

:is(.shell-goals, .shell-notes, .shell-checkins) {
  --swiss-page-canvas: #f5f4f0;
  --swiss-page-surface: #fbfaf7;
  --swiss-topbar-surface: #fbfaf7;
  --swiss-topbar-ink: #15171a;
  --swiss-topbar-muted: #6c7178;
  --swiss-topbar-rule: #d2d3d0;
  --swiss-topbar-blue: #1455cc;
  --swiss-topbar-blue-hover: #0b43a8;
  --swiss-topbar-blue-soft: #e8eef9;
  --swiss-topbar-focus: #7aa4ff;
  background: var(--swiss-page-canvas);
}

html:has(.shell-goals),
html:has(.shell-notes),
html:has(.shell-checkins),
body:has(.shell-goals),
body:has(.shell-notes),
body:has(.shell-checkins) {
  background: #f5f4f0;
}

.shell-goals :is(.focus-layout, .goal-category-index, .goal-overview, .focus-rail) {
  background: var(--swiss-page-canvas);
}

@media (min-width: 1041px) {
  :is(.shell.shell-goals, .shell.shell-notes, .shell.shell-checkins) {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding-top: 0;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing {
    grid-template-columns: minmax(160px, 1fr) auto;
    gap: 28px;
    width: 100%;
    height: 68px;
    min-height: 68px;
    margin: 0;
    padding: 0 clamp(24px, 3vw, 40px);
    border-bottom: 1px solid var(--swiss-topbar-rule);
    background: var(--swiss-topbar-surface);
    box-sizing: border-box;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .topbar-title {
    gap: 4px;
    align-items: center;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .module-page-title {
    color: var(--swiss-topbar-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .module-page-meta {
    color: var(--swiss-topbar-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .topbar-side {
    flex-direction: row;
    gap: 14px;
    align-items: center;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .top-actions {
    order: 0;
    margin: 0;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .topbar-system {
    order: 1;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .account-menu {
    order: 2;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .desktop-module-nav {
    order: 3;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing :is(.desktop-module-nav, .topbar-system, .top-actions) {
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .account-menu > summary {
    min-height: 44px;
    padding: 11px 10px 12px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--swiss-topbar-muted);
    font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .account-menu > summary:hover,
  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .account-menu > summary:focus-visible,
  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .account-menu[open] > summary {
    color: var(--swiss-topbar-blue);
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .account-menu > summary:focus-visible {
    outline: 2px solid var(--swiss-topbar-focus);
    outline-offset: 1px;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .account-menu[open] > summary::after {
    right: 10px;
    bottom: 5px;
    left: 10px;
    height: 2px;
    background: var(--swiss-topbar-blue);
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .desktop-module-nav {
    gap: 2px;
    min-height: 44px;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .desktop-module-nav .module-nav-icon,
  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .desktop-module-nav a::before {
    display: none;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .desktop-module-nav a {
    position: relative;
    gap: 7px;
    min-width: 0;
    min-height: 44px;
    padding: 11px 9px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--swiss-topbar-muted);
    font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .desktop-module-nav a::after {
    position: absolute;
    right: 9px;
    bottom: 5px;
    left: 9px;
    height: 2px;
    border-radius: 0;
    background: transparent;
    content: "";
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .desktop-module-nav a:hover,
  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .desktop-module-nav a:focus-visible,
  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .desktop-module-nav a.is-active {
    border: 0;
    background: transparent;
    color: var(--swiss-topbar-blue);
    outline: 0;
    box-shadow: none;
    transform: none;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .desktop-module-nav a:focus-visible {
    outline: 2px solid var(--swiss-topbar-focus);
    outline-offset: 1px;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .desktop-module-nav a.is-active::after {
    background: var(--swiss-topbar-blue);
  }
}

@media (max-width: 1040px) {
  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing {
    position: sticky;
    top: 0;
    z-index: 78;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    height: 50px;
    min-height: 50px;
    margin: 0;
    padding: 3px 8px 3px 16px;
    border-bottom: 1px solid var(--swiss-topbar-rule);
    background: rgb(251 250 247 / 98%);
    box-sizing: border-box;
    backdrop-filter: none;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .topbar-title {
    gap: 6px;
    align-items: center;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .module-page-title {
    color: var(--swiss-topbar-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .module-page-meta {
    color: var(--swiss-topbar-muted);
    font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .top-actions.is-mobile-menu,
  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main {
    gap: 6px;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--swiss-topbar-blue);
    border-radius: 2px;
    background: var(--swiss-topbar-blue);
    color: #fff;
    font-size: 20px;
    box-shadow: none;
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary:hover,
  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary:focus-visible {
    border-color: var(--swiss-topbar-blue-hover);
    background: var(--swiss-topbar-blue-hover);
  }

  :is(.shell-goals, .shell-notes, .shell-checkins) > .topbar.is-module-landing .top-actions.is-mobile-menu.is-menu-ready .top-actions-more {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--swiss-topbar-rule);
    border-radius: 2px;
    background: transparent;
    color: var(--swiss-topbar-muted);
    font-size: 20px;
    box-shadow: none;
  }
}

/* English / Swiss Archive v2.8
   One product shell, with separate lookup, word archive and grammar workspaces. */

html:has(.shell-english),
body:has(.shell-english) {
  background: #f5f4f0;
}

.shell-english {
  --english-paper: #f5f4f0;
  --english-surface: #fbfaf7;
  --english-ink: #15171a;
  --english-ink-soft: #34383d;
  --english-muted: #6c7178;
  --english-faint: #979ba0;
  --english-rule: #d2d3d0;
  --english-rule-strong: #202226;
  --english-blue: #1455cc;
  --english-blue-hover: #0b43a8;
  --english-blue-soft: #e8eef9;
  --english-red: #d1192e;
  --english-red-soft: #fae9ec;
  --english-focus: #7aa4ff;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding-top: 0;
  background: var(--english-paper);
  color: var(--english-ink);
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
}

.shell-english :where(.module-page-title, .dictionary-page-head h2, .words-heading h2, .grammar-document-head h2, .practice-head h2, .practice-summary > h2, .word-edit-page > header h2, .deleted-words-title h2, .wordbook-title h2) {
  color: var(--english-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-weight: 500;
  letter-spacing: 0;
}

.shell-english .english-page-kicker {
  margin: 0;
  color: var(--english-blue);
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shell-english :where(input, select, textarea) {
  border-color: var(--english-rule);
  border-radius: 2px;
  background: var(--english-surface);
  color: var(--english-ink);
  box-shadow: none;
}

.shell-english :where(input, select, textarea):focus-visible {
  border-color: var(--english-blue);
  outline: 2px solid var(--english-focus);
  outline-offset: 1px;
  box-shadow: none;
}

.shell-english :where(.button, button) {
  border-radius: 2px;
  box-shadow: none;
}

.shell-english .button:not(.secondary, .danger, .ghost),
.shell-english button.button:not(.secondary, .danger, .ghost) {
  border-color: var(--english-blue);
  background: var(--english-blue);
  color: #fff;
}

.shell-english .button:not(.secondary, .danger, .ghost):hover,
.shell-english .button:not(.secondary, .danger, .ghost):focus-visible,
.shell-english button.button:not(.secondary, .danger, .ghost):hover,
.shell-english button.button:not(.secondary, .danger, .ghost):focus-visible {
  border-color: var(--english-blue-hover);
  background: var(--english-blue-hover);
  color: #fff;
}

.shell-english :where(.button.secondary, button.secondary) {
  border-color: var(--english-rule);
  background: transparent;
  color: var(--english-ink-soft);
}

.shell-english :where(.button.secondary, button.secondary):hover,
.shell-english :where(.button.secondary, button.secondary):focus-visible {
  border-color: var(--english-blue);
  background: var(--english-blue-soft);
  color: var(--english-blue);
}

.shell-english :where(.button.danger, button.danger) {
  border-color: transparent;
  background: transparent;
  color: var(--english-red);
}

.shell-english :where(.button.danger, button.danger):hover,
.shell-english :where(.button.danger, button.danger):focus-visible {
  border-color: var(--english-red);
  background: var(--english-red-soft);
  color: var(--english-red);
}

.shell-english .english-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 0 clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--english-rule);
  background: var(--english-paper);
}

.shell-english .english-tabs > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 54px;
  padding: 0 12px;
  color: var(--english-muted);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.shell-english .english-tabs > a::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  background: transparent;
  content: "";
}

.shell-english .english-tabs > a:hover,
.shell-english .english-tabs > a:focus-visible,
.shell-english .english-tabs > a.is-active {
  color: var(--english-blue);
}

.shell-english .english-tabs > a:focus-visible {
  outline: 2px solid var(--english-focus);
  outline-offset: -2px;
}

.shell-english .english-tabs > a.is-active::after {
  background: var(--english-blue);
}

.shell-english .english-layout {
  min-height: calc(100vh - 122px);
  background: var(--english-paper);
}

.shell-english :where(.dictionary-page, .words-main, .grammar-document, .practice-page, .word-edit-page, .deleted-words-page) {
  border: 0;
  border-radius: 0;
  background: var(--english-paper);
  box-shadow: none;
}

.shell-english .english-empty {
  border: 0;
  background: transparent;
  color: var(--english-muted);
}

.shell-english .english-empty i {
  color: var(--english-blue);
}

.shell-english :where(.english-directory, .wordbook-directory) {
  border-color: var(--english-rule);
  background: var(--english-paper);
}

.shell-english .english-directory section + section {
  border-top-color: var(--english-rule);
}

.shell-english .english-directory h3 {
  color: var(--english-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 18px;
  font-weight: 500;
}

.shell-english .english-directory a {
  border-left-color: transparent;
  color: var(--english-ink-soft);
}

.shell-english .english-directory a span {
  color: var(--english-muted);
}

.shell-english .english-directory a:hover,
.shell-english .english-directory a:focus-visible,
.shell-english .english-directory a.is-active {
  border-left-color: var(--english-blue);
  background: var(--english-blue-soft);
  color: var(--english-blue);
}

.shell-english .dictionary-page {
  width: 100%;
  margin: 0;
  padding: 34px clamp(32px, 6vw, 80px) 72px;
}

.shell-english .dictionary-page-head {
  display: grid;
  gap: 8px;
  min-height: 78px;
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--english-rule-strong);
}

.shell-english .dictionary-page-head h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
}

.shell-english .dictionary-lookup-form {
  width: 100%;
  gap: 12px;
}

.shell-english .dictionary-search-row {
  gap: 10px;
}

.shell-english .dictionary-search-row input {
  height: 50px;
  border-color: var(--english-rule);
  border-radius: 2px;
  background: var(--english-surface);
  color: var(--english-ink);
  font-family: Georgia, "Times New Roman", serif;
}

.shell-english .dictionary-search-field > label > i {
  color: var(--english-muted);
}

.shell-english .dictionary-search-row .word-lookup-button {
  min-height: 50px;
  padding-inline: 20px;
}

.shell-english .dictionary-recent-panel {
  border-color: var(--english-rule);
  border-radius: 2px;
  background: var(--english-surface);
  box-shadow: 0 12px 24px rgba(21, 23, 26, 0.12);
}

.shell-english .dictionary-recent-list button {
  border-radius: 0;
  color: var(--english-ink);
}

.shell-english .dictionary-recent-list button:hover,
.shell-english .dictionary-recent-list button:focus-visible {
  background: var(--english-blue-soft);
  color: var(--english-blue);
}

.shell-english .word-lookup-panel.dictionary-results-panel {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

.shell-english .dictionary-results-panel .word-lookup-group h5,
.shell-english .dictionary-results-panel .word-lookup-item {
  border-color: var(--english-rule);
}

.shell-english .word-lookup-actions.dictionary-lookup-actions {
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--english-rule);
  border-bottom: 1px solid var(--english-rule);
  border-radius: 0;
  background: transparent;
}

.shell-english .dictionary-save-status.is-success,
.shell-english .dictionary-save-status.is-duplicate,
.shell-english .dictionary-save-status.is-saved {
  color: var(--english-blue);
}

.shell-english .dictionary-save-status.is-error {
  color: var(--english-red);
}

.shell-english .words-layout {
  --wordbook-sidebar-width: clamp(228px, 18vw, 272px);
  grid-template-columns: minmax(0, var(--wordbook-sidebar-width)) minmax(0, 1fr);
}

.shell-english .wordbook-directory {
  padding: 26px 24px 34px;
}

.shell-english .wordbook-title {
  min-height: 46px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--english-rule-strong);
}

.shell-english .wordbook-title h2 {
  font-size: 20px;
}

.shell-english .wordbook-create-details > summary.wordbook-create-trigger {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--english-blue);
}

.shell-english .wordbook-create-trigger:hover,
.shell-english .wordbook-create-trigger:focus-visible,
.shell-english .wordbook-create-details[open] > .wordbook-create-trigger {
  border-color: var(--english-blue);
  background: var(--english-blue-soft);
  color: var(--english-blue);
}

.shell-english .wordbook-row {
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
}

.shell-english .wordbook-row:hover,
.shell-english .wordbook-row:focus-within,
.shell-english .wordbook-row.is-active {
  border-left-color: var(--english-blue);
  background: var(--english-blue-soft);
}

.shell-english .wordbook-row.is-active :where(a, strong),
.shell-english .wordbook-row.is-default .wordbook-default-mark {
  color: var(--english-blue);
}

.shell-english .wordbook-menu,
.shell-english .wordbook-create {
  border-color: var(--english-rule);
  border-radius: 2px;
  background: var(--english-surface);
  box-shadow: 0 12px 24px rgba(21, 23, 26, 0.12);
}

.shell-english .deleted-words-link {
  border-top-color: var(--english-rule);
  color: var(--english-muted);
}

.shell-english .deleted-words-link:hover,
.shell-english .deleted-words-link:focus-visible {
  color: var(--english-blue);
}

.shell-english .words-main {
  min-width: 0;
  margin: 0;
  padding: 0 clamp(32px, 4vw, 56px) 56px;
}

.shell-english .words-heading {
  min-height: 104px;
  margin: 0;
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--english-rule-strong);
}

.shell-english .words-heading-meta {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.shell-english .words-heading-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.shell-english .words-heading h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 32px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-english .words-heading .words-heading-count {
  flex: none;
  margin: 0;
  color: var(--english-muted);
  font-size: 13px;
  white-space: nowrap;
}

.shell-english .words-add-button {
  min-height: 46px;
  padding-inline: 18px;
}

.shell-english .word-search {
  margin: 18px 0 0;
}

.shell-english .word-search input {
  height: 44px;
  min-height: 44px;
  border-color: var(--english-rule);
  border-radius: 2px;
  background: var(--english-surface);
}

.shell-english .word-list-controls {
  min-height: 52px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--english-rule);
}

.shell-english .word-filters {
  gap: 2px;
}

.shell-english .word-filters a {
  min-width: 64px;
  min-height: 36px;
  padding: 7px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--english-muted);
}

.shell-english .word-filters a:hover,
.shell-english .word-filters a:focus-visible,
.shell-english .word-filters a.is-active {
  border-bottom-color: var(--english-blue);
  background: transparent;
  color: var(--english-blue);
}

.shell-english .word-display-switch {
  border-color: var(--english-rule);
  border-radius: 2px;
  background: transparent;
}

.shell-english .word-display-switch button {
  border-radius: 0;
  color: var(--english-muted);
}

.shell-english .word-display-switch button[aria-pressed="true"] {
  background: var(--english-blue-soft);
  color: var(--english-blue);
}

.shell-english .word-list {
  display: block;
  gap: 0;
  border: 0;
  background: transparent;
}

.shell-english .word-row {
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--english-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shell-english .word-row > summary {
  min-height: 58px;
  padding: 8px 0;
}

.shell-english .word-row > summary:hover,
.shell-english .word-row > summary:focus-visible,
.shell-english .word-row[open] > summary {
  background: var(--english-blue-soft);
}

.shell-english .word-term {
  color: var(--english-ink);
}

.shell-english .word-phonetic,
.shell-english .word-pos {
  color: var(--english-muted);
}

.shell-english .word-status-toggle {
  min-width: 34px;
  min-height: 34px;
  border-color: var(--english-rule);
  border-radius: 2px;
  background: transparent;
  color: var(--english-muted);
}

.shell-english .word-status-toggle:hover,
.shell-english .word-status-toggle:focus-visible,
.shell-english .word-status-toggle.is-mastered {
  border-color: var(--english-blue);
  background: var(--english-blue-soft);
  color: var(--english-blue);
}

.shell-english .word-detail {
  padding: 18px 0 24px;
  border-top: 1px solid var(--english-rule);
  background: var(--english-surface);
}

.shell-english .word-detail-group {
  border-color: var(--english-rule);
}

.shell-english .word-detail-group h4 {
  color: var(--english-blue);
}

.shell-english .word-book-chips :where(a, span) {
  border-radius: 0;
}

.shell-english .english-form {
  gap: 20px;
  padding: 24px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shell-english .english-form fieldset,
.shell-english .word-lookup-panel:not(.dictionary-results-panel) {
  border-color: var(--english-rule);
  border-radius: 2px;
  background: var(--english-surface);
}

.shell-english .english-form footer {
  padding-top: 18px;
  border-top: 1px solid var(--english-rule);
  background: transparent;
}

.shell-english .word-inline-edit-form {
  padding-inline: 20px;
}

.shell-english .word-inline-edit-heading {
  border-bottom-color: var(--english-rule);
}

.shell-english .add-word-dialog {
  border: 1px solid var(--english-rule);
  border-radius: 4px;
  background: var(--english-surface);
  box-shadow: 0 18px 42px rgba(21, 23, 26, 0.18);
}

.shell-english .add-word-dialog .english-form {
  padding: 24px;
}

.shell-english .add-word-dialog .english-form > header {
  border-bottom-color: var(--english-rule);
}

.shell-english .add-word-details {
  border-color: var(--english-rule);
  border-radius: 2px;
}

.shell-english .add-word-details > summary {
  background: var(--english-paper);
}

.shell-english .grammar-layout {
  grid-template-columns: clamp(240px, 18vw, 286px) minmax(0, 1fr);
}

.shell-english .grammar-document,
.shell-english .practice-page {
  width: 100%;
  margin: 0;
  padding: 30px clamp(40px, 5vw, 72px) 72px;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
}

.shell-english .grammar-document-head,
.shell-english .practice-head {
  margin: 0 0 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--english-rule-strong);
}

.shell-english .grammar-document-head h2,
.shell-english .practice-head h2 {
  margin: 4px 0 0;
  font-size: clamp(32px, 3vw, 40px);
  line-height: 1.2;
}

.shell-english .grammar-practice-button {
  min-height: 46px;
  padding-inline: 18px;
}

.shell-english .grammar-markdown {
  max-width: 980px;
  color: var(--english-ink-soft);
  font-size: 17px;
  line-height: 1.72;
}

.shell-english .grammar-markdown :where(h1, h2, h3, h4, h5, h6) {
  color: var(--english-ink);
}

.shell-english .grammar-markdown h3 {
  border-top-color: var(--english-rule);
}

.shell-english .grammar-markdown code {
  border-radius: 2px;
  background: var(--english-blue-soft);
  color: var(--english-blue);
}

.shell-english .grammar-table-wrap {
  border-color: var(--english-rule);
  border-radius: 2px;
}

.shell-english .grammar-table-wrap :where(th, td) {
  border-color: var(--english-rule);
}

.shell-english .grammar-table-wrap th {
  background: var(--english-surface);
}

.shell-english .practice-page > * {
  max-width: 980px;
}

.shell-english .practice-progress {
  border-radius: 0;
  background: var(--english-rule);
}

.shell-english .practice-progress span {
  border-radius: 0;
  background: var(--english-blue);
}

.shell-english .practice-type {
  color: var(--english-blue);
}

.shell-english .practice-options span {
  border-color: var(--english-rule);
  border-radius: 2px;
  background: var(--english-surface);
}

.shell-english .practice-options input:checked + span {
  border-color: var(--english-blue);
  background: var(--english-blue-soft);
}

.shell-english .practice-options input:checked + span::before {
  border-color: var(--english-surface);
  background: var(--english-blue);
  box-shadow: 0 0 0 1px var(--english-blue);
}

.shell-english .practice-options input:focus-visible + span {
  outline-color: var(--english-focus);
}

.shell-english .practice-feedback {
  border-left-color: var(--english-blue);
  background: var(--english-blue-soft);
}

.shell-english .practice-feedback h4 {
  color: var(--english-blue);
}

.shell-english .practice-feedback.is-incorrect {
  border-left-color: var(--english-red);
  background: var(--english-red-soft);
}

.shell-english .practice-feedback.is-incorrect h4 {
  color: var(--english-red);
}

.shell-english .practice-source {
  border-top-color: var(--english-rule);
  color: var(--english-muted);
}

.shell-english .practice-stats {
  border-color: var(--english-rule);
  background: var(--english-rule);
}

.shell-english .practice-stats div {
  background: var(--english-surface);
}

.shell-english .practice-stats strong {
  color: var(--english-blue);
}

.shell-english .word-edit-page,
.shell-english .deleted-words-page {
  width: 100%;
  margin: 0;
  padding: 30px clamp(32px, 6vw, 80px) 72px;
}

.shell-english .word-edit-page > header,
.shell-english .deleted-words-page > header {
  min-height: 88px;
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--english-rule-strong);
}

.shell-english .word-edit-page > header h2,
.shell-english .deleted-words-title h2 {
  margin: 4px 0 0;
  font-size: 32px;
}

.shell-english .deleted-words-title {
  display: grid;
  gap: 8px;
}

.shell-english .deleted-words-title > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.shell-english .deleted-words-title span {
  color: var(--english-muted);
}

.shell-english .deleted-word-list {
  border: 0;
}

.shell-english .deleted-word-list article {
  border-color: var(--english-rule);
  background: transparent;
}

@media (min-width: 1041px) {
  .shell-english > .topbar.is-module-landing {
    grid-template-columns: minmax(160px, 1fr) auto;
    gap: 28px;
    width: 100%;
    height: 68px;
    min-height: 68px;
    margin: 0;
    padding: 0 clamp(24px, 3vw, 40px);
    border-bottom: 1px solid var(--english-rule);
    background: var(--english-surface);
    box-sizing: border-box;
  }

  .shell-english > .topbar.is-module-landing .topbar-title {
    gap: 4px;
    align-items: center;
  }

  .shell-english > .topbar.is-module-landing .module-page-title {
    color: var(--english-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
  }

  .shell-english > .topbar.is-module-landing .module-page-meta {
    color: var(--english-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
  }

  .shell-english > .topbar.is-module-landing .topbar-side {
    flex-direction: row;
    gap: 14px;
    align-items: center;
  }

  .shell-english > .topbar.is-module-landing .top-actions {
    order: 0;
    margin: 0;
  }

  .shell-english > .topbar.is-module-landing .topbar-system {
    order: 1;
  }

  .shell-english > .topbar.is-module-landing .account-menu {
    order: 2;
  }

  .shell-english > .topbar.is-module-landing .desktop-module-nav {
    order: 3;
  }

  .shell-english > .topbar.is-module-landing :is(.desktop-module-nav, .topbar-system, .top-actions) {
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell-english > .topbar.is-module-landing .account-menu > summary {
    min-height: 44px;
    padding: 11px 10px 12px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--english-muted);
    font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none;
  }

  .shell-english > .topbar.is-module-landing .account-menu > summary:hover,
  .shell-english > .topbar.is-module-landing .account-menu > summary:focus-visible,
  .shell-english > .topbar.is-module-landing .account-menu[open] > summary {
    color: var(--english-blue);
  }

  .shell-english > .topbar.is-module-landing .account-menu > summary:focus-visible {
    outline: 2px solid var(--english-focus);
    outline-offset: 1px;
  }

  .shell-english > .topbar.is-module-landing .desktop-module-nav {
    gap: 2px;
    min-height: 44px;
  }

  .shell-english > .topbar.is-module-landing .desktop-module-nav .module-nav-icon,
  .shell-english > .topbar.is-module-landing .desktop-module-nav a::before {
    display: none;
  }

  .shell-english > .topbar.is-module-landing .desktop-module-nav a {
    position: relative;
    gap: 7px;
    min-width: 0;
    min-height: 44px;
    padding: 11px 9px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--english-muted);
    font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none;
  }

  .shell-english > .topbar.is-module-landing .desktop-module-nav a::after {
    position: absolute;
    right: 9px;
    bottom: 5px;
    left: 9px;
    height: 2px;
    border-radius: 0;
    background: transparent;
    content: "";
  }

  .shell-english > .topbar.is-module-landing .desktop-module-nav a:hover,
  .shell-english > .topbar.is-module-landing .desktop-module-nav a:focus-visible,
  .shell-english > .topbar.is-module-landing .desktop-module-nav a.is-active {
    border: 0;
    background: transparent;
    color: var(--english-blue);
    outline: 0;
    box-shadow: none;
    transform: none;
  }

  .shell-english > .topbar.is-module-landing .desktop-module-nav a:focus-visible {
    outline: 2px solid var(--english-focus);
    outline-offset: 1px;
  }

  .shell-english > .topbar.is-module-landing .desktop-module-nav a.is-active::after {
    background: var(--english-blue);
  }
}

@media (max-width: 1040px) {
  .shell-english {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  .shell-english > .topbar.is-module-landing {
    position: sticky;
    top: 0;
    z-index: 78;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    height: 50px;
    min-height: 50px;
    margin: 0;
    padding: 3px 8px 3px 16px;
    border-bottom: 1px solid var(--english-rule);
    background: rgb(251 250 247 / 98%);
    box-sizing: border-box;
    backdrop-filter: none;
  }

  .shell-english > .topbar.is-module-landing .topbar-title {
    gap: 6px;
    align-items: center;
  }

  .shell-english > .topbar.is-module-landing .module-page-title {
    color: var(--english-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
  }

  .shell-english > .topbar.is-module-landing .module-page-meta {
    color: var(--english-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
  }

  .shell-english > .topbar.is-module-landing .top-actions.is-mobile-menu,
  .shell-english > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main {
    gap: 6px;
  }

  .shell-english > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--english-blue);
    border-radius: 2px;
    background: var(--english-blue);
    color: #fff;
    font-size: 20px;
  }

  .shell-english > .topbar.is-module-landing .top-actions.is-mobile-menu.is-menu-ready .top-actions-more {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--english-rule);
    border-radius: 2px;
    background: transparent;
    color: var(--english-muted);
    font-size: 20px;
  }

  .shell-english .english-tabs {
    position: sticky;
    top: 50px;
    z-index: 70;
    gap: 0;
    min-height: 48px;
    padding: 0 16px;
    background: rgb(245 244 240 / 98%);
  }

  .shell-english .english-tabs > a {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 0 8px;
    font-size: 14px;
  }

  .shell-english .english-tabs > a::after {
    right: 24%;
    left: 24%;
  }

  .shell-english + .module-nav {
    gap: 0;
    min-height: 62px;
    padding: 4px 8px calc(3px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--english-rule);
    background: rgb(251 250 247 / 98%);
    box-shadow: none;
    backdrop-filter: none;
  }

  .shell-english + .module-nav a,
  .shell-english + .module-nav a.is-active {
    position: relative;
    gap: 2px;
    min-height: 52px;
    padding: 4px 2px 3px;
    border-radius: 0;
    background: transparent;
    color: var(--english-muted);
    font-size: 11px;
    font-weight: 600;
  }

  .shell-english + .module-nav a.is-active {
    color: var(--english-blue);
  }

  .shell-english + .module-nav a.is-active::after {
    position: absolute;
    right: 34%;
    bottom: 1px;
    left: 34%;
    height: 2px;
    border-radius: 0;
    background: currentColor;
    content: "";
  }

  .shell-english .english-layout {
    display: block;
    min-height: calc(100vh - 98px);
  }

  .shell-english .dictionary-page {
    padding: 24px 16px 96px;
  }

  .shell-english .dictionary-page-head {
    min-height: 68px;
    margin-bottom: 16px;
    padding-bottom: 14px;
  }

  .shell-english .dictionary-page-head h2 {
    font-size: 26px;
  }

  .shell-english .dictionary-search-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .shell-english .dictionary-search-row input,
  .shell-english .dictionary-search-row .word-lookup-button {
    height: 44px;
    min-height: 44px;
  }

  .shell-english .dictionary-search-row .word-lookup-button {
    padding-inline: 14px;
  }

  .shell-english .dictionary-results-panel .word-lookup-item {
    padding-block: 8px;
  }

  .shell-english .word-lookup-actions.dictionary-lookup-actions {
    padding-block: 10px;
  }

  .shell-english .dictionary-save-controls {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .shell-english :where(.english-directory, .wordbook-directory) {
    background: var(--english-surface);
  }

  .shell-english .words-main {
    margin: 0;
    padding: 0 16px 96px;
  }

  .shell-english .words-heading {
    min-height: 88px;
    padding: 18px 0 14px;
  }

  .shell-english .words-heading-meta {
    gap: 6px;
  }

  .shell-english .words-heading h2 {
    font-size: 26px;
  }

  .shell-english .words-add-button {
    min-height: 44px;
    padding-inline: 12px;
  }

  .shell-english .word-search {
    margin-top: 14px;
  }

  .shell-english .word-list-controls {
    min-height: 48px;
    padding-block: 6px;
  }

  .shell-english .word-filters a {
    min-width: 54px;
    min-height: 44px;
    padding-inline: 7px;
  }

  .shell-english .word-display-switch button {
    min-width: 44px;
    min-height: 44px;
  }

  .shell-english .word-row {
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--english-rule);
    background: transparent;
  }

  .shell-english .word-row > summary {
    min-height: 52px;
    padding: 6px 0;
  }

  .shell-english .word-status-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
  }

  .shell-english .word-detail {
    padding: 14px 0 20px;
  }

  .shell-english .word-detail-group-wordbooks .word-detail-actions a,
  .shell-english .word-detail-group-wordbooks .word-detail-actions button {
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
  }

  .shell-english .word-inline-edit-form {
    padding-inline: 0;
  }

  .shell-english .english-form {
    padding: 20px 0;
  }

  .shell-english .english-form footer {
    position: static;
    padding-top: 16px;
    background: transparent;
  }

  .shell-english .grammar-document,
  .shell-english .practice-page {
    width: 100%;
    margin: 0;
    padding: 22px 16px 96px;
  }

  .shell-english .grammar-document-head,
  .shell-english .practice-head {
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
  }

  .shell-english .grammar-document-head h2,
  .shell-english .practice-head h2 {
    font-size: 28px;
  }

  .shell-english .grammar-practice-button,
  .shell-english .practice-head .button {
    min-height: 44px;
    padding-inline: 10px;
  }

  .shell-english .grammar-markdown {
    font-size: 16px;
    line-height: 1.72;
  }

  .shell-english .practice-progress-label {
    margin-top: 24px;
  }

  .shell-english .practice-question {
    margin-top: 28px;
  }

  .shell-english .practice-question h3 {
    font-size: 24px;
  }

  .shell-english .practice-sentence {
    font-size: 25px;
  }

  .shell-english .practice-options {
    gap: 8px;
  }

  .shell-english .practice-options span {
    min-height: 56px;
    padding: 11px 14px 11px 50px;
  }

  .shell-english .practice-actions {
    gap: 8px;
    margin-top: 22px;
  }

  .shell-english .practice-stats {
    margin-block: 30px;
  }

  .shell-english .practice-stats div {
    padding: 20px 8px;
  }

  .shell-english .practice-stats strong {
    font-size: 32px;
  }

  .shell-english .word-edit-page,
  .shell-english .deleted-words-page {
    padding: 22px 16px 96px;
  }

  .shell-english .word-edit-page > header,
  .shell-english .deleted-words-page > header {
    min-height: 78px;
    padding-bottom: 16px;
  }

  .shell-english .word-edit-page > header h2,
  .shell-english .deleted-words-title h2 {
    font-size: 28px;
  }

  .shell-english .deleted-word-list article {
    padding-inline: 0;
  }

  .shell-english .english-directory-show:not([hidden]) {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--english-rule);
    border-radius: 2px;
    background: var(--english-surface);
    color: var(--english-blue);
    box-shadow: 0 10px 24px rgba(21, 23, 26, 0.12);
  }

  .shell-english .english-directory-frame {
    z-index: 100;
  }

  .shell-english .english-directory-sheet {
    border-radius: 4px 4px 0 0;
    background: var(--english-surface);
  }

  .shell-english .english-directory-sheet > header {
    background: var(--english-surface);
  }

  .shell-english .english-directory-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .shell-english .add-word-dialog {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 4px 4px 0 0;
  }

  .shell-english .add-word-dialog .english-form {
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .shell-english .add-word-dialog .english-form > header .button {
    min-width: 44px;
    min-height: 44px;
  }

  .shell-english .english-form .button {
    min-height: 44px;
  }

  .shell-english button,
  .shell-english .button {
    min-height: 44px;
  }

  .shell-english .add-word-dialog .english-form footer {
    position: sticky;
    bottom: 0;
    background: var(--english-surface);
  }
}

/* Notebooks / Swiss Archive v2.9
   A continuous knowledge workspace: tree index, reading canvas and editor. */

html:has(.shell-notebooks),
body:has(.shell-notebooks) {
  background: #f5f4f0;
}

.shell-notebooks {
  --notebook-paper: #f5f4f0;
  --notebook-surface: #fbfaf7;
  --notebook-ink: #15171a;
  --notebook-ink-soft: #34383d;
  --notebook-muted: #6c7178;
  --notebook-faint: #979ba0;
  --notebook-rule: #d2d3d0;
  --notebook-rule-strong: #202226;
  --notebook-blue: #1455cc;
  --notebook-blue-hover: #0b43a8;
  --notebook-blue-soft: #e8eef9;
  --notebook-red: #d1192e;
  --notebook-red-soft: #fae9ec;
  --notebook-focus: #7aa4ff;
  --accent: var(--notebook-blue);
  --accent-dark: var(--notebook-blue-hover);
  --accent-soft: var(--notebook-blue-soft);
  --bg: var(--notebook-paper);
  --panel: var(--notebook-surface);
  --panel-soft: var(--notebook-paper);
  --text: var(--notebook-ink);
  --muted: var(--notebook-muted);
  --line: var(--notebook-rule);
  --line-soft: var(--notebook-rule);
  --danger: var(--notebook-red);
  --success: var(--notebook-blue);
  display: flex;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--notebook-paper);
  color: var(--notebook-ink);
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
}

.shell-notebooks :where(.module-page-title, .notebook-home-head h2, .notebook-head-title h2, .notebook-document-head h1, .history-panel-head h2, .markdown-guide-intro h2) {
  color: var(--notebook-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-weight: 500;
  letter-spacing: 0;
}

.shell-notebooks .notebook-page-kicker {
  margin: 0;
  color: var(--notebook-blue);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shell-notebooks :where(input, select, textarea) {
  border-color: var(--notebook-rule);
  border-radius: 2px;
  background: var(--notebook-surface);
  color: var(--notebook-ink);
  box-shadow: none;
}

.shell-notebooks :where(input, select, textarea):focus-visible {
  border-color: var(--notebook-blue);
  outline: 2px solid var(--notebook-focus);
  outline-offset: 1px;
  box-shadow: none;
}

.shell-notebooks :where(.button, button) {
  border-radius: 2px;
  box-shadow: none;
}

.shell-notebooks :where(.button.secondary, button.secondary) {
  border-color: var(--notebook-rule);
  background: transparent;
  color: var(--notebook-ink-soft);
}

.shell-notebooks :where(.button.secondary, button.secondary):hover,
.shell-notebooks :where(.button.secondary, button.secondary):focus-visible {
  border-color: var(--notebook-blue);
  background: var(--notebook-blue-soft);
  color: var(--notebook-blue);
}

.shell-notebooks :where(.button.danger, button.danger) {
  border-color: transparent;
  background: transparent;
  color: var(--notebook-red);
}

.shell-notebooks :where(.button.danger, button.danger):hover,
.shell-notebooks :where(.button.danger, button.danger):focus-visible {
  border-color: var(--notebook-red);
  background: var(--notebook-red-soft);
  color: var(--notebook-red);
}

.shell-notebooks :where(
  .top-action-primary,
  .notebook-home-actions .button:not(.secondary),
  .notebook-workspace-actions .button:not(.secondary, .danger),
  .notebook-filter button[type="submit"]
) {
  border-color: var(--notebook-blue);
  background: var(--notebook-blue);
  color: #fff;
}

.shell-notebooks :where(
  .top-action-primary,
  .notebook-home-actions .button:not(.secondary),
  .notebook-workspace-actions .button:not(.secondary, .danger),
  .notebook-filter button[type="submit"]
):hover,
.shell-notebooks :where(
  .top-action-primary,
  .notebook-home-actions .button:not(.secondary),
  .notebook-workspace-actions .button:not(.secondary, .danger),
  .notebook-filter button[type="submit"]
):focus-visible {
  border-color: var(--notebook-blue-hover);
  background: var(--notebook-blue-hover);
  color: #fff;
}

.shell-notebooks .notebook-layout {
  --notebook-sidebar-width: clamp(228px, 18vw, 280px);
  flex: 1 1 auto;
  gap: 0;
  width: 100%;
  min-height: calc(100vh - 68px);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--notebook-paper);
  box-shadow: none;
}

.shell-notebooks .notebook-sidebar-frame,
.shell-notebooks .notebook-sidebar,
.shell-notebooks .notebook-tree-shell,
.shell-notebooks .notebook-main,
.shell-notebooks .notebook-home-panel,
.shell-notebooks .notebook-document,
.shell-notebooks .notebook-editor {
  background: var(--notebook-paper);
}

.shell-notebooks .notebook-tree-shell {
  padding: 10px 0 0;
  border-right: 1px solid var(--notebook-rule);
}

.shell-notebooks .notebook-tree-library {
  min-height: 46px;
  padding: 0 14px;
}

.shell-notebooks .notebook-tree-library-mark {
  width: 4px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: var(--notebook-blue);
}

.shell-notebooks .notebook-tree-library strong {
  color: var(--notebook-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 18px;
  font-weight: 500;
}

.shell-notebooks .notebook-tree-search {
  grid-template-columns: minmax(0, 1fr) 40px 40px;
  gap: 4px;
  padding: 6px 10px 10px;
  border-bottom: 1px solid var(--notebook-rule);
}

.shell-notebooks .notebook-tree-search input,
.shell-notebooks .notebook-tree-search button,
.shell-notebooks .notebook-tree-search a {
  min-height: 40px;
  border: 1px solid var(--notebook-rule);
  border-radius: 2px;
  background: var(--notebook-surface);
  color: var(--notebook-ink-soft);
}

.shell-notebooks .notebook-tree-search button:hover,
.shell-notebooks .notebook-tree-search button:focus-visible,
.shell-notebooks .notebook-tree-search a:hover,
.shell-notebooks .notebook-tree-search a:focus-visible {
  border-color: var(--notebook-blue);
  background: var(--notebook-blue-soft);
  color: var(--notebook-blue);
}

.shell-notebooks .notebook-tree-homebar {
  min-height: 46px;
  border-bottom: 1px solid var(--notebook-rule);
}

.shell-notebooks .notebook-tree-home,
.shell-notebooks .notebook-tree-row {
  min-height: 44px;
  border-radius: 0;
}

.shell-notebooks .notebook-tree-row {
  border-left: 2px solid transparent;
}

.shell-notebooks .notebook-tree-row:hover,
.shell-notebooks .notebook-tree-row:focus-within,
.shell-notebooks .notebook-tree-row.is-current {
  border-left-color: var(--notebook-blue);
  background: var(--notebook-blue-soft);
}

.shell-notebooks :where(.notebook-tree-home, .notebook-tree-link, .notebook-tree-note-link) {
  color: var(--notebook-ink-soft);
}

.shell-notebooks :where(.notebook-tree-home, .notebook-tree-link, .notebook-tree-note-link):hover,
.shell-notebooks :where(.notebook-tree-home, .notebook-tree-link, .notebook-tree-note-link):focus-visible,
.shell-notebooks :where(.notebook-tree-link, .notebook-tree-note-link).is-active {
  color: var(--notebook-blue);
}

.shell-notebooks :where(.notebook-tree-toggle, .notebook-tree-action, .notebook-tree-title-action) {
  border-radius: 2px;
  background: transparent;
  color: var(--notebook-muted);
}

.shell-notebooks :where(.notebook-tree-toggle, .notebook-tree-action, .notebook-tree-title-action):hover,
.shell-notebooks :where(.notebook-tree-toggle, .notebook-tree-action, .notebook-tree-title-action):focus-visible {
  background: var(--notebook-blue-soft);
  color: var(--notebook-blue);
}

.shell-notebooks .notebook-tree-menu-popover {
  border-color: var(--notebook-rule);
  border-radius: 2px;
  background: var(--notebook-surface);
  box-shadow: 0 12px 28px rgba(21, 23, 26, 0.16);
}

.shell-notebooks .notebook-sidebar-resizer::after {
  background: var(--notebook-rule);
}

.shell-notebooks .notebook-sidebar-resizer:hover::after,
.shell-notebooks .notebook-sidebar-resizer:focus-visible::after,
.notebook-sidebar-is-resizing .shell-notebooks .notebook-sidebar-resizer::after {
  background: var(--notebook-blue);
}

.shell-notebooks .notebook-sidebar-hide,
.shell-notebooks .notebook-sidebar-show {
  border-color: var(--notebook-rule);
  border-radius: 2px;
  background: var(--notebook-surface);
  color: var(--notebook-muted);
  box-shadow: none;
}

.shell-notebooks .notebook-sidebar-hide:hover,
.shell-notebooks .notebook-sidebar-hide:focus-visible,
.shell-notebooks .notebook-sidebar-show:hover,
.shell-notebooks .notebook-sidebar-show:focus-visible {
  border-color: var(--notebook-blue);
  background: var(--notebook-blue-soft);
  color: var(--notebook-blue);
}

.shell-notebooks .notebook-main {
  min-height: 0;
  overflow: auto;
}

.shell-notebooks .notebook-home-head {
  display: flex;
  gap: 28px;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 118px;
  padding: 18px clamp(32px, 4vw, 56px) 16px;
  border-bottom: 1px solid var(--notebook-rule-strong);
  background: transparent;
}

.shell-notebooks .notebook-home-head > div:first-child {
  gap: 7px;
}

.shell-notebooks .notebook-home-head h2 {
  font-size: clamp(32px, 3vw, 40px);
  line-height: 1.1;
}

.shell-notebooks .notebook-home-head p {
  margin: 0;
  color: var(--notebook-muted);
  font-size: 14px;
  font-weight: 500;
}

.shell-notebooks .notebook-home-actions {
  flex: 0 0 auto;
}

.shell-notebooks .notebook-home-actions .button {
  min-height: 42px;
  border-radius: 2px;
}

.shell-notebooks .notebook-home-grid {
  grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 320px);
  gap: 0;
  padding: 0 clamp(32px, 4vw, 56px) 56px;
}

.shell-notebooks .notebook-home-recent {
  gap: 0;
  padding: 24px 32px 0 0;
}

.shell-notebooks .notebook-section-heading {
  min-height: 44px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--notebook-rule);
}

.shell-notebooks .notebook-section-heading h3,
.shell-notebooks .notebook-home-overview h3 {
  color: var(--notebook-ink);
  font-size: 14px;
  font-weight: 700;
}

.shell-notebooks .notebook-home-list {
  display: block;
}

.shell-notebooks .notebook-home-note {
  gap: 5px;
  min-height: 68px;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--notebook-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shell-notebooks .notebook-home-note:hover,
.shell-notebooks .notebook-home-note:focus-visible {
  padding-inline: 10px;
  background: var(--notebook-blue-soft);
  color: var(--notebook-blue);
  outline: none;
}

.shell-notebooks .notebook-home-note span {
  color: var(--notebook-ink);
  font-size: 16px;
  font-weight: 600;
}

.shell-notebooks .notebook-home-note small {
  color: var(--notebook-muted);
  font-weight: 500;
}

.shell-notebooks .notebook-home-overview {
  gap: 14px;
  padding: 28px 0 0 28px;
  border: 0;
  border-left: 1px solid var(--notebook-rule);
  border-radius: 0;
  background: transparent;
}

.shell-notebooks .notebook-home-overview dl {
  display: grid;
  gap: 0;
}

.shell-notebooks .notebook-home-overview dl div {
  min-height: 54px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--notebook-rule);
  border-radius: 0;
  background: transparent;
}

.shell-notebooks .notebook-home-overview p {
  color: var(--notebook-muted);
  font-size: 13px;
  line-height: 1.7;
}

.shell-notebooks .notebook-home-links a {
  color: var(--notebook-blue);
  font-weight: 650;
}

.shell-notebooks .notebook-head-panel {
  gap: 6px;
  margin: 0;
  padding: 18px clamp(32px, 4vw, 56px) 16px;
  border: 0;
  border-bottom: 1px solid var(--notebook-rule-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shell-notebooks .notebook-breadcrumbs {
  color: var(--notebook-muted);
  font-size: 12px;
  font-weight: 600;
}

.shell-notebooks .notebook-breadcrumbs a:hover,
.shell-notebooks .notebook-breadcrumbs a:focus-visible {
  color: var(--notebook-blue);
}

.shell-notebooks .notebook-head-title {
  align-items: baseline;
}

.shell-notebooks .notebook-head-title h2 {
  font-size: clamp(30px, 2.7vw, 38px);
  line-height: 1.15;
}

.shell-notebooks .notebook-head-title span {
  color: var(--notebook-muted);
  font-weight: 600;
}

.shell-notebooks .notebook-filter-panel {
  margin: 0;
  padding: 12px clamp(32px, 4vw, 56px);
  border: 0;
  border-bottom: 1px solid var(--notebook-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shell-notebooks .notebook-filter {
  grid-template-columns: minmax(260px, 1fr) minmax(170px, 240px) auto;
  gap: 8px;
  align-items: center;
}

.shell-notebooks .notebook-filter :where(input, select, .button, button) {
  height: 42px;
  min-height: 42px;
  padding: 8px 11px;
  border-radius: 2px;
  font-size: 14px;
}

.shell-notebooks .notebook-filter .form-actions {
  flex-wrap: nowrap;
}

.shell-notebooks .notebook-content-list {
  display: block;
  margin: 0;
  padding: 0 clamp(32px, 4vw, 56px) 56px;
}

.shell-notebooks .notebook-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  align-items: center;
  min-height: 78px;
  border: 0;
  border-bottom: 1px solid var(--notebook-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shell-notebooks .notebook-row:hover,
.shell-notebooks .notebook-row:focus-within {
  border-color: var(--notebook-rule);
  background: var(--notebook-blue-soft);
  box-shadow: none;
}

.shell-notebooks .notebook-row-main {
  gap: 5px;
  padding: 13px 12px 13px 0;
}

.shell-notebooks .notebook-row-main h2 {
  color: var(--notebook-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 19px;
  font-weight: 500;
}

.shell-notebooks .notebook-meta {
  gap: 7px 12px;
  color: var(--notebook-muted);
  font-size: 12px;
}

.shell-notebooks .notebook-kind,
.shell-notebooks .notebook-kind.note-kind {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--notebook-blue);
  font-size: 12px;
  font-weight: 700;
}

.shell-notebooks .notebook-excerpt {
  color: var(--notebook-muted);
  font-size: 13px;
  line-height: 1.55;
}

.shell-notebooks .notebook-row-actions {
  grid-template-columns: minmax(72px, 86px);
  min-width: 86px;
  padding: 13px 0 13px 12px;
}

.shell-notebooks .notebook-row-actions :where(.button, button) {
  min-height: 40px;
  border-radius: 2px;
}

.shell-notebooks .notebook-empty {
  margin: 0;
  padding: 42px clamp(32px, 4vw, 56px);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--notebook-muted);
  box-shadow: none;
}

.shell-notebooks .notebook-workspace-toolbar {
  min-height: 54px;
  padding: 6px clamp(20px, 3vw, 36px);
  border-bottom: 1px solid var(--notebook-rule);
  background: rgb(251 250 247 / 98%);
  backdrop-filter: none;
}

.shell-notebooks .notebook-workspace-heading > strong {
  color: var(--notebook-ink);
  font-size: 14px;
  font-weight: 700;
}

.shell-notebooks .notebook-workspace-heading > span,
.shell-notebooks .notebook-editor-save-status {
  color: var(--notebook-muted);
  font-weight: 500;
}

.shell-notebooks .notebook-editor-save-status[data-state="saving"],
.shell-notebooks .notebook-editor-save-status[data-state="saved"],
.shell-notebooks .notebook-editor-save-status[data-state="dirty"],
.shell-notebooks .notebook-editor-save-status[data-state="pending"] {
  color: var(--notebook-blue);
}

.shell-notebooks .notebook-editor-save-status[data-state="error"] {
  color: var(--notebook-red);
}

.shell-notebooks .notebook-workspace-actions {
  gap: 6px;
}

.shell-notebooks .notebook-workspace-actions :where(.button, button) {
  min-height: 40px;
  border-radius: 2px;
}

.shell-notebooks .notebook-document-layout {
  grid-template-columns: minmax(0, 1fr) clamp(236px, 18vw, 300px);
  min-height: calc(100vh - 122px);
}

.shell-notebooks .notebook-document-canvas {
  width: min(100%, 980px);
  padding: 34px clamp(32px, 4vw, 56px) 96px;
}

.shell-notebooks .notebook-document-head {
  gap: 10px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom-color: var(--notebook-rule-strong);
}

.shell-notebooks .notebook-document-head h1 {
  color: var(--notebook-ink);
  font-size: clamp(34px, 3.2vw, 42px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
}

.shell-notebooks .notebook-document-canvas .markdown-body {
  color: var(--notebook-ink-soft);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 16.5px;
  line-height: 1.9;
}

.shell-notebooks .markdown-body a:not(.notebook-markdown-image) {
  color: var(--notebook-blue);
}

.shell-notebooks .notebook-document-rail {
  display: grid;
  gap: 28px;
  padding: 34px 24px;
  border-left: 1px solid var(--notebook-rule);
  background: transparent;
}

.shell-notebooks .notebook-document-rail section {
  gap: 12px;
}

.shell-notebooks .notebook-document-rail h2 {
  color: var(--notebook-ink);
  font-size: 13px;
  font-weight: 700;
}

.shell-notebooks .notebook-outline a {
  min-height: 36px;
  padding: 8px 6px;
  border-left: 2px solid transparent;
  border-radius: 0;
  color: var(--notebook-muted);
  font-weight: 600;
}

.shell-notebooks .notebook-outline a:hover,
.shell-notebooks .notebook-outline a:focus-visible {
  border-left-color: var(--notebook-blue);
  background: var(--notebook-blue-soft);
  color: var(--notebook-blue);
}

.shell-notebooks .notebook-document-meta {
  gap: 0;
}

.shell-notebooks .notebook-document-meta div {
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--notebook-rule);
}

.shell-notebooks .notebook-document-meta dt {
  color: var(--notebook-muted);
  font-weight: 600;
}

.shell-notebooks .notebook-document-meta dd {
  color: var(--notebook-ink-soft);
  font-weight: 600;
}

.shell-notebooks .notebook-hierarchy-toggle,
.shell-notebooks .notebook-hierarchy-focus {
  border-radius: 2px;
  color: var(--notebook-muted);
}

.shell-notebooks .notebook-hierarchy-heading:hover .notebook-hierarchy-focus,
.shell-notebooks .notebook-hierarchy-focus:focus-visible,
.shell-notebooks .notebook-hierarchy-toggle:hover,
.shell-notebooks .notebook-hierarchy-toggle:focus-visible,
.shell-notebooks .notebook-hierarchy-focus[aria-pressed="true"] {
  background: var(--notebook-blue-soft);
  color: var(--notebook-blue);
}

.shell-notebooks .notebook-editor {
  min-height: calc(100vh - 68px);
  background: var(--notebook-paper);
}

.shell-notebooks .notebook-editor-canvas {
  gap: 12px;
  width: min(100%, 1120px);
  padding: 30px clamp(32px, 5vw, 72px) 84px;
}

.shell-notebooks .notebook-editor-title input {
  min-height: 58px;
  border-bottom-color: var(--notebook-rule-strong);
  color: var(--notebook-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: clamp(32px, 3.3vw, 44px);
  font-weight: 500;
  letter-spacing: 0;
}

.shell-notebooks .notebook-editor-title input:focus {
  border-color: var(--notebook-blue);
}

.shell-notebooks .notebook-editor-meta {
  grid-template-columns: minmax(240px, 0.8fr) minmax(360px, 1.2fr);
  gap: 20px;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--notebook-rule);
}

.shell-notebooks .notebook-editor-meta-row > label {
  color: var(--notebook-muted);
  font-weight: 600;
}

.shell-notebooks .notebook-editor-meta-row > input,
.shell-notebooks .notebook-editor-meta-row > select {
  height: 40px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 2px;
}

.shell-notebooks .notebook-editor-tags-row .tag-choice {
  border-radius: 2px;
  color: var(--notebook-blue);
}

.shell-notebooks .notebook-editor-body {
  gap: 8px;
}

.shell-notebooks .notebook-editor-body-head {
  min-height: 40px;
  color: var(--notebook-muted);
  font-weight: 600;
}

.shell-notebooks .notebook-editor-body-head a {
  color: var(--notebook-blue);
}

.shell-notebooks .notebook-editor-body-preview,
.shell-notebooks .notebook-editor-image-button {
  min-height: 36px;
  border-radius: 2px;
  font-weight: 650;
}

.shell-notebooks .notebook-markdown-toolbar {
  gap: 4px;
  padding: 6px 0;
  border: 0;
  border-top: 1px solid var(--notebook-rule);
  border-bottom: 1px solid var(--notebook-rule);
  border-radius: 0;
  background: transparent;
}

.shell-notebooks .notebook-markdown-tool-group + .notebook-markdown-tool-group {
  border-left-color: var(--notebook-rule);
}

.shell-notebooks .notebook-markdown-toolbar button {
  min-width: 34px;
  min-height: 34px;
  padding: 5px 8px;
  border-color: transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--notebook-ink-soft);
}

.shell-notebooks .notebook-markdown-toolbar button:hover,
.shell-notebooks .notebook-markdown-toolbar button:focus-visible {
  border-color: var(--notebook-blue);
  background: var(--notebook-blue-soft);
  color: var(--notebook-blue);
}

.shell-notebooks .notebook-editor-body textarea {
  min-height: 56vh;
  border-color: var(--notebook-rule);
  border-radius: 2px;
  background: var(--notebook-surface);
  color: var(--notebook-ink-soft);
  line-height: 1.85;
}

.shell-notebooks .notebook-editor-body textarea:focus,
.shell-notebooks .notebook-editor-body textarea:focus-visible {
  border-color: var(--notebook-blue);
  outline: 2px solid var(--notebook-focus);
  outline-offset: 1px;
}

.shell-notebooks .notebook-folder-editor-canvas {
  width: min(100%, 760px);
  padding-top: 48px;
}

.shell-notebooks .notebook-folder-editor-canvas > label {
  gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--notebook-rule);
}

.shell-notebooks .notebook-folder-editor-canvas > label > span {
  color: var(--notebook-ink);
  font-weight: 650;
}

.shell-notebooks .notebook-folder-help {
  padding: 14px 0;
  border-radius: 0;
  background: transparent;
  color: var(--notebook-muted);
}

.shell-notebooks .notebook-preview-dialog {
  border-color: var(--notebook-rule);
  border-radius: 4px;
  background: var(--notebook-surface);
  box-shadow: 0 20px 48px rgba(21, 23, 26, 0.2);
}

.shell-notebooks .notebook-preview-dialog.notebook-preview-drawer {
  border-radius: 4px 0 0 4px;
}

.shell-notebooks .notebook-preview-dialog::backdrop {
  background: rgba(21, 23, 26, 0.42);
  backdrop-filter: none;
}

.shell-notebooks .notebook-preview-toolbar {
  min-height: 58px;
  padding: 8px 14px;
  border-bottom-color: var(--notebook-rule);
  background: var(--notebook-surface);
}

.shell-notebooks .notebook-preview-scroll {
  background: var(--notebook-surface);
}

.shell-notebooks .notebook-image-viewer {
  border-radius: 4px;
}

.shell-notebooks .notebook-image-viewer img {
  border-radius: 2px;
}

.shell-notebooks .notebook-standalone-page {
  width: 100%;
  min-height: calc(100vh - 68px);
  margin: 0;
  padding: 32px clamp(32px, 5vw, 72px) 72px;
  background: var(--notebook-paper);
}

.shell-notebooks .notebook-standalone-page :where(.panel, .history-panel) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shell-notebooks .history-panel {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.shell-notebooks .history-panel-head,
.shell-notebooks .markdown-guide-intro {
  gap: 8px;
  margin: 0;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--notebook-rule-strong);
  border-radius: 0;
  background: transparent;
}

.shell-notebooks .history-panel-head > div {
  display: grid;
  gap: 8px;
}

.shell-notebooks .history-panel-head h2,
.shell-notebooks .markdown-guide-intro h2 {
  margin: 0;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.15;
}

.shell-notebooks .history-panel-head > span,
.shell-notebooks .markdown-guide-intro > p:not(.notebook-page-kicker) {
  color: var(--notebook-muted);
}

.shell-notebooks .notebook-trash-page .notebook-content-list {
  padding-inline: 0;
}

.shell-notebooks .notebook-trash-page .notebook-row-actions {
  grid-template-columns: repeat(2, minmax(88px, 1fr));
  min-width: 188px;
}

.shell-notebooks .markdown-guide-tips {
  gap: 0;
  margin-top: 4px;
  border-top: 1px solid var(--notebook-rule);
}

.shell-notebooks .markdown-guide-tips span {
  min-height: 36px;
  padding: 9px 12px;
  border: 0;
  border-right: 1px solid var(--notebook-rule);
  border-radius: 0;
  background: transparent;
  color: var(--notebook-muted);
  font-weight: 600;
}

.shell-notebooks .markdown-guide-list {
  display: block;
  margin: 0;
}

.shell-notebooks .markdown-guide-example {
  gap: 14px;
  padding: 24px 0;
  border: 0;
  border-bottom: 1px solid var(--notebook-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shell-notebooks .markdown-guide-copy h2 {
  color: var(--notebook-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 20px;
  font-weight: 500;
}

.shell-notebooks .markdown-guide-copy p,
.shell-notebooks .markdown-guide-source h3,
.shell-notebooks .markdown-guide-preview h3 {
  color: var(--notebook-muted);
}

.shell-notebooks .markdown-guide-source pre,
.shell-notebooks .markdown-guide-preview .markdown-body {
  border-color: var(--notebook-rule);
  border-radius: 2px;
  background: var(--notebook-surface);
}

@media (min-width: 1041px) {
  .shell-notebooks > .topbar.is-module-landing {
    grid-template-columns: minmax(160px, 1fr) auto;
    gap: 28px;
    width: 100%;
    height: 68px;
    min-height: 68px;
    margin: 0;
    padding: 0 clamp(24px, 3vw, 40px);
    border-bottom: 1px solid var(--notebook-rule);
    background: var(--notebook-surface);
    box-sizing: border-box;
  }

  .shell-notebooks > .topbar.is-module-landing .topbar-title {
    gap: 4px;
    align-items: center;
  }

  .shell-notebooks > .topbar.is-module-landing .module-page-title {
    color: var(--notebook-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
  }

  .shell-notebooks > .topbar.is-module-landing .module-page-meta {
    color: var(--notebook-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
  }

  .shell-notebooks > .topbar.is-module-landing .topbar-side {
    flex-direction: row;
    gap: 14px;
    align-items: center;
  }

  .shell-notebooks > .topbar.is-module-landing .top-actions {
    order: 0;
    margin: 0;
  }

  .shell-notebooks > .topbar.is-module-landing .topbar-system {
    order: 1;
  }

  .shell-notebooks > .topbar.is-module-landing .account-menu {
    order: 2;
  }

  .shell-notebooks > .topbar.is-module-landing .desktop-module-nav {
    order: 3;
  }

  .shell-notebooks > .topbar.is-module-landing :is(.desktop-module-nav, .topbar-system, .top-actions) {
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell-notebooks > .topbar.is-module-landing .account-menu > summary {
    min-height: 44px;
    padding: 11px 10px 12px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--notebook-muted);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none;
  }

  .shell-notebooks > .topbar.is-module-landing .account-menu > summary:hover,
  .shell-notebooks > .topbar.is-module-landing .account-menu > summary:focus-visible,
  .shell-notebooks > .topbar.is-module-landing .account-menu[open] > summary {
    color: var(--notebook-blue);
  }

  .shell-notebooks > .topbar.is-module-landing .account-menu > summary:focus-visible {
    outline: 2px solid var(--notebook-focus);
    outline-offset: 1px;
  }

  .shell-notebooks > .topbar.is-module-landing .desktop-module-nav {
    gap: 2px;
    min-height: 44px;
  }

  .shell-notebooks > .topbar.is-module-landing .desktop-module-nav .module-nav-icon,
  .shell-notebooks > .topbar.is-module-landing .desktop-module-nav a::before {
    display: none;
  }

  .shell-notebooks > .topbar.is-module-landing .desktop-module-nav a {
    position: relative;
    gap: 7px;
    min-width: 0;
    min-height: 44px;
    padding: 11px 9px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--notebook-muted);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none;
  }

  .shell-notebooks > .topbar.is-module-landing .desktop-module-nav a::after {
    position: absolute;
    right: 9px;
    bottom: 5px;
    left: 9px;
    height: 2px;
    border-radius: 0;
    background: transparent;
    content: "";
  }

  .shell-notebooks > .topbar.is-module-landing .desktop-module-nav a:hover,
  .shell-notebooks > .topbar.is-module-landing .desktop-module-nav a:focus-visible,
  .shell-notebooks > .topbar.is-module-landing .desktop-module-nav a.is-active {
    border: 0;
    background: transparent;
    color: var(--notebook-blue);
    outline: 0;
    box-shadow: none;
    transform: none;
  }

  .shell-notebooks > .topbar.is-module-landing .desktop-module-nav a:focus-visible {
    outline: 2px solid var(--notebook-focus);
    outline-offset: 1px;
  }

  .shell-notebooks > .topbar.is-module-landing .desktop-module-nav a.is-active::after {
    background: var(--notebook-blue);
  }

  .shell-notebooks .notebook-layout {
    grid-template-columns: minmax(0, clamp(228px, var(--notebook-sidebar-width), 280px)) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: calc(100vh - 68px);
    overflow: hidden;
  }

  .shell-notebooks .notebook-layout.is-sidebar-hidden {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .shell-notebooks .notebook-sidebar-frame,
  .shell-notebooks .notebook-sidebar,
  .shell-notebooks .notebook-tree-shell {
    height: 100%;
  }

  .shell-notebooks .notebook-main {
    height: 100%;
    min-height: 0;
  }

  .shell-notebooks .notebook-tree-scroll {
    min-height: 0;
    overflow-y: auto;
  }

  .shell-notebooks .notebook-document-rail {
    display: grid;
  }
}

@media (max-width: 1040px) {
  .shell-notebooks {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0 0 calc(70px + env(safe-area-inset-bottom, 0px));
    background: var(--notebook-paper);
  }

  .shell-notebooks > .topbar.is-module-landing {
    position: sticky;
    top: 0;
    z-index: 78;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    height: 50px;
    min-height: 50px;
    margin: 0;
    padding: 3px 8px 3px 16px;
    border-bottom: 1px solid var(--notebook-rule);
    background: rgb(251 250 247 / 98%);
    box-sizing: border-box;
    backdrop-filter: none;
  }

  .shell-notebooks > .topbar.is-module-landing .topbar-title {
    gap: 6px;
    align-items: center;
  }

  .shell-notebooks > .topbar.is-module-landing .module-page-title {
    color: var(--notebook-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
  }

  .shell-notebooks > .topbar.is-module-landing .module-page-meta {
    color: var(--notebook-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
  }

  .shell-notebooks > .topbar.is-module-landing .top-actions.is-mobile-menu,
  .shell-notebooks > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main {
    gap: 6px;
  }

  .shell-notebooks > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-primary {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--notebook-blue);
    border-radius: 2px;
    background: var(--notebook-blue);
    color: #fff;
    font-size: 20px;
  }

  .shell-notebooks > .topbar.is-module-landing .top-actions.is-mobile-menu.is-menu-ready .top-actions-more {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--notebook-rule);
    border-radius: 2px;
    background: transparent;
    color: var(--notebook-muted);
    font-size: 20px;
  }

  .shell-notebooks + .module-nav {
    gap: 0;
    min-height: 62px;
    padding: 4px 8px calc(3px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--notebook-rule);
    background: rgb(251 250 247 / 98%);
    box-shadow: none;
    backdrop-filter: none;
  }

  .shell-notebooks + .module-nav a,
  .shell-notebooks + .module-nav a.is-active {
    position: relative;
    gap: 2px;
    min-height: 52px;
    padding: 4px 2px 3px;
    border-radius: 0;
    background: transparent;
    color: var(--notebook-muted);
    font-size: 11px;
    font-weight: 600;
  }

  .shell-notebooks + .module-nav a.is-active {
    color: var(--notebook-blue);
  }

  .shell-notebooks + .module-nav a.is-active::after {
    position: absolute;
    right: 34%;
    bottom: 1px;
    left: 34%;
    height: 2px;
    border-radius: 0;
    background: currentColor;
    content: "";
  }

  .shell-notebooks .notebook-layout {
    display: block;
    width: 100%;
    min-height: calc(100vh - 50px);
    border: 0;
    border-radius: 0;
    background: var(--notebook-paper);
    overflow: visible;
  }

  .shell-notebooks .notebook-main,
  .shell-notebooks .notebook-home-panel,
  .shell-notebooks .notebook-document,
  .shell-notebooks .notebook-editor {
    min-height: calc(100vh - 120px);
    background: var(--notebook-paper);
  }

  .shell-notebooks .notebook-directory-backdrop {
    background: rgba(21, 23, 26, 0.4);
    backdrop-filter: none;
  }

  .shell-notebooks .notebook-sidebar-frame {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--app-mobile-sheet-height, min(82dvh, 760px));
    border: 1px solid var(--notebook-rule);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: var(--notebook-surface);
    box-shadow: 0 -16px 38px rgba(21, 23, 26, 0.18);
  }

  .shell-notebooks .notebook-directory-grabber {
    background: var(--notebook-rule);
  }

  .shell-notebooks .notebook-tree-shell {
    max-height: none;
    padding-top: 18px;
    border: 0;
    background: var(--notebook-surface);
  }

  .shell-notebooks .notebook-tree-scroll {
    max-height: none;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .shell-notebooks .notebook-sidebar-hide {
    top: 14px;
    right: 10px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
  }

  .shell-notebooks .notebook-sidebar-show {
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: auto;
    gap: 6px;
    width: auto;
    min-width: 76px;
    height: 44px;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--notebook-blue);
    border-radius: 2px;
    background: var(--notebook-surface);
    color: var(--notebook-blue);
    box-shadow: none;
    transform: none;
  }

  .shell-notebooks .notebook-sidebar-show-label {
    display: inline;
    font-size: 13px;
    font-weight: 700;
  }

  .shell-notebooks .notebook-tree-search {
    grid-template-columns: minmax(0, 1fr) 44px 44px;
  }

  .shell-notebooks .notebook-tree-search :where(input, button, a),
  .shell-notebooks :where(.notebook-tree-toggle, .notebook-tree-action, .notebook-tree-title-action) {
    min-width: 44px;
    min-height: 44px;
  }

  .shell-notebooks .notebook-tree-home,
  .shell-notebooks .notebook-tree-row {
    min-height: 48px;
  }

  .shell-notebooks .notebook-home-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    align-items: start;
    gap: 12px;
    min-height: 0;
    padding: 18px 16px 16px;
  }

  .shell-notebooks .notebook-home-head > div:first-child > p:not(.notebook-page-kicker) {
    display: none;
  }

  .shell-notebooks .notebook-home-head h2 {
    font-size: 30px;
  }

  .shell-notebooks .notebook-home-actions {
    width: 100%;
  }

  .shell-notebooks .notebook-home-actions .button {
    flex: 1 1 120px;
    min-height: 44px;
  }

  .shell-notebooks .notebook-home-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 16px 44px;
  }

  .shell-notebooks .notebook-home-recent {
    padding: 18px 0 0;
  }

  .shell-notebooks .notebook-home-overview {
    margin-top: 22px;
    padding: 22px 0 0;
    border-top: 1px solid var(--notebook-rule);
    border-left: 0;
  }

  .shell-notebooks .notebook-home-note {
    min-height: 72px;
  }

  .shell-notebooks .notebook-head-panel {
    padding: 22px 16px 18px;
  }

  .shell-notebooks .notebook-head-title h2 {
    font-size: 30px;
  }

  .shell-notebooks .notebook-filter-panel {
    padding: 12px 16px 16px;
  }

  .shell-notebooks .notebook-filter {
    grid-template-columns: minmax(0, 1fr);
  }

  .shell-notebooks .notebook-filter :where(input, select, .button, button) {
    width: 100%;
    height: 44px;
    min-height: 44px;
  }

  .shell-notebooks .notebook-filter .form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shell-notebooks .notebook-content-list {
    padding: 0 16px 44px;
  }

  .shell-notebooks .notebook-row {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .shell-notebooks .notebook-row-main {
    padding: 14px 0;
  }

  .shell-notebooks .notebook-row-actions {
    display: flex;
    min-width: 0;
    padding: 0 0 14px;
  }

  .shell-notebooks .notebook-row-actions :where(.button, button) {
    width: auto;
    min-height: 44px;
  }

  .shell-notebooks .notebook-workspace-toolbar {
    position: sticky;
    top: 50px;
    z-index: 8;
    gap: 10px;
    min-height: 64px;
    padding: 9px 12px;
  }

  .shell-notebooks .notebook-workspace-actions {
    width: 100%;
  }

  .shell-notebooks .notebook-workspace-actions :where(.button, button) {
    flex: 1 1 auto;
    min-height: 44px;
  }

  .shell-notebooks .notebook-editor-toolbar {
    align-items: center;
  }

  .shell-notebooks .notebook-editor-toolbar .notebook-workspace-actions {
    width: auto;
  }

  .shell-notebooks .notebook-editor-toolbar .notebook-workspace-actions :where(.button, button) {
    flex: 0 0 auto;
  }

  .shell-notebooks .notebook-document-layout {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .shell-notebooks .notebook-document-rail {
    display: none;
  }

  .shell-notebooks .notebook-document-canvas {
    padding: 28px 18px 72px;
  }

  .shell-notebooks .notebook-document-head h1 {
    font-size: 32px;
  }

  .shell-notebooks .notebook-hierarchy-toggle,
  .shell-notebooks .notebook-hierarchy-focus {
    min-width: 44px;
    min-height: 44px;
  }

  .shell-notebooks .notebook-editor-canvas {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 16px 72px;
  }

  .shell-notebooks .notebook-editor-title input {
    min-height: 56px;
    font-size: 30px;
  }

  .shell-notebooks .notebook-editor-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .shell-notebooks .notebook-editor-meta-row,
  .shell-notebooks .notebook-editor-notebook-row,
  .shell-notebooks .notebook-editor-tags-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .shell-notebooks .notebook-editor-meta-row > input,
  .shell-notebooks .notebook-editor-meta-row > select {
    height: 44px;
    min-height: 44px;
  }

  .shell-notebooks .notebook-editor-tags-row .tag-picker {
    max-width: 100%;
  }

  .shell-notebooks .notebook-editor-tags-row .tag-choice {
    min-width: 44px;
  }

  .shell-notebooks .notebook-editor-body-head {
    align-items: flex-start;
  }

  .shell-notebooks .notebook-editor-body-actions {
    gap: 6px;
  }

  .shell-notebooks .notebook-editor-body-preview,
  .shell-notebooks .notebook-editor-image-button {
    min-height: 44px;
  }

  .shell-notebooks .notebook-markdown-toolbar {
    padding-block: 7px;
  }

  .shell-notebooks .notebook-markdown-toolbar button {
    min-width: 44px;
    min-height: 44px;
    padding: 7px 9px;
  }

  .shell-notebooks .notebook-editor-body textarea {
    min-height: 52vh;
  }

  .shell-notebooks .notebook-preview-dialog,
  .shell-notebooks .notebook-preview-dialog.notebook-preview-drawer {
    width: 100%;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    margin: 16px 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 4px 4px 0 0;
  }

  .shell-notebooks .notebook-preview-toolbar :where(.button, button) {
    min-width: 44px;
    min-height: 44px;
  }

  .shell-notebooks .notebook-standalone-page {
    min-height: calc(100vh - 50px);
    padding: 24px 16px 64px;
  }

  .shell-notebooks .history-panel-head,
  .shell-notebooks .markdown-guide-intro {
    align-items: flex-start;
    padding-bottom: 18px;
  }

  .shell-notebooks .history-panel-head h2,
  .shell-notebooks .markdown-guide-intro h2 {
    font-size: 30px;
  }

  .shell-notebooks .notebook-trash-page .notebook-content-list {
    padding-inline: 0;
  }

  .shell-notebooks .notebook-trash-page .notebook-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .shell-notebooks .notebook-trash-page .notebook-row-actions :where(button, .button) {
    width: 100%;
  }

  .shell-notebooks .markdown-guide-tips span {
    flex: 0 0 auto;
    border-bottom: 0;
  }

  .shell-notebooks .markdown-guide-tips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .shell-notebooks .markdown-guide-example {
    padding: 22px 0;
  }

  .shell-notebooks .markdown-guide-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .shell-notebooks button,
  .shell-notebooks .button {
    min-height: 44px;
  }
}

/* Reading / Swiss Archive v3.0
   A continuous private library and quiet paginated reading canvas. */

html:has(.shell-reading),
body:has(.shell-reading) {
  background: #f5f4f0;
}

.shell-reading {
  --reading-paper: #f5f4f0;
  --reading-surface: #fbfaf7;
  --reading-ink: #15171a;
  --reading-ink-soft: #34383d;
  --reading-muted: #6c7178;
  --reading-faint: #979ba0;
  --reading-rule: #d2d3d0;
  --reading-rule-strong: #202226;
  --reading-blue: #1455cc;
  --reading-blue-hover: #0b43a8;
  --reading-blue-soft: #e8eef9;
  --reading-red: #d1192e;
  --reading-red-soft: #fae9ec;
  --reading-focus: #7aa4ff;
  --accent: var(--reading-blue);
  --accent-dark: var(--reading-blue-hover);
  --accent-soft: var(--reading-blue-soft);
  --bg: var(--reading-paper);
  --panel: var(--reading-surface);
  --panel-soft: var(--reading-paper);
  --text: var(--reading-ink);
  --muted: var(--reading-muted);
  --line: var(--reading-rule);
  --line-soft: var(--reading-rule);
  --danger: var(--reading-red);
  --success: var(--reading-blue);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--reading-paper);
  color: var(--reading-ink);
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
}

.shell-reading :where(.module-page-title, .reading-library-head h2, .reading-empty h2) {
  color: var(--reading-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-weight: 500;
  letter-spacing: 0;
}

.shell-reading .reading-page-kicker {
  margin: 0;
  color: var(--reading-blue);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shell-reading :where(input, select, textarea) {
  border-color: var(--reading-rule);
  border-radius: 2px;
  background: var(--reading-surface);
  color: var(--reading-ink);
  box-shadow: none;
}

.shell-reading :where(input, select, textarea):focus-visible {
  border-color: var(--reading-blue);
  outline: 2px solid var(--reading-focus);
  outline-offset: 1px;
  box-shadow: none;
}

.shell-reading :where(.button, button) {
  border-radius: 2px;
  box-shadow: none;
  transition:
    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease;
}

.shell-reading :where(.button, button):active {
  transform: scale(0.98);
}

.shell-reading :where(.button.secondary, button.secondary) {
  border-color: var(--reading-rule);
  background: transparent;
  color: var(--reading-ink-soft);
}

.shell-reading :where(.button.secondary, button.secondary):hover,
.shell-reading :where(.button.secondary, button.secondary):focus-visible {
  border-color: var(--reading-blue);
  background: var(--reading-blue-soft);
  color: var(--reading-blue);
}

.shell-reading :where(
  .reading-continue-button,
  .reading-upload-card button[type="submit"],
  .reading-folder-card button[type="submit"],
  .reading-book-metadata-card button[type="submit"],
  .reading-annotation-card button[data-reading-annotation-save]
) {
  border-color: var(--reading-blue);
  background: var(--reading-blue);
  color: #fff;
}

.shell-reading .reading-continue-button {
  border-color: var(--reading-blue);
  background: var(--reading-blue);
  color: #fff;
}

.shell-reading .reading-continue-button:hover,
.shell-reading .reading-continue-button:focus-visible {
  border-color: var(--reading-blue-hover);
  background: var(--reading-blue-hover);
  color: #fff;
}

.shell-reading :where(
  .reading-continue-button,
  .reading-upload-card button[type="submit"],
  .reading-folder-card button[type="submit"],
  .reading-book-metadata-card button[type="submit"],
  .reading-annotation-card button[data-reading-annotation-save]
):hover,
.shell-reading :where(
  .reading-continue-button,
  .reading-upload-card button[type="submit"],
  .reading-folder-card button[type="submit"],
  .reading-book-metadata-card button[type="submit"],
  .reading-annotation-card button[data-reading-annotation-save]
):focus-visible {
  border-color: var(--reading-blue-hover);
  background: var(--reading-blue-hover);
  color: #fff;
}

.shell-reading > .reading-library-page {
  width: 100%;
  min-height: calc(100vh - 68px);
  padding: 0 clamp(24px, 3vw, 44px) 48px;
  background: var(--reading-paper);
}

.shell-reading .reading-library-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  min-height: 92px;
  padding: 14px 0;
  border-bottom: 1px solid var(--reading-rule-strong);
}

.shell-reading .reading-library-head > div:first-child {
  display: grid;
  gap: 4px;
  align-items: start;
}

.shell-reading .reading-library-head h2 {
  margin: 0;
  overflow: visible;
  font-size: clamp(31px, 3vw, 38px);
  line-height: 1.08;
  text-overflow: clip;
  white-space: normal;
}

.shell-reading .reading-library-head-actions {
  gap: 16px;
}

.shell-reading .reading-library-count {
  color: var(--reading-muted);
  font-size: 12px;
}

.shell-reading .reading-library-count strong {
  color: var(--reading-blue);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 24px;
  font-weight: 500;
}

.shell-reading .reading-library-action-row {
  gap: 6px;
}

.shell-reading .reading-library-action-row > .button {
  height: 36px;
  min-height: 36px;
  padding-inline: 11px;
  border-color: var(--reading-rule);
  border-radius: 2px;
  background: transparent;
  color: var(--reading-ink-soft);
}

.shell-reading .reading-shelf-folder-actions .button {
  height: 36px;
  min-height: 36px;
  border-radius: 2px;
}

.shell-reading .reading-library-notice {
  min-height: 38px;
  margin: 0;
  padding: 10px 0 0;
  color: var(--reading-blue);
  font-size: 12px;
}

.shell-reading .reading-library-notice.is-error {
  color: var(--reading-red);
}

.shell-reading .reading-shelf-list,
.shell-reading .reading-book-grid {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 0 30px;
  padding-top: 0;
}

.shell-reading .reading-shelf-folder {
  grid-column: 1 / -1;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--reading-rule-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shell-reading .reading-shelf-folder-head {
  min-height: 58px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--reading-rule);
  background: transparent;
}

.shell-reading .reading-shelf-folder.is-collapsed .reading-shelf-folder-head {
  border-bottom-color: transparent;
}

.shell-reading .reading-shelf-folder-toggle {
  min-height: 44px;
  color: var(--reading-ink);
}

.shell-reading .reading-shelf-folder-toggle > i:first-child {
  color: var(--reading-blue);
  font-size: 20px;
}

.shell-reading .reading-shelf-folder-toggle strong {
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 19px;
  font-weight: 500;
}

.shell-reading .reading-shelf-folder-toggle small {
  color: var(--reading-muted);
}

.shell-reading .reading-shelf-folder-body {
  padding: 0;
}

.shell-reading .reading-folder-books {
  padding-top: 0;
}

.shell-reading .reading-folder-empty {
  min-height: 68px;
  margin: 12px 0;
  border: 1px dashed var(--reading-rule);
  border-radius: 2px;
  background: transparent;
  color: var(--reading-muted);
}

.shell-reading .reading-book-card {
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  min-height: 204px;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--reading-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shell-reading .reading-book-cover {
  width: 112px;
  border: 1px solid var(--reading-rule);
  border-radius: 2px 5px 5px 2px;
  background: var(--reading-surface);
  box-shadow: -3px 6px 14px rgba(21, 23, 26, 0.1), inset 3px 0 0 rgb(255 255 255 / 24%);
  transition: border-color 140ms ease, filter 140ms ease;
}

.shell-reading .reading-book-cover:hover,
.shell-reading .reading-book-cover:focus-visible {
  border-color: var(--reading-blue);
  box-shadow: -3px 6px 14px rgba(21, 23, 26, 0.1), inset 3px 0 0 rgb(255 255 255 / 24%);
  filter: saturate(0.92);
  outline: 2px solid var(--reading-focus);
  outline-offset: 2px;
  transform: none;
}

.shell-reading .reading-book-cover > span {
  color: var(--reading-blue);
}

.shell-reading .reading-book-copy > .eyebrow {
  margin: 0;
  color: var(--reading-blue);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.shell-reading .reading-book-copy h2 {
  margin: 5px 0 3px;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
}

.shell-reading .reading-book-copy h2 a:hover,
.shell-reading .reading-book-copy h2 a:focus-visible {
  color: var(--reading-blue);
}

.shell-reading .reading-book-author,
.shell-reading .reading-book-description,
.shell-reading .reading-book-meta {
  color: var(--reading-muted);
}

.shell-reading .reading-book-description {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shell-reading .reading-book-progress {
  height: 2px;
  margin: 13px 0 7px;
  border-radius: 0;
  background: var(--reading-rule);
}

.shell-reading .reading-book-progress span {
  border-radius: 0;
  background: var(--reading-blue);
}

.shell-reading .reading-book-meta {
  gap: 4px 8px;
  font-size: 11px;
}

.shell-reading .reading-book-meta span + span::before {
  margin-right: 8px;
  color: var(--reading-rule-strong);
}

.shell-reading .reading-book-actions {
  gap: 6px;
  margin-top: 12px;
}

.shell-reading .reading-book-actions .button {
  height: 36px;
  min-height: 36px;
  padding-inline: 11px;
  border-radius: 2px;
  font-size: 12px;
}

.reading-simple-mode .shell-reading .reading-shelf-top,
.reading-simple-mode .shell-reading .reading-folder-books {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 30px;
  padding-top: 0;
}

.reading-simple-mode .shell-reading .reading-book-card {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  min-height: 68px;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--reading-rule);
  border-radius: 0;
  background: transparent;
}

.reading-simple-mode .shell-reading .reading-book-cover {
  width: 42px;
  height: 56px;
  border-radius: 2px 4px 4px 2px;
}

.reading-simple-mode .shell-reading .reading-book-copy {
  grid-template-rows: auto auto;
  gap: 2px 12px;
}

.reading-simple-mode .shell-reading .reading-book-copy h2 {
  grid-row: 1;
  grid-column: 1;
  font-size: 16px;
}

.reading-simple-mode .shell-reading .reading-book-author {
  grid-row: 2;
  grid-column: 1;
}

.reading-simple-mode .shell-reading .reading-book-meta {
  grid-row: 1;
  grid-column: 2;
  justify-content: flex-end;
  width: auto;
  max-width: 210px;
  overflow: hidden;
  white-space: nowrap;
}

.reading-simple-mode .shell-reading .reading-book-actions {
  grid-row: 2;
  grid-column: 2;
}

.reading-simple-mode .shell-reading .reading-book-actions .button {
  height: 32px;
  min-height: 32px;
}

.shell-reading .reading-empty {
  min-height: calc(100vh - 68px);
  padding: 40px 24px;
  background: var(--reading-paper);
}

.shell-reading .reading-empty > i {
  color: var(--reading-blue);
}

.shell-reading .reading-reader {
  --reading-sidebar-width: clamp(236px, 18vw, 284px);
  width: 100%;
  min-width: 0;
  background: var(--reading-paper);
}

.shell-reading .reading-progress-line {
  top: 68px;
  z-index: 79;
  height: 2px;
}

.shell-reading .reading-progress-line span {
  background: var(--reading-blue);
}

.shell-reading .reading-reader-layout {
  grid-template-columns: minmax(0, clamp(236px, var(--reading-sidebar-width), 284px)) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.shell-reading .reading-reader-layout.is-reading-sidebar-hidden {
  grid-template-columns: 0 minmax(0, 1fr);
  gap: 0;
}

.shell-reading .reading-sidebar-frame {
  height: 100%;
  border-right: 1px solid var(--reading-rule);
  background: var(--reading-paper);
}

.shell-reading .reading-sidebar {
  top: 0;
  height: 100%;
  max-height: none;
  border-right: 0;
  background: var(--reading-paper);
}

.shell-reading .reading-sidebar-book {
  min-height: 86px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--reading-rule);
}

.shell-reading .reading-sidebar-book img {
  width: 48px;
  border-radius: 2px 4px 4px 2px;
  box-shadow: none;
}

.shell-reading .reading-sidebar-book strong {
  color: var(--reading-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-weight: 500;
}

.shell-reading .reading-sidebar-book span {
  color: var(--reading-muted);
}

.shell-reading .reading-sidebar-tabs {
  margin: 0;
  border-bottom-color: var(--reading-rule);
}

.shell-reading .reading-sidebar-tabs button {
  min-height: 42px;
  color: var(--reading-muted);
}

.shell-reading .reading-sidebar-tabs button.is-active {
  color: var(--reading-blue);
}

.shell-reading .reading-sidebar-tabs button.is-active::after {
  background: var(--reading-blue);
}

.shell-reading .reading-sidebar-tabs button span {
  border-radius: 2px;
  background: transparent;
  color: inherit;
}

.shell-reading .reading-sidebar-panel {
  padding: 8px 10px 18px;
}

.shell-reading .reading-directory {
  gap: 0;
}

.shell-reading .reading-directory-group {
  min-height: 34px;
  margin-top: 5px;
  padding-top: 9px;
  color: var(--reading-ink-soft);
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.shell-reading .reading-directory a {
  min-height: 38px;
  border-radius: 0;
  color: var(--reading-muted);
}

.shell-reading .reading-directory a:hover,
.shell-reading .reading-directory a:focus-visible,
.shell-reading .reading-directory a.is-active {
  background: var(--reading-blue-soft);
  color: var(--reading-blue);
}

.shell-reading .reading-directory a.is-active {
  box-shadow: inset 2px 0 0 var(--reading-blue);
}

.shell-reading :where(.reading-bookmark-list, .reading-annotation-list) {
  gap: 0;
}

.shell-reading :where(.reading-bookmark-list article, .reading-annotation-list article) {
  border-bottom-color: var(--reading-rule);
}

.shell-reading :where(.reading-bookmark-list, .reading-annotation-list) form button {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
}

.shell-reading :where(.reading-bookmark-list article > a, .reading-annotation-list article > a):hover,
.shell-reading :where(.reading-bookmark-list article > a, .reading-annotation-list article > a):focus-visible {
  background: var(--reading-blue-soft);
}

.shell-reading :where(.reading-bookmark-list strong, .reading-annotation-list strong) {
  color: var(--reading-blue);
}

.shell-reading :where(.reading-bookmark-empty i, .reading-annotation-empty i) {
  color: var(--reading-blue);
}

.shell-reading .reading-stage {
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr);
  min-width: 0;
  background: var(--reading-surface);
}

.shell-reading .reading-stage-toolbar {
  position: relative;
  top: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 54px;
  height: 54px;
  margin: 0;
  padding: 6px clamp(16px, 2vw, 28px);
  border-bottom: 1px solid var(--reading-rule);
  background: var(--reading-surface);
  backdrop-filter: none;
}

.shell-reading .reading-stage-position span {
  color: var(--reading-muted);
}

.shell-reading .reading-stage-position strong {
  color: var(--reading-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 16px;
  font-weight: 500;
}

.shell-reading .reading-stage-actions {
  gap: 4px;
}

.shell-reading .reading-stage-actions .button {
  min-height: 36px;
  padding-inline: 10px;
}

.shell-reading .reading-paper {
  min-height: 0;
  margin: 0;
  padding: 52px max(32px, calc((100% - var(--reader-content-width)) / 2)) 72px;
  border: 0;
  border-radius: 0;
  background: var(--reading-surface);
  box-shadow: none;
}

.shell-reading .reading-paper::before,
.shell-reading .reading-paper::after {
  width: 32px;
  height: 44px;
  border-color: var(--reading-rule);
  border-radius: 2px;
  background: var(--reading-surface);
  color: var(--reading-blue);
  box-shadow: none;
}

.shell-reading .reading-content {
  color: var(--reading-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
}

.shell-reading .reading-content :where(h1, h2) {
  color: var(--reading-ink);
}

.shell-reading .reading-content blockquote {
  border-left-color: var(--reading-blue);
  background: var(--reading-blue-soft);
}

.shell-reading .reading-content a {
  color: var(--reading-blue-hover);
  text-decoration-color: var(--reading-blue);
}

.shell-reading .reading-page-nav {
  min-height: 50px;
  padding: 4px 12px;
  border-top-color: var(--reading-rule);
  background: var(--reading-surface);
}

.shell-reading .reading-page-nav .button {
  min-height: 40px;
}

.shell-reading .reading-chapter-nav {
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--reading-rule);
}

.shell-reading .reading-chapter-nav .button {
  min-height: 64px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.shell-reading .reading-chapter-nav .button + .button {
  border-left: 1px solid var(--reading-rule);
}

.reading-pagination-active .shell-reading {
  width: 100%;
  max-width: none;
  padding: 0;
  background: var(--reading-paper);
}

.reading-pagination-active .shell-reading .topbar {
  margin: 0;
}

.shell-reading .reading-reader.is-paginated .reading-reader-layout {
  height: 100%;
}

.shell-reading .reading-reader.is-paginated .reading-stage {
  grid-template-rows: 54px minmax(0, 1fr);
}

.shell-reading .reading-reader.is-paginated .reading-stage-toolbar {
  margin: 0;
}

.shell-reading .reading-reader.is-paginated .reading-paper {
  border-radius: 0;
}

.shell-reading .reading-reader.is-paginated .reading-page-flow {
  width: min(calc(100% - 64px), var(--reader-content-width));
  padding: 32px 0 18px;
  column-gap: 72px;
  transition: transform var(--reading-page-swipe-duration, 180ms) cubic-bezier(0.23, 1, 0.32, 1);
}

.shell-reading .reading-reader.is-reading-focus-mode {
  padding: 0;
  background: var(--reading-paper);
}

.shell-reading .reading-reader.is-reading-focus-mode .reading-stage {
  width: min(100%, 1500px);
  background: var(--reading-surface);
}

.shell-reading .reading-reader.is-reading-focus-mode .reading-stage-toolbar {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 5px 14px;
}

.shell-reading :where(
  .reading-settings-dialog,
  .reading-upload-dialog,
  .reading-annotation-dialog,
  .reading-folder-dialog,
  .reading-book-metadata-dialog
) {
  border-color: var(--reading-rule);
  border-radius: 4px;
  background: var(--reading-surface);
  color: var(--reading-ink);
  box-shadow: 0 18px 54px rgb(21 23 26 / 18%);
}

.shell-reading :where(
  .reading-settings-dialog,
  .reading-upload-dialog,
  .reading-annotation-dialog,
  .reading-folder-dialog,
  .reading-book-metadata-dialog
)::backdrop {
  background: rgb(21 23 26 / 42%);
  backdrop-filter: none;
}

.shell-reading :where(
  .reading-settings-card,
  .reading-upload-card,
  .reading-annotation-card,
  .reading-folder-card,
  .reading-book-metadata-card
) {
  gap: 18px;
  padding: 22px;
}

.shell-reading :where(
  .reading-settings-card h2,
  .reading-upload-card h2,
  .reading-annotation-card h2,
  .reading-folder-card h2,
  .reading-book-metadata-card h2
) {
  color: var(--reading-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 23px;
  font-weight: 500;
}

.shell-reading .reading-upload-file {
  border-color: var(--reading-rule);
  border-radius: 2px;
  background: var(--reading-paper);
}

.shell-reading .reading-annotation-card fieldset span {
  min-height: 36px;
  border-color: var(--reading-rule);
  border-radius: 2px;
  color: var(--reading-ink-soft);
}

.shell-reading .reading-annotation-card fieldset input:checked + span {
  border-color: var(--reading-blue);
  color: var(--reading-blue);
  box-shadow: 0 0 0 2px var(--reading-blue-soft);
}

.shell-reading .reading-selection-toolbar {
  min-height: 36px;
  border-color: var(--reading-blue);
  border-radius: 2px;
  background: var(--reading-blue);
  color: #fff;
  box-shadow: 0 8px 24px rgb(21 23 26 / 16%);
}

.shell-reading .reading-selection-toolbar:hover,
.shell-reading .reading-selection-toolbar:focus-visible {
  border-color: var(--reading-blue-hover);
  background: var(--reading-blue-hover);
}

.shell-reading .reading-save-status {
  border-color: var(--reading-rule);
  border-radius: 2px;
  background: var(--reading-surface);
  color: var(--reading-muted);
  box-shadow: 0 8px 24px rgb(21 23 26 / 12%);
}

.shell-reading .reading-save-status[data-state="error"] {
  color: var(--reading-red);
}

@media (min-width: 1041px) {
  .shell-reading > .topbar.is-module-landing {
    grid-template-columns: minmax(160px, 1fr) auto;
    gap: 28px;
    width: 100%;
    height: 68px;
    min-height: 68px;
    margin: 0;
    padding: 0 clamp(24px, 3vw, 40px);
    border-bottom: 1px solid var(--reading-rule);
    background: var(--reading-surface);
    box-sizing: border-box;
  }

  .shell-reading > .topbar.is-module-landing .topbar-title {
    gap: 4px;
    align-items: center;
  }

  .shell-reading > .topbar.is-module-landing .module-page-title {
    color: var(--reading-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
  }

  .shell-reading > .topbar.is-module-landing .module-page-meta {
    max-width: 220px;
    overflow: hidden;
    color: var(--reading-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell-reading > .topbar.is-module-landing .topbar-side {
    flex-direction: row;
    gap: 14px;
    align-items: center;
  }

  .shell-reading > .topbar.is-module-landing .top-actions {
    order: 0;
    margin: 0;
  }

  .shell-reading > .topbar.is-module-landing .topbar-system {
    order: 1;
  }

  .shell-reading > .topbar.is-module-landing .account-menu {
    order: 2;
  }

  .shell-reading > .topbar.is-module-landing .desktop-module-nav {
    order: 3;
  }

  .shell-reading > .topbar.is-module-landing :is(.desktop-module-nav, .topbar-system, .top-actions) {
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell-reading > .topbar.is-module-landing .account-menu > summary {
    min-height: 44px;
    padding: 11px 10px 12px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--reading-muted);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none;
  }

  .shell-reading > .topbar.is-module-landing .account-menu > summary:hover,
  .shell-reading > .topbar.is-module-landing .account-menu > summary:focus-visible,
  .shell-reading > .topbar.is-module-landing .account-menu[open] > summary {
    color: var(--reading-blue);
  }

  .shell-reading > .topbar.is-module-landing .desktop-module-nav {
    gap: 2px;
    min-height: 44px;
  }

  .shell-reading > .topbar.is-module-landing .desktop-module-nav .module-nav-icon,
  .shell-reading > .topbar.is-module-landing .desktop-module-nav a::before {
    display: none;
  }

  .shell-reading > .topbar.is-module-landing .desktop-module-nav a {
    position: relative;
    gap: 7px;
    min-width: 0;
    min-height: 44px;
    padding: 11px 9px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--reading-muted);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none;
  }

  .shell-reading > .topbar.is-module-landing .desktop-module-nav a::after {
    position: absolute;
    right: 9px;
    bottom: 5px;
    left: 9px;
    height: 2px;
    border-radius: 0;
    background: transparent;
    content: "";
  }

  .shell-reading > .topbar.is-module-landing .desktop-module-nav a:hover,
  .shell-reading > .topbar.is-module-landing .desktop-module-nav a:focus-visible,
  .shell-reading > .topbar.is-module-landing .desktop-module-nav a.is-active {
    border: 0;
    background: transparent;
    color: var(--reading-blue);
    outline: 0;
    box-shadow: none;
    transform: none;
  }

  .shell-reading > .topbar.is-module-landing .desktop-module-nav a:focus-visible {
    outline: 2px solid var(--reading-focus);
    outline-offset: 1px;
  }

  .shell-reading > .topbar.is-module-landing .desktop-module-nav a.is-active::after {
    background: var(--reading-blue);
  }

  .reading-pagination-active .shell-reading {
    grid-template-rows: 68px minmax(0, 1fr);
    height: var(--reading-viewport-height, 100dvh);
    max-height: var(--reading-viewport-height, 100dvh);
  }

  .reading-pagination-active .shell-reading.is-readonly {
    grid-template-rows: 68px auto minmax(0, 1fr);
  }

  .shell-reading .reading-reader-layout {
    height: 100%;
  }

  .shell-reading .reading-sidebar-resizer {
    right: -6px;
  }
}

@media (max-width: 1040px) {
  .shell-reading {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0 0 calc(70px + env(safe-area-inset-bottom, 0px));
    background: var(--reading-paper);
  }

  .shell-reading > .topbar.is-module-landing {
    position: sticky;
    top: 0;
    z-index: 78;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    height: 50px;
    min-height: 50px;
    margin: 0;
    padding: 3px 8px 3px 16px;
    border-bottom: 1px solid var(--reading-rule);
    background: rgb(251 250 247 / 98%);
    box-sizing: border-box;
    backdrop-filter: none;
  }

  .shell-reading > .topbar.is-module-landing .topbar-title {
    gap: 6px;
    align-items: center;
  }

  .shell-reading > .topbar.is-module-landing .module-page-title {
    color: var(--reading-ink);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
  }

  .shell-reading > .topbar.is-module-landing .module-page-meta {
    max-width: min(34vw, 136px);
    overflow: hidden;
    color: var(--reading-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell-reading > .topbar.is-module-landing .top-actions.is-mobile-menu,
  .shell-reading > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main {
    gap: 6px;
  }

  .shell-reading > .topbar.is-module-landing .top-actions.is-mobile-menu .top-actions-main .top-action-keep {
    min-height: 44px;
    padding: 0 11px;
    border: 1px solid var(--reading-rule);
    border-radius: 2px;
    background: transparent;
    color: var(--reading-blue);
  }

  .shell-reading > .topbar.is-module-landing .top-actions.is-mobile-menu.is-menu-ready .top-actions-more {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--reading-rule);
    border-radius: 2px;
    background: transparent;
    color: var(--reading-muted);
    font-size: 20px;
  }

  .shell-reading + .module-nav {
    border-top: 1px solid var(--reading-rule);
    background: rgb(251 250 247 / 98%);
    box-shadow: none;
  }

  .shell-reading + .module-nav a,
  .shell-reading + .module-nav a.is-active {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--reading-muted);
    box-shadow: none;
  }

  .shell-reading + .module-nav a.is-active {
    color: var(--reading-blue);
  }

  .shell-reading > .reading-library-page {
    min-height: calc(100vh - 50px);
    padding: 0 16px 42px;
  }

  .shell-reading .reading-library-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 74px;
    padding: 8px 0;
  }

  .shell-reading .reading-library-head h2 {
    font-size: 28px;
    white-space: nowrap;
  }

  .shell-reading .reading-library-count {
    display: none;
  }

  .shell-reading .reading-library-head-actions {
    width: auto;
  }

  .shell-reading .reading-library-action-row {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .shell-reading .reading-library-action-row > .button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 18px;
  }

  .shell-reading .reading-library-action-row > .button span {
    display: none;
  }

  .shell-reading .reading-shelf-list,
  .shell-reading .reading-book-grid,
  .reading-simple-mode .shell-reading .reading-shelf-top,
  .reading-simple-mode .shell-reading .reading-folder-books {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .shell-reading .reading-shelf-folder-head {
    min-height: 54px;
    padding: 5px 0;
  }

  .shell-reading .reading-shelf-folder-actions {
    gap: 4px;
  }

  .shell-reading .reading-shelf-folder-actions .button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .shell-reading .reading-shelf-folder-body {
    padding: 0;
  }

  .shell-reading .reading-book-card {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 15px;
    min-height: 166px;
    padding: 16px 0;
  }

  .shell-reading .reading-book-cover {
    width: 92px;
  }

  .shell-reading .reading-book-copy h2 {
    margin-top: 4px;
    font-size: 19px;
  }

  .shell-reading .reading-book-description,
  .shell-reading .reading-book-meta span:nth-child(2),
  .shell-reading .reading-book-meta span:nth-child(3) {
    display: none;
  }

  .shell-reading .reading-book-actions .button {
    min-height: 44px;
  }

  .reading-simple-mode .shell-reading .reading-book-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    min-height: 60px;
    padding: 5px 0;
  }

  .reading-simple-mode .shell-reading .reading-book-cover {
    width: 38px;
    height: 50px;
  }

  .reading-simple-mode .shell-reading .reading-book-copy {
    gap: 2px 8px;
  }

  .reading-simple-mode .shell-reading .reading-book-copy h2 {
    font-size: 14px;
  }

  .reading-simple-mode .shell-reading .reading-book-meta {
    max-width: 100px;
    font-size: 10px;
  }

  .reading-simple-mode .shell-reading .reading-book-actions {
    gap: 4px;
  }

  .reading-simple-mode .shell-reading .reading-book-actions .button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 0;
  }

  .reading-simple-mode .shell-reading .reading-book-actions .button i {
    font-size: 16px;
  }

  .shell-reading .reading-reader {
    min-height: 0;
  }

  .shell-reading .reading-progress-line {
    top: 50px;
  }

  .shell-reading .reading-reader-layout {
    display: block;
    height: 100%;
  }

  .shell-reading .reading-stage {
    grid-template-rows: 52px minmax(0, 1fr);
    width: 100%;
    height: 100%;
  }

  .shell-reading .reading-stage-toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    min-height: 52px;
    height: 52px;
    margin: 0;
    padding: 4px 8px;
  }

  .shell-reading .reading-directory-trigger,
  .shell-reading .reading-stage-actions .button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .shell-reading .reading-directory-trigger {
    display: inline-flex;
    gap: 0;
    font-size: 0;
  }

  .shell-reading .reading-directory-trigger i {
    font-size: 18px;
  }

  .shell-reading .reading-stage-position {
    justify-content: center;
  }

  .shell-reading .reading-stage-position strong {
    font-size: 14px;
  }

  .shell-reading .reading-stage-actions {
    gap: 2px;
  }

  .shell-reading .reading-stage-actions .button span {
    display: none;
  }

  .shell-reading .reading-paper {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 34px max(16px, calc((100% - var(--reader-content-width)) / 2)) 58px;
    border: 0;
    background: var(--reading-surface);
  }

  .shell-reading .reading-reader.is-paginated .reading-paper {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .shell-reading .reading-reader.is-paginated .reading-page-flow {
    width: min(calc(100% - 32px), var(--reader-content-width));
    padding: 24px 0 12px;
    column-gap: 40px;
  }

  .shell-reading .reading-page-nav {
    min-height: 50px;
    padding: 3px 6px;
  }

  .shell-reading .reading-page-nav .button {
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
  }

  .shell-reading .reading-page-status {
    min-width: 72px;
  }

  .reading-pagination-active .shell-reading {
    grid-template-rows: 50px minmax(0, 1fr);
    width: 100%;
    height: var(--reading-viewport-height, 100dvh);
    max-height: var(--reading-viewport-height, 100dvh);
    padding: 0 0 calc(70px + env(safe-area-inset-bottom, 0px));
  }

  .reading-pagination-active .shell-reading.is-readonly {
    grid-template-rows: 50px auto minmax(0, 1fr);
  }

  .shell-reading .reading-drawer-backdrop {
    background: rgb(21 23 26 / 44%);
    backdrop-filter: none;
  }

  .shell-reading .reading-drawer {
    height: min(82dvh, 760px);
    border-color: var(--reading-rule);
    border-radius: 4px 4px 0 0;
    background: var(--reading-surface);
    box-shadow: 0 -18px 46px rgb(21 23 26 / 18%);
  }

  .shell-reading .reading-drawer > header {
    min-height: 58px;
    padding: 8px 16px;
    border-bottom-color: var(--reading-rule);
  }

  .shell-reading .reading-drawer > header .button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .shell-reading .reading-drawer > header::before {
    display: none;
  }

  .shell-reading .reading-drawer h2 {
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    font-size: 20px;
    font-weight: 500;
  }

  .shell-reading .reading-drawer .reading-sidebar-tabs {
    padding: 0;
  }

  .shell-reading .reading-drawer .reading-sidebar-tabs button {
    min-height: 44px;
  }

  .shell-reading .reading-drawer .reading-sidebar-panel {
    padding: 8px 12px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .shell-reading .reading-drawer .reading-directory a {
    min-height: 44px;
    font-size: 13px;
  }

  .shell-reading .reading-drawer :where(.reading-bookmark-list, .reading-annotation-list) form button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .shell-reading :where(
    .reading-settings-dialog,
    .reading-upload-dialog,
    .reading-annotation-dialog,
    .reading-folder-dialog,
    .reading-book-metadata-dialog
  ) {
    width: 100%;
    max-width: none;
    max-height: var(--app-mobile-overlay-max-height, calc(100dvh - 12px));
    margin: auto 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 4px 4px 0 0;
  }

  .shell-reading :where(
    .reading-settings-card,
    .reading-upload-card,
    .reading-annotation-card,
    .reading-folder-card,
    .reading-book-metadata-card
  ) {
    max-height: var(--app-mobile-overlay-max-height, calc(100dvh - 12px));
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }

  .shell-reading :where(
    .reading-settings-card,
    .reading-upload-card,
    .reading-annotation-card,
    .reading-folder-card,
    .reading-book-metadata-card
  ) > header .button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .shell-reading .reading-settings-card input[type="range"] {
    min-height: 44px;
  }

  .shell-reading .reading-upload-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .shell-reading :where(
    .reading-settings-card footer,
    .reading-upload-card footer,
    .reading-annotation-card footer,
    .reading-folder-card footer,
    .reading-book-metadata-card footer
  ) :where(button, .button) {
    min-height: 44px;
  }

  .shell-reading .reading-selection-toolbar {
    min-height: 44px;
  }

  .shell-reading .reading-save-status {
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 400px) {
  .shell-reading .reading-library-head {
    gap: 8px;
  }

  .shell-reading .reading-library-head h2 {
    font-size: 26px;
  }

  .shell-reading .reading-library-action-row {
    gap: 2px;
  }

  .shell-reading .reading-book-card {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 13px;
  }

  .shell-reading .reading-book-cover {
    width: 84px;
  }

  .shell-reading .reading-stage-count,
  .shell-reading .reading-stage-count-divider,
  .shell-reading .reading-stage-progress-label {
    display: none;
  }

  .shell-reading .reading-stage-position strong {
    max-width: 112px;
  }

  .shell-reading .reading-page-nav .button span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell-reading :where(.button, button),
  .shell-reading .reading-reader.is-paginated .reading-page-flow {
    transition-duration: 0.01ms !important;
  }
}