/* =========================================================================
   Mirroric Desktop — UI Kit local styles
   Token-driven: every value falls back to a CSS var from
   colors_and_type.css. Never hardcode hex here.
   ========================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
button { font: inherit; color: inherit; }

/* ---- App shell ----------------------------------------------------- */

.mirroric-window {
  background: var(--canvas);
  min-height: 100vh;
  width: 100%;
  overflow-x: auto;
}

.mirroric-titlebar {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background: var(--surface-container);
  border-bottom: 1px solid var(--border);
  -webkit-app-region: drag;
}
.mirroric-traffic { display: flex; gap: 8px; }
.mirroric-traffic .tl {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--border);
  display: inline-block;
}
.mirroric-traffic .tl-close { background: #FF5F57; }
.mirroric-traffic .tl-min   { background: #FEBC2E; }
.mirroric-traffic .tl-zoom  { background: #28C840; }

.m-app {
  display: flex;
  min-height: calc(100vh - 36px);
  min-width: 1280px;
  position: relative;
}

.m-divider-v {
  width: 1px;
  background: var(--border);
  flex: none;
}

/* ---- Sidebar ------------------------------------------------------- */

.m-sidebar {
  width: var(--size-sidebar);
  background: var(--surface-dim);
  display: flex;
  flex-direction: column;
  flex: none;
  border-right: 1px solid var(--border);
}

.m-sb-search {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) var(--space-lg);
  padding: 0 var(--space-lg);
  height: 32px;
  background: var(--canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
}
.m-sb-search:focus-within { border-color: var(--accent); }
.m-sb-search__input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: 0;
  font: 400 var(--type-ui-small-size)/1.4 var(--font-sans);
  color: var(--text-primary);
}
.m-sb-search__input::placeholder { color: var(--text-subtle); }

.m-sb-scroll,
.m-sidebar__scroll {
  flex: 1;
  overflow: auto;
  padding-bottom: var(--space-md);
}

.m-sb-group-header {
  padding: var(--space-lg) var(--space-2xl) var(--space-xxs);
  font: 600 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  color: var(--text-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.m-sb-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  background: transparent;
  border: 0;
  padding: var(--space-md) var(--space-2xl);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  border-radius: 0;
}
.m-sb-row:hover { background: var(--hover); }
.m-sb-row__title {
  font: var(--type-ui-medium-weight) var(--type-ui-size)/var(--type-ui-line) var(--font-sans);
  color: var(--text-primary);
}
.m-sb-row__spacer { flex: 1; }

.m-sb-section { padding-bottom: var(--space-sm); }
.m-sb-section--padded { padding: 0 var(--space-sm) var(--space-sm); }

.m-sb-subhead {
  padding: var(--space-xxs) var(--space-2xl);
  font: 600 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  color: var(--text-subtle);
  letter-spacing: 0.8px;
}

.m-sb-tags {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-sm);
  gap: 1px;
}
.m-sb-tag {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  width: 100%;
  border-radius: var(--radius-medium);
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  text-align: left;
}
.m-sb-tag:hover { background: var(--hover); }
.m-sb-tag.is-selected { background: var(--selected); color: var(--text-primary); font-weight: 600; }
.m-sb-tag.is-selected .m-dot { background: var(--accent); }
.m-sb-tag__label { flex: 1; font: 400 var(--type-ui-size)/var(--type-ui-line) var(--font-sans); }
.m-sb-tag.is-selected .m-sb-tag__label { font-weight: 600; }
.m-sb-tag__count { font: 400 var(--type-ui-small-size)/1.4 var(--font-sans); color: var(--text-subtle); }

.m-sb-leaf {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  background: transparent;
  border: 0;
  padding: var(--space-xs) var(--space-lg);
  color: var(--text-secondary);
  text-align: left;
  border-radius: var(--radius-medium);
  cursor: pointer;
}
.m-sb-leaf:hover { background: var(--hover); }
.m-sb-leaf.is-selected { background: var(--selected); }
.m-sb-leaf.is-selected .m-sb-leaf__title { color: var(--accent); }
.m-sb-leaf__meta { display: flex; flex-direction: column; min-width: 0; }
.m-sb-leaf__title { font: var(--type-ui-medium-weight) var(--type-ui-small-size)/1.4 var(--font-sans); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-sb-leaf__sub   { font: 400 var(--type-ui-tiny-size)/1.3 var(--font-sans); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.m-sb-session {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  background: transparent;
  border: 0;
  padding: var(--space-xs) var(--space-lg);
  text-align: left;
  border-radius: var(--radius-medium);
  cursor: pointer;
}
.m-sb-session:hover { background: var(--hover); }

.m-sb-add {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: var(--radius-small);
  color: var(--text-subtle);
}
.m-sb-add:hover { background: var(--selected); color: var(--text-secondary); }

.m-sb-user {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-2xl);
  border-top: 1px solid var(--border);
  background: var(--surface-container);
}
.m-sb-user__meta { flex: 1; min-width: 0; }
.m-sb-user__name { font: 600 var(--type-ui-size)/1.3 var(--font-sans); color: var(--text-primary); }
.m-sb-user__sub  { font: 400 var(--type-ui-tiny-size)/1.3 var(--font-sans); color: var(--text-muted); }

.m-sb-profile {
  display: flex; align-items: center; gap: var(--space-lg); width: 100%;
  padding: var(--space-lg) var(--space-2xl); border: 0; border-top: 1px solid var(--border);
  background: var(--surface-dim); color: var(--text-primary); text-align: left; cursor: pointer;
}
.m-sb-profile:hover { background: var(--hover); }
.m-sb-profile__avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--surface-container); color: var(--text-muted); }
.m-sb-profile__copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.m-sb-profile__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--type-ui-semibold-weight) var(--type-ui-size)/1.3 var(--font-sans); }
.m-sb-profile__subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font: 400 var(--type-ui-tiny-size)/1.3 var(--font-sans); }
.m-sb-profile__go { color: var(--text-subtle); }

/* ---- Avatars ------------------------------------------------------- */

.m-avatar {
  width: var(--size-avatar-md); height: var(--size-avatar-md);
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  flex: none;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 var(--type-ui-small-size)/1 var(--font-serif);
}
.m-avatar--user { background: var(--accent-warm); }
.m-avatar--brand { background: var(--surface-container-high); color: var(--accent); border: 1px solid var(--border-input); width: 36px; height: 36px; }

/* ---- Buttons ------------------------------------------------------- */

.m-icon-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: var(--size-icon-button); height: var(--size-icon-button);
  background: transparent;
  border: 0;
  border-radius: var(--radius-medium);
  color: var(--text-secondary);
  cursor: pointer;
  flex: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.m-icon-btn:hover { background: var(--hover); color: var(--text-primary); }
.m-icon-btn--ghost { width: 24px; height: 24px; }

.m-btn { white-space: nowrap; }
.m-btn--primary .m-icon { color: var(--on-accent); }

/* ---- Main panel (library) ----------------------------------------- */

.m-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  min-width: 0;
}
.m-main__head {
  display: flex;
  align-items: center;
  padding: var(--space-4xl) var(--space-5xl) var(--space-3xl);
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--space-2xl);
}
.m-main__head-l { flex: 1; min-width: 0; }
.m-main__head-r { display: flex; gap: var(--space-sm); }
.m-main__title {
  font: 700 28px/1.2 var(--font-serif);
  color: var(--text-primary);
  margin-bottom: 4px;
}
.m-main__sub  {
  font: 400 var(--type-ui-small-size)/1.4 var(--font-sans);
  color: var(--text-muted);
}

