@layer overrides {
/* ===========================================================================
   overrides —— 计划4/X1「!important 军备竞赛」收敛的落点层（@layer 序末位，最强）。
   历史上 app.css(现 components.css) 因 link 序在 flow/views 之前，只能用 !important
   压住后加载的 flow/views；monorepo @layer 化后 components 是更早层、normal 声明输给
   后层。X1 把这些「为赢跨层」的规则从 components 整条迁到本层：**去掉 !important、改用
   层序取胜**（overrides 晚于 tokens/shell/sidebar/components/views/flow/batch，其 normal
   声明按层序胜过所有更早层的 normal 声明）。已核验 components↔views/batch/shell 无跨层
   important 冲突（唯一的 important 契约=shell 的 .hidden/.brand-lockup/.view:not(.active)
   仍以 !important 保留、恒胜 normal，见 shell.css）。规则按源序、每源规则一块迁入以保
   「同特异性/base-vs-@media」级联等价。逐族迁移 + 9 视图 + 14 交互态/窄屏/四主题逐像素零 diff
   见 .superpowers/sdd/task-x1-report.md。
   =========================================================================== */

  /* ---- X1 g1_skeleton: .app-shell .side-rail .workspace .view .topbar .rail-nav .rail-brand .logo-mark .account-card (53 decls, 26 rules) ---- */
  @media (max-width: 900px) {
    .app-shell,
    .app-shell.rail-collapsed {
      grid-template-columns: 72px minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
    }
  }
  @media (max-width: 900px) {
    .app-shell:not(.rail-collapsed) {
      grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    }
  }
  @media (max-width: 900px) {
    .side-rail {
      width: auto;
    }
  }
  .app-shell:not(.hidden) {
    grid-template-columns: var(--rail-open-width) minmax(0, 1fr);
  }
  .app-shell.rail-collapsed:not(.hidden) {
    grid-template-columns: var(--rail-compact-width) minmax(0, 1fr);
  }
  .side-rail {
    width: var(--rail-open-width);
    max-width: var(--rail-open-width);
    padding-inline: 12px;
  }
  .app-shell.rail-collapsed .side-rail {
    width: var(--rail-compact-width);
    max-width: var(--rail-compact-width);
    padding-inline: 8px;
  }
  .brand-home > span:not(.logo-mark) {
    display: grid;
    justify-items: start;
    text-align: left;
  }
  .rail-nav button,
  .account-card {
    width: 100%;
    max-width: 100%;
  }
  .account-card {
    margin-inline: 0;
  }
  .workspace {
    min-width: 0;
    overflow-x: auto;
    overflow-y: auto;
  }
  .workspace > .topbar,
  .workspace > .view {
    min-width: min(var(--workspace-readable-min), calc(100vw - var(--rail-compact-width)));
  }
  .app-shell:not(.rail-collapsed) .workspace > .topbar,
  .app-shell:not(.rail-collapsed) .workspace > .view {
    min-width: var(--workspace-readable-min);
  }
  @media (max-width: 900px) {
    .app-shell:not(.hidden),
    .app-shell:not(.rail-collapsed):not(.hidden) {
      grid-template-columns: var(--rail-open-width) minmax(0, 1fr);
    }
  }
  @media (max-width: 900px) {
    .app-shell.rail-collapsed:not(.hidden) {
      grid-template-columns: var(--rail-compact-width) minmax(0, 1fr);
    }
  }
  @media (max-width: 900px) {
    .side-rail {
      width: var(--rail-open-width);
      max-width: var(--rail-open-width);
    }
  }
  @media (max-width: 900px) {
    .workspace {
      padding-inline: 14px;
    }
  }
  @media (max-width: 560px) {
    .side-rail {
      padding-inline: 8px;
    }
  }
  .workspace > .view {
    padding: var(--page-edge-gap);
    min-height: calc(100dvh - 62px);
  }
  .workspace > .view {
    overflow: hidden;
  }
  .app-shell.rail-collapsed .rail-brand {
    justify-content: center;
    padding-inline: 0;
  }
  .app-shell.rail-collapsed .brand-home > span:not(.logo-mark),
  .app-shell.rail-collapsed .brand-home strong,
  .app-shell.rail-collapsed .brand-home small {
    display: none;
    width: 0;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
  }
  .app-shell.rail-collapsed .brand-home .logo-mark {
    display: grid;
    flex: 0 0 32px;
  }
  .rail-collapsed .brand-home > span:not(.logo-mark),
  .rail-collapsed .brand-home strong,
  .rail-collapsed .brand-home small {
    display: block;
    width: 0;
    max-width: 0;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
  }
  .rail-collapsed .brand-home .logo-mark {
    flex: 0 0 auto;
  }
  #appShell .workspace {
    overflow-x: auto;
    overflow-y: auto;
  }

  /* ---- X1 g2_home: .brand-home .project-home .top-actions (31 decls, 12 rules) ---- */
  .brand-home {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
  }
  .brand-home strong,
  .brand-home small {
    text-align: left;
  }
  @media (max-width: 560px) {
    .brand-home {
      gap: 10px;
    }
  }
  .project-home,
  .material-library-page,
  .skill-page,
  .admin-panel {
    height: auto;
    max-height: none;
  }
  .project-home {
    display: grid;
    align-content: start;
    gap: 0;
  }
  .top-actions {
    position: fixed;
    top: 12px;
    right: var(--page-edge-gap);
    z-index: 70;
  }
  .project-home {
    grid-template-rows: auto auto auto;
    align-content: start;
    align-items: start;
  }
  .app-shell.rail-collapsed .brand-home {
    width: 32px;
    min-width: 32px;
    justify-content: center;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }
  .rail-collapsed .brand-home {
    gap: 0;
    justify-content: center;
  }
  .app-shell.rail-collapsed .brand-home,
  .app-shell.rail-collapsed .brand-home .logo-mark {
    display: none;
  }
  #projectPanel .project-home,
  #projectPanel .project-search-toolbar,
  #projectPanel #projectSearchInput {
    width: 100%;
    max-width: none;
  }
  .project-home,
  .material-library-page,
  .skill-page,
  .admin-panel {
    min-height: 0;
  }

  /* ---- X1 g3_cards: .project-card .project-card-grid .project-card-actions .skill-card .skill-card-grid .card-top .card-foot .card-menu .card-menu-button .card-menu-wrap .drop-card (77 decls, 34 rules) ---- */
  .project-card-actions,
  .project-delete-icon {
    display: none;
  }
  .material-manager .drop-card,
  .material-card .tag-row {
    display: none;
  }
  .card-menu-button,
  .project-card .card-menu-button,
  .manager-card .card-menu-button,
  .manager-group-row .card-menu-button {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .card-menu-button:hover,
  .card-menu-wrap:has(.card-menu:not(.hidden)) .card-menu-button,
  .card-menu-button:focus-visible {
    background: color-mix(in oklch, var(--primary-soft) 70%, transparent);
  }
  .card-menu {
    border: 0;
  }
  .card-menu button {
    border: 0;
  }
  .skill-card .card-top > span {
    display: none;
  }
  .project-card-grid {
    align-content: start;
    align-items: start;
    gap: clamp(14px, 1.8vw, 24px);
    margin-top: 0;
  }
  .material-card .card-top {
    padding-right: 34px;
  }
  .material-card .card-foot {
    margin-top: 12px;
  }
  .project-card-grid {
    margin-top: 0;
    align-content: start;
  }
  .material-card .card-foot {
    margin-top: 10px;
  }
  .card-menu-button,
  .card-menu-button:hover,
  .card-menu-button:focus-visible,
  .card-menu-wrap:has(.card-menu:not(.hidden)) .card-menu-button,
  .group-menu-wrap > .card-menu-button,
  .group-menu-wrap > .card-menu-button:hover,
  .group-menu-wrap:hover > .card-menu-button,
  .group-menu-wrap:has(.card-menu:not(.hidden)) > .card-menu-button,
  .filter-menu-button,
  .filter-menu-button:hover,
  .filter-menu-button:focus-visible,
  .filter-pill-wrap.menu-open .filter-menu-button {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  .card-menu,
  .filter-pill-menu,
  .material-type-popover {
    z-index: 5000;
  }
  .material-card .card-menu-wrap,
  .material-card .card-menu-button,
  .material-card .card-menu {
    cursor: default;
  }
  .material-card .card-foot {
    margin-top: 0;
  }
  .material-card .card-menu,
  .project-card .card-menu,
  .skill-card .card-menu,
  .manager-group-row .card-menu,
  .filter-pill-wrap .card-menu {
    overflow: visible;
    z-index: 6000;
  }
  .skill-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-auto-rows: auto;
  }
  .skill-card {
    height: 200px;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 10px;
    padding: 18px;
    overflow: hidden;
  }
  .skill-card small {
    display: -webkit-box;
  }
  .project-card,
  .manager-card,
  .skill-card,
  .material-card,
  .create-card {
    box-shadow: none;
    transform: none;
  }
  .project-card:hover,
  .manager-card:hover,
  .skill-card:hover,
  .material-card:hover,
  .create-card:hover,
  .script-part:hover,
  .mini-action:hover,
  .group-add-button:hover,
  .model-chip:hover,
  .upload-zone:hover,
  .upload-zone.is-dragging,
  .upload-zone.attention {
    transform: none;
    box-shadow: none;
  }
  .project-card-grid {
    padding-top: 2px;
    padding-bottom: 18px;
  }
  .filter-pill-wrap .card-menu-button,
  .material-filter-line .card-menu-button,
  .manager-group-row .card-menu-button {
    height: 32px;
  }
  .project-card-grid {
    align-items: start;
  }
  .material-card .card-top {
    display: flex;
    align-items: flex-start;
    min-height: 40px;
    height: 40px;
    order: 0;
  }
  .material-card .card-top b {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
    line-height: 20px;
  }
  .material-card .card-menu-wrap {
    flex: 0 0 var(--hit-target);
    width: var(--hit-target);
    height: var(--hit-target);
    margin-left: auto;
  }
  .material-card .card-menu-button {
    width: var(--hit-target);
    height: var(--hit-target);
    min-width: var(--hit-target);
    min-height: var(--hit-target);
  }
  .material-card .card-foot {
    display: flex;
    align-items: center;
    height: 20px;
    margin-top: auto;
    padding: 0;
    position: static;
    transform: none;
    font-size: 11px;
    order: 3;
  }
  .material-card .card-foot em {
    display: none;
  }
  .material-card .card-menu {
    z-index: 100;
  }
  .project-home.batch-mode-active .project-card-grid {
    padding-bottom: 72px;
  }
  .project-home .project-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(224px, 252px));
    gap: var(--space-3);
  }

  /* ---- X1 g4_material: .material-card .material-card-cover .material-card-meta .material-type-badge .material-scope-icon .material-scope-line .material-scope-switch .scope-tabs .material-library-page .material-project-selector (110 decls, 33 rules) ---- */
  .material-library-page,
  .skill-page,
  .admin-panel {
    padding-bottom: clamp(72px, 10vh, 140px);
  }
  .material-library-page,
  .skill-page,
  .admin-panel {
    min-height: 820px;
  }
  @media (max-width: 900px) {
    .material-library-page,
    .skill-page,
    .admin-panel {
      min-height: 760px;
    }
  }
  .material-library-page,
  .skill-page,
  .admin-panel {
    padding-bottom: var(--panel-content-pad);
  }
  .material-library-page,
  .skill-page,
  .admin-panel,
  .project-home {
    padding-bottom: var(--panel-content-pad);
  }
  .material-card {
    min-height: 132px;
    padding: 16px;
    grid-template-rows: auto minmax(36px, 1fr) auto;
  }
  .material-card p {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 22px;
  }
  .material-card {
    min-height: 118px;
    padding: 14px;
    grid-template-rows: auto auto auto;
  }
  .material-card p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 20px;
  }
  .material-card {
    cursor: default;
  }
  .material-scope-line {
    align-items: center;
    justify-content: space-between;
  }
  .material-scope-switch {
    border-radius: 999px;
    padding: 3px;
  }
  .material-scope-switch button {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
  }
  .material-card {
    cursor: pointer;
  }
  .material-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .material-card-meta em,
  .material-file-count {
    display: none;
  }
  .material-card {
    height: auto;
    min-height: 180px;
    max-height: 224px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 8px;
    align-content: start;
  }
  .material-card-cover,
  .material-card-preview {
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    overflow: hidden;
  }
  .material-scope-line {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }
  .material-scope-icon,
  .material-type-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in oklch, var(--surface) 94%, transparent);
    color: var(--muted);
    display: grid;
    place-items: center;
    padding: 0;
  }
  .material-scope-icon span,
  .material-type-icon span {
    display: none;
  }
  .material-scope-control.menu-open .material-scope-icon,
  .material-type-control.menu-open .material-type-icon,
  .material-scope-icon:hover,
  .material-type-icon:hover {
    background: var(--primary-soft);
    border-color: color-mix(in oklch, var(--primary) 28%, var(--line));
    color: var(--primary-text);
  }
  .material-scope-line {
    min-height: 38px;
  }
  .material-scope-icon,
  .material-type-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
  .material-scope-icon::after {
    display: none;
  }
  .material-project-selector select,
  #materialProjectSelect {
    width: auto;
    min-width: 132px;
    max-width: 220px;
    height: 38px;
    min-height: 38px;
    border-radius: 999px;
    padding: 0 36px 0 18px;
    font-size: 14px;
    font-weight: 850;
  }
  .material-card {
    display: grid;
    grid-template-rows: 40px 112px 40px 20px;
    gap: 8px;
    min-height: 264px;
    height: 264px;
    max-height: 264px;
    padding: 14px;
    overflow: visible;
    transform: none;
  }
  .material-card:hover {
    transform: none;
  }
  .material-card .material-type-badge,
  .material-card .material-card-meta {
    display: none;
  }
  .material-card .material-card-cover {
    width: 100%;
    min-height: 112px;
    height: 112px;
    max-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(16, 65, 45, 0.12);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(231, 246, 238, 0.9), rgba(255, 252, 244, 0.9));
    order: 1;
  }
  .material-card .material-card-cover.is-placeholder {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: 14px;
    color: var(--muted);
  }
  .material-card .material-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .scope-tabs button,
  .material-scope-switch button,
  .material-filter-toolbar .material-scope-icon,
  .material-filter-toolbar .material-type-icon,
  .group-dropdown-trigger,
  .material-tag-chip.mini {
    min-height: var(--control-md);
  }

  /* ---- X1 g5_manager: .material-manager .manager-shell .manager-main .manager-sidebar .manager-filter-strip .manager-title .manager-control-stack .manager-head .manager-add-panel .unified-manager .skill-manager .panel .panel-head .admin-panel .section-label .material-grid .manager-card-grid (86 decls, 41 rules) ---- */
  .material-manager {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  }
  @media (max-width: 900px) {
    .material-manager,
    .manager-shell,
    .manager-shell:has(.manager-drawer),
    .manager-shell:has(.full-span) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .material-library-page .manager-shell,
  .skill-page .manager-shell,
  .admin-panel .admin-console {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .material-library-page .manager-sidebar,
  .material-library-page .manager-main,
  .skill-page .manager-main,
  .skill-page .manager-sidebar,
  .admin-panel .admin-section {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .material-library-page .manager-shell {
    grid-template-columns: clamp(150px, 13vw, 188px) minmax(0, 1fr);
    gap: clamp(20px, 2vw, 32px);
  }
  .material-library-page .manager-title h2 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 14px;
  }
  .material-library-page .manager-main,
  .skill-page .manager-main,
  .admin-panel .admin-console {
    padding: 0;
  }
  @media (max-width: 900px) {
    .material-library-page .manager-shell {
      grid-template-columns: minmax(150px, 188px) minmax(0, 1fr);
    }
  }
  .workspace > .view > .panel {
    min-height: calc(100dvh - 62px - (var(--page-edge-gap) * 2));
    padding: var(--panel-content-pad);
  }
  .project-home .panel-head,
  .material-library-page .manager-shell,
  .skill-page .manager-shell,
  .admin-panel .admin-console {
    margin: 0;
  }
  .project-home .panel-head,
  .material-library-page .manager-head,
  .skill-page .manager-head {
    margin-bottom: clamp(22px, 2.4vw, 34px);
  }
  .material-library-page .manager-title .section-label,
  .material-library-page .manager-head .section-label,
  .skill-page .manager-head .section-label {
    display: block;
  }
  .material-library-page .manager-title .section-label,
  .material-library-page .manager-head .section-label,
  .skill-page .manager-head .section-label,
  .project-home .section-label {
    margin: 0 0 6px;
    font-size: 12px;
  }
  .material-library-page .manager-title h2,
  .material-library-page .manager-head h2,
  .skill-page .manager-head h2,
  .project-home .panel-head h2 {
    margin: 0;
  }
  .workspace > .view > .panel {
    min-height: calc(100dvh - var(--topbar-height-effective) - (var(--page-edge-gap) * 2));
  }
  .unified-manager {
    display: block;
  }
  .material-library-page .manager-shell,
  .skill-page .manager-shell {
    grid-template-columns: 1fr;
  }
  .workspace > .view > .panel {
    height: calc(100dvh - var(--topbar-height-effective) - (var(--page-edge-gap) * 2));
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .project-home .panel-head {
    align-items: flex-start;
    margin-bottom: 14px;
  }
  .manager-head {
    margin-bottom: 16px;
  }
  .manager-control-stack {
    margin-bottom: 16px;
  }
  .material-library-page .manager-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    align-items: start;
  }
  .manager-add-panel {
    display: none;
  }
  .project-home .panel-head {
    margin-bottom: 12px;
  }
  .material-library-page .manager-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
  }
  .manager-control-stack,
  .manager-toolbar,
  .project-search-toolbar,
  .manager-toolbar > label,
  .manager-toolbar input {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  #skillPanel .skill-manager,
  #skillPanel .manager-main,
  #skillPanel .manager-control-stack,
  #skillPanel .manager-toolbar,
  #skillPanel #skillSearchInput {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .manager-card-grid,
  .material-grid,
  .project-grid,
  .manager-card,
  .project-card {
    overflow: visible;
  }
  .manager-filter-strip {
    width: auto;
  }
  .material-library-page .manager-shell,
  .material-library-page .manager-main,
  .skill-page .manager-shell,
  .skill-page .manager-main,
  .project-home .project-card-grid,
  .manager-control-stack,
  .manager-card-grid,
  .material-grid,
  .project-card-grid,
  .skill-card-grid,
  .manager-card,
  .project-card,
  .skill-card,
  .material-card {
    overflow: visible;
  }
  .manager-filter-strip {
    width: auto;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
  }
  .workspace > .view > .panel {
    overflow-x: hidden;
    overflow-y: auto;
  }
  #adminView.view.active > .admin-panel {
    flex: 1 1 auto;
    min-height: 0;
  }
  .manager-shell,
  .manager-main,
  .manager-sidebar {
    min-height: 0;
    overflow: visible;
  }
  .manager-main.full-span,
  .material-library-page .manager-main,
  .skill-page .manager-main,
  .admin-panel {
    display: flex;
    flex-direction: column;
    overflow: visible;
    max-height: none;
  }
  .manager-head,
  .manager-control-stack,
  .material-scope-line,
  .material-filter-line {
    flex: 0 0 auto;
  }
  .manager-head {
    padding-top: 2px;
  }
  .manager-card-grid,
  .material-grid,
  .skill-card-grid,
  .project-card-grid {
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    align-items: start;
    overflow: visible;
  }
  .material-grid {
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    grid-auto-rows: auto;
  }
  #appShell .workspace > .view > .panel {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .manager-card-grid.material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: 264px;
    gap: 14px;
    align-items: stretch;
    overflow: visible;
    padding: 0 0 24px 0;
  }

  /* ---- X1 g6_filter: .filter-pill .filter-pill-wrap .group-add-button (23 decls, 7 rules) ---- */
  .material-library-page .group-add-button {
    min-height: 38px;
    border-radius: 12px;
  }
  .material-library-page .group-add-button::before,
  .material-library-page .group-add-button::after {
    width: 15px;
  }
  .manager-filter-strip .filter-pill {
    width: auto;
    min-width: 0;
    max-width: none;
    padding-inline: 16px;
  }
  .filter-pill-wrap {
    flex: 0 0 auto;
    width: auto;
    max-width: max-content;
  }
  .manager-filter-strip .filter-pill {
    width: auto;
    min-width: 0;
    max-width: max-content;
    padding: 0 16px;
    white-space: nowrap;
  }
  .filter-pill-wrap:has(.filter-menu-button)::after,
  .filter-pill-wrap:hover::after,
  .filter-pill-wrap.menu-open::after {
    width: 0;
    background: transparent;
    box-shadow: none;
  }
  .filter-pill-wrap .filter-pill,
  .material-filter-line > button,
  .material-filter-line .group-add-button {
    min-height: 38px;
    height: 38px;
    padding-block: 0;
    display: inline-flex;
    align-items: center;
  }

  /* ---- X1 views: .history-toggle 迁自 views/script.css（去 !important）----
     class="icon-button history-toggle"，须盖 flow 的 .icon-button 基样式（36px 圆钮，
     同特异性 0,1,0，flow 更晚层）→ 改由 overrides 层序取胜。s08/06-script 已核验零 diff。 */
  .history-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
  }
  .history-toggle.active {
    background: var(--primary-soft);
    color: var(--primary-text);
    border-color: color-mix(in oklch, var(--primary) 22%, var(--line));
  }
}