.m-novel-grid {
  padding: var(--space-4xl) var(--space-5xl);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3xl);
  align-content: start;
  overflow: auto;
  flex: 1;
}

/* ---- Novel card ---------------------------------------------------- */

.m-novel-card {
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-large);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
  outline: 0;
}
.m-novel-card:hover {
  background: var(--surface-container-high);
  border-color: var(--accent);
}

.m-cover {
  position: relative;
  aspect-ratio: 8 / 5;
  display: flex;
  align-items: flex-end;
  padding: var(--space-2xl);
  overflow: hidden;
}
.m-cover__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.m-cover__title {
  position: relative;
  z-index: 1;
  color: var(--canvas);
  text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.m-cover__title-en {
  font: 700 22px/1.2 var(--font-serif);
  letter-spacing: -0.01em;
}

.m-novel-card__body { padding: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; }
.m-novel-card__head { display: flex; align-items: flex-start; gap: var(--space-sm); }
.m-novel-card__title { font: 700 18px/1.3 var(--font-serif); color: var(--text-primary); margin: 0; flex: 1; }
.m-novel-card__sub   { font: italic 400 var(--type-ui-small-size)/1.4 var(--font-serif); color: var(--text-muted); }
.m-novel-card__desc  {
  font: 400 var(--type-body-small-size)/1.55 var(--font-serif);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-novel-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.m-novel-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
  font: 400 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  color: var(--text-muted);
}
.m-novel-card__foot span { display: inline-flex; align-items: center; gap: 4px; }
.m-novel-card__foot-spacer { flex: 1; }

.m-novel-card--empty {
  background: var(--surface-dim);
  border: 1px dashed var(--border-input);
  color: var(--text-muted);
  align-items: center; justify-content: center;
}
.m-novel-card__empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-4xl);
  text-align: center;
}
.m-novel-card__empty-title { font: 600 var(--type-ui-size)/1.4 var(--font-sans); color: var(--text-secondary); }
.m-novel-card__empty-sub { font: 400 var(--type-ui-small-size)/1.5 var(--font-sans); color: var(--text-muted); }

/* ---- Tags / chips / pills ----------------------------------------- */

.m-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-small);
  background: var(--surface-container-high);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font: 500 var(--type-ui-tiny-size)/1.4 var(--font-sans);
}

.m-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-container-high);
  border: 1px solid var(--border-input);
  color: var(--text-secondary);
  font: 500 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  cursor: pointer;
}
.m-chip--brass {
  background: rgba(196, 149, 106, 0.12);
  border-color: var(--accent);
  color: var(--accent-warm);
}

.m-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-medium);
  font: 500 var(--type-ui-tiny-size)/1.3 var(--font-sans);
}
.m-pill--ok    { background: var(--addition-bg); color: var(--addition-border); }
.m-pill--warn  { background: var(--warning-bg); color: var(--warning-text); }

/* ---- Home: greeting + featured hero + all-works -------------------- */
/* Mirrors lib/desktop/widgets/novel_list.dart — the whole column scrolls
   together (greeting → featured hero → all-works header → grid). */

.m-home {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-4xl) var(--space-5xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.m-home-greet { display: flex; align-items: center; gap: var(--space-2xl); }
.m-home-greet__l { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-sm); }
.m-home-greet__title {
  font: 700 26px/1.2 var(--font-serif);
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-home-greet__r { display: flex; gap: var(--space-sm); flex: none; }

/* Featured / hero card */
.m-hero {
  display: flex;
  gap: var(--space-4xl);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: var(--space-4xl);
}
.m-hero__cover {
  position: relative;
  width: 200px; flex: none;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-large);
  overflow: hidden;
  display: flex;
}
.m-hero__cover svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-hero__badge {
  position: absolute; top: var(--space-md); left: var(--space-md);
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  border-radius: var(--radius-small);
  background: rgba(254, 253, 251, 0.92);
  font: 600 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  color: var(--accent-amber);
}
.m-hero__body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: var(--space-sm) 0; }
.m-hero__title { font: 700 26px/1.2 var(--font-serif); color: var(--text-primary); }
.m-hero__meta { margin-top: var(--space-md); font: 400 var(--type-ui-size)/1.4 var(--font-sans); color: var(--text-muted); }
.m-hero__desc {
  margin-top: var(--space-2xl);
  font: 400 var(--type-body-small-size)/1.6 var(--font-serif);
  color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.m-hero__tags { margin-top: var(--space-2xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.m-soft-tag {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: var(--radius-pill);
  background: rgba(196, 149, 106, 0.1);
  color: var(--accent);
  font: 400 var(--type-ui-small-size)/1.4 var(--font-sans);
}
.m-hero__foot { margin-top: auto; padding-top: var(--space-2xl); display: flex; align-items: center; gap: var(--space-md); }
.m-hero__count { font: 600 14px/1 var(--font-sans); color: var(--text-secondary); }
.m-hero__foot-spacer { flex: 1; }
.m-status { display: inline-flex; align-items: center; width: fit-content; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--surface-dim); color: var(--text-muted); font: 600 var(--type-ui-tiny-size)/1.3 var(--font-sans); white-space: nowrap; }
.m-status--writing { background: rgba(196, 149, 106, .12); color: var(--accent); }
.m-status--completed { background: var(--addition-bg); color: var(--addition-border); }
.m-home-announcement { display: flex; align-items: center; gap: var(--space-sm); margin: 0 var(--space-5xl) var(--space-3xl); padding: var(--space-lg) var(--space-2xl); width: calc(100% - var(--space-5xl) * 2); text-align: left; background: var(--surface-container); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); color: var(--text-secondary); cursor: pointer; font: 400 var(--type-ui-small-size)/1.4 var(--font-sans); }
.m-home-announcement:hover { background: var(--surface-container-high); border-color: var(--accent); }
.m-home-announcement__title { color: var(--text-primary); font-weight: 600; flex: none; }
.m-home-announcement__detail { color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* All-works header — label + status filter chips + sort + view toggle */
.m-allworks { display: flex; align-items: center; gap: var(--space-2xl); }
.m-allworks__label { font: 600 var(--type-ui-size)/1 var(--font-sans); color: var(--text-secondary); flex: none; }
.m-allworks__chips { flex: 1; display: flex; gap: var(--space-sm); overflow: auto; }
.m-allworks__tools { display: flex; gap: var(--space-sm); flex: none; }
.m-fchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px; border-radius: var(--radius-pill);
  background: transparent; border: 0; color: var(--text-secondary);
  font: 400 var(--type-ui-size)/1 var(--font-sans); cursor: pointer; white-space: nowrap;
}
.m-fchip.is-selected { background: rgba(196, 149, 106, 0.12); color: var(--accent); font-weight: 600; }
.m-fchip__count { font-size: var(--type-ui-small-size); opacity: 0.7; }
.m-tool {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: var(--radius-medium);
  background: var(--surface); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); font: 400 var(--type-ui-small-size)/1 var(--font-sans); cursor: pointer;
}
.m-vtoggle { display: inline-flex; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium); }
.m-vtoggle button { display: inline-flex; align-items: center; padding: 5px 8px; background: transparent; border: 0; border-radius: var(--radius-medium); color: var(--text-subtle); cursor: pointer; }
.m-vtoggle button.is-active { background: rgba(196, 149, 106, 0.12); color: var(--accent); }

.m-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3xl);
}

.m-home-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.m-row {
  display: flex; align-items: center; gap: var(--space-lg);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-large);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.m-row:hover { background: var(--surface-container-high); border-color: var(--accent); }
.m-row__cover { width: 48px; height: 64px; border-radius: var(--radius-medium); flex: none; }
.m-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-row__title { font: 600 var(--type-ui-size)/1.3 var(--font-sans); color: var(--text-primary); }
.m-row__meta { font: 400 var(--type-ui-small-size)/1.3 var(--font-sans); color: var(--text-muted); }

/* ---- Right rail ---------------------------------------------------- */

.m-right {
  width: var(--size-sidebar);
  background: var(--surface-dim);
  flex: none;
  overflow: auto;
}
.m-right__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding: var(--space-2xl);
}

/* Today goal card — mirrors _TodayGoalCard */
.m-goal {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface-container-high);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-large);
  padding: var(--space-2xl);
}
.m-goal__head { display: flex; align-items: center; gap: var(--space-sm); }
.m-goal__title { flex: 1; font: 600 var(--type-ui-size)/1.3 var(--font-sans); color: var(--text-primary); }
.m-goal__edit {
  display: inline-flex; align-items: center; gap: 3px;
  border: 0; background: transparent; cursor: pointer; padding: 2px 4px;
  font: 400 var(--type-ui-tiny-size)/1 var(--font-sans); color: var(--text-muted);
}
.m-goal__edit:hover { color: var(--text-secondary); }
.m-goal__row { display: flex; align-items: center; gap: var(--space-lg); margin-top: var(--space-2xl); }
.m-goal__ring { position: relative; width: 72px; height: 72px; flex: none; }
.m-goal__ring-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 600 var(--type-ui-small-size)/1 var(--font-sans); color: var(--text-primary);
}
.m-goal__stat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-goal__stat-label { font: 400 var(--type-ui-tiny-size)/1 var(--font-sans); color: var(--text-muted); }
.m-goal__stat-words { font: 700 var(--type-heading-size)/1.1 var(--font-serif); color: var(--accent-warm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-goal__stat-goal { font: 600 var(--type-ui-small-size)/1 var(--font-sans); color: var(--text-muted); }
.m-goal__stat-forecast { font: 400 var(--type-ui-tiny-size)/1 var(--font-sans); color: var(--text-muted); }
.m-goal__focus { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-2xl); color: var(--text-secondary); font: 400 var(--type-ui-small-size)/1 var(--font-sans); }
.m-goal__motivation { margin: var(--space-md) 0 0; font: 400 var(--type-ui-small-size)/1.5 var(--font-sans); color: var(--text-muted); }
.m-goal__start { margin-top: var(--space-md); width: 100%; }
.m-goal__motif { position: absolute; right: 0; bottom: 0; width: 96px; height: 56px; pointer-events: none; }
.m-btn--warm { background: var(--accent-warm); color: var(--on-accent); }
.m-btn--warm:hover { background: var(--accent); }

/* Tasks / tips rail cards — mirror _RailCard wrapping TasksPanel / TipsPanel */
.m-railcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-container-high);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-large);
}
.m-railcard--tasks { height: 260px; }
.m-railcard--tips { height: 300px; }
.m-railcard__head { display: flex; align-items: center; gap: var(--space-xs); height: 44px; flex: none; padding: 0 var(--space-2xl); }
.m-railcard__title { font: 600 var(--type-ui-small-size)/1 var(--font-sans); color: var(--text-secondary); }
.m-railcard__count { padding: 1px 6px; border-radius: var(--radius-small); background: var(--surface-dim); font: 400 var(--type-ui-tiny-size)/1.4 var(--font-sans); color: var(--text-tertiary); }
.m-railcard__spacer { flex: 1; }
.m-railcard__icon { display: inline-flex; padding: 3px; border: 0; background: transparent; cursor: pointer; color: var(--text-muted); border-radius: var(--radius-small); }
.m-railcard__icon:hover { background: var(--hover); }
.m-railcard__action { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; border: 0; background: transparent; cursor: pointer; font: 400 var(--type-ui-tiny-size)/1 var(--font-sans); color: var(--accent); }
.m-railcard__action--muted { color: var(--text-muted); }
.m-railcard__list { flex: 1; overflow: auto; padding: var(--space-xs) var(--space-lg); }
.m-railcard__more { padding: var(--space-xs) var(--space-2xl) var(--space-md); border: 0; background: transparent; cursor: pointer; text-align: center; font: 400 var(--type-ui-tiny-size)/1 var(--font-sans); color: var(--text-muted); }
.m-railcard__more:hover { color: var(--text-secondary); }

/* Task tile — mirrors _TaskTile */
.m-task { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-medium); }
.m-task:hover { background: var(--hover); }
.m-task__box {
  width: 16px; height: 16px; flex: none; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--text-tertiary); border-radius: 3px; background: var(--surface-dim);
}
.m-task__box.is-doing { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.m-task__box.is-doing::after { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--accent); }
.m-task__box.is-closed { background: var(--accent); border-color: var(--accent); }
.m-task__meta { flex: 1; min-width: 0; }
.m-task__name-row { display: flex; align-items: center; gap: var(--space-xs); }
.m-task__name { font: 400 var(--type-ui-small-size)/1.3 var(--font-sans); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-task__name.is-closed { color: var(--text-tertiary); text-decoration: line-through; }
.m-task__doing-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent); }
.m-task__desc { margin-top: 1px; font: 400 var(--type-ui-tiny-size)/1.35 var(--font-sans); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tip row — mirrors _TipCard */
.m-tip { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm) 0; }
.m-tip__icon { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-small); }
.m-tip__text { flex: 1; min-width: 0; margin: 0; font: 400 var(--type-ui-small-size)/1.4 var(--font-sans); color: var(--text-primary); }
.m-tip__check { flex: none; display: inline-flex; padding: 2px; border: 0; background: transparent; cursor: pointer; color: var(--text-tertiary); }
.m-tip__check:hover { color: var(--accent); }

/* ---- Composer (chat + rail) --------------------------------------- */

.m-composer {
  margin: var(--space-lg);
  background: var(--surface-container-high);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-2xl);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.m-composer--rail { margin: 0 var(--space-2xl) var(--space-2xl); }
.m-composer__field { display: flex; }
.m-composer__input {
  width: 100%;
  border: 0;
  background: transparent;
  resize: none;
  outline: 0;
  font: 400 var(--type-ui-size)/1.55 var(--font-serif);
  color: var(--text-primary);
}
.m-composer__input::placeholder { color: var(--text-subtle); }
.m-composer__toolbar { display: flex; align-items: center; gap: var(--space-sm); }
.m-composer__tools { display: flex; gap: 2px; flex: 1; }
.m-composer__slash {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-small);
  font: 500 var(--type-ui-tiny-size)/1.4 var(--font-sans);
  align-self: flex-start;
}

/* ---- Editor view --------------------------------------------------- */

.m-editor-page {
  display: flex;
  flex: 1;
  width: 100%;
  min-height: 0;
}

/* ---- Entity graph -------------------------------------------------- */

.eg-page { display: flex; flex: 1; min-width: 0; min-height: 0; background: var(--canvas); }
.eg-rail { width: 250px; display: flex; flex: none; flex-direction: column; min-height: 0; background: var(--surface-dim); border-right: 1px solid var(--border); }
.eg-rail__head { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-2xl); border-bottom: 1px solid var(--border-subtle); }
.eg-rail__title { font: 600 var(--type-ui-size)/1.35 var(--font-sans); color: var(--text-primary); }
.eg-rail__sub { margin-top: 2px; font: 400 var(--type-ui-tiny-size)/1.3 var(--font-sans); color: var(--text-muted); }
.eg-search { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-lg); padding: 0 var(--space-sm); height: 32px; background: var(--canvas); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); color: var(--text-muted); }
.eg-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: 400 var(--type-ui-small-size)/1.3 var(--font-sans); }
.eg-search input::placeholder { color: var(--text-subtle); }
.eg-search button { display: inline-flex; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.eg-type-filters { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 var(--space-lg) var(--space-lg); }
.eg-type { display: inline-flex; align-items: center; gap: 3px; padding: 4px 7px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); cursor: pointer; font: 400 var(--type-ui-tiny-size)/1 var(--font-sans); }
.eg-type span { color: var(--text-subtle); }
.eg-type.is-on { background: var(--selected); border-color: transparent; color: var(--text-primary); }
.eg-type--all.is-on { color: var(--accent); }
.eg-entity-list { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--space-sm) var(--space-lg); }
.eg-entity-group { margin-top: var(--space-sm); }
.eg-entity-group__label { padding: var(--space-xs) var(--space-sm); color: var(--text-muted); font: 600 var(--type-ui-tiny-size)/1.3 var(--font-sans); }
.eg-entity-row { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: 7px var(--space-sm); border: 0; border-radius: var(--radius-medium); background: transparent; color: var(--text-secondary); text-align: left; cursor: pointer; font: 400 var(--type-ui-small-size)/1.3 var(--font-sans); }
.eg-entity-row:hover, .eg-entity-row.is-active { background: var(--selected); color: var(--text-primary); }
.eg-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--text-muted); }
.eg-dot--character { background: var(--accent); }.eg-dot--faction { background: var(--warning-text); }.eg-dot--skill { background: var(--addition-border); }.eg-dot--item { background: var(--text-secondary); }.eg-dot--location { background: var(--accent-amber); }.eg-dot--creature { background: var(--accent-warm); }
.eg-empty { padding: var(--space-2xl); color: var(--text-muted); text-align: center; font: 400 var(--type-ui-small-size)/1.4 var(--font-sans); }
.eg-main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.eg-main__head { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-2xl) var(--space-3xl); border-bottom: 1px solid var(--border-subtle); }
.eg-main__head > div { flex: 1; }.eg-main__head h1 { margin: 0; color: var(--text-primary); font: 700 22px/1.2 var(--font-serif); }.eg-main__head p { margin: 4px 0 0; color: var(--text-muted); font: 400 var(--type-ui-small-size)/1.3 var(--font-sans); }
.eg-reset { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-medium); background: var(--surface); color: var(--text-secondary); cursor: pointer; font: 400 var(--type-ui-small-size)/1 var(--font-sans); }
.eg-reset:hover { background: var(--hover); }
.eg-canvas { position: relative; flex: 1; min-height: 480px; overflow: hidden; background-image: radial-gradient(circle at 1px 1px, var(--border-subtle) 1px, transparent 0); background-size: 20px 20px; }
.eg-edges { position: absolute; inset: 8% 6%; width: 88%; height: 84%; overflow: visible; }.eg-edges line { stroke: var(--border-input); stroke-width: .36; }.eg-edges g.is-active line { stroke: var(--accent); stroke-width: .56; }.eg-edges text { fill: var(--text-subtle); font: 2.4px var(--font-sans); text-anchor: middle; paint-order: stroke; stroke: var(--canvas); stroke-width: .9px; }.eg-edges g.is-active text { fill: var(--accent); }
.eg-node { position: absolute; z-index: 1; display: flex; align-items: center; gap: 5px; transform: translate(-50%, -50%); padding: 5px 8px 5px 5px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-secondary); cursor: pointer; font: 500 var(--type-ui-small-size)/1 var(--font-sans); }.eg-node:hover, .eg-node.is-active { border-color: var(--accent); color: var(--text-primary); }.eg-node.is-active { background: var(--selected); }.eg-node__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-container); color: var(--accent); }.eg-node__name { white-space: nowrap; }
.eg-inspector { width: 250px; flex: none; padding: var(--space-3xl) var(--space-2xl); background: var(--surface-dim); border-left: 1px solid var(--border); overflow: auto; }.eg-inspector__avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--surface); }.eg-inspector__type { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-lg); color: var(--text-muted); font: 500 var(--type-ui-tiny-size)/1 var(--font-sans); }.eg-inspector h2 { margin: var(--space-sm) 0 2px; color: var(--text-primary); font: 700 22px/1.2 var(--font-serif); }.eg-inspector__en { color: var(--text-muted); font: italic 400 var(--type-ui-small-size)/1.4 var(--font-serif); }.eg-inspector p { color: var(--text-secondary); font: 400 var(--type-ui-small-size)/1.6 var(--font-sans); }.eg-inspector__section { display: flex; justify-content: space-between; margin-top: var(--space-3xl); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); font: 600 var(--type-ui-small-size)/1.3 var(--font-sans); }.eg-inspector__section span { color: var(--text-muted); }.eg-relation-list { display: flex; flex-direction: column; margin-top: var(--space-sm); }.eg-relation-list button { display: flex; align-items: center; gap: 6px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; color: var(--text-muted); cursor: pointer; text-align: left; font: 400 var(--type-ui-tiny-size)/1.3 var(--font-sans); }.eg-relation-list button:hover { color: var(--accent); }.eg-relation-list strong { flex: 1; color: var(--text-secondary); font-weight: 500; }

.m-editor-rail {
  width: var(--size-editor-sidebar);
  flex: none;
  background: var(--surface-dim);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.m-editor-rail__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xl) var(--space-2xl) var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}
.m-editor-rail__title { min-width: 0; }
.m-editor-rail__tabs {
  display: flex;
  padding: var(--space-sm);
  gap: 2px;
  border-bottom: 1px solid var(--border-subtle);
  overflow: auto;
}
.m-editor-rail__tab {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-medium);
  color: var(--text-muted);
  cursor: pointer;
  font: 500 var(--type-ui-tiny-size)/1.3 var(--font-sans);
}
.m-editor-rail__tab:hover { background: var(--hover); color: var(--text-secondary); }
.m-editor-rail__tab.is-active { background: var(--selected); color: var(--text-primary); }
.m-editor-rail__foot {
  display: flex; align-items: center; gap: var(--space-xxs);
  padding: var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--border);
  background: var(--surface-container);
}
.m-editor-rail__foot-spacer { flex: 1; }

/* ---- Chapter tree -------------------------------------------------- */

.m-tree { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.m-tree__head { display: flex; align-items: center; padding: var(--space-md) var(--space-2xl) var(--space-xs); }
.m-tree__head-actions { margin-left: auto; display: flex; gap: 2px; }
.m-tree__scroll { flex: 1; overflow: auto; padding-bottom: var(--space-md); }
.m-tree__vol { padding-bottom: var(--space-sm); }
.m-tree__vol-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 6px var(--space-2xl);
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font: 600 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  color: var(--text-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.m-tree__vol-list { display: flex; flex-direction: column; padding: 0 var(--space-sm); }
.m-tree__chapter {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-medium);
  background: transparent; border: 0; cursor: pointer; text-align: left;
  color: var(--text-secondary);
}
.m-tree__chapter:hover { background: var(--hover); }
.m-tree__chapter.is-active { background: var(--selected); color: var(--text-primary); }
.m-tree__chapter-num {
  width: 22px;
  font: 600 var(--type-ui-tiny-size)/1 var(--font-mono);
  color: var(--text-subtle);
}
.m-tree__chapter.is-active .m-tree__chapter-num { color: var(--accent); }
.m-tree__chapter-title {
  flex: 1;
  font: 400 var(--type-ui-size)/1.4 var(--font-serif);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-tree__chapter.is-active .m-tree__chapter-title { font-weight: 600; }

.m-tree__sep { height: 1px; background: var(--border-subtle); margin: var(--space-md) var(--space-2xl); }
.m-tree__world { padding: 0 var(--space-sm); display: flex; flex-direction: column; gap: 2px; }
.m-tree__world > .m-ui-tiny-section { padding: 4px var(--space-lg); }
.m-tree__world-row {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-medium);
  background: transparent; border: 0; cursor: pointer; text-align: left;
  color: var(--text-secondary);
  font: 400 var(--type-ui-size)/1.4 var(--font-serif);
}
.m-tree__world-row:hover { background: var(--hover); }

/* ---- State chips on chapters -------------------------------------- */

.m-state {
  display: inline-flex; align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius-small);
  background: var(--surface-container);
  color: var(--text-muted);
  font: 500 10px/1.3 var(--font-sans);
  border: 1px solid var(--border-subtle);
}
.m-state--已定稿 { background: var(--addition-bg); color: var(--addition-border); border-color: var(--addition-border); }
.m-state--已润色 { background: rgba(196,149,106,0.12); color: var(--accent-warm); border-color: var(--accent); }
.m-state--草稿   { background: var(--surface-container-high); color: var(--text-secondary); }
.m-state--大纲   { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-text); }
.m-state--未开始 { background: transparent; color: var(--text-subtle); border-style: dashed; }

/* ---- Manuscript editor -------------------------------------------- */

.m-editor {
  flex: 1;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.m-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-container);
}
.m-toolbar__sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }
.m-toolbar__spacer { flex: 1; }

.m-editor__scroll { flex: 1; overflow: auto; }
.m-editor__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px var(--editor-padding-h) 96px;
}

.m-editor__meta {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-muted);
  margin-bottom: var(--space-2xl);
}

.m-editor__title {
  font: 700 36px/1.2 var(--font-serif);
  color: var(--text-primary);
  margin: 0 0 var(--space-2xl);
  outline: 0;
}

.m-editor__summary {
  margin-bottom: var(--space-4xl);
  padding: var(--space-lg) var(--space-3xl);
  background: var(--surface-container-high);
  border-radius: var(--radius-large);
  border-left: 3px solid var(--blockquote-border);
  font: italic 400 var(--type-body-size)/var(--type-body-line) var(--font-serif);
  color: var(--text-secondary);
}

.m-editor__body p {
  margin: 0 0 1.2em;
  font: 400 var(--type-body-size)/var(--type-body-line) var(--font-serif);
  color: var(--text-primary);
  text-indent: 2em;
  text-wrap: pretty;
}

.m-editor__notes {
  margin-top: var(--space-5xl);
  padding: var(--space-3xl);
  background: var(--surface-dim);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-large);
}
.m-editor__notes .m-ui-tiny-section { margin-bottom: var(--space-sm); }

.m-editor__statusbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px var(--space-3xl);
  border-top: 1px solid var(--border);
  background: var(--surface-container);
  font: 400 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  color: var(--text-muted);
}
.m-editor__statusbar-spacer { flex: 1; }
.m-editor__statusbar span { display: inline-flex; align-items: center; gap: 4px; }

/* ---- Chat panel ---------------------------------------------------- */

.m-chat {
  width: var(--size-chat-panel);
  flex: none;
  background: var(--surface-container-high);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.m-chat__head {
  display: flex; align-items: center;
  padding: var(--space-md) var(--space-2xl);
  border-bottom: 1px solid var(--border);
  background: var(--surface-container);
  gap: var(--space-sm);
}
.m-chat__head-l { display: flex; align-items: center; gap: var(--space-sm); flex: 1; }
.m-chat__head-r { display: flex; align-items: center; gap: 2px; }
.m-chat__context {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 6px var(--space-2xl);
  background: var(--surface-dim);
  border-bottom: 1px solid var(--border-subtle);
  font: 400 var(--type-ui-tiny-size)/1.4 var(--font-sans);
  color: var(--text-muted);
}
.m-chat__scroll {
  flex: 1; overflow: auto;
  padding: var(--space-2xl);
  display: flex; flex-direction: column; gap: var(--space-3xl);
}

.m-bubble { display: flex; gap: var(--space-sm); max-width: 100%; }
.m-bubble--user { justify-content: flex-end; }
.m-bubble--user .m-bubble__content {
  background: var(--surface);
  border: 1px solid var(--border-input);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--size-chat-bubble-r);
  max-width: 85%;
  font: 400 var(--type-body-small-size)/1.55 var(--font-serif);
  color: var(--text-primary);
}
.m-bubble--ai { align-items: flex-start; }
.m-bubble__avatar {
  width: var(--size-avatar-md); height: var(--size-avatar-md);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(196,149,106,0.18);
  color: var(--accent-warm);
  flex: none;
}
.m-bubble__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.m-bubble--ai .m-bubble__content {
  font: 400 var(--type-body-small-size)/1.65 var(--font-serif);
  color: var(--text-primary);
}
.m-bubble__ref {
  display: flex; align-items: flex-start; gap: 6px;
  padding: var(--space-sm);
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-medium);
  font: 400 var(--type-ui-tiny-size)/1.4 var(--font-sans);
  color: var(--text-muted);
}
.m-bubble__actions { display: flex; gap: 2px; margin-top: 4px; }

.m-chat-fab {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-overlay);
}

/* ---- Dialog -------------------------------------------------------- */

.m-dialog-scrim {
  position: fixed; inset: 0;
  background: rgba(44, 36, 24, 0.32);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.m-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-dialog);
  max-width: 880px;
  width: calc(100% - 64px);
  max-height: calc(100% - 64px);
  display: flex; flex-direction: column;
}
.m-dialog--settings { height: 640px; }
.m-dialog__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3xl) var(--space-4xl) var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}
.m-dialog__body { display: flex; flex: 1; min-height: 0; }

.m-settings-nav {
  width: 200px;
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-lg) var(--space-sm);
  display: flex; flex-direction: column; gap: 2px;
}
.m-settings-nav__row {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: transparent; border: 0; border-radius: var(--radius-medium);
  cursor: pointer; text-align: left;
  color: var(--text-secondary);
  font: var(--type-ui-medium-weight) var(--type-ui-size)/var(--type-ui-line) var(--font-sans);
}
.m-settings-nav__row:hover { background: var(--hover); }
.m-settings-nav__row.is-selected { background: var(--selected); color: var(--text-primary); }

.m-settings-panel {
  flex: 1; padding: var(--space-4xl); overflow: auto;
}

.m-form { display: flex; flex-direction: column; gap: var(--space-2xl); }

.m-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
.m-theme-card {
  display: flex; align-items: center; gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--surface-container-high);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-large);
  cursor: pointer; text-align: left;
}
.m-theme-card:hover { background: var(--hover); }
.m-theme-card.is-active { border-color: var(--accent); background: var(--selected); }
.m-theme-card__swatch { width: 28px; height: 28px; border-radius: 50%; flex: none; border: 1px solid var(--border); }
.m-theme-card__meta { flex: 1; }

.m-segmented {
  display: inline-flex;
  background: var(--surface-dim);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-large);
  padding: 2px;
}
.m-segmented__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--radius-medium);
  color: var(--text-secondary);
  font: 500 var(--type-ui-size)/1 var(--font-sans);
}
.m-segmented__item.is-active { background: var(--surface); box-shadow: 0 0 0 1px var(--border-input); color: var(--text-primary); }

.m-bg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
.m-bg-tile {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-medium);
  overflow: hidden;
  cursor: pointer;
  padding: 0; background: transparent;
}
.m-bg-tile.is-active { border-color: var(--accent); }
.m-bg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.m-provider-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.m-provider-row {
  display: flex; align-items: center;
  padding: var(--space-lg);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-large);
  background: var(--surface);
  gap: var(--space-lg);
}
.m-provider-row__l { display: flex; align-items: center; gap: var(--space-lg); flex: 1; }
.m-provider-row__r { display: flex; align-items: center; gap: var(--space-sm); }

/* ---- NavRail (editor leftmost) ------------------------------------ */

.m-navrail {
  /* Real editor rail width: _leftSidebarRailWidth = 132 (lib/desktop/widgets/sidebar/sidebar.dart). */
  width: 132px;
  flex: none;
  background: var(--surface-dim);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.m-navrail__scroll {
  flex: 1;
  overflow: auto;
  padding: var(--space-lg) var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.m-navrail__sec { display: flex; flex-direction: column; gap: 1px; }
.m-navrail__sec-label {
  padding: var(--space-sm) var(--space-md) var(--space-xxs);
  font: 600 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.m-navrail__sec-items { display: flex; flex-direction: column; gap: 1px; }
.m-navrail__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border: 0;
  background: transparent;
  border-radius: var(--radius-medium);
  cursor: pointer;
  text-align: left;
  color: var(--text-secondary);
  font: var(--type-ui-weight) var(--type-ui-size)/var(--type-ui-line) var(--font-sans);
  width: 100%;
}
.m-navrail__row:hover { background: var(--hover); color: var(--text-primary); }
.m-navrail__row.is-active {
  background: var(--selected);
  color: var(--text-primary);
  font-weight: var(--type-ui-medium-weight);
}
.m-navrail__row.is-active svg { color: var(--accent); }
.m-navrail__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-container-high);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-large);
  cursor: pointer;
  color: var(--text-primary);
  font: var(--type-ui-medium-weight) var(--type-ui-size)/1.2 var(--font-sans);
}
.m-navrail__brand:hover { background: var(--hover); border-color: var(--border-input); }
.m-navrail__brand-name { flex: 1; text-align: left; }

/* ---- ContextPanel (second rail: library / chapter context) -------- */

.m-ctx {
  /* Real editor left sidebar = rail(132) + chapter panel; total = editorSidebarWidth(340). */
  width: calc(var(--size-editor-sidebar) - 132px);
  flex: none;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.m-ctx__head {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-md) var(--space-lg) var(--space-sm);
}
.m-ctx__novel {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0 var(--space-lg) var(--space-md);
  padding: var(--space-md);
  background: var(--surface-container-high);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-large);
  cursor: pointer;
  color: var(--text-secondary);
}
.m-ctx__novel:hover { border-color: var(--border-input); background: var(--hover); }
.m-ctx__novel--empty { color: var(--text-muted); }
.m-ctx__sec-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-2xl) var(--space-xxs);
}
.m-ctx__sec-title {
  font: 600 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  color: var(--text-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.m-ctx__sec-count {
  font: 500 var(--type-ui-tiny-size)/1 var(--font-mono);
  color: var(--text-subtle);
  margin-left: auto;
}
.m-ctx__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 var(--space-sm) var(--space-md);
}
.m-ctx__list--chapters { flex: 1; min-height: 0; overflow: auto; padding-bottom: var(--space-md); }
.m-ctx__list--runs { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--space-sm) var(--space-md); }

.m-ctx__empty {
  padding: var(--space-2xl) var(--space-lg);
  font: 400 var(--type-ui-small-size)/1.5 var(--font-sans);
  color: var(--text-muted);
  text-align: center;
}

.m-ctx__run {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: var(--space-md);
  margin-bottom: var(--space-xxs);
  border: 0;
  border-radius: var(--radius-medium);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.m-ctx__run:hover { background: var(--hover); }
.m-ctx__run.is-active { background: var(--selected); }
.m-ctx__run-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}
.m-ctx__run-title {
  flex: 1;
  min-width: 0;
  font: 600 var(--type-ui-small-size)/1.35 var(--font-sans);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-ctx__run.is-active .m-ctx__run-title { color: var(--text-primary); }
.m-ctx__run-meta {
  font: 400 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  color: var(--text-muted);
  padding-left: 2px;
}

.m-ctx__chapter {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-medium);
  cursor: pointer;
  text-align: left;
  color: var(--text-secondary);
  font: var(--type-ui-weight) var(--type-ui-size)/1.3 var(--font-sans);
}
.m-ctx__chapter:hover { background: var(--hover); }
.m-ctx__chapter.is-active {
  background: var(--selected);
  border-color: var(--border-input);
  color: var(--text-primary);
}
.m-ctx__chapter-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-ctx__add {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-xs);
  border: 1px dashed var(--border-input);
  background: transparent;
  border-radius: var(--radius-medium);
  cursor: pointer;
  color: var(--text-muted);
  font: var(--type-ui-weight) var(--type-ui-small-size)/1.3 var(--font-sans);
}
.m-ctx__add:hover { color: var(--text-secondary); border-color: var(--accent); background: var(--hover); }

/* ---- AgentPanel (rightmost agent trace) --------------------------- */

.m-agent {
  width: var(--size-chat-panel);
  flex: none;
  background: var(--surface-container);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.m-agent__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-2xl);
  border-bottom: 1px solid var(--border-subtle);
}
.m-agent__head-l { display: flex; align-items: flex-start; gap: var(--space-sm); flex: 1; min-width: 0; }
.m-agent__head-r { display: flex; align-items: center; gap: 2px; }
.m-agent__head-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-container-high);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-medium);
  color: var(--accent);
  flex: none;
}
.m-agent__head-meta { min-width: 0; flex: 1; }
.m-agent__head-title {
  font: 600 var(--type-ui-size)/1.3 var(--font-sans);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-agent__head-sub {
  margin-top: 2px;
  font: 400 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  color: var(--text-muted);
}
.m-agent__scroll {
  flex: 1;
  overflow: auto;
  padding: var(--space-lg) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.m-agent__card {
  background: var(--surface-container-high);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-large);
  overflow: hidden;
}
.m-agent__card--section { background: var(--surface); border-color: var(--border-input); }
.m-agent__card--reasoning { background: transparent; border-style: dashed; }
.m-agent__card-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.m-agent__icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-dim);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-small);
  color: var(--text-muted);
  flex: none;
}
.m-agent__icon.is-done { color: var(--success); border-color: var(--addition-border); background: var(--addition-bg); }
.m-agent__icon--reasoning { background: transparent; border-style: dashed; }
.m-agent__title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  font: 500 var(--type-ui-size)/1.3 var(--font-sans);
  color: var(--text-primary);
}
.m-agent__title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-agent__progress {
  font: 500 var(--type-ui-tiny-size)/1 var(--font-mono);
  color: var(--text-muted);
}
.m-agent__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 10px/1 var(--font-mono);
}
.m-agent__subtitle {
  padding: 0 var(--space-md) var(--space-sm) calc(var(--space-md) + 22px + var(--space-sm));
  font: 400 var(--type-ui-tiny-size)/1.4 var(--font-sans);
  color: var(--text-muted);
}
.m-agent__reasoning-body {
  padding: var(--space-sm) var(--space-md) var(--space-md) calc(var(--space-md) + 22px + var(--space-sm));
  font: 400 var(--type-ui-small-size)/1.6 var(--font-serif);
  color: var(--text-secondary);
}
.m-agent__reasoning-body p { margin: 0 0 var(--space-sm); }
.m-agent__md { padding: var(--space-md) var(--space-xs) 0; }
.m-agent__md-rule { height: 1px; background: var(--border-subtle); margin: var(--space-md) 0; }
.m-agent__md-h2 {
  margin: 0 0 var(--space-sm);
  font: 600 var(--type-ui-size)/1.3 var(--font-sans);
  color: var(--text-primary);
}
.m-agent__md-h3 {
  margin: var(--space-md) 0 var(--space-xs);
  font: 600 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.m-agent__md-list {
  margin: 0;
  padding-left: var(--space-3xl);
  font: 400 var(--type-ui-small-size)/1.6 var(--font-serif);
  color: var(--text-secondary);
}
.m-agent__md-list li { margin-bottom: 2px; }

/* ---- Subagent / Skill edit panel (home main pane) ------------------ */
/* Mirrors subagent_edit_panel.dart / agent_skill_edit_panel.dart.        */

.m-edit {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
}

.m-edit__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: 52px;
  flex: none;
  padding: 0 var(--space-2xl);
  background: var(--surface-container);
  border-bottom: 1px solid var(--border);
}
.m-edit__head-title {
  font: 600 var(--type-ui-size)/1.3 var(--font-sans);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-edit__head-spacer { flex: 1; }
.m-edit__head-enabled {
  font: 400 var(--type-ui-small-size)/1 var(--font-sans);
  color: var(--text-secondary);
}
.m-edit__danger { color: var(--deletion-border); }
.m-edit__danger:hover { background: var(--deletion-bg); }
.m-edit__danger .m-icon { color: var(--deletion-border); }

.m-edit__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-4xl) var(--space-6xl) var(--space-6xl);
  display: flex;
  flex-direction: column;
}

/* Hero — avatar + title + subtitle. */
.m-edit__hero {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-4xl);
}
.m-edit__avatar {
  width: 64px;
  height: 64px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-dim);
  border: 2px solid var(--border-input);
  border-radius: var(--radius-large);
  color: var(--text-muted);
}
.m-edit__avatar-emoji { font-size: 30px; line-height: 1; }
.m-edit__hero-meta { flex: 1; min-width: 0; }
.m-edit__hero-title {
  font: 600 26px/1.2 var(--font-serif);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-edit__hero-sub {
  margin-top: 2px;
  font: 400 var(--type-ui-small-size)/1.4 var(--font-sans);
  color: var(--text-muted);
}
.m-edit__hero-actions { flex: none; }

/* Field labels + layout. */
.m-edit__label {
  font: var(--type-ui-medium-weight) var(--type-ui-size)/1.3 var(--font-sans);
  color: var(--text-secondary);
  margin: var(--space-2xl) 0 var(--space-sm);
}
.m-edit__body > .m-edit__hero + .m-edit__row > .m-edit__col > .m-edit__label:first-child,
.m-edit__body > .m-edit__hero + .m-edit__label { margin-top: 0; }
.m-edit__row { display: flex; gap: var(--space-2xl); align-items: flex-start; }
.m-edit__col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-edit__col .m-edit__label { margin-top: 0; }
.m-edit__seg { align-self: flex-start; }

/* Textarea variant of m-input. */
.m-textarea {
  resize: vertical;
  min-height: 64px;
  line-height: 1.6;
  font-family: var(--font-sans);
}
.m-edit__prompt {
  font-family: var(--font-mono);
  font-size: var(--type-ui-small-size);
  min-height: 280px;
}
.m-edit__prompt:disabled {
  background: var(--surface-dim);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Locked slug display (read-only input look). */
.m-input--locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: rgba(0, 0, 0, 0.02);
  color: var(--text-muted);
  cursor: default;
}

/* Model "select" button. */
.m-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-container-high);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-large);
  color: var(--text-primary);
  font: 400 var(--type-ui-size)/1.3 var(--font-sans);
  cursor: pointer;
  text-align: left;
}
.m-select:hover { border-color: var(--accent); }
.m-select__placeholder { color: var(--text-subtle); }
.m-select-wrap { position: relative; }
.m-select-wrap.is-open .m-select { border-color: var(--accent); }
.m-select-wrap.is-open .m-select__caret { transform: rotate(180deg); }
.m-select__caret { transition: transform 160ms ease; }

/* Model dropdown menu — mirrors model_selector.dart _ModelMenuContent. */
.m-select__menu {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 0;
  right: 0;
  background: var(--canvas);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-large);
  box-shadow: 0 8px 28px rgba(44, 36, 24, 0.18);
  padding: var(--space-xs) 0;
  z-index: 30;
}
.m-select__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.m-select__item:hover { background: var(--hover); }
.m-select__item-icon { color: var(--text-muted); }
.m-select__item-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-select__item-name {
  font: 400 var(--type-ui-size)/1.3 var(--font-sans);
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-select__item-provider {
  font: 400 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  color: var(--text-muted);
}
.m-select__item.is-selected .m-select__item-icon,
.m-select__item.is-selected .m-select__item-name { color: var(--accent); }
.m-select__item-check { color: var(--accent); }
.m-select__divider { height: 1px; background: var(--border); margin: var(--space-xs) 0; }
.m-select__add {
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: center;
  font: 400 var(--type-ui-size)/1.3 var(--font-sans);
  color: var(--text-muted);
}
.m-select__add:hover { background: var(--hover); color: var(--text-secondary); }

/* Prompt header row (label + 使用自定义提示词 switch). */
.m-edit__prompt-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.m-edit__prompt-head .m-edit__label { margin-bottom: var(--space-sm); }
.m-edit__custom-label {
  font: 400 var(--type-ui-small-size)/1 var(--font-sans);
  color: var(--text-secondary);
}

/* Switch — mirrors MirroricSwitch. */
.m-switch {
  position: relative;
  width: 36px;
  height: 20px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--border-input);
  cursor: pointer;
  transition: background-color 160ms ease;
}
.m-switch.is-on { background: var(--accent); }
.m-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 160ms ease;
}
.m-switch.is-on .m-switch__knob { transform: translateX(16px); }

/* ---- Compact composer model selector (ComposerModelSelect) --------- */
/* Mirrors model_selector.dart ModelSelectorButton (bottom of composer).  */

.m-cmodel { position: relative; }
.m-cmodel__btn {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px 6px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-muted);
  font: 400 13px/1.3 var(--font-sans);
  border-radius: var(--radius-medium);
}
.m-cmodel__btn:hover { background: var(--hover); color: var(--text-secondary); }
.m-cmodel__caret { transition: transform 160ms ease; }
.m-cmodel.is-open .m-cmodel__caret { transform: rotate(180deg); }

/* dropdown — opens upward, right-aligned to the button */
.m-cmodel__menu {
  position: absolute;
  bottom: calc(100% + var(--space-xs));
  right: 0;
  width: 280px;
  background: var(--canvas);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-large);
  box-shadow: 0 8px 28px rgba(44, 36, 24, 0.18);
  padding: var(--space-xs) 0;
  z-index: 40;
}
.m-cmodel__item {
  display: flex; align-items: center; gap: var(--space-md);
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  background: transparent; border: 0; cursor: pointer; text-align: left;
}
.m-cmodel__item:hover { background: var(--hover); }
.m-cmodel__item-icon { color: var(--text-muted); }
.m-cmodel__item-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-cmodel__item-name {
  font: 400 var(--type-ui-size)/1.3 var(--font-sans);
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-cmodel__item-provider {
  font: 400 var(--type-ui-tiny-size)/1.3 var(--font-sans);
  color: var(--text-muted);
}
.m-cmodel__item.is-selected .m-cmodel__item-icon,
.m-cmodel__item.is-selected .m-cmodel__item-name { color: var(--accent); }
.m-cmodel__item-check { color: var(--accent); }
.m-cmodel__divider { height: 1px; background: var(--border); margin: var(--space-xs) 0; }
.m-cmodel__add {
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  background: transparent; border: 0; cursor: pointer; text-align: center;
  font: 400 var(--type-ui-size)/1.3 var(--font-sans);
  color: var(--text-muted);
}
.m-cmodel__add:hover { background: var(--hover); color: var(--text-secondary); }

/* =========================================================================
   Flat AI nav item — rounded row that selects + opens a management grid.
   Mirrors _buildLeafNavItem() in home.dart.
   ========================================================================= */
.m-sb-nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 var(--space-sm) var(--space-sm);
}
.m-sb-nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  background: transparent;
  border: 0;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-medium);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}
.m-sb-nav:hover { background: var(--hover); }
.m-sb-nav__icon { color: var(--text-muted); }
.m-sb-nav__title {
  flex: 1;
  min-width: 0;
  font: var(--type-ui-medium-weight) var(--type-ui-size)/var(--type-ui-line) var(--font-sans);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-sb-nav__go { color: var(--text-subtle); }
.m-sb-nav.is-selected { background: var(--selected); }
.m-sb-nav.is-selected .m-sb-nav__icon,
.m-sb-nav.is-selected .m-sb-nav__go { color: var(--accent); }
.m-sb-nav.is-selected .m-sb-nav__title {
  color: var(--text-primary);
  font-weight: var(--type-ui-semibold-weight);
}

/* =========================================================================
   Home AI management grid pages — 提示词 / 智能体 / 技能 / 快捷方式.
   Mirrors home_agent_management_lists.dart + home_management_cards.dart:
   header (icon + title + subtitle + search + 新建) →
   label + count → medium card grid → dotted 新建 card.
   ========================================================================= */
.m-mgmt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
}

/* Header band — aligned tonally with the surface-container title bar. */
.m-mgmt__head {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex: none;
  padding: var(--space-3xl) var(--space-5xl);
  background: var(--surface-container);
  border-bottom: 1px solid var(--border);
}
.m-mgmt__head-icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-large);
  background: rgba(196, 149, 106, 0.13);
  color: var(--accent);
}
.m-mgmt__head-meta { flex: 1; min-width: 0; }
.m-mgmt__title {
  font: 700 22px/1.2 var(--font-serif);
  color: var(--text-primary);
}
.m-mgmt__sub {
  margin-top: 2px;
  font: 400 var(--type-ui-small-size)/1.45 var(--font-sans);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline search in the header. */
.m-mgmt__search {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 200px;
  height: var(--size-button-h-sm);
  padding: 0 var(--space-lg);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-large);
  background: var(--surface-container-high);
  color: var(--text-muted);
}
.m-mgmt__search:focus-within { border-color: var(--accent); }
.m-mgmt__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: 0;
  font: 400 var(--type-ui-size)/1.4 var(--font-sans);
  color: var(--text-primary);
}
.m-mgmt__search-input::placeholder { color: var(--text-subtle); }

/* Scroll region. */
.m-mgmt__scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-3xl) var(--space-5xl) var(--space-5xl);
}
.m-mgmt__section-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
  font: var(--type-ui-tiny-weight) var(--type-ui-tiny-size)/1.3 var(--font-sans);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.m-mgmt__count { letter-spacing: 0; text-transform: none; }

/* Card grid — medium cards (≈ 360×150 in Flutter). */
.m-mgmt__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-3xl);
  align-content: start;
}

/* ---- Management card ----------------------------------------------- */
.m-mgmt-card {
  display: flex;
  flex-direction: column;
  min-height: 148px;
  padding: var(--space-2xl);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.m-mgmt-card:hover {
  background: var(--surface-container-high);
  border-color: var(--accent);
}
.m-mgmt-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.m-mgmt-card__avatar,
.m-mgmt-card__badge {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-large);
}
.m-mgmt-card__avatar {
  background: var(--surface-dim);
  border: 1px solid var(--border-input);
  color: var(--text-muted);
}
.m-mgmt-card__avatar-emoji { font-size: 19px; line-height: 1; }
.m-mgmt-card__badge {
  background: rgba(196, 149, 106, 0.13);
  color: var(--accent);
}
.m-mgmt-card__title {
  flex: 1;
  min-width: 0;
  font: 600 var(--type-ui-size)/1.3 var(--font-sans);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-mgmt-card__go { color: var(--text-subtle); opacity: 0; transition: opacity 140ms ease; }
.m-mgmt-card:hover .m-mgmt-card__go { opacity: 1; color: var(--accent); }
.m-mgmt-card__desc {
  flex: 1;
  margin: var(--space-lg) 0;
  font: 400 var(--type-ui-small-size)/1.55 var(--font-sans);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-mgmt-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ---- Meta tag ------------------------------------------------------ */
.m-mgmt-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--space-sm);
  border-radius: var(--radius-small);
  font: 400 var(--type-ui-tiny-size)/1.2 var(--font-sans);
  background: rgba(138, 125, 107, 0.12);
  color: var(--text-muted);
}
.m-mgmt-tag .m-icon { color: currentColor; }
.m-mgmt-tag--accent { background: rgba(196, 149, 106, 0.14); color: var(--accent); }
.m-mgmt-tag--success { background: var(--addition-bg); color: var(--success); }
.m-mgmt-tag--muted { background: rgba(138, 125, 107, 0.10); color: var(--text-subtle); }

/* ---- Create card --------------------------------------------------- */
.m-mgmt-card--create {
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background: var(--surface-dim);
  border: 1.5px dashed var(--border-input);
  color: var(--text-muted);
}
.m-mgmt-card--create:hover {
  background: var(--hover);
  border-color: var(--accent);
}
.m-mgmt-card__create-plus {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(196, 149, 106, 0.12);
  color: var(--accent);
}
.m-mgmt-card__create-label {
  font: 600 var(--type-ui-size)/1.3 var(--font-sans);
  color: var(--text-muted);
}
.m-mgmt-card--create:hover .m-mgmt-card__create-label { color: var(--text-secondary); }

/* ---- Empty / no-result state --------------------------------------- */
.m-mgmt__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-6xl) 0;
  color: var(--text-muted);
}
.m-mgmt__empty-text {
  font: 400 var(--type-ui-size)/1.4 var(--font-sans);
  color: var(--text-muted);
